@pb33f/cowboy-components 0.7.18 → 0.9.0

package/dist/components/time-vortex/tardis-control.js

@@ -4,8 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, query, state } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { keyed } from "lit/directives/keyed.js";
 import tardisControlCss from "./tardis-control.css";
 import { TimelineService } from "../../services/timeline-service.js";
 import { ChangesComponent } from "../model-renderer/changes.js";
@@ -19,26 +21,110 @@ import { TimelineView } from "./timeline-view.js";
 import panelsCss from "../../css/panels.css.js";
 import scrollbarCss from "../../css/scrollbar.css.js";
 import { ToastType } from "../../model/toast.js";
-import { AddToast, ExplorerNodeClicked, LoadRenderedNodeIntoInspector } from "../../events/doctor.js";
-import '../charts/beefy-chart';
+import { AddToast, ExplorerNodeClicked, LoadRenderedNodeIntoInspector, OpenDrawer, ShowTimelineSummary } from "../../events/doctor.js";
+import { DrawerContentType } from "../../model/drawer-content.js";
+import { CountdownController } from "../../controllers/countdown-controller.js";
+import '../charts/beefy-chart.js';
 import '../charts/doughnut-chart.js';
 import './change-list-item.js';
+import { ModelTree } from "../model-tree/tree.js";
+import Prism from "prismjs";
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-json';
+import prismCss from "../../css/prism.css.js";
+import chromaSyntaxCss from "../../css/chroma-synxtax.css.js";
+import changelogCss from "../changelog/changelog.css.js";
+import hrCss from "../../css/hr.css.js";
+import buttonCss from "../../css/button.css.js";
 let TardisControl = class TardisControl extends Colorful {
     constructor() {
         super();
-        this.explorer = new ExplorerComponent();
-        this.explorer.renderEqualizer = false;
-        this.explorer.equalizer.renderEqualizer = false;
+        this.markdownReport = '';
+        this.mdDownloadLoading = false;
+        this._changeLabels = ['MODIFIED', 'ADDED', 'REMOVED'];
+        this._breakingLabels = ['BREAKING', 'NON-BREAKING'];
+        this._changeDataset = [];
+        this._breakingDataset = [];
+        this._lastSpecSummaryId = null;
+        // Doc will be set via property binding
+        this.explorer = null; // Will be initialized when doc is set
         this.timelineView = new TimelineView();
+        this.modelTree = new ModelTree();
+        this.modelTree.changesEnabled = true;
         this.loading = false;
-        //@ts-ignore
-        this.addEventListener(ExplorerNodeClicked, this.explorerNodeClicked.bind(this));
+        this.boundExplorerNodeClicked = this.explorerNodeClicked.bind(this);
+        this.addEventListener(ExplorerNodeClicked, this.boundExplorerNodeClicked);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.diffEditor) {
+            this.diffEditor.diffMode = true;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._highlightTimeout) {
+            clearTimeout(this._highlightTimeout);
+        }
+        if (this.countdownController) {
+            this.countdownController.stop();
+            this.countdownController = undefined;
+        }
+        this.removeEventListener(ExplorerNodeClicked, this.boundExplorerNodeClicked);
+    }
+    handleEphemeralExpired() {
+        if (this.countdownController) {
+            this.countdownController.stop();
+            this.countdownController = undefined;
+        }
+        this.dispatchEvent(new Event(ShowTimelineSummary, {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    openCorruptInfo(e) {
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent(OpenDrawer, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                type: DrawerContentType.MARKDOWN,
+                title: 'CORRUPTED CHANGE',
+                body: `<p>Any data submitted in the early days of doctor preview was subject to a <strong>number of bugs</strong>.</p> 
+                       <p>Not everything was correctly stored, some of it was lost and unrecoverable and is not available.</p> 
+                       <p>The alpha version of the doctor was released on <strong>February 8th 2026</strong></p>
+                       <p>Changes made on or after then is correctly stored and available permanently, all elements of the change.</p> 
+                       <p>It was never working correctly in the preview, even though you may have not have known it.</p>
+                       <p>Sorry!</p>
+                       <p>- quobix</p>`
+            }
+        }));
+    }
+    firstUpdated() {
+        // Don't auto-fetch - let the doctor control when we start
+        // The doctor will call fetchHistory() when it's ready
+        // Enable diff mode on the diff editor once it's set
+        setTimeout(() => {
+            if (this.diffEditor) {
+                this.diffEditor.diffMode = true;
+                // Content will be populated when user selects a change
+            }
+        }, 100);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('doc') && this.doc && !this.explorer) {
+            this.explorer = new ExplorerComponent(this.doc);
+            this.explorer.renderEqualizer = false;
+            this.explorer.equalizer.renderEqualizer = false;
+            this.explorer.embeddedMode = true;
+        }
     }
     explorerNodeClicked(evt) {
         evt.stopPropagation();
         // we only have a select number of nodes for this change, so instead of bubbling up to the doctor
-        if (this.changeReport) {
-            this.changeReport.nodesRendered.forEach((node) => {
+        if (this.doc.modelController.changeReport) {
+            this.doc.modelController.changeReport.nodes.forEach((node) => {
                 if (node.id == evt.detail.nodeId) {
                     // load up this rendered node and send to the inspector panel for rendering.
                     this.dispatchEvent(new CustomEvent(LoadRenderedNodeIntoInspector, {
@@ -49,11 +135,62 @@ let TardisControl = class TardisControl extends Colorful {
                         }
                     }));
                     this.explorer.activeNode = node;
-                    this.explorer.buildLayout();
+                    this.explorer.buildGraph();
                 }
             });
         }
     }
+    highlightCodeBlocks() {
+        const codeBlocks = this.shadowRoot?.querySelectorAll('pre code');
+        if (codeBlocks) {
+            codeBlocks.forEach((block) => {
+                Prism.highlightElement(block);
+            });
+        }
+    }
+    downloadFile(content, filename, mimeType) {
+        const blob = new Blob([content], { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+    }
+    downloadHtmlReport() {
+        if (!this.markdownReport)
+            return;
+        this.downloadFile(this.markdownReport, 'report.html', 'text/html');
+    }
+    async downloadMarkdownReport() {
+        if (!this.specSummary?.changeId)
+            return;
+        this.mdDownloadLoading = true;
+        try {
+            const markdown = await TimelineService.fetchMarkdownSource(this.specSummary.changeId);
+            this.downloadFile(markdown, 'report.md', 'text/markdown');
+        }
+        catch (e) {
+            const errorMsg = e?.detail || e?.message || 'Unknown error';
+            this.dispatchEvent(new CustomEvent(AddToast, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    toast: {
+                        type: ToastType.ERROR,
+                        id: "md-download-error",
+                        body: `Failed to download markdown report: ${errorMsg}`,
+                        title: "Download failed",
+                    }
+                }
+            }));
+        }
+        finally {
+            this.mdDownloadLoading = false;
+        }
+    }
     fetchHistory() {
         this.loading = true;
         TimelineService.fetchHistory().then((history) => {
@@ -81,35 +218,41 @@ let TardisControl = class TardisControl extends Colorful {
                         type: ToastType.ERROR,
                         id: "timeline-error",
                         body: e.detail,
-                        title: "timeline error",
+                        title: "timeline error yeah!",
                     }
                 }
             }));
         });
     }
