@pb33f/cowboy-components 0.7.17 → 0.8.0

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

@@ -14,10 +14,10 @@ import '@shoelace-style/shoelace/dist/components/alert/alert.js';
 import '@shoelace-style/shoelace/dist/components/badge/badge.js';
 import '@shoelace-style/shoelace/dist/components/avatar/avatar.js';
 import { customElement, property, query, state } from "lit/decorators.js";
-import { html, LitElement } from "lit";
+import { html, LitElement, nothing } from "lit";
+import { ref, createRef } from "lit/directives/ref.js";
 import { SpecEditor } from "../editor/editor.js";
-import { ActiveView, AddToast, ArchiveURLRequested, BuiltInRulesetChanged, CreditEmpty, CustomRulesetEnabled, DocumentReferenceClicked, EditorClicked, EditorUpdated, ExplorerEqualizerChanged, ExplorerEqualizerFiltered, ExplorerNodeClicked, ExportRuleset, LoadRenderedNodeIntoInspector, ModelTreeNodeClicked, NodeReferenceClicked, NukeWorkspaceEvent, OpenProblemDrawer, OpenSettings, ProblemClicked, Reboot, RolodexRootFileSelected, RolodexTreeNodeClicked, RuleClicked, RulesetSaved, RuleViolationClicked, StartSessionFailed, CreditStreamUpdated, } from "../../events/doctor.js";
-import { ProblemDetailsDrawer } from "../problem-list/details-drawer.js";
+import { ActiveView, AddToast, ArchiveURLRequested, BuiltInRulesetChanged, CreditEmpty, CustomRulesetEnabled, DocumentReferenceClicked, EditorClicked, EditorUpdated, ExplorerEqualizerChanged, ExplorerEqualizerFiltered, ExplorerPovModeExit, ExplorerNodeClicked, ExportRuleset, LoadRenderedNodeIntoInspector, ModelTreeNodeClicked, NodeReferenceClicked, NukeWorkspaceEvent, OpenDrawer, OpenSettings, ProblemClicked, Reboot, RolodexRootFileSelected, RolodexTreeNodeClicked, RuleClicked, RulesetSaved, RuleViolationClicked, StartSessionFailed, CreditStreamUpdated, SocketDisconnected, DiagramRequested, TimelineViolationsLoaded, BundleRequested, BundleDownloadRequested, BundleCopyRequested, } from "../../events/doctor.js";
 import { CreateBagManager } from "@pb33f/saddlebag";
 import { LintingService } from "../../services/linting-service.js";
 import { ProblemList } from "../problem-list/problem-list.js";
@@ -43,13 +43,16 @@ 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 { createDoctorEventChannels } from "../../services/doctor-events.js";
 import formsCss from "../../css/forms.css.js";
 import spinnerCss from "../../css/spinner.css.js";
+import { resolveNodeIdFromHash } from "../../utils/node-helpers.js";
 import { UploadArchiveComponent } from "./upload-archive.js";
+import '../premium-gate/premium-gate.js';
 import tooltipCss from "../../css/tooltip.css.js";
 import { NukeWorkspaceComponent } from "./nuke-workspace.js";
 import { CreditTicker } from "../credit-ticker/credit-ticker.js";
-import { AuthController } from "../../controllers/auth-controller";
+import { AuthController } from "../../controllers/auth-controller.js";
 import { AuthService } from "../../services/auth-service.js";
 import { TimeVortex } from "../time-vortex/time-vortex.js";
 import { TimelineService } from "../../services/timeline-service.js";
@@ -66,10 +69,37 @@ import { DocsController } from '../../controllers/docs-controller.js';
 import { ModelController } from '../../controllers/model-controller.js';
 import { DiagnosticController } from '../../controllers/diagnostic-controller.js';
 import { StateController } from '../../controllers/state-controller.js';
-import { WorkspaceController } from "../../controllers/workspace-controller";
+import { WorkspaceController } from "../../controllers/workspace-controller.js";
 import { WalletController } from "../../controllers/wallet-controller.js";
+import { GlobalTaskController } from "../../controllers/global-task-controller.js";
+import { GitHubController } from "../../controllers/github-controller.js";
+import { DiagramatronController } from "../../controllers/diagramatron-controller.js";
+import { TimelineController } from "../../controllers/timeline-controller.js";
+import { BundleController } from "../../controllers/bundle-controller.js";
+import '../bundle-toolbar/bundle-toolbar.js';
 import { WorkspaceService } from '../../services/workspace-service.js';
 import { WalletService } from '../../services/wallet-service.js';
+import { GlobalTaskService } from '../../services/global-task-service.js';
+import { GitHubService } from '../../services/github-service.js';
+import { GenericDetailsDrawer } from '../details-drawer/generic-details-drawer.js';
+import { DrawerContentRegistry } from '../../services/drawer-content-registry.js';
+import { TabCacheController } from '../../controllers/tab-cache-controller.js';
+import { DocumentationHandler } from '../details-drawer/handlers/documentation-handler.js';
+import { HowToFixHandler } from '../details-drawer/handlers/howto-handler.js';
+import { ExampleHandler } from '../details-drawer/handlers/example-handler.js';
+import { MarkdownHandler } from '../details-drawer/handlers/markdown-handler.js';
+import { DiagramHandler } from '../details-drawer/handlers/diagram-handler.js';
+import { GlobalTaskView } from '../global-task/global-task-view.js';
+import "../time-vortex/tardis-control.js"; // Ensure the custom element is registered
+import { ImportRequested, NukeRequested } from './doctor-controls-panel.js';
+import { UrlOverlayDismissed } from './doctor-url-overlay.js';
+import { SidebarTabChanged, SidebarCollapseToggled } from './doctor-sidebar-panel.js';
+import { NavigatorTabChanged, NavigatorRolodexDividerChanged } from './doctor-navigator-panel.js';
+import { EditorTabChanged, DiagnoseRequested, MinimapToggled, SettingsRequested } from './doctor-editor-panel.js';
+import { createStateControllerDeps } from '../../factories/state-controller-deps.factory.js';
+import { EventRegistrationManager } from '../../managers/event-registration-manager.js';
+import { ViewStateManager } from '../../managers/view-state-manager.js';
+import { PanelDividerManager } from '../../managers/panel-divider-manager.js';
 export const GraphBag = "pb33f-doctor-graph";
 export const PanelStateBag = "pb33f-doctor-panel-state";
 export const RolodexResponseBag = "pb33f-doctor-rolodex-response";
@@ -90,19 +120,34 @@ 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 SessionRulesetYamlBag = "pb33f-doctor-session-ruleset-yaml";
 export const SettingsBag = "pb33f-doctor-settings";
+export const GitHubStateBag = "pb33f-doctor-github-state";
 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") {
         super();
+        this.toolsEditorHasContent = false;
+        this.editorDirty = false;
+        this.bundleLoading = false;
+        this.isBundled = false;
+        // Use ref directives instead of @query for better control
+        this.tardisControlRef = createRef();
+        this.editorRef = createRef();
+        this.rulesetEditorRef = createRef();
+        this.changeDiffEditorRef = createRef();
+        this.eventManager = new EventRegistrationManager();
         this.debounceTime = 1000;
         this.debounceTimeRuleset = 900;
         this.bounceId = 0;
+        this.tabCache = new TabCacheController(this);
         this.firstRun = true;
-        // rolodex divider state (because it may not exist)
         this.rolodexDividerPosition = 40;
