@pb33f/cowboy-components 0.7.18 → 0.8.0

package/dist/components/workspaces/workspace-view.js

@@ -6,10 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html } from "lit";
 import { customElement, state } from "lit/decorators.js";
+import { GitHubWorkspaceView } from "../github/github-workspace-view.js";
 import { Formable } from "../../model/formable.js";
 import { WorkspaceForm } from "./workspace-form.js";
 import { WorkspaceDestroyView } from "./workspace-destroy-dialog.js";
-import { DeleteWorkspace, SwitchWorkspace, FormSubmitComplete, RefreshWorkspaces, CreateWorkspace, UpdateWorkspace, DailyCreditRequested, DailyCreditApplied, DailyCreditErrorChanged } from "../../events/doctor.js";
+import { DeleteWorkspace, SwitchWorkspace, FormSubmitComplete, RefreshWorkspaces, CreateWorkspace, UpdateWorkspace, DailyCreditRequested, DailyCreditApplied, DailyCreditErrorChanged, LinkedWorkspaceHoverOver, LinkedWorkspaceHoverOut } from "../../events/doctor.js";
 import { AttentionType } from "../attention-box/attention-box.js";
 import listsCss from "../../css/lists.css.js";
 import workspaceViewCss from "./workspace-view.css.js";
@@ -17,16 +18,21 @@ import badgesCss from "../../css/badges.css.js";
 import linksCss from "../../css/links.css.js";
 import tooltipCss from "../../css/tooltip.css.js";
 import hrCss from "../../css/hr.css.js";
