@pb33f/cowboy-components 0.5.7 → 0.6.0

package/dist/components/terminal-emulator/terminal-emulator.css.js

@@ -0,0 +1,197 @@
+import { css } from 'lit';
+export default css `
+
+    .render-stream {
+        font-family: var(--font-stack), monospace;
+        color: var(--font-color-sub3);
+        margin-left: 10px;
+        height: 250px;
+        overflow-y: auto;
+        content-visibility: auto;
+    }
+    
+    .render-stream::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .render-stream::-webkit-scrollbar-track {
+        background-color: black;
+    }
+
+    .render-stream::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        background: var(--secondary-color-lowalpha);
+        padding: var(--global-padding);
+    }
+    
+    
+    .message {
+        display: flex;
+    }
+
+    .chevron {
+        display: block;
+        content: ">";
+        color: var(--background-color);
+        min-width: 20px;
+    }
+
+    .active_message .chevron {
+        color: var(--terminal-text);
+        font-family: var(--font-stack-bold), monospace;
+        animation-delay: 2s;
+        animation-name: cursor;
+        animation-duration: 1s;
+        animation-iteration-count: infinite;
+    }
+
+    .error .chevron {
+        color: var(--error-color);
+        font-size: 10px;
+        padding-top: 4px;
+
+    }
+
+    .message-body {
+        display: block;
+    }
+
+    .active_message {
+        color: var(--terminal-text);
+        text-shadow: 0 0 10px var(--terminal-text);
+        font-family: var(--font-stack-bold), monospace;
+    }
+
+    .render-stream .message.active_message::before {
+        //content: "> ";
+        //color: var(--terminal-green);
+        //font-weight: bold;
+        //animation-delay: 2s;
+        ////-webkit-animation: cursor .8s infinite;
+        ////animation: cursor 3s infinite;
+        //animation-name: cursor;
+        //animation-duration: 1s;
+        //animation-iteration-count: infinite;
+    }
+
+    ._1 {
+        color: var(--font-color-sub1);
+    }
+
+    ._2 {
+        color: var(--font-color-sub2);
+    }
+
+    ._3 {
+        color: var(--font-color-sub3);
+    }
+
+    ._4 {
+        color: var(--font-color-sub3);
+    }
+
+
+    .error {
+        color: var(--error-font-color);
+        text-shadow: none;
+        font-weight: normal;
+    }
+
+    .error::before {
+        font-family: var(--font-stack-bold), monospace;
+        color: var(--error-font-color) !important;
+        text-shadow: none;
+    }
+
+    @-webkit-keyframes cursor {
+        0% {
+            opacity: 0;
+        }
+
+        50% {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes cursor {
+        0% {
+            opacity: 1;
+        }
+
+        50% {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    
+    .date {
+        padding-right: 5px;
+        color: var(--font-color-sub1);
+        text-shadow: 0 0 10px var(--font-color-sub1);
+        font-family: var(--font-stack), monospace;
+    }
+    
+    #terminal-drawer {
+        --size: 300px;
+        --body-spacing: 0;
+        --header-spacing: 0;
+        --footer-spacing: 0;
+    }
+
+    .connect-error {
+        color: var(--error-font-color);
+        font-weight: bold;
+    }
+
+    .connection-error-icon {
+        font-size: 10em;
+        color: var(--error-font-color);
+        margin-bottom: 20px
+    }
+
+    #terminal-drawer::part(header) {
+        border-top: 1px dashed var(--secondary-color);
+        font-family: var(--font-stack), monospace;
+        padding-left: 10px;
+        padding-right: 10px;
+        height: 30px;
+        border-bottom: 1px dashed var(--secondary-color-lowalpha);
+    }
+
+    #terminal-drawer::part(title) {
+        font-size: 16px;
+        line-height: inherit;
+        padding-top: 3px;
+        color: var(--primary-color);
+        text-shadow: 0 0 10px var(--primary-color-lowalpha);
+    }
+
+    .loading {
+        text-align: center;
+    }
+
+    .loading sl-spinner {
+        margin-top: 40px;
+        margin-bottom: 40px;
+    }
+
+
+    @keyframes fadeInAnimation {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+
+`;