+        this.currentViewName = '';
+        this.isRebooting = false;
+        this._editorOpsCache = new Map();
         // extract the doctor endpoint from session storage.
         const sessionEndpoint = sessionStorage.getItem(DoctorEndpoint);
         if (sessionEndpoint) {
@@ -119,30 +164,42 @@ let TheDoctor = class TheDoctor extends LitElement {
         TimelineService.doctorEndpoint = this.doctorEndpoint;
         WorkspaceService.doctorEndpoint = this.doctorEndpoint;
         WalletService.doctorEndpoint = this.doctorEndpoint;
-        this.timeVortex = new TimeVortex();
+        GlobalTaskService.doctorEndpoint = this.doctorEndpoint;
+        GitHubService.doctorEndpoint = this.doctorEndpoint;
         // bus it up
         this.bus = CreateBus();
+        this.events = createDoctorEventChannels(this.bus);
         this.bagManager = CreateBagManager(true);
-        this.graphBag = this.bagManager.getBag(GraphBag);
-        this.docBag = this.bagManager.getBag(DoctorDocumentBag);
-        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);
-        this.settingsBag = this.bagManager.getBag(SettingsBag);
+        this.graphBag = this.bagManager.createBag(GraphBag);
+        this.docBag = this.bagManager.createBag(DoctorDocumentBag);
+        this.rolodexResponseBag = this.bagManager.createBag(RolodexResponseBag);
+        this.rolodexFilesBag = this.bagManager.createBag(RolodexFilesBag);
+        this.rolodexStateBag = this.bagManager.createBag(RolodexStateBag);
+        this.referenceMapBag = this.bagManager.createBag(ReferenceMapBag);
+        this.docExpirationBag = this.bagManager.createBag(DocumentationExpirationBag);
+        this.panelStateBag = this.bagManager.createBag(PanelStateBag);
+        this.settingsBag = this.bagManager.createBag(SettingsBag);
+        this.githubStateBag = this.bagManager.createBag(GitHubStateBag);
+        // initialize properties needed by StateController factory
+        this.rolodexProblemMap = new Map();
+        this.rolodexRootHash = "";
+        this.rolodexRootPath = "";
+        this.rolodexNeedsReset = false;
+        this.rolodexDividerPosition = 40;
+        this.references = [];
+        this.problems = [];
         // create a stateful bag manager
         this.modelController = new ModelController(this);
-        this.stateController = new StateController(this);
-        // boot state.
-        this.bagManager.loadStatefulBags().then(this.stateController.loadState.bind(this.stateController));
+        this.stateController = new StateController(createStateControllerDeps(this));
+        this.timeVortex = new TimeVortex(this);
         this.editor = new SpecEditor();
+        this.changeDiffEditor = new SpecEditor();
         this.uploadArchive = new UploadArchiveComponent();
         this.nukeWorkspace = new NukeWorkspaceComponent();
         this.rulesetEditor = new SpecEditor('ruleset-editor');
         this.problemList = new ProblemList();
-        this.detailsDrawer = new ProblemDetailsDrawer();
+        this.genericDrawer = new GenericDetailsDrawer();
+        this.setupDrawerHandlers();
         this.problemsOverview = new ProblemsOverview();
         this.errorBanner = new ErrorBanner();
         this.statusBar = new StatusBar();
@@ -164,36 +221,88 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.diagnosticController = new DiagnosticController(this);
         this.walletController = new WalletController(this);
         this.workspaceController = new WorkspaceController(this);
+        this.globalTaskController = new GlobalTaskController(this);
+        this.githubController = new GitHubController(this, this.globalTaskController, this.workspaceController);
+        this.diagramatronController = new DiagramatronController(this);
+        this.diagramatronController.setDrawer(this.genericDrawer);
+        this.timelineController = new TimelineController(this);
+        this.bundleController = new BundleController({
+            getBrokerId: () => this.brokerController?.brokerConnectionId,
+            sendToast: (toast) => this.sendToast(toast),
+            requestUpdate: () => this.requestUpdate(),
+            getOriginalFileName: () => this.rolodexRootPath || 'openapi'
+        });
+        // Initialize workspace view after GitHub controller is created
+        this.workspaceController.initializeView(this.githubController);
+        this.globalTaskView = new GlobalTaskView();
+        //this.globalTaskView.mockMode = true; // Enable mock mode for demo
+        this.globalTaskView.setController(this.globalTaskController);
+        // Initialize the controller immediately for mock mode
+        //this.globalTaskController.enableMockMode();
         this.settingsComponent = new DoctorSettings();
         this.editorMap = new Map();
         this.editorMap.set("spec", this.editor);
         this.editorMap.set("ruleset-editor", this.rulesetEditor);
+        this.editorMap.set("diff-editor", this.changeDiffEditor);
         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.autoDiagnose = true;
+        this.autoDiagnose = false;
         this.skipTimeline = false;
-        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.modelTree = new ModelTree();
+        this.rolodexTree = new ModelTree();
         this.rolodexActiveHash = "";
-        this.explorer = new ExplorerComponent();
-        this.renderedNode = new RenderedNodeComponent();
+        this.explorer = new ExplorerComponent(this);
+        this.modelController.renderedNodeComponent = new RenderedNodeComponent();
         this.references = [];
         this.minimapVisible = true;
         this.minimapIconVisible = true;
         this.showDiagnosisButton = false;
+        this.workspaceReadOnly = false;
+        this.viewingHistoricalViolations = false;
+        // Initialize view state manager
+        this.viewStateManager = new ViewStateManager({
+            getExplorerVisible: () => this.explorerVisible,
+            setExplorerVisible: (v) => { this.explorerVisible = v; },
+            getMinimapIconVisible: () => this.minimapIconVisible,
+            setMinimapIconVisible: (v) => { this.minimapIconVisible = v; },
+            getShowDiagnosisButton: () => this.showDiagnosisButton,
+            setShowDiagnosisButton: (v) => { this.showDiagnosisButton = v; },
+            getExplorerBooted: () => this.explorerBooted,
+            setExplorerBooted: (v) => { this.explorerBooted = v; },
+            getAutoDiagnose: () => this.autoDiagnose,
+            getPendingLine: () => this.pendingLine,
+            setPendingLine: (v) => { this.pendingLine = v; },
+            getActiveNode: () => this.modelController.activeNode,
+            hasGraphNodes: () => (this.explorer.graphResponse?.nodes?.length ?? 0) > 0,
+            isNodeCurrentlyVisible: (id) => this.explorer.isNodeCurrentlyVisible(id),
+            revealPathToNode: (id) => this.explorer.revealPathToNode(id),
+            buildGraph: () => this.explorer.buildGraph(),
+            moveToNode: (node) => this.explorer.moveToNode(node),
+            centerOnRoot: () => this.explorer.centerOnRoot(),
+            setEditorPosition: (line, col) => this.editor.editor?.setPosition({ lineNumber: line, column: col }),
+            revealLineInCenter: (line) => this.editor.editor?.revealLineInCenter(line),
+            setWorkspaceViewActive: (active) => { this.workspaceController.workspaceView.active = active; },
+            sendToast: (toast) => this.sendToast(toast),
+            requestUpdate: () => this.requestUpdate()
+        });
+        // Initialize panel divider manager
+        this.panelDividerManager = new PanelDividerManager({
+            getPanelStateBag: () => this.panelStateBag,
+            getPanelStateBagKey: () => PanelStateBag,
+            getSplitPanel: () => this.splitPanel,
+            getSplitDivider: () => this.splitDivider,
+            getSplitPanelInspector: () => this.splitPanelInspector,
+            getSplitPanelExplorer: () => this.splitPanelExplorer,
+            getRolodexDividerPosition: () => this.rolodexDividerPosition,
+            setRolodexDividerPosition: (pos) => { this.rolodexDividerPosition = pos; },
+            setSidebarClosed: (closed) => { this.sidebarClosed = closed; }
+        });
+        // TODO: come back and check this.
         this.nodeLimit = 150;
         // session call back for when we're online.
         const sessionCallback = (session) => {
@@ -204,6 +313,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                 this.creditTicker.credits = session.creditsRemaining;
             }
             this.creditTicker.visible = true;
+            this.statusBar.callsRemaining = session.creditsRemaining;
             this.brokerController.connectToBroker();
             // if the session is authenticated, then fetch a list of workspaces for the user.
             if (this.authController.authenticated) {
@@ -212,71 +322,76 @@ let TheDoctor = class TheDoctor extends LitElement {
             // update workspace view to reflect new credit balance
             this.workspaceController.workspaceView.requestUpdate();
         };
-        // create auth controller
+        // boot state.
+        // STRIPPED FOR PERF TESTING - this loads from IndexedDB and renders graph
+        this.bagManager.loadStatefulBags().then(() => {
+            this.stateController.loadState();
+            this.loadMinimapState();
+        });
+        // create auth controller & listen for auth state changes.
         this.authController = new AuthController(this, sessionCallback, true);
         this.authController.start();
-        // listen for auth state changes.
-        //@ts-ignore
-        this.addEventListener(EditorUpdated, this.specController.specChanged.bind(this.specController));
-        //@ts-ignore
-        this.addEventListener(EditorClicked, this.specController.specClicked.bind(this.specController));
-        //@ts-ignore
-        this.addEventListener(ProblemClicked, this.problemController.problemClicked.bind(this.problemController));
-        // @ts-ignore
-        this.addEventListener(OpenProblemDrawer, this.docsController.ruleDocsClicked.bind(this.docsController));
-        // @ts-ignore
-        this.addEventListener(RuleViolationClicked, this.ruleController.ruleGroupClicked.bind(this.ruleController));
-        // @ts-ignore
-        this.addEventListener(CustomRulesetEnabled, this.ruleController.customRulesetEnabled.bind(this.ruleController));
-        // @ts-ignore
-        this.addEventListener(RulesetSaved, this.ruleController.rulesetSaved.bind(this.ruleController));
-        // @ts-ignore
-        this.addEventListener(AddToast, this.addToastEvent);
-        // @ts-ignore
-        this.addEventListener(CreditStreamUpdated, this.creditStreamUpdated.bind(this));
-        this.addEventListener(ExportRuleset, this.exportRuleset);
-        // @ts-ignore
-        this.addEventListener(RuleClicked, this.ruleController.ruleClicked.bind(this.ruleController));
-        // @ts-ignore
-        this.addEventListener(BuiltInRulesetChanged, this.builtInRulesetSelected);
-        // @ts-ignore
-        this.addEventListener(ModelTreeNodeClicked, this.nodeClickerController.modelTreeNodeClicked.bind(this.nodeClickerController));
-        // @ts-ignore
-        this.addEventListener(RolodexTreeNodeClicked, this.nodeClickerController.rolodexTreeNodeClicked.bind(this.nodeClickerController));
-        // @ts-ignore
-        this.addEventListener(NodeReferenceClicked, this.nodeClickerController.explorerReferenceClicked.bind(this.nodeClickerController));
-        // @ts-ignore
-        this.addEventListener(ExplorerNodeClicked, this.nodeClickerController.explorerNodeClicked.bind(this.nodeClickerController));
-        // @ts-ignore
-        this.addEventListener(DocumentReferenceClicked, this.nodeClickerController.documentReferenceClicked.bind(this.nodeClickerController));
-        // @ts-ignore
-        this.addEventListener(RolodexRootFileSelected, this.rolodexController.rolodexRootFileSelected.bind(this.rolodexController));
-        // @ts-ignore
-        this.addEventListener(ArchiveURLRequested, this.fetchUrl.bind(this));
-        //@ts-ignore
-        this.explorer.equalizer.addEventListener(ExplorerEqualizerChanged, this.filterTreeModel.bind(this));
-        //@ts-ignore
-        this.explorer.equalizer.addEventListener(ExplorerEqualizerFiltered, this.filterTreeModel.bind(this));
-        // @ts-ignore
-        this.nukeWorkspace.addEventListener(NukeWorkspaceEvent, this.nukeWorkspaceHandler.bind(this));
-        // on logout, nuke it all.
-        // @ts-ignore
-        this.authController.addEventListener(NukeWorkspaceEvent, this.nukeWorkspaceHandler.bind(this));
-        // @ts-ignore
-        this.authController.addEventListener(StartSessionFailed, this.platformUnavailable.bind(this));
-        this.timeVortex.historyPicker.addEventListener(OpenSettings, this.openSettings.bind(this));
-        // @ts-ignore
-        this.authController.addEventListener(CreditEmpty, this.creditEmpty.bind(this));
-        //@ts-ignore
-        this.addEventListener(LoadRenderedNodeIntoInspector, this.loadRenderedNodeIntoInspector.bind(this));
-        this.addEventListener(Reboot, this.reboot.bind(this));
-        // hijack navigation buttons.
-        window.addEventListener('popstate', (e) => {
+        // Register all event listeners with tracking for proper cleanup
+        // Note: using 'as EventListener' to handle CustomEvent handler types
+        this.addTrackedListener(this, EditorUpdated, this.specController.specChanged.bind(this.specController));
+        this.addTrackedListener(this, EditorUpdated, this.handleEditorUpdatedForBundle.bind(this));
+        this.addTrackedListener(this, EditorClicked, this.specController.specClicked.bind(this.specController));
+        this.addTrackedListener(this, ProblemClicked, this.problemController.problemClicked.bind(this.problemController));
+        this.addTrackedListener(this, OpenDrawer, this.docsController.handleDrawerRequest.bind(this.docsController));
+        this.addTrackedListener(this, DiagramRequested, this.diagramatronController.handleDiagramRequest.bind(this.diagramatronController));
+        this.addTrackedListener(this, RuleViolationClicked, this.ruleController.ruleGroupClicked.bind(this.ruleController));
+        this.addTrackedListener(this, CustomRulesetEnabled, this.ruleController.customRulesetEnabled.bind(this.ruleController));
+        this.addTrackedListener(this, RulesetSaved, this.ruleController.rulesetSaved.bind(this.ruleController));
+        this.addTrackedListener(this, AddToast, this.addToastEvent.bind(this));
+        this.addTrackedListener(this, CreditStreamUpdated, this.creditStreamUpdated.bind(this));
+        this.addTrackedListener(this, TimelineViolationsLoaded, this.handleTimelineViolationsLoaded.bind(this));
+        this.addTrackedListener(this, ExportRuleset, this.exportRuleset.bind(this));
+        this.addTrackedListener(this, RuleClicked, this.ruleController.ruleClicked.bind(this.ruleController));
+        this.addTrackedListener(this, BuiltInRulesetChanged, this.builtInRulesetSelected.bind(this));
+        this.addTrackedListener(this, ModelTreeNodeClicked, this.nodeClickerController.modelTreeNodeClicked.bind(this.nodeClickerController));
+        this.addTrackedListener(this, RolodexTreeNodeClicked, this.nodeClickerController.rolodexTreeNodeClicked.bind(this.nodeClickerController));
+        this.addTrackedListener(this, NodeReferenceClicked, this.nodeClickerController.explorerReferenceClicked.bind(this.nodeClickerController));
+        this.addTrackedListener(this, ExplorerNodeClicked, this.nodeClickerController.explorerNodeClicked.bind(this.nodeClickerController));
+        this.addTrackedListener(this, DocumentReferenceClicked, this.nodeClickerController.documentReferenceClicked.bind(this.nodeClickerController));
+        this.addTrackedListener(this, RolodexRootFileSelected, this.rolodexController.rolodexRootFileSelected.bind(this.rolodexController));
+        this.addTrackedListener(this, ArchiveURLRequested, this.fetchUrl.bind(this));
+        this.addTrackedListener(this.explorer.equalizer, ExplorerEqualizerChanged, this.filterTreeModel.bind(this));
+        this.addTrackedListener(this.explorer.equalizer, ExplorerEqualizerFiltered, this.filterTreeModel.bind(this));
+        this.addTrackedListener(this.explorer.equalizer, ExplorerPovModeExit, this.restoreFullTree.bind(this));
+        this.addTrackedListener(this.nukeWorkspace, NukeWorkspaceEvent, this.nukeWorkspaceHandler.bind(this));
+        this.addTrackedListener(this.authController, NukeWorkspaceEvent, this.nukeWorkspaceHandler.bind(this));
+        this.addTrackedListener(this.authController, StartSessionFailed, this.platformUnavailable.bind(this));
+        this.addTrackedListener(this.timeVortex.historyPicker, OpenSettings, this.openSettings.bind(this));
+        this.addTrackedListener(this.authController, CreditEmpty, this.creditEmpty.bind(this));
+        this.addTrackedListener(this, SocketDisconnected, this.socketDisconnected.bind(this));
+        this.addTrackedListener(this, LoadRenderedNodeIntoInspector, this.loadRenderedNodeIntoInspector.bind(this));
+        this.addTrackedListener(this, Reboot, this.reboot.bind(this));
+        this.addTrackedListener(this, ImportRequested, this.handleImportRequested.bind(this));
+        this.addTrackedListener(this, NukeRequested, this.handleNukeRequested.bind(this));
+        this.addTrackedListener(this, UrlOverlayDismissed, this.handleUrlOverlayDismissed.bind(this));
+        this.addTrackedListener(this, SidebarTabChanged, this.handleSidebarTabChanged.bind(this));
+        this.addTrackedListener(this, SidebarCollapseToggled, this.handleSidebarCollapseToggled.bind(this));
+        this.addTrackedListener(this, 'doctor-tools-compare', this.handleToolsCompare.bind(this));
+        this.addTrackedListener(this, NavigatorTabChanged, this.handleNavigatorTabChanged.bind(this));
+        this.addTrackedListener(this, NavigatorRolodexDividerChanged, this.handleNavigatorRolodexDivider.bind(this));
+        this.addTrackedListener(this, EditorTabChanged, this.handleEditorTabChanged.bind(this));
+        this.addTrackedListener(this, DiagnoseRequested, this.runDiagnostics.bind(this));
+        this.addTrackedListener(this, MinimapToggled, this.minimapToggled.bind(this));
+        this.addTrackedListener(this, SettingsRequested, this.openSettings.bind(this));
+        this.addTrackedListener(this, BundleRequested, this.handleBundleRequested.bind(this));
+        this.addTrackedListener(this, BundleDownloadRequested, this.handleBundleDownload.bind(this));
+        this.addTrackedListener(this, BundleCopyRequested, this.handleBundleCopy.bind(this));
+        // hijack navigation buttons - store reference for cleanup
+        this.popstateHandler = (e) => {
             const state = e.state;
             if (state) {
-                if (state.activeNode) {
+                if (state.activeNodeId || state.activeNode) {
+                    const nodeMap = this.modelController?.nodeMap ?? this.rolodexTree?.nodeMap;
+                    const resolvedId = state.activeNodeId
+                        ?? (state.activeNode && nodeMap ? resolveNodeIdFromHash(state.activeNode, nodeMap) : undefined);
                     this.nodeClickerController.modelTreeNodeClicked(new CustomEvent(ExplorerNodeClicked, {
                         detail: {
+                            nodeId: resolvedId,
                             nodeHashId: state.activeNode,
                             noState: true
                         }
@@ -291,11 +406,123 @@ let TheDoctor = class TheDoctor extends LitElement {
                     }));
                 }
             }
-        });
+        };
+        window.addEventListener('popstate', this.popstateHandler);
+    }
+    addTrackedListener(target, event, handler) {
+        this.eventManager.add(target, event, handler);
     }
     openSettings() {
         this.settingsComponent.open();
     }
+    handleImportRequested() {
+        this.uploadArchive.show();
+    }
+    handleNukeRequested() {
+        this.nukeWorkspace.show();
+    }
+    handleUrlOverlayDismissed() {
+        this.editor.toggleMinimap();
+    }
+    handleSidebarTabChanged(event) {
+        const tabName = event.detail.name;
+        this.selectControlTab(new CustomEvent('sl-tab-show', {
+            detail: { name: tabName }
+        }));
+        // Update view name for screen reader announcement
+        const viewNames = {
+            'overview': 'Problems Overview',
+            'viewer': 'Objects',
+            'problems': 'Problems',
+            'tools': 'Tools',
+            'ruleset': 'Rules',
+            'feedback': 'Feedback'
+        };
+        this.currentViewName = viewNames[tabName] || tabName;
+        this.managePanelFocus(this.sidebarPanel, tabName);
+    }
+    openSidebar() {
+        if (this.sidebarClosed && this.sidebarPanel) {
+            this.sidebarPanel.collapsed = false;
+            this.handleSidebarCollapseToggled(new CustomEvent('', {
+                detail: { collapsed: false }
+            }));
+        }
+    }
+    markEditorTabLoaded(tabName) {
+        this.tabCache.markEditorTabLoaded(tabName);
+    }
+    managePanelFocus(panelHost, tabName) {
+        this.updateComplete.then(() => {
+            const panel = panelHost?.shadowRoot?.querySelector(`sl-tab-panel[name="${tabName}"]`);
+            if (panel) {
+                panel.setAttribute('tabindex', '-1');
+                panel.focus({ preventScroll: true });
+            }
+        });
+    }
+    handleSidebarCollapseToggled(event) {
+        this.panelDividerManager.handleSidebarCollapseToggled(event.detail.collapsed);
+    }
+    handleNavigatorTabChanged(event) {
+        this.selectEditorTab(new CustomEvent('sl-tab-show', {
+            detail: { name: event.detail.name }
+        }));
+    }
+    handleNavigatorRolodexDivider(event) {
+        this.panelDividerManager.handleRolodexDividerChanged(event.detail.position);
+    }
+    handleEditorTabChanged(event) {
+        const tabName = event.detail.name;
+        this.selectedEditorTab = tabName;
+        this.tabCache.markEditorTabLoaded(tabName);
+        // Update view name for screen reader announcement
+        const viewNames = {
+            'spec': 'Specification Editor',
+            'explorer': 'Explorer',
+            'tardis': 'Timeline',
+            'workspaces': 'Workspaces'
+        };
+        this.currentViewName = viewNames[tabName] || tabName;
+        this.managePanelFocus(this.editorPanel, tabName);
+        if (this.viewingHistoricalViolations &&
+            (tabName === 'spec' || tabName === 'explorer')) {
+            this.timelineController.restoreLiveViolations();
+            this.navigatorPanel?.showTab('model-tree');
+        }
+        switch (tabName) {
+            case 'spec':
+                this.closeExplorer();
+                this.enableDiagnosisButton();
+                break;
+            case 'explorer':
+                this.toggleExplorer();
+                this.hideDiagnosisButton();
+                break;
+            case 'workspaces':
+                this.toggleExplorer();
+                this.hideDiagnosisButton();
+                this.workspaceController.workspaceView.active = true;
+                break;
+            case 'tardis':
+                this.showHistory();
+                this.hideDiagnosisButton();
+                this.ensureTardisControlInitialized();
+                break;
+            case 'ruleset':
+                this.closeExplorer();
+                this.hideDiagnosisButton();
+                if (this.rulesetPulse) {
+                    this.rulesetPulse = false;
+                }
+                this.controlTabs.showTab(ActiveView.Ruleset);
+                break;
+            case 'docs':
+                this.hideMinimapIcon();
+                this.hideDiagnosisButton();
+                break;
+        }
+    }
     settingsChanged(_, config) {
         if (config) {
             this.autoDiagnose = config.autoDiagnose;
@@ -322,12 +549,22 @@ let TheDoctor = class TheDoctor extends LitElement {
     loadRenderedNodeIntoInspector(evt) {
         const rn = new RenderedNodeComponent();
         rn.node = evt.detail.renderedNode;
-        this.renderedNode = rn;
+        this.modelController.renderedNodeComponent = rn;
         this.requestUpdate();
-        this.viewerPanel.click();
+        this.sidebarPanel?.showTab('viewer');
     }
     nukeWorkspaceHandler(e) {
-        this.bagManager.resetBags();
+        // Only reset workspace/document-specific state, preserve user-level state
+        // (GitHub installations, rulesets, functions, documentation, settings, UI preferences)
+        this.docBag?.reset();
+        this.problemBag?.reset();
+        this.diagnosticBag?.reset();
+        this.graphBag?.reset();
+        this.rolodexResponseBag?.reset();
+        this.rolodexFilesBag?.reset();
+        this.rolodexStateBag?.reset();
+        this.referenceMapBag?.reset();
+        this.docExpirationBag?.reset();
         localStorage.removeItem("pb33f-doctor-version");
         if (!e || !e.detail || e.detail.resetFiles) {
             ModelService.resetWorkspace().then(() => {
@@ -343,16 +580,112 @@ let TheDoctor = class TheDoctor extends LitElement {
     }
     minimapToggled() {
         this.minimapVisible = !this.minimapVisible;
-        this.editor.toggleMinimap();
-        this.rulesetEditor.toggleMinimap();
+        this.applyMinimapState();
+        this.saveMinimapState();
+    }
+    saveMinimapState() {
+        if (!this.panelStateBag || !this.panelStateBag.db)
+            return;
+        const panelState = this.panelStateBag.get(PanelStateBag) || {};
+        panelState.minimapVisible = this.minimapVisible;
+        this.panelStateBag.set(PanelStateBag, panelState);
+    }
+    loadMinimapState() {
+        if (!this.panelStateBag)
+            return;
+        const panelState = this.panelStateBag.get(PanelStateBag);
+        if (panelState && panelState.minimapVisible !== undefined) {
+            this.minimapVisible = panelState.minimapVisible;
+        }
     }
-    firstUpdated() {
+    applyMinimapState() {
+        if (this.editor?.editor) {
+            this.editor.minimapVisible = this.minimapVisible;
+            this.editor.editor.updateOptions({ minimap: { enabled: this.minimapVisible } });
+        }
+        if (this.rulesetEditor?.editor) {
+            this.rulesetEditor.minimapVisible = this.minimapVisible;
+            this.rulesetEditor.editor.updateOptions({ minimap: { enabled: this.minimapVisible } });
+        }
+    }
+    async firstUpdated() {
         // https://github.com/microsoft/monaco-editor/issues/3409
+        // Query for the light DOM Monaco editors
         this.editor = this.querySelector('pb33f-editor#spec-editor');
         this.rulesetEditor = this.querySelector('pb33f-editor#ruleset-editor');
+        this.changeDiffEditor = this.querySelector('pb33f-editor#diff-editor');
+        this.toolsEditor = this.querySelector('pb33f-editor#tools-editor');
+        // Apply minimap state after editors are ready
+        setTimeout(() => this.applyMinimapState(), 150);
+        if (this.toolsEditor) {
+            this.toolsEditor.minimapVisible = false;
+            setTimeout(() => {
+                this.toolsEditor.editor?.updateOptions({
+                    minimap: { enabled: false },
+                    overviewRulerLanes: 0,
+                    hideCursorInOverviewRuler: true,
+                    overviewRulerBorder: false,
+                    scrollbar: {
+                        vertical: 'auto',
+                        verticalScrollbarSize: 8
+                    }
+                });
+            }, 100);
+            this.toolsEditorListener = (e) => {
+                const event = e;
+                if (event.detail.id === 'tools-editor') {
+                    this.toolsEditorHasContent = event.detail.content?.trim().length > 0;
+                }
+            };
+            this.toolsEditor.addEventListener(EditorUpdated, this.toolsEditorListener);
+        }
+        // Wait for the tardis-control custom element to be defined
+        await customElements.whenDefined('pb33f-tardis-control');
+        // Use ref to get the tardis control component and set up references
+        requestAnimationFrame(() => {
+            const tardisControl = this.tardisControlRef.value;
+            if (tardisControl) {
+                // Set the diff editor reference
+                tardisControl.diffEditor = this.changeDiffEditor;
+                // Register with time vortex - it will store the reference
+                this.timeVortex.setTardisControl(tardisControl);
+                // Don't fetch history here - wait until doctor is fully booted
+            }
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.nodeClickerController?.destroy();
+        this.panelDividerManager?.destroy();
+        this.specController?.destroy();
+        this.ruleController?.destroy();
+        this.githubController?.destroy();
+        this.brokerController?.destroy();
+        this.globalTaskController?.destroy();
+        this.timelineController?.destroy();
+        if (this.toolsEditor && this.toolsEditorListener) {
+            this.toolsEditor.removeEventListener(EditorUpdated, this.toolsEditorListener);
+        }
+        this.ruleDocsWorker?.terminate();
+        this.ruleDocsWorker = undefined;
+        // Clean up all tracked event listeners
+        this.eventManager.removeAll();
+        // Clean up window popstate listener
+        if (this.popstateHandler) {
+            window.removeEventListener('popstate', this.popstateHandler);
+            this.popstateHandler = undefined;
+        }
+    }
+    setupDrawerHandlers() {
+        const registry = DrawerContentRegistry.getInstance();
+        registry.registerHandler(new DocumentationHandler());
+        registry.registerHandler(new HowToFixHandler());
+        registry.registerHandler(new ExampleHandler());
+        registry.registerHandler(new MarkdownHandler());
+        registry.registerHandler(new DiagramHandler());
     }
     addClickTrack(node) {
-        history.pushState({ activeNode: node.idHash }, "", `?view=explore&node=${node.idHash}`);
+        history.pushState({ activeNodeId: node.id, activeNode: node.idHash }, "", `?view=explore&node=${node.idHash}`);
     }
     addRefTrack(ref) {
         history.pushState({ ref: ref }, "", `?view=spec&ref=${ref}`);
@@ -362,8 +695,12 @@ let TheDoctor = class TheDoctor extends LitElement {
         event.detail.graph.nodes.forEach((node) => {
             this.filteredNodes.set(node.id, node);
         });
-        this.modelTree.filteredNodes = this.filteredNodes;
-        this.modelTree.renderedNodes = this.renderedNodeMap;
+        this.modelTree.nodeMap = this.filteredNodes;
+        this.modelTree.violationMap = this.modelController.violationMap;
+    }
+    restoreFullTree() {
+        this.modelTree.nodeMap = this.modelController.nodeMap;
+        this.modelTree.violationMap = this.modelController.violationMap;
     }
     exportRuleset() {
         this.exportRulesetDialog.show();
@@ -376,46 +713,19 @@ let TheDoctor = class TheDoctor extends LitElement {
         if (this.authController?.session) {
             this.authController.session.creditsRemaining = event.detail.credits;
         }
+        // Sync status bar credits
+        this.statusBar.callsRemaining = event.detail.credits;
         // Trigger workspace view update directly
         this.workspaceController.workspaceView.requestUpdate();
     }
     sendToast(toast) {
         this.toastManager.addToastManually(toast);
     }
-    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;
-    }
+    updateInspectorDivider() { this.panelDividerManager.updateInspectorDivider(); }
+    updateExplorerDivider() { this.panelDividerManager.updateExplorerDivider(); }
     updateRefmapBag(currentPath, result) {
         let refMap = this.referenceMapBag?.get(ReferenceMapBag);
-        let cp = currentPath;
+        let cp = currentPath ?? "";
         if (refMap) {
             refMap.references[cp] = result;
         }
@@ -429,6 +739,33 @@ let TheDoctor = class TheDoctor extends LitElement {
     creditEmpty(e) {
         this.platformUnavailable(e.detail.error);
     }
+    socketDisconnected(event) {
+        // Hide loading overlay immediately
+        this.loadingOverlay?.hide();
+        this.activitySpinner?.hide();
+        // Extract error message from socket error
+        const frame = event.detail?.frame;
+        const errorMessage = frame?.body || frame?.headers?.message || 'Socket connection terminated unexpectedly';
+        // Show error toast with socket message
+        const toast = {
+            id: 'socket-error-' + Date.now(),
+            title: 'Connection Lost',
+            type: ToastType.ERROR,
+            body: errorMessage
+        };
+        this.sendToast(toast);
+        // Shut down UI completely for IP blocking errors
+        const platformError = {
+            detail: errorMessage,
+            instance: 'websocket-connection',
+            status: 403,
+            title: 'Connection Blocked',
+            type: 'socket-error',
+            body: frame
+        };
+        this.platformUnavailable(platformError);
+        console.warn('🛑 Socket disconnected with error:', errorMessage);
+    }
     platformUnavailable(error) {
         if (!this.unavailable) {
             this.loadingOverlay?.hide();
@@ -446,32 +783,94 @@ let TheDoctor = class TheDoctor extends LitElement {
             this.errorBanner.visible = true;
             this.unavailable = true;
             this.problemsOverview.unavailable = true;
-            this.controlTabGroup.show(ActiveView.Overview);
+            this.controlTabs.showTab(ActiveView.Overview);
         }
     }
     builtInRulesetSelected() {
         // todo
     }
     runDiagnostics() {
+        if (this.workspaceReadOnly) {
+            this.sendToast({
+                id: crypto.randomUUID(),
+                type: ToastType.WARNING,
+                title: "Read-only workspace",
+                body: "This workspace is attached to a github repo, it can't be edited here yet."
+            });
+            return;
+        }
         if (!this.autoDiagnose) {
+            this.editorDirty = false;
             this.diagnosticController.lintSpec(this.editor.getValue());
         }
     }
+    async handleBundleRequested() {
+        this.bundleLoading = true;
+        this.modelController.captureOriginalGraph();
+        await this.bundleController.bundleSpec();
+        this.bundleLoading = false;
+        this.isBundled = this.bundleController.isBundled;
+        this.modelTree.isBundled = this.isBundled;
+        const bundleResponse = this.bundleController.getBundleResponse();
+        if (bundleResponse?.graph) {
+            this.modelController.extractGraph(bundleResponse.graph);
+        }
+    }
+    handleBundleDownload() {
+        this.bundleController.downloadBundledSpec();
+    }
+    handleBundleCopy() {
+        this.bundleController.copyToClipboard();
+    }
+    handleEditorUpdatedForBundle(event) {
+        if (event.detail.id === 'spec' && this.isBundled) {
+            this.bundleController.reset();
+            this.isBundled = false;
+            this.modelTree.isBundled = false;
+        }
+    }
     reboot() {
+        if (this.isRebooting)
+            return;
+        this.isRebooting = true;
         // for when we need to switch workspaces, and everything needs an update.
+        // Clear all rolodex-related state to prevent stale paths from causing 404s
+        this.rolodexActivePath = "";
+        this.rolodexActiveHash = "";
+        this.rolodexRootPath = "";
+        this.rolodexRootHash = "";
+        this.rolodexProblemMap.clear();
+        this.rolodexFilesBag?.reset();
+        this.rolodexStateBag?.reset();
+        this.rolodexResponseBag?.reset();
+        this.referenceMapBag?.reset();
+        this.editor.clearDecorations();
+        this.editor.clearAllMarkers();
+        // Re-initialize GitHub controller to restore cached state to UI
+        this.githubController.reinitialize();
         ModelService.getCurrentSpec().then((result) => {
             this.rolodexController.queryRolodex();
-            this.timeVortex.checkHistory();
+            this.timeVortex.getHistorySummary();
             this.editor.setValue(result, true);
-            this.rolodexActivePath = "";
             this.specController.specChanged(new CustomEvent(EditorUpdated, {
                 detail: {
                     content: result,
                     id: "spec"
                 }
             }));
+            // lintSpec must run BEFORE setting read-only, otherwise Monaco won't render markers
+            this.diagnosticController.lintSpec(result);
+            this.updateWorkspaceReadOnlyState();
+        }).finally(() => {
+            this.isRebooting = false;
         });
     }
+    updateWorkspaceReadOnlyState() {
+        this.workspaceReadOnly = this.workspaceController.activeWorkspace?.readOnly ?? false;
+        if (this.editor) {
+            this.editor.setReadOnly(this.workspaceReadOnly);
+        }
+    }
     boostrap() {
         // if the url is set in the query string, fetch it and run a lint with the URL
         const url = new URL(window.location.href);
@@ -482,40 +881,51 @@ let TheDoctor = class TheDoctor extends LitElement {
             this.diagnosticController.lintSpec('', urlParam);
             return;
         }
-        // todo: this needs work man. I want to see all these settimeouts gone brother.
-        setTimeout(() => {
-            // check for a history
-            this.timeVortex.doctor = this;
-            this.timeVortex.checkHistory();
-            const editorValue = this.docBag?.get(DefaultDocument);
-            if (!editorValue) {
-                LintingService.bootstrapEditor().then((result) => {
-                    this.loadingOverlay.hide();
+        const editorValue = this.docBag?.get(DefaultDocument);
+        if (!editorValue) {
+            LintingService.bootstrapEditor().then((result) => {
+                this.loadingOverlay.hide();
+                this.editor.setValue(result, true);
+                this.rolodexActivePath = "";
+                this.specController.specChanged(new CustomEvent(EditorUpdated, {
+                    detail: {
+                        content: result,
+                        id: "spec"
+                    }
+                }));
+                this.diagnosticController.lintSpec(result);
+            });
+        }
+        else {
+            ModelService.getCurrentSpec().then((result) => {
+                this.loadingOverlay.hide();
+                if (result != editorValue) {
                     this.editor.setValue(result, true);
-                    this.rolodexActivePath = "";
-                    this.specController.specChanged(new CustomEvent(EditorUpdated, {
-                        detail: {
-                            content: result,
-                            id: "spec"
-                        }
-                    }));
-                });
-            }
-            else {
-                ModelService.getCurrentSpec().then((result) => {
-                    this.loadingOverlay.hide();
-                    this.rolodexController.queryRolodex();
-                    if (result != editorValue) {
-                        this.editor.setValue(result, true);
-                        this.rolodexActivePath = "";
-                        this.specController.specChanged(new CustomEvent(EditorUpdated, {
-                            detail: {
-                                content: result,
-                                id: "spec"
-                            }
-                        }));
+                }
+                this.rolodexActivePath = "";
+                this.rolodexController.queryRolodex();
+                this.specController.specChanged(new CustomEvent(EditorUpdated, {
+                    detail: {
+                        content: result,
+                        id: "spec"
                     }
+                }));
+                this.diagnosticController.lintSpec(result);
+            }).catch(() => {
+                this.loadingOverlay.hide();
+                this.sendToast({
+                    id: crypto.randomUUID(),
+                    type: ToastType.WARNING,
+                    body: "Could not fetch latest specification, session must have expired.",
+                    title: "Session reset warning"
                 });
+            });
+        }
+        this.loadingOverlay.hide();
+        setTimeout(() => {
+            this.timeVortex.getHistorySummary();
+            if (this.timeVortex.tardisControl) {
+                this.timeVortex.tardisControl.fetchHistory();
             }
         }, 50);
     }
@@ -529,22 +939,57 @@ let TheDoctor = class TheDoctor extends LitElement {
                 break;
         }
     }
-    closeWelcome() {
-        this.welcomeBox.hide();
-        localStorage.setItem("pb33f-doctor-welcome", "closed");
+    handleTimelineViolationsLoaded(evt) {
+        const { violations, statistics } = evt.detail;
+        this.problemList.problems = violations;
+        this.problems = violations;
+        if (this.changeDiffEditor) {
+            this.changeDiffEditor.setMarkers(violations);
+        }
+        this.problemsOverview.statistics = statistics.statistics;
+        this.problemsOverview.problems = this.problemList.problemItems;
+        this.viewingHistoricalViolations = true;
     }
     selectEditorTab(event) {
         this.selectedEditorTab = event.detail.name;
+        this.tabCache.markEditorTabLoaded(event.detail.name);
+        if (this.viewingHistoricalViolations &&
+            (event.detail.name === 'spec' || event.detail.name === 'explorer')) {
+            this.timelineController.restoreLiveViolations();
+            this.navigatorPanel?.showTab('model-tree');
+        }
+        if (event.detail.name === 'explorer') {
+            this.explorerVisible = true;
+        }
+        else {
+            this.explorerVisible = false;
+        }
         switch (event.detail.name) {
             case ActiveView.Ruleset:
                 if (this.rulesetPulse) {
                     this.rulesetPulse = false;
                 }
-                this.controlTabGroup.show(ActiveView.Ruleset);
+                this.controlTabs.showTab(ActiveView.Ruleset);
+                break;
+            case ActiveView.Tardis:
+                this.ensureTardisControlInitialized();
                 break;
         }
     }
+    ensureTardisControlInitialized() {
+        if (this.timeVortex.tardisControl)
+            return;
+        this.updateComplete.then(() => {
+            const tardisControl = this.tardisControlRef.value;
+            if (tardisControl && !this.timeVortex.tardisControl) {
+                tardisControl.diffEditor = this.changeDiffEditor;
+                this.timeVortex.setTardisControl(tardisControl);
+                tardisControl.fetchHistory();
+            }
+        });
+    }
     selectControlTab(event) {
+        this.tabCache.markControlTabLoaded(event.detail.name);
         switch (event.detail.name) {
             case ActiveView.Problems:
             case ActiveView.Overview:
@@ -555,91 +1000,227 @@ let TheDoctor = class TheDoctor extends LitElement {
                 break;
             case ActiveView.Ruleset:
                 if (this.selectedEditorTab != ActiveView.Ruleset) {
-                    this.editorTabGroup.show(ActiveView.Ruleset);
+                    this.editorPanel?.showTab(ActiveView.Ruleset);
                     this.selectedEditorTab = ActiveView.Ruleset;
                 }
                 break;
         }
     }
-    toggleSidebar() {
-        const splitPanel = this.shadowRoot?.querySelector('sl-split-panel.split-panel');
-        if (!this.sidebarClosed) {
-            if (splitPanel) {
-                this.collapseButton.name = "chevron-bar-left";
-                this.problemsDataDiv.style.display = "none";
-                splitPanel.style.setProperty('--min', '40px');
-                splitPanel.style.setProperty('--max', 'calc(100vw - 40px)');
-                splitPanel.position = 99;
-                splitPanel.disabled = true;
-                this.splitDivider.style.display = "none";
-                this.activitySpinner.classList.add('spinner-draw-closed');
-            }
+    async handleToolsCompare() {
+        if (!this.toolsEditor || this.toolsCompareLoading) {
+            return;
         }
-        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');
-            }
+        const specContent = this.toolsEditor.getValue();
+        this.toolsCompareLoading = true;
+        try {
+            await this.timelineController.toolsCompare(specContent);
+        }
+        finally {
+            this.toolsCompareLoading = false;
         }
-        this.sidebarClosed = !this.sidebarClosed;
     }
-    showHistory() {
-        this.closeExplorer();
-        this.hideMinimapIcon();
-        this.requestUpdate();
+    showHistory() { this.viewStateManager.showHistory(); }
+    toggleExplorer() { this.viewStateManager.toggleExplorer(); }
+    hideMinimapIcon() { this.viewStateManager.hideMinimapIcon(); }
+    hideDiagnosisButton() { this.viewStateManager.hideDiagnosisButton(); }
+    enableDiagnosisButton() { this.viewStateManager.enableDiagnosisButton(); }
+    showMinimapIcon() { this.viewStateManager.showMinimapIcon(); }
+    closeExplorer() { this.viewStateManager.closeExplorer(); }
+    // DoctorContext interface implementation
+    get activity() {
+        return this.activitySpinner;
+    }
+    createEditorOps(editor) {
+        return {
+            setValue: (value, fireEvent) => editor.setValue(value, fireEvent),
+            getValue: () => editor.getValue(),
+            setMarkers: (problems) => editor.setMarkers(problems),
+            clearAllMarkers: () => editor.clearAllMarkers(),
+            setReadOnly: (readOnly) => editor.setReadOnly(readOnly),
+            revealLineInCenter: (line) => editor.editor?.revealLineInCenter(line),
+            toggleMinimap: () => editor.toggleMinimap(),
+            clearDecorations: () => editor.clearDecorations(),
+            applyLinkDecorations: () => editor.applyLinkDecorations(),
+            switchLanguage: (language) => editor.switchLanguage(language),
+            get links() { return editor.links; },
+            set links(value) { editor.links = value; },
+            get breadcumb() { return editor.breadcumb; }
+        };
     }
-    toggleExplorer() {
-        this.explorerVisible = !this.explorerVisible;
-        if (this.explorerVisible && this.activeNode) {
-            this.explorer.moveToNode(this.activeNode);
+    get editorHost() {
+        if (!this._editorHost) {
+            this._editorHost = {
+                getEditor: this._getEditorOps.bind(this),
+                getDefaultEditor: this._getDefaultEditorOps.bind(this)
+            };
         }
-        this.hideMinimapIcon();
-        this.showDiagnosisButton = false;
-        this.explorerBooted = true;
-        // check if ths is safari and fire a warning toast!
-        const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-        if (isSafari) {
-            this.sendToast({
-                id: crypto.randomUUID(),
-                type: ToastType.WARNING,
-                body: "Safari is not supported by the explorer. Please use Chrome, Firefox or Edge. As you can see the icons are all messed up.",
-                title: "Safari Warning"
-            });
+        return this._editorHost;
+    }
+    _getEditorOps(id) {
+        const editorKey = id ?? 'default';
+        const cached = this._editorOpsCache.get(editorKey);
+        if (cached)
+            return cached;
+        const editor = id ? this.editorMap.get(id) : this.editor;
+        if (!editor)
+            return undefined;
+        const ops = this.createEditorOps(editor);
+        if (this._editorOpsCache.size >= 10) {
+            const firstKey = this._editorOpsCache.keys().next().value;
+            if (firstKey)
+                this._editorOpsCache.delete(firstKey);
         }
-        this.workspaceController.workspaceView.active = false;
+        this._editorOpsCache.set(editorKey, ops);
+        return ops;
     }
-    hideMinimapIcon() {
-        this.minimapIconVisible = false;
+    _getDefaultEditorOps() {
+        return this._getEditorOps();
     }
-    hideDiagnosisButton() {
-        this.showDiagnosisButton = false;
-        this.workspaceController.workspaceView.active = false;
+    get controlTabs() {
+        if (!this._controlTabs) {
+            this._controlTabs = {
+                showTab: this._showControlTab.bind(this),
+                getSelectedTab: this._getSelectedControlTab.bind(this)
+            };
+        }
+        return this._controlTabs;
     }
-    enableDiagnosisButton() {
-        if (!this.autoDiagnose) {
-            this.showDiagnosisButton = true;
+    _showControlTab(panel) {
+        this.sidebarPanel?.showTab(panel);
+    }
+    _getSelectedControlTab() {
+        const activeTab = this.sidebarPanel?.tabGroup?.querySelector('sl-tab[active]');
+        return activeTab?.getAttribute('panel') ?? '';
+    }
+    get editorTabs() {
+        if (!this._editorTabs) {
+            this._editorTabs = {
+                showTab: this._showEditorTab.bind(this),
+                getSelectedTab: this._getSelectedEditorTab.bind(this)
+            };
         }
+        return this._editorTabs;
     }
-    showMinimapIcon() {
-        this.minimapIconVisible = true;
+    _showEditorTab(panel) {
+        this.editorPanel?.showTab(panel);
     }
-    closeExplorer() {
-        this.explorerVisible = false;
-        this.showMinimapIcon();
-        this.showDiagnosisButton = true;
-        setTimeout(() => {
-            if (this.pendingLine > 0) {
-                this.editor.editor?.setPosition({ lineNumber: this.pendingLine, column: 1 });
-                this.editor.editor?.revealLineInCenter(this.pendingLine);
-                this.pendingLine = 0;
-            }
-        }, 20);
+    _getSelectedEditorTab() {
+        return this.selectedEditorTab;
+    }
+    get navigatorTabs() {
+        if (!this._navigatorTabs) {
+            this._navigatorTabs = {
+                showTab: this._showNavigatorTab.bind(this),
+                getSelectedTab: this._getSelectedNavigatorTab.bind(this)
+            };
+        }
+        return this._navigatorTabs;
+    }
+    _showNavigatorTab(panel) {
+        this.navigatorPanel?.showTab(panel);
+    }
+    _getSelectedNavigatorTab() {
+        return '';
+    }
+    get taskSubscription() {
+        if (!this._taskSubscription) {
+            this._taskSubscription = {
+                subscribeToTaskType: this._subscribeToTaskType.bind(this)
+            };
+        }
+        return this._taskSubscription;
+    }
+    _subscribeToTaskType(taskType, callback, actions) {
+        return this.globalTaskController.subscribeToTaskType(taskType, callback, actions);
+    }
+    getActiveWorkspaceId() {
+        return this.workspaceController?.activeWorkspace?.workspaceId;
+    }
+    get rolodex() {
+        if (!this._rolodexAccess) {
+            const self = this;
+            this._rolodexAccess = {
+                get activePath() { return self.rolodexActivePath; },
+                get activeHash() { return self.rolodexActiveHash; },
+                get rootPath() { return self.rolodexRootPath; },
+                get rootHash() { return self.rolodexRootHash; },
+                get needsReset() { return self.rolodexNeedsReset; },
+                set needsReset(value) { self.rolodexNeedsReset = value; }
+            };
+        }
+        return this._rolodexAccess;
+    }
+    get isAuthenticated() {
+        return this.authController?.authenticated ?? false;
+    }
+    get host() {
+        return this;
+    }
+    setViewingHistoricalViolations(viewing) {
+        this.viewingHistoricalViolations = viewing;
+    }
+    setProblems(problems) {
+        this.problems = problems;
+    }
+    lintSpec(spec, url) {
+        this.diagnosticController.lintSpec(spec, url);
+    }
+    setExplorerActiveNode(node) {
+        this.explorer.activeNode = node;
+        this.explorer.equalizer.activeNode = node;
+    }
+    setEditorDirty(dirty) {
+        this.editorDirty = dirty;
+    }
+    rulesetManuallyChanged() {
+        this.ruleController.rulesetManuallyChanged();
+    }
+    getSessionId() {
+        return this.authController?.session?.sessionId ?? '';
+    }
+    getBag(key) {
+        return this.bagManager?.getBag(key);
+    }
+    setBagValue(bagKey, valueKey, value) {
+        const bag = this.bagManager?.getBag(bagKey);
+        bag?.set(valueKey, value);
+    }
+    getBagValue(bagKey, valueKey) {
+        const bag = this.bagManager?.getBag(bagKey);
+        return bag?.get(valueKey);
+    }
+    getBrokerId() {
+        return this.brokerController?.brokerConnectionId ?? '';
+    }
+    get diagnosticEditor() {
+        return this.editor;
+    }
+    get diagnosticProblemList() {
+        return this.problemList;
+    }
+    get diagnosticProblemsOverview() {
+        return this.problemsOverview;
+    }
+    get diagnosticExplorer() {
+        return this.explorer;
+    }
+    get brokerConnectionId() {
+        return this.brokerController.brokerConnectionId;
+    }
+    buildRolodexResultMap(problems) {
+        return this.rolodexController.buildRolodexResultMap(problems);
+    }
+    queryRolodex(path) {
+        this.rolodexController.queryRolodex(path);
+    }
+    fetchRefMap(path) {
+        this.modelController.fetchRefMap(path);
+    }
+    extractGraph(graph) {
+        this.modelController.extractGraph(graph);
+    }
+    updateSpecProblems(problems) {
+        this.specController.updateProblems(problems);
     }
     render() {
         let overlay = html ``;
@@ -647,109 +1228,33 @@ let TheDoctor = class TheDoctor extends LitElement {
             overlay = html `
                 <div class="overlay" @click="return false"></div>`;
         }
-        let welcomeBox = html `
-            <pb33f-attention-box id="welcome" type="success"
-                                 headerText="Welcome to the clinic, I am the OpenAPI doctor." closeable>
-                This is an <strong>early preview</strong> of a new <a href="https://pb33f.io">pb33f</a> product,
-                built on top of our very own open source and free software.
-                If you find a bug, please let us know in the <strong>feedback</strong> tab. <br/><br/>
-                <a href="#" @click="${this.closeWelcome}">[Close this message]</a>
-            </pb33f-attention-box>`;
-        const welcomeClosed = localStorage.getItem("pb33f-doctor-welcome");
-        if (welcomeClosed) {
-            welcomeBox = html ``;
-        }
-        let rulesetPulsePill = html ``;
-        if (this.rulesetPulse) {
-            rulesetPulsePill = html `
-                <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"
-                                  @sl-tab-show="${this.selectControlTab}">
-                        <sl-tab slot="nav" panel="overview" class="tab" id="overviewPanel" active>Overview
-                        </sl-tab>
-                        <sl-tab slot="nav" panel="viewer" class="tab" id="viewerPanel">Objects</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-panel name="viewer" class="tab-panel">${this.renderedNode}</sl-tab-panel>
-                    </sl-tab-group>
-                </div>
-                <sl-icon-button class="collapse-side" name="chevron-bar-right"
-                                @click="${this.toggleSidebar}"></sl-icon-button>
-            </div>`;
-        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>`;
-        }
-        // if the timeVortex is on and the picker is visible, we need to wrap the model tree in a tab view.
-        if (this.timeVortex.pickerVisible) {
-            modelTree = html `
-                <sl-tab-group class="tab-group timevortex" @sl-tab-show="${this.selectEditorTab}">
-                    <sl-tab slot="nav" panel="model-tree" class="tab" id="model-tree">
-                        Document
-                    </sl-tab>
-                    <sl-tab slot="nav" panel="timeline" class="tab" id="timeline-view">
-                        Timeline
-                    </sl-tab>
-                    <sl-tab-panel name="model-tree" class="tab-panel model-tree-panel">
-                        ${modelTree}
-                    </sl-tab-panel>
-                    <sl-tab-panel name="timeline" class="tab-panel">
-                        ${this.timeVortex.historyPicker}
-                    </sl-tab-panel>
-                </sl-tab-group>
-            `;
-        }
-        const controls = html `
-            <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 class="nuke-session-button" name="radioactive" @click="${() => {
-            this.nukeWorkspace.show();
-        }}">
-                    </sl-icon-button>
-                </sl-tooltip>
-            </div>`;
-        let navigatorView = html `
-            ${controls}
-            ${modelTree}
-        `;
+        const mainPanelView = html `
+            <pb33f-doctor-sidebar-panel
+                slot="end"
+                role="complementary"
+                aria-label="Problems and diagnostics"
+                ?unavailable=${this.unavailable}
+                ?toolsCompareLoading=${this.toolsCompareLoading}
+                ?toolsEditorHasContent=${this.toolsEditorHasContent}>
+                <div slot="problems-overview" class="sidebar-slot-content">${this.problemsOverview}</div>
+                <div slot="problem-list" class="sidebar-slot-content">${this.tabCache.shouldRenderControlTab('problems') ? this.problemList : nothing}</div>
+                <div slot="tools-editor" class="sidebar-slot-content"><slot name="tools-editor"></slot></div>
+                <div slot="manage-ruleset" class="sidebar-slot-content">${this.tabCache.shouldRenderControlTab('ruleset') ? this.manageRuleset : nothing}</div>
+                <div slot="feedback" class="sidebar-slot-content">${this.tabCache.shouldRenderControlTab('feedback') ? this.feedback : nothing}</div>
+                <div slot="rendered-node" class="sidebar-slot-content">${this.tabCache.shouldRenderControlTab('viewer') ? this.modelController.renderedNodeComponent : nothing}</div>
+            </pb33f-doctor-sidebar-panel>`;
+        const rolodexVisible = this.rolodexTree.node && this.rolodexTree.node.nodes?.length > 0;
         if (this.authController.state && this.authController.state.authenticated) {
             this.statusBar.authenticated = true;
         }
         return html `
+            <div role="status" aria-live="polite" aria-atomic="true" class="sr-only">
+                ${this.currentViewName ? `Now viewing ${this.currentViewName}` : ''}
+            </div>
             ${this.uploadArchive}
             ${this.nukeWorkspace}
-            ${welcomeBox}
             ${this.toastManager}
+            ${this.globalTaskView}
             <sl-dialog open id="loading-overlay" class="dialog-overview"
                        style="--width: 30vw" no-header>
                 <h3 class="loading">OpenAPI Doctor is booting...</h3>
@@ -774,159 +1279,72 @@ let TheDoctor = class TheDoctor extends LitElement {
                 </div>
             </sl-dialog>
             <div class="doctor">
-                ${this.activitySpinner}
                 ${this.errorBanner}
                 ${overlay}
                 <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">
-                        ${navigatorView}
-                        ${this.creditTicker}
+                    <sl-icon id="split-divider-tree" slot="divider" name="grip-vertical" class="divider-vert" aria-hidden="true"></sl-icon>
+                    <div slot="start" class="model-tree" role="navigation" aria-label="Document navigation">
+                        <pb33f-doctor-navigator-panel
+                            ?importDisabled=${this.importDisabled}
+                            ?workspaceReadOnly=${this.workspaceReadOnly}
+                            ?timeVortexVisible=${this.timeVortex.pickerVisible}
+                            ?rolodexVisible=${rolodexVisible}
+                            .rolodexDividerPosition=${this.rolodexDividerPosition}>
+                            <pb33f-doctor-controls-panel slot="controls"
+                                ?importDisabled=${this.importDisabled}
+                                ?workspaceReadOnly=${this.workspaceReadOnly}>
+                            </pb33f-doctor-controls-panel>
+                            <div slot="model-tree" class="tree-slot-container">${this.modelTree}</div>
+                            ${rolodexVisible ? html `
+                                <pb33f-bundle-toolbar
+                                    slot="bundle-toolbar"
+                                    ?isBundled=${this.isBundled}
+                                    ?loading=${this.bundleLoading}>
+                                </pb33f-bundle-toolbar>
+                            ` : nothing}
+                            <div slot="rolodex-tree" class="tree-slot-container">${this.rolodexTree}</div>
+                            <div slot="history-picker">${this.timeVortex.historyPicker}</div>
+                            <div slot="credit-ticker">${this.creditTicker}</div>
+                        </pb33f-doctor-navigator-panel>
                     </div>
                     <div slot="end">
                         <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">
-
-                                ${this.settingsComponent}
-
-                                <sl-tooltip class="minimap-tip" content="Toggle source mini-map" hoist
-                                            style="${!this.minimapIconVisible ? 'display: none' : ''}">
-                                    <sl-icon-button @click="${this.minimapToggled}"
-                                                    name="map"
-                                                    class="minimap-toggle ${this.minimapVisible ? 'active' : ''}"
-                                                    style="${!this.minimapIconVisible ? 'display: none' : ''}"></sl-icon-button>
-                                </sl-tooltip>
-
-                                <sl-tooltip class="settings-tip" content="Open settings for the doctor" hoist>
-                                    <sl-icon-button @click="${() => {
-            this.settingsComponent.open();
-        }}"
-                                                    name="gear"
-                                                    class="settings-toggle ${!this.settingsComponent.opened ? 'active' : ''}"></sl-icon-button>
-                                </sl-tooltip>
-
-                                <sl-button class="diagnose-button" @click="${this.runDiagnostics}"
-                                           size="small"
-                                           style="${(this.autoDiagnose || !this.showDiagnosisButton) ? 'display: none' : ''}">
-                                    make diagnosis
-                                </sl-button>
-
-
-                                ${this.detailsDrawer}
-                                <sl-tab-group class="tab-group" @sl-tab-show="${this.selectEditorTab}"
-                                              id="editor-controls">
-
-                                    <sl-tab slot="nav" panel="workspaces" class="tab ${!this.authController.authenticated ? 'hidden' : ''}" id="workspaces"
-                                            @click="${() => {
-            this.selectedEditorTab = 'workspaces';
-            this.toggleExplorer();
-            this.hideDiagnosisButton();
-            this.workspaceController.workspaceView.active = true;
-        }}">
-                                        <sl-icon-button name="person-workspace"
-                                                        class="workspace-icon ${this.selectedEditorTab === 'workspaces' ? 'active' : ''}"></sl-icon-button>
-                                    </sl-tab>
-
-                                    <sl-tab slot="nav" panel="spec" class="tab" id="spec" active
-                                            @click="${() => {
-            this.selectedEditorTab = 'spec';
-            this.closeExplorer();
-            this.enableDiagnosisButton();
-        }}">
-                                        OpenAPI Spec
-                                    </sl-tab>
-                                    <sl-tab slot="nav" panel="explorer" class="tab" id="explorer"
-                                            @click="${() => {
-            this.selectedEditorTab = 'explorer';
-            this.toggleExplorer();
-            this.hideDiagnosisButton();
-        }}">Explorer
-                                    </sl-tab>
-
-
-                                    <sl-tab slot="nav" panel="tardis" class="tab" id="history"
-                                            @click="${() => {
-            this.showHistory();
-            this.hideDiagnosisButton();
-        }}">History
-                                    </sl-tab>
-
-                                    <sl-tab slot="nav" panel="ruleset" class="tab" id="ruleset"
-                                            @click="${() => {
-            this.closeExplorer();
-            this.hideDiagnosisButton();
-        }}">
-                                        Ruleset ${rulesetPulsePill}
-                                    </sl-tab>
-
-                                    <sl-tab slot="nav" panel="docs" class="tab" id="docs"
-                                            @click="${() => {
-            this.hideMinimapIcon();
-            this.hideDiagnosisButton();
-        }}">
-                                        API Docs
-                                    </sl-tab>
-
-
-                                    <sl-tab-panel name="spec" class="tab-panel">
-                                        <div class="main-view">
-                                            ${this.statusBar}
-                                            <div id="editor-url-overlay" class="editor-url-overlay">
-
-
-                                                <div id="url-spinner">
-                                                    <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>
-                                                        <p>${this.urlErrorMessage}</p>
-                                                        <sl-button @click="${this.hideUrlError}">OK</sl-button>
-                                                        <p></p>
-                                                    </pb33f-attention-box>
-                                                </div>
+                                     class="divider-vert" aria-hidden="true"></sl-icon>
+                            <div class="editor" slot="start" role="main" aria-label="API specification editor">
+                                <pb33f-doctor-editor-panel
+                                    ?authenticated=${this.authController.authenticated}
+                                    ?minimapVisible=${this.minimapVisible}
+                                    ?minimapIconVisible=${this.minimapIconVisible}
+                                    ?showDiagnosisButton=${this.showDiagnosisButton}
+                                    ?autoDiagnose=${this.autoDiagnose}
+                                    ?editorDirty=${this.editorDirty}
+                                    .selectedEditorTab=${this.selectedEditorTab}
+                                    ?rulesetPulse=${this.rulesetPulse}>
+                                    <div slot="settings">${this.settingsComponent}</div>
+                                    <div slot="activity-spinner">${this.activitySpinner}</div>
+                                    <div slot="generic-drawer">${this.genericDrawer}</div>
+                                    <div slot="status-bar">${this.statusBar}</div>
+                                    <pb33f-doctor-url-overlay slot="url-overlay"
+                                        .activeURL=${this.activeURL}
+                                        .errorCode=${this.urlErrorCode}
+                                        .errorMessage=${this.urlErrorMessage}>
+                                    </pb33f-doctor-url-overlay>
+                                    <slot name="spec-editor" slot="spec-editor"></slot>
+                                    <slot name="ruleset-editor" slot="ruleset-editor"></slot>
+                                    <div slot="explorer" @mouseleave="${this.ungrabExplorer}">${this.tabCache.shouldRenderEditorTab('explorer') ? this.explorer : nothing}</div>
+                                    <div slot="tardis-control">${this.tabCache.shouldRenderEditorTab('tardis') ? html `
+                                        <pb33f-tardis-control .doc=${this} ${ref(this.tardisControlRef)}>
+                                            <div slot="diff-editor">
+                                                <slot name="diff-editor"></slot>
                                             </div>
-
-                                            <!-- EDITOR -->
-                                            <slot name="spec-editor"></slot>
-                                            <!-- EDITOR -->
-                                        </div>
-                                    </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>
-
-                                    <sl-tab-panel name="tardis" class="tab-panel">
-                                        ${this.timeVortex.tardisControl}
-                                    </sl-tab-panel>
-
-                                    <sl-tab-panel name="docs" class="tab-panel" style="height: calc(100vh - 100px)">
-                                        <iframe src="${this.doctorEndpoint}/model/scalar-template?z=${this.randomTicker}" width="100%" height="100%" style="border: none"></iframe>
-                                    </sl-tab-panel>
-
-                                    ${this.authController.authenticated ? html `
-
-                                        <sl-tab-panel name="workspaces" class="tab-panel">
-                                            ${this.workspaceController.workspaceView}
-                                        </sl-tab-panel>
-                                    ` : ''}
-
-                                </sl-tab-group>
+                                        </pb33f-tardis-control>
+                                    ` : nothing}</div>
+                                    <div slot="workspaces">${this.tabCache.shouldRenderEditorTab('workspaces') ? this.workspaceController.workspaceView : nothing}</div>
+                                </pb33f-doctor-editor-panel>
                             </div>
                             ${mainPanelView}
                         </sl-split-panel>
@@ -934,9 +1352,6 @@ let TheDoctor = class TheDoctor extends LitElement {
                 </sl-split-panel>
             </div>`;
     }
-    randomTicker() {
-        return crypto.randomUUID().toString();
-    }
     //   <iframe src="${this.doctorEndpoint}/model/scalar-template?z=${this.randomTicker}" width="100%" height="100%" style="border: none"></iframe>
     fetchUrl(event) {
         this.activeURL = event.detail.url;
@@ -945,53 +1360,44 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.diagnosticController.lintSpec('', event.detail.url);
     }
     hideUrlError() {
-        this.urlProblem.style.display = 'none';
-        this.urlOverlay.style.display = 'none';
-        this.urlSpinner.style.display = 'none';
+        if (this.urlOverlayComponent) {
+            this.urlOverlayComponent.hide();
+        }
         this.editor.toggleMinimap();
     }
     showUrlError(e) {
         this.urlErrorCode = e.status;
         this.urlErrorMessage = e.detail;
-        this.urlSpinner.style.display = 'none';
-        this.urlOverlay.style.display = 'block';
-        this.urlProblem.style.display = 'block';
+        if (this.urlOverlayComponent) {
+            this.urlOverlayComponent.showError(e.status, e.detail);
+        }
         this.editor.toggleMinimap();
         this.requestUpdate();
     }
+    showUrlLoading() {
+        if (this.urlOverlayComponent) {
+            this.urlOverlayComponent.show();
+        }
+    }
     ungrabExplorer() {
         this.explorer.grabbed = false;
     }
     selectTardis() {
         this.closeExplorer();
-        this.historyPanel.click();
+        this.editorPanel?.showTab('tardis');
     }
 };
-TheDoctor.styles = [theDoctorCss, linksCss, dialogCss, buttonCss, radioGroupsCss, tabsCss, formsCss, spinnerCss, tooltipCss, panelsCss, nukeCss];
-__decorate([
-    query('#overviewPanel')
-], TheDoctor.prototype, "overviewPanel", void 0);
-__decorate([
-    query('#problemsPanel')
-], TheDoctor.prototype, "problemsPanel", void 0);
-__decorate([
-    query('#viewerPanel')
-], TheDoctor.prototype, "viewerPanel", void 0);
-__decorate([
-    query('#explorer')
-], TheDoctor.prototype, "explorerPanel", void 0);
-__decorate([
-    query('#history')
-], TheDoctor.prototype, "historyPanel", void 0);
-__decorate([
-    query('sl-tab-group#manager-controls')
-], TheDoctor.prototype, "controlTabGroup", void 0);
-__decorate([
-    query('sl-tab-group#editor-controls')
-], TheDoctor.prototype, "editorTabGroup", void 0);
-__decorate([
-    query('pb33f-attention-box#welcome')
-], TheDoctor.prototype, "welcomeBox", void 0);
+TheDoctor.styles = [theDoctorCss,
+    linksCss,
+    dialogCss,
+    buttonCss,
+    radioGroupsCss,
+    tabsCss,
+    formsCss,
+    spinnerCss,
+    tooltipCss,
+    panelsCss,
+    nukeCss];
 __decorate([
     query('sl-radio-group#export-ruleset-radio')
 ], TheDoctor.prototype, "exportSelection", void 0);
@@ -1001,9 +1407,6 @@ __decorate([
 __decorate([
     query('sl-dialog#loading-overlay')
 ], TheDoctor.prototype, "loadingOverlay", void 0);
-__decorate([
-    query('div.problems-data')
-], TheDoctor.prototype, "problemsDataDiv", void 0);
 __decorate([
     query('#url-input-button')
 ], TheDoctor.prototype, "urlInputButton", void 0);
@@ -1014,23 +1417,26 @@ __decorate([
     property({ type: Boolean })
 ], TheDoctor.prototype, "unavailable", void 0);
 __decorate([
-    query('#editor-url-overlay')
-], TheDoctor.prototype, "urlOverlay", void 0);
+    query('pb33f-doctor-controls-panel')
+], TheDoctor.prototype, "controlsPanel", void 0);
+__decorate([
+    query('pb33f-doctor-url-overlay')
+], TheDoctor.prototype, "urlOverlayComponent", void 0);
 __decorate([
-    query('#url-problem')
-], TheDoctor.prototype, "urlProblem", void 0);
+    query('pb33f-doctor-sidebar-panel')
+], TheDoctor.prototype, "sidebarPanel", void 0);
 __decorate([
-    query('#url-spinner')
-], TheDoctor.prototype, "urlSpinner", void 0);
+    query('pb33f-doctor-navigator-panel')
+], TheDoctor.prototype, "navigatorPanel", void 0);
+__decorate([
+    query('pb33f-doctor-editor-panel')
+], TheDoctor.prototype, "editorPanel", 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);
@@ -1040,9 +1446,6 @@ __decorate([
 __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);
@@ -1070,6 +1473,33 @@ __decorate([
 __decorate([
     state()
 ], TheDoctor.prototype, "showDiagnosisButton", void 0);
+__decorate([
+    state()
+], TheDoctor.prototype, "workspaceReadOnly", void 0);
+__decorate([
+    state()
+], TheDoctor.prototype, "viewingHistoricalViolations", void 0);
+__decorate([
+    state()
+], TheDoctor.prototype, "toolsCompareLoading", void 0);
+__decorate([
+    state()
+], TheDoctor.prototype, "toolsEditorHasContent", void 0);
+__decorate([
+    state()
+], TheDoctor.prototype, "editorDirty", void 0);
+__decorate([
+    state()
+], TheDoctor.prototype, "bundleLoading", void 0);
+__decorate([
+    state()
+], TheDoctor.prototype, "isBundled", void 0);
+__decorate([
+    state()
+], TheDoctor.prototype, "rolodexDividerPosition", void 0);
+__decorate([
+    state()
+], TheDoctor.prototype, "currentViewName", void 0);
 TheDoctor = __decorate([
     customElement("pb33f-doctor")
 ], TheDoctor);