@pb33f/cowboy-components 0.1.15 → 0.2.0

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

@@ -11,10 +11,11 @@ import '@shoelace-style/shoelace/dist/components/tab/tab.js';
 import '@shoelace-style/shoelace/dist/components/switch/switch.js';
 import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
 import '@shoelace-style/shoelace/dist/components/alert/alert.js';
-import { customElement, property, query } from "lit/decorators.js";
+import '@shoelace-style/shoelace/dist/components/badge/badge.js';
+import { customElement, property, query, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { SpecEditor } from "../editor/editor.js";
-import { ActiveView, EditorClicked, EditorUpdated, OpenProblemDrawer, ProblemClicked, ProblemRuleFilterChangedManual, RuleClicked } from "../../events/doctor.js";
+import { ActiveView, AddToast, CustomRulesetEnabled, EditorClicked, EditorUpdated, ExportRuleset, OpenProblemDrawer, ProblemClicked, ProblemRuleFilterChangedManual, RuleViolationClicked, RulesetSaved, RuleClicked } from "../../events/doctor.js";
 import { ProblemDetailsDrawer, ProblemDrawerEventType } from "../problem-list/details-drawer.js";
 import { CreateBagManager } from "@pb33f/saddlebag";
 import { LintingService } from "../../services/linting-service.js";
@@ -26,26 +27,44 @@ import { StatusBar } from "./status-bar.js";
 import { FeedbackComponent } from "./feedback.js";
 import { FeedbackService } from "../../services/feedback-service.js";
 import { ActivitySpinner } from "./activity-spinner.js";
+import { ManageRuleset } from "../manage-ruleset/manage-ruleset.js";
 import RuleDocumentationWorker from "../../workers/rule-documentation.worker.js?worker";
 import theDoctorCss from "./the-doctor.css.js";
 import linksCss from "../../css/links.css.js";
+import { RulesetService } from "../../services/ruleset-service.js";
+import { ToastManager } from "../toast/toast-manager.js";
+import { ToastType } from "../../model/toast.js";
+import dialogCss from "../../css/dialog.css.js";
+import buttonCss from "../../css/button.css.js";
+import radioGroupsCss from "../../css/radiogroups.css.js";
+import { MarkerSeverity } from "monaco-editor";
 export const DoctorDocumentBag = "pb33f-doctor-editor";
 export const HowToFixBag = "pb33f-doctor-howtofix";
+export const FunctionDocumentationBag = "pb33f-doctor-funcdocs";
 export const RuleDocumentationBag = "pb33f-doctor-ruledocs";
 export const DiagnosticBag = "pb33f-doctor-diagnostic";
-export const OWASPBag = "pb33f-doctor-owasp";
+export const DefaultRulesetBag = "pb33f-doctor-default-ruleset";
+export const OWASPRulesetBag = "pb33f-doctor-owasp-ruleset";
+export const AllRulesetBag = "pb33f-doctor-all-ruleset";
+export const FunctionsBag = "pb33f-doctor-functions";
+export const FunctionsSchemaBag = "pb33f-doctor-function-schema";
+export const CustomRulesetBag = "pb33f-doctor-custom-ruleset";
+export const RuleConfigurationBag = "pb33f-doctor-rule-configuration";
+export const SessionRulesetMapBag = "pb33f-doctor-session-rulesetmap";
 export const DefaultDocument = "document";
 export const DocumentProblems = "problems";
 export const DoctorEndpoint = "doctor-endpoint";
 let TheDoctor = class TheDoctor extends LitElement {
     constructor(doctorEndpoint = "https://doctor.pb33f.io") {
         super();
-        this.debounceTime = 300;
+        this.debounceTime = 400;
+        this.debounceTimeRuleset = 900;
         this.bounceId = 0;
         // create a stateful bag manager
         this.bagManager = CreateBagManager(true);
         this.bagManager.loadStatefulBags().then(this.loadState.bind(this));
         this.editor = new SpecEditor();
+        this.rulesetEditor = new SpecEditor('ruleset');
         this.problemList = new ProblemList();
         this.detailsDrawer = new ProblemDetailsDrawer();
         this.problemsOverview = new ProblemsOverview();
@@ -55,6 +74,13 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.unavailable = false;
         this.feedback = new FeedbackComponent();
         this.activitySpinner = new ActivitySpinner();
+        this.manageRuleset = new ManageRuleset();
+        this.toastManager = new ToastManager();
+        this.editorMap = new Map();
+        this.editorMap.set("spec", this.editor);
+        this.editorMap.set("ruleset", this.rulesetEditor);
+        this.selectedEditorTab = "spec";
+        this.sidebarClosed = false;
         // extract the doctor endpoint from session storage.
         const sessionEndpoint = sessionStorage.getItem(DoctorEndpoint);
         if (sessionEndpoint) {
@@ -74,23 +100,41 @@ let TheDoctor = class TheDoctor extends LitElement {
         // @ts-ignore
         this.addEventListener(OpenProblemDrawer, this.ruleDocsClicked);
         // @ts-ignore
-        this.addEventListener(RuleClicked, this.ruleGroupClicked);
+        this.addEventListener(RuleViolationClicked, this.ruleGroupClicked);
+        // @ts-ignore
+        this.addEventListener(CustomRulesetEnabled, this.customRulesetEnabled);
+        // @ts-ignore
+        this.addEventListener(RulesetSaved, this.rulesetSaved);
+        // @ts-ignore
+        this.addEventListener(AddToast, this.addToastEvent);
+        this.addEventListener(ExportRuleset, this.exportRuleset);
+        // @ts-ignore
+        this.addEventListener(RuleClicked, this.ruleClicked);
         // hijack navigation buttons.
         window.addEventListener('popstate', (e) => {
             const state = e.state;
             if (state) {
                 switch (state.view) {
                     case ActiveView.Problems:
-                        this.tabGroup.show(ActiveView.Problems);
+                        this.controlTabGroup.show(ActiveView.Problems);
                         break;
                     case ActiveView.Overview:
-                        this.tabGroup.show(ActiveView.Overview);
+                        this.controlTabGroup.show(ActiveView.Overview);
                         break;
                 }
             }
         });
         //history.pushState({view: ActiveView.Overview}, "", ActiveView.Overview);
     }
+    exportRuleset() {
+        this.exportRulesetDialog.show();
+    }
+    addToastEvent(event) {
+        this.sendToast(event.detail.toast);
+    }
+    sendToast(toast) {
+        this.toastManager.addToastManually(toast);
+    }
     ruleGroupClicked(event) {
         this.problemsPanel.focus();
         const simEvent = new CustomEvent(ProblemRuleFilterChangedManual, {
@@ -103,7 +147,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.problemsPanel.focus();
         this.problemList.dispatchEvent(simEvent);
         history.pushState({ rule: event.detail.rule }, "", `/${ActiveView.Problems}?rule=${event.detail.rule}`);
-        this.tabGroup.show(ActiveView.Problems);
+        this.controlTabGroup.show(ActiveView.Problems);
     }
     ruleDocsClicked(event) {
         const ruleId = event.detail.rule;
@@ -115,6 +159,14 @@ let TheDoctor = class TheDoctor extends LitElement {
                         event.detail.body = ruleDoc.body;
                         this.detailsDrawer.open(event.detail);
                     }
+                    else {
+                        this.sendToast({
+                            id: crypto.randomUUID(),
+                            type: ToastType.INFO,
+                            title: "Rule documentation unavailable",
+                            body: `Documentation for '${ruleId}' not available`
+                        });
+                    }
                     break;
                 case ProblemDrawerEventType.HOW_TO_FIX:
                     const howToFix = this.howToFixBag?.get(ruleId);
@@ -122,12 +174,64 @@ let TheDoctor = class TheDoctor extends LitElement {
                         event.detail.body = howToFix.howToFix;
                         this.detailsDrawer.open(event.detail);
                     }
+                    else {
+                        this.sendToast({
+                            id: crypto.randomUUID(),
+                            type: ToastType.INFO,
+                            title: "How to fix unavailable",
+                            body: `Information on how to fix '${ruleId}' not available`
+                        });
+                    }
+                    break;
+                case ProblemDrawerEventType.FUNCTION_DOCS:
+                    const funcDocs = this.functionDocsBag?.get(ruleId);
+                    if (funcDocs) {
+                        event.detail.body = funcDocs.body;
+                        this.detailsDrawer.open(event.detail);
+                    }
+                    else {
+                        this.sendToast({
+                            id: crypto.randomUUID(),
+                            type: ToastType.INFO,
+                            title: "Function documentation unavailable",
+                            body: `Documentation for '${ruleId}' not available`
+                        });
+                    }
+            }
+        }
+    }
+    rulesetSaved(evt) {
+        // lint spec
+        if (this.docBag) {
+            const doc = this.docBag.get(DefaultDocument);
+            const config = this.RuleConfigBag?.get(RuleConfigurationBag);
+            if (evt.detail.rules) {
+                this.CustomRulesetBag?.set(CustomRulesetBag, evt.detail.rules);
+                // get ruleset config and disable everything,
+                // then enable the custom rules.
+                if (config) {
+                    // extract config from the event
+                    const newConfig = evt.detail.config;
+                    if (newConfig && this.RuleConfigBag) {
+                        newConfig.returnedRuleset = evt.detail.returnedRules;
+                        this.RuleConfigBag?.set(RuleConfigurationBag, newConfig);
+                    }
+                }
+                RulesetService.getSessionRulesetAsYAML().then((yaml) => {
+                    if (this.selectedEditorTab == "spec") {
+                        this.rulesetPulse = true;
+                    }
+                    this.rulesetEditor.setValue(yaml, true);
+                    this.fetchRulesetMap();
+                });
+                // lint the spec
+                this.lintSpec(doc);
             }
         }
     }
     lintSpec(value) {
         this.activitySpinner.show();
-        LintingService.lintFile(value, this.OWASPEnabled).then((result) => {
+        LintingService.lintFile(value).then((result) => {
             if (result && !Array.isArray(result)) {
                 this.editor.setMarkers([result]);
                 this.problemBag?.set(DocumentProblems, [result]);
@@ -144,7 +248,10 @@ let TheDoctor = class TheDoctor extends LitElement {
             }
             // update the overview statistics
             LintingService.fetchStatistics().then((result) => {
-                this.problemsOverview.statistics = result;
+                let oldScore = 0;
+                if (this.problemsOverview.statistics) {
+                    oldScore = this.problemsOverview.statistics.statistics.overallScore;
+                }
                 this.diagnosticBag?.set(DiagnosticBag, result);
                 this.activitySpinner.hide();
                 if (result?.remainingCredit <= 10) {
@@ -153,8 +260,29 @@ let TheDoctor = class TheDoctor extends LitElement {
                     console.warn("You are running low on credit, you will need to authenticate soon. " +
                         "" + result.remainingCredit + " credits remaining.");
                 }
+                // determine if the score went up or down and toast it!
+                this.problemsOverview.statistics = result;
+                if (this.problemsOverview.statistics) {
+                    const newScore = result.statistics.overallScore;
+                    if (oldScore > newScore) {
+                        this.sendToast({
+                            id: crypto.randomUUID(),
+                            type: ToastType.SCOREDOWN,
+                            body: "Your score has decreased. It is now " + newScore + "%",
+                            title: "Score went down by " + (oldScore - newScore) + "%"
+                        });
+                    }
+                    if (oldScore < newScore) {
+                        this.sendToast({
+                            id: crypto.randomUUID(),
+                            type: ToastType.SCOREUP,
+                            body: "Your score has increased to " + newScore + "%",
+                            title: "Score went up by " + (newScore - oldScore) + "%"
+                        });
+                    }
+                }
             }).catch((e) => {
-                console.error("statistics service is down");
+                console.error("statistics service is down", e);
                 this.platformUnavailable(e);
             });
         }).catch((e) => {
@@ -165,6 +293,12 @@ let TheDoctor = class TheDoctor extends LitElement {
                 if (e.instance === 'https://pb33f.io/errors/no-credit-remaining') {
                     this.statusBar.callsRemaining = 0;
                     this.statusBar.visible = true;
+                    this.sendToast({
+                        id: crypto.randomUUID(),
+                        type: ToastType.ERROR,
+                        body: "Run out of credit, please authenticate for more or wait 24 hours.",
+                        title: "Credit exhausted!",
+                    });
                 }
             }
         });
@@ -184,20 +318,45 @@ let TheDoctor = class TheDoctor extends LitElement {
             this.errorBanner.visible = true;
             this.unavailable = true;
             this.problemsOverview.unavailable = true;
-            this.tabGroup.show(ActiveView.Overview);
+            this.controlTabGroup.show(ActiveView.Overview);
         }
     }
     specClicked(event) {
         this.detailsDrawer.close();
-        for (let i = 0; i < this.problems?.length; i++) {
-            if (this.problems[i].startLineNumber === event.detail.line) {
-                this.problemList.lineClicked(event.detail.line, true);
-                this.tabGroup.show(ActiveView.Problems);
-                break;
+        if (this.selectedEditorTab == "spec") {
+            for (let i = 0; i < this.problems?.length; i++) {
+                if (this.problems[i].startLineNumber === event.detail.line) {
+                    this.problemList.lineClicked(event.detail.line, true);
+                    this.controlTabGroup.show(ActiveView.Problems);
+                    if (this.sidebarClosed) {
+                        this.toggleSidebar();
+                    }
+                    break;
+                }
+            }
+        }
+        if (this.selectedEditorTab == ActiveView.Ruleset) {
+            // check ruleset map for the line number
+            const rulesetMap = this.sessionRulesetMapBag?.get(SessionRulesetMapBag);
+            if (rulesetMap) {
+                for (let i = 0; i < rulesetMap.length; i++) {
+                    if (rulesetMap[i].line === event.detail.line) {
+                        this.controlTabGroup.show(ActiveView.Ruleset);
+                        if (this.sidebarClosed) {
+                            this.toggleSidebar();
+                        }
+                        break;
+                    }
+                }
             }
         }
     }
     problemClicked(event) {
+        if (this.selectedEditorTab != "spec") {
+            this.editorTabGroup.show("spec");
+            this.selectedEditorTab = "spec";
+        }
+        this.controlTabGroup.show(ActiveView.Problems);
         this.editor.editor?.revealLineInCenter(event.detail.problem.line);
         this.editor.editor?.setPosition({
             lineNumber: event.detail.problem.line,
@@ -207,11 +366,11 @@ let TheDoctor = class TheDoctor extends LitElement {
         if (!event.detail.launchedFromProblems) {
             this.problemList.lineClicked(event.detail.problem.problemObject.startLineNumber);
         }
-        this.tabGroup.show(ActiveView.Problems);
     }
     loadState() {
         LintingService.doctorEndpoint = this.doctorEndpoint;
         FeedbackService.doctorEndpoint = this.doctorEndpoint;
+        RulesetService.doctorEndpoint = this.doctorEndpoint;
         this.docBag = this.bagManager.getBag(DoctorDocumentBag);
         if (this.docBag) {
             const doc = this.docBag.get(DefaultDocument);
@@ -240,14 +399,207 @@ let TheDoctor = class TheDoctor extends LitElement {
                 this.problemsOverview.statistics = stats;
             }
         }
-        this.OWASPBag = this.bagManager.getBag(OWASPBag);
-        if (this.OWASPBag) {
-            this.OWASPEnabled = this.OWASPBag.get(OWASPBag);
-            this.owaspSwitch.checked = this.OWASPEnabled;
+        // extract rulesets from bags
+        const promises = [];
+        this.DefaultRulesetBag = this.bagManager.getBag(DefaultRulesetBag);
+        if (this.DefaultRulesetBag) {
+            const ruleset = this.DefaultRulesetBag.get(DefaultRulesetBag);
+            if (ruleset) {
+                this.defaultRuleset = ruleset;
+            }
+            else {
+                promises.push(this.fetchDefaultRuleset());
+            }
+        }
+        // OWASP ruleset
+        this.OWASPRulesetBag = this.bagManager.getBag(OWASPRulesetBag);
+        if (this.OWASPRulesetBag) {
+            const ruleset = this.OWASPRulesetBag.get(OWASPRulesetBag);
+            if (ruleset) {
+                this.OWASPRuleset = ruleset;
+            }
+            else {
+                promises.push(this.fetchOWASPRuleset());
+            }
         }
+        // All ruleset
+        this.AllRulesetBag = this.bagManager.getBag(AllRulesetBag);
+        if (this.AllRulesetBag) {
+            const ruleset = this.AllRulesetBag.get(AllRulesetBag);
+            if (ruleset) {
+                this.AllRuleset = ruleset;
+            }
+            else {
+                promises.push(this.fetchAllRuleset());
+            }
+        }
+        // functions
+        this.FunctionsBag = this.bagManager.getBag(FunctionsBag);
+        this.FunctionSchemaBag = this.bagManager.getBag(FunctionsSchemaBag);
+        if (this.FunctionsBag) {
+            const functions = this.FunctionsBag.get(FunctionsBag);
+            if (functions) {
+                this.functions = functions;
+            }
+            else {
+                promises.push(this.fetchFunctions());
+            }
+        }
+        // custom ruleset
+        this.CustomRulesetBag = this.bagManager.getBag(CustomRulesetBag);
+        if (this.CustomRulesetBag) {
+            const ruleset = this.CustomRulesetBag.get(CustomRulesetBag);
+            if (ruleset) {
+                this.CustomRuleset = ruleset;
+            }
+        }
+        // create rule configuration bag
+        this.RuleConfigBag = this.bagManager.getBag(RuleConfigurationBag);
+        // create rule configuration bag
+        this.sessionRulesetMapBag = this.bagManager.getBag(SessionRulesetMapBag);
+        // fire off all network requests, then configure the ruleset management.
+        Promise.all(promises).then(() => {
+            // configure rule management
+            this.manageRuleset.defaultRuleset = this.defaultRuleset;
+            this.manageRuleset.owaspRuleset = this.OWASPRuleset;
+            this.manageRuleset.allRuleset = this.AllRuleset;
+            this.manageRuleset.functions = this.functions;
+            const config = this.RuleConfigBag?.get(RuleConfigurationBag);
+            if (config) {
+                this.manageRuleset.rulesetConfig = config;
+            }
+            else {
+                this.manageRuleset.rulesetConfig = { ruleMapping: new Map(), allRulesSwitch: true };
+            }
+            this.manageRuleset.buildRulesets();
+            if (this.CustomRuleset && this.CustomRuleset.rules.size > 0) {
+                this.manageRuleset.customRuleset = this.CustomRuleset;
+            }
+            // do nothing with this for now. we just need to make sure the default ruleset
+            // has a session.
+            this.fetchSessionRulesetAsYaml().then((result) => {
+                this.loadingOverlay.hide();
+                this.rulesetEditor?.setValue(result, true);
+                this.fetchRulesetMap();
+            });
+        });
         // refresh state for how to fix.
         this.fetchDocs();
     }
+    customRulesetEnabled(event) {
+        const customRS = { rules: new Map() };
+        customRS.id = crypto.randomUUID();
+        customRS.owner = this.session.sessionId;
+        event.detail.rules.forEach((rule) => {
+            if (rule.rule.id != rule.ruleId) {
+                rule.rule.id = rule.ruleId;
+            }
+            customRS.rules.set(rule.ruleId, rule.rule);
+        });
+        // write state
+        this.CustomRulesetBag?.set(CustomRulesetBag, customRS);
+        if (event.detail.ruleConfig) {
+            this.RuleConfigBag?.set(RuleConfigurationBag, event.detail.ruleConfig);
+        }
+        else {
+            this.RuleConfigBag?.reset();
+            // reset session ruleset
+            RulesetService.resetSessionRuleset().then(() => {
+                this.sendToast({
+                    id: crypto.randomUUID(),
+                    type: ToastType.INFO,
+                    body: "Ruleset has been reset to the default",
+                    title: "Ruleset reset",
+                });
+                if (this.docBag) {
+                    const doc = this.docBag.get(DefaultDocument);
+                    this.lintSpec(doc);
+                    // extract bootstrap ruleset
+                    // LintingService.bootstrapEditor().then((result) => {
+                    //     this.docBag?.set(DefaultDocument, result);
+                    //     this.editor.setValue(result, true);
+                    //     this.lintSpec(doc!);
+                    // })
+                }
+                this.fetchSessionRulesetAsYaml().then((result) => {
+                    this.rulesetEditor?.setValue(result, true);
+                });
+            }).catch((e) => {
+                this.sendToast({
+                    id: crypto.randomUUID(),
+                    type: ToastType.ERROR,
+                    body: e.detail,
+                    title: "Cannot reset ruleset",
+                });
+            });
+        }
+    }
+    async fetchSessionRulesetAsYaml() {
+        return new Promise(async (resolve) => {
+            RulesetService.getSessionRulesetAsYAML().then((result) => {
+                resolve(result);
+            }).catch((e) => {
+                console.error("cannot fetch session ruleset: ", e.title);
+                resolve("");
+            });
+        });
+    }
+    async fetchFunctions() {
+        return new Promise(async (resolve) => {
+            RulesetService.getFunctions().then((result) => {
+                this.functions = result;
+                this.FunctionsBag?.set(FunctionsBag, result);
+                // extract schemas for each function
+                const promises = [];
+                result.forEach((functionId) => {
+                    promises.push(this.fetchFunctionSchema(functionId));
+                });
+                Promise.all(promises).then(() => {
+                    resolve(result);
+                });
+            });
+        });
+    }
+    async fetchFunctionSchema(functionId) {
+        return new Promise(async (resolve) => {
+            RulesetService.getFunctionSchema(functionId).then((result) => {
+                let m = this.FunctionSchemaBag?.get(FunctionsSchemaBag);
+                if (!m) {
+                    m = new Map();
+                }
+                m.set(functionId, result);
+                this.FunctionSchemaBag?.set(FunctionsSchemaBag, m);
+                resolve(result);
+            });
+        });
+    }
+    async fetchDefaultRuleset() {
+        return new Promise(async (resolve) => {
+            RulesetService.getDefaultRuleset().then((result) => {
+                this.defaultRuleset = result;
+                this.DefaultRulesetBag?.set(DefaultRulesetBag, result);
+                resolve(result);
+            });
+        });
+    }
+    async fetchOWASPRuleset() {
+        return new Promise(async (resolve) => {
+            RulesetService.getOWASPRuleset().then((result) => {
+                this.OWASPRuleset = result;
+                this.OWASPRulesetBag?.set(OWASPRulesetBag, result);
+                resolve(result);
+            });
+        });
+    }
+    async fetchAllRuleset() {
+        return new Promise(async (resolve) => {
+            RulesetService.getAllRuleset().then((result) => {
+                this.AllRuleset = result;
+                this.AllRulesetBag?.set(AllRulesetBag, result);
+                resolve(result);
+            });
+        });
+    }
     fetchDocs() {
         this.activitySpinner.show();
         // the first this we need to do is start a session
@@ -268,14 +620,20 @@ let TheDoctor = class TheDoctor extends LitElement {
                 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) {
                     data.forEach((doc) => {
-                        this.ruleDocsBag?.set(doc.ruleId, doc);
-                        this.activitySpinner.hide();
+                        if (doc.ruleId) {
+                            this.ruleDocsBag?.set(doc.ruleId, doc);
+                        }
+                        if (doc.functionId) {
+                            this.functionDocsBag?.set(doc.functionId, doc);
+                        }
                     });
+                    this.activitySpinner.hide();
                 }
             });
             this.ruleDocsWorker.postMessage({ start: true, endpoint: this.doctorEndpoint });
@@ -284,7 +642,114 @@ let TheDoctor = class TheDoctor extends LitElement {
             console.error("cannot start session");
         });
     }
+    fetchRulesetMap() {
+        RulesetService.getSessionRulesetMap().then((result) => {
+            this.sessionRulesetMapBag?.set(SessionRulesetMapBag, result);
+        }).catch(() => {
+            console.warn("map is empty, or unavailable, Did you submit an empty ruleset?");
+            this.sendToast({
+                id: crypto.randomUUID(),
+                type: ToastType.WARNING,
+                body: "map is empty, or unavailable, Did you submit an empty ruleset?",
+                title: "Issue fetching ruleset map"
+            });
+        });
+    }
+    ruleClicked(evt) {
+        // get rule map from bag
+        const map = this.sessionRulesetMapBag?.get(SessionRulesetMapBag);
+        if (map) {
+            const rule = map.find((r) => r.ruleId === evt.detail.ruleId);
+            if (rule) {
+                this.selectedEditorTab = "ruleset";
+                this.editorTabGroup.show(ActiveView.Ruleset);
+                this.rulesetEditor.editor?.setPosition({ lineNumber: rule.line, column: rule.start });
+                this.rulesetEditor.editor?.revealLineInCenter(rule.line);
+            }
+        }
+    }
+    rulesetChanged() {
+        clearTimeout(this.bounceId);
+        this.bounceId = window.setTimeout(() => {
+            const ruleset = this.rulesetEditor.editor?.getValue();
+            RulesetService.validateRuleset(ruleset).then((result) => {
+                // clear any problems
+                this.manageRuleset.clearRuleProblems();
+                // 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.rules = new Map(Object.entries(result.rules));
+                customRS.rules.forEach((rule, id) => {
+                    rule.id = id; // set the id to the key
+                });
+                // write state
+                this.CustomRulesetBag?.set(CustomRulesetBag, customRS);
+                this.CustomRuleset = customRS;
+                if (customRS.rules.size > 0) {
+                    // rebuild the ruleset management
+                    this.manageRuleset.customRulesetManual = customRS;
+                }
+                this.selectedEditorTab = ActiveView.Ruleset;
+                this.controlTabGroup.show(ActiveView.Ruleset);
+                this.rulesetEditor.setMarkers([]);
+                this.fetchRulesetMap();
+            }).catch((e) => {
+                this.sendToast({
+                    id: crypto.randomUUID(),
+                    type: ToastType.ERROR,
+                    body: e.detail,
+                    title: e.title
+                });
+                console.error('unable to validate ruleset', e);
+                // process bad rules
+                const ruleErrors = e.body;
+                const markers = [];
+                ruleErrors?.forEach((err) => {
+                    markers.push({
+                        severity: MarkerSeverity.Error,
+                        message: err.ruleError,
+                        startLineNumber: err.line,
+                        startColumn: err.startCol,
+                        endLineNumber: err.line,
+                        endColumn: err.endCol
+                    });
+                });
+                // convert to JSON
+                RulesetService.convertToJSON(ruleset).then((json) => {
+                    // 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.rules = new Map(Object.entries(json.rules));
+                    customRS.rules.forEach((rule, id) => {
+                        if (rule.id != id)
+                            rule.id = id; // set the id to the key
+                    });
+                    this.CustomRuleset = customRS;
+                    if (customRS.rules.size > 0) {
+                        // rebuild the ruleset management
+                        this.manageRuleset.customRulesetManual = customRS;
+                    }
+                    this.rulesetEditor.setMarkers([]);
+                    // clear any problems
+                    this.manageRuleset.clearRuleProblems();
+                    // set problems.
+                    this.rulesetEditor.setMarkers(markers);
+                    this.manageRuleset.processBadRules(ruleErrors);
+                    this.controlTabGroup.show(ActiveView.Ruleset);
+                }).catch((e) => {
+                    console.error("unable to convert ruleset to JSON", e);
+                });
+            });
+        }, this.debounceTimeRuleset);
+    }
     specChanged(event) {
+        const editor = this.editorMap.get(event.detail.id);
+        if (editor && event.detail.id === 'ruleset') {
+            this.rulesetChanged();
+            return;
+        }
         if (this.docBag) {
             this.docBag.set(DefaultDocument, event.detail.content);
         }
@@ -293,30 +758,114 @@ let TheDoctor = class TheDoctor extends LitElement {
             this.lintSpec(event.detail.content);
         }, this.debounceTime);
     }
-    toggleOWASP() {
-        this.OWASPEnabled = this.owaspSwitch.checked;
-        this.OWASPBag?.set(OWASPBag, this.OWASPEnabled);
-        if (this.docBag) {
-            const doc = this.docBag.get(DefaultDocument);
-            this.lintSpec(doc);
-        }
-    }
     boostrap() {
         if (this.editor.getValue() === '') {
             LintingService.bootstrapEditor().then((result) => {
                 this.editor.setValue(result, true);
                 this.specChanged(new CustomEvent(EditorUpdated, {
                     detail: {
-                        content: result
+                        content: result,
+                        id: "spec"
                     }
                 }));
             });
         }
     }
+    exportJSON() {
+        let jsonRS;
+        if (this.RuleConfigBag) {
+            const config = this.RuleConfigBag.get(RuleConfigurationBag);
+            if (config && config.returnedRuleset) {
+                jsonRS = config.returnedRuleset;
+            }
+        }
+        if (jsonRS) {
+            let reportData = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(jsonRS, null, 2));
+            this.downloadRulesetLink.download = "ruleset.json";
+            this.downloadRulesetLink.href = reportData;
+            this.downloadRulesetLink.click();
+            this.exportRulesetDialog.hide();
+        }
+    }
+    exportYAML() {
+        RulesetService.getSessionRulesetAsYAML().then((yaml) => {
+            let reportData = "data:text/yaml;charset=utf-8," + encodeURIComponent(yaml);
+            this.downloadRulesetLink.download = "ruleset.yaml";
+            this.downloadRulesetLink.href = reportData;
+            this.downloadRulesetLink.click();
+            this.exportRulesetDialog.hide();
+        });
+    }
+    confirmExport() {
+        switch (this.exportSelection.value) {
+            case "json":
+                this.exportJSON();
+                break;
+            case "yaml":
+                this.exportYAML();
+                break;
+        }
+    }
     closeWelcome() {
         this.welcomeBox.hide();
         localStorage.setItem("pb33f-doctor-welcome", "closed");
     }
+    selectEditorTab(event) {
+        this.selectedEditorTab = event.detail.name;
+        switch (event.detail.name) {
+            case ActiveView.Ruleset:
+                if (this.rulesetPulse) {
+                    this.rulesetPulse = false;
+                }
+                this.controlTabGroup.show(ActiveView.Ruleset);
+                break;
+        }
+    }
+    selectControlTab(event) {
+        switch (event.detail.name) {
+            case ActiveView.Problems:
+            case ActiveView.Overview:
+                if (this.selectedEditorTab != "spec") {
+                    this.selectedEditorTab = "spec";
+                    this.editorTabGroup.show("spec");
+                }
+                break;
+            case ActiveView.Ruleset:
+                if (this.selectedEditorTab != ActiveView.Ruleset) {
+                    this.editorTabGroup.show(ActiveView.Ruleset);
+                    this.selectedEditorTab = ActiveView.Ruleset;
+                }
+                break;
+        }
+    }
+    toggleSidebar() {
+        const splitPanel = this.shadowRoot?.querySelector('sl-split-panel');
+        if (!this.sidebarClosed) {
+            if (splitPanel) {
+                this.collapseButton.name = "chevron-bar-left";
+                this.problemsDataDiv.style.display = "none";
+                splitPanel.style.setProperty('--min', '50px');
+                splitPanel.style.setProperty('--max', 'calc(100vw - 50px)');
+                splitPanel.position = 100;
+                splitPanel.disabled = true;
+                this.splitDivider.style.display = "none";
+                this.activitySpinner.classList.add('spinner-draw-closed');
+            }
+        }
+        else {
+            if (splitPanel) {
+                this.collapseButton.name = "chevron-bar-right";
+                splitPanel.style.setProperty('--min', '600px');
+                splitPanel.style.setProperty('--max', 'calc(100vw - 600px)');
+                splitPanel.position = 60;
+                splitPanel.disabled = false;
+                this.problemsDataDiv.style.display = "block";
+                this.splitDivider.style.display = "block";
+                this.activitySpinner.classList.remove('spinner-draw-closed');
+            }
+        }
+        this.sidebarClosed = !this.sidebarClosed;
+    }
     render() {
         let overlay = html ``;
         if (this.unavailable) {
@@ -335,48 +884,75 @@ let TheDoctor = class TheDoctor extends LitElement {
         if (welcomeClosed) {
             welcomeBox = html ``;
         }
+        let rulesetPulsePill = html ``;
+        if (this.rulesetPulse) {
+            rulesetPulsePill = html `
+                <sl-badge pulse></sl-badge>`;
+        }
         return html `
             ${welcomeBox}
+            ${this.toastManager}
+            <sl-dialog open id="loading-overlay" class="dialog-overview"
+                       style="--width: 30vw" no-header>
+                <h3 class="loading">OpenAPI Doctor is booting...</h3>
+            </sl-dialog>
+            <sl-dialog id="export-ruleset" label="Export Ruleset" class="dialog-overview"
+                       style="--width: 50vw">
+                <div class="export right">
+                    <div class="export-block">
+                        <sl-radio-group name="ruleset" value="json" id="export-ruleset-radio">
+                            <sl-radio-button value="json">JSON
+                            </sl-radio-button>
+                            <sl-radio-button value="yaml">YAML
+                            </sl-radio-button>
+                        </sl-radio-group>
+                    </div>
+                    <div class="export-block">
+                        <sl-button @click=${this.confirmExport} variant="primary" size="small" style="float: left">
+                            Export
+                        </sl-button>
+                        <a id="download-ruleset" style="display:none"></a>
+                    </div>
+                </div>
+            </sl-dialog>
             <div class="doctor">
                 ${this.activitySpinner}
                 ${this.errorBanner}
                 ${overlay}
-                <sl-split-panel class="split-panel ${this.unavailable ? 'unavailable' : ''}">
-                    <sl-icon slot="divider" name="grip-vertical"></sl-icon>
+                <sl-split-panel class="split-panel ${this.unavailable ? 'unavailable' : ''}" position="60">
+                    <sl-icon id="split-divider" slot="divider" name="grip-vertical"></sl-icon>
                     <div class="editor" slot="start">
                         ${this.detailsDrawer}
-                        ${this.editor}
+                        <sl-tab-group class="tab-group" @sl-tab-show="${this.selectEditorTab}" id="editor-controls">
+                            <sl-tab slot="nav" panel="spec" class="tab" id="spec">OpenAPI Spec</sl-tab>
+                            <sl-tab slot="nav" panel="ruleset" class="tab" id="ruleset">Ruleset ${rulesetPulsePill}
+                            </sl-tab>
+                            <sl-tab-panel name="spec" class="tab-panel">${this.editor}</sl-tab-panel>
+                            <sl-tab-panel name="ruleset" class="tab-panel">${this.rulesetEditor}</sl-tab-panel>
+                        </sl-tab-group>
                     </div>
                     <div class="problems" slot="end">
-                        <sl-tab-group class="tab-group ">
-                            <sl-tab slot="nav" panel="overview" class="tab" id="overviewPanel">Overview</sl-tab>
-                            <sl-tab slot="nav" panel="problems" class="tab" id="problemsPanel">Problems</sl-tab>
-                            <sl-tab slot="nav" panel="ruleset" class="tab" id="rulesetPanel">Rules</sl-tab>
-                            <sl-tab slot="nav" panel="feedback" class="tab" id="feedbackPanel">Feedback</sl-tab>
-                            <sl-tab-panel name="overview" class="tab-panel">${this.problemsOverview}</sl-tab-panel>
-                            <sl-tab-panel name="problems" class="tab-panel">${this.problemList}</sl-tab-panel>
-                            <sl-tab-panel name="ruleset" class="tab-panel">
-                                <div class="ruleset">
-                                    <pb33f-attention-box type="info" headerText="Manage RuleSets">
-                                        Feature coming soon, you will be able to manage your ruleset(s) here.
-                                    </pb33f-attention-box>
-                                    <sl-switch size="small" @sl-change="${this.toggleOWASP}" id="owasp">Enable <a
-                                            href="https://quobix.com/vacuum/rulesets/owasp/">OWASP</a>
-                                        Rules</a>?
-                                    </sl-switch>
-                                </div>
-                            </sl-tab-panel>
-                            <sl-tab-panel name="feedback" class="tab-panel">
-                                ${this.feedback}
-                            </sl-tab-panel>
-                        </sl-tab-group>
+                        <div class="problems-data">
+                            <sl-tab-group class="tab-group" id="manager-controls"  @sl-tab-show="${this.selectControlTab}">
+                                <sl-tab slot="nav" panel="overview" class="tab" id="overviewPanel" active>Overview
+                                </sl-tab>
+                                <sl-tab slot="nav" panel="problems" class="tab" id="problemsPanel">Problems</sl-tab>
+                                <sl-tab slot="nav" panel="ruleset" class="tab" id="rulesetPanel">Rules</sl-tab>
+                                <sl-tab slot="nav" panel="feedback" class="tab" id="feedbackPanel">Feedback</sl-tab>
+                                <sl-tab-panel name="overview" class="tab-panel">${this.problemsOverview}</sl-tab-panel>
+                                <sl-tab-panel name="problems" class="tab-panel">${this.problemList}</sl-tab-panel>
+                                <sl-tab-panel name="ruleset" class="tab-panel">${this.manageRuleset}</sl-tab-panel>
+                                <sl-tab-panel name="feedback" class="tab-panel">${this.feedback}</sl-tab-panel>
+                            </sl-tab-group>
+                        </div>
+                        <sl-icon-button class="collapse-side" name="chevron-bar-right" @click="${this.toggleSidebar}"></sl-icon-button>
                     </div>
                 </sl-split-panel>
                 ${this.statusBar}
             </div>`;
     }
 };
-TheDoctor.styles = [theDoctorCss, linksCss];
+TheDoctor.styles = [theDoctorCss, linksCss, dialogCss, buttonCss, radioGroupsCss];
 __decorate([
     query('#overviewPanel')
 ], TheDoctor.prototype, "overviewPanel", void 0);
@@ -384,20 +960,44 @@ __decorate([
     query('#problemsPanel')
 ], TheDoctor.prototype, "problemsPanel", void 0);
 __decorate([
-    query('sl-tab-group')
-], TheDoctor.prototype, "tabGroup", void 0);
+    query('sl-tab-group#manager-controls')
+], TheDoctor.prototype, "controlTabGroup", void 0);
 __decorate([
-    query('sl-switch#owasp')
-], TheDoctor.prototype, "owaspSwitch", void 0);
+    query('sl-tab-group#editor-controls')
+], TheDoctor.prototype, "editorTabGroup", void 0);
 __decorate([
     query('pb33f-attention-box#welcome')
 ], TheDoctor.prototype, "welcomeBox", void 0);
+__decorate([
+    query('sl-radio-group#export-ruleset-radio')
+], TheDoctor.prototype, "exportSelection", void 0);
+__decorate([
+    query('a#download-ruleset')
+], TheDoctor.prototype, "downloadRulesetLink", void 0);
+__decorate([
+    query('sl-dialog#loading-overlay')
+], TheDoctor.prototype, "loadingOverlay", void 0);
+__decorate([
+    query('div.problems-data')
+], TheDoctor.prototype, "problemsDataDiv", void 0);
 __decorate([
     property({ type: Boolean })
 ], TheDoctor.prototype, "unavailable", void 0);
 __decorate([
     property()
 ], TheDoctor.prototype, "doctorEndpoint", void 0);
+__decorate([
+    query('sl-dialog#export-ruleset')
+], TheDoctor.prototype, "exportRulesetDialog", void 0);
+__decorate([
+    query('sl-icon-button.collapse-side')
+], TheDoctor.prototype, "collapseButton", void 0);
+__decorate([
+    query('sl-icon#split-divider')
+], TheDoctor.prototype, "splitDivider", void 0);
+__decorate([
+    state()
+], TheDoctor.prototype, "rulesetPulse", void 0);
 TheDoctor = __decorate([
     customElement("pb33f-doctor")
 ], TheDoctor);