package/dist/components/terminal-emulator/terminal-emulator.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
+import '@shoelace-style/shoelace/dist/components/format-date/format-date.js';
+export type TerminalMessage = {
+    type: 'info' | 'error' | 'warning' | 'success';
+    message: string;
+    metadata?: Record<string, any>;
+    timestamp: string;
+};
+export declare class TerminalEmulator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    messages: TerminalMessage[];
+    label: string;
+    renderStream: HTMLDivElement;
+    maxRows: number;
+    constructor();
+    reset(): void;
+    addMessage(msg: TerminalMessage): void;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/terminal-emulator/terminal-emulator.js

@@ -0,0 +1,95 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import renderStreamCss from "./terminal-emulator.css.js";
+import '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
+import '@shoelace-style/shoelace/dist/components/format-date/format-date.js';
+import { KVViewComponent } from "../kv-view/kv-view.js";
+let TerminalEmulator = class TerminalEmulator extends LitElement {
+    constructor() {
+        super();
+        this.label = 'console output';
+        this.maxRows = 100;
+        this.reset();
+    }
+    reset() {
+        this.messages = [];
+    }
+    addMessage(msg) {
+        this.messages = [...this.messages, msg].slice(-this.maxRows);
+    }
+    updated() {
+        requestAnimationFrame(() => {
+            if (this.renderStream) {
+                this.renderStream.scrollTop = this.renderStream.scrollHeight;
+            }
+        });
+    }
+    render() {
+        let c = 0;
+        let chevron = html `<span class="chevron">&gt;</span>`;
+        let errorChevron = html `<span class="chevron">🔴</span>`;
+        let fish = html `${this.messages.map((msg) => {
+            c++;
+            const isError = msg.type === 'error';
+            let chev = chevron;
+            let className = msg.type;
+            if (isError) {
+                className = 'error';
+                chev = errorChevron;
+            }
+            const time = html `<span class="date">[<sl-format-date date='${msg.timestamp}' hour="numeric" minute="numeric"></sl-format-date>]</span>`;
+            let meta = html ``;
+            if (msg.metadata && c == this.messages.length) {
+                const kvView = new KVViewComponent();
+                kvView.showHeader = false;
+                kvView.tiny = true;
+                kvView.data = new Map(Object.entries(msg.metadata));
+                meta = html `${kvView}`;
+            }
+            if (c == this.messages.length) {
+                return html `<span class="message active_message ${className}">${chev} ${time} <span class="message-body">${msg.message}</span></span>${meta}`;
+            }
+            else if (c == this.messages.length - 1) {
+                return html `<span class="message _1 ${className}">${chev} ${time} <span class="message-body">${msg.message}</span></span>${meta}`;
+            }
+            else if (c == this.messages.length - 2) {
+                return html `<span class="message _2 ${className}">${chev} ${time} <span class="message-body">${msg.message}</span></span>${meta}`;
+            }
+            else if (c == this.messages.length - 3) {
+                return html `<span class="message _3 ${className}">${chev} ${time} <span class="message-body">${msg.message}</span></span>${meta}`;
+            }
+            else if (c == this.messages.length - 4) {
+                return html `<span class="message _4 ${className}">${chev} ${time} <span class="message-body">${msg.message}</span></span>${meta}`;
+            }
+            return html `<span class="message ${className}">${chev} ${time} <span class="message-body">${msg.message}</span></span>${meta}`;
+        })}`;
+        return html `
+                <sl-drawer contained id="terminal-drawer" label="${this.label}" placement="bottom" open>
+                    <div class="render-stream">${fish}</div>
+                </sl-drawer>
+           `;
+    }
+};
+TerminalEmulator.styles = [renderStreamCss];
+__decorate([
+    state()
+], TerminalEmulator.prototype, "messages", void 0);
+__decorate([
+    property()
+], TerminalEmulator.prototype, "label", void 0);
+__decorate([
+    query('.render-stream')
+], TerminalEmulator.prototype, "renderStream", void 0);
+__decorate([
+    property({ type: Number })
+], TerminalEmulator.prototype, "maxRows", void 0);
+TerminalEmulator = __decorate([
+    customElement('pb33f-terminal-emulator')
+], TerminalEmulator);
+export { TerminalEmulator };