+import { DoctorIcon } from "../model-icon/doctor-icon.js";
 let WorkspacesView = class WorkspacesView extends Formable {
-    constructor(doc, wsController, walletController) {
+    constructor(doc, wsController, walletController, githubController) {
         super(doc);
         this.doc = doc;
         this.wsController = wsController;
         this.walletController = walletController;
+        this.githubController = githubController;
         this.active = false;
         this.mutateWorkspaceActive = false;
         this.workspaceForm = new WorkspaceForm();
         this.destroyDialog = new WorkspaceDestroyView();
+        this.githubView = new GitHubWorkspaceView();
+        this.githubView.githubController = this.githubController;
+        this.githubController.setGitHubView(this.githubView);
         this.setupDestroyDialogEvents();
         this.setupWorkspaceFormEvents();
         this.setupWalletEvents();
@@ -58,6 +64,13 @@ let WorkspacesView = class WorkspacesView extends Formable {
         this.walletController.addEventListener(DailyCreditApplied, () => this.requestUpdate());
         this.walletController.addEventListener(DailyCreditErrorChanged, () => this.requestUpdate());
     }
+    async firstUpdated() {
+        // Initialize GitHub controller after the view is rendered
+        if (this.githubController && this.doc?.brokerController) {
+            await this.doc.brokerController.waitUntilReady();
+            await this.githubController.init();
+        }
+    }
     handleDailyCreditRequest() {
         this.walletController.dispatchEvent(new CustomEvent(DailyCreditRequested, {
             bubbles: true,
@@ -84,17 +97,17 @@ let WorkspacesView = class WorkspacesView extends Formable {
     }
     lightWorkspace(id) {
         if (id) {
-            let li = this.shadowRoot?.querySelector('li#workspace-' + id);
-            if (li) {
-                li.classList.add('active');
+            let row = this.shadowRoot?.querySelector('.workspace-row#workspace-' + id);
+            if (row) {
+                row.classList.add('active');
             }
         }
     }
     dimWorkspace(id) {
         if (id) {
-            let li = this.shadowRoot?.querySelector('li#workspace-' + id);
-            if (li) {
-                li.classList.remove('active');
+            let row = this.shadowRoot?.querySelector('.workspace-row#workspace-' + id);
+            if (row) {
+                row.classList.remove('active');
             }
         }
     }
@@ -123,10 +136,40 @@ let WorkspacesView = class WorkspacesView extends Formable {
     deleteWorkspaceError(error) {
         this.destroyDialog.setError(error);
     }
+    handleWorkspaceHover(workspace) {
+        this.lightWorkspace(workspace.workspaceId);
+        if (workspace.linkedRepo && workspace.workspaceId) {
+            this.githubController.dispatchEvent(new CustomEvent(LinkedWorkspaceHoverOver, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    repositoryId: workspace.linkedRepo,
+                    workspaceId: workspace.workspaceId,
+                    workspaceName: workspace.name
+                }
+            }));
+        }
+    }
+    handleWorkspaceUnhover(workspace) {
+        this.dimWorkspace(workspace.workspaceId);
+        if (workspace.linkedRepo && workspace.workspaceId) {
+            this.githubController.dispatchEvent(new CustomEvent(LinkedWorkspaceHoverOut, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    repositoryId: workspace.linkedRepo,
+                    workspaceId: workspace.workspaceId,
+                    workspaceName: workspace.name
+                }
+            }));
+        }
+    }
     render() {
         if (!this.workspaces || this.workspaces.length === 0) {
             return html ``;
         }
+        const activeWorkspace = this.workspaces.find(w => w.active);
+        this.githubView.workspaceReadOnly = activeWorkspace?.readOnly ?? false;
         return html `
             <div class="workspace-area">
                 ${this.destroyDialog}
@@ -160,42 +203,51 @@ let WorkspacesView = class WorkspacesView extends Formable {
                 ` : ''}
 
                 <hr class="main-break"/>
-                <ul>
-
+                <div class="workspace-grid">
                     ${this.workspaces.map((w) => {
             // Determine workspace content based on active status
             const workspaceContent = w.active
                 ? html `<strong>${w.name}</strong> &nbsp;<sl-badge pulse>active</sl-badge>`
                 : html `<a href="#" class="workspace-link" @click=${() => this.selectWorkspace(w)}>${w.name}</a>`;
-            // Determine CSS classes and styling
-            const liClasses = w.active ? 'secondary' : '';
-            const liStyles = w.active ? 'color: var(--secondary-color)' : '';
+            // Determine chevron color based on active status
+            const chevronColor = w.active ? 'var(--secondary-color)' : 'var(--primary-color)';
             return html `
-                            <li id="workspace-${w.workspaceId}" 
-                                class="${liClasses}"
-                                style="${liStyles}"
-                                @mouseover="${() => this.lightWorkspace(w.workspaceId)}"
-                                @mouseout="${() => this.dimWorkspace(w.workspaceId)}">
+                            <div class="workspace-row" 
+                                 id="workspace-${w.workspaceId}"
+                                 @mouseover="${() => this.handleWorkspaceHover(w)}"
+                                 @mouseout="${() => this.handleWorkspaceUnhover(w)}">
+                                
+                                <div class="col-github-icon">
+                                    ${w.linkedRepo ? DoctorIcon.getGitHubIcon(16) : ''}
+                                </div>
                                 
-                                ${workspaceContent}
+                                <div class="col-chevron" style="color: ${chevronColor}">></div>
                                 
-                                <div style="display: inline-block; float: right">
-                                    <sl-icon-button class="edit-workspace" name="pencil-square" 
+                                <div class="col-name">
+                                    ${workspaceContent}
+                                </div>
+                                
+                                <div class="col-actions">
+                                    <sl-icon-button class="edit-workspace" name="pencil-square" label="Edit workspace"
                                                     @click="${() => { this.showEditDialog(w); }}"></sl-icon-button>
                                     ${!w.default && !w.active ? html `
-                                        <sl-icon-button class="delete-workspace" name="trash3" 
+                                        <sl-icon-button class="delete-workspace" name="trash3" label="Delete workspace"
                                                         @click="${() => { this.showDestroyDialog(w); }}"></sl-icon-button>
                                     ` : ''}
                                 </div>
-                            </li>
+                            </div>
                         `;
         })}
-                </ul>
+                </div>
+                
+                <hr/>
+                
+                ${this.githubView}
 
                 <hr/>
                 <h3>
                     <span style="color: var(--terminal-text)">$</span> 
-                    Free Daily Credit <span style="color: var(--terminal-text)">$</span>
+                    FREE DAILY CREDIT <span style="color: var(--terminal-text)">$</span>
                 </h3>
                 
                 <p>

package/dist/controllers/auth-controller.d.ts

@@ -1,6 +1,15 @@
 import { AuthenticationMeta } from "../events/doctor.js";
 import { AuthenticationState } from "../model/auth.js";
 import { Session } from "../model/session.js";
+/**
+ * AuthController uses a singleton pattern intentionally:
+ * - Maintains shared auth state across components outside TheDoctor
+ * - Tracks multiple host components via hosts[] array for coordinated updates
+ * - Listens for window-level auth events (GitHub auth, logout)
+ * - Constructor returns existing instance if one exists, adding new host to hosts[]
+ *
+ * For testing: Use vi.mocked(AuthController.getInstance).mockReturnValue(mockAuthController)
+ */
 export declare class AuthController extends EventTarget {
     private static _instance;
     static getInstance(): AuthController | null;

package/dist/controllers/auth-controller.js

@@ -1,6 +1,16 @@
 import { AuthenticationGithubRequested, AuthenticationStateChange, CreditEmpty, LogoutRequested, NukeWorkspaceEvent, StartSessionFailed } from "../events/doctor.js";
 import { AuthService } from "../services/auth-service.js";
 import { HeaderService } from "../services/header-service.js";
+import { typedEventHandler } from "../helpers/typed-events.js";
+/**
+ * AuthController uses a singleton pattern intentionally:
+ * - Maintains shared auth state across components outside TheDoctor
+ * - Tracks multiple host components via hosts[] array for coordinated updates
+ * - Listens for window-level auth events (GitHub auth, logout)
+ * - Constructor returns existing instance if one exists, adding new host to hosts[]
+ *
+ * For testing: Use vi.mocked(AuthController.getInstance).mockReturnValue(mockAuthController)
+ */
 export class AuthController extends EventTarget {
     static getInstance() {
         const t = AuthController._instance;
@@ -20,7 +30,6 @@ export class AuthController extends EventTarget {
             }
             t.startSessionAutomatically = autoStart;
             t.brokerStarted = false;
-            // t.start()
             return t;
         }
         this.checkingState = false;
@@ -41,10 +50,8 @@ export class AuthController extends EventTarget {
         }
         // cache the one and only instance
         AuthController._instance = this;
-        // @ts-ignore
-        window.addEventListener(AuthenticationGithubRequested, this.authGithub.bind(this));
-        // @ts-ignore
-        window.addEventListener(LogoutRequested, this.logout.bind(this));
+        window.addEventListener(AuthenticationGithubRequested, typedEventHandler(this.authGithub.bind(this)));
+        window.addEventListener(LogoutRequested, typedEventHandler(this.logout.bind(this)));
     }
     start() {
         if (!this.brokerStarted) {

package/dist/controllers/broker-controller.d.ts

@@ -1,22 +1,48 @@
-import { TheDoctor } from "../components/the-doctor/the-doctor.js";
-import { BusCallback, CommandResponse } from "@pb33f/ranch";
+import type { BrokerControllerDeps } from "../interfaces/doctor-interfaces.js";
+import { BusCallback, CommandResponse, StompError } from "@pb33f/ranch";
 export declare class BrokerController extends EventTarget {
     private readonly specStreamChannel;
     private readonly creditStreamChannel;
+    private readonly rulesetChannel;
     private readonly doctorServiceChannel;
+    private readonly modelServiceChannel;
+    private readonly errorChannel;
     private readonly busPort;
     private readonly busHost;
     private readonly busVersion;
     private readonly bus;
-    readonly doc: TheDoctor;
+    private readonly deps;
     readonly useTLS: boolean;
     brokerConnectionId: string;
     currentVersion: string;
-    constructor(doc: TheDoctor);
+    private readyPromise;
+    private readyResolver;
+    private heartbeatInterval;
+    private readonly HEARTBEAT_INTERVAL_MS;
+    private doctorServiceSubscription;
+    private specStreamSubscription;
+    private creditStreamSubscription;
+    private errorStreamSubscription;
+    constructor(deps: BrokerControllerDeps);
     connectToBroker(): void;
     doctorServiceHandler(): BusCallback<CommandResponse>;
     whoAmI(): void;
     startTheDoctor(): void;
     specStreamHandler(): BusCallback<CommandResponse>;
     creditStreamHandler(): BusCallback<CommandResponse>;
+    errorStreamHandler(): BusCallback<StompError>;
+    /**
+     * Returns a promise that resolves when the broker connection is established and ready.
+     * If already connected, resolves immediately.
+     */
+    waitUntilReady(): Promise<void>;
+    /**
+     * Checks if the broker is currently connected and ready.
+     */
+    isReady(): boolean;
+    private mapChannels;
+    private confirmBrokerConnection;
+    private startBrokerHeartbeat;
+    private stopBrokerHeartbeat;
+    destroy(): void;
 }

package/dist/controllers/broker-controller.js

@@ -1,18 +1,31 @@
 import { DefaultDocument } from "../components/the-doctor/the-doctor.js";
-import { Command, CreditStreamChannel, DoctorServiceChannel, isBrokerResponse, QueuePrefix, SpecStreamChannel } from "../model/channels.js";
-import { CreditStreamUpdated } from "../events/doctor.js";
+import { Command, CreditStreamChannel, DoctorServiceChannel, isBrokerResponse, ModelServiceChannel, QueuePrefix, PublishQueuePrefix, SpecStreamChannel, WalletServiceChannel, BrokerConfirmChannel, BrokerHeartbeatChannel, RuleSetServiceChannel } from "../model/channels.js";
+import { CreditStreamUpdated, BrokerConnected, SocketDisconnected } from "../events/doctor.js";
 export class BrokerController extends EventTarget {
-    constructor(doc) {
+    constructor(deps) {
         super();
         this.useTLS = false;
-        this.doc = doc;
-        this.bus = doc.bus;
+        this.currentVersion = '';
+        this.readyResolver = null;
+        this.heartbeatInterval = null;
+        this.HEARTBEAT_INTERVAL_MS = 30000;
+        this.doctorServiceSubscription = null;
+        this.specStreamSubscription = null;
+        this.creditStreamSubscription = null;
+        this.errorStreamSubscription = null;
+        this.deps = deps;
+        this.bus = deps.bus;
+        this.readyPromise = new Promise((resolve) => {
+            this.readyResolver = resolve;
+        });
         this.doctorServiceChannel = this.bus.createChannel(DoctorServiceChannel);
+        this.modelServiceChannel = this.bus.createChannel(ModelServiceChannel);
         this.specStreamChannel = this.bus.createChannel(SpecStreamChannel);
         this.creditStreamChannel = this.bus.createChannel(CreditStreamChannel);
-        this.bus.mapChannelToBrokerDestination(QueuePrefix + DoctorServiceChannel, DoctorServiceChannel);
-        this.doctorServiceChannel.subscribe(this.doctorServiceHandler());
-        // extract port from session storage.
+        this.rulesetChannel = this.bus.createChannel(RuleSetServiceChannel);
+        this.errorChannel = this.bus.getChannel('errors');
+        this.mapChannels(DoctorServiceChannel, ModelServiceChannel, RuleSetServiceChannel);
+        this.doctorServiceSubscription = this.doctorServiceChannel.subscribe(this.doctorServiceHandler());
         this.busPort = sessionStorage.getItem("pb33f-doctor-port");
         this.busHost = sessionStorage.getItem("pb33f-doctor-host");
         if (!this.busPort) {
@@ -31,7 +44,6 @@ export class BrokerController extends EventTarget {
         if (this.useTLS) {
             protocol = "wss://";
         }
-        // configure wiretap broker.
         const config = {
             brokerURL: protocol + this.busHost + ':' + this.busPort + '/ranch',
             heartbeatIncoming: 0,
@@ -40,6 +52,20 @@ export class BrokerController extends EventTarget {
                 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();
+            },
+            onStompError: (frame) => {
+                console.log("🛑 Socket Error received:", frame.body || frame.headers?.message || 'Unknown error', "- Stopping all STOMP communication");
+                this.stopBrokerHeartbeat();
+                const client = this.bus.getClient();
+                if (client) {
+                    client.reconnectDelay = 0;
+                    client.deactivate();
+                }
+                this.deps.dispatchEvent(new CustomEvent(SocketDisconnected, {
+                    bubbles: true,
+                    composed: true,
+                    detail: { frame }
+                }));
             }
         };
         this.bus.connectToBroker(config);
@@ -49,7 +75,7 @@ export class BrokerController extends EventTarget {
             if (msg.payload?.payload != null) {
                 if (isBrokerResponse(msg.payload.payload)) {
                     this.brokerConnectionId = msg.payload.payload.broker;
-                    this.doc.authController.associateBroker(this.brokerConnectionId).then(() => {
+                    this.deps.authController.associateBroker(this.brokerConnectionId).then(() => {
                         // check version from the server
                         const version = msg.payload.payload.version;
                         if (version !== "") {
@@ -58,11 +84,11 @@ export class BrokerController extends EventTarget {
                         const memVersion = localStorage.getItem("pb33f-doctor-version");
                         if (memVersion) {
                             if (this.currentVersion != memVersion) {
-                                if (!this.doc.authController.authenticated) {
-                                    this.doc.nukeWorkspaceHandler();
+                                if (!this.deps.authController.authenticated) {
+                                    this.deps.nukeWorkspaceHandler();
                                 }
                                 else {
-                                    this.doc.bagManager.resetBags();
+                                    this.deps.bagManager.resetBags();
                                     localStorage.removeItem("pb33f-doctor-version");
                                     window.location.reload();
                                 }
@@ -73,6 +99,17 @@ export class BrokerController extends EventTarget {
                             localStorage.setItem("pb33f-doctor-version", this.currentVersion);
                         }
                         console.log("💊 Welcome to the clinic, the %cdoctor %cis ready to see you. [" + "v" + version + "]", 'color: #62C4FFFF; font-weight: bold', 'color: default');
+                        // Resolve the ready promise
+                        if (this.readyResolver) {
+                            this.readyResolver();
+                            this.readyResolver = null;
+                        }
+                        // Dispatch broker connected event so components can start using the broker
+                        this.deps.dispatchEvent(new CustomEvent(BrokerConnected, {
+                            bubbles: true,
+                            composed: true,
+                            detail: { brokerId: this.brokerConnectionId }
+                        }));
                         this.startTheDoctor();
                     });
                 }
@@ -86,22 +123,25 @@ export class BrokerController extends EventTarget {
         });
     }
     startTheDoctor() {
-        this.specStreamChannel.subscribe(this.specStreamHandler());
-        this.creditStreamChannel.subscribe(this.creditStreamHandler());
-        this.bus.mapChannelToBrokerDestination(QueuePrefix + SpecStreamChannel, SpecStreamChannel);
-        this.bus.mapChannelToBrokerDestination(QueuePrefix + CreditStreamChannel, CreditStreamChannel);
-        this.doc.boostrap();
+        this.specStreamSubscription = this.specStreamChannel.subscribe(this.specStreamHandler());
+        this.creditStreamSubscription = this.creditStreamChannel.subscribe(this.creditStreamHandler());
+        this.errorStreamSubscription = this.errorChannel.subscribe(this.errorStreamHandler());
+        this.mapChannels(SpecStreamChannel, CreditStreamChannel, WalletServiceChannel);
+        this.deps.globalTaskController.init();
+        this.deps.timelineController.init();
+        this.confirmBrokerConnection();
+        this.startBrokerHeartbeat();
+        this.deps.boostrap();
     }
     specStreamHandler() {
         return (msg) => {
             if (msg.payload?.payload != null) {
-                // base64 decode the payload and update the editor!
                 const decoded = atob(msg.payload.payload);
-                if (this.doc.docBag) {
-                    this.doc.docBag.set(DefaultDocument, decoded);
+                if (this.deps.docBag) {
+                    this.deps.docBag.set(DefaultDocument, decoded);
                 }
-                this.doc.editor?.setValue(decoded, true);
-                this.doc.requestUpdate();
+                this.deps.editor?.setValue(decoded, true);
+                this.deps.requestUpdate();
             }
         };
     }
@@ -109,9 +149,9 @@ export class BrokerController extends EventTarget {
         return (msg) => {
             if (msg.payload?.payload != null) {
                 const newCredits = parseInt(msg.payload.payload);
-                this.doc.creditTicker.credits = newCredits;
+                this.deps.creditTicker.credits = newCredits;
                 // Dispatch event to the doctor for credit stream updates
-                this.doc.dispatchEvent(new CustomEvent(CreditStreamUpdated, {
+                this.deps.dispatchEvent(new CustomEvent(CreditStreamUpdated, {
                     bubbles: true,
                     composed: true,
                     detail: { credits: newCredits }
@@ -119,4 +159,87 @@ export class BrokerController extends EventTarget {
             }
         };
     }
+    errorStreamHandler() {
+        return (msg) => {
+            if (msg.command === 'STOMP_ERROR' && msg.payload) {
+                const error = msg.payload;
+                console.log("💊 Centralized error handler:", error.message);
+            }
+        };
+    }
+    /**
+     * Returns a promise that resolves when the broker connection is established and ready.
+     * If already connected, resolves immediately.
+     */
+    async waitUntilReady() {
+        if (this.brokerConnectionId) {
+            return;
+        }
+        return this.readyPromise;
+    }
+    /**
+     * Checks if the broker is currently connected and ready.
+     */
+    isReady() {
+        return Boolean(this.brokerConnectionId);
+    }
+    mapChannels(...channels) {
+        channels.forEach(channel => {
+            this.bus.mapChannelToBrokerDestination(QueuePrefix + channel, channel);
+        });
+    }
+    confirmBrokerConnection() {
+        try {
+            this.bus.publish({
+                destination: PublishQueuePrefix + BrokerConfirmChannel,
+                body: JSON.stringify({
+                    request: 'confirm',
+                    payload: { brokerId: this.brokerConnectionId }
+                })
+            });
+        }
+        catch (error) {
+            console.error('failed to confirm broker connection:', error);
+        }
+    }
+    startBrokerHeartbeat() {
+        this.stopBrokerHeartbeat();
+        this.heartbeatInterval = setInterval(() => {
+            const client = this.bus.getClient();
+            if (!client || !client.connected) {
+                this.stopBrokerHeartbeat();
+                return;
+            }
+            try {
+                this.bus.publish({
+                    destination: PublishQueuePrefix + BrokerHeartbeatChannel,
+                    body: JSON.stringify({
+                        request: 'heartbeat',
+                        payload: { brokerId: this.brokerConnectionId }
+                    })
+                });
+            }
+            catch (error) {
+                console.warn('heartbeat publish failed:', error);
+                this.stopBrokerHeartbeat();
+            }
+        }, this.HEARTBEAT_INTERVAL_MS);
+    }
+    stopBrokerHeartbeat() {
+        if (this.heartbeatInterval) {
+            clearInterval(this.heartbeatInterval);
+            this.heartbeatInterval = null;
+        }
+    }
+    destroy() {
+        this.stopBrokerHeartbeat();
+        this.doctorServiceSubscription?.unsubscribe();
+        this.doctorServiceSubscription = null;
+        this.specStreamSubscription?.unsubscribe();
+        this.specStreamSubscription = null;
+        this.creditStreamSubscription?.unsubscribe();
+        this.creditStreamSubscription = null;
+        this.errorStreamSubscription?.unsubscribe();
+        this.errorStreamSubscription = null;
+    }
 }

package/dist/controllers/bundle-controller.d.ts

@@ -0,0 +1,21 @@
+import { BundleControllerDeps } from "../interfaces/bundle-interfaces.js";
+import { BundleReferenceMapping, BundleResponse } from "../model/bundle.js";
+export declare class BundleController extends EventTarget {
+    private readonly deps;
+    private _bundleResponse;
+    private _loading;
+    private _referenceMapIndex;
+    constructor(deps: BundleControllerDeps);
+    get isBundled(): boolean;
+    get isLoading(): boolean;
+    getBundledSpec(): string | null;
+    getBundleResponse(): BundleResponse | null;
+    private createToast;
+    bundleSpec(): Promise<void>;
+    downloadBundledSpec(): void;
+    copyToClipboard(): Promise<void>;
+    reset(): void;
+    private buildReferenceMapIndex;
+    private normalizeBracketNotation;
+    findOriginalLocation(nodePath: string): BundleReferenceMapping | null;
+}