-    renderSummaryForMultiChange() {
-        if (this.specSummary?.totalChanges <= 1) {
-            return html ``;
+    updateChartData() {
+        const currentId = this.specSummary?.changeId ?? null;
+        if (currentId === this._lastSpecSummaryId) {
+            return;
         }
-        const labels = ['Modified', 'Added', 'Removed'];
-        const breakingLabels = ['Breaking', 'Non-Breaking'];
-        const dataSet = [
+        this._lastSpecSummaryId = currentId;
+        this._changeDataset = [
             {
-                labels: labels,
+                labels: this._changeLabels,
                 data: [this.specSummary?.modifications, this.specSummary?.additions, this.specSummary?.removals]
             }
         ];
-        const breakingDataSet = [
+        this._breakingDataset = [
             {
-                labels: breakingLabels,
+                labels: this._breakingLabels,
                 data: [this.specSummary?.breakingChanges, this.specSummary?.totalChanges]
             }
         ];
+    }
+    renderSummaryForMultiChange() {
+        if (this.specSummary?.totalChanges <= 1) {
+            return html ``;
+        }
+        this.updateChartData();
         let breakingChart = html ``;
         if (this.specSummary?.totalChanges > 1) {
             breakingChart = html `
                 <pb33f-doughnut-chart id="breaking-doughnut" showLegend breakingChanges width=290 height=130
-                                      .datasets=${breakingDataSet} .labels=${breakingLabels}
+                                      .datasets=${this._breakingDataset} .labels=${this._breakingLabels}
                                       style="padding-left: 10px; padding-top: 10px"></pb33f-doughnut-chart>`;
         }
         const timelineItem = new SpecSummaryTimelineItem();
@@ -119,9 +262,9 @@ let TardisControl = class TardisControl extends Colorful {
         }
         return html `
 
-            <div style="width:100%; padding: 10px; display: flex">
+            <div style="width:100%; padding: 10px; display: flex; justify-content: center">
                 <pb33f-doughnut-chart id="change-doughnut" showLegend changesChart width=290 height=130
-                                      .datasets=${dataSet} .labels=${labels}
+                                      .datasets=${this._changeDataset} .labels=${this._changeLabels}
                                       style="padding-left: 10px; padding-top: 10px"></pb33f-doughnut-chart>
                 ${breakingChart}
             </div>
@@ -140,7 +283,7 @@ let TardisControl = class TardisControl extends Colorful {
 
 
             </div>`;
-        if (!this.changeReport && !this.history) {
+        if (!this.doc.modelController.changeReport && !this.history) {
             return html `
                 <div class="pb33f-loader">
                     <div class="spin"></div>
@@ -149,7 +292,7 @@ let TardisControl = class TardisControl extends Colorful {
                     <div style="padding-left: 38px;">(Make some changes / edits to the OpenAPI Spec)</div>
                 </div>`;
         }
-        if (!this.changeReport && this.history) {
+        if (!this.doc.modelController.changeReport && this.history) {
             return html `
                 ${this.loading ? loading : ''}
                 <div class="timeline-view">
@@ -158,9 +301,9 @@ let TardisControl = class TardisControl extends Colorful {
             `;
         }
         let changelist = [];
-        this.changeReport?.changes?.forEach(change => {
+        this.doc.modelController.changeReport?.changes?.forEach(change => {
             const ch = new ChangesComponent([change]);
-            ch.addPadding = true;
+            //ch.addPadding = true
             ch.renderChangeCountBar = false;
             ch.renderBreakingBar = true;
             ch.renderMeta = true;
@@ -173,23 +316,61 @@ let TardisControl = class TardisControl extends Colorful {
             this.breakingDoughnut?.refresh();
         }
         const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        // locate the root node from the changeReport nodes
+        let rootNode = null;
+        if (this.doc.modelController.changeReport && this.doc.modelController.changeReport.nodes) {
+            for (let i = 0; i < this.doc.modelController.changeReport.nodes.length; i++) {
+                if (this.doc.modelController.changeReport.nodes[i].id == 'root') {
+                    rootNode = this.doc.modelController.changeReport.nodes[i];
+                    break;
+                }
+            }
+        }
+        this.modelTree.expand = true;
+        this.modelTree.node = rootNode;
+        //<pb33f-model-tree expand .node=${rootNode}
+        //                                   class="change-tree" style="padding-top: 10px;"></pb33f-model-tree>
         const changeTreeContainer = html `
             <div class="change-tree-container scroller" slot="start">
-                <pb33f-model-tree expand .node=${this.changeReport?.nodeChangeTree}
-                                  class="change-tree" style="padding-top: 10px;"></pb33f-model-tree>
+                ${this.modelTree}
             </div>`;
         let changesView = html `${changeTreeContainer}`;
-        if (this.changeReport && this.changeReport.changes && this.changeReport.changes?.length > 1) {
+        if (this.doc.modelController.changeReport &&
+            this.doc.modelController.changeReport.changes &&
+            this.doc.modelController.changeReport.changes?.length > 1) {
             changesView = html `
                 <sl-split-panel position-in-pixels="350" id="tardis-change-navigator-split-panel"
                                 class="tardis-change-navigator-split-panel">
                     <sl-icon id="split-divider" slot="divider" name="grip-vertical"
-                             class="divider-vert"></sl-icon>
+                             class="divider-vert" aria-hidden="true"></sl-icon>
 
                     ${changeTreeContainer}
                     <div style="position: relative; width: 100%" slot="end"> ${changeSummary}</div>
                 </sl-split-panel>`;
         }
+        const isCorrupt = this.specSummary?.corrupt === true;
+        const isPr = this.specSummary?.gitPrNumber !== undefined && this.specSummary.gitPrNumber !== null;
+        const isEphemeral = this.specSummary?.isEphemeral !== undefined && this.specSummary.isEphemeral;
+        let warningBanner = html ``;
+        if (isCorrupt) {
+            warningBanner = html `
+            <div class="corrupt-banner">
+                <strong>CHANGE CORRUPTED</strong> [<a href="#" class="corrupt-link" @click="${this.openCorruptInfo}">LEARN WHY</a>]
+            </div>`;
+        }
+        else if (isPr) {
+            warningBanner = html `
+            <div class="pr-banner">
+                PR: <a href="${this.specSummary?.gitPrUrl}" class="pr-url" target="_blank">#${this.specSummary?.gitPrNumber}: ${this.specSummary?.gitPrTitle}</a>
+            </div>`;
+        }
+        else if (isEphemeral && this.countdownController && !this.countdownController.isExpired) {
+            const criticalClass = this.countdownController.isCritical ? 'critical' : '';
+            warningBanner = html `
+            <div class="warn-banner ${criticalClass}">
+                <strong>Temporary Comparison:</strong> ${this.countdownController.formattedTime} before deletion
+            </div>`;
+        }
         return html `
             ${this.loading ? loading : ''}
             <header>
@@ -204,26 +385,60 @@ let TardisControl = class TardisControl extends Colorful {
             <div class="changes-container">
 
                 <sl-split-panel position-in-pixels="300" vertical id="tardis-split-panel" class="tardis-split-panel">
-                    <sl-icon id="split-divider" slot="divider" name="grip-horizontal" class="divider-horiz"></sl-icon>
+                    <sl-icon id="split-divider" slot="divider" name="grip-horizontal" class="divider-horiz" aria-hidden="true"></sl-icon>
                     <div class="editor" slot="start">
-
-
                         <div class="change-navigator">
                             ${changesView}
                         </div>
                     </div>
-                    <div class="editor" slot="end">
-
+                    <div class="editor" slot="end" style="overflow: hidden; height: 100%; z-index: 1">
+                       ${warningBanner}
                         <sl-tab-group class="tab-group time-vortex">
+                            <sl-tab slot="nav" panel="report" class="tab" id="report-view">
+                                Change Report
+                            </sl-tab>
                             <sl-tab slot="nav" panel="changelist" class="tab" id="changelist-view">
-                                Changelog
+                                Changed Items
+                            </sl-tab>
+                            <sl-tab slot="nav" panel="list" class="tab" id="list-view">
+                                Change List
                             </sl-tab>
                             <sl-tab slot="nav" panel="graph" class="tab" id="graph-view">
                                 Explore Changes
                             </sl-tab>
-                            <sl-tab slot="nav" panel="list" class="tab" id="list-view">
-                                List
+                            <sl-tab slot="nav" panel="diff" class="tab" id="diff-view">
+                                View Diff
                             </sl-tab>
+
+                            <sl-tab-panel name="report" class="tab-panel">
+                                ${this.specSummary?.changeId ? html `
+                                    <div class="report-download-controls">
+                                        <sl-button
+                                            class="slim"
+                                            size="small"
+                                            variant="default"
+                                            ?disabled=${!this.markdownReport}
+                                            @click=${this.downloadHtmlReport}>
+                                            <sl-icon slot="prefix" name="download" aria-hidden="true"></sl-icon>
+                                            HTML
+                                        </sl-button>
+                                        <sl-button
+                                            class="slim"
+                                            size="small"
+                                            variant="default"
+                                            ?loading=${this.mdDownloadLoading}
+                                            @click=${this.downloadMarkdownReport}>
+                                            <sl-icon slot="prefix" name="download" aria-hidden="true"></sl-icon>
+                                            MD
+                                        </sl-button>
+                                    </div>
+                                ` : html ``}
+                                <div class="markdown-report">
+                                    ${this.specSummary?.changeId ?
+            keyed(this.specSummary.changeId, html `${this.markdownReport ? unsafeHTML(this.markdownReport) : html `<div class="pb33f-loader"><div class="spin"></div>Loading report...</div>`}`)
+            : html ``}
+                                </div>
+                            </sl-tab-panel>
                             <sl-tab-panel name="changelist" class="tab-panel changelist-panel">
                                 <div class="change-list">
                                     <pb33f-paginator-navigation label="Changes" hideSparks
@@ -234,26 +449,66 @@ let TardisControl = class TardisControl extends Colorful {
                                 ${this.explorer}
                             </sl-tab-panel>
                             <sl-tab-panel name="list" class="tab-panel">
-                                <pb33f-change-list .changes=${this.changeReport?.changes}></pb33f-change-list>
+                                <pb33f-change-list
+                                        .changes=${this.doc.modelController.changeReport?.changes}></pb33f-change-list>
+                            </sl-tab-panel>
+                            <sl-tab-panel name="diff" class="tab-panel">
+                                <!-- EDITOR -->
+                                <slot name="diff-editor"></slot>
+                                <!-- EDITOR -->
                             </sl-tab-panel>
-
                         </sl-tab-group>
                     </div>
             </div>`;
     }
     showSummaryOnly() {
         this.specSummary = null;
-        this.changeReport = null;
+        this.doc.modelController.changeReport = null;
         return;
     }
+    showDiffTab() {
+        if (this.tabGroup) {
+            this.tabGroup.show('diff');
+        }
+    }
     set summary(summary) {
         this.specSummary = summary;
+        if (this.countdownController) {
+            this.countdownController.stop();
+            this.countdownController = undefined;
+        }
+        if (summary.isEphemeral && summary.ephemeralExpiresAt) {
+            this.countdownController = new CountdownController(this, summary.ephemeralExpiresAt, () => this.handleEphemeralExpired());
+        }
         if (summary.changeId) {
             this.loading = true;
-            TimelineService.fetchChange(summary.changeId)
-                .then(this.handleChange.bind(this))
+            this.markdownReport = '';
+            // Fetch change report, spec diffs, and markdown report in parallel
+            Promise.all([
+                TimelineService.fetchChange(summary.changeId),
+                TimelineService.fetchOriginalSpec(summary.changeId),
+                TimelineService.fetchModifiedSpec(summary.changeId),
+                TimelineService.fetchMarkdownReport(summary.changeId)
+            ])
+                .then(([changeResponse, originalSpec, modifiedSpec, markdownReport]) => {
+                this.handleChange(changeResponse);
+                if (this.diffEditor) {
+                    this.diffEditor.setValue(originalSpec);
+                    this.diffEditor.setDiffValue(modifiedSpec);
+                }
+                // keyed directive will detect changeId change and re-render unsafeHTML content
+                this.markdownReport = markdownReport;
+                // prism highlighting must run after dom renders, hence the delay
+                this._highlightTimeout = window.setTimeout(() => {
+                    this.highlightCodeBlocks();
+                }, 100);
+            })
                 .catch((e) => {
                 this.loading = false;
+                let message = 'Unable to fetch revision, something went wrong.';
+                if (e.detail) {
+                    message += ': ' + e.detail;
+                }
                 this.dispatchEvent(new CustomEvent(AddToast, {
                     bubbles: true,
                     composed: true,
@@ -261,8 +516,8 @@ let TardisControl = class TardisControl extends Colorful {
                         toast: {
                             type: ToastType.ERROR,
                             id: "timeline-error",
-                            body: e.detail,
-                            title: "timeline error",
+                            body: message,
+                            title: "Tardis failure",
                         }
                     }
                 }));
@@ -270,20 +525,17 @@ let TardisControl = class TardisControl extends Colorful {
         }
     }
     handleChange(resp) {
-        this.changeReport = resp;
-        this.explorer.updateGraphResponse(resp);
-        this.explorer.buildGraph();
+        this.doc.modelController.updateChangeReport(resp);
+        if (this.explorer) {
+            this.explorer.updateGraphResponse(resp);
+            this.explorer.buildGraph();
+        }
+        this.modelTree.triggerTreeClick('timeline');
         this.loading = false;
     }
 };
-TardisControl.styles = [specSummaryTimelineItemCss,
-    tardisControlCss, spinnerCss, tabsCss, panelsCss, scrollbarCss];
-__decorate([
-    state()
-], TardisControl.prototype, "changeReport", void 0);
-__decorate([
-    state()
-], TardisControl.prototype, "changeGraph", void 0);
+TardisControl.styles = [specSummaryTimelineItemCss, buttonCss,
+    spinnerCss, tabsCss, panelsCss, scrollbarCss, prismCss, chromaSyntaxCss, hrCss, changelogCss, tardisControlCss];
 __decorate([
     state()
 ], TardisControl.prototype, "history", void 0);
@@ -299,6 +551,18 @@ __decorate([
 __decorate([
     query('pb33f-doughnut-chart#breaking-doughnut')
 ], TardisControl.prototype, "breakingDoughnut", void 0);
+__decorate([
+    query('sl-tab-group.time-vortex')
+], TardisControl.prototype, "tabGroup", void 0);
+__decorate([
+    property()
+], TardisControl.prototype, "doc", void 0);
+__decorate([
+    state()
+], TardisControl.prototype, "markdownReport", void 0);
+__decorate([
+    state()
+], TardisControl.prototype, "mdDownloadLoading", void 0);
 TardisControl = __decorate([
     customElement("pb33f-tardis-control")
 ], TardisControl);

package/dist/components/time-vortex/time-vortex.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 import { TheDoctor } from "../the-doctor/the-doctor.js";
 import { HistoryPicker } from "./history-picker.js";
+import { SpecSummary } from "../../model/timeline.js";
 import { TardisControl } from "./tardis-control.js";
 import { RevisionClickedEvent } from "../../events/doctor.js";
 export declare class TimeVortex extends LitElement {
@@ -9,9 +10,14 @@ export declare class TimeVortex extends LitElement {
     historyPicker: HistoryPicker;
     tardisControl: TardisControl;
     doctor: TheDoctor;
-    constructor();
-    checkHistory(): void;
+    constructor(doc: TheDoctor);
+    firstUpdated(): void;
+    setTardisControl(control: TardisControl): void;
+    getHistorySummary(): Promise<SpecSummary[]>;
     updated(): void;
     revisionClicked(evt: CustomEvent<RevisionClickedEvent>): void;
+    private processRevisionClick;
     showTimelineSummary(): void;
+    private processShowSummary;
+    private ensureTardisControlReady;
 }