package/dist/components/the-doctor/the-doctor.d.ts

@@ -121,7 +121,6 @@ export declare class TheDoctor extends LitElement {
     private bounceId;
     private problems;
     private readonly statusBar;
-    private session;
     private readonly feedback;
     private readonly activitySpinner;
     private readonly manageRuleset;
@@ -158,7 +157,7 @@ export declare class TheDoctor extends LitElement {
     private readonly busPort;
     private readonly busHost;
     private readonly busVersion;
-    private useTLS;
+    private readonly useTLS;
     readonly nodeLimit: number;
     private pendingLine;
     private rolodexDividerPosition;

package/dist/components/the-doctor/the-doctor.js

@@ -46,7 +46,7 @@ import { ExplorerComponent } from "../visualizer/explorer.js";
 import { RenderedNodeComponent } from "../model-renderer/rendered-node.js";
 import tabsCss from "../../css/tabs.css.js";
 import { CreateBus } from "@pb33f/ranch";
-import { Command, CreditStreamChannel, DoctorServiceChannel, isBrokerResponse, QueuePrefix, SpecStreamChannel, } from "../../model/channels";
+import { Command, CreditStreamChannel, DoctorServiceChannel, isBrokerResponse, QueuePrefix, SpecStreamChannel } from "../../model/channels";
 import formsCss from "../../css/forms.css";
 import spinnerCss from "../../css/spinner.css";
 import { UploadArchiveComponent } from "./upload-archive";
@@ -54,6 +54,7 @@ import { NodeType } from "../../model/node_type";
 import tooltipCss from "../../css/tooltip.css";
 import { NukeWorkspaceComponent } from "./nuke-workspace";
 import { CreditTicker } from "../credit-ticker/credit-ticker";
+import { AuthController } from "../../controllers/auth";
 import { AuthService } from "../../services/auth-service";
 export const GraphBag = "pb33f-doctor-graph";
 export const PanelStateBag = "pb33f-doctor-panel-state";
@@ -95,11 +96,11 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.specStreamChannel = this.bus.createChannel(SpecStreamChannel);
         this.creditStreamChannel = this.bus.createChannel(CreditStreamChannel);
         this.bus.mapChannelToBrokerDestination(QueuePrefix + DoctorServiceChannel, DoctorServiceChannel);
-        this.bus.mapChannelToBrokerDestination(QueuePrefix + SpecStreamChannel, SpecStreamChannel);
-        this.bus.mapChannelToBrokerDestination(QueuePrefix + CreditStreamChannel, CreditStreamChannel);
+        // this.bus.mapChannelToBrokerDestination(QueuePrefix + SpecStreamChannel, SpecStreamChannel);
+        // this.bus.mapChannelToBrokerDestination(QueuePrefix + CreditStreamChannel, CreditStreamChannel);
         this.doctorChannelSubscription = this.doctorServiceChannel.subscribe(this.doctorServiceHandler());
-        this.specChannelSubscription = this.specStreamChannel.subscribe(this.specStreamHandler());
-        this.creditChannelSubscription = this.creditStreamChannel.subscribe(this.creditStreamHandler());
+        // this.specChannelSubscription = this.specStreamChannel.subscribe(this.specStreamHandler());
+        // this.creditChannelSubscription = this.creditStreamChannel.subscribe(this.creditStreamHandler());
         // create a stateful bag manager
         this.bagManager = CreateBagManager(true);
         this.bagManager.loadStatefulBags().then(this.loadState.bind(this));
@@ -155,8 +156,24 @@ let TheDoctor = class TheDoctor extends LitElement {
         else {
             this.doctorEndpoint = doctorEndpoint;
         }
-        // TODO: make this configurable
-        //this.editor.language = "yaml";
+        LintingService.doctorEndpoint = this.doctorEndpoint;
+        FeedbackService.doctorEndpoint = this.doctorEndpoint;
+        RulesetService.doctorEndpoint = this.doctorEndpoint;
+        ModelService.doctorEndpoint = this.doctorEndpoint;
+        AuthService.doctorEndpoint = this.doctorEndpoint;
+        // session call back for when we're online.
+        const sessionCallback = (session) => {
+            if (session.creditsRemaining) {
+                this.creditTicker.credits = session.creditsRemaining;
+            }
+            else {
+                this.creditTicker.credits = session.creditsRemaining;
+            }
+            this.creditTicker.visible = true;
+            this.connectToBroker();
+        };
+        // create auth controller
+        this.authController = new AuthController(this, sessionCallback, true);
         //@ts-ignore
         this.addEventListener(EditorUpdated, this.specChanged);
         //@ts-ignore
@@ -270,6 +287,7 @@ let TheDoctor = class TheDoctor extends LitElement {
             heartbeatOutgoing: 0,
             onConnect: () => {
                 console.log("💊 Connected to the %cOpenAPI Doctor%c, we are ready to communicate.", 'background: #0d1117; color: #62C4FFFF; font-weight: bold', 'color: default');
+                this.bus.mapChannels();
                 this.whoAmI();
             }
         };
@@ -286,13 +304,20 @@ let TheDoctor = class TheDoctor extends LitElement {
             if (msg.payload?.payload != null) {
                 if (isBrokerResponse(msg.payload.payload)) {
                     this.brokerConnectionId = msg.payload.payload.broker;
-                    console.log("💊 Welcome to the clinic, the %cdoctor %cis ready to see you.", 'color: #62C4FFFF; font-weight: bold', 'color: default');
-                    this.startTheDoctor();
+                    this.authController.associateBroker(this.brokerConnectionId).then(() => {
+                        console.log('broker connection', this.brokerConnectionId);
+                        console.log("💊 Welcome to the clinic, the %cdoctor %cis ready to see you.", 'color: #62C4FFFF; font-weight: bold', 'color: default');
+                        this.startTheDoctor();
+                    });
                 }
             }
         };
     }
     startTheDoctor() {
+        this.specChannelSubscription = this.specStreamChannel.subscribe(this.specStreamHandler());
+        this.creditChannelSubscription = this.creditStreamChannel.subscribe(this.creditStreamHandler());
+        this.bus.mapChannelToBrokerDestination(QueuePrefix + SpecStreamChannel, SpecStreamChannel);
+        this.bus.mapChannelToBrokerDestination(QueuePrefix + CreditStreamChannel, CreditStreamChannel);
         this.boostrap();
         this.loadingOverlay.hide();
     }
@@ -1260,12 +1285,6 @@ let TheDoctor = class TheDoctor extends LitElement {
         }
     }
     loadState() {
-        LintingService.doctorEndpoint = this.doctorEndpoint;
-        FeedbackService.doctorEndpoint = this.doctorEndpoint;
-        RulesetService.doctorEndpoint = this.doctorEndpoint;
-        ModelService.doctorEndpoint = this.doctorEndpoint;
-        AuthService.doctorEndpoint = this.doctorEndpoint;
-        this.connectToBroker();
         this.graphBag = this.bagManager.getBag(GraphBag);
         this.docBag = this.bagManager.getBag(DoctorDocumentBag);
         this.rolodexResponseBag = this.bagManager.getBag(RolodexResponseBag);
@@ -1560,7 +1579,7 @@ let TheDoctor = class TheDoctor extends LitElement {
     customRulesetEnabled(event) {
         const customRS = { rules: new Map() };
         customRS.id = crypto.randomUUID();
-        customRS.owner = this.session.sessionId;
+        customRS.owner = this.authController.session.sessionId;
         event.detail.rules.forEach((rule) => {
             if (rule.rule.id != rule.ruleId) {
                 rule.rule.id = rule.ruleId;
@@ -1671,92 +1690,78 @@ let TheDoctor = class TheDoctor extends LitElement {
     }
     fetchDocs() {
         this.activitySpinner.show();
-        // the first this we need to do is start a session
-        LintingService.startSession().then((session) => {
-            this.session = session;
-            if (this.session.creditsRemaining) {
-                this.creditTicker.credits = this.session.creditsRemaining;
-            }
-            else {
-                this.creditTicker.credits = this.session.creditsRemaining;
-            }
-            this.creditTicker.visible = true;
-            const url = new URL(window.location.href);
-            const urlParam = url.searchParams.get('url');
-            if (urlParam) {
-                //this.urlInput.value = urlParam;
-                this.activeURL = urlParam;
-                this.lintSpec('', urlParam);
-            }
-            LintingService.fetchAllHowToFix().then((result) => {
-                if (result) {
-                    result.forEach((howToFix) => {
-                        this.howToFixBag?.set(howToFix.ruleId, howToFix);
-                    });
-                }
-            }).catch((e) => {
-                this.platformUnavailable(e);
-                console.error("documentation service is down");
-            });
-            this.ruleDocsBag = this.bagManager.getBag(RuleDocumentationBag);
-            this.functionDocsBag = this.bagManager.getBag(FunctionDocumentationBag);
-            // populate docs via worker.
-            this.ruleDocsWorker.addEventListener("message", (event) => {
-                const data = event.data;
-                if (data) {
-                    this.docExpirationBag?.set(DocumentationExpirationBag, new Date().toISOString());
-                    data.forEach((doc) => {
-                        if (doc.ruleId) {
-                            this.ruleDocsBag?.set(doc.ruleId, doc);
-                        }
-                        if (doc.functionId) {
-                            this.functionDocsBag?.set(doc.functionId, doc);
-                        }
-                    });
-                    this.activitySpinner.hide();
-                }
-            });
-            let ruleDocs = [];
-            let functionDocs = [];
-            if (this.ruleDocsBag) {
-                ruleDocs = Array.from(this.ruleDocsBag.export().keys());
-            }
-            if (this.functionDocsBag) {
-                functionDocs = Array.from(this.functionDocsBag.export().keys());
-            }
-            const fetchDocs = () => {
-                this.ruleDocsWorker.postMessage({
-                    start: true,
-                    endpoint: this.doctorEndpoint,
-                    existingRules: ruleDocs,
-                    existingFunctions: functionDocs
+        const url = new URL(window.location.href);
+        const urlParam = url.searchParams.get('url');
+        if (urlParam) {
+            //this.urlInput.value = urlParam;
+            this.activeURL = urlParam;
+            this.lintSpec('', urlParam);
+        }
+        LintingService.fetchAllHowToFix().then((result) => {
+            if (result) {
+                result.forEach((howToFix) => {
+                    this.howToFixBag?.set(howToFix.ruleId, howToFix);
                 });
-            };
-            // check expiration
-            if (this.docExpirationBag) {
-                const expiration = this.docExpirationBag.get(DocumentationExpirationBag);
-                // if the docs are older than 15 days, refresh them.
-                if (expiration) {
-                    const now = new Date().getTime();
-                    const then = new Date(expiration).getTime();
-                    if (now - then > 1296000000) {
-                        fetchDocs();
+            }
+        }).catch((e) => {
+            this.platformUnavailable(e);
+            console.error("documentation service is down");
+        });
+        this.ruleDocsBag = this.bagManager.getBag(RuleDocumentationBag);
+        this.functionDocsBag = this.bagManager.getBag(FunctionDocumentationBag);
+        // populate docs via worker.
+        this.ruleDocsWorker.addEventListener("message", (event) => {
+            const data = event.data;
+            if (data) {
+                this.docExpirationBag?.set(DocumentationExpirationBag, new Date().toISOString());
+                data.forEach((doc) => {
+                    if (doc.ruleId) {
+                        this.ruleDocsBag?.set(doc.ruleId, doc);
                     }
-                    else {
-                        this.activitySpinner.hide();
+                    if (doc.functionId) {
+                        this.functionDocsBag?.set(doc.functionId, doc);
                     }
+                });
+                this.activitySpinner.hide();
+            }
+        });
+        let ruleDocs = [];
+        let functionDocs = [];
+        if (this.ruleDocsBag) {
+            ruleDocs = Array.from(this.ruleDocsBag.export().keys());
+        }
+        if (this.functionDocsBag) {
+            functionDocs = Array.from(this.functionDocsBag.export().keys());
+        }
+        const fetchDocs = () => {
+            this.ruleDocsWorker.postMessage({
+                start: true,
+                endpoint: this.doctorEndpoint,
+                existingRules: ruleDocs,
+                existingFunctions: functionDocs
+            });
+        };
+        // check expiration
+        if (this.docExpirationBag) {
+            const expiration = this.docExpirationBag.get(DocumentationExpirationBag);
+            // if the docs are older than 15 days, refresh them.
+            if (expiration) {
+                const now = new Date().getTime();
+                const then = new Date(expiration).getTime();
+                if (now - then > 1296000000) {
+                    fetchDocs();
                 }
                 else {
-                    fetchDocs();
+                    this.activitySpinner.hide();
                 }
             }
             else {
                 fetchDocs();
             }
-        }).catch((e) => {
-            this.platformUnavailable(e);
-            console.error("cannot start session", e);
-        });
+        }
+        else {
+            fetchDocs();
+        }
     }
     fetchRulesetMap() {
         RulesetService.getSessionRulesetMap().then((result) => {
@@ -1797,7 +1802,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                 // create a new custom ruleset with a map of rules
                 let customRS = { rules: new Map() };
                 customRS.id = crypto.randomUUID();
-                customRS.owner = this.session.sessionId;
+                customRS.owner = this.authController.session.sessionId;
                 customRS.rules = new Map(Object.entries(result.rules));
                 customRS.rules.forEach((rule, id) => {
                     rule.id = id; // set the id to the key
@@ -1839,7 +1844,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                     // create a new custom ruleset with a map of rules
                     let customRS = { rules: new Map() };
                     customRS.id = crypto.randomUUID();
-                    customRS.owner = this.session.sessionId;
+                    customRS.owner = this.authController.session.sessionId;
                     customRS.rules = new Map(Object.entries(json.rules));
                     customRS.rules.forEach((rule, id) => {
                         if (rule.id != id)

package/dist/controllers/auth.d.ts

@@ -1,13 +1,19 @@
 import { ReactiveControllerHost } from 'lit';
-import { AuthenticationState } from "../model/auth";
+import { AuthenticationState } from "../model/auth.js";
+import { Session } from "../model/session.js";
 export declare class AuthController {
     host: ReactiveControllerHost;
     doctorEndpoint: string;
     state: AuthenticationState | null;
     authenticated: boolean;
     urlCapture: string | null;
-    constructor(host: ReactiveControllerHost);
+    session: Session;
+    sessionCallback: Function;
+    startSessionAutomatically: boolean;
+    constructor(host: ReactiveControllerHost, sessionCallback?: Function, autoStart?: boolean);
     hostConnected(): void;
+    private startSession;
+    associateBroker(brokerId: string): Promise<boolean>;
     authGithub(): void;
     logout(): void;
     checkState(): Promise<AuthenticationState>;