@pb33f/cowboy-components 0.3.5 → 0.5.0

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

@@ -16,7 +16,7 @@ import '@shoelace-style/shoelace/dist/components/avatar/avatar.js';
 import { customElement, property, query, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { SpecEditor } from "../editor/editor.js";
-import { ActiveView, AddToast, CustomRulesetEnabled, EditorClicked, EditorUpdated, ExportRuleset, OpenProblemDrawer, ProblemClicked, ProblemRuleFilterChangedManual, RuleViolationClicked, RulesetSaved, RuleClicked, ModelTreeNodeClicked, BuiltInRulesetChanged, ExplorerNodeClicked, NodeReferenceClicked, ExplorerEqualizerChanged, ExplorerEqualizerFiltered, } from "../../events/doctor.js";
+import { ActiveView, AddToast, ArchiveURLRequested, BuiltInRulesetChanged, CustomRulesetEnabled, DocumentReferenceClicked, EditorClicked, EditorUpdated, ExplorerEqualizerChanged, ExplorerEqualizerFiltered, ExplorerNodeClicked, ExportRuleset, ModelTreeNodeClicked, NodeReferenceClicked, OpenProblemDrawer, ProblemClicked, ProblemRuleFilterChangedManual, RolodexRootFileSelected, RolodexTreeNodeClicked, RuleClicked, RulesetSaved, RuleViolationClicked, NukeWorkspaceEvent } 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";
@@ -40,19 +40,30 @@ import buttonCss from "../../css/button.css.js";
 import radioGroupsCss from "../../css/radiogroups.css.js";
 import { MarkerSeverity } from "monaco-editor";
 import { ModelService } from "../../services/model-service.js";
+import { SearchNodeTreeForPath } from "../../model/graph.js";
 import { ModelTree } from "../model-tree/tree.js";
 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, DoctorServiceChannel, isBrokerResponse, QueuePrefix, SpecStreamChannel } from "../../model/channels";
+import { Command, CreditStreamChannel, DoctorServiceChannel, isBrokerResponse, QueuePrefix, SpecStreamChannel, } from "../../model/channels";
 import formsCss from "../../css/forms.css";
-import { PixelSparks } from "./sparks.js";
 import spinnerCss from "../../css/spinner.css";
+import { UploadArchiveComponent } from "./upload-archive";
+import { NodeType } from "../../model/node_type";
+import tooltipCss from "../../css/tooltip.css";
+import { NukeWorkspaceComponent } from "./nuke-workspace";
+import { CreditTicker } from "../credit-ticker/credit-ticker";
 export const GraphBag = "pb33f-doctor-graph";
+export const PanelStateBag = "pb33f-doctor-panel-state";
+export const RolodexResponseBag = "pb33f-doctor-rolodex-response";
+export const RolodexFilesBag = "pb33f-doctor-rolodex-files";
+export const RolodexStateBag = "pb33f-doctor-rolodex-state";
+export const ReferenceMapBag = "pb33f-doctor-reference-map";
 export const DoctorDocumentBag = "pb33f-doctor-editor";
 export const HowToFixBag = "pb33f-doctor-howtofix";
 export const FunctionDocumentationBag = "pb33f-doctor-funcdocs";
+export const DocumentationExpirationBag = "pb33f-doctor-doc-expiration";
 export const RuleDocumentationBag = "pb33f-doctor-ruledocs";
 export const DiagnosticBag = "pb33f-doctor-diagnostic";
 export const DefaultRulesetBag = "pb33f-doctor-default-ruleset";
@@ -63,8 +74,8 @@ 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 DefaultDocument = "pb33f-doctor-document";
+export const DocumentProblems = "pb33f-doctor-problems";
 export const DoctorEndpoint = "doctor-endpoint";
 let TheDoctor = class TheDoctor extends LitElement {
     constructor(doctorEndpoint = "https://doctor.pb33f.io") {
@@ -73,19 +84,27 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.debounceTimeRuleset = 900;
         this.bounceId = 0;
         this.useTLS = false;
+        // rolodex divider state (because it may not exist)
+        this.rolodexDividerPosition = 40;
+        this._firstRun = true;
         // bus it up
         this.bus = CreateBus();
         this.doctorServiceChannel = this.bus.createChannel(DoctorServiceChannel);
         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.doctorChannelSubscription = this.doctorServiceChannel.subscribe(this.doctorServiceHandler());
         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));
         this.editor = new SpecEditor();
-        this.rulesetEditor = new SpecEditor('ruleset');
+        this.uploadArchive = new UploadArchiveComponent();
+        this.nukeWorkspace = new NukeWorkspaceComponent();
+        this.rulesetEditor = new SpecEditor('ruleset-editor');
         this.problemList = new ProblemList();
         this.detailsDrawer = new ProblemDetailsDrawer();
         this.problemsOverview = new ProblemsOverview();
@@ -97,21 +116,32 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.activitySpinner = new ActivitySpinner();
         this.manageRuleset = new ManageRuleset();
         this.toastManager = new ToastManager();
+        this.creditTicker = new CreditTicker();
         this.editorMap = new Map();
         this.editorMap.set("spec", this.editor);
-        this.editorMap.set("ruleset", this.rulesetEditor);
+        this.editorMap.set("ruleset-editor", this.rulesetEditor);
         this.selectedEditorTab = "spec";
         this.sidebarClosed = false;
         this.explorerVisible = false;
         this.explorerBooted = false;
+        this.rolodexNeedsReset = false;
+        this.rolodexProblemMap = new Map();
+        this.rolodexRootHash = "";
+        this.rolodexRootPath = "";
+        this.importDisabled = false;
+        this.pendingLine = 0;
         this.nodeMap = new Map();
         this.nodeIdMap = new Map();
         this.nodeIdHashMap = new Map();
         this.renderedNodeMap = new Map();
         this.filteredNodes = new Map();
         this.modelTree = new ModelTree(this.nodeMap, this.nodeIdMap, this.nodeIdHashMap);
+        this.rolodexTree = new ModelTree(this.nodeMap, this.nodeIdMap, this.nodeIdHashMap);
+        this.rolodexActiveHash = "";
         this.explorer = new ExplorerComponent();
         this.renderedNode = new RenderedNodeComponent();
+        this.references = [];
+        this.minimapVisible = true;
         this.nodeLimit = 150;
         // extract the doctor endpoint from session storage.
         const sessionEndpoint = sessionStorage.getItem(DoctorEndpoint);
@@ -122,7 +152,7 @@ let TheDoctor = class TheDoctor extends LitElement {
             this.doctorEndpoint = doctorEndpoint;
         }
         // TODO: make this configurable
-        this.editor.language = "yaml";
+        //this.editor.language = "yaml";
         //@ts-ignore
         this.addEventListener(EditorUpdated, this.specChanged);
         //@ts-ignore
@@ -147,21 +177,30 @@ let TheDoctor = class TheDoctor extends LitElement {
         // @ts-ignore
         this.addEventListener(ModelTreeNodeClicked, this.modelTreeNodeClicked);
         // @ts-ignore
+        this.addEventListener(RolodexTreeNodeClicked, this.rolodexTreeNodeClicked);
+        // @ts-ignore
+        this.addEventListener(RolodexRootFileSelected, this.rolodexRootFileSelected);
+        // @ts-ignore
         this.addEventListener(NodeReferenceClicked, this.explorerReferenceClicked);
         // @ts-ignore
         this.addEventListener(ExplorerNodeClicked, this.explorerNodeClicked.bind(this));
+        // @ts-ignore
+        this.addEventListener(ArchiveURLRequested, this.fetchUrl.bind(this));
+        // @ts-ignore
+        this.addEventListener(DocumentReferenceClicked, this.documentReferenceClicked.bind(this));
         //@ts-ignore
         this.explorer.equalizer.addEventListener(ExplorerEqualizerChanged, this.filterTreeModel.bind(this));
         //@ts-ignore
         this.explorer.equalizer.addEventListener(ExplorerEqualizerFiltered, this.filterTreeModel.bind(this));
+        this.nukeWorkspace.addEventListener(NukeWorkspaceEvent, this.nukeWorkspaceHandler.bind(this));
         // extract port from session storage.
         this.busPort = sessionStorage.getItem("pb33f-doctor-port");
         this.busHost = sessionStorage.getItem("pb33f-doctor-host");
         if (!this.busPort) {
-            this.busPort = "9090"; // default port
+            this.busPort = "443"; // default port
         }
         if (!this.busHost) {
-            this.busHost = "localhost"; // default host
+            this.busHost = "doctor.pb33f.io"; // default host
         }
         const useTLS = sessionStorage.getItem("pb33f-doctor-tls");
         if (useTLS && useTLS == 'true') {
@@ -179,9 +218,33 @@ let TheDoctor = class TheDoctor extends LitElement {
                         }
                     }));
                 }
