vscode-cowriting-plugin/src/trackChangesPreview.ts

/**
 * TrackChangesPreviewController — F7 vscode layer (spec §6.2/§6.4). Owns one
 * sealed webview panel per markdown document, beside the source editor. On open /
 * debounced edit / F6 baseline-epoch change it reads the baseline (from the
 * reused DiffViewController) + the live buffer, runs the pure render engine, and
 * posts the HTML. Pure read-only: never mutates the document, sidecar, or
 * baseline (INV-20). The webview is sealed: local assets only, strict CSP,
 * per-load nonce, no network (INV-21).
 */
import * as path from "node:path";
import { randomBytes } from "node:crypto";
import * as vscode from "vscode";
import type { DiffViewController } from "./diffViewController";
import type { AttributionController } from "./attributionController";
import type { ProposalController } from "./proposalController";
import { renderReview, renderPlain, diffBlocks, type BlockOp } from "./trackChangesModel";

const VIEW_TYPE = "cowriting.trackChangesPreview";
const DEBOUNCE_MS = 150;

export class TrackChangesPreviewController implements vscode.Disposable {
  private readonly disposables: vscode.Disposable[] = [];
  private readonly panels = new Map<string, vscode.WebviewPanel>();
  private readonly lastModel = new Map<string, BlockOp[]>();
  private readonly debounces = new Map<string, NodeJS.Timeout>();
  /** F10: per-panel annotations mode — on (default) shows review marks, off is clean. */
  private readonly mode = new Map<string, "on" | "off">();
  /** F10 (PUC-6): off-panel indicator of pending proposals on the active doc. */
  private readonly statusItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 88);

  constructor(
    private readonly diffView: DiffViewController,
    private readonly extensionUri: vscode.Uri,
    private readonly attribution: AttributionController,
    private readonly proposals: ProposalController,
  ) {
    this.disposables.push(
      vscode.commands.registerCommand("cowriting.showTrackChangesPreview", () =>
        this.show(vscode.window.activeTextEditor?.document),
      ),
      vscode.workspace.onDidChangeTextDocument((e) => this.onEdit(e.document)),
      this.diffView.onDidChangeBaseline(({ uri }) => this.refreshByUri(uri)),
      this.proposals.onDidChangeProposals(({ uri }) => {
        this.refreshByUri(uri);
        this.updateStatus(uri);
      }),
      this.statusItem,
    );
    this.statusItem.command = "cowriting.showTrackChangesPreview";
  }

  private isMarkdown(document: vscode.TextDocument): boolean {
    return document.languageId === "markdown";
  }

  /** Open or reveal the preview for a markdown document (PUC-1). */
  show(document: vscode.TextDocument | undefined): void {
    if (!document || !this.isMarkdown(document)) {
      void vscode.window.showWarningMessage(
        "Cowriting: open a Markdown document to use the track-changes preview (F6 covers other files).",
      );
      return;
    }
    const key = document.uri.toString();
    const existing = this.panels.get(key);
    if (existing) {
      existing.reveal(vscode.ViewColumn.Beside);
      this.refresh(document);
      return;
    }
    const name = path.basename(document.uri.path) || "untitled";
    const panel = vscode.window.createWebviewPanel(
      VIEW_TYPE,
      `Track changes: ${name}`,
      { viewColumn: vscode.ViewColumn.Beside, preserveFocus: true },
      {
        enableScripts: true,
        retainContextWhenHidden: false,
        localResourceRoots: [vscode.Uri.joinPath(this.extensionUri, "out", "media")],
      },
    );
    panel.webview.html = this.shellHtml(panel.webview);
    panel.onDidDispose(
      () => {
        this.panels.delete(key);
        this.lastModel.delete(key);
        this.mode.delete(key);
        // A panel is gone: re-show the off-panel indicator if proposals remain.
        this.updateStatus(key);
      },
      null,
      this.disposables,
    );
    // F10: the webview posts the annotations toggle + ✓/✗ proposal decisions back.
    panel.webview.onDidReceiveMessage(
      (m: { type?: string; mode?: "on" | "off"; proposalId?: string }) => {
        if (m?.type === "setMode" && (m.mode === "on" || m.mode === "off")) {
          this.mode.set(key, m.mode);
          this.refresh(document);
        } else if (m?.type === "accept" && m.proposalId) {
          void this.proposals
            .acceptById(this.proposals.keyFor(document), m.proposalId)
            .then(() => this.refresh(document));
        } else if (m?.type === "reject" && m.proposalId) {
          this.proposals.rejectById(this.proposals.keyFor(document), m.proposalId);
          this.refresh(document);
        }
      },
      null,
      this.disposables,
    );
    this.panels.set(key, panel);
    // A panel is now open for this doc — the off-panel indicator is redundant.
    this.statusItem.hide();
    this.refresh(document);
  }

  private onEdit(document: vscode.TextDocument): void {
    const key = document.uri.toString();
    if (!this.panels.has(key)) return;
    const pending = this.debounces.get(key);
    if (pending) clearTimeout(pending);
    this.debounces.set(
      key,
      setTimeout(() => {
        this.debounces.delete(key);
        this.refresh(document);
      }, DEBOUNCE_MS),
    );
  }

  private refreshByUri(uri: string): void {
    const doc = vscode.workspace.textDocuments.find((d) => d.uri.toString() === uri);
    if (doc) this.refresh(doc);
  }

  /** Recompute the model + post HTML to the panel for its current mode (no-op if no panel). */
  refresh(document: vscode.TextDocument): void {
    const key = document.uri.toString();
    const panel = this.panels.get(key);
    if (!panel) return;
    const mode = this.mode.get(key) ?? "on";
    const current = document.getText();
    const baseline = this.diffView.getBaseline(key);
    const baselineText = baseline?.text ?? current; // no baseline → no change-marks
    const ops = diffBlocks(baselineText, current);
    this.lastModel.set(key, ops);
    if (mode === "off") {
      void panel.webview.postMessage({ type: "render", mode, html: renderPlain(current) });
      return;
    }
    const spans = this.attribution.spansFor(document);
    const proposals = this.proposals.listProposals(document);
    const summary = {
      added: ops.filter((o) => o.kind === "added").length,
      removed: ops.filter((o) => o.kind === "removed").length,
      proposals: proposals.length,
    };
    void panel.webview.postMessage({
      type: "render",
      mode,
      html: renderReview(baselineText, current, spans, proposals),
      epoch: this.epochLabel(baseline),
      summary,
    });
  }

  /** F10 (PUC-6): off-panel proposal indicator on the active doc. Hidden when a panel is open. */
  private updateStatus(uri: string): void {
    const doc = vscode.workspace.textDocuments.find((d) => d.uri.toString() === uri);
    if (!doc) {
      this.statusItem.hide();
      return;
    }
    const n = this.proposals.listProposals(doc).length;
    if (n === 0 || this.panels.has(uri)) {
      this.statusItem.hide();
      return;
    }
    this.statusItem.text = `$(comment-discussion) ${n} Claude proposal${n === 1 ? "" : "s"}`;
    this.statusItem.tooltip = "Cowriting: open the review preview to accept/reject Claude's proposals";
    this.statusItem.show();
  }

  private epochLabel(baseline: { reason: string; capturedAt: string } | undefined): string {
    if (!baseline) return "opened (no baseline yet)";
    const time = new Date(baseline.capturedAt).toLocaleTimeString();
    switch (baseline.reason) {
      case "machine-landing":
        return `Claude landed ${time}`;
      case "pinned":
        return `pinned ${time}`;
      default:
        return `opened ${time}`;
    }
  }

  private shellHtml(webview: vscode.Webview): string {
    const nonce = randomBytes(16).toString("base64");
    const scriptUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this.extensionUri, "out", "media", "preview.js"),
    );
    const styleUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this.extensionUri, "out", "media", "preview.css"),
    );
    // Sealed CSP (INV-21): no network. 'unsafe-inline' style is required only for
    // mermaid's dynamically injected <style> tags; scripts are nonce-gated and
    // strictly local (no remote/CDN script source).
    const csp =
      `default-src 'none'; ` +
      `img-src ${webview.cspSource} data:; ` +
      `font-src ${webview.cspSource}; ` +
      `style-src ${webview.cspSource} 'unsafe-inline'; ` +
      `script-src 'nonce-${nonce}';`;
    return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="Content-Security-Policy" content="${csp}" />
  <link href="${styleUri}" rel="stylesheet" />
  <title>Track changes</title>
