@chisquare-tech/origine-ngx-apps-code 0.1.0 → 0.3.0

package/fesm2022/chisquare-tech-origine-ngx-apps-code.mjs

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, computed, effect, untracked, Directive, ElementRef, input, output, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, Injectable, signal, computed, effect, untracked, Directive, ElementRef, input, output, HostListener, ChangeDetectionStrategy, Component, DestroyRef } from '@angular/core';
 import { ApiService } from '@thescaffold/ngx-core';
 import { map, forkJoin, of } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterLink, Router } from '@angular/router';
+import { NgTemplateOutlet } from '@angular/common';
 import { map as map$1, catchError } from 'rxjs/operators';
 import { marked } from 'marked';
 
@@ -95,10 +96,14 @@ class CodeApi {
         return this.api.get(`${this.repoPath(project, name)}/commit/${enc(sha)}`).pipe(map((r) => data(r)));
     }
     /** One file's hunks from base to head ("" base: the head's first parent). */
-    diff(project, name, head, path, base = '') {
+    diff(project, name, head, path, base = '', opts = {}) {
         const p = { head, path };
         if (base)
             p['base'] = base;
+        if (opts.context)
+            p['context'] = String(opts.context);
+        if (opts.ignoreSpace)
+            p['w'] = 'ignore';
         return this.api.get(`${this.repoPath(project, name)}/diff`, p).pipe(map((r) => data(r)));
     }
     compare(project, name, base, head) {
@@ -110,6 +115,42 @@ class CodeApi {
             p['q'] = q;
         return this.api.get(`${this.repoPath(project, name)}/refs`, p).pipe(map((r) => data(r) ?? []));
     }
+    createTag(project, name, tag, target) {
+        return this.api.post(`${this.repoPath(project, name)}/tags`, { tag, target }).pipe(map((r) => data(r)));
+    }
+    deleteTag(project, name, tag) {
+        return this.api.delete(`${this.repoPath(project, name)}/tags/${enc(tag)}`);
+    }
+    releases(project, name) {
+        return this.api.get(`${this.repoPath(project, name)}/releases`).pipe(map((r) => data(r) ?? []));
+    }
+    createRelease(project, name, r) {
+        return this.api.post(`${this.repoPath(project, name)}/releases`, r).pipe(map((x) => data(x)));
+    }
+    updateRelease(project, name, id, r) {
+        return this.api.patch(`${this.repoPath(project, name)}/releases/${enc(id)}`, r).pipe(map((x) => data(x)));
+    }
+    deleteRelease(project, name, id, deleteTag) {
+        return this.api.delete(`${this.repoPath(project, name)}/releases/${enc(id)}${deleteTag ? '?deleteTag=true' : ''}`);
+    }
+    /** Notes drafted from the done issues and merged pull requests since the previous release. */
+    releaseNotes(project, name, target, tag = '') {
+        return this.api.post(`${this.repoPath(project, name)}/releases/notes`, { target, tag: tag || undefined }).pipe(map((r) => data(r)?.notes ?? ''));
+    }
+    addAsset(project, name, id, file) {
+        return this.api
+            .post(`${this.repoPath(project, name)}/releases/${enc(id)}/assets?filename=${encodeURIComponent(file.name)}`, null, {
+            body: file, headers: { 'Content-Type': file.type || 'application/octet-stream' },
+        })
+            .pipe(map((r) => data(r)));
+    }
+    /** A release file's bytes (the download needs the session, so no plain link works). */
+    assetBlob(project, name, id, asset) {
+        return this.api.get(`${this.repoPath(project, name)}/releases/${enc(id)}/assets/${enc(asset)}`, null, { responseType: 'blob' }).pipe(map((b) => b));
+    }
+    deleteAsset(project, name, id, asset) {
+        return this.api.delete(`${this.repoPath(project, name)}/releases/${enc(id)}/assets/${enc(asset)}`);
+    }
     createBranch(project, name, branch, from) {
         return this.api.post(`${this.repoPath(project, name)}/branches`, { name: branch, from });
     }
@@ -153,6 +194,10 @@ class CodeApi {
     comment(project, name, n, c) {
         return this.api.post(`${this.repoPath(project, name)}/pulls/${n}/comments`, c).pipe(map((r) => data(r)));
     }
+    /** Discards one of the caller's pending review comments. */
+    discardComment(project, name, n, id) {
+        return this.api.delete(`${this.repoPath(project, name)}/pulls/${n}/comments/${enc(id)}`);
+    }
     review(project, name, n, state, body = '') {
         return this.api.post(`${this.repoPath(project, name)}/pulls/${n}/reviews`, { state, body }).pipe(map((r) => data(r)));
     }
@@ -414,22 +459,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
-// One file of a diff (prototype prDiffs): its header with +/−, the hunks highlighted, and, on a pull
-// request, the review threads on its lines and a comment form on any line number.
+/** Past this many changed lines a file waits for "Load diff" (DEV-19 large diffs). */
+const LARGE = 600;
+/** Context steps for "Show more context". */
+const CONTEXT = [3, 25, 100];
+// One file of a diff (prototype prDiffs): its header with +/− and Viewed, the hunks highlighted,
+// unified or split, and, on a pull request, the review threads on its lines and a comment form on
+// any line number ("Add single comment" or part of a review). The diff loads when the file scrolls
+// near the screen; a very large one waits to be asked for.
 class DiffView {
     constructor() {
         this.api = inject(CodeApi);
         this.host = inject(CodeHost);
+        this.el = inject((ElementRef));
+        this.destroyRef = inject(DestroyRef);
         this.repo = input.required(...(ngDevMode ? [{ debugName: "repo" }] : /* istanbul ignore next */ []));
         this.file = input.required(...(ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []));
         this.head = input.required(...(ngDevMode ? [{ debugName: "head" }] : /* istanbul ignore next */ []));
         this.base = input('', ...(ngDevMode ? [{ debugName: "base" }] : /* istanbul ignore next */ []));
         this.threads = input([], ...(ngDevMode ? [{ debugName: "threads" }] : /* istanbul ignore next */ []));
         this.canComment = input(false, ...(ngDevMode ? [{ debugName: "canComment" }] : /* istanbul ignore next */ []));
+        this.mode = input('unified', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.ignoreSpace = input(false, ...(ngDevMode ? [{ debugName: "ignoreSpace" }] : /* istanbul ignore next */ []));
+        /** The file is marked viewed (pull requests); null hides the Viewed button. */
+        this.viewed = input(null, ...(ngDevMode ? [{ debugName: "viewed" }] : /* istanbul ignore next */ []));
+        /** The caller has a pending review on this pull request. */
+        this.reviewing = input(false, ...(ngDevMode ? [{ debugName: "reviewing" }] : /* istanbul ignore next */ []));
         this.comment = output();
         this.reply = output();
         this.resolve = output();
+        this.discard = output();
+        this.viewedChange = output();
         this.open = signal(true, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        this.waiting = signal(false, ...(ngDevMode ? [{ debugName: "waiting" }] : /* istanbul ignore next */ []));
+        this.context = signal(CONTEXT[0], ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
         this.diff = signal(null, ...(ngDevMode ? [{ debugName: "diff" }] : /* istanbul ignore next */ []));
         this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
         this.drafting = signal('', ...(ngDevMode ? [{ debugName: "drafting" }] : /* istanbul ignore next */ []));
@@ -437,25 +501,82 @@ class DiffView {
         this.replies = signal({}, ...(ngDevMode ? [{ debugName: "replies" }] : /* istanbul ignore next */ []));
         this.people = computed(() => new People(this.host.people()), ...(ngDevMode ? [{ debugName: "people" }] : /* istanbul ignore next */ []));
         this.threadsHere = computed(() => this.threads().filter((t) => t.path === this.file().path), ...(ngDevMode ? [{ debugName: "threadsHere" }] : /* istanbul ignore next */ []));
+        this.viewable = computed(() => this.viewed() !== null, ...(ngDevMode ? [{ debugName: "viewable" }] : /* istanbul ignore next */ []));
+        this.me = computed(() => this.host.meId(), ...(ngDevMode ? [{ debugName: "me" }] : /* istanbul ignore next */ []));
+        this.splitRows = computed(() => (this.diff()?.hunks ?? []).map((h) => pair(h.lines)), ...(ngDevMode ? [{ debugName: "splitRows" }] : /* istanbul ignore next */ []));
         this.ago = (s) => ago(s);
+        this.asked = false;
+        effect(() => {
+            // viewed files fold away (and unfold when unmarked)
+            const v = this.viewed();
+            if (v !== null)
+                untracked(() => this.open.set(!v));
+        });
         effect(() => {
-            const head = this.head();
-            const base = this.base();
+            // what the diff depends on; it loads once the file is near the screen and open
+            this.head();
+            this.base();
+            this.ignoreSpace();
+            this.context();
             const f = this.file();
-            const p = this.host.project();
-            if (p && head && !f.binary)
-                untracked(() => this.api.diff(p.id, this.repo(), head, f.path, base).subscribe({
-                    next: (d) => this.diff.set(d),
-                    error: (e) => this.error.set(apiMessage(e, 'Could not load this diff.')),
-                }));
+            if (!this.visible() || !this.open() || f.binary)
+                return;
+            untracked(() => {
+                if (!this.asked && f.additions + f.deletions > LARGE) {
+                    this.waiting.set(true);
+                    return;
+                }
+                this.load();
+            });
         });
     }
+    ngAfterViewInit() {
+        if (typeof IntersectionObserver === 'undefined') {
+            this.visible.set(true);
+            return;
+        }
+        const io = new IntersectionObserver((entries) => {
+            if (entries.some((e) => e.isIntersecting)) {
+                this.visible.set(true);
+                io.disconnect();
+            }
+        }, { rootMargin: '600px 0px' });
+        io.observe(this.el.nativeElement);
+        this.destroyRef.onDestroy(() => io.disconnect());
+    }
+    load() {
+        const p = this.host.project();
+        const f = this.file();
+        if (!p || !this.head() || f.binary)
+            return;
+        this.asked = true;
+        this.waiting.set(false);
+        this.error.set('');
+        this.api.diff(p.id, this.repo(), this.head(), f.path, this.base(), { context: this.context(), ignoreSpace: this.ignoreSpace() }).subscribe({
+            next: (d) => this.diff.set(d),
+            error: (e) => this.error.set(apiMessage(e, 'Could not load this diff.')),
+        });
+    }
+    toggleOpen() {
+        this.open.set(!this.open());
+    }
+    moreContext() {
+        const next = CONTEXT.find((c) => c > this.context());
+        if (next)
+            this.context.set(next);
+    }
     key(l) {
         return `${l.kind === 'delete' ? 'old' : 'new'}:${this.lineOf(l)}`;
     }
     lineOf(l) {
         return (l.kind === 'delete' ? l.old : l.new) ?? 0;
     }
+    /** The lines of a split row that threads and drafts hang from (a context line once). */
+    rowLines(r) {
+        if (r.left && r.right && r.left === r.right)
+            return [r.left];
+        return [r.left, r.right].filter((l) => !!l);
+    }
     threadsAt(l) {
         const side = l.kind === 'delete' ? 'old' : 'new';
         const n = this.lineOf(l);
@@ -467,11 +588,11 @@ class DiffView {
         this.drafting.set(this.key(l));
         this.draftBody.set('');
     }
-    send(l) {
+    send(l, pending) {
         const body = this.draftBody().trim();
         if (!body)
             return;
-        this.comment.emit({ path: this.file().path, side: l.kind === 'delete' ? 'old' : 'new', line: this.lineOf(l), body });
+        this.comment.emit({ path: this.file().path, side: l.kind === 'delete' ? 'old' : 'new', line: this.lineOf(l), body, pending });
         this.drafting.set('');
         this.draftBody.set('');
     }
@@ -486,130 +607,254 @@ class DiffView {
         this.setReply(id, '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DiffView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DiffView, isStandalone: true, selector: "o-diff", inputs: { repo: { classPropertyName: "repo", publicName: "repo", isSignal: true, isRequired: true, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, head: { classPropertyName: "head", publicName: "head", isSignal: true, isRequired: true, transformFunction: null }, base: { classPropertyName: "base", publicName: "base", isSignal: true, isRequired: false, transformFunction: null }, threads: { classPropertyName: "threads", publicName: "threads", isSignal: true, isRequired: false, transformFunction: null }, canComment: { classPropertyName: "canComment", publicName: "canComment", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { comment: "comment", reply: "reply", resolve: "resolve" }, ngImport: i0, template: `
-    <div class="o-card" [attr.data-testid]="'diff-' + file().path">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DiffView, isStandalone: true, selector: "o-diff", inputs: { repo: { classPropertyName: "repo", publicName: "repo", isSignal: true, isRequired: true, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, head: { classPropertyName: "head", publicName: "head", isSignal: true, isRequired: true, transformFunction: null }, base: { classPropertyName: "base", publicName: "base", isSignal: true, isRequired: false, transformFunction: null }, threads: { classPropertyName: "threads", publicName: "threads", isSignal: true, isRequired: false, transformFunction: null }, canComment: { classPropertyName: "canComment", publicName: "canComment", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, ignoreSpace: { classPropertyName: "ignoreSpace", publicName: "ignoreSpace", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, reviewing: { classPropertyName: "reviewing", publicName: "reviewing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { comment: "comment", reply: "reply", resolve: "resolve", discard: "discard", viewedChange: "viewedChange" }, ngImport: i0, template: `
+    <div class="o-card" [attr.id]="'file-' + file().path" [attr.data-testid]="'diff-' + file().path">
       <div class="o-ch" style="background:var(--o-well)">
-        <button type="button" class="o-btn o-ghost o-xs" (click)="open.set(!open())" [attr.aria-expanded]="open()" [attr.aria-label]="(open() ? 'Collapse ' : 'Expand ') + file().path">{{ open() ? '▾' : '▸' }}</button>
+        <button type="button" class="o-btn o-ghost o-xs" (click)="toggleOpen()" [attr.aria-expanded]="open()" [attr.aria-label]="(open() ? 'Collapse ' : 'Expand ') + file().path">{{ open() ? '▾' : '▸' }}</button>
         <span class="o-mono o-sm o-ell">{{ file().oldPath && file().oldPath !== file().path ? file().oldPath + ' → ' : '' }}{{ file().path }}</span>
         <span class="o-grn-t o-sm">+{{ file().additions }}</span><span class="o-red-t o-sm">−{{ file().deletions }}</span>
         @if (threadsHere().length) {<span class="o-faint o-sm">💬 {{ threadsHere().length }}</span>}
-        <span class="o-r"><ng-content /></span>
+        <span class="o-r o-flex" style="gap:6px">
+          @if (open() && diff() && context() < 100 && !file().binary) {<button type="button" class="o-btn o-xs" (click)="moreContext()" [attr.aria-label]="'Show more context in ' + file().path">More context</button>}
+          <ng-content />
+          @if (viewable()) {
+            <button type="button" class="o-btn o-xs viewed" role="checkbox" [attr.aria-checked]="viewed()" [attr.aria-label]="'Viewed ' + file().path" (click)="viewedChange.emit(!viewed())"><span class="o-cbx" [class.o-on]="viewed()" style="width:12px;height:12px"></span>Viewed</button>
+          }
+        </span>
       </div>
       @if (open()) {
         @if (file().binary) {
           <div class="o-empty o-sm">A binary file.</div>
+        } @else if (waiting()) {
+          <div class="o-empty o-sm o-col" style="gap:8px;align-items:center">
+            <span>{{ file().additions + file().deletions }} changed lines.</span>
+            <button type="button" class="o-btn o-sm" (click)="waiting.set(false); load()">Load diff</button>
+          </div>
         } @else if (error()) {
           <div class="o-note o-red" role="alert">{{ error() }}</div>
         } @else if (diff(); as d) {
           @if (d.truncated) {<div class="o-note">This diff is too large to show in full.</div>}
-          <div class="o-code" style="overflow-x:auto" role="table" [attr.aria-label]="'Changes to ' + file().path">
-            @for (h of d.hunks; track $index) {
-              <div class="hunk o-mono" role="row">{{ h.header }}</div>
-              @for (l of h.lines; track $index) {
-                <div class="o-ln" role="row" [class.o-add]="l.kind === 'add'" [class.o-del]="l.kind === 'delete'">
-                  <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.kind === 'delete' ? l.old : l.new }}</span>
-                  <span class="o-s" aria-hidden="true">{{ l.kind === 'add' ? '+' : l.kind === 'delete' ? '−' : ' ' }}</span>
-                  <span class="o-sr-only">{{ l.kind === 'add' ? 'added' : l.kind === 'delete' ? 'removed' : '' }}</span>
-                  <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
-                </div>
-                @for (t of threadsAt(l); track t.id) {
-                  <div class="o-thread" [attr.data-testid]="'thread-' + t.id">
-                    <div class="o-cb o-col" style="gap:6px;padding:10px 12px">
-                      @for (c of t.comments; track c.id) {
-                        <span class="o-sm"><b>{{ people().name(c.authorId) }}</b><span class="o-faint"> · {{ ago(c.createdAt) }}{{ c.pending ? ' · pending' : '' }}</span></span>
-                        <span style="white-space:pre-wrap">{{ c.body }}</span>
-                      }
+          @if (mode() === 'split') {
+            <div class="o-code split" style="overflow-x:auto" role="table" [attr.aria-label]="'Changes to ' + file().path + ', side by side'">
+              @for (h of d.hunks; track $index; let hi = $index) {
+                <div class="hunk o-mono full" role="row">{{ h.header }}</div>
+                @for (r of splitRows()[hi]; track $index) {
+                  @if (r.left; as l) {
+                    <div class="o-ln side-l" role="row" [class.o-del]="l.kind === 'delete'" [attr.data-testid]="'split-old-' + l.old">
+                      <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.old }}</span>
+                      <span class="o-sr-only">{{ l.kind === 'delete' ? 'removed' : '' }}</span>
+                      <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
                     </div>
-                    @if (canComment()) {
-                      <div class="o-cf">
-                        <input class="o-in o-sm" placeholder="Reply…" aria-label="Reply" [ngModel]="replies()[t.id] ?? ''" (ngModelChange)="setReply(t.id, $event)" (keydown.enter)="sendReply(t.id)" />
-                        <button type="button" class="o-btn o-sm" (click)="sendReply(t.id)">Reply</button>
-                        <button type="button" class="o-btn o-sm" (click)="resolve.emit({ threadId: t.id, resolved: !t.resolved })">{{ t.resolved ? 'Unresolve' : 'Resolve' }}</button>
-                      </div>
-                    }
-                  </div>
+                  } @else {<div class="o-ln side-l empty-side" aria-hidden="true"><span class="o-n"></span><span class="o-t"></span></div>}
+                  @if (r.right; as l) {
+                    <div class="o-ln" role="row" [class.o-add]="l.kind === 'add'" [attr.data-testid]="'split-new-' + l.new">
+                      <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.new }}</span>
+                      <span class="o-sr-only">{{ l.kind === 'add' ? 'added' : '' }}</span>
+                      <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
+                    </div>
+                  } @else {<div class="o-ln empty-side" aria-hidden="true"><span class="o-n"></span><span class="o-t"></span></div>}
+                  @for (l of rowLines(r); track $index) {
+                    @for (t of threadsAt(l); track t.id) {<div class="full"><ng-container *ngTemplateOutlet="threadTpl; context: { $implicit: t }" /></div>}
+                    @if (drafting() === key(l)) {<div class="full"><ng-container *ngTemplateOutlet="draftTpl; context: { $implicit: l }" /></div>}
+                  }
                 }
-                @if (drafting() === key(l)) {
-                  <div class="o-thread"><div class="o-cb o-col" style="gap:8px;padding:10px 12px">
-                    <textarea class="o-in" rows="2" [placeholder]="'Leave a comment on line ' + lineOf(l)" [attr.aria-label]="'Comment on line ' + lineOf(l)" [ngModel]="draftBody()" (ngModelChange)="draftBody.set($event)" data-testid="line-comment"></textarea>
-                    <div class="o-flex"><span class="o-faint o-xs">Markdown works.</span><button type="button" class="o-btn o-sm o-r" (click)="drafting.set('')">Cancel</button><button type="button" class="o-btn o-sm o-dark" [disabled]="!draftBody().trim()" (click)="send(l)" data-testid="line-comment-add">Comment</button></div>
-                  </div></div>
+              } @empty {<div class="o-empty o-sm full">{{ ignoreSpace() ? 'Only whitespace changed.' : 'No changes to show.' }}</div>}
+            </div>
+          } @else {
+            <div class="o-code" style="overflow-x:auto" role="table" [attr.aria-label]="'Changes to ' + file().path">
+              @for (h of d.hunks; track $index) {
+                <div class="hunk o-mono" role="row">{{ h.header }}</div>
+                @for (l of h.lines; track $index) {
+                  <div class="o-ln" role="row" [class.o-add]="l.kind === 'add'" [class.o-del]="l.kind === 'delete'">
+                    <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.kind === 'delete' ? l.old : l.new }}</span>
+                    <span class="o-s" aria-hidden="true">{{ l.kind === 'add' ? '+' : l.kind === 'delete' ? '−' : ' ' }}</span>
+                    <span class="o-sr-only">{{ l.kind === 'add' ? 'added' : l.kind === 'delete' ? 'removed' : '' }}</span>
+                    <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
+                  </div>
+                  @for (t of threadsAt(l); track t.id) {<ng-container *ngTemplateOutlet="threadTpl; context: { $implicit: t }" />}
+                  @if (drafting() === key(l)) {<ng-container *ngTemplateOutlet="draftTpl; context: { $implicit: l }" />}
                 }
+              } @empty {
+                <div class="o-empty o-sm">{{ ignoreSpace() ? 'Only whitespace changed.' : 'No changes to show.' }}</div>
               }
-            } @empty {
-              <div class="o-empty o-sm">No changes to show.</div>
-            }
-          </div>
+            </div>
+          }
         } @else {
           <div class="o-empty o-sm">Loading…</div>
         }
       }
     </div>
-  `, isInline: true, styles: [":host ::ng-deep [class^=tk-k]{color:var(--o-tk-k)}:host ::ng-deep [class^=tk-s],:host ::ng-deep [class^=tk-l]{color:var(--o-tk-s)}:host ::ng-deep [class^=tk-c]{color:var(--o-tk-c);font-style:italic}:host ::ng-deep [class^=tk-m]{color:var(--o-tk-n)}:host ::ng-deep .tk-nf,:host ::ng-deep .tk-nx,:host ::ng-deep .tk-fm{color:var(--o-tk-f)}:host ::ng-deep .tk-nb,:host ::ng-deep .tk-nt,:host ::ng-deep .tk-bp{color:var(--o-tk-p)}:host ::ng-deep .tk-gi{color:var(--o-add)}:host ::ng-deep .tk-gd{color:var(--o-bad-tx)}\n", ".o-ln .o-n{cursor:default;width:44px}.o-ln .o-n.cmt{cursor:pointer}.o-ln .o-n.cmt:hover{color:var(--o-acc-tx)}.hunk{color:var(--o-dim);background:var(--o-well);padding:2px 12px;font-size:11px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+
+    <ng-template #threadTpl let-t>
+      <div class="o-thread" [attr.data-testid]="'thread-' + t.id">
+        <div class="o-cb o-col" style="gap:6px;padding:10px 12px">
+          @for (c of t.comments; track c.id) {
+            <span class="o-sm"><b>{{ people().name(c.authorId) }}</b><span class="o-faint"> · {{ ago(c.createdAt) }}</span>
+              @if (c.pending) {<span class="o-chip o-amb" style="margin-left:6px">Pending</span>
+                @if (c.authorId === me()) {<button type="button" class="o-lnk" style="margin-left:6px;color:var(--o-mut)" (click)="discard.emit(c.id)" [attr.aria-label]="'Discard pending comment: ' + c.body">Discard</button>}
+              }
+            </span>
+            <span style="white-space:pre-wrap">{{ c.body }}</span>
+          }
+        </div>
+        @if (canComment()) {
+          <div class="o-cf">
+            <input class="o-in o-sm" placeholder="Reply…" aria-label="Reply" [ngModel]="replies()[t.id] ?? ''" (ngModelChange)="setReply(t.id, $event)" (keydown.enter)="sendReply(t.id)" />
+            <button type="button" class="o-btn o-sm" (click)="sendReply(t.id)">Reply</button>
+            <button type="button" class="o-btn o-sm" (click)="resolve.emit({ threadId: t.id, resolved: !t.resolved })">{{ t.resolved ? 'Unresolve' : 'Resolve' }}</button>
+          </div>
+        }
+      </div>
+    </ng-template>
+
+    <ng-template #draftTpl let-l>
+      <div class="o-thread"><div class="o-cb o-col" style="gap:8px;padding:10px 12px">
+        <textarea class="o-in" rows="2" [placeholder]="'Leave a comment on line ' + lineOf(l)" [attr.aria-label]="'Comment on line ' + lineOf(l)" [ngModel]="draftBody()" (ngModelChange)="draftBody.set($event)" data-testid="line-comment"></textarea>
+        <div class="o-flex o-wrap"><span class="o-faint o-xs">Markdown works.</span>
+          <button type="button" class="o-btn o-sm o-r" (click)="drafting.set('')">Cancel</button>
+          <button type="button" class="o-btn o-sm" [disabled]="!draftBody().trim()" (click)="send(l, false)" data-testid="line-comment-add">Add single comment</button>
+          <button type="button" class="o-btn o-sm o-pri" [disabled]="!draftBody().trim()" (click)="send(l, true)" data-testid="line-comment-review">{{ reviewing() ? 'Add review comment' : 'Start a review' }}</button>
+        </div>
+      </div></div>
+    </ng-template>
+  `, isInline: true, styles: [":host ::ng-deep [class^=tk-k]{color:var(--o-tk-k)}:host ::ng-deep [class^=tk-s],:host ::ng-deep [class^=tk-l]{color:var(--o-tk-s)}:host ::ng-deep [class^=tk-c]{color:var(--o-tk-c);font-style:italic}:host ::ng-deep [class^=tk-m]{color:var(--o-tk-n)}:host ::ng-deep .tk-nf,:host ::ng-deep .tk-nx,:host ::ng-deep .tk-fm{color:var(--o-tk-f)}:host ::ng-deep .tk-nb,:host ::ng-deep .tk-nt,:host ::ng-deep .tk-bp{color:var(--o-tk-p)}:host ::ng-deep .tk-gi{color:var(--o-add)}:host ::ng-deep .tk-gd{color:var(--o-bad-tx)}\n", ".o-ln .o-n{cursor:default;width:44px}.o-ln .o-n.cmt{cursor:pointer}.o-ln .o-n.cmt:hover{color:var(--o-acc-tx)}.hunk{color:var(--o-dim);background:var(--o-well);padding:2px 12px;font-size:11px}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.split .side-l{border-right:1px solid var(--o-line-soft)}.split .full{grid-column:1 / -1}.split .o-ln .o-t{white-space:pre-wrap;word-break:break-all}.empty-side{background:var(--o-well)}.viewed{display:inline-flex;align-items:center;gap:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DiffView, decorators: [{
             type: Component,
-            args: [{ selector: 'o-diff', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="o-card" [attr.data-testid]="'diff-' + file().path">
+            args: [{ selector: 'o-diff', imports: [FormsModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="o-card" [attr.id]="'file-' + file().path" [attr.data-testid]="'diff-' + file().path">
       <div class="o-ch" style="background:var(--o-well)">
-        <button type="button" class="o-btn o-ghost o-xs" (click)="open.set(!open())" [attr.aria-expanded]="open()" [attr.aria-label]="(open() ? 'Collapse ' : 'Expand ') + file().path">{{ open() ? '▾' : '▸' }}</button>
+        <button type="button" class="o-btn o-ghost o-xs" (click)="toggleOpen()" [attr.aria-expanded]="open()" [attr.aria-label]="(open() ? 'Collapse ' : 'Expand ') + file().path">{{ open() ? '▾' : '▸' }}</button>
         <span class="o-mono o-sm o-ell">{{ file().oldPath && file().oldPath !== file().path ? file().oldPath + ' → ' : '' }}{{ file().path }}</span>
         <span class="o-grn-t o-sm">+{{ file().additions }}</span><span class="o-red-t o-sm">−{{ file().deletions }}</span>
         @if (threadsHere().length) {<span class="o-faint o-sm">💬 {{ threadsHere().length }}</span>}
-        <span class="o-r"><ng-content /></span>
+        <span class="o-r o-flex" style="gap:6px">
+          @if (open() && diff() && context() < 100 && !file().binary) {<button type="button" class="o-btn o-xs" (click)="moreContext()" [attr.aria-label]="'Show more context in ' + file().path">More context</button>}
+          <ng-content />
+          @if (viewable()) {
+            <button type="button" class="o-btn o-xs viewed" role="checkbox" [attr.aria-checked]="viewed()" [attr.aria-label]="'Viewed ' + file().path" (click)="viewedChange.emit(!viewed())"><span class="o-cbx" [class.o-on]="viewed()" style="width:12px;height:12px"></span>Viewed</button>
+          }
+        </span>
       </div>
       @if (open()) {
         @if (file().binary) {
           <div class="o-empty o-sm">A binary file.</div>
+        } @else if (waiting()) {
+          <div class="o-empty o-sm o-col" style="gap:8px;align-items:center">
+            <span>{{ file().additions + file().deletions }} changed lines.</span>
+            <button type="button" class="o-btn o-sm" (click)="waiting.set(false); load()">Load diff</button>
+          </div>
         } @else if (error()) {
           <div class="o-note o-red" role="alert">{{ error() }}</div>
         } @else if (diff(); as d) {
           @if (d.truncated) {<div class="o-note">This diff is too large to show in full.</div>}
-          <div class="o-code" style="overflow-x:auto" role="table" [attr.aria-label]="'Changes to ' + file().path">
-            @for (h of d.hunks; track $index) {
-              <div class="hunk o-mono" role="row">{{ h.header }}</div>
-              @for (l of h.lines; track $index) {
-                <div class="o-ln" role="row" [class.o-add]="l.kind === 'add'" [class.o-del]="l.kind === 'delete'">
-                  <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.kind === 'delete' ? l.old : l.new }}</span>
-                  <span class="o-s" aria-hidden="true">{{ l.kind === 'add' ? '+' : l.kind === 'delete' ? '−' : ' ' }}</span>
-                  <span class="o-sr-only">{{ l.kind === 'add' ? 'added' : l.kind === 'delete' ? 'removed' : '' }}</span>
-                  <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
-                </div>
-                @for (t of threadsAt(l); track t.id) {
-                  <div class="o-thread" [attr.data-testid]="'thread-' + t.id">
-                    <div class="o-cb o-col" style="gap:6px;padding:10px 12px">
-                      @for (c of t.comments; track c.id) {
-                        <span class="o-sm"><b>{{ people().name(c.authorId) }}</b><span class="o-faint"> · {{ ago(c.createdAt) }}{{ c.pending ? ' · pending' : '' }}</span></span>
-                        <span style="white-space:pre-wrap">{{ c.body }}</span>
-                      }
+          @if (mode() === 'split') {
+            <div class="o-code split" style="overflow-x:auto" role="table" [attr.aria-label]="'Changes to ' + file().path + ', side by side'">
+              @for (h of d.hunks; track $index; let hi = $index) {
+                <div class="hunk o-mono full" role="row">{{ h.header }}</div>
+                @for (r of splitRows()[hi]; track $index) {
+                  @if (r.left; as l) {
+                    <div class="o-ln side-l" role="row" [class.o-del]="l.kind === 'delete'" [attr.data-testid]="'split-old-' + l.old">
+                      <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.old }}</span>
+                      <span class="o-sr-only">{{ l.kind === 'delete' ? 'removed' : '' }}</span>
+                      <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
                     </div>
-                    @if (canComment()) {
-                      <div class="o-cf">
-                        <input class="o-in o-sm" placeholder="Reply…" aria-label="Reply" [ngModel]="replies()[t.id] ?? ''" (ngModelChange)="setReply(t.id, $event)" (keydown.enter)="sendReply(t.id)" />
-                        <button type="button" class="o-btn o-sm" (click)="sendReply(t.id)">Reply</button>
-                        <button type="button" class="o-btn o-sm" (click)="resolve.emit({ threadId: t.id, resolved: !t.resolved })">{{ t.resolved ? 'Unresolve' : 'Resolve' }}</button>
-                      </div>
-                    }
-                  </div>
+                  } @else {<div class="o-ln side-l empty-side" aria-hidden="true"><span class="o-n"></span><span class="o-t"></span></div>}
+                  @if (r.right; as l) {
+                    <div class="o-ln" role="row" [class.o-add]="l.kind === 'add'" [attr.data-testid]="'split-new-' + l.new">
+                      <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.new }}</span>
+                      <span class="o-sr-only">{{ l.kind === 'add' ? 'added' : '' }}</span>
+                      <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
+                    </div>
+                  } @else {<div class="o-ln empty-side" aria-hidden="true"><span class="o-n"></span><span class="o-t"></span></div>}
+                  @for (l of rowLines(r); track $index) {
+                    @for (t of threadsAt(l); track t.id) {<div class="full"><ng-container *ngTemplateOutlet="threadTpl; context: { $implicit: t }" /></div>}
+                    @if (drafting() === key(l)) {<div class="full"><ng-container *ngTemplateOutlet="draftTpl; context: { $implicit: l }" /></div>}
+                  }
                 }
-                @if (drafting() === key(l)) {
-                  <div class="o-thread"><div class="o-cb o-col" style="gap:8px;padding:10px 12px">
-                    <textarea class="o-in" rows="2" [placeholder]="'Leave a comment on line ' + lineOf(l)" [attr.aria-label]="'Comment on line ' + lineOf(l)" [ngModel]="draftBody()" (ngModelChange)="draftBody.set($event)" data-testid="line-comment"></textarea>
-                    <div class="o-flex"><span class="o-faint o-xs">Markdown works.</span><button type="button" class="o-btn o-sm o-r" (click)="drafting.set('')">Cancel</button><button type="button" class="o-btn o-sm o-dark" [disabled]="!draftBody().trim()" (click)="send(l)" data-testid="line-comment-add">Comment</button></div>
-                  </div></div>
+              } @empty {<div class="o-empty o-sm full">{{ ignoreSpace() ? 'Only whitespace changed.' : 'No changes to show.' }}</div>}
+            </div>
+          } @else {
+            <div class="o-code" style="overflow-x:auto" role="table" [attr.aria-label]="'Changes to ' + file().path">
+              @for (h of d.hunks; track $index) {
+                <div class="hunk o-mono" role="row">{{ h.header }}</div>
+                @for (l of h.lines; track $index) {
+                  <div class="o-ln" role="row" [class.o-add]="l.kind === 'add'" [class.o-del]="l.kind === 'delete'">
+                    <span class="o-n" role="rowheader" [class.cmt]="canComment()" (click)="startComment(l)" [attr.title]="canComment() ? 'Comment on this line' : null">{{ l.kind === 'delete' ? l.old : l.new }}</span>
+                    <span class="o-s" aria-hidden="true">{{ l.kind === 'add' ? '+' : l.kind === 'delete' ? '−' : ' ' }}</span>
+                    <span class="o-sr-only">{{ l.kind === 'add' ? 'added' : l.kind === 'delete' ? 'removed' : '' }}</span>
+                    <span class="o-t" role="cell" [innerHTML]="l.html || l.text"></span>
+                  </div>
+                  @for (t of threadsAt(l); track t.id) {<ng-container *ngTemplateOutlet="threadTpl; context: { $implicit: t }" />}
+                  @if (drafting() === key(l)) {<ng-container *ngTemplateOutlet="draftTpl; context: { $implicit: l }" />}
                 }
+              } @empty {
+                <div class="o-empty o-sm">{{ ignoreSpace() ? 'Only whitespace changed.' : 'No changes to show.' }}</div>
               }
-            } @empty {
-              <div class="o-empty o-sm">No changes to show.</div>
-            }
-          </div>
+            </div>
+          }
         } @else {
           <div class="o-empty o-sm">Loading…</div>
         }
       }
     </div>
-  `, styles: [":host ::ng-deep [class^=tk-k]{color:var(--o-tk-k)}:host ::ng-deep [class^=tk-s],:host ::ng-deep [class^=tk-l]{color:var(--o-tk-s)}:host ::ng-deep [class^=tk-c]{color:var(--o-tk-c);font-style:italic}:host ::ng-deep [class^=tk-m]{color:var(--o-tk-n)}:host ::ng-deep .tk-nf,:host ::ng-deep .tk-nx,:host ::ng-deep .tk-fm{color:var(--o-tk-f)}:host ::ng-deep .tk-nb,:host ::ng-deep .tk-nt,:host ::ng-deep .tk-bp{color:var(--o-tk-p)}:host ::ng-deep .tk-gi{color:var(--o-add)}:host ::ng-deep .tk-gd{color:var(--o-bad-tx)}\n", ".o-ln .o-n{cursor:default;width:44px}.o-ln .o-n.cmt{cursor:pointer}.o-ln .o-n.cmt:hover{color:var(--o-acc-tx)}.hunk{color:var(--o-dim);background:var(--o-well);padding:2px 12px;font-size:11px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { repo: [{ type: i0.Input, args: [{ isSignal: true, alias: "repo", required: true }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], head: [{ type: i0.Input, args: [{ isSignal: true, alias: "head", required: true }] }], base: [{ type: i0.Input, args: [{ isSignal: true, alias: "base", required: false }] }], threads: [{ type: i0.Input, args: [{ isSignal: true, alias: "threads", required: false }] }], canComment: [{ type: i0.Input, args: [{ isSignal: true, alias: "canComment", required: false }] }], comment: [{ type: i0.Output, args: ["comment"] }], reply: [{ type: i0.Output, args: ["reply"] }], resolve: [{ type: i0.Output, args: ["resolve"] }] } });
+
+    <ng-template #threadTpl let-t>
+      <div class="o-thread" [attr.data-testid]="'thread-' + t.id">
+        <div class="o-cb o-col" style="gap:6px;padding:10px 12px">
+          @for (c of t.comments; track c.id) {
+            <span class="o-sm"><b>{{ people().name(c.authorId) }}</b><span class="o-faint"> · {{ ago(c.createdAt) }}</span>
+              @if (c.pending) {<span class="o-chip o-amb" style="margin-left:6px">Pending</span>
+                @if (c.authorId === me()) {<button type="button" class="o-lnk" style="margin-left:6px;color:var(--o-mut)" (click)="discard.emit(c.id)" [attr.aria-label]="'Discard pending comment: ' + c.body">Discard</button>}
+              }
+            </span>
+            <span style="white-space:pre-wrap">{{ c.body }}</span>
+          }
+        </div>
+        @if (canComment()) {
+          <div class="o-cf">
+            <input class="o-in o-sm" placeholder="Reply…" aria-label="Reply" [ngModel]="replies()[t.id] ?? ''" (ngModelChange)="setReply(t.id, $event)" (keydown.enter)="sendReply(t.id)" />
+            <button type="button" class="o-btn o-sm" (click)="sendReply(t.id)">Reply</button>
+            <button type="button" class="o-btn o-sm" (click)="resolve.emit({ threadId: t.id, resolved: !t.resolved })">{{ t.resolved ? 'Unresolve' : 'Resolve' }}</button>
+          </div>
+        }
+      </div>
+    </ng-template>
+
+    <ng-template #draftTpl let-l>
+      <div class="o-thread"><div class="o-cb o-col" style="gap:8px;padding:10px 12px">
+        <textarea class="o-in" rows="2" [placeholder]="'Leave a comment on line ' + lineOf(l)" [attr.aria-label]="'Comment on line ' + lineOf(l)" [ngModel]="draftBody()" (ngModelChange)="draftBody.set($event)" data-testid="line-comment"></textarea>
+        <div class="o-flex o-wrap"><span class="o-faint o-xs">Markdown works.</span>
+          <button type="button" class="o-btn o-sm o-r" (click)="drafting.set('')">Cancel</button>
+          <button type="button" class="o-btn o-sm" [disabled]="!draftBody().trim()" (click)="send(l, false)" data-testid="line-comment-add">Add single comment</button>
+          <button type="button" class="o-btn o-sm o-pri" [disabled]="!draftBody().trim()" (click)="send(l, true)" data-testid="line-comment-review">{{ reviewing() ? 'Add review comment' : 'Start a review' }}</button>
+        </div>
+      </div></div>
+    </ng-template>
+  `, styles: [":host ::ng-deep [class^=tk-k]{color:var(--o-tk-k)}:host ::ng-deep [class^=tk-s],:host ::ng-deep [class^=tk-l]{color:var(--o-tk-s)}:host ::ng-deep [class^=tk-c]{color:var(--o-tk-c);font-style:italic}:host ::ng-deep [class^=tk-m]{color:var(--o-tk-n)}:host ::ng-deep .tk-nf,:host ::ng-deep .tk-nx,:host ::ng-deep .tk-fm{color:var(--o-tk-f)}:host ::ng-deep .tk-nb,:host ::ng-deep .tk-nt,:host ::ng-deep .tk-bp{color:var(--o-tk-p)}:host ::ng-deep .tk-gi{color:var(--o-add)}:host ::ng-deep .tk-gd{color:var(--o-bad-tx)}\n", ".o-ln .o-n{cursor:default;width:44px}.o-ln .o-n.cmt{cursor:pointer}.o-ln .o-n.cmt:hover{color:var(--o-acc-tx)}.hunk{color:var(--o-dim);background:var(--o-well);padding:2px 12px;font-size:11px}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.split .side-l{border-right:1px solid var(--o-line-soft)}.split .full{grid-column:1 / -1}.split .o-ln .o-t{white-space:pre-wrap;word-break:break-all}.empty-side{background:var(--o-well)}.viewed{display:inline-flex;align-items:center;gap:6px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { repo: [{ type: i0.Input, args: [{ isSignal: true, alias: "repo", required: true }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], head: [{ type: i0.Input, args: [{ isSignal: true, alias: "head", required: true }] }], base: [{ type: i0.Input, args: [{ isSignal: true, alias: "base", required: false }] }], threads: [{ type: i0.Input, args: [{ isSignal: true, alias: "threads", required: false }] }], canComment: [{ type: i0.Input, args: [{ isSignal: true, alias: "canComment", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], ignoreSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreSpace", required: false }] }], viewed: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewed", required: false }] }], reviewing: [{ type: i0.Input, args: [{ isSignal: true, alias: "reviewing", required: false }] }], comment: [{ type: i0.Output, args: ["comment"] }], reply: [{ type: i0.Output, args: ["reply"] }], resolve: [{ type: i0.Output, args: ["resolve"] }], discard: [{ type: i0.Output, args: ["discard"] }], viewedChange: [{ type: i0.Output, args: ["viewedChange"] }] } });
+/** Pairs a hunk's lines side by side: context on both sides, a run of removals beside the run of additions that follows it. */
+function pair(lines) {
+    const rows = [];
+    let i = 0;
+    while (i < lines.length) {
+        const l = lines[i];
+        if (l.kind === 'context') {
+            rows.push({ left: l, right: l });
+            i++;
+            continue;
+        }
+        const dels = [];
+        const adds = [];
+        while (i < lines.length && lines[i].kind === 'delete')
+            dels.push(lines[i++]);
+        while (i < lines.length && lines[i].kind === 'add')
+            adds.push(lines[i++]);
+        for (let k = 0; k < Math.max(dels.length, adds.length); k++)
+            rows.push({ left: dels[k], right: adds[k] });
+    }
+    return rows;
+}
 
 // /{org}/{project}/code (prototype "code_repos"): the project's repositories.
 class ReposPage {
@@ -1143,7 +1388,7 @@ class RepoHomePage extends RepoPage {
             </div>
             <div class="o-col" style="gap:14px">
               <div class="o-card o-cb o-col"><b>About</b><span class="o-mut o-lh">{{ r.description || 'No description.' }}</span><span class="o-faint o-sm">Default branch <span class="o-mono">{{ r.defaultBranch }}</span></span></div>
-              <div class="o-card o-cb o-col"><div class="o-flex"><b>Releases</b><b class="o-ph-tag o-ga o-r">GA</b></div><span class="o-faint o-sm">Tags and release notes arrive at general availability.</span></div>
+              <div class="o-card o-cb o-col"><b>Releases</b><a class="o-sm" [routerLink]="link('releases')" data-testid="repo-releases">Releases and tags</a></div>
               <div class="o-card o-cb o-col"><b>Deployments</b><span class="o-faint o-sm">Environments show here once Deploy is set up.</span></div>
               @if (langs().length) {
                 <div class="o-card o-cb o-col">
@@ -1263,7 +1508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             </div>
             <div class="o-col" style="gap:14px">
               <div class="o-card o-cb o-col"><b>About</b><span class="o-mut o-lh">{{ r.description || 'No description.' }}</span><span class="o-faint o-sm">Default branch <span class="o-mono">{{ r.defaultBranch }}</span></span></div>
-              <div class="o-card o-cb o-col"><div class="o-flex"><b>Releases</b><b class="o-ph-tag o-ga o-r">GA</b></div><span class="o-faint o-sm">Tags and release notes arrive at general availability.</span></div>
+              <div class="o-card o-cb o-col"><b>Releases</b><a class="o-sm" [routerLink]="link('releases')" data-testid="repo-releases">Releases and tags</a></div>
               <div class="o-card o-cb o-col"><b>Deployments</b><span class="o-faint o-sm">Environments show here once Deploy is set up.</span></div>
               @if (langs().length) {
                 <div class="o-card o-cb o-col">
@@ -1686,7 +1931,7 @@ class CommitPage extends RepoPage {
         <div class="o-card"><div class="o-empty">Loading…</div></div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DiffView, selector: "o-diff", inputs: ["repo", "file", "head", "base", "threads", "canComment"], outputs: ["comment", "reply", "resolve"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DiffView, selector: "o-diff", inputs: ["repo", "file", "head", "base", "threads", "canComment", "mode", "ignoreSpace", "viewed", "reviewing"], outputs: ["comment", "reply", "resolve", "discard", "viewedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: CommitPage, decorators: [{
             type: Component,
@@ -2176,6 +2421,17 @@ class PullPage extends RepoPage {
         this.initials = initials;
         this.dot = checkDot;
         this.threads = computed(() => this.timeline().threads, ...(ngDevMode ? [{ debugName: "threads" }] : /* istanbul ignore next */ []));
+        this.mode = signal(readPref('origine.diff.mode') === 'split' ? 'split' : 'unified', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.hideWs = signal(false, ...(ngDevMode ? [{ debugName: "hideWs" }] : /* istanbul ignore next */ []));
+        /** Files marked viewed, kept per pull request head in this browser (a new push resets them). */
+        this.viewed = signal({}, ...(ngDevMode ? [{ debugName: "viewed" }] : /* istanbul ignore next */ []));
+        this.viewedCount = computed(() => (this.cmp()?.files ?? []).filter((f) => this.viewed()[f.path]).length, ...(ngDevMode ? [{ debugName: "viewedCount" }] : /* istanbul ignore next */ []));
+        /** The caller's pending review comments (shown only to them until the review is submitted). */
+        this.myPending = computed(() => {
+            const me = this.host.meId();
+            const t = this.timeline();
+            return [...t.comments, ...t.threads.flatMap((th) => th.comments)].filter((c, i, all) => c.pending && c.authorId === me && all.findIndex((x) => x.id === c.id) === i);
+        }, ...(ngDevMode ? [{ debugName: "myPending" }] : /* istanbul ignore next */ []));
         this.openThreads = computed(() => this.threads().filter((t) => !t.resolved && !t.outdated).length, ...(ngDevMode ? [{ debugName: "openThreads" }] : /* istanbul ignore next */ []));
         this.tabs = computed(() => {
             const p = this.pr();
@@ -2194,8 +2450,12 @@ class PullPage extends RepoPage {
         this.approvedByMe = computed(() => (this.pr()?.reviews ?? []).some((r) => r.authorId === this.host.meId() && r.state === 'approved' && !r.stale), ...(ngDevMode ? [{ debugName: "approvedByMe" }] : /* istanbul ignore next */ []));
         this.reviewKinds = computed(() => {
             const need = this.pr()?.gate.rows.find((r) => /required by branch protection|requires/.test(r.text + (r.meta ?? '')));
+            const comment = { id: 'commented', label: 'Comment', hint: 'General feedback without approving.' };
+            // the author (or a role that cannot push) still posts their pending comments as a review
+            if (!this.pr()?.canReview)
+                return [{ ...comment, hint: 'Post your pending comments.' }];
             return [
-                { id: 'commented', label: 'Comment', hint: 'General feedback without approving.' },
+                comment,
                 { id: 'approved', label: 'Approve', hint: need ? `Counts toward the approvals ${this.pr()?.target} requires.` : 'Approve these changes.' },
                 { id: 'changes_requested', label: 'Request changes', hint: 'Blocks merge until you approve.' },
             ];
@@ -2271,7 +2531,32 @@ class PullPage extends RepoPage {
         this.run(this.api.comment(this.projectId(), this.name(), this.number, { body }), 'Could not add the comment.', () => this.draft.set(''));
     }
     lineComment(c) {
-        this.run(this.api.comment(this.projectId(), this.name(), this.number, { body: c.body, path: c.path, side: c.side, line: c.line }), 'Could not add the comment.');
+        this.run(this.api.comment(this.projectId(), this.name(), this.number, { body: c.body, path: c.path, side: c.side, line: c.line, pending: c.pending }), 'Could not add the comment.', () => { if (c.pending)
+            this.note.set('Added to your review. Submit it from Review changes to post your comments.'); });
+    }
+    discard(id) {
+        this.run(this.api.discardComment(this.projectId(), this.name(), this.number, id), 'Could not discard the comment.');
+    }
+    setMode(m) {
+        this.mode.set(m);
+        writePref('origine.diff.mode', m);
+    }
+    viewedKey() {
+        return `origine.viewed.${this.projectId()}.${this.name()}.${this.number}.${this.pr()?.headSha ?? ''}`;
+    }
+    isViewed(path) {
+        return !!this.viewed()[path];
+    }
+    setViewed(path, on) {
+        const v = { ...this.viewed(), [path]: on };
+        if (!on)
+            delete v[path];
+        this.viewed.set(v);
+        writePref(this.viewedKey(), JSON.stringify(v));
+    }
+    jump(path) {
+        const el = this.el.nativeElement.querySelector(`[id="file-${CSS.escape(path)}"]`);
+        el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
     reply(r) {
         this.run(this.api.comment(this.projectId(), this.name(), this.number, { body: r.body, threadId: r.threadId }), 'Could not reply.');
@@ -2310,7 +2595,16 @@ class PullPage extends RepoPage {
         const project = this.projectId();
         this.api.pull(project, this.name(), this.number).subscribe({
             next: (p) => {
+                const headChanged = this.pr()?.headSha !== p.headSha;
                 this.pr.set(p);
+                if (headChanged) {
+                    try {
+                        this.viewed.set(JSON.parse(readPref(this.viewedKey()) || '{}'));
+                    }
+                    catch {
+                        this.viewed.set({});
+                    }
+                }
                 if (first) {
                     this.method.set(p.mergeMethods[0] ?? 'merge');
                     this.delBranch.set(p.deleteBranchOnMerge);
@@ -2341,17 +2635,18 @@ class PullPage extends RepoPage {
         <div class="o-tabs" role="tablist">
           @for (t of tabs(); track t.id) {<button type="button" role="tab" class="o-tab" [class.o-on]="tab() === t.id" [attr.aria-selected]="tab() === t.id" (click)="pick(t.id)">{{ t.label }}@if (t.n !== undefined) {<span class="o-n">{{ t.n }}</span>}</button>}
           <span class="o-r"></span>
-          @if (p.state === 'open' && p.canReview) {
+          @if (p.state === 'open' && (p.canReview || myPending().length)) {
             <div class="anchor">
               <button type="button" class="o-btn o-sm o-pri" (click)="reviewOpen.set(!reviewOpen())" [attr.aria-expanded]="reviewOpen()" aria-haspopup="dialog" data-testid="review-open">Review changes ⌄</button>
               @if (reviewOpen()) {
                 <div class="o-menu" role="dialog" aria-label="Finish your review" style="right:0;top:36px;width:380px;padding:14px;display:flex;flex-direction:column;gap:10px">
                   <b>Finish your review</b>
+                  <span class="o-faint o-sm" data-testid="review-pending-note">{{ myPending().length ? myPending().length + ' pending ' + (myPending().length === 1 ? 'comment' : 'comments') + ' included' : 'No pending comments' }}</span>
                   <textarea class="o-in" rows="3" placeholder="Leave a comment" aria-label="Review comment" style="height:auto;padding:8px 10px" [ngModel]="revBody()" (ngModelChange)="revBody.set($event)"></textarea>
                   @for (k of reviewKinds(); track k.id) {
                     <button type="button" class="o-opt" style="padding:8px 10px" [class.o-on]="revKind() === k.id" (click)="revKind.set(k.id)"><span class="o-rad" [class.o-on]="revKind() === k.id"></span><span class="o-col" style="gap:1px"><b class="o-b5">{{ k.label }}</b><span class="o-faint o-sm">{{ k.hint }}</span></span></button>
                   }
-                  <div class="o-flex"><button type="button" class="o-btn o-sm o-pri o-r" (click)="submitReview()" [disabled]="busy() || (revKind() !== 'approved' && !revBody().trim())" data-testid="review-submit">Submit review</button></div>
+                  <div class="o-flex"><button type="button" class="o-btn o-sm o-pri o-r" (click)="submitReview()" [disabled]="busy() || (revKind() !== 'approved' && !revBody().trim() && !(revKind() === 'commented' && myPending().length))" data-testid="review-submit">Submit review</button></div>
                 </div>
               }
             </div>
@@ -2435,10 +2730,28 @@ class PullPage extends RepoPage {
                 </div>
               }
               @case ('files') {
-                <div class="o-flex o-wrap"><span class="o-faint o-sm">{{ cmp()?.files?.length ?? 0 }} {{ cmp()?.files?.length === 1 ? 'file' : 'files' }} · click a line number to comment</span><span class="o-r o-faint o-sm">{{ openThreads() }} unresolved {{ openThreads() === 1 ? 'conversation' : 'conversations' }}</span></div>
-                @for (f of cmp()?.files ?? []; track f.path) {
-                  <o-diff [repo]="name()" [file]="f" [head]="p.headSha" [base]="p.mergeBase" [threads]="threads()" [canComment]="p.state === 'open'" (comment)="lineComment($event)" (reply)="reply($event)" (resolve)="resolve($event)" />
-                } @empty {<div class="o-card"><div class="o-empty">{{ cmp() ? 'No changes.' : 'Loading…' }}</div></div>}
+                <div class="o-flex o-wrap">
+                  <div class="o-seg" role="group" aria-label="Diff view"><button type="button" [class.o-on]="mode() === 'unified'" [attr.aria-pressed]="mode() === 'unified'" (click)="setMode('unified')">Unified</button><button type="button" [class.o-on]="mode() === 'split'" [attr.aria-pressed]="mode() === 'split'" (click)="setMode('split')" data-testid="diff-split">Split</button></div>
+                  <button type="button" class="o-btn o-sm" [class.o-on]="hideWs()" [attr.aria-pressed]="hideWs()" (click)="hideWs.set(!hideWs())" data-testid="hide-ws">Hide whitespace</button>
+                  @if (myPending().length) {<span class="o-chip o-amb" data-testid="pending-count">{{ myPending().length }} pending {{ myPending().length === 1 ? 'comment' : 'comments' }}</span>}
+                  <span class="o-r o-faint o-sm" data-testid="viewed-note">{{ viewedCount() }} of {{ cmp()?.files?.length ?? 0 }} files viewed · {{ openThreads() }} unresolved {{ openThreads() === 1 ? 'conversation' : 'conversations' }}</span>
+                </div>
+                <div class="files-split">
+                  @if ((cmp()?.files?.length ?? 0) > 1) {
+                    <div class="o-card files-tree" role="navigation" aria-label="Files">
+                      @for (f of cmp()?.files ?? []; track f.path) {
+                        <button type="button" class="o-row o-click o-sm" style="width:100%;border:none;background:none;text-align:left" (click)="jump(f.path)"><span class="o-cbx" [class.o-on]="isViewed(f.path)" aria-hidden="true"></span><span class="o-mono o-ell" style="flex:1">{{ f.path }}</span><span class="o-grn-t o-xs">+{{ f.additions }}</span></button>
+                      }
+                    </div>
+                  }
+                  <div class="o-col" style="gap:14px;min-width:0">
+                    @for (f of cmp()?.files ?? []; track f.path) {
+                      <o-diff [repo]="name()" [file]="f" [head]="p.headSha" [base]="p.mergeBase" [threads]="threads()" [canComment]="p.state === 'open'" [mode]="mode()" [ignoreSpace]="hideWs()"
+                        [viewed]="isViewed(f.path)" [reviewing]="myPending().length > 0" (viewedChange)="setViewed(f.path, $event)"
+                        (comment)="lineComment($event)" (reply)="reply($event)" (resolve)="resolve($event)" (discard)="discard($event)" />
+                    } @empty {<div class="o-card"><div class="o-empty">{{ cmp() ? 'No changes.' : 'Loading…' }}</div></div>}
+                  </div>
+                </div>
               }
               @case ('checks') {
                 <div class="o-card">
@@ -2471,7 +2784,7 @@ class PullPage extends RepoPage {
         <div class="o-card"><div class="o-empty">Loading…</div></div>
       }
     </div>
-  `, isInline: true, styles: [".badge{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;color:var(--o-acc-fg)}.anchor{position:relative;align-self:center}.merge{display:flex;align-items:center;position:relative}.merge .go{height:32px;padding:0 14px;border-radius:7px 0 0 7px;border:none;font-size:13px;font-weight:500;color:var(--o-acc-fg);background:var(--o-ok);cursor:pointer}.merge .mn{height:32px;padding:0 10px;border:none;border-radius:0 7px 7px 0;font-size:12px;color:var(--o-acc-fg);background:var(--o-ok);border-left:1px solid rgba(255,255,255,.25);cursor:pointer}.merge button:disabled{background:var(--o-line-mid);cursor:not-allowed}.tl{display:flex;flex-direction:column;gap:10px;padding-left:14px;border-left:2px solid var(--o-line);margin-left:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DiffView, selector: "o-diff", inputs: ["repo", "file", "head", "base", "threads", "canComment"], outputs: ["comment", "reply", "resolve"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".badge{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;color:var(--o-acc-fg)}.anchor{position:relative;align-self:center}.merge{display:flex;align-items:center;position:relative}.merge .go{height:32px;padding:0 14px;border-radius:7px 0 0 7px;border:none;font-size:13px;font-weight:500;color:var(--o-acc-fg);background:var(--o-ok);cursor:pointer}.merge .mn{height:32px;padding:0 10px;border:none;border-radius:0 7px 7px 0;font-size:12px;color:var(--o-acc-fg);background:var(--o-ok);border-left:1px solid rgba(255,255,255,.25);cursor:pointer}.merge button:disabled{background:var(--o-line-mid);cursor:not-allowed}.tl{display:flex;flex-direction:column;gap:10px;padding-left:14px;border-left:2px solid var(--o-line);margin-left:14px}.files-split{display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px;align-items:start}.files-split:has(>:only-child){grid-template-columns:minmax(0,1fr)}.files-tree{position:sticky;top:8px;max-height:calc(100vh - 120px);overflow:auto}@media(max-width:900px){.files-split{grid-template-columns:minmax(0,1fr)}.files-tree{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DiffView, selector: "o-diff", inputs: ["repo", "file", "head", "base", "threads", "canComment", "mode", "ignoreSpace", "viewed", "reviewing"], outputs: ["comment", "reply", "resolve", "discard", "viewedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: PullPage, decorators: [{
             type: Component,
@@ -2492,17 +2805,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         <div class="o-tabs" role="tablist">
           @for (t of tabs(); track t.id) {<button type="button" role="tab" class="o-tab" [class.o-on]="tab() === t.id" [attr.aria-selected]="tab() === t.id" (click)="pick(t.id)">{{ t.label }}@if (t.n !== undefined) {<span class="o-n">{{ t.n }}</span>}</button>}
           <span class="o-r"></span>
-          @if (p.state === 'open' && p.canReview) {
+          @if (p.state === 'open' && (p.canReview || myPending().length)) {
             <div class="anchor">
               <button type="button" class="o-btn o-sm o-pri" (click)="reviewOpen.set(!reviewOpen())" [attr.aria-expanded]="reviewOpen()" aria-haspopup="dialog" data-testid="review-open">Review changes ⌄</button>
               @if (reviewOpen()) {
                 <div class="o-menu" role="dialog" aria-label="Finish your review" style="right:0;top:36px;width:380px;padding:14px;display:flex;flex-direction:column;gap:10px">
                   <b>Finish your review</b>
+                  <span class="o-faint o-sm" data-testid="review-pending-note">{{ myPending().length ? myPending().length + ' pending ' + (myPending().length === 1 ? 'comment' : 'comments') + ' included' : 'No pending comments' }}</span>
                   <textarea class="o-in" rows="3" placeholder="Leave a comment" aria-label="Review comment" style="height:auto;padding:8px 10px" [ngModel]="revBody()" (ngModelChange)="revBody.set($event)"></textarea>
                   @for (k of reviewKinds(); track k.id) {
                     <button type="button" class="o-opt" style="padding:8px 10px" [class.o-on]="revKind() === k.id" (click)="revKind.set(k.id)"><span class="o-rad" [class.o-on]="revKind() === k.id"></span><span class="o-col" style="gap:1px"><b class="o-b5">{{ k.label }}</b><span class="o-faint o-sm">{{ k.hint }}</span></span></button>
                   }
-                  <div class="o-flex"><button type="button" class="o-btn o-sm o-pri o-r" (click)="submitReview()" [disabled]="busy() || (revKind() !== 'approved' && !revBody().trim())" data-testid="review-submit">Submit review</button></div>
+                  <div class="o-flex"><button type="button" class="o-btn o-sm o-pri o-r" (click)="submitReview()" [disabled]="busy() || (revKind() !== 'approved' && !revBody().trim() && !(revKind() === 'commented' && myPending().length))" data-testid="review-submit">Submit review</button></div>
                 </div>
               }
             </div>
@@ -2586,10 +2900,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 </div>
               }
               @case ('files') {
-                <div class="o-flex o-wrap"><span class="o-faint o-sm">{{ cmp()?.files?.length ?? 0 }} {{ cmp()?.files?.length === 1 ? 'file' : 'files' }} · click a line number to comment</span><span class="o-r o-faint o-sm">{{ openThreads() }} unresolved {{ openThreads() === 1 ? 'conversation' : 'conversations' }}</span></div>
-                @for (f of cmp()?.files ?? []; track f.path) {
-                  <o-diff [repo]="name()" [file]="f" [head]="p.headSha" [base]="p.mergeBase" [threads]="threads()" [canComment]="p.state === 'open'" (comment)="lineComment($event)" (reply)="reply($event)" (resolve)="resolve($event)" />
-                } @empty {<div class="o-card"><div class="o-empty">{{ cmp() ? 'No changes.' : 'Loading…' }}</div></div>}
+                <div class="o-flex o-wrap">
+                  <div class="o-seg" role="group" aria-label="Diff view"><button type="button" [class.o-on]="mode() === 'unified'" [attr.aria-pressed]="mode() === 'unified'" (click)="setMode('unified')">Unified</button><button type="button" [class.o-on]="mode() === 'split'" [attr.aria-pressed]="mode() === 'split'" (click)="setMode('split')" data-testid="diff-split">Split</button></div>
+                  <button type="button" class="o-btn o-sm" [class.o-on]="hideWs()" [attr.aria-pressed]="hideWs()" (click)="hideWs.set(!hideWs())" data-testid="hide-ws">Hide whitespace</button>
+                  @if (myPending().length) {<span class="o-chip o-amb" data-testid="pending-count">{{ myPending().length }} pending {{ myPending().length === 1 ? 'comment' : 'comments' }}</span>}
+                  <span class="o-r o-faint o-sm" data-testid="viewed-note">{{ viewedCount() }} of {{ cmp()?.files?.length ?? 0 }} files viewed · {{ openThreads() }} unresolved {{ openThreads() === 1 ? 'conversation' : 'conversations' }}</span>
+                </div>
+                <div class="files-split">
+                  @if ((cmp()?.files?.length ?? 0) > 1) {
+                    <div class="o-card files-tree" role="navigation" aria-label="Files">
+                      @for (f of cmp()?.files ?? []; track f.path) {
+                        <button type="button" class="o-row o-click o-sm" style="width:100%;border:none;background:none;text-align:left" (click)="jump(f.path)"><span class="o-cbx" [class.o-on]="isViewed(f.path)" aria-hidden="true"></span><span class="o-mono o-ell" style="flex:1">{{ f.path }}</span><span class="o-grn-t o-xs">+{{ f.additions }}</span></button>
+                      }
+                    </div>
+                  }
+                  <div class="o-col" style="gap:14px;min-width:0">
+                    @for (f of cmp()?.files ?? []; track f.path) {
+                      <o-diff [repo]="name()" [file]="f" [head]="p.headSha" [base]="p.mergeBase" [threads]="threads()" [canComment]="p.state === 'open'" [mode]="mode()" [ignoreSpace]="hideWs()"
+                        [viewed]="isViewed(f.path)" [reviewing]="myPending().length > 0" (viewedChange)="setViewed(f.path, $event)"
+                        (comment)="lineComment($event)" (reply)="reply($event)" (resolve)="resolve($event)" (discard)="discard($event)" />
+                    } @empty {<div class="o-card"><div class="o-empty">{{ cmp() ? 'No changes.' : 'Loading…' }}</div></div>}
+                  </div>
+                </div>
               }
               @case ('checks') {
                 <div class="o-card">
@@ -2622,11 +2954,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         <div class="o-card"><div class="o-empty">Loading…</div></div>
       }
     </div>
-  `, styles: [".badge{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;color:var(--o-acc-fg)}.anchor{position:relative;align-self:center}.merge{display:flex;align-items:center;position:relative}.merge .go{height:32px;padding:0 14px;border-radius:7px 0 0 7px;border:none;font-size:13px;font-weight:500;color:var(--o-acc-fg);background:var(--o-ok);cursor:pointer}.merge .mn{height:32px;padding:0 10px;border:none;border-radius:0 7px 7px 0;font-size:12px;color:var(--o-acc-fg);background:var(--o-ok);border-left:1px solid rgba(255,255,255,.25);cursor:pointer}.merge button:disabled{background:var(--o-line-mid);cursor:not-allowed}.tl{display:flex;flex-direction:column;gap:10px;padding-left:14px;border-left:2px solid var(--o-line);margin-left:14px}\n"] }]
+  `, styles: [".badge{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;color:var(--o-acc-fg)}.anchor{position:relative;align-self:center}.merge{display:flex;align-items:center;position:relative}.merge .go{height:32px;padding:0 14px;border-radius:7px 0 0 7px;border:none;font-size:13px;font-weight:500;color:var(--o-acc-fg);background:var(--o-ok);cursor:pointer}.merge .mn{height:32px;padding:0 10px;border:none;border-radius:0 7px 7px 0;font-size:12px;color:var(--o-acc-fg);background:var(--o-ok);border-left:1px solid rgba(255,255,255,.25);cursor:pointer}.merge button:disabled{background:var(--o-line-mid);cursor:not-allowed}.tl{display:flex;flex-direction:column;gap:10px;padding-left:14px;border-left:2px solid var(--o-line);margin-left:14px}.files-split{display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px;align-items:start}.files-split:has(>:only-child){grid-template-columns:minmax(0,1fr)}.files-tree{position:sticky;top:8px;max-height:calc(100vh - 120px);overflow:auto}@media(max-width:900px){.files-split{grid-template-columns:minmax(0,1fr)}.files-tree{display:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { outside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
+// Per-viewer conveniences (the diff view, files viewed); storage can be missing or blocked.
+function readPref(key) {
+    try {
+        return localStorage.getItem(key) ?? '';
+    }
+    catch {
+        return '';
+    }
+}
+function writePref(key, value) {
+    try {
+        localStorage.setItem(key, value);
+    }
+    catch {
+        /* private window or blocked storage: the setting lasts for this page only */
+    }
+}
 
 const BLANK = { id: '', pattern: '', blockDirectPush: true, blockForcePush: true, blockDeletion: true, requiredApprovals: 1, dismissStaleApprovals: true, requireUpToDate: false, requiredChecks: [] };
 // /{org}/{project}/code/{repo}/settings?section= (prototype "code_settings"): general settings and
@@ -2955,6 +3304,386 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+// /{org}/{project}/code/{repo}/releases (prototype code_tags): releases newest first with their
+// notes, files and source archives, the latest marked; drafts for those who can push; a release
+// drafted on a new or existing tag with notes generated from the done issues since the previous
+// one; and the repository's tags.
+class ReleasesPage extends RepoPage {
+    constructor() {
+        super(...arguments);
+        this.releases = signal([], ...(ngDevMode ? [{ debugName: "releases" }] : /* istanbul ignore next */ []));
+        this.tags = signal([], ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
+        this.loaded = signal(false, ...(ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []));
+        this.tagging = signal(false, ...(ngDevMode ? [{ debugName: "tagging" }] : /* istanbul ignore next */ []));
+        this.draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.confirming = signal('', ...(ngDevMode ? [{ debugName: "confirming" }] : /* istanbul ignore next */ []));
+        this.freeTags = computed(() => this.tags().filter((t) => !this.used(t.name)), ...(ngDevMode ? [{ debugName: "freeTags" }] : /* istanbul ignore next */ []));
+        this.ago = (s) => ago(s);
+        this.tagName = '';
+        this.tagFrom = '';
+        this.alsoTag = false;
+    }
+    onRepo(r) {
+        this.tagFrom = r.defaultBranch;
+        this.load();
+    }
+    md(s) {
+        return marked.parse(s || '', { async: false, gfm: true, breaks: true });
+    }
+    used(tag) {
+        return this.releases().some((r) => r.tag === tag);
+    }
+    load() {
+        const r = this.repo();
+        if (!r)
+            return;
+        forkJoin({ rel: this.api.releases(this.projectId(), r.name), tags: this.api.refs(this.projectId(), r.name, 'tag') }).subscribe({
+            next: ({ rel, tags }) => { this.releases.set(rel); this.tags.set(sortTags(tags)); this.loaded.set(true); },
+            error: (e) => { this.loaded.set(true); this.error.set(apiMessage(e, 'Could not load the releases.')); },
+        });
+    }
+    run(o, fallback, done) {
+        this.busy.set(true);
+        this.error.set('');
+        this.note.set('');
+        o.subscribe({
+            next: () => { this.busy.set(false); done?.(); this.load(); },
+            error: (e) => { this.busy.set(false); this.error.set(apiMessage(e, fallback)); },
+        });
+    }
+    createTag() {
+        const r = this.repo();
+        const t = this.tagName.trim();
+        if (!r || !t)
+            return;
+        this.run(this.api.createTag(this.projectId(), r.name, t, this.tagFrom.trim() || r.defaultBranch), 'Could not create the tag.', () => {
+            this.tagging.set(false);
+            this.note.set(`Tag ${t} created.`);
+            this.tagName = '';
+        });
+    }
+    removeTag(t) {
+        const r = this.repo();
+        if (!r)
+            return;
+        this.run(this.api.deleteTag(this.projectId(), r.name, t.name), `Could not delete ${t.name}.`, () => this.note.set(`Tag ${t.name} deleted.`));
+    }
+    startRelease() {
+        const r = this.repo();
+        this.tagging.set(false);
+        this.draft.set({ tag: '', newTag: true, target: r?.defaultBranch ?? 'main', title: '', notes: '', prerelease: false, draft: true });
+    }
+    setTag(d, tag) {
+        d.tag = tag.trim();
+        d.newTag = !this.tags().some((t) => t.name === d.tag);
+    }
+    generate(d) {
+        const r = this.repo();
+        if (!r)
+            return;
+        this.busy.set(true);
+        const target = d.newTag ? d.target || r.defaultBranch : 'refs/tags/' + d.tag;
+        this.api.releaseNotes(this.projectId(), r.name, target).subscribe({
+            next: (n) => { this.busy.set(false); d.notes = n; this.draft.set({ ...d }); },
+            error: (e) => { this.busy.set(false); this.error.set(apiMessage(e, 'Could not generate the notes.')); },
+        });
+    }
+    edit(r) {
+        this.tagging.set(false);
+        this.draft.set({ id: r.id, version: r.version, tag: r.tag, newTag: false, target: '', title: r.title === r.tag ? '' : r.title, notes: r.notes, prerelease: r.prerelease, draft: r.draft });
+    }
+    save(d, asDraft) {
+        const r = this.repo();
+        if (!r)
+            return;
+        if (d.id) {
+            this.run(this.api.updateRelease(this.projectId(), r.name, d.id, { title: d.title, notes: d.notes, prerelease: d.prerelease, draft: d.draft && asDraft, version: d.version }), 'Could not save the release.', () => { this.draft.set(null); this.note.set(asDraft ? 'Draft saved.' : `${d.tag} saved.`); });
+            return;
+        }
+        this.run(this.api.createRelease(this.projectId(), r.name, { tag: d.tag, target: d.newTag ? d.target || r.defaultBranch : undefined, title: d.title, notes: d.notes, prerelease: d.prerelease, draft: asDraft }), 'Could not create the release.', () => { this.draft.set(null); this.note.set(asDraft ? `Draft ${d.tag} saved.` : `${d.tag} published.`); });
+    }
+    remove(rel) {
+        const r = this.repo();
+        if (!r)
+            return;
+        this.confirming.set('');
+        this.run(this.api.deleteRelease(this.projectId(), r.name, rel.id, this.alsoTag), `Could not delete ${rel.tag}.`, () => this.note.set(`Release ${rel.tag} deleted${this.alsoTag ? ' with its tag' : ''}.`));
+    }
+    upload(rel, ev) {
+        const r = this.repo();
+        const input = ev.target;
+        const file = input.files?.[0];
+        if (!r || !file)
+            return;
+        if (file.size > 25 * 1024 * 1024) {
+            this.error.set('A release file is at most 25 MB.');
+            return;
+        }
+        this.run(this.api.addAsset(this.projectId(), r.name, rel.id, file), 'Could not add the file.', () => { input.value = ''; this.note.set(`${file.name} added to ${rel.tag}.`); });
+    }
+    removeAsset(rel, id) {
+        const r = this.repo();
+        if (!r)
+            return;
+        this.run(this.api.deleteAsset(this.projectId(), r.name, rel.id, id), 'Could not remove the file.');
+    }
+    download(rel, id, filename) {
+        const r = this.repo();
+        if (!r)
+            return;
+        this.api.assetBlob(this.projectId(), r.name, rel.id, id).subscribe({
+            next: (b) => this.save_(b, filename),
+            error: (e) => this.error.set(apiMessage(e, 'Could not download the file.')),
+        });
+    }
+    archive(rel, format) {
+        const r = this.repo();
+        if (!r)
+            return;
+        this.api.archiveUrl(this.projectId(), r.name, 'refs/tags/' + rel.tag, format).subscribe({
+            next: (url) => { if (url)
+                window.location.assign(url); },
+            error: (e) => this.error.set(apiMessage(e, 'Could not prepare the archive.')),
+        });
+    }
+    save_(b, filename) {
+        const url = URL.createObjectURL(b);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url), 10_000);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ReleasesPage, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ReleasesPage, isStandalone: true, selector: "o-code-releases", usesInheritance: true, ngImport: i0, template: `
+    <div class="o-page o-narrow">
+      <div class="o-ph">
+        <div class="o-col"><span class="o-eyebrow">{{ name() }}</span><h1 class="o-t">Releases and tags</h1></div>
+        @if (canWrite()) {
+          <div class="o-acts">
+            <button type="button" class="o-btn o-sm" (click)="tagging.set(!tagging()); draft.set(null)" data-testid="tag-new">New tag</button>
+            <button type="button" class="o-btn o-sm o-dark" (click)="startRelease()" data-testid="release-new">Draft release</button>
+          </div>
+        }
+      </div>
+      @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+      @if (note()) {<div class="o-note" role="status">{{ note() }}</div>}
+
+      @if (tagging()) {
+        <form class="o-card" (ngSubmit)="createTag()" data-testid="tag-form">
+          <div class="o-ch"><b>New tag</b></div>
+          <div class="o-cb o-flex o-wrap" style="align-items:flex-end">
+            <div class="o-fld"><label for="tg-name">Tag</label><input id="tg-name" class="o-in o-mono" name="tag" placeholder="v1.8.0" [(ngModel)]="tagName" /></div>
+            <div class="o-fld"><label for="tg-from">At</label><input id="tg-from" class="o-in o-mono" name="from" [(ngModel)]="tagFrom" placeholder="main or a commit" /></div>
+            <button type="button" class="o-btn o-sm o-r" (click)="tagging.set(false)">Cancel</button>
+            <button type="submit" class="o-btn o-sm o-dark" [disabled]="busy() || !tagName.trim()">Create tag</button>
+          </div>
+        </form>
+      }
+
+      @if (draft(); as d) {
+        <div class="o-card" data-testid="release-form">
+          <div class="o-ch"><b>{{ d.id ? 'Edit ' + d.tag : 'Draft a release' }}</b></div>
+          <div class="o-cb o-col" style="gap:12px">
+            @if (!d.id) {
+              <div class="o-flex o-wrap" style="align-items:flex-end">
+                <div class="o-fld"><label for="rl-tag">Tag</label>
+                  <input id="rl-tag" class="o-in o-mono" list="rl-tags" placeholder="v1.8.0" [ngModel]="d.tag" (ngModelChange)="setTag(d, $event)" data-testid="release-tag" />
+                  <datalist id="rl-tags">@for (t of freeTags(); track t.name) {<option [value]="t.name"></option>}</datalist>
+                </div>
+                @if (d.newTag) {<div class="o-fld"><label for="rl-target">New tag at</label><input id="rl-target" class="o-in o-mono" [(ngModel)]="d.target" placeholder="main" /></div>}
+                <span class="o-hint" style="padding-bottom:8px">{{ d.tag ? (d.newTag ? 'A new tag, made when you save.' : 'An existing tag.') : '' }}</span>
+              </div>
+            }
+            <div class="o-fld"><label for="rl-title">Title</label><input id="rl-title" class="o-in" maxlength="255" [(ngModel)]="d.title" placeholder="Defaults to the tag" data-testid="release-title" /></div>
+            <div class="o-fld">
+              <div class="o-flex"><label for="rl-notes">Notes</label>
+                @if (!d.id) {<button type="button" class="o-lnk o-r o-sm" [disabled]="busy() || !d.tag" (click)="generate(d)" data-testid="release-generate">Generate from done issues</button>}
+              </div>
+              <textarea id="rl-notes" class="o-in" rows="7" style="height:auto;padding:8px 10px" [(ngModel)]="d.notes" placeholder="Markdown works." data-testid="release-notes"></textarea>
+              <span class="o-hint">Generated notes list the done issues and merged pull requests since the previous release.</span>
+            </div>
+            <label class="o-flex o-sm"><input type="checkbox" [(ngModel)]="d.prerelease" /> Pre-release (never marked Latest)</label>
+          </div>
+          <div class="o-cf">
+            <button type="button" class="o-btn o-sm o-r" (click)="draft.set(null)">Cancel</button>
+            @if (!d.id || d.draft) {<button type="button" class="o-btn o-sm" [disabled]="busy() || !d.tag" (click)="save(d, true)" data-testid="release-save-draft">Save draft</button>}
+            <button type="button" class="o-btn o-sm o-dark" [disabled]="busy() || !d.tag" (click)="save(d, false)" data-testid="release-publish">{{ d.id && !d.draft ? 'Save' : 'Publish release' }}</button>
+          </div>
+        </div>
+      }
+
+      @for (r of releases(); track r.id) {
+        <div class="o-card rel" [attr.data-testid]="'release-' + r.tag">
+          <div class="o-ch">
+            <b class="o-md">{{ r.tag }}</b>
+            @if (r.latest) {<span class="o-chip o-grn">Latest</span>}
+            @if (r.draft) {<span class="o-chip o-amb">Draft</span>}
+            @if (r.prerelease) {<span class="o-chip">Pre-release</span>}
+            <span class="o-r o-mono o-sm o-faint">{{ r.short }} · {{ ago(r.publishedAt || r.createdAt) }} · {{ people().name(r.createdBy) }}</span>
+          </div>
+          <div class="o-cb">
+            @if (r.title && r.title !== r.tag) {<h4>{{ r.title }}</h4>}
+            <div class="o-md" style="font-size:13px" [innerHTML]="r.notes ? md(r.notes) : '<p class=&quot;o-faint&quot;>No notes.</p>'"></div>
+          </div>
+          <div class="o-cf assets">
+            <span>Assets</span>
+            @for (a of r.assets; track a.id) {
+              <button type="button" class="o-lnk o-mono" (click)="download(r, a.id, a.name)" [attr.aria-label]="'Download ' + a.name">{{ a.name }}</button>
+              @if (canWrite()) {<button type="button" class="o-lnk" style="color:var(--o-mut)" (click)="removeAsset(r, a.id)" [attr.aria-label]="'Remove ' + a.name">×</button>}
+            }
+            <button type="button" class="o-lnk" (click)="archive(r, 'zip')">Source (zip)</button>
+            <button type="button" class="o-lnk" (click)="archive(r, 'tar.gz')">Source (tar.gz)</button>
+            @if (canWrite()) {
+              <span class="o-r o-flex" style="gap:10px">
+                <label class="o-lnk" style="cursor:pointer">Add file<input type="file" class="o-sr-only" (change)="upload(r, $event)" [attr.aria-label]="'Add a file to ' + r.tag" /></label>
+                <button type="button" class="o-lnk" (click)="edit(r)" [attr.aria-label]="'Edit ' + r.tag">Edit</button>
+                @if (confirming() === r.id) {
+                  <label class="o-flex o-xs"><input type="checkbox" [(ngModel)]="alsoTag" /> and the tag</label>
+                  <button type="button" class="o-lnk o-red-t" (click)="remove(r)">Delete</button><button type="button" class="o-lnk" (click)="confirming.set('')">Keep</button>
+                } @else {
+                  <button type="button" class="o-lnk" style="color:var(--o-mut)" (click)="confirming.set(r.id); alsoTag = false" [attr.aria-label]="'Delete ' + r.tag">Delete</button>
+                }
+              </span>
+            }
+          </div>
+        </div>
+      } @empty {
+        <div class="o-card"><div class="o-empty">{{ loaded() ? 'No releases yet.' + (canWrite() ? ' Draft one from a tag; its notes can come from the issues it finishes.' : '') : 'Loading…' }}</div></div>
+      }
+
+      <div class="o-card" data-testid="tags">
+        <div class="o-ch"><b>Tags</b><span class="o-r o-faint o-sm">{{ tags().length }}</span></div>
+        @for (t of tags(); track t.name) {
+          <div class="o-row" [attr.data-testid]="'tag-' + t.name">
+            <span class="o-mono o-sm o-b5">{{ t.name }}</span><span class="o-faint o-sm o-mono">{{ t.commit?.short }}</span>
+            <span class="o-r o-faint o-sm">{{ ago(t.commit?.committer?.when) }}</span>
+            @if (canWrite() && !used(t.name)) {<button type="button" class="o-lnk" style="color:var(--o-mut)" (click)="removeTag(t)" [attr.aria-label]="'Delete tag ' + t.name">Delete</button>}
+          </div>
+        } @empty {<div class="o-empty o-sm">No tags yet.</div>}
+      </div>
+    </div>
+  `, isInline: true, styles: [".rel h4{margin:0 0 6px;font-size:15px}.rel .o-md ul{margin:0;padding-left:20px}.assets{display:flex;gap:12px;flex-wrap:wrap;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ReleasesPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-code-releases', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="o-page o-narrow">
+      <div class="o-ph">
+        <div class="o-col"><span class="o-eyebrow">{{ name() }}</span><h1 class="o-t">Releases and tags</h1></div>
+        @if (canWrite()) {
+          <div class="o-acts">
+            <button type="button" class="o-btn o-sm" (click)="tagging.set(!tagging()); draft.set(null)" data-testid="tag-new">New tag</button>
+            <button type="button" class="o-btn o-sm o-dark" (click)="startRelease()" data-testid="release-new">Draft release</button>
+          </div>
+        }
+      </div>
+      @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+      @if (note()) {<div class="o-note" role="status">{{ note() }}</div>}
+
+      @if (tagging()) {
+        <form class="o-card" (ngSubmit)="createTag()" data-testid="tag-form">
+          <div class="o-ch"><b>New tag</b></div>
+          <div class="o-cb o-flex o-wrap" style="align-items:flex-end">
+            <div class="o-fld"><label for="tg-name">Tag</label><input id="tg-name" class="o-in o-mono" name="tag" placeholder="v1.8.0" [(ngModel)]="tagName" /></div>
+            <div class="o-fld"><label for="tg-from">At</label><input id="tg-from" class="o-in o-mono" name="from" [(ngModel)]="tagFrom" placeholder="main or a commit" /></div>
+            <button type="button" class="o-btn o-sm o-r" (click)="tagging.set(false)">Cancel</button>
+            <button type="submit" class="o-btn o-sm o-dark" [disabled]="busy() || !tagName.trim()">Create tag</button>
+          </div>
+        </form>
+      }
+
+      @if (draft(); as d) {
+        <div class="o-card" data-testid="release-form">
+          <div class="o-ch"><b>{{ d.id ? 'Edit ' + d.tag : 'Draft a release' }}</b></div>
+          <div class="o-cb o-col" style="gap:12px">
+            @if (!d.id) {
+              <div class="o-flex o-wrap" style="align-items:flex-end">
+                <div class="o-fld"><label for="rl-tag">Tag</label>
+                  <input id="rl-tag" class="o-in o-mono" list="rl-tags" placeholder="v1.8.0" [ngModel]="d.tag" (ngModelChange)="setTag(d, $event)" data-testid="release-tag" />
+                  <datalist id="rl-tags">@for (t of freeTags(); track t.name) {<option [value]="t.name"></option>}</datalist>
+                </div>
+                @if (d.newTag) {<div class="o-fld"><label for="rl-target">New tag at</label><input id="rl-target" class="o-in o-mono" [(ngModel)]="d.target" placeholder="main" /></div>}
+                <span class="o-hint" style="padding-bottom:8px">{{ d.tag ? (d.newTag ? 'A new tag, made when you save.' : 'An existing tag.') : '' }}</span>
+              </div>
+            }
+            <div class="o-fld"><label for="rl-title">Title</label><input id="rl-title" class="o-in" maxlength="255" [(ngModel)]="d.title" placeholder="Defaults to the tag" data-testid="release-title" /></div>
+            <div class="o-fld">
+              <div class="o-flex"><label for="rl-notes">Notes</label>
+                @if (!d.id) {<button type="button" class="o-lnk o-r o-sm" [disabled]="busy() || !d.tag" (click)="generate(d)" data-testid="release-generate">Generate from done issues</button>}
+              </div>
+              <textarea id="rl-notes" class="o-in" rows="7" style="height:auto;padding:8px 10px" [(ngModel)]="d.notes" placeholder="Markdown works." data-testid="release-notes"></textarea>
+              <span class="o-hint">Generated notes list the done issues and merged pull requests since the previous release.</span>
+            </div>
+            <label class="o-flex o-sm"><input type="checkbox" [(ngModel)]="d.prerelease" /> Pre-release (never marked Latest)</label>
+          </div>
+          <div class="o-cf">
+            <button type="button" class="o-btn o-sm o-r" (click)="draft.set(null)">Cancel</button>
+            @if (!d.id || d.draft) {<button type="button" class="o-btn o-sm" [disabled]="busy() || !d.tag" (click)="save(d, true)" data-testid="release-save-draft">Save draft</button>}
+            <button type="button" class="o-btn o-sm o-dark" [disabled]="busy() || !d.tag" (click)="save(d, false)" data-testid="release-publish">{{ d.id && !d.draft ? 'Save' : 'Publish release' }}</button>
+          </div>
+        </div>
+      }
+
+      @for (r of releases(); track r.id) {
+        <div class="o-card rel" [attr.data-testid]="'release-' + r.tag">
+          <div class="o-ch">
+            <b class="o-md">{{ r.tag }}</b>
+            @if (r.latest) {<span class="o-chip o-grn">Latest</span>}
+            @if (r.draft) {<span class="o-chip o-amb">Draft</span>}
+            @if (r.prerelease) {<span class="o-chip">Pre-release</span>}
+            <span class="o-r o-mono o-sm o-faint">{{ r.short }} · {{ ago(r.publishedAt || r.createdAt) }} · {{ people().name(r.createdBy) }}</span>
+          </div>
+          <div class="o-cb">
+            @if (r.title && r.title !== r.tag) {<h4>{{ r.title }}</h4>}
+            <div class="o-md" style="font-size:13px" [innerHTML]="r.notes ? md(r.notes) : '<p class=&quot;o-faint&quot;>No notes.</p>'"></div>
+          </div>
+          <div class="o-cf assets">
+            <span>Assets</span>
+            @for (a of r.assets; track a.id) {
+              <button type="button" class="o-lnk o-mono" (click)="download(r, a.id, a.name)" [attr.aria-label]="'Download ' + a.name">{{ a.name }}</button>
+              @if (canWrite()) {<button type="button" class="o-lnk" style="color:var(--o-mut)" (click)="removeAsset(r, a.id)" [attr.aria-label]="'Remove ' + a.name">×</button>}
+            }
+            <button type="button" class="o-lnk" (click)="archive(r, 'zip')">Source (zip)</button>
+            <button type="button" class="o-lnk" (click)="archive(r, 'tar.gz')">Source (tar.gz)</button>
+            @if (canWrite()) {
+              <span class="o-r o-flex" style="gap:10px">
+                <label class="o-lnk" style="cursor:pointer">Add file<input type="file" class="o-sr-only" (change)="upload(r, $event)" [attr.aria-label]="'Add a file to ' + r.tag" /></label>
+                <button type="button" class="o-lnk" (click)="edit(r)" [attr.aria-label]="'Edit ' + r.tag">Edit</button>
+                @if (confirming() === r.id) {
+                  <label class="o-flex o-xs"><input type="checkbox" [(ngModel)]="alsoTag" /> and the tag</label>
+                  <button type="button" class="o-lnk o-red-t" (click)="remove(r)">Delete</button><button type="button" class="o-lnk" (click)="confirming.set('')">Keep</button>
+                } @else {
+                  <button type="button" class="o-lnk" style="color:var(--o-mut)" (click)="confirming.set(r.id); alsoTag = false" [attr.aria-label]="'Delete ' + r.tag">Delete</button>
+                }
+              </span>
+            }
+          </div>
+        </div>
+      } @empty {
+        <div class="o-card"><div class="o-empty">{{ loaded() ? 'No releases yet.' + (canWrite() ? ' Draft one from a tag; its notes can come from the issues it finishes.' : '') : 'Loading…' }}</div></div>
+      }
+
+      <div class="o-card" data-testid="tags">
+        <div class="o-ch"><b>Tags</b><span class="o-r o-faint o-sm">{{ tags().length }}</span></div>
+        @for (t of tags(); track t.name) {
+          <div class="o-row" [attr.data-testid]="'tag-' + t.name">
+            <span class="o-mono o-sm o-b5">{{ t.name }}</span><span class="o-faint o-sm o-mono">{{ t.commit?.short }}</span>
+            <span class="o-r o-faint o-sm">{{ ago(t.commit?.committer?.when) }}</span>
+            @if (canWrite() && !used(t.name)) {<button type="button" class="o-lnk" style="color:var(--o-mut)" (click)="removeTag(t)" [attr.aria-label]="'Delete tag ' + t.name">Delete</button>}
+          </div>
+        } @empty {<div class="o-empty o-sm">No tags yet.</div>}
+      </div>
+    </div>
+  `, styles: [".rel h4{margin:0 0 6px;font-size:15px}.rel .o-md ul{margin:0;padding-left:20px}.assets{display:flex;gap:12px;flex-wrap:wrap;align-items:center}\n"] }]
+        }] });
+/** Newest commit first; tags on commits of the same second by version, highest first (v1.10 after v1.9). */
+function sortTags(tags) {
+    const when = (t) => Date.parse(t.commit?.committer?.when ?? '') || 0;
+    return [...tags].sort((a, b) => when(b) - when(a) || b.name.localeCompare(a.name, undefined, { numeric: true }));
+}
+
 /*
  * @chisquare-tech/origine-ngx-apps-code: the Code module's screens (TRD §6.10). The host app provides
  * CodeHost and mounts the pages at /{org}/{project}/code, /code/new, /code/pulls and
@@ -2965,5 +3694,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BranchesPage, CodeApi, CodeHost, CommitPage, CommitsPage, CurrentRepo, CurrentRepoPage, DiffView, FilePage, NewRepoPage, People, PullPage, PullsPage, RefPicker, RepoHomePage, RepoPage, RepoSettingsPage, ReposPage, TOKEN_CSS, ago, apiMessage, checkDot, copy, dayLabel, initials, langColour, shortDate, size };
+export { BranchesPage, CodeApi, CodeHost, CommitPage, CommitsPage, CurrentRepo, CurrentRepoPage, DiffView, FilePage, NewRepoPage, People, PullPage, PullsPage, RefPicker, ReleasesPage, RepoHomePage, RepoPage, RepoSettingsPage, ReposPage, TOKEN_CSS, ago, apiMessage, checkDot, copy, dayLabel, initials, langColour, pair, shortDate, size };
 //# sourceMappingURL=chisquare-tech-origine-ngx-apps-code.mjs.map