+                if (state.ref) {
+                    this.documentReferenceClicked(new CustomEvent(DocumentReferenceClicked, {
+                        detail: {
+                            jsonPath: state.ref,
+                            noState: true
+                        }
+                    }));
+                }
             }
         });
     }
+    nukeWorkspaceHandler() {
+        this.bagManager.resetBags();
+        ModelService.resetWorkspace().then(() => {
+            window.location.reload();
+        });
+    }
+    minimapToggled() {
+        this.minimapVisible = !this.minimapVisible;
+        this.editor.toggleMinimap();
+        this.rulesetEditor.toggleMinimap();
+    }
+    firstUpdated() {
+        // https://github.com/microsoft/monaco-editor/issues/3409
+        this.editor = this.querySelector('pb33f-editor#spec-editor');
+        this.rulesetEditor = this.querySelector('pb33f-editor#ruleset-editor');
+    }
     whoAmI() {
         this.bus.publish({
             destination: "/p/q/" + DoctorServiceChannel,
@@ -203,23 +266,31 @@ let TheDoctor = class TheDoctor extends LitElement {
                 this.whoAmI();
             }
         };
+        // TODO re-enable
         this.bus.connectToBroker(config);
+        //this.startTheDoctor()
     }
     addClickTrack(node) {
         history.pushState({ activeNode: node.idHash }, "", `?view=explore&node=${node.idHash}`);
     }
+    addRefTrack(ref) {
+        history.pushState({ ref: ref }, "", `?view=spec&ref=${ref}`);
+    }
     doctorServiceHandler() {
         return (msg) => {
             if (msg.payload?.payload != null) {
                 if (isBrokerResponse(msg.payload.payload)) {
                     this.brokerConnectionId = msg.payload.payload.broker;
-                    console.log("💊 Welcome patient %c" + this.brokerConnectionId, 'color: #62C4FFFF; font-weight: bold');
-                    this.boostrap();
-                    this.loadingOverlay.hide();
+                    console.log("💊 Welcome to the clinic, the %cdoctor %cis ready to see you.", 'color: #62C4FFFF; font-weight: bold', 'color: default');
+                    this.startTheDoctor();
                 }
             }
         };
     }
+    startTheDoctor() {
+        this.boostrap();
+        this.loadingOverlay.hide();
+    }
     specStreamHandler() {
         return (msg) => {
             if (msg.payload?.payload != null) {
@@ -233,6 +304,13 @@ let TheDoctor = class TheDoctor extends LitElement {
             }
         };
     }
+    creditStreamHandler() {
+        return (msg) => {
+            if (msg.payload?.payload != null) {
+                this.creditTicker.credits = parseInt(msg.payload.payload);
+            }
+        };
+    }
     filterTreeModel(event) {
         this.filteredNodes = new Map();
         event.detail.graph.nodes.forEach((node) => {
@@ -241,6 +319,76 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.modelTree.filteredNodes = this.filteredNodes;
         this.modelTree.renderedNodes = this.renderedNodeMap;
     }
+    documentReferenceClicked(evt) {
+        let location = '';
+        let line, col = 1;
+        let path = evt.detail.jsonPath;
+        let fullPath = '';
+        let file = '';
+        let rolodexId = '';
+        if (evt.detail.jsonPath.includes('||')) {
+            location = evt.detail.jsonPath.split('||')[1];
+            path = evt.detail.jsonPath.split('||')[0];
+            // location is formatted line:col-endCol
+            line = parseInt(location.split(':')[0]);
+            col = parseInt(location.split(':')[1]);
+            fullPath = evt.detail.jsonPath.split('||')[2];
+            if (fullPath != '') {
+                file = fullPath.split('#')[0];
+            }
+            rolodexId = evt.detail.jsonPath.split('||')[3];
+        }
+        this.editor.editor?.setPosition({ lineNumber: line, column: col });
+        this.editor.editor?.revealLineInCenter(line);
+        if (this.nodeIdMap.has(path)) {
+            const node = this.nodeIdMap.get(path);
+            if (node) {
+                if (this.nodeIdHashMap.has(node.idHash)) {
+                    const renderedNode = this.renderedNodeMap.get(node.idHash);
+                    if (renderedNode) {
+                        this.renderedNode.node = renderedNode;
+                        this.modelTree.explorerClicked(node.idHash);
+                        // add a ref click
+                        if (!evt.detail.noState) {
+                            this.addRefTrack(evt.detail.jsonPath);
+                        }
+                    }
+                }
+            }
+            else {
+                this.toastManager.addToastManually({
+                    id: crypto.randomUUID(),
+                    type: ToastType.INFO,
+                    title: "Reference not found",
+                    body: `Something went wrong, '${path}' not found`
+                });
+            }
+        }
+        else {
+            if (this.rolodexActivePath != undefined && this.rolodexActivePath != file) {
+                ModelService.queryRolodex(rolodexId, file).then((result) => {
+                    this.editor.showBreadcrumb = true;
+                    this.rolodexActivePath = file;
+                    this.editor.clearDecorations();
+                    this.editor.setValue(result.rolodexRoot.instance, true);
+                    this.editor.editor?.setPosition({ lineNumber: line, column: 1 });
+                    this.editor.editor?.revealLineInCenter(line);
+                    this.rolodexTree.explorerClicked(rolodexId);
+                    this.editor.setCurrentPath(file);
+                    this.lintSpec(result.rolodexRoot.instance);
+                    // apply problems
+                    if (this.rolodexProblemMap.has(this.rolodexActivePath)) {
+                        const probs = this.rolodexProblemMap.get(this.rolodexActivePath);
+                        if (probs) {
+                            this.editor.setMarkers(probs);
+                        }
+                    }
+                }).catch((e) => {
+                    console.error('rolodex query failed', e);
+                });
+            }
+        }
+    }
     explorerReferenceClicked(evt) {
         let hashId = '';
         this.explorer.nodeComponents.forEach((node) => {
@@ -267,10 +415,189 @@ let TheDoctor = class TheDoctor extends LitElement {
             this.explorer.requestUpdate();
             this.viewerPanel.click();
         }
+        if (evt.detail.nodePath) {
+            let p = evt.detail.nodePath;
+            if (!p.startsWith('/') && !p.includes('#')) {
+                const dir = this.rolodexRootPath.substring(0, this.rolodexRootPath.lastIndexOf('/') + 1);
+                p = dir + p;
+            }
+            if (!p.startsWith('#/')) {
+                this.rolodexTreeNodeClicked(new CustomEvent(RolodexTreeNodeClicked, {
+                    detail: {
+                        path: p,
+                    }
+                }));
+            }
+        }
+    }
+    rolodexTreeNodeClicked(evt) {
+        const fileBag = this.rolodexFilesBag?.get(RolodexFilesBag);
+        const handleRolodexResponse = (result) => {
+            this.rolodexActivePath = evt.detail.path;
+            this.rolodexActiveHash = evt.detail.nodeHashId;
+            this.editor.setValue(result.instance, true);
+            this.editor.setCurrentPath(this.rolodexActivePath);
+            const probs = this.rolodexProblemMap.get(this.rolodexActivePath);
+            if (probs) {
+                this.editor.setMarkers(probs);
+            }
+            // set the editor file type
+            let language = 'yaml';
+            const ext = evt.detail?.path?.split('.').pop();
+            if (ext) {
+                switch (ext) {
+                    case NodeType.JSON:
+                        language = NodeType.JSON;
+                        break;
+                    case NodeType.GO:
+                        language = NodeType.GO;
+                        break;
+                    case NodeType.PY:
+                        language = 'python';
+                        break;
+                    case NodeType.JS:
+                        language = 'javascript';
+                        break;
+                    case NodeType.TS:
+                        language = 'typescript';
+                        break;
+                    case NodeType.PHP:
+                        language = NodeType.PHP;
+                        break;
+                    case NodeType.XML:
+                        language = NodeType.XML;
+                        break;
+                    case NodeType.JAVA:
+                        language = NodeType.JAVA;
+                        break;
+                    case NodeType.RB:
+                        language = 'ruby';
+                        break;
+                    case NodeType.RS:
+                        language = 'rust';
+                        break;
+                    case NodeType.C:
+                        language = NodeType.C;
+                        break;
+                    case NodeType.CPP:
+                        language = NodeType.CPP;
+                        break;
+                    case NodeType.CS:
+                        language = 'csharp';
+                        break;
+                    case NodeType.MD:
+                        language = 'markdown';
+                        break;
+                }
+            }
+            const existingState = this.rolodexStateBag?.get(RolodexStateBag);
+            if (existingState) {
+                existingState.activePath = evt.detail.path;
+                existingState.activeHash = evt.detail.nodeHashId;
+                existingState.activeLanguage = language;
+                existingState.activeNode = result;
+                existingState.rootPath = this.rolodexRootPath;
+                this.rolodexStateBag?.set(RolodexStateBag, existingState);
+            }
+            else {
+                const existingState = {
+                    activePath: evt.detail.path,
+                    activeHash: evt.detail.nodeHashId,
+                    activeLanguage: language,
+                    activeNode: result,
+                    rootHash: this.rolodexRootHash,
+                    rootPath: this.rolodexRootPath
+                };
+                this.rolodexStateBag?.set(RolodexStateBag, existingState);
+            }
+            this.editor.switchLanguage(language);
+            let line = 1;
+            let col = 0;
+            if (evt.detail.line) {
+                line = evt.detail.line;
+            }
+            if (evt.detail.column) {
+                col = evt.detail.column;
+            }
+            this.editor.editor?.setPosition({ lineNumber: line, column: col });
+            this.editor.editor?.revealLineInCenter(line, col);
+            this.lintSpec(result.instance);
+            if (evt.detail.path) {
+                this.rolodexTree.openNodeByPath(evt.detail.path);
+            }
+            return language;
+        };
+        ModelService.queryRolodex(evt.detail.nodeHashId, evt.detail.path).then((result) => {
+            this.editor.showBreadcrumb = true;
+            // clear all references
+            this.referenceMapBag?.reset();
+            handleRolodexResponse(result.rolodexRoot);
+            if (evt.detail.path) {
+                if (fileBag && !fileBag.files[evt.detail.path]) {
+                    fileBag.files[evt.detail.path] = result.rolodexRoot;
+                    this.rolodexFilesBag?.set(RolodexFilesBag, fileBag);
+                }
+                if (!fileBag) {
+                    const rf = {
+                        files: { [evt.detail.path]: result.rolodexRoot }
+                    };
+                    this.rolodexFilesBag?.set(RolodexFilesBag, rf);
+                }
+            }
+        });
+    }
+    rolodexRootFileSelected(evt) {
+        this.rolodexActivePath = evt.detail.path;
+        this.rolodexActiveHash = evt.detail.nodeHashId;
+        this.rolodexRootPath = evt.detail.path;
+        this.importDisabled = true;
+        const existingState = this.rolodexStateBag?.get(RolodexStateBag);
+        if (existingState) {
+            existingState.activePath = evt.detail.path;
+            existingState.activeHash = evt.detail.nodeHashId;
+            existingState.rootPath = evt.detail.path;
+            existingState.rootHash = evt.detail.nodeHashId;
+            this.rolodexStateBag?.set(RolodexStateBag, existingState);
+        }
+        else {
+            const existingState = {
+                activePath: evt.detail.path,
+                activeHash: evt.detail.nodeHashId,
+                rootPath: evt.detail.path,
+                rootHash: evt.detail.nodeHashId
+            };
+            this.rolodexStateBag?.set(RolodexStateBag, existingState);
+        }
+        if (evt.detail.nodeHashId) {
+            this.rolodexRootHash = evt.detail.nodeHashId;
+        }
+        if (evt.detail.content) {
+            this.rolodexNeedsReset = true;
+            this.editor.setValue(evt.detail.content, true);
+            this.lintSpec(evt.detail.content);
+        }
     }
     modelTreeNodeClicked(evt) {
         const node = this.nodeIdHashMap.get(evt.detail.nodeHashId);
         if (node) {
+            if (node.origin && node.origin != this.rolodexActivePath && (node.origin != '/root.yaml' && node.origin != 'root.yaml')) {
+                // extract the rolodex id using the path
+                let hashId = '';
+                const fb = this.rolodexFilesBag?.get(RolodexFilesBag);
+                if (fb) {
+                    if (fb.files[node.origin]) {
+                        hashId = fb.files[node.origin].idHash;
+                    }
+                }
+                // we need to fire a rolodex tree node change event.
+                this.rolodexTreeNodeClicked(new CustomEvent(RolodexTreeNodeClicked, {
+                    detail: {
+                        nodeHashId: hashId,
+                        path: node.origin
+                    }
+                }));
+                return;
+            }
             this.editor.editor?.setPosition({ lineNumber: node.keyLine, column: 0 });
             this.editor.editor?.revealLineInCenter(node.keyLine);
             if (this.explorerVisible) {
@@ -288,15 +615,21 @@ let TheDoctor = class TheDoctor extends LitElement {
                 evt.detail.noState = true;
             }
             this.explorerNodeClicked(evt);
-            this.viewerPanel.click();
+            if (this._firstRun) {
+                this._firstRun = false;
+            }
+            else {
+                this.viewerPanel.click();
+            }
         }
     }
     explorerNodeClicked(evt) {
         let found = false;
+        let foundRenderedNode;
         this.explorer.nodeComponents.forEach((node) => {
             if (node.id === evt.detail.nodeHashId) {
                 const renderedNode = this.renderedNodeMap.get(node.id);
-                if (renderedNode) {
+                if (renderedNode && !this._firstRun) {
                     this.renderedNode.node = renderedNode;
                 }
                 this.selectedNodeHashId = node.body.node.idHash;
@@ -304,6 +637,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                 this.activeNode = node.body.node;
                 this.explorer.activeNode = node.body.node;
                 found = true;
+                foundRenderedNode = renderedNode;
                 if (!evt.detail.noState) {
                     this.addClickTrack(node.body.node);
                 }
@@ -322,8 +656,14 @@ let TheDoctor = class TheDoctor extends LitElement {
                 this.explorer.equalizer.activeNode = node;
             }
         }
+        if (foundRenderedNode) {
+            // when jumping back to the spec view, we need to set the line
+            this.pendingLine = foundRenderedNode.keyLine;
+        }
         this.modelTree.explorerClicked(evt.detail.nodeHashId);
-        this.viewerPanel.click();
+        if (!this._firstRun) {
+            this.viewerPanel.click();
+        }
         this.explorer.requestUpdate();
     }
     exportRuleset() {
@@ -412,17 +752,17 @@ let TheDoctor = class TheDoctor extends LitElement {
         // lint spec
         if (this.docBag) {
             const doc = this.docBag.get(DefaultDocument);
-            const config = this.RuleConfigBag?.get(RuleConfigurationBag);
+            const config = this.ruleConfigBag?.get(RuleConfigurationBag);
             if (evt.detail.rules) {
-                this.CustomRulesetBag?.set(CustomRulesetBag, 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) {
+                    if (newConfig && this.ruleConfigBag) {
                         newConfig.returnedRuleset = evt.detail.returnedRules;
-                        this.RuleConfigBag?.set(RuleConfigurationBag, newConfig);
+                        this.ruleConfigBag?.set(RuleConfigurationBag, newConfig);
                     }
                 }
                 RulesetService.getSessionRulesetAsYAML().then((yaml) => {
@@ -433,42 +773,267 @@ let TheDoctor = class TheDoctor extends LitElement {
                     this.fetchRulesetMap();
                 });
                 // lint the spec
-                this.lintSpec(doc);
+                this.lintSpec(doc, '');
             }
         }
     }
+    buildRolodexResultMap(results) {
+        this.rolodexProblemMap.clear();
+        results.forEach((problem) => {
+            // check if the source location is '/root.yaml'
+            if (problem.sourceLocation === '/root.yaml' || problem.sourceLocation === 'root.yaml') {
+                problem.sourceLocation = "root";
+            }
+            if (this.rolodexProblemMap.has(problem.sourceLocation)) {
+                const problems = this.rolodexProblemMap.get(problem.sourceLocation);
+                if (problems) {
+                    problems.push(problem);
+                    if (problem.sourceLocation) {
+                        this.rolodexProblemMap.set(problem.sourceLocation, problems);
+                    }
+                    else {
+                        if (!this.rolodexRootPath) {
+                            this.rolodexProblemMap.set("root", problems);
+                        }
+                        else {
+                            this.rolodexProblemMap.set(this.rolodexRootPath, problems);
+                        }
+                    }
+                }
+            }
+            else {
+                if (problem.sourceLocation) {
+                    this.rolodexProblemMap.set(problem.sourceLocation, [problem]);
+                }
+                else {
+                    if (!this.rolodexRootPath) {
+                        this.rolodexProblemMap.set("root", [problem]);
+                    }
+                    else {
+                        this.rolodexProblemMap.set(this.rolodexRootPath, [problem]);
+                    }
+                }
+            }
+        });
+        return this.rolodexProblemMap;
+    }
+    /* LINT SPEC <---------------------------------------------------------------------------------------------
+    *
+    * This is our main function, man we need to clean this all up, it's bloated to fuck
+    *
+    * <--------------------------------------------------------------------------------------------------------
+    */
     lintSpec(value, url) {
         this.activitySpinner.show();
+        this.editor.breadcumb.isInvalid = false;
         if (url) {
+            if (url === 'root') {
+                url = '';
+            }
+            else {
+                this.urlProblem.style.display = 'none';
+                this.urlOverlay.style.display = "block";
+                this.urlSpinner.style.display = "block";
+                this.referenceMapBag?.reset(); // wipe out refs.
+            }
+        }
+        else {
             this.urlProblem.style.display = 'none';
-            this.urlOverlay.style.display = "block";
-            this.urlSpinner.style.display = "block";
+            this.urlOverlay.style.display = "none";
+            this.urlSpinner.style.display = "none";
+        }
+        let replaceResults = false;
+        let currentPath = this.rolodexActivePath;
+        if (this.rolodexActivePath === this.rolodexRootPath || this.rolodexActivePath === 'root') {
+            replaceResults = true;
+            currentPath = '';
+            this.editor.showBreadcrumb = false;
+        }
+        if (url && url != '') {
+            try {
+                const parsedUrl = new URL(url);
+                if (parsedUrl) {
+                    currentPath = parsedUrl.pathname;
+                    this.rolodexActivePath = currentPath;
+                    this.rolodexRootPath = currentPath;
+                    replaceResults = true;
+                }
+            }
+            catch (e) {
+                // do nothing for now.
+            }
         }
-        LintingService.lintFile(value, this.brokerConnectionId, url).then((result) => {
+        const fetchRefMap = (dead = false) => {
+            const currentRefs = this.referenceMapBag?.export().size;
+            ModelService.fetchReferenceMap().then((result) => {
+                if (dead) {
+                    this.editor.clearDecorations();
+                    this.editor.clearAllMarkers();
+                    this.editor.breadcumb.isInvalid = true;
+                    this.editor.dead();
+                    this.problemList.isInvalid = true;
+                    this.editor.requestUpdate();
+                }
+                else {
+                    this.references = result;
+                    this.editor.links = result;
+                    this.editor.applyLinkDecorations();
+                }
+                // add references to our stateful bag
+                this.updateRefmapBag(currentPath, result);
+            }).catch(() => {
+                this.editor.clearDecorations();
+                this.editor.clearAllMarkers();
+                this.toastManager.addToastManually({
+                    id: crypto.randomUUID(),
+                    type: ToastType.INFO,
+                    title: "File not analyzed",
+                    body: "This file is not a JSON or YAML file, it has not been analyzed."
+                });
+            });
+        };
+        let revive = true;
+        LintingService.lintFile(value, this.brokerConnectionId, url, currentPath).then((result) => {
+            //if (replaceResults) {
+            const map = this.buildRolodexResultMap(result);
             if (url) {
                 this.urlOverlay.style.display = "none";
                 this.urlSpinner.style.display = "none";
                 this.urlProblem.style.display = 'none';
             }
+            // extract empty location problems as we are replacing the root results
+            let rootProblems = this.rolodexProblemMap.get("root");
+            if (!this.rolodexRoot) {
+                rootProblems = [];
+            }
             if (result && !Array.isArray(result)) {
-                this.editor.setMarkers([result]);
-                this.problemBag?.set(DocumentProblems, [result]);
-                this.problemList.problems = [result];
-                this.problems = [result];
+                const r = [result];
+                if (this.rolodexProblemMap.size > 0 && this.rolodexProblemMap.has(this.rolodexActivePath)) {
+                    const probs = this.rolodexProblemMap.get(this.rolodexActivePath);
+                    if (probs) {
+                        if (rootProblems) {
+                            probs.push(...rootProblems);
+                        }
+                        this.editor.setMarkers(probs);
+                    }
+                    else {
+                        if (rootProblems) {
+                            r.push(...rootProblems);
+                        }
+                        this.editor.setMarkers(r);
+                    }
+                }
+                else {
+                    if (rootProblems) {
+                        r.push(...rootProblems);
+                    }
+                    this.editor.setMarkers(r);
+                }
+                this.problemBag?.set(DocumentProblems, r);
+                this.problemList.problems = r;
+                this.problems = r;
                 this.problemsOverview.problems = this.problemList.problemItems;
             }
             if (result && Array.isArray(result)) {
-                this.editor.setMarkers(result);
+                if (result.length == 0) {
+                    this.editor.clearAllMarkers();
+                    this.editor.breadcumb.isInvalid = false;
+                    this.editor.showBreadcrumb = false;
+                    revive = true;
+                    this.problemList.isInvalid = false;
+                }
+                // check if this problem is 'unable to parse'
+                if (result.length == 1 && result[0].message.startsWith('unable to parse')) {
+                    // short circuit, we are dead.
+                    this.editor.clearDecorations();
+                    this.editor.clearAllMarkers();
+                    this.editor.setMarkers(result);
+                    this.editor.breadcumb.isInvalid = true;
+                    this.editor.showBreadcrumb = true;
+                    this.editor.dead();
+                    this.problemList.isInvalid = true;
+                    revive = false;
+                }
+                // extract empty location problems as we are replacing the root results
+                if (revive && this.rolodexProblemMap.size > 0 && this.rolodexProblemMap.has(this.rolodexActivePath)) {
+                    const probs = this.rolodexProblemMap.get(this.rolodexActivePath);
+                    if (probs) {
+                        if (rootProblems) {
+                            probs.push(...rootProblems);
+                        }
+                        this.editor.setMarkers(probs);
+                    }
+                    else {
+                        if (rootProblems) {
+                            result.push(...rootProblems);
+                        }
+                        this.editor.setMarkers(result);
+                    }
+                }
+                else {
+                    if (replaceResults) {
+                        this.editor.setMarkers(result);
+                    }
+                    else {
+                        fetchRefMap();
+                        return;
+                    }
+                }
                 this.problemBag?.set(DocumentProblems, result);
                 this.problemList.problems = result;
                 this.problems = result;
                 this.problemsOverview.problems = this.problemList.problemItems;
+                if (this.problemsOverview.statistics) {
+                    if (result.length == 1) {
+                        this.problemsOverview.statistics.statistics.totalErrors = 1;
+                        this.problemsOverview.statistics.statistics.overallScore = 0;
+                        this.problemsOverview.statistics.evaluation = 'Useless';
+                        this.problemsOverview.statistics.diagnosis = '<strong>Specification cannot be used</strong>: <br/><br/>' + result[0].message;
+                    }
+                }
+            }
+            // enable pb33f theme.
+            if (revive) {
+                this.editor.revive();
+            }
+            else {
+                return;
             }
             // fetch graph
-            // TODO: This needs work
-            ModelService.createGraph().then((result) => {
-                this.extractGraph(result);
-            });
+            if (this.rolodexRootPath == this.rolodexActivePath || this.rolodexActivePath == 'root') {
+                ModelService.createGraph().then((result) => {
+                    this.extractGraph(result);
+                });
+            }
+            fetchRefMap();
+            // TODO: rolodex query should happen elsewhere too!
+            if (this.rolodexNeedsReset) {
+                ModelService.queryRolodex().then((result) => {
+                    this.importDisabled = true;
+                    this.editor.showBreadcrumb = true;
+                    this.rolodexNeedsReset = false;
+                    result.rolodexRoot.treeExpanded = true;
+                    this.rolodexTree.isRolodex = true;
+                    this.rolodexTree.node = result.rolodexRoot;
+                    this.rolodexRoot = result.rolodexRoot;
+                    if (this.rolodexActiveHash) {
+                        this.rolodexTree.pendingNavigationHash = this.rolodexActiveHash;
+                    }
+                    if (this.rolodexActivePath) {
+                        this.rolodexTree.pendingNavigationPath = this.rolodexActivePath;
+                    }
+                    this.rolodexResponseBag?.set(RolodexResponseBag, result);
+                    const existingState = this.rolodexStateBag?.get(RolodexStateBag);
+                    if (!existingState) {
+                        const existingState = {
+                            activePath: this.rolodexActivePath,
+                            rootPath: this.rolodexRootPath,
+                        };
+                        this.rolodexStateBag?.set(RolodexStateBag, existingState);
+                    }
+                    this.requestUpdate();
+                });
+            }
             // update the overview statistics
             LintingService.fetchStatistics().then((result) => {
                 let oldScore = 0;
@@ -485,32 +1050,37 @@ let TheDoctor = class TheDoctor extends LitElement {
                 }
                 // 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) + "%"
-                        });
-                    }
-                }
+                // TODO: re-evaluate these toasts, they get annoying, fucking fast.
+                // 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", e);
                 this.platformUnavailable(e);
             });
+            if (!this.explorerBooted) {
+                this.explorer.equalizer.initializeEqualizer();
+                this.explorerBooted = true;
+            }
         }).catch((e) => {
             if (!url) {
-                this.platformUnavailable(e);
+                //this.platformUnavailable(e);
                 console.error("so sorry, the doctor cannot see you right now, the clinic is closed.");
                 if (e) {
                     console.error(e.detail);
@@ -531,6 +1101,50 @@ let TheDoctor = class TheDoctor extends LitElement {
             }
         });
     }
+    updateInspectorDivider() {
+        const panelState = this.panelStateBag?.get(PanelStateBag);
+        if (panelState) {
+            panelState.inspectorPanel = this.splitPanelInspector.position;
+            this.panelStateBag?.set(PanelStateBag, panelState);
+        }
+        else {
+            this.panelStateBag?.set(PanelStateBag, { inspectorPanel: this.splitPanelInspector.position });
+        }
+    }
+    updateExplorerDivider() {
+        const panelState = this.panelStateBag?.get(PanelStateBag);
+        if (panelState) {
+            panelState.explorerPanel = this.splitPanelExplorer.position;
+            this.panelStateBag?.set(PanelStateBag, panelState);
+        }
+        else {
+            this.panelStateBag?.set(PanelStateBag, { explorerPanel: this.splitPanelExplorer.position });
+        }
+    }
+    updateRolodexDivider() {
+        const panelState = this.panelStateBag?.get(PanelStateBag);
+        if (panelState) {
+            panelState.rolodexPanel = this.splitPanelRolodex.position;
+            this.panelStateBag?.set(PanelStateBag, panelState);
+        }
+        else {
+            this.panelStateBag?.set(PanelStateBag, { rolodexPanel: this.splitPanelRolodex.position });
+        }
+        this.rolodexDividerPosition = this.splitPanelRolodex.position;
+    }
+    updateRefmapBag(currentPath, result) {
+        let refMap = this.referenceMapBag?.get(ReferenceMapBag);
+        let cp = currentPath;
+        if (refMap) {
+            refMap.references[cp] = result;
+        }
+        else {
+            refMap = {
+                references: { [cp]: result }
+            };
+        }
+        this.referenceMapBag?.set(ReferenceMapBag, refMap);
+    }
     platformUnavailable(error) {
         if (!this.unavailable) {
             this.loadingOverlay.hide();
@@ -610,6 +1224,28 @@ let TheDoctor = class TheDoctor extends LitElement {
             this.editorTabGroup.show("spec");
             this.selectedEditorTab = "spec";
         }
+        let sourceLocation = event.detail.problem.problemObject.sourceLocation;
+        // no source? use root
+        if (sourceLocation == '' || sourceLocation == undefined || sourceLocation == 'root') {
+            sourceLocation = this.rolodexRootPath;
+        }
+        // locate the node in rolodex root
+        const node = SearchNodeTreeForPath(this.rolodexRoot, sourceLocation);
+        if (node) {
+            // trigger a rolodex load
+            this.rolodexTreeNodeClicked(new CustomEvent(RolodexTreeNodeClicked, {
+                detail: {
+                    nodeHashId: node.idHash,
+                    path: sourceLocation,
+                    line: event.detail.problem.problemObject.startLineNumber,
+                    column: event.detail.problem.problemObject.startColumn
+                }
+            }));
+            this.detailsDrawer.close();
+            // make sure we select the file in the rolodex
+            this.rolodexTree.openNodeByPath(sourceLocation);
+            return;
+        }
         this.controlTabGroup.show(ActiveView.Problems);
         this.editor.editor?.revealLineInCenter(event.detail.problem.line);
         this.editor.editor?.setPosition({
@@ -629,7 +1265,94 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.connectToBroker();
         this.graphBag = this.bagManager.getBag(GraphBag);
         this.docBag = this.bagManager.getBag(DoctorDocumentBag);
-        if (this.docBag) {
+        this.rolodexResponseBag = this.bagManager.getBag(RolodexResponseBag);
+        this.rolodexFilesBag = this.bagManager.getBag(RolodexFilesBag);
+        this.rolodexStateBag = this.bagManager.getBag(RolodexStateBag);
+        this.referenceMapBag = this.bagManager.getBag(ReferenceMapBag);
+        this.docExpirationBag = this.bagManager.getBag(DocumentationExpirationBag);
+        this.panelStateBag = this.bagManager.getBag(PanelStateBag);
+        // load the rolodex
+        if (this.rolodexResponseBag) {
+            const response = this.rolodexResponseBag.get(RolodexResponseBag);
+            if (response) {
+                this.rolodexRoot = response.rolodexRoot;
+                this.rolodexTree.isRolodex = true;
+                this.rolodexTree.node = response.rolodexRoot;
+                response.rolodexRoot.treeExpanded = true;
+                this.requestUpdate();
+            }
+        }
+        let skipDocBag = false;
+        const checkRefMap = (key) => {
+            let refMap = this.referenceMapBag?.get(ReferenceMapBag);
+            if (refMap) {
+                // TODO: replace with scehduled task to refresh the reference map
+                setTimeout(() => {
+                    let refs = refMap?.references[key];
+                    if (!refs) {
+                        refs = refMap?.references[""]; // single file
+                    }
+                    if (refs) {
+                        this.references = refs;
+                        this.editor.links = refs;
+                        this.editor.applyLinkDecorations();
+                    }
+                }, 5); // editor has not loaded yet, give it a second to breathe.
+            }
+            else {
+                ModelService.fetchReferenceMap().then((result) => {
+                    this.references = result;
+                    this.editor.links = result;
+                    this.editor.applyLinkDecorations();
+                }).catch(() => {
+                    this.editor.clearDecorations();
+                    this.editor.clearAllMarkers();
+                });
+            }
+        };
+        if (this.rolodexStateBag) {
+            const state = this.rolodexStateBag.get(RolodexStateBag);
+            if (state) {
+                this.rolodexActivePath = state.activePath;
+                this.rolodexActiveHash = state.activeHash;
+                // load the root.
+                if (state.rootHash) {
+                    this.rolodexTree.pendingNavigationHash = state.rootHash;
+                }
+                if (state.rootPath) {
+                    this.rolodexRootPath = state.rootPath;
+                    if (state.activePath) {
+                        checkRefMap(state.activePath);
+                    }
+                    // ensure the session has a root selected
+                    ModelService.selectRootPath(state.rootPath).then(() => {
+                        // nothing to do.
+                    }).catch((e) => {
+                        console.error('could not select the root path on boot bro', e);
+                    });
+                }
+                if (state.rootHash)
+                    this.rolodexRootHash = state.rootHash;
+                if (state.activePath) {
+                    this.rolodexTree.pendingNavigationPath = state.activePath;
+                    this.rolodexTree.requestUpdate();
+                }
+                if (state.activeNode) {
+                    // load the content of the active node into the editor
+                    if (state.activeLanguage) {
+                        this.editor.switchLanguage(state.activeLanguage);
+                    }
+                    this.editor.setValue(state.activeNode.instance, true);
+                    skipDocBag = true;
+                }
+            }
+            else {
+                this.rolodexActivePath = "root";
+                // refresh the refmap.
+                checkRefMap(this.rolodexActivePath);
+            }
+        }
+        if (this.docBag && !skipDocBag) {
             const doc = this.docBag.get(DefaultDocument);
             if (doc) {
                 this.editor.setValue(doc, true);
@@ -640,10 +1363,16 @@ let TheDoctor = class TheDoctor extends LitElement {
             const markers = this.problemBag.get(DocumentProblems);
             if (markers) {
                 this.problems = markers;
-                this.editor.setMarkers(markers);
                 for (let i = 0; i < markers.length; i++) {
                     markers[i] = Problem.reconstruct(markers[i]);
                 }
+                this.buildRolodexResultMap(markers);
+                if (this.rolodexProblemMap.size > 0 && this.rolodexProblemMap.has(this.rolodexActivePath)) {
+                    const probs = this.rolodexProblemMap.get(this.rolodexActivePath);
+                    if (probs) {
+                        this.editor.setMarkers(probs);
+                    }
+                }
                 this.problemList.problems = markers;
                 this.problemsOverview.problems = this.problemList.problemItems;
             }
@@ -663,11 +1392,33 @@ let TheDoctor = class TheDoctor extends LitElement {
                 this.extractGraph(graph);
             }
         }
+        // extract panel state
+        if (this.panelStateBag) {
+            const panelState = this.panelStateBag.get(PanelStateBag);
+            if (panelState && panelState.explorerPanel) {
+                this.splitPanelExplorer.position = panelState.explorerPanel;
+            }
+            if (panelState && panelState.rolodexPanel) {
+                if (this.splitPanelRolodex) {
+                    this.splitPanelRolodex.position = panelState.rolodexPanel;
+                }
+                this.rolodexDividerPosition = panelState.rolodexPanel;
+            }
+            if (panelState && panelState.inspectorPanel) {
+                this.splitPanelInspector.position = panelState.inspectorPanel;
+            }
+        }
+        if (!this.rolodexRoot) {
+            this.importDisabled = false;
+        }
+        else {
+            this.importDisabled = true;
+        }
         // extract rulesets from bags
         const promises = [];
-        this.DefaultRulesetBag = this.bagManager.getBag(DefaultRulesetBag);
-        if (this.DefaultRulesetBag) {
-            const ruleset = this.DefaultRulesetBag.get(DefaultRulesetBag);
+        this.defaultRulesetBag = this.bagManager.getBag(DefaultRulesetBag);
+        if (this.defaultRulesetBag) {
+            const ruleset = this.defaultRulesetBag.get(DefaultRulesetBag);
             if (ruleset) {
                 this.defaultRuleset = ruleset;
             }
@@ -687,21 +1438,21 @@ let TheDoctor = class TheDoctor extends LitElement {
             }
         }
         // All ruleset
-        this.AllRulesetBag = this.bagManager.getBag(AllRulesetBag);
-        if (this.AllRulesetBag) {
-            const ruleset = this.AllRulesetBag.get(AllRulesetBag);
+        this.allRulesetBag = this.bagManager.getBag(AllRulesetBag);
+        if (this.allRulesetBag) {
+            const ruleset = this.allRulesetBag.get(AllRulesetBag);
             if (ruleset) {
-                this.AllRuleset = 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);
+        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;
             }
@@ -710,15 +1461,15 @@ let TheDoctor = class TheDoctor extends LitElement {
             }
         }
         // custom ruleset
-        this.CustomRulesetBag = this.bagManager.getBag(CustomRulesetBag);
-        if (this.CustomRulesetBag) {
-            const ruleset = this.CustomRulesetBag.get(CustomRulesetBag);
+        this.customRulesetBag = this.bagManager.getBag(CustomRulesetBag);
+        if (this.customRulesetBag) {
+            const ruleset = this.customRulesetBag.get(CustomRulesetBag);
             if (ruleset) {
-                this.CustomRuleset = ruleset;
+                this.customRuleset = ruleset;
             }
         }
         // create rule configuration bag
-        this.RuleConfigBag = this.bagManager.getBag(RuleConfigurationBag);
+        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.
@@ -726,9 +1477,9 @@ let TheDoctor = class TheDoctor extends LitElement {
             // configure rule management
             this.manageRuleset.defaultRuleset = this.defaultRuleset;
             this.manageRuleset.owaspRuleset = this.OWASPRuleset;
-            this.manageRuleset.allRuleset = this.AllRuleset;
+            this.manageRuleset.allRuleset = this.allRuleset;
             this.manageRuleset.functions = this.functions;
-            const config = this.RuleConfigBag?.get(RuleConfigurationBag);
+            const config = this.ruleConfigBag?.get(RuleConfigurationBag);
             if (config) {
                 this.manageRuleset.rulesetConfig = config;
             }
@@ -737,8 +1488,8 @@ let TheDoctor = class TheDoctor extends LitElement {
             }
             setTimeout(() => {
                 this.manageRuleset.buildRulesets();
-                if (this.CustomRuleset && this.CustomRuleset.rules.size > 0) {
-                    this.manageRuleset.customRuleset = this.CustomRuleset;
+                if (this.customRuleset && this.customRuleset.rules.size > 0) {
+                    this.manageRuleset.customRuleset = this.customRuleset;
                 }
                 this.fetchSessionRulesetAsYaml().then((result) => {
                     this.rulesetEditor?.setValue(result, true);
@@ -770,14 +1521,14 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.nodeIdMap.clear();
         this.nodeIdHashMap.clear();
         const renderedNodes = new Map();
-        graph.nodesRendered.forEach((node) => {
+        graph?.nodesRendered?.forEach((node) => {
             this.explorer.renderedNodeMap.set(node.id, node);
             renderedNodes.set(node.idHash, node);
         });
-        for (let i = 0; i < graph.nodesRendered.length; i++) {
+        for (let i = 0; i < graph?.nodesRendered?.length; i++) {
             this.renderedNodeMap.set(graph.nodesRendered[i].idHash, graph.nodesRendered[i]);
         }
-        graph.nodes.forEach((node) => {
+        graph?.nodes?.forEach((node) => {
             this.nodeMap.set('model-' + node.idHash, node);
             this.nodeIdMap.set(node.id, node);
             this.nodeIdHashMap.set(node.idHash, node);
@@ -793,9 +1544,15 @@ let TheDoctor = class TheDoctor extends LitElement {
         });
         this.graphBag?.set(GraphBag, graph);
         this.explorer.updateGraphResponse(graph);
-        this.modelTree.node = graph.nodes[0]; // update tree
-        this.explorer.equalizer.runEQ();
-        //this.explorer.buildLayout();
+        if (graph && graph.nodes) {
+            this.modelTree.node = graph?.nodes[0]; // update tree
+        }
+        if (!this.explorer.equalizer.isInitialized()) {
+            this.explorer.equalizer.initializeEqualizer();
+        }
+        else {
+            this.explorer.equalizer.runEQ(true);
+        }
     }
     customRulesetEnabled(event) {
         const customRS = { rules: new Map() };
@@ -808,12 +1565,12 @@ let TheDoctor = class TheDoctor extends LitElement {
             customRS.rules.set(rule.ruleId, rule.rule);
         });
         // write state
-        this.CustomRulesetBag?.set(CustomRulesetBag, customRS);
+        this.customRulesetBag?.set(CustomRulesetBag, customRS);
         if (event.detail.ruleConfig) {
-            this.RuleConfigBag?.set(RuleConfigurationBag, event.detail.ruleConfig);
+            this.ruleConfigBag?.set(RuleConfigurationBag, event.detail.ruleConfig);
         }
         else {
-            this.RuleConfigBag?.reset();
+            this.ruleConfigBag?.reset();
             // reset session ruleset
             RulesetService.resetSessionRuleset(event.detail.rulesetReset).then(() => {
                 this.sendToast({
@@ -824,15 +1581,14 @@ let TheDoctor = class TheDoctor extends LitElement {
                 });
                 if (this.docBag) {
                     const doc = this.docBag.get(DefaultDocument);
-                    this.lintSpec(doc);
+                    let path = this.rolodexActivePath;
+                    if (path == 'root') {
+                        path = "";
+                    }
+                    this.lintSpec(doc, this.rolodexActivePath);
                 }
                 this.fetchSessionRulesetAsYaml().then((result) => {
                     this.rulesetEditor?.setValue(result, true);
-                    // if(event.detail.rulesetReset) {
-                    //     this.manageRuleset.switchRuleset(event.detail.rulesetReset);
-                    // } else {
-                    //     this.manageRuleset.switchRuleset("default");
-                    // }
                 });
             }).catch((e) => {
                 this.sendToast({
@@ -858,7 +1614,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         return new Promise(async (resolve) => {
             RulesetService.getFunctions().then((result) => {
                 this.functions = result;
-                this.FunctionsBag?.set(FunctionsBag, result);
+                this.functionsBag?.set(FunctionsBag, result);
                 // extract schemas for each function
                 const promises = [];
                 result.forEach((functionId) => {
@@ -873,12 +1629,12 @@ let TheDoctor = class TheDoctor extends LitElement {
     async fetchFunctionSchema(functionId) {
         return new Promise(async (resolve) => {
             RulesetService.getFunctionSchema(functionId).then((result) => {
-                let m = this.FunctionSchemaBag?.get(FunctionsSchemaBag);
+                let m = this.functionSchemaBag?.get(FunctionsSchemaBag);
                 if (!m) {
                     m = new Map();
                 }
                 m.set(functionId, result);
-                this.FunctionSchemaBag?.set(FunctionsSchemaBag, m);
+                this.functionSchemaBag?.set(FunctionsSchemaBag, m);
                 resolve(result);
             });
         });
@@ -887,7 +1643,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         return new Promise(async (resolve) => {
             RulesetService.getDefaultRuleset().then((result) => {
                 this.defaultRuleset = result;
-                this.DefaultRulesetBag?.set(DefaultRulesetBag, result);
+                this.defaultRulesetBag?.set(DefaultRulesetBag, result);
                 resolve(result);
             });
         });
@@ -904,8 +1660,8 @@ let TheDoctor = class TheDoctor extends LitElement {
     async fetchAllRuleset() {
         return new Promise(async (resolve) => {
             RulesetService.getAllRuleset().then((result) => {
-                this.AllRuleset = result;
-                this.AllRulesetBag?.set(AllRulesetBag, result);
+                this.allRuleset = result;
+                this.allRulesetBag?.set(AllRulesetBag, result);
                 resolve(result);
             });
         });
@@ -915,10 +1671,13 @@ let TheDoctor = class TheDoctor extends LitElement {
         // the first this we need to do is start a session
         LintingService.startSession().then((session) => {
             this.session = session;
-            // bootstrap async
-            // setTimeout(() => {
-            //     this.boostrap();
-            // });
+            if (this.session.creditsRemaining) {
+                this.creditTicker.credits = this.session.creditsRemaining;
+            }
+            else {
+                this.creditTicker.credits = this.session.creditsRemaining;
+            }
+            this.creditTicker.visible = true;
             LintingService.fetchAllHowToFix().then((result) => {
                 if (result) {
                     result.forEach((howToFix) => {
@@ -935,6 +1694,7 @@ let TheDoctor = class TheDoctor extends LitElement {
             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);
@@ -946,7 +1706,43 @@ let TheDoctor = class TheDoctor extends LitElement {
                     this.activitySpinner.hide();
                 }
             });
-            this.ruleDocsWorker.postMessage({ start: true, endpoint: this.doctorEndpoint });
+            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 {
+                        this.activitySpinner.hide();
+                    }
+                }
+                else {
+                    fetchDocs();
+                }
+            }
+            else {
+                fetchDocs();
+            }
         }).catch((e) => {
             this.platformUnavailable(e);
             console.error("cannot start session");
@@ -997,8 +1793,8 @@ let TheDoctor = class TheDoctor extends LitElement {
                     rule.id = id; // set the id to the key
                 });
                 // write state
-                this.CustomRulesetBag?.set(CustomRulesetBag, customRS);
-                this.CustomRuleset = customRS;
+                this.customRulesetBag?.set(CustomRulesetBag, customRS);
+                this.customRuleset = customRS;
                 if (customRS.rules.size > 0) {
                     // rebuild the ruleset management
                     this.manageRuleset.customRulesetManual = customRS;
@@ -1039,7 +1835,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                         if (rule.id != id)
                             rule.id = id; // set the id to the key
                     });
-                    this.CustomRuleset = customRS;
+                    this.customRuleset = customRS;
                     if (customRS.rules.size > 0) {
                         // rebuild the ruleset management
                         this.manageRuleset.customRulesetManual = customRS;
@@ -1059,7 +1855,7 @@ let TheDoctor = class TheDoctor extends LitElement {
     }
     specChanged(event) {
         const editor = this.editorMap.get(event.detail.id);
-        if (editor && event.detail.id === 'ruleset') {
+        if (editor && event.detail.id === 'ruleset-editor') {
             this.rulesetManuallyChanged();
             return;
         }
@@ -1077,12 +1873,14 @@ let TheDoctor = class TheDoctor extends LitElement {
         const urlParam = url.searchParams.get('url');
         if (urlParam) {
             this.urlInput.value = urlParam;
+            this.activeURL = urlParam;
             this.lintSpec('', urlParam);
             return;
         }
-        if (this.editor.getValue() === '') {
+        if (this.editor.getValue() === '' || !this.problems) {
             LintingService.bootstrapEditor().then((result) => {
                 this.editor.setValue(result, true);
+                this.rolodexActivePath = "";
                 this.specChanged(new CustomEvent(EditorUpdated, {
                     detail: {
                         content: result,
@@ -1094,8 +1892,8 @@ let TheDoctor = class TheDoctor extends LitElement {
     }
     exportJSON() {
         let jsonRS;
-        if (this.RuleConfigBag) {
-            const config = this.RuleConfigBag.get(RuleConfigurationBag);
+        if (this.ruleConfigBag) {
+            const config = this.ruleConfigBag.get(RuleConfigurationBag);
             if (config && config.returnedRuleset) {
                 jsonRS = config.returnedRuleset;
             }
@@ -1188,17 +1986,21 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.sidebarClosed = !this.sidebarClosed;
     }
     toggleExplorer() {
-        this.explorerVisible = true;
-        if (this.explorerVisible) {
+        this.explorerVisible = !this.explorerVisible;
+        if (this.explorerVisible && this.activeNode) {
             this.explorer.moveToNode(this.activeNode);
         }
-        if (!this.explorerBooted) {
-            this.explorer.equalizer.initializeEqualizer();
-            this.explorerBooted = true;
-        }
+        this.explorerBooted = true;
     }
     closeExplorer() {
         this.explorerVisible = false;
+        setTimeout(() => {
+            if (this.pendingLine > 0) {
+                this.editor.editor?.setPosition({ lineNumber: this.pendingLine, column: 1 });
+                this.editor.editor?.revealLineInCenter(this.pendingLine);
+                this.pendingLine = 0;
+            }
+        }, 20);
     }
     render() {
         let overlay = html ``;
@@ -1224,6 +2026,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                 <sl-badge pulse></sl-badge>`;
         }
         let mainPanelView = html `
+
             <div class="problems" slot="end">
                 <div class="problems-data">
                     <sl-tab-group class="tab-group" id="manager-controls"
@@ -1244,8 +2047,25 @@ let TheDoctor = class TheDoctor extends LitElement {
                 <sl-icon-button class="collapse-side" name="chevron-bar-right"
                                 @click="${this.toggleSidebar}"></sl-icon-button>
             </div>`;
-        let sparks = new PixelSparks();
+        let modelTree = html `${this.modelTree}`;
+        if (this.rolodexTree.node && this.rolodexTree.node.nodes?.length > 0) {
+            modelTree = html `
+                <sl-split-panel id="rolodex-split-panel" vertical class="split-panel-rolodex"
+                                position="${this.rolodexDividerPosition}" @sl-reposition="${this.updateRolodexDivider}"
+                                style="height: calc(100% - 60px);">
+                    <sl-icon id="split-rolodex-tree" slot="divider" name="grip-horizontal"
+                             class="divider-horiz"></sl-icon>
+                    <div slot="start" class="model-tree">
+                        ${this.modelTree}
+                    </div>
+                    <div slot="end" class="model-tree">
+                        ${this.rolodexTree}
+                    </div>
+                </sl-split-panel>`;
+        }
         return html `
+            ${this.uploadArchive}
+            ${this.nukeWorkspace}
             ${welcomeBox}
             ${this.toastManager}
             <sl-dialog open id="loading-overlay" class="dialog-overview"
@@ -1276,15 +2096,46 @@ let TheDoctor = class TheDoctor extends LitElement {
                 ${this.errorBanner}
                 ${overlay}
 
-                <sl-split-panel class="split-panel-explorer" position="12">
-                    <sl-icon id="split-divider-tree" slot="divider" name="grip-vertical"></sl-icon>
+                <sl-split-panel id="explorer-split-panel" class="split-panel-explorer" position="12"
+                                @sl-reposition="${this.updateExplorerDivider}">
+                    <sl-icon id="split-divider-tree" slot="divider" name="grip-vertical" class="divider-vert"></sl-icon>
                     <div slot="start" class="model-tree">
-                        ${this.modelTree}
+                        <div class="controls">
+
+                            <sl-tooltip content="Upload zip file or tar.gz (tarball)" placement="top">
+                                <sl-button ?disabled=${this.importDisabled} class="import-button" variant="text"
+                                           size="small" @click="${() => {
+            this.uploadArchive.show();
+        }}">
+                                    Import
+                                </sl-button>
+                            </sl-tooltip>
+                            <sl-tooltip content="Nuke / reset workspace" placement="top">
+                                <sl-icon-button style="${!this.importDisabled ? 'display: none' : ''}"
+                                                class="nuke-session-button" name="radioactive" @click="${() => {
+            this.nukeWorkspace.show();
+        }}">
+                                </sl-icon-button>
+                            </sl-tooltip>
+
+                        </div>
+                        ${modelTree}
+                        ${this.creditTicker}
                     </div>
                     <div slot="end">
-                        <sl-split-panel class="split-panel ${this.unavailable ? 'unavailable' : ''}" position="60">
-                            <sl-icon id="split-divider" slot="divider" name="grip-vertical"></sl-icon>
+                        <sl-split-panel id="inspector-split-panel"
+                                        @sl-reposition="${this.updateInspectorDivider}"
+                                        class="split-panel ${this.unavailable ? 'unavailable' : ''}">
+                            <sl-icon id="split-divider" slot="divider" name="grip-vertical"
+                                     class="divider-vert"></sl-icon>
                             <div class="editor" slot="start">
+
+                                <sl-tooltip class="minimap-tip" content="Toggle source mini-map" hoist>
+                                    <sl-icon-button @click="${this.minimapToggled}"
+                                                    name="map"
+                                                    class="minimap-toggle ${this.minimapVisible ? 'active' : ''}"></sl-icon-button>
+                                </sl-tooltip>
+
                                 ${this.detailsDrawer}
                                 <sl-tab-group class="tab-group" @sl-tab-show="${this.selectEditorTab}"
                                               id="editor-controls">
@@ -1302,26 +2153,18 @@ let TheDoctor = class TheDoctor extends LitElement {
                                     </sl-tab>
 
                                     <sl-tab-panel name="spec" class="tab-panel">
-
-                                        <div class="controls">
-                                            <div style="margin-top: 8px; margin-right: 5px;">URL:</div>
-                                            <sl-input id="url-input" class="url-input"
-                                                      placeholder="https://api.pb33f.io/train-travel.yaml" size="small"
-                                                      @keydown="${this.validateUrl}"
-                                                      @keyup="${this.validateUrl}"></sl-input>
-                                            <sl-button id="url-input-button" class="url-input-button close-button"
-                                                       size="small" variant="neutral" disabled
-                                                       @click="${this.fetchUrl}">Fetch
-                                            </sl-button>
-                                        </div>
                                         <div class="main-view">
+                                            ${this.statusBar}
                                             <div id="editor-url-overlay" class="editor-url-overlay">
+                                               
+                                               
                                                 <div id="url-spinner">
-                                                    <div class="pb33f-loader">
-                                                        <div class="spin"></div>
-                                                        Fetching from URL '<strong>${this.activeURL}</strong>'...
-                                                    </div>
+                                                   <sl-icon name="arrow-repeat" class="url-spinner-icon"></sl-icon>
+                                                    <h3>Fetching URL</h3>
+                                                    <p>${this.activeURL}</p>
                                                 </div>
+                                               
+                                               
                                                 <div id="url-problem" class="url-problem">
                                                     <pb33f-attention-box type="warning" headerText="Problem with URL">
                                                         <h4>Error: ${this.urlErrorCode}</h4>
@@ -1331,10 +2174,19 @@ let TheDoctor = class TheDoctor extends LitElement {
                                                     </pb33f-attention-box>
                                                 </div>
                                             </div>
-                                            ${this.editor}
+
+
+                                            <!-- EDITOR -->
+                                            <slot name="spec-editor"></slot>
+                                            <!-- EDITOR -->
                                         </div>
                                     </sl-tab-panel>
-                                    <sl-tab-panel name="ruleset" class="tab-panel">${this.rulesetEditor}</sl-tab-panel>
+                                    <sl-tab-panel name="ruleset" class="tab-panel">
+
+                                        <!-- RULESET EDITOR -->
+                                        <slot name="ruleset-editor"></slot>
+                                        <!-- RULESET EDITOR -->
+                                    </sl-tab-panel>
                                     <sl-tab-panel name="explorer" class="tab-panel"
                                                   @mouseleave="${this.ungrabExplorer}">${this.explorer}
                                     </sl-tab-panel>
@@ -1345,8 +2197,9 @@ let TheDoctor = class TheDoctor extends LitElement {
                         </sl-split-panel>
                     </div>
                 </sl-split-panel>
-                ${this.statusBar}
+
             </div>`;
+        //
         // docs   <iframe src="/docs.html" width="100%" height="100%"
         //                                                 style="border: none"></iframe>
         //    <sl-tab slot="nav" panel="docs" class="tab" id="docs">
@@ -1355,14 +2208,17 @@ let TheDoctor = class TheDoctor extends LitElement {
         // <sl-tab-panel name="docs" class="tab-panel">
         //                                     </sl-tab-panel>
     }
-    fetchUrl() {
-        this.activeURL = this.urlInput.value;
-        this.lintSpec('', this.urlInput.value);
+    fetchUrl(event) {
+        this.activeURL = event.detail.url;
+        this.rolodexNeedsReset = true;
+        this.rolodexActivePath = "/";
+        this.lintSpec('', event.detail.url);
     }
     hideUrlError() {
         this.urlProblem.style.display = 'none';
         this.urlOverlay.style.display = 'none';
         this.urlSpinner.style.display = 'none';
+        this.editor.toggleMinimap();
     }
     showUrlError(e) {
         this.urlErrorCode = e.status;
@@ -1370,27 +2226,14 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.urlSpinner.style.display = 'none';
         this.urlOverlay.style.display = 'block';
         this.urlProblem.style.display = 'block';
+        this.editor.toggleMinimap();
         this.requestUpdate();
     }
-    validateUrl(evt) {
-        if (evt.key === "Enter") {
-            this.fetchUrl();
-        }
-        const urlValue = this.urlInput.value;
-        if (urlValue.match(urlRegex)) {
-            this.urlInputButton.disabled = false;
-            this.urlInputButton.classList.remove('close-button');
-        }
-        else {
-            this.urlInputButton.disabled = true;
-            this.urlInputButton.classList.add('close-button');
-        }
-    }
     ungrabExplorer() {
         this.explorer.grabbed = false;
     }
 };
-TheDoctor.styles = [theDoctorCss, linksCss, dialogCss, buttonCss, radioGroupsCss, tabsCss, formsCss, spinnerCss];
+TheDoctor.styles = [theDoctorCss, linksCss, dialogCss, buttonCss, radioGroupsCss, tabsCss, formsCss, spinnerCss, tooltipCss];
 __decorate([
     query('#overviewPanel')
 ], TheDoctor.prototype, "overviewPanel", void 0);
@@ -1433,6 +2276,15 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], TheDoctor.prototype, "unavailable", void 0);
+__decorate([
+    query('#editor-url-overlay')
+], TheDoctor.prototype, "urlOverlay", void 0);
+__decorate([
+    query('#url-problem')
+], TheDoctor.prototype, "urlProblem", void 0);
+__decorate([
+    query('#url-spinner')
+], TheDoctor.prototype, "urlSpinner", void 0);
 __decorate([
     property()
 ], TheDoctor.prototype, "doctorEndpoint", void 0);
@@ -1448,6 +2300,15 @@ __decorate([
 __decorate([
     query('sl-split-panel.split-panel')
 ], TheDoctor.prototype, "splitPanel", void 0);
+__decorate([
+    query('#explorer-split-panel')
+], TheDoctor.prototype, "splitPanelExplorer", void 0);
+__decorate([
+    query('#rolodex-split-panel')
+], TheDoctor.prototype, "splitPanelRolodex", void 0);
+__decorate([
+    query('#inspector-split-panel')
+], TheDoctor.prototype, "splitPanelInspector", void 0);
 __decorate([
     state()
 ], TheDoctor.prototype, "rulesetPulse", void 0);
@@ -1456,18 +2317,14 @@ __decorate([
 ], TheDoctor.prototype, "explorerVisible", void 0);
 __decorate([
     state()
-], TheDoctor.prototype, "activeURL", void 0);
-__decorate([
-    query('#editor-url-overlay')
-], TheDoctor.prototype, "urlOverlay", void 0);
+], TheDoctor.prototype, "minimapVisible", void 0);
 __decorate([
-    query('#url-problem')
-], TheDoctor.prototype, "urlProblem", void 0);
+    state()
+], TheDoctor.prototype, "activeURL", void 0);
 __decorate([
-    query('#url-spinner')
-], TheDoctor.prototype, "urlSpinner", void 0);
+    state()
+], TheDoctor.prototype, "rolodexNeedsReset", void 0);
 TheDoctor = __decorate([
     customElement("pb33f-doctor")
 ], TheDoctor);
 export { TheDoctor };
-const urlRegex = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;