</head>
<body>
  <div id="cw-header">
    <label id="cw-toggle"><input type="checkbox" id="cw-annotations" checked /> Annotations</label>
    <span id="cw-epoch">Review</span>
    <span id="cw-summary"></span>
    <span id="cw-legend"></span>
  </div>
  <div id="cw-body"></div>
  <script nonce="${nonce}" src="${scriptUri}"></script>
</body>
</html>`;
  }

  // ---- test seam (§6.4) ----
  isOpen(uriString: string): boolean {
    return this.panels.has(uriString);
  }
  getLastModel(uriString: string): BlockOp[] | undefined {
    return this.lastModel.get(uriString);
  }
  /** F10 test seam: the review HTML the panel would post for a doc (on-state). */
  renderHtmlFor(uriString: string): string {
    const doc = vscode.workspace.textDocuments.find((d) => d.uri.toString() === uriString);
    if (!doc) return "";
    const current = doc.getText();
    const baseline = this.diffView.getBaseline(uriString);
    return renderReview(
      baseline?.text ?? current,
      current,
      this.attribution.spansFor(doc),
      this.proposals.listProposals(doc),
    );
  }
  /** F10: current annotations mode for a panel (default on). */
  getMode(uriString: string): "on" | "off" {
    return this.mode.get(uriString) ?? "on";
  }
  /** F10: set the annotations mode and re-render (the programmatic twin of the header toggle). */
  setMode(uriString: string, mode: "on" | "off"): void {
    this.mode.set(uriString, mode);
    const doc = vscode.workspace.textDocuments.find((d) => d.uri.toString() === uriString);
    if (doc) this.refresh(doc);
  }
  /** F10 test seam (SLICE-4 E2E): the off-panel status-bar indicator text, if shown. */
  statusText(): string | undefined {
    return this.statusItem.text || undefined;
  }

  dispose(): void {
    for (const t of this.debounces.values()) clearTimeout(t);
    for (const p of this.panels.values()) p.dispose();
    for (const d of this.disposables) d.dispose();
  }
}