diff --git a/.changeset/easy-schools-unite.md b/.changeset/easy-schools-unite.md
new file mode 100644
index 00000000..a7bdbdd3
--- /dev/null
+++ b/.changeset/easy-schools-unite.md
@@ -0,0 +1,5 @@
+---
+"@nodesecure/cli": major
+---
+
+Enable checkJS and add missing JSDoc and fix all application errors
diff --git a/eslint.config.mjs b/eslint.config.mjs
index cec7a9f1..4dcab742 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -10,10 +10,13 @@ export default [
       jsdoc
     },
     rules: {
-      "jsdoc/no-undefined-types": ["warn", {
-        disableReporting: true,
-        markVariablesAsUsed: true
-      }]
+      "jsdoc/no-undefined-types": [
+        "warn", {
+          disableReporting: true,
+          markVariablesAsUsed: true
+        }
+      ],
+      "no-inline-comments": "off"
     }
   },
   {
diff --git a/workspaces/cli/package.json b/workspaces/cli/package.json
index b0f34911..31571c56 100644
--- a/workspaces/cli/package.json
+++ b/workspaces/cli/package.json
@@ -69,6 +69,7 @@
     "@openally/httpie": "1.1.2",
     "@playwright/test": "1.61.1",
     "@stylistic/stylelint-plugin": "5.1.0",
+    "@types/semver": "7.7.1",
     "esbuild": "0.28.1",
     "highlight.js": "11.11.1",
     "postcss-lit": "1.4.1",
diff --git a/workspaces/cli/public/common/utils.js b/workspaces/cli/public/common/utils.js
index 2a05c467..d72851cc 100644
--- a/workspaces/cli/public/common/utils.js
+++ b/workspaces/cli/public/common/utils.js
@@ -31,7 +31,7 @@ export function extractEmojis(strWithEmojis) {
  * @param {keyof HTMLElementTagNameMap} kind
  * @param {object} [options]
  * @param {string[]} [options.classList]
- * @param {HTMLElement[]} [options.childs]
+ * @param {(Node | null)[]} [options.childs]
  * @param {Record<string, any>} [options.attributes]
  * @param {Record<string, any>} [options.styles]
  * @param {string | null} [options.text]
@@ -136,7 +136,7 @@ export function parseRepositoryUrl(repository = {}, defaultValue = null) {
 
 /**
  * @param {string} title
- * @param {string} value
+ * @param {string | number} value
  * @param {Record<string, any>} options
  * @returns {HTMLElement}
  */
@@ -148,11 +148,12 @@ export function createLiField(title, value, options = {}) {
   let elementToAppend;
 
   if (isLink) {
-    const textValue = value.length > 26 ? `${value.slice(0, 26)}...` : value;
-    elementToAppend = createLink(value, textValue);
+    const href = /** @type {string} */ (value);
+    const textValue = href.length > 26 ? `${href.slice(0, 26)}...` : href;
+    elementToAppend = createLink(href, textValue);
   }
   else {
-    elementToAppend = createDOMElement("p", { text: value });
+    elementToAppend = createDOMElement("p", { text: String(value) });
   }
   liElement.appendChild(elementToAppend);
 
@@ -163,7 +164,7 @@ export function createLiField(title, value, options = {}) {
  * @param {HTMLElement} node - The parent DOM element.
  * @param {string[]} items - Array of strings to display.
  * @param {Object} [options] - Optional configuration options.
- * @param {Function} [options.onclick] - Callback function (event, item).
+ * @param {(event: Event, item: string) => void} [options.onclick] - Callback function (event, item).
  * @param {boolean} [options.hideItems] - Hide items if needed.
  * @param {number} [options.hideItemsLength] - Number of visible elements before masking.
  * @returns {void}
@@ -307,6 +308,48 @@ export function hideOnClickOutside(
   return outsideClickListener;
 }
 
+/**
+ * Returns the i18n dictionary for the given language (defaults to the current language).
+ *
+ * Works around `window.i18n`'s declared type being widened to `Record<string, unknown>`
+ * by a third-party ambient declaration (`@nodesecure/vis-network`'s `utils.d.ts`).
+ *
+ * @param {string} [lang]
+ * @returns {Record<string, Record<string, string>>}
+ */
+export function getI18n(lang = currentLang()) {
+  return /** @type {Record<string, Record<string, string>>} */ (
+    window.i18n[lang]
+  );
+}
+
+/**
+ * Returns the application settings config.
+ *
+ * Works around `window.settings`'s declared type being unreliably shadowed by a
+ * conflicting third-party ambient declaration (`@nodesecure/vis-network`'s
+ * `dataset.d.ts` declares `Window.settings: { config: { showFriendlyDependencies } }`).
+ *
+ * @returns {import("../types.js").AppConfig}
+ */
+export function getSettingsConfig() {
+  return /** @type {import("../types.js").AppConfig} */ (/** @type {unknown} */ (
+    window.settings.config
+  ));
+}
+
+/**
+ * `window.navigation` collides with the browser's native, read-only Navigation API.
+ * The app intentionally shadows it with its own `ViewNavigation` controller.
+ *
+ * @returns {import("../components/navigation/navigation.js").ViewNavigation}
+ */
+export function getNavigation() {
+  return /** @type {import("../components/navigation/navigation.js").ViewNavigation} */ (/** @type {unknown} */ (
+    window.navigation
+  ));
+}
+
 /** @returns {string} */
 export function currentLang() {
   const detectedLang = document.getElementById("lang")?.dataset.lang;
diff --git a/workspaces/cli/public/components/bundlephobia/bundlephobia.js b/workspaces/cli/public/components/bundlephobia/bundlephobia.js
index 95a8a8f1..5d8e9059 100644
--- a/workspaces/cli/public/components/bundlephobia/bundlephobia.js
+++ b/workspaces/cli/public/components/bundlephobia/bundlephobia.js
@@ -84,11 +84,21 @@ class Bundlephobia extends LitElement {
     version: { type: String }
   };
 
+  constructor() {
+    super();
+    /** @type {string} */
+    this.name = "";
+    /** @type {string} */
+    this.version = "";
+  }
+
   #bunldeTask = new Task(this, {
     task: async([name, version]) => {
       const {
         gzip, size, dependencySizes
-      } = await getJSON(`/bundle/${this.#httpName(name)}/${version}`);
+      } = /** @type {{ gzip: number, size: number, dependencySizes: { approximateSize: number }[] }} */ (
+        await getJSON(`/bundle/${this.#httpName(name)}/${version}`)
+      );
       const fullSize = dependencySizes.reduce((prev, curr) => prev + curr.approximateSize, 0);
 
       return {
@@ -100,6 +110,9 @@ class Bundlephobia extends LitElement {
     args: () => [this.name, this.version]
   });
 
+  /**
+   * @param {string} name
+   */
   #httpName(name) {
     return name.replaceAll("/", "%2F");
   }
diff --git a/workspaces/cli/public/components/command-palette/command-palette-panels.js b/workspaces/cli/public/components/command-palette/command-palette-panels.js
index b2003d6f..439eff3a 100644
--- a/workspaces/cli/public/components/command-palette/command-palette-panels.js
+++ b/workspaces/cli/public/components/command-palette/command-palette-panels.js
@@ -4,7 +4,7 @@ import { repeat } from "lit/directives/repeat.js";
 import { classMap } from "lit/directives/class-map.js";
 
 // Import Internal Dependencies
-import { currentLang } from "../../common/utils.js";
+import * as utils from "../../common/utils.js";
 import {
   FLAG_LIST,
   SIZE_PRESETS,
@@ -23,10 +23,29 @@ const kListTitleKeys = {
 };
 
 /**
- * @param {{ linker: Map, queries: Array, inputValue: string, onAdd: Function, onRemove: Function }} props
+ * @returns {Record<string, string>}
+ */
+function getSearchCommandI18n() {
+  return /** @type {Record<string, string>} */ (/** @type {unknown} */ (utils.getI18n().search_command));
+}
+
+/**
+ * @typedef {import("@nodesecure/vis-network").LinkerEntry} LinkerEntry
+ * @typedef {{ filter: string, value: string }} SearchQuery
+ * @typedef {{ display: string, value: string, hint?: string }} HelperValue
+ */
+
+/**
+ * @param {{
+ * linker: Map<number, LinkerEntry>,
+ * queries: SearchQuery[],
+ * inputValue: string,
+ * onAdd: (filter: string, value: string) => void,
+ * onRemove: (filter: string, value: string) => void
+ * }} props
  */
 export function renderFlagPanel({ linker, queries, inputValue, onAdd, onRemove }) {
-  const i18n = window.i18n[currentLang()].search_command;
+  const i18n = getSearchCommandI18n();
   const flagCounts = getFlagCounts(linker);
   const activeFlags = new Set(
     queries
@@ -65,10 +84,10 @@ export function renderFlagPanel({ linker, queries, inputValue, onAdd, onRemove }
 }
 
 /**
- * @param {{ activeFilter: string, onAdd: Function }} props
+ * @param {{ activeFilter: string, onAdd: (filter: string, value: string) => void }} props
  */
 export function renderRangePanel({ activeFilter, onAdd }) {
-  const i18n = window.i18n[currentLang()].search_command;
+  const i18n = getSearchCommandI18n();
   const isSizeFilter = activeFilter === "size";
   const presets = isSizeFilter ? SIZE_PRESETS : VERSION_PRESETS;
   const title = isSizeFilter ? i18n.section_size : i18n.section_version;
@@ -93,12 +112,19 @@ export function renderRangePanel({ activeFilter, onAdd }) {
 }
 
 /**
- * @param {{ linker: Map, activeFilter: string, helpers: Array, selectedIndex: number, onAdd: Function }} props
+ * @param {{
+ * linker: Map<number, LinkerEntry>,
+ * activeFilter: string,
+ * helpers: HelperValue[],
+ * selectedIndex: number,
+ * onAdd: (filter: string, value: string) => void
+ * }} props
  */
 export function renderListPanel({ linker, activeFilter, helpers, selectedIndex, onAdd }) {
-  const i18n = window.i18n[currentLang()].search_command;
+  const i18n = getSearchCommandI18n();
   const counts = getFilterValueCounts(linker, activeFilter);
-  const title = i18n[kListTitleKeys[activeFilter]] ?? activeFilter;
+  const titleI18nKey = /** @type {Record<string, string>} */ (kListTitleKeys)[activeFilter];
+  const title = i18n[titleI18nKey] ?? activeFilter;
 
   return html`
     <div class="section">
@@ -117,10 +143,10 @@ export function renderListPanel({ linker, activeFilter, helpers, selectedIndex,
 }
 
 /**
- * @param {{ helpers: Array, selectedIndex: number, onSelect: Function }} props
+ * @param {{ helpers: HelperValue[], selectedIndex: number, onSelect: (helper: HelperValue) => void }} props
  */
 export function renderFilterList({ helpers, selectedIndex, onSelect }) {
-  const i18n = window.i18n[currentLang()].search_command;
+  const i18n = getSearchCommandI18n();
 
   return html`
     <div class="section">
@@ -138,10 +164,13 @@ export function renderFilterList({ helpers, selectedIndex, onSelect }) {
 }
 
 /**
- * @param {{ presets: Array, onApply: Function }} props
+ * @param {{
+ * presets: { id: string, filter: string, value: string }[],
+ * onApply: (preset: { id: string, filter: string, value: string }) => void
+ * }} props
  */
 export function renderPresets({ presets, onApply }) {
-  const i18n = window.i18n[currentLang()].search_command;
+  const i18n = getSearchCommandI18n();
 
   return html`
     <div class="section">
@@ -161,10 +190,13 @@ export function renderPresets({ presets, onApply }) {
 }
 
 /**
- * @param {{ actions: Array<{ id: string, label: string, kbd: string|null }>, onExecute: Function }} props
+ * @param {{
+ * actions: { id: string, label: string, kbd: string|null }[],
+ * onExecute: (action: { id: string, label: string, kbd: string|null }) => void
+ * }} props
  */
 export function renderActions({ actions, onExecute }) {
-  const i18n = window.i18n[currentLang()].search_command;
+  const i18n = getSearchCommandI18n();
 
   return html`
     <div class="section">
@@ -214,14 +246,19 @@ export function renderIgnorePanel({ title, items, ignored, onToggle }) {
 }
 
 /**
- * @param {{ results: Array, selectedIndex: number, helperCount: number, onFocus: Function }} props
+ * @param {{
+ * results: { id: string, flags: string, name: string, version: string }[],
+ * selectedIndex: number,
+ * helperCount: number,
+ * onFocus: (id: string) => void
+ * }} props
  */
 export function renderResults({ results, selectedIndex, helperCount, onFocus }) {
   if (results.length === 0) {
     return nothing;
   }
 
-  const i18n = window.i18n[currentLang()].search_command;
+  const i18n = getSearchCommandI18n();
 
   return html`
     <div class="section">
diff --git a/workspaces/cli/public/components/command-palette/command-palette.js b/workspaces/cli/public/components/command-palette/command-palette.js
index fa549eef..db668c0f 100644
--- a/workspaces/cli/public/components/command-palette/command-palette.js
+++ b/workspaces/cli/public/components/command-palette/command-palette.js
@@ -4,7 +4,7 @@ import { repeat } from "lit/directives/repeat.js";
 import { warnings } from "@nodesecure/js-x-ray/warnings";
 
 // Import Internal Dependencies
-import { currentLang, vec2Distance } from "../../common/utils.js";
+import * as utils from "../../common/utils.js";
 import { EVENTS } from "../../core/events.js";
 import {
   FILTERS_NAME,
@@ -42,6 +42,9 @@ const kWarningItems = Object.keys(warnings)
     return { value: id, label: id.replaceAll("-", " ") };
   });
 
+/**
+ * @param {string | undefined} shortcut
+ */
 function resolveKbd(shortcut) {
   if (!shortcut) {
     return null;
@@ -52,9 +55,35 @@ function resolveKbd(shortcut) {
   return navigator.userAgent.includes("Mac") ? `⌥${key}` : `Alt+${key}`;
 }
 
-class CommandPalette extends LitElement {
+/**
+ * @returns {Record<string, any>}
+ */
+function getSearchCommandI18n() {
+  return /** @type {Record<string, any>} */ (/** @type {unknown} */ (utils.getI18n().search_command));
+}
+
+/**
+ * @typedef {Object} CommandPackage
+ * @property {string} id
+ * @property {string} name
+ * @property {string} version
+ * @property {string} flags
+ * @property {boolean} isHighlighted
+ */
+
+/**
+ * @typedef {Object} SearchQuery
+ * @property {string} filter
+ * @property {string} value
+ * @property {Set<string>} [matchingIds]
+ */
+
+export class CommandPalette extends LitElement {
+  /** @type {Map<number, import("@nodesecure/vis-network").LinkerEntry> | null} */
   #linker = null;
+  /** @type {import("@nodesecure/vis-network").NodeSecureNetwork | null} */
   #network = null;
+  /** @type {CommandPackage[]} */
   #packages = [];
 
   static styles = commandPaletteStyles;
@@ -68,7 +97,7 @@ class CommandPalette extends LitElement {
     results: { type: Array }
   };
 
-  #handleKeydown = (event) => {
+  #handleKeydown = (/** @type {KeyboardEvent} */ event) => {
     if ((event.ctrlKey || event.metaKey) && event.key === "k") {
       event.preventDefault();
       if (this.open) {
@@ -96,7 +125,12 @@ class CommandPalette extends LitElement {
     }
   };
 
-  #init = ({ detail: { linker, packages, network } }) => {
+  #init = (/** @type {Event} */ event) => {
+    const { linker, packages, network } = /** @type {CustomEvent<{
+      linker: Map<number, import("@nodesecure/vis-network").LinkerEntry>,
+      packages: import("@nodesecure/vis-network").PackageInfo[],
+      network: import("@nodesecure/vis-network").NodeSecureNetwork
+    }>} */ (event).detail;
     this.#linker = linker;
     this.#network = network;
     this.#packages = packages.map(({ id, name, version, flags, isHighlighted }) => {
@@ -114,9 +148,12 @@ class CommandPalette extends LitElement {
     super();
     this.open = false;
     this.inputValue = "";
+    /** @type {string | null} */
     this.activeFilter = null;
+    /** @type {SearchQuery[]} */
     this.queries = [];
     this.selectedIndex = -1;
+    /** @type {CommandPackage[]} */
     this.results = [];
   }
 
@@ -140,17 +177,20 @@ class CommandPalette extends LitElement {
     super.disconnectedCallback();
   }
 
+  /**
+   * @param {import("lit").PropertyValues<this>} changedProperties
+   */
   updated(changedProperties) {
     if (changedProperties.has("open") && this.open) {
-      this.shadowRoot.querySelector("#cmd-input")?.focus();
+      /** @type {HTMLElement | null} */ (this.shadowRoot?.querySelector("#cmd-input"))?.focus();
     }
     if (changedProperties.has("selectedIndex") && this.selectedIndex >= 0) {
-      this.shadowRoot.querySelector(".selected")?.scrollIntoView({ block: "nearest" });
+      this.shadowRoot?.querySelector(".selected")?.scrollIntoView({ block: "nearest" });
     }
   }
 
   #isNetworkViewActive() {
-    return document.getElementById("network--view").classList.contains("hidden") === false;
+    return /** @type {HTMLElement} */ (document.getElementById("network--view")).classList.contains("hidden") === false;
   }
 
   #openModal() {
@@ -170,22 +210,40 @@ class CommandPalette extends LitElement {
     this.results = [];
   }
 
+  /**
+   * @returns {Map<number, import("@nodesecure/vis-network").LinkerEntry>}
+   */
+  #getLinker() {
+    return /** @type {Map<number, import("@nodesecure/vis-network").LinkerEntry>} */ (this.#linker);
+  }
+
   #getCurrentMatchingIds() {
     if (this.queries.length === 0) {
       return null;
     }
 
+    /** @type {Set<string> | null} */
     let ids = null;
     for (const { filter, value } of this.queries) {
-      const matches = computeMatches(this.#linker, filter, value);
-      ids = ids === null ? matches : new Set([...ids].filter((id) => matches.has(id)));
+      const matches = computeMatches(this.#getLinker(), filter, value);
+      if (ids === null) {
+        ids = matches;
+      }
+      else {
+        const previousIds = /** @type {Set<string>} */ (ids);
+        ids = new Set([...previousIds].filter((id) => matches.has(id)));
+      }
     }
 
     return ids;
   }
 
+  /**
+   * @param {string} filter
+   * @param {string} text
+   */
   #computeLiveResults(filter, text) {
-    const freshMatches = computeMatches(this.#linker, filter, text);
+    const freshMatches = computeMatches(this.#getLinker(), filter, text);
     const constraint = this.#getCurrentMatchingIds();
     const matchingIds = constraint === null
       ? freshMatches
@@ -194,8 +252,12 @@ class CommandPalette extends LitElement {
     this.results = this.#packages.filter((pkg) => matchingIds.has(pkg.id));
   }
 
+  /**
+   * @param {string} filter
+   * @param {string} value
+   */
   #addQuery(filter, value) {
-    const freshMatches = computeMatches(this.#linker, filter, value);
+    const freshMatches = computeMatches(this.#getLinker(), filter, value);
     const constraint = this.#getCurrentMatchingIds();
     const matchingIds = constraint === null
       ? freshMatches
@@ -211,6 +273,9 @@ class CommandPalette extends LitElement {
     }
   }
 
+  /**
+   * @param {SearchQuery} query
+   */
   #removeQuery(query) {
     this.queries = this.queries.filter((existing) => existing !== query);
     const constraint = this.#getCurrentMatchingIds();
@@ -219,6 +284,10 @@ class CommandPalette extends LitElement {
       : this.#packages.filter((pkg) => constraint.has(pkg.id));
   }
 
+  /**
+   * @param {string} filter
+   * @param {string} value
+   */
   #removeQueryByValue(filter, value) {
     this.queries = this.queries.filter((query) => !(query.filter === filter && query.value === value));
     const constraint = this.#getCurrentMatchingIds();
@@ -243,12 +312,15 @@ class CommandPalette extends LitElement {
     }
 
     this.updateComplete.then(() => {
-      this.shadowRoot.querySelector("#cmd-input")?.focus();
+      /** @type {HTMLElement | null} */ (this.shadowRoot?.querySelector("#cmd-input"))?.focus();
     });
   }
 
+  /**
+   * @param {Event} event
+   */
   #onInput(event) {
-    const value = event.target.value;
+    const value = /** @type {HTMLInputElement} */ (event.target).value;
     this.inputValue = value;
     this.selectedIndex = -1;
 
@@ -282,6 +354,9 @@ class CommandPalette extends LitElement {
     }
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   */
   #onKeydown(event) {
     const helpers = this.#visibleHelpers;
     const total = helpers.length + this.results.length;
@@ -316,6 +391,9 @@ class CommandPalette extends LitElement {
     }
   }
 
+  /**
+   * @param {number} index
+   */
   #selectByIndex(index) {
     const helpers = this.#visibleHelpers;
     if (index < helpers.length) {
@@ -327,6 +405,9 @@ class CommandPalette extends LitElement {
     }
   }
 
+  /**
+   * @param {{ value: string, display: string, hint?: string, type: string }} helper
+   */
   #selectHelper(helper) {
     if (helper.type === "filter") {
       if (FILTER_INSTANT_CONFIRM.has(helper.value)) {
@@ -340,11 +421,11 @@ class CommandPalette extends LitElement {
       }
     }
     else {
-      this.#addQuery(this.activeFilter, helper.value);
+      this.#addQuery(/** @type {string} */ (this.activeFilter), helper.value);
     }
 
     this.updateComplete.then(() => {
-      this.shadowRoot.querySelector("#cmd-input")?.focus();
+      /** @type {HTMLElement | null} */ (this.shadowRoot?.querySelector("#cmd-input"))?.focus();
     });
   }
 
@@ -369,17 +450,30 @@ class CommandPalette extends LitElement {
     }
   }
 
+  /**
+   * @param {string} id
+   */
   #focusPackage(id) {
-    this.#network.focusNodeById(id);
-    window.navigation.setNavByName("network--view");
+    this.#getNetwork().focusNodeById(Number(id));
+    utils.getNavigation().setNavByName("network--view");
     this.#close();
   }
 
+  /**
+   * @returns {import("@nodesecure/vis-network").NodeSecureNetwork}
+   */
+  #getNetwork() {
+    return /** @type {import("@nodesecure/vis-network").NodeSecureNetwork} */ (this.#network);
+  }
+
+  /**
+   * @param {{ id: string, shortcut?: string }} action
+   */
   async #executeAction(action) {
     switch (action.id) {
       case "toggle_theme": {
-        const nextTheme = window.settings.config.theme === "dark" ? "light" : "dark";
-        const config = window.settings.config;
+        const nextTheme = utils.getSettingsConfig().theme === "dark" ? "light" : "dark";
+        const config = utils.getSettingsConfig();
         fetch("/config", {
           method: "put",
           body: JSON.stringify({
@@ -399,8 +493,8 @@ class CommandPalette extends LitElement {
         break;
       }
       case "reset_view":
-        this.#network.network.emit("click", { nodes: [], edges: [] });
-        this.#network.network.focus(0, {
+        /** @type {any} */ (this.#getNetwork().network).emit("click", { nodes: [], edges: [] });
+        this.#getNetwork().network.focus(0, {
           animation: true,
           scale: 0.35,
           offset: { x: 150, y: 0 }
@@ -441,8 +535,12 @@ class CommandPalette extends LitElement {
     this.#close();
   }
 
+  /**
+   * @param {"flags" | "warnings"} type
+   * @param {string} value
+   */
   #toggleIgnore(type, value) {
-    const ignoreSet = window.settings.config.ignore[type];
+    const ignoreSet = utils.getSettingsConfig().ignore[type];
     if (ignoreSet.has(value)) {
       ignoreSet.delete(value);
     }
@@ -450,7 +548,7 @@ class CommandPalette extends LitElement {
       ignoreSet.add(value);
     }
 
-    const config = window.settings.config;
+    const config = utils.getSettingsConfig();
     fetch("/config", {
       method: "put",
       body: JSON.stringify({
@@ -477,7 +575,7 @@ class CommandPalette extends LitElement {
   }
 
   #getEmptyQueryMessage() {
-    const i18n = window.i18n[currentLang()].search_command;
+    const i18n = getSearchCommandI18n();
     if (this.queries.length === 1) {
       const { filter, value } = this.queries[0];
       const preset = PRESETS.find((preset) => preset.filter === filter && preset.value === value);
@@ -489,33 +587,41 @@ class CommandPalette extends LitElement {
     return i18n.empty_after_filter;
   }
 
+  /**
+   * @param {number[]} nodeIds
+   */
   #focusMultiplePackages(nodeIds) {
-    window.navigation.setNavByName("network--view");
-    this.#network.highlightMultipleNodes(nodeIds);
-    window.locker.lock();
+    utils.getNavigation().setNavByName("network--view");
+    this.#getNetwork().highlightMultipleNodes(nodeIds);
+    /** @type {import("../locker/locker.js").Locker} */ (window.locker).lock();
 
-    const currentSelectedNode = window.networkNav.currentNodeParams;
+    const currentSelectedNode = window.networkNav?.currentNodeParams;
     const shouldMove = !currentSelectedNode || !nodeIds.includes(currentSelectedNode.nodes[0]);
     if (shouldMove) {
-      const origin = this.#network.network.getViewPosition();
+      const origin = this.#getNetwork().network.getViewPosition();
       const closestNode = nodeIds
         .map((id) => {
-          return { id, pos: this.#network.network.getPosition(id) };
+          return { id, pos: this.#getNetwork().network.getPosition(id) };
         })
-        .reduce((nodeA, nodeB) => (vec2Distance(origin, nodeA.pos) < vec2Distance(origin, nodeB.pos) ? nodeA : nodeB));
+        .reduce((nodeA, nodeB) => (
+          utils.vec2Distance(origin, nodeA.pos) < utils.vec2Distance(origin, nodeB.pos) ? nodeA : nodeB
+        ));
 
       const scale = nodeIds.length > 3 ? 0.25 : 0.35;
-      this.#network.network.focus(closestNode.id, { animation: true, scale });
+      this.#getNetwork().network.focus(closestNode.id, { animation: true, scale });
     }
 
     this.#close();
   }
 
+  /**
+   * @returns {{ value: string, display: string, hint?: string, type: string }[]}
+   */
   get #visibleHelpers() {
     if (this.activeFilter === null) {
       const text = this.inputValue.toLowerCase();
 
-      const filterHints = window.i18n[currentLang()].search_command.filter_hints;
+      const filterHints = getSearchCommandI18n().filter_hints;
 
       return [...FILTERS_NAME]
         .filter((filterName) => text === "" || filterName.startsWith(text))
@@ -529,7 +635,7 @@ class CommandPalette extends LitElement {
     }
 
     const searchText = this.inputValue.slice(this.activeFilter.length + 1).toLowerCase();
-    const allValues = getHelperValues(this.#linker, this.activeFilter);
+    const allValues = getHelperValues(this.#getLinker(), this.activeFilter);
 
     return allValues
       .filter((helper) => searchText === "" || helper.display.toLowerCase().includes(searchText))
@@ -538,15 +644,18 @@ class CommandPalette extends LitElement {
       });
   }
 
+  /**
+   * @param {{ value: string, display: string, hint?: string, type: string }[]} helpers
+   */
   #renderActiveFilterPanel(helpers) {
     const panelProps = {
-      linker: this.#linker,
+      linker: this.#getLinker(),
       queries: this.queries,
       inputValue: this.inputValue,
-      activeFilter: this.activeFilter,
+      activeFilter: /** @type {string} */ (this.activeFilter),
       selectedIndex: this.selectedIndex,
-      onAdd: (filter, value) => this.#addQuery(filter, value),
-      onRemove: (filter, value) => this.#removeQueryByValue(filter, value)
+      onAdd: (/** @type {string} */ filter, /** @type {string} */ value) => this.#addQuery(filter, value),
+      onRemove: (/** @type {string} */ filter, /** @type {string} */ value) => this.#removeQueryByValue(filter, value)
     };
 
     switch (this.activeFilter) {
@@ -561,8 +670,10 @@ class CommandPalette extends LitElement {
   }
 
   #resolveActions() {
-    const i18n = window.i18n[currentLang()].search_command;
-    const currentTheme = window.settings?.config?.theme ?? "light";
+    const i18n = getSearchCommandI18n();
+    const currentTheme = /** @type {import("../../types.js").AppConfig | undefined} */ (
+      /** @type {unknown} */ (window.settings?.config)
+    )?.theme ?? "light";
     const targetTheme = currentTheme === "dark" ? "light" : "dark";
     const copyCount = this.results.length > 0 ? this.results.length : this.#packages.length;
 
@@ -597,7 +708,7 @@ class CommandPalette extends LitElement {
       return nothing;
     }
 
-    const i18n = window.i18n[currentLang()].search_command;
+    const i18n = getSearchCommandI18n();
     const helpers = this.#visibleHelpers;
     const isPanelMode = this.activeFilter !== null;
     const isEmpty = helpers.length === 0 && this.results.length === 0 && this.inputValue.length > 0;
@@ -608,7 +719,9 @@ class CommandPalette extends LitElement {
       ? renderFilterList({
         helpers,
         selectedIndex: this.selectedIndex,
-        onSelect: (helper) => this.#selectHelper(helper)
+        onSelect: (helper) => this.#selectHelper(/** @type {{ value: string, display: string, hint?: string, type: string }} */ (
+          helper
+        ))
       })
       : nothing;
 
@@ -619,7 +732,7 @@ class CommandPalette extends LitElement {
           role="dialog"
           aria-modal="true"
           aria-label="Package search"
-          @click=${(event) => event.stopPropagation()}
+          @click=${(/** @type {Event} */ event) => event.stopPropagation()}
         >
           <div class="search-header">
             <div class="search-input-row">
@@ -675,14 +788,14 @@ class CommandPalette extends LitElement {
             ${showRichPlaceholder ? renderIgnorePanel({
               title: i18n.section_ignore_flags,
               items: FLAG_IGNORE_ITEMS,
-              ignored: window.settings?.config?.ignore?.flags ?? new Set(),
-              onToggle: (value) => this.#toggleIgnore("flags", value)
+              ignored: utils.getSettingsConfig()?.ignore?.flags ?? new Set(),
+              onToggle: (/** @type {string} */ value) => this.#toggleIgnore("flags", value)
             }) : nothing}
             ${showRichPlaceholder ? renderIgnorePanel({
               title: i18n.section_ignore_warnings,
               items: kWarningItems,
-              ignored: window.settings?.config?.ignore?.warnings ?? new Set(),
-              onToggle: (value) => this.#toggleIgnore("warnings", value)
+              ignored: utils.getSettingsConfig()?.ignore?.warnings ?? new Set(),
+              onToggle: (/** @type {string} */ value) => this.#toggleIgnore("warnings", value)
             }) : nothing}
             ${renderResults({
               results: this.results,
diff --git a/workspaces/cli/public/components/command-palette/filters.js b/workspaces/cli/public/components/command-palette/filters.js
index abc2a9cb..eddd5986 100644
--- a/workspaces/cli/public/components/command-palette/filters.js
+++ b/workspaces/cli/public/components/command-palette/filters.js
@@ -49,7 +49,7 @@ export const FILTER_INSTANT_CONFIRM = new Set(["highlighted"]);
 /**
  * Returns per-flag package counts across the full linker.
  *
- * @param {Map<number, object>} linker
+ * @param {Map<number, import("@nodesecure/vis-network").LinkerEntry>} linker
  * @returns {Map<string, number>}
  */
 export function getFlagCounts(linker) {
@@ -66,7 +66,7 @@ export function getFlagCounts(linker) {
 /**
  * Returns per-value package counts for list-type filters.
  *
- * @param {Map<number, object>} linker
+ * @param {Map<number, import("@nodesecure/vis-network").LinkerEntry>} linker
  * @param {string} filterName
  * @returns {Map<string, number>}
  */
@@ -93,12 +93,16 @@ export function getFilterValueCounts(linker, filterName) {
   return counts;
 }
 
+/**
+ * @param {import("@nodesecure/vis-network").LinkerEntry} opt
+ * @param {string} filterName
+ */
 function getValuesForCount(opt, filterName) {
   switch (filterName) {
     case "license":
       return opt.uniqueLicenseIds ?? [];
     case "ext":
-      return opt.composition.extensions.filter((ext) => ext !== "");
+      return opt.composition.extensions.filter((/** @type {string} */ ext) => ext !== "");
     case "builtin":
       return opt.composition.required_nodejs;
     case "author": {
@@ -115,7 +119,7 @@ function getValuesForCount(opt, filterName) {
 }
 
 /**
- * @param {Map<number, object>} linker
+ * @param {Map<number, import("@nodesecure/vis-network").LinkerEntry>} linker
  * @param {string} filterName
  * @returns {{ display: string, value: string }[]}
  */
@@ -196,7 +200,7 @@ export function getHelperValues(linker, filterName) {
 /**
  * Returns the Set of package IDs (as strings) matching the given filter+value.
  *
- * @param {Map<number, object>} linker
+ * @param {Map<number, import("@nodesecure/vis-network").LinkerEntry>} linker
  * @param {string} filterName
  * @param {string} inputValue
  * @returns {Set<string>}
@@ -220,7 +224,7 @@ export function computeMatches(linker, filterName, inputValue) {
 /**
  * Collect packages that depend on package matching inputValue
  *
- * @param {Map<number, object>} linker
+ * @param {Map<number, import("@nodesecure/vis-network").LinkerEntry>} linker
  * @param {string} inputValue
  * @returns {Set<string>}
  */
@@ -252,6 +256,11 @@ function computeDepMatches(linker, inputValue) {
   return matchingIds;
 }
 
+/**
+ * @param {import("@nodesecure/vis-network").LinkerEntry} opt
+ * @param {string} filterName
+ * @param {string} inputValue
+ */
 function matchesFilter(opt, filterName, inputValue) {
   switch (filterName) {
     case "package": {
diff --git a/workspaces/cli/public/components/command-palette/search-chip.js b/workspaces/cli/public/components/command-palette/search-chip.js
index c1a748e3..f9594b26 100644
--- a/workspaces/cli/public/components/command-palette/search-chip.js
+++ b/workspaces/cli/public/components/command-palette/search-chip.js
@@ -58,6 +58,14 @@ class SearchChip extends LitElement {
     value: { type: String }
   };
 
+  constructor() {
+    super();
+    /** @type {string} */
+    this.filter = "";
+    /** @type {string} */
+    this.value = "";
+  }
+
   #onRemove = () => {
     this.dispatchEvent(new CustomEvent("remove", { bubbles: true, composed: true }));
   };
diff --git a/workspaces/cli/public/components/expandable/expandable.js b/workspaces/cli/public/components/expandable/expandable.js
index e170fe87..4a945036 100644
--- a/workspaces/cli/public/components/expandable/expandable.js
+++ b/workspaces/cli/public/components/expandable/expandable.js
@@ -3,13 +3,9 @@ import { LitElement, html, css } from "lit";
 import { when } from "lit/directives/when.js";
 
 // Import Internal Dependencies
-import { currentLang } from "../../common/utils";
+import { getI18n } from "../../common/utils";
 import "../icon/icon.js";
 
-/**
- * @typedef {Record<string, { home: { showMore: string, showLess: string } }>} I18nLanguage
- */
-
 /**
  * "Expandable" web component displaying a toggle button with an icon.
  * @element expandable-span
@@ -58,19 +54,15 @@ span.expandable nsecure-icon {
   }
 
   render() {
-    const lang = currentLang();
-    const i18n =
-      /** @type I18nLanguage */
-      (window.i18n);
-    const translations = i18n[lang].home;
+    const i18n = getI18n();
 
     return html`
       <span data-value=${this.isClosed ? "closed" : "opened"}  @click=${this.#handleClick} class="expandable">
         ${when(this.isClosed,
           () => html`<nsecure-icon name="plus"></nsecure-icon>
-        <p>${translations.showMore}</p>`,
+        <p>${i18n.home.showMore}</p>`,
           () => html`<nsecure-icon name="minus"></nsecure-icon>
-        <p>${translations.showLess}</p>`
+        <p>${i18n.home.showLess}</p>`
         )}
       </span>
 `;
diff --git a/workspaces/cli/public/components/file-box/file-box.js b/workspaces/cli/public/components/file-box/file-box.js
index b80effdb..2be841a3 100644
--- a/workspaces/cli/public/components/file-box/file-box.js
+++ b/workspaces/cli/public/components/file-box/file-box.js
@@ -5,7 +5,7 @@ import { when } from "lit/directives/when.js";
 // Import Internal Dependencies
 import "../icon/icon.js";
 
-class FileBox extends LitElement {
+export class FileBox extends LitElement {
   static styles = css`
 .box-file-info {
   display: flex;
@@ -103,8 +103,11 @@ class FileBox extends LitElement {
     super();
     this.title = "";
     this.fileName = "";
+    /** @type {string | null} */
     this.titleHref = "#";
+    /** @type {string | null} */
     this.fileHref = null;
+    /** @type {string | null} */
     this.severity = null;
   }
 
diff --git a/workspaces/cli/public/components/gauge/gauge.js b/workspaces/cli/public/components/gauge/gauge.js
index f3ddc259..56acf071 100644
--- a/workspaces/cli/public/components/gauge/gauge.js
+++ b/workspaces/cli/public/components/gauge/gauge.js
@@ -7,7 +7,15 @@ import { when } from "lit/directives/when.js";
 import { EVENTS } from "../../core/events.js";
 import "../expandable/expandable.js";
 
-class Gauge extends LitElement {
+/**
+ * @typedef {Object} GaugeItem
+ * @property {string} name
+ * @property {number} value
+ * @property {string | null} [link]
+ * @property {string[] | null} [chips]
+ */
+
+export class Gauge extends LitElement {
   static styles = css`
 .gauge {
   display: flex;
@@ -110,10 +118,14 @@ class Gauge extends LitElement {
 
   constructor() {
     super();
+    /** @type {GaugeItem[]} */
     this.data = [];
     this.maxLength = 8;
     this.isClosed = true;
-    this.settingsChanged = ({ detail: { theme } }) => {
+    /** @type {string} */
+    this.theme = "";
+    this.settingsChanged = (/** @type {Event} */ event) => {
+      const { theme } = /** @type {CustomEvent<{ theme: string }>} */ (event).detail;
       if (theme !== this.theme) {
         this.theme = theme;
       }
@@ -147,6 +159,9 @@ class Gauge extends LitElement {
     </div>`;
   }
 
+  /**
+   * @param {{ text: string, value: number, chips: string[] | null, link: string | null, length: number }} params
+   */
   #createLine({
     text, value, chips, link, length
   }) {
@@ -157,7 +172,7 @@ class Gauge extends LitElement {
         <span>${value}</span>
     </div>
     ${when(chips,
-      () => html`<div class="line--column border-bottom">${this.#createChips(chips)}</div>`,
+      () => html`<div class="line--column border-bottom">${this.#createChips(/** @type {string[]} */ (chips))}</div>`,
       () => nothing)}
 `;
 
@@ -165,7 +180,7 @@ class Gauge extends LitElement {
     ${when(link !== null,
       () => html`
     <div class="clickable line" @click=${() => {
-      window.open(link, "_blank");
+      window.open(/** @type {string} */ (link), "_blank");
     }}>
       ${lineColumn}
     </div>
@@ -178,6 +193,9 @@ class Gauge extends LitElement {
     `;
   }
 
+  /**
+   * @param {string[]} chips
+   */
   #createChips(chips) {
     return html`
     ${repeat(chips,
@@ -186,6 +204,9 @@ class Gauge extends LitElement {
 `;
   }
 
+  /**
+   * @param {number} percent
+   */
   #createGaugeBar(percent) {
     return html`
     <div class="gauge--bar">
@@ -193,6 +214,10 @@ class Gauge extends LitElement {
     </div>`;
   }
 
+  /**
+   * @param {number} value
+   * @param {number} length
+   */
   #pourcentFromValue(value, length) {
     return Math.round((value / length) * 100);
   }
diff --git a/workspaces/cli/public/components/icon/icon.js b/workspaces/cli/public/components/icon/icon.js
index 1e0d7183..b3ebbdcc 100644
--- a/workspaces/cli/public/components/icon/icon.js
+++ b/workspaces/cli/public/components/icon/icon.js
@@ -199,12 +199,18 @@ export class Icon extends LitElement {
     name: { type: String }
   };
 
+  constructor() {
+    super();
+    /** @type {string} */
+    this.name = "";
+  }
+
   render() {
     if (!(this.name in kIcons)) {
       return nothing;
     }
 
-    return kIcons[this.name];
+    return kIcons[/** @type {keyof typeof kIcons} */ (this.name)];
   }
 }
 
diff --git a/workspaces/cli/public/components/items-list/items-list.js b/workspaces/cli/public/components/items-list/items-list.js
index d8e1289f..5d3c59e1 100644
--- a/workspaces/cli/public/components/items-list/items-list.js
+++ b/workspaces/cli/public/components/items-list/items-list.js
@@ -63,9 +63,11 @@ justify-content: start;
 
   constructor() {
     super();
+    /** @type {string[]} */
     this.items = [];
     this.isClosed = true;
     this.itemsToShowLength = 5;
+    /** @type {((item: string) => void) | null} */
     this.onClickItem = null;
     this.variant = "column";
     this.shouldShowEveryItems = false;
@@ -85,7 +87,7 @@ justify-content: start;
       (item) => item,
       (item) => (typeof this.onClickItem === "function"
         ? html`<li class="clickable"  @click=${() => {
-          this.onClickItem(item);
+          /** @type {(item: string) => void} */ (this.onClickItem)(item);
         }}>${item}</li>`
         : html`<li>${item}</li>`))
     }
diff --git a/workspaces/cli/public/components/items-list/view-model.js b/workspaces/cli/public/components/items-list/view-model.js
index 736f804c..da5643f6 100644
--- a/workspaces/cli/public/components/items-list/view-model.js
+++ b/workspaces/cli/public/components/items-list/view-model.js
@@ -1,3 +1,10 @@
+/**
+ * @param {Object} params
+ * @param {string[]} params.items
+ * @param {boolean} params.isClosed
+ * @param {number} params.itemsToShowLength
+ * @param {boolean} [params.shouldShowEveryItems]
+ */
 export function selectVisibleItems({
   items, isClosed, itemsToShowLength, shouldShowEveryItems = false
 }) {
diff --git a/workspaces/cli/public/components/legend/legend.js b/workspaces/cli/public/components/legend/legend.js
index 45bc28af..e4538600 100644
--- a/workspaces/cli/public/components/legend/legend.js
+++ b/workspaces/cli/public/components/legend/legend.js
@@ -3,7 +3,7 @@ import { LitElement, html, css, nothing } from "lit";
 import { COLORS } from "@nodesecure/vis-network";
 
 // Import Internal Dependencies
-import { currentLang } from "../../common/utils.js";
+import { getI18n } from "../../common/utils.js";
 
 class Legend extends LitElement {
   static properties = {
@@ -83,7 +83,7 @@ class Legend extends LitElement {
     }
 
     const colors = COLORS.LIGHT;
-    const { legend } = window.i18n[currentLang()];
+    const { legend } = getI18n();
 
     return html`
      <div class="container">
@@ -95,6 +95,10 @@ class Legend extends LitElement {
     `;
   }
 
+  /**
+   * @param {typeof COLORS.LIGHT[keyof typeof COLORS.LIGHT]} theme
+   * @param {string} text
+   */
   #createLegendBoxElement(
     theme,
     text
diff --git a/workspaces/cli/public/components/locked-navigation/locked-navigation.js b/workspaces/cli/public/components/locked-navigation/locked-navigation.js
index 0a15907e..24209d28 100644
--- a/workspaces/cli/public/components/locked-navigation/locked-navigation.js
+++ b/workspaces/cli/public/components/locked-navigation/locked-navigation.js
@@ -56,6 +56,10 @@ export class LockedNavigation extends LitElement {
   constructor() {
     super();
     this.isLocked = false;
+    /** @type {string} */
+    this.nextLabel = "";
+    /** @type {string} */
+    this.prevLabel = "";
 
     this.lock = () => {
       this.isLocked = true;
diff --git a/workspaces/cli/public/components/locker/locker.js b/workspaces/cli/public/components/locker/locker.js
index 55a8a327..d5f4be14 100644
--- a/workspaces/cli/public/components/locker/locker.js
+++ b/workspaces/cli/public/components/locker/locker.js
@@ -81,6 +81,8 @@ export class Locker extends LitElement {
     this.locked = false;
     this.unlockAuthorized = true;
     this.isNetworkViewHidden = false;
+    /** @type {import("@nodesecure/vis-network").NodeSecureNetwork | undefined} */
+    this.nsn = undefined;
     this.hideNetworkView = () => {
       if (this.isNetworkViewHidden) {
         return;
@@ -95,14 +97,15 @@ export class Locker extends LitElement {
       this.isNetworkViewHidden = false;
     };
 
-    this.onKeyDown = (event) => {
-      const isTargetInput = event.target.tagName === "INPUT";
-      const isTargetPopup = event.target.id === "popup--background";
+    this.onKeyDown = (/** @type {KeyboardEvent} */ event) => {
+      const target = /** @type {HTMLElement} */ (event.target);
+      const isTargetInput = target.tagName === "INPUT";
+      const isTargetPopup = target.id === "popup--background";
       if (this.isNetworkViewHidden || isTargetInput || isTargetPopup) {
         return;
       }
 
-      const hotkeys = JSON.parse(localStorage.getItem("hotkeys"));
+      const hotkeys = JSON.parse(/** @type {string} */ (localStorage.getItem("hotkeys")));
       switch (event.key.toUpperCase()) {
         case hotkeys.lock: {
           this.auto();
@@ -126,16 +129,21 @@ export class Locker extends LitElement {
     super.disconnectedCallback();
   }
 
+  /**
+   * @param {import("lit").PropertyValues<this>} changedProperties
+   */
   updated(changedProperties) {
     if (changedProperties.has("nsn")) {
-      const oldNsn = changedProperties.get("nsn");
+      const oldNsn = /** @type {import("@nodesecure/vis-network").NodeSecureNetwork | undefined} */ (
+        changedProperties.get("nsn")
+      );
 
       if (oldNsn) {
-        oldNsn.network.off("highlight_done", this.highlightDone);
+        oldNsn.network.off(/** @type {any} */ ("highlight_done"), this.highlightDone);
       }
 
       if (this.nsn) {
-        this.nsn.network.on("highlight_done", this.highlightDone);
+        this.nsn.network.on(/** @type {any} */ ("highlight_done"), this.highlightDone);
       }
     }
   }
@@ -152,14 +160,14 @@ export class Locker extends LitElement {
         <div class=${iconClasses}>
         <nsecure-icon  name=${this.locked ? "lock" : "unlock"}></nsecure-icon>
         </div>
-        <p>${this.locked ? window.i18n[utils.currentLang()].network.locked
-          : window.i18n[utils.currentLang()].network.unlocked}</p>
+        <p>${this.locked ? utils.getI18n().network.locked
+          : utils.getI18n().network.unlocked}</p>
       </div>`;
   }
 
   auto() {
     // Refuse locking if there is no multi selections
-    if (this.nsn.lastHighlightedIds === null) {
+    if (!this.nsn || this.nsn.lastHighlightedIds === null) {
       return;
     }
 
@@ -198,13 +206,17 @@ export class Locker extends LitElement {
     window.dispatchEvent(new CustomEvent(EVENTS.UNLOCKED, { composed: true }));
 
     // No node selected, so we reset highlight
+    if (!this.nsn) {
+      return;
+    }
+
     const selectedNode = window.networkNav.currentNodeParams;
     if (selectedNode === null) {
       this.nsn.resetHighlight();
     }
     else if (this.nsn.lastHighlightedIds !== null) {
       this.nsn.lastHighlightedIds = null;
-      this.nsn.neighbourHighlight(selectedNode, window.i18n[utils.currentLang()]);
+      this.nsn.neighbourHighlight(/** @type {any} */ (selectedNode), /** @type {any} */ (utils.getI18n()));
     }
   }
 }
diff --git a/workspaces/cli/public/components/navigation/navigation.js b/workspaces/cli/public/components/navigation/navigation.js
index 845c4d4a..0bedf7a2 100644
--- a/workspaces/cli/public/components/navigation/navigation.js
+++ b/workspaces/cli/public/components/navigation/navigation.js
@@ -16,73 +16,87 @@ export class ViewNavigation {
   static DefaultActiveMenu = "network--view";
 
   constructor() {
+    /** @type {HTMLElement | null} */
     this.activeMenu = null;
+    /** @type {Map<string, HTMLElement>} */
     this.menus = new Map();
 
     const defaultMenu = this.getAnchor();
     const navElements = document.querySelectorAll("#view-navigation li");
     for (const navigationMenu of navElements) {
       const menuName = navigationMenu.getAttribute("data-menu");
-      this.menus.set(menuName, navigationMenu);
+      if (!menuName) {
+        continue;
+      }
+      this.menus.set(menuName, /** @type {HTMLElement} */ (navigationMenu));
 
       if (menuName === defaultMenu) {
-        this.setNewActiveMenu(navigationMenu);
+        this.setNewActiveMenu(/** @type {HTMLElement} */ (navigationMenu));
       }
 
-      navigationMenu.addEventListener("click", () => this.onNavigationSelected(navigationMenu));
+      navigationMenu.addEventListener("click", () => this.onNavigationSelected(/** @type {HTMLElement} */ (navigationMenu)));
     }
 
     document.addEventListener("keydown", (event) => {
-      const isWikiOpen = document.getElementById("documentation-root-element").classList.contains("slide-in");
-      const isTargetPopup = event.target.id === "popup--background";
+      const wikiRoot = /** @type {HTMLElement} */ (document.getElementById("documentation-root-element"));
+      const isWikiOpen = wikiRoot.classList.contains("slide-in");
+      const eventTarget = /** @type {HTMLElement} */ (event.target);
+      const isTargetPopup = eventTarget.id === "popup--background";
       const isPopupOpened = document.querySelector("#popup--background.show");
-      const isTargetInput = event.target.tagName === "INPUT";
+      const isTargetInput = eventTarget.tagName === "INPUT";
       const isSearchCommandOpen = Boolean(document.querySelector("command-palette")?.open);
       if (isTargetPopup || isWikiOpen || isTargetInput || isPopupOpened || isSearchCommandOpen) {
         return;
       }
 
-      const hotkeys = JSON.parse(localStorage.getItem("hotkeys"));
+      const hotkeys = JSON.parse(/** @type {string} */ (localStorage.getItem("hotkeys")));
       switch (event.key.toUpperCase()) {
         case hotkeys.home: {
-          this.onNavigationSelected(this.menus.get("home--view"));
+          this.onNavigationSelected(/** @type {HTMLElement} */ (this.menus.get("home--view")));
           break;
         }
         case hotkeys.network: {
-          this.onNavigationSelected(this.menus.get("network--view"));
+          this.onNavigationSelected(/** @type {HTMLElement} */ (this.menus.get("network--view")));
           break;
         }
         case hotkeys.settings: {
-          this.onNavigationSelected(this.menus.get("settings--view"));
+          this.onNavigationSelected(/** @type {HTMLElement} */ (this.menus.get("settings--view")));
           break;
         }
         case hotkeys.search: {
-          this.onNavigationSelected(this.menus.get("search--view"));
+          this.onNavigationSelected(/** @type {HTMLElement} */ (this.menus.get("search--view")));
           break;
         }
         case hotkeys.tree: {
-          this.onNavigationSelected(this.menus.get("tree--view"));
+          this.onNavigationSelected(/** @type {HTMLElement} */ (this.menus.get("tree--view")));
           break;
         }
         case hotkeys.warnings: {
-          this.onNavigationSelected(this.menus.get("warnings--view"));
+          this.onNavigationSelected(/** @type {HTMLElement} */ (this.menus.get("warnings--view")));
           break;
         }
       }
     });
   }
 
+  /**
+   * @param {string} navName
+   */
   setNavByName(navName) {
-    this.onNavigationSelected(this.menus.get(navName));
+    const selectedNav = this.menus.get(navName);
+    if (!selectedNav) {
+      return;
+    }
+    this.onNavigationSelected(selectedNav);
   }
 
   /**
    * @param {!HTMLElement} selectedNav
    */
   setNewActiveMenu(selectedNav) {
-    const menuName = selectedNav.getAttribute("data-menu");
+    const menuName = /** @type {string} */ (selectedNav.getAttribute("data-menu"));
 
-    document.getElementById(menuName).classList.remove("hidden");
+    /** @type {HTMLElement} */ (document.getElementById(menuName)).classList.remove("hidden");
     selectedNav.classList.add("active");
     this.setAnchor(menuName);
 
@@ -94,10 +108,11 @@ export class ViewNavigation {
   }
 
   disableActiveMenu() {
-    const menuName = this.activeMenu.getAttribute("data-menu");
-    const view = document.getElementById(menuName);
+    const activeMenu = /** @type {HTMLElement} */ (this.activeMenu);
+    const menuName = /** @type {string} */ (activeMenu.getAttribute("data-menu"));
+    const view = /** @type {HTMLElement} */ (document.getElementById(menuName));
 
-    this.activeMenu.classList.remove("active");
+    activeMenu.classList.remove("active");
     view.classList.add("hidden");
 
     if (menuName === "network--view") {
@@ -105,6 +120,9 @@ export class ViewNavigation {
     }
   }
 
+  /**
+   * @returns {string}
+   */
   getAnchor() {
     const documentURL = new URL(document.URL);
     const anchorName = documentURL.searchParams.get("view") ?? ViewNavigation.DefaultActiveMenu;
@@ -112,11 +130,14 @@ export class ViewNavigation {
     return kAvailableView.has(anchorName) ? anchorName : ViewNavigation.DefaultActiveMenu;
   }
 
+  /**
+   * @param {string} anchorName
+   */
   setAnchor(anchorName) {
     const newDocumentURL = new URL(document.URL);
     newDocumentURL.searchParams.set("view", anchorName);
 
-    window.history.replaceState(void 0, void 0, newDocumentURL);
+    window.history.replaceState(null, "", newDocumentURL);
   }
 
   /**
@@ -131,6 +152,9 @@ export class ViewNavigation {
     }
   }
 
+  /**
+   * @param {string} menuName
+   */
   hideMenu(menuName) {
     const menu = this.menus.get(menuName);
     if (!menu) {
@@ -144,6 +168,9 @@ export class ViewNavigation {
     menu.classList.add("hidden");
   }
 
+  /**
+   * @param {string} menuName
+   */
   showMenu(menuName) {
     const menu = this.menus.get(menuName);
     if (!menu) {
diff --git a/workspaces/cli/public/components/network-breadcrumb/network-breadcrumb.js b/workspaces/cli/public/components/network-breadcrumb/network-breadcrumb.js
index 24e48156..f9bf4edb 100644
--- a/workspaces/cli/public/components/network-breadcrumb/network-breadcrumb.js
+++ b/workspaces/cli/public/components/network-breadcrumb/network-breadcrumb.js
@@ -3,9 +3,22 @@ import { LitElement, html, css, nothing } from "lit";
 
 // Import Internal Dependencies
 import { EVENTS } from "../../core/events.js";
-import { currentLang } from "../../common/utils.js";
-
-class NetworkBreadcrumb extends LitElement {
+import { getI18n } from "../../common/utils.js";
+
+/**
+ * @typedef {Object} BreadcrumbEntry
+ * @property {string} name
+ * @property {string} version
+ */
+
+/**
+ * @typedef {Object} BreadcrumbSibling
+ * @property {number} nodeId
+ * @property {string} name
+ * @property {string} version
+ */
+
+export class NetworkBreadcrumb extends LitElement {
   static styles = css`
     :host {
       --breadcrumb-bg: var(--primary);
@@ -185,10 +198,15 @@ class NetworkBreadcrumb extends LitElement {
 
   constructor() {
     super();
+    /** @type {BreadcrumbEntry | null} */
     this.root = null;
+    /** @type {BreadcrumbEntry[]} */
     this.stack = [];
+    /** @type {BreadcrumbSibling[][]} */
     this.siblings = [];
+    /** @type {import("../../types.js").CachedSpec[]} */
     this.packages = [];
+    /** @type {number | null} */
     this._openDropdown = null;
     this._rootSwitcherOpen = false;
   }
@@ -224,6 +242,9 @@ class NetworkBreadcrumb extends LitElement {
     }));
   }
 
+  /**
+   * @param {number} index
+   */
   #handleBack(index) {
     this.dispatchEvent(new CustomEvent(EVENTS.DRILL_BACK, {
       detail: { index },
@@ -232,12 +253,21 @@ class NetworkBreadcrumb extends LitElement {
     }));
   }
 
+  /**
+   * @param {number} index
+   * @param {MouseEvent} event
+   */
   #toggleDropdown(index, event) {
     event.stopPropagation();
 
     this._openDropdown = this._openDropdown === index ? null : index;
   }
 
+  /**
+   * @param {number} stackIndex
+   * @param {number} nodeId
+   * @param {MouseEvent} event
+   */
   #handleSiblingClick(stackIndex, nodeId, event) {
     event.stopPropagation();
 
@@ -249,12 +279,19 @@ class NetworkBreadcrumb extends LitElement {
     }));
   }
 
+  /**
+   * @param {MouseEvent} event
+   */
   #toggleRootSwitcher(event) {
     event.stopPropagation();
 
     this._rootSwitcherOpen = !this._rootSwitcherOpen;
   }
 
+  /**
+   * @param {string} spec
+   * @param {MouseEvent} event
+   */
   #handleRootSwitch(spec, event) {
     event.stopPropagation();
 
@@ -266,6 +303,9 @@ class NetworkBreadcrumb extends LitElement {
     }));
   }
 
+  /**
+   * @param {MouseEvent} event
+   */
   #handleRootRemove(event) {
     event.stopPropagation();
 
@@ -282,7 +322,7 @@ class NetworkBreadcrumb extends LitElement {
 
     const otherPackages = this.packages ?? [];
     const isInDrill = this.stack.length > 0;
-    const i18n = window.i18n[currentLang()];
+    const i18n = getI18n();
 
     return html`
       ${otherPackages.length > 0 ? html`
@@ -296,7 +336,7 @@ class NetworkBreadcrumb extends LitElement {
               <span class="dropdown-header">${i18n.network.switchPayload}</span>
               <div class="dropdown-separator"></div>
               ${otherPackages.map((pkg) => html`
-                <button @click="${(event) => this.#handleRootSwitch(pkg.spec, event)}">
+                <button @click="${(/** @type {MouseEvent} */ event) => this.#handleRootSwitch(pkg.spec, event)}">
                   ${pkg.spec}
                 </button>
               `)}
@@ -321,12 +361,14 @@ class NetworkBreadcrumb extends LitElement {
                 ? html`
                 <button
                   class="separator has-siblings"
-                  @click="${(event) => this.#toggleDropdown(stackIndex, event)}"
+                  @click="${(/** @type {MouseEvent} */ event) => this.#toggleDropdown(stackIndex, event)}"
                 >›</button>
                 ${this._openDropdown === stackIndex ? html`
                   <div class="dropdown">
                     ${siblingList.map((sibling) => html`
-                      <button @click="${(event) => this.#handleSiblingClick(stackIndex, sibling.nodeId, event)}">
+                      <button @click="${(/** @type {MouseEvent} */ event) => this.#handleSiblingClick(
+                        stackIndex, sibling.nodeId, event
+                      )}">
                         ${sibling.name}@${sibling.version}
                       </button>
                     `)}
diff --git a/workspaces/cli/public/components/npm-avatar/npm-avatar.js b/workspaces/cli/public/components/npm-avatar/npm-avatar.js
index be917c03..74e69af6 100644
--- a/workspaces/cli/public/components/npm-avatar/npm-avatar.js
+++ b/workspaces/cli/public/components/npm-avatar/npm-avatar.js
@@ -1,8 +1,10 @@
+/* eslint-disable @openally/imports */
 // Import Third-party Dependencies
 import { LitElement, html } from "lit";
 import { when } from "lit/directives/when.js";
 
 // Import Internal Dependencies
+// @ts-expect-error - static asset import has no type declarations; the bundler resolves it to a URL string
 import avatarURL from "../../img/avatar-default.png";
 
 export class NpmAvatar extends LitElement {
@@ -12,16 +14,26 @@ export class NpmAvatar extends LitElement {
     email: { type: String }
   };
 
+  constructor() {
+    super();
+    /** @type {string} */
+    this.imgStyle = "";
+    /** @type {string} */
+    this.avatar = "";
+    /** @type {string} */
+    this.email = "";
+  }
+
   render() {
     return when(
       this.avatar,
       () => html`<img style="${this.imgStyle}"  src="https://www.npmjs.com/${this.avatar}"
-              @error=${(e) => {
-                e.currentTarget.src = avatarURL;
+              @error=${(/** @type {Event} */ e) => {
+                /** @type {HTMLImageElement} */ (e.currentTarget).src = avatarURL;
               }}></img>`,
       () => html`<img style="${this.imgStyle}" src="https://unavatar.io/${this.email}"
-               @error=${(e) => {
-                  e.currentTarget.src = avatarURL;
+               @error=${(/** @type {Event} */ e) => {
+                  /** @type {HTMLImageElement} */ (e.currentTarget).src = avatarURL;
                 }}></img>`
     );
   }
diff --git a/workspaces/cli/public/components/package/header/header.js b/workspaces/cli/public/components/package/header/header.js
index 3f3ea94b..21e0d5a0 100644
--- a/workspaces/cli/public/components/package/header/header.js
+++ b/workspaces/cli/public/components/package/header/header.js
@@ -4,18 +4,31 @@ import { getFlagsEmojisInlined, FLAGS_EMOJIS } from "@nodesecure/vis-network";
 // Import Internal Dependencies
 import * as utils from "../../../common/utils.js";
 
+/**
+ * @typedef {Object} HeaderLink
+ * @property {string | null} href
+ * @property {string} [text]
+ * @property {string} [image]
+ * @property {string} [icon]
+ * @property {boolean} showInHeader
+ */
+
 export class PackageHeader {
   static ExternalLinks = {
     socket: "https://socket.dev/npm/package/"
   };
 
+  /**
+   * @param {import("../package.js").PackageInfo} pkg
+   */
   constructor(pkg) {
     this.package = pkg;
     this.nsn = this.package.nsn;
   }
 
   /**
-   * @param {!HTMLTemplateElement} clone
+   * @param {!DocumentFragment} clone
+   * @returns {Record<string, HeaderLink>}
    */
   generate(clone) {
     const {
@@ -26,14 +39,12 @@ export class PackageHeader {
       flags
     } = this.package.dependencyVersion;
 
-    const [nameDomElement, versionDomElement, menuDomElement, descriptionDomElement, linksDomElement, flagsDomElement] = [
-      clone.querySelector(".name"),
-      clone.querySelector(".version"),
-      clone.querySelector(".info"),
-      clone.querySelector(".description"),
-      clone.querySelector(".links"),
-      clone.querySelector(".flags")
-    ];
+    const nameDomElement = /** @type {HTMLElement} */ (clone.querySelector(".name"));
+    const versionDomElement = /** @type {HTMLElement} */ (clone.querySelector(".version"));
+    const menuDomElement = /** @type {HTMLElement} */ (clone.querySelector(".info"));
+    const descriptionDomElement = /** @type {HTMLElement} */ (clone.querySelector(".description"));
+    const linksDomElement = /** @type {HTMLElement} */ (clone.querySelector(".links"));
+    const flagsDomElement = /** @type {HTMLElement} */ (clone.querySelector(".flags"));
 
     // Name and Version
     nameDomElement.textContent = packageName;
@@ -43,7 +54,7 @@ export class PackageHeader {
     const menu = this.renderMenu(packageName);
     menuDomElement.insertAdjacentElement("afterend", menu);
     menuDomElement.addEventListener("click", () => {
-      const menu = menuDomElement.parentNode.querySelector(".info-menu");
+      const menu = /** @type {HTMLElement} */ (/** @type {ParentNode} */ (menuDomElement.parentNode).querySelector(".info-menu"));
       if (menu.classList.contains("hidden")) {
         menu.classList.remove("hidden");
       }
@@ -66,28 +77,29 @@ export class PackageHeader {
     }
 
     // Links
-    const repositoryUrl = this.package.dependency.versions[packageVersion].links.repository;
+    const repositoryUrl = this.package.dependency.versions[packageVersion].links?.repository;
     const repositoryUrlHostname = repositoryUrl ? new URL(repositoryUrl).hostname : null;
 
+    /** @type {Record<string, HeaderLink>} */
     const links = {
       npm: {
-        href: this.package.dependency.versions[packageVersion].links.npm,
+        href: this.package.dependency.versions[packageVersion].links?.npm ?? null,
         text: "NPM",
         image: "npm-icon.svg",
         showInHeader: true
       },
       homepage: {
-        href: this.package.dependency.versions[packageVersion].links.homepage,
+        href: this.package.dependency.versions[packageVersion].links?.homepage ?? null,
         showInHeader: false
       },
       github: {
-        href: repositoryUrl,
+        href: repositoryUrl ?? null,
         text: "GitHub",
         image: "github-mark.png",
         showInHeader: repositoryUrlHostname === "github.com"
       },
       gitlab: {
-        href: repositoryUrl,
+        href: repositoryUrl ?? null,
         text: "GitLab",
         image: "gitlab-logo.png",
         showInHeader: repositoryUrlHostname === "gitlab.com"
@@ -98,7 +110,7 @@ export class PackageHeader {
         icon: "icon-cubes",
         showInHeader: true
       },
-      licenses: this.getLicenses(licenses)
+      licenses: /** @type {any} */ (this.getLicenses(licenses))
     };
     linksDomElement.appendChild(this.renderLinks(links));
 
@@ -116,7 +128,12 @@ export class PackageHeader {
     return links;
   }
 
+  /**
+   * @param {any[]} licenses
+   * @returns {HeaderLink[]}
+   */
   getLicenses(licenses) {
+    /** @type {Record<string, HeaderLink>} */
     const licensesResult = Object.create(null);
 
     for (const license of licenses) {
@@ -125,7 +142,7 @@ export class PackageHeader {
           continue;
         }
         licensesResult[licenseName] = {
-          href: licenseUrl,
+          href: /** @type {string} */ (licenseUrl),
           text: licenseName.toLocaleUpperCase(),
           icon: "icon-vcard",
           showInHeader: true
@@ -136,6 +153,10 @@ export class PackageHeader {
     return Object.values(licensesResult);
   }
 
+  /**
+   * @param {Record<string, HeaderLink>} links
+   * @returns {DocumentFragment}
+   */
   renderLinks(links) {
     const fragment = document.createDocumentFragment();
     for (const [linkName, linkAttributes] of Object.entries(links)) {
@@ -153,7 +174,7 @@ export class PackageHeader {
         childs: [
           linkImageOrIcon,
           utils.createDOMElement("a", {
-            text: linkAttributes.text,
+            text: linkAttributes.text ?? null,
             attributes: {
               href: linkAttributes.href,
               target: "_blank",
@@ -169,17 +190,18 @@ export class PackageHeader {
 
   /**
    * @param {!string} packageName
-   * @returns {HTMLElement[]}
+   * @returns {HTMLElement}
    */
   renderMenu(packageName) {
     const { socket } = PackageHeader.ExternalLinks;
-    const i18n = window.i18n[utils.currentLang()];
+    const i18n = utils.getI18n();
+    const helpers = /** @type {Record<string, string>} */ (/** @type {unknown} */ (i18n.package_info.helpers));
 
     return utils.createDOMElement("div", {
       classList: ["info-menu", "hidden"],
       childs: [
         utils.createDOMElement("div", {
-          text: i18n.package_info.helpers.thirdPartyTools,
+          text: helpers.thirdPartyTools,
           classList: ["info-menu-title"]
         }),
         utils.createDOMElement("a", {
@@ -193,21 +215,28 @@ export class PackageHeader {
     });
   }
 
+  /**
+   * @param {string[]} flags
+   * @returns {DocumentFragment | null}
+   */
   renderFlags(flags) {
     const { warnings, deprecated } = this.package.dependencyVersion;
     const warningsLength = warnings.filter(
-      (warning) => !window.settings.config.ignore.warnings.has(warning.kind)
+      (/** @type {{ kind: string }} */ warning) => !utils.getSettingsConfig().ignore.warnings.has(warning.kind)
     ).length;
 
-    const textContent = getFlagsEmojisInlined(flags, new Set(window.settings.config.ignore.flags));
+    const textContent = getFlagsEmojisInlined(flags, new Set(utils.getSettingsConfig().ignore.flags));
 
     if (textContent === "") {
       return null;
     }
 
+    const FLAGS = /** @type {Record<string, import("@nodesecure/flags").FlagDescriptor>} */ (
+      /** @type {unknown} */ (this.package.nsn.secureDataSet.FLAGS)
+    );
     const flagsMap = new Map(
       Object
-        .entries(this.package.nsn.secureDataSet.FLAGS)
+        .entries(FLAGS)
         .map(([name, row]) => [row.emoji, { ...row, name }])
     );
     const segmenter = new Intl.Segmenter("en", {
@@ -217,21 +246,22 @@ export class PackageHeader {
 
     const fragment = document.createDocumentFragment();
     for (const icon of Array.from(segitr, ({ segment }) => segment)) {
-      if (flagsMap.has(icon)) {
-        const { name } = flagsMap.get(icon);
+      const flagEntry = flagsMap.get(icon);
+      if (flagEntry) {
+        const { name } = flagEntry;
         if (name === "warnings" && warningsLength === 0) {
           continue;
         }
 
         const htmlElement = createFlagInfoBulle(
           icon,
-          name === "isDeprecated" ? deprecated : flagsMap.get(icon).tooltipDescription
+          name === "isDeprecated" ? (deprecated ?? "") : flagEntry.tooltipDescription
         );
         htmlElement.addEventListener("click", () => {
-          const { name } = flagsMap.get(icon);
+          const activeFlagEntry = /** @type {{ name: string }} */ (flagsMap.get(icon));
 
           window.wiki.header.setNewActiveView("flags");
-          window.wiki.navigation.flags.setNewActiveMenu(name);
+          window.wiki.navigation.flags.setNewActiveMenu(activeFlagEntry.name);
           window.wiki.open();
         });
 
@@ -243,29 +273,36 @@ export class PackageHeader {
   }
 
   #hasDuplicate() {
-    return this.package.dependencyVersion.flags.some((title) => title === "hasDuplicate") &&
-      !window.settings.config.ignore.warnings.has("hasDuplicate") &&
+    return this.package.dependencyVersion.flags.some((/** @type {string} */ title) => title === "hasDuplicate") &&
+      !utils.getSettingsConfig().ignore.warnings.has("hasDuplicate") &&
       "isDuplicated" in FLAGS_EMOJIS;
   }
 
+  /**
+   * @param {DocumentFragment} clone
+   */
   #renderHasDuplicateBtn(clone) {
     const hasDuplicateBtn = utils.createDOMElement("button",
       { classList: ["has-duplicate"], text: FLAGS_EMOJIS.isDuplicated });
 
     const packagesList = this.nsn.secureDataSet.findPackagesByName(this.package.dependencyVersion.name)
-      .map(({ name, version }) => `${name}@${version}`);
+      .map((/** @type {{ name: string, version: string }} */ { name, version }) => `${name}@${version}`);
 
     hasDuplicateBtn.addEventListener("click", () => {
       const nodeIds = [...this.nsn.findNodeIds(new Set(packagesList))];
       this.nsn.highlightMultipleNodes(nodeIds);
-      window.locker.lock();
+      /** @type {import("../../locker/locker.js").Locker} */ (window.locker).lock();
     });
 
-    const packageDescDiv = clone.querySelector(".package-description");
+    const packageDescDiv = /** @type {HTMLElement} */ (clone.querySelector(".package-description"));
     packageDescDiv.appendChild(hasDuplicateBtn);
   }
 }
 
+/**
+ * @param {string} text
+ * @param {string} description
+ */
 function createFlagInfoBulle(text, description) {
   const spanElement = utils.createDOMElement("span", { text: description });
 
diff --git a/workspaces/cli/public/components/package/package.js b/workspaces/cli/public/components/package/package.js
index 81c7c3de..40ffa459 100644
--- a/workspaces/cli/public/components/package/package.js
+++ b/workspaces/cli/public/components/package/package.js
@@ -3,16 +3,19 @@ import "../bundlephobia/bundlephobia.js";
 import { PackageHeader } from "./header/header.js";
 import * as Pannels from "./pannels/index.js";
 import { EVENTS } from "../../core/events.js";
+import * as utils from "../../common/utils.js";
 
 export class PackageInfo {
   static DOMElementName = "package-info";
   /**
    * Used to force a specific menu to open when focusing a package in the network
+   *
+   * @type {string | null}
    */
   static ForcedPackageMenu = null;
 
   static close() {
-    const domElement = document.getElementById(PackageInfo.DOMElementName);
+    const domElement = /** @type {HTMLElement} */ (document.getElementById(PackageInfo.DOMElementName));
     if (domElement.classList.contains("slide-in")) {
       domElement.setAttribute("class", "slide-out");
     }
@@ -24,16 +27,16 @@ export class PackageInfo {
    * @param {"previous"|"next"} direction
    */
   static switch(direction) {
-    const packageHTMLElement = document.getElementById(PackageInfo.DOMElementName);
-    const packageNavigation = packageHTMLElement.querySelector(".package-navigation");
+    const packageHTMLElement = /** @type {HTMLElement} */ (document.getElementById(PackageInfo.DOMElementName));
+    const packageNavigation = /** @type {HTMLElement} */ (packageHTMLElement.querySelector(".package-navigation"));
     const activeElement = packageNavigation.querySelector(".active");
 
     const enabledChilren = [...packageNavigation.children].filter((child) => child.classList.contains("disabled") === false);
-    const activeElementIndex = [...enabledChilren].indexOf(activeElement);
+    const activeElementIndex = [...enabledChilren].indexOf(/** @type {Element} */ (activeElement));
 
-    const nextElement = direction === "next"
+    const nextElement = /** @type {HTMLElement} */ (direction === "next"
       ? enabledChilren[enabledChilren.length === activeElementIndex + 1 ? 1 : activeElementIndex + 1]
-      : enabledChilren[activeElementIndex === 1 ? enabledChilren.length - 1 : activeElementIndex - 1];
+      : enabledChilren[activeElementIndex === 1 ? enabledChilren.length - 1 : activeElementIndex - 1]);
 
     nextElement.click();
   }
@@ -43,9 +46,9 @@ export class PackageInfo {
    * @param {"up"|"down"} direction
    */
   static scroll(direction) {
-    const packageHTMLElement = document.getElementById(PackageInfo.DOMElementName);
-    const scrollableContainer = [...packageHTMLElement.querySelectorAll(".package-container")]
-      .find((child) => child.classList.contains("hidden") === false);
+    const packageHTMLElement = /** @type {HTMLElement} */ (document.getElementById(PackageInfo.DOMElementName));
+    const scrollableContainer = /** @type {HTMLElement} */ ([...packageHTMLElement.querySelectorAll(".package-container")]
+      .find((child) => child.classList.contains("hidden") === false));
 
     if (scrollableContainer.scrollHeight <= scrollableContainer.clientHeight) {
       return;
@@ -56,6 +59,7 @@ export class PackageInfo {
 
   /**
    * @param {*} dependencyVersionData
+   * @param {number} currentNode
    * @param {*} dependency
    * @param {*} nsn
    */
@@ -66,56 +70,62 @@ export class PackageInfo {
     dependency,
     nsn
   ) {
+    /** @type {Map<string, any>} */
     this.codeCache = new Map();
+    /** @type {Map<string, HTMLElement>} */
     this.menus = new Map();
     this.nsn = nsn;
     this.currentNode = currentNode;
     this.dependencyVersion = dependencyVersionData;
     this.dependency = dependency;
+    /** @type {HTMLElement} */
+    this.activeNavigation = /** @type {any} */ (undefined);
+    /** @type {Record<string, import("./header/header.js").HeaderLink>} */
+    this.links = /** @type {any} */ (undefined);
 
     this.initialize();
   }
 
   initialize() {
-    const packageHTMLElement = document.getElementById(PackageInfo.DOMElementName);
+    const packageHTMLElement = /** @type {HTMLElement} */ (document.getElementById(PackageInfo.DOMElementName));
     packageHTMLElement.innerHTML = "";
     packageHTMLElement.appendChild(
       this.render()
     );
 
-    const panFiles = packageHTMLElement.querySelector("#pan-files");
+    const panFiles = /** @type {HTMLElement} */ (packageHTMLElement.querySelector("#pan-files"));
     const files = document.createElement("package-files");
     files.package = this;
     files.id = "pan-files";
     files.classList.add("package-container", "hidden");
-    panFiles.parentElement.replaceChild(files, panFiles);
+    /** @type {HTMLElement} */ (panFiles.parentElement).replaceChild(files, panFiles);
 
-    const panLicenses = packageHTMLElement.querySelector("#pan-licenses");
+    const panLicenses = /** @type {HTMLElement} */ (packageHTMLElement.querySelector("#pan-licenses"));
     const licenses = document.createElement("package-licenses");
     licenses.package = this;
     licenses.id = "pan-licenses";
     licenses.classList.add("package-container", "hidden");
-    panLicenses.parentElement.replaceChild(licenses, panLicenses);
+    /** @type {HTMLElement} */ (panLicenses.parentElement).replaceChild(licenses, panLicenses);
 
-    const panVulns = packageHTMLElement.querySelector("#pan-vulnerabilities");
+    const panVulns = /** @type {HTMLElement} */ (packageHTMLElement.querySelector("#pan-vulnerabilities"));
     const vulns = document.createElement("package-vulnerabilities");
     vulns.package = this;
     vulns.vulnerabilityStrategy = window.vulnerabilityStrategy;
-    vulns.theme = window.settings.config.theme;
+    vulns.theme = utils.getSettingsConfig().theme;
     vulns.id = "pan-vulnerabilities";
     vulns.classList.add("package-container", "hidden");
-    panVulns.parentElement.replaceChild(vulns, panVulns);
+    /** @type {HTMLElement} */ (panVulns.parentElement).replaceChild(vulns, panVulns);
 
-    const panDependencies = packageHTMLElement.querySelector("#pan-dependencies");
+    const panDependencies = /** @type {HTMLElement} */ (packageHTMLElement.querySelector("#pan-dependencies"));
     const scripts = document.createElement("package-scripts");
     scripts.package = this;
     scripts.isHidden = this.dependencyVersion.hidden;
     scripts.id = "pan-dependencies";
     scripts.classList.add("package-container", "hidden");
-    panDependencies.parentElement.replaceChild(scripts, panDependencies);
+    /** @type {HTMLElement} */ (panDependencies.parentElement).replaceChild(scripts, panDependencies);
 
     const menuToOpen = PackageInfo.ForcedPackageMenu ??
-      window.settings.config.defaultPackageMenu;
+      utils.getSettingsConfig().defaultPackageMenu;
     this.enableNavigation(menuToOpen);
     PackageInfo.ForcedPackageMenu = null;
     packageHTMLElement.setAttribute("class", "slide-in");
@@ -123,28 +133,28 @@ export class PackageInfo {
 
   /**
    * @param {HTMLElement} navElement
-   * @param {number} [count=0]
+   * @param {number | string} [count=0]
    */
   addNavigationSignal(navElement, count = 0) {
     if (count === 0) {
       navElement.classList.add("disabled");
     }
     else {
-      const counter = navElement.querySelector(".signal");
+      const counter = /** @type {HTMLElement} */ (navElement.querySelector(".signal"));
       counter.style.display = "flex";
-      counter.appendChild(document.createTextNode(count));
+      counter.appendChild(document.createTextNode(String(count)));
     }
   }
 
   /**
-   * @param {!HTMLTemplateElement} clone
+   * @param {!DocumentFragment} clone
    */
   setupSignal(clone) {
     const { flags } = this.dependencyVersion;
 
     if (flags.includes("hasScript")) {
       this.addNavigationSignal(
-        clone.getElementById("dependencies-nav-menu"),
+        /** @type {HTMLElement} */ (clone.getElementById("dependencies-nav-menu")),
         "!"
       );
     }
@@ -155,9 +165,9 @@ export class PackageInfo {
    * @returns {void}
    */
   enableNavigation(name) {
-    const div = this.menus.has(name) ?
+    const div = /** @type {HTMLElement} */ (this.menus.has(name) ?
       this.menus.get(name) :
-      this.menus.get("info");
+      this.menus.get("info"));
 
     const isActive = div.classList.contains("active");
     const isDisabled = div.classList.contains("disabled");
@@ -170,24 +180,25 @@ export class PackageInfo {
     div.classList.add("active");
     this.activeNavigation.classList.remove("active");
 
-    const currentPan = document.getElementById(`pan-${this.activeNavigation.getAttribute("data-menu")}`);
+    const currentPan = /** @type {HTMLElement} */ (
+      document.getElementById(`pan-${this.activeNavigation.getAttribute("data-menu")}`)
+    );
     currentPan.classList.add("hidden");
-    const targetPan = document.getElementById(`pan-${name}`);
+    const targetPan = /** @type {HTMLElement} */ (document.getElementById(`pan-${name}`));
     targetPan.classList.remove("hidden");
-    document.querySelector(".container-title").textContent = dataTitle;
+    /** @type {HTMLElement} */ (document.querySelector(".container-title")).textContent = dataTitle;
 
     this.activeNavigation = div;
   }
 
   render() {
-    const template = document.getElementById("package-info-template");
-    /** @type {HTMLTemplateElement} */
+    const template = /** @type {HTMLTemplateElement} */ (document.getElementById("package-info-template"));
     const clone = document.importNode(template.content, true);
 
-    this.activeNavigation = clone.querySelector(".package-navigation > div.active");
+    this.activeNavigation = /** @type {HTMLElement} */ (clone.querySelector(".package-navigation > div.active"));
     for (const div of clone.querySelectorAll(".package-navigation > div")) {
-      const dataMenu = div.getAttribute("data-menu");
-      this.menus.set(dataMenu, div);
+      const dataMenu = /** @type {string} */ (div.getAttribute("data-menu"));
+      this.menus.set(dataMenu, /** @type {HTMLElement} */ (div));
 
       div.addEventListener("click", () => this.enableNavigation(dataMenu));
     }
@@ -197,9 +208,9 @@ export class PackageInfo {
     new Pannels.Overview(this).generate(clone);
     new Pannels.Warnings(this).generate(clone);
     this.setupSignal(clone);
-    this.addNavigationSignal(clone.getElementById("vulnerabilities-nav-menu"),
+    this.addNavigationSignal(/** @type {HTMLElement} */ (clone.getElementById("vulnerabilities-nav-menu")),
       this.dependency.vulnerabilities.length);
-    if (window.settings.config.disableExternalRequests === false) {
+    if (utils.getSettingsConfig().disableExternalRequests === false) {
       new Pannels.Scorecard(this).generate(clone);
     }
 
diff --git a/workspaces/cli/public/components/package/pannels/files/files.js b/workspaces/cli/public/components/package/pannels/files/files.js
index f517c01e..1078ddbd 100644
--- a/workspaces/cli/public/components/package/pannels/files/files.js
+++ b/workspaces/cli/public/components/package/pannels/files/files.js
@@ -3,12 +3,12 @@ import { LitElement, html, css, nothing } from "lit";
 import { when } from "lit/directives/when.js";
 
 // Import Internal Dependencies
-import { currentLang } from "../../../../common/utils.js";
+import { getI18n, getSettingsConfig } from "../../../../common/utils.js";
 import "../../../bundlephobia/bundlephobia.js";
 import "../../../items-list/items-list.js";
 import { scrollbarStyle } from "../../../../common/scrollbar-style.js";
 
-class Files extends LitElement {
+export class Files extends LitElement {
   static styles = [scrollbarStyle, css`
   :host {
     display: block;
@@ -49,8 +49,14 @@ class Files extends LitElement {
     package: { type: Object }
   };
 
+  constructor() {
+    super();
+    this.package = /** @type {import("../../package.js").PackageInfo} */ (/** @type {unknown} */ (undefined));
+  }
+
   render() {
-    const { package_info: { title } } = window.i18n[currentLang()];
+    const { package_info } = getI18n();
+    const title = /** @type {Record<string, string>} */ (/** @type {unknown} */ (package_info.title));
     const { name, version, composition } = this.package.dependencyVersion;
 
     return html`
@@ -110,13 +116,16 @@ class Files extends LitElement {
   )}
 
   ${when(
-    window.settings.config.disableExternalRequests === false,
+    getSettingsConfig().disableExternalRequests === false,
     () => html`<bundle-phobia name=${name} version=${version}></bundle-phobia>`,
     () => nothing
   )}
     `;
   }
 
+  /**
+   * @param {string} fileName
+   */
   openFile = (fileName) => {
     const { name, version } = this.package.dependencyVersion;
     if (fileName === "../" || fileName === "./") {
@@ -126,7 +135,7 @@ class Files extends LitElement {
     const cleanedFile = fileName.startsWith("./") ? fileName.slice(2) : fileName;
     window
       .open(`https://unpkg.com/${name}@${version}/${cleanedFile}`, "_blank")
-      .focus();
+      ?.focus();
   };
 }
 
diff --git a/workspaces/cli/public/components/package/pannels/licenses/licenses.js b/workspaces/cli/public/components/package/pannels/licenses/licenses.js
index 1a25a7f2..50a53fbc 100644
--- a/workspaces/cli/public/components/package/pannels/licenses/licenses.js
+++ b/workspaces/cli/public/components/package/pannels/licenses/licenses.js
@@ -4,12 +4,12 @@ import { repeat } from "lit/directives/repeat.js";
 
 // Import Internal Dependencies
 import { selectLicenses } from "./view-model.js";
-import { currentLang } from "../../../../common/utils.js";
+import { getI18n } from "../../../../common/utils.js";
 import "../../../file-box/file-box.js";
 import "../../../icon/icon.js";
 import { scrollbarStyle } from "../../../../common/scrollbar-style.js";
 
-class Licenses extends LitElement {
+export class Licenses extends LitElement {
   static styles = [scrollbarStyle, css`
   :host {
   display: block;
@@ -82,18 +82,24 @@ class Licenses extends LitElement {
     package: { type: Object }
   };
 
+  constructor() {
+    super();
+    this.package = /** @type {import("../../package.js").PackageInfo} */ (/** @type {unknown} */ (undefined));
+  }
+
   render() {
     const { licenses } = this.package.dependencyVersion;
     const unpkgRoot = this.package.links.unpkg.href;
-    const { package_info } = window.i18n[currentLang()];
+    const { package_info } = getI18n();
+    const helpers = /** @type {Record<string, string>} */ (/** @type {unknown} */ (package_info.helpers));
 
     return html`
     <div class="help-dialog">
       <nsecure-icon name="info-circled"></nsecure-icon>
       <p>
-      ${package_info.helpers.spdx}
+      ${helpers.spdx}
       <a href="https://spdx.dev/about/" target="_blank"
-          rel="noopener noreferrer">${package_info.helpers.here}
+          rel="noopener noreferrer">${helpers.here}
       </a>
     </p>
     </div>
diff --git a/workspaces/cli/public/components/package/pannels/licenses/view-model.js b/workspaces/cli/public/components/package/pannels/licenses/view-model.js
index 30e07d6a..558ba6ca 100644
--- a/workspaces/cli/public/components/package/pannels/licenses/view-model.js
+++ b/workspaces/cli/public/components/package/pannels/licenses/view-model.js
@@ -1,3 +1,7 @@
+/**
+ * @param {any[]} licenses
+ * @param {string | null} unpkgRoot
+ */
 export function selectLicenses(licenses, unpkgRoot) {
   const processedLicenses = new Set();
 
diff --git a/workspaces/cli/public/components/package/pannels/overview/overview.js b/workspaces/cli/public/components/package/pannels/overview/overview.js
index fd8b2985..fe44cf23 100644
--- a/workspaces/cli/public/components/package/pannels/overview/overview.js
+++ b/workspaces/cli/public/components/package/pannels/overview/overview.js
@@ -13,6 +13,9 @@ const kEnGBDateFormat = Intl.DateTimeFormat("en-GB", {
 });
 
 export class Overview {
+  /**
+   * @param {import("../../package.js").PackageInfo} pkg
+   */
   constructor(pkg) {
     this.package = pkg;
   }
@@ -27,27 +30,27 @@ export class Overview {
   }
 
   /**
-   * @param {!HTMLTemplateElement} clone
+   * @param {!DocumentFragment} clone
    */
   generate(clone) {
     const { usedBy } = this.package.dependencyVersion;
 
-    clone.querySelector(".fields")
+    /** @type {HTMLElement} */ (clone.querySelector(".fields"))
       .appendChild(this.renderTopFields());
-    if (window.settings.config.disableExternalRequests === false) {
+    if (utils.getSettingsConfig().disableExternalRequests === false) {
       this.renderNPMStats();
     }
     else {
-      const npmStatElement = clone.querySelector("#npm-stats");
-      const npmStatTitleElement = npmStatElement.previousElementSibling;
+      const npmStatElement = /** @type {HTMLElement} */ (clone.querySelector("#npm-stats"));
+      const npmStatTitleElement = /** @type {HTMLElement} */ (npmStatElement.previousElementSibling);
       npmStatElement.classList.add("hidden");
       npmStatTitleElement.classList.add("hidden");
     }
-    clone.querySelector(".fields.releases")
+    /** @type {HTMLElement} */ (clone.querySelector(".fields.releases"))
       .appendChild(this.renderReleases());
 
     utils.createItemsList(
-      clone.getElementById("usedby"),
+      /** @type {HTMLElement} */ (clone.getElementById("usedby")),
       Object.entries(usedBy).map(([name, version]) => `${name}@${version}`),
       {
         onclick: (_, npmSpec) => this.package.nsn.focusNodeByNameAndVersion(...Object.values(utils.parseNpmSpec(npmSpec))),
@@ -57,7 +60,7 @@ export class Overview {
 
     // Fetch Github/Gitlab stats
     const githubLink = this.package.links.github;
-    if (window.settings.config.disableExternalRequests) {
+    if (utils.getSettingsConfig().disableExternalRequests) {
       setTimeout(() => {
         document.querySelector(".gitlab-overview")?.classList.add("hidden");
         document.querySelector(".github-overview")?.classList.add("hidden");
@@ -68,7 +71,7 @@ export class Overview {
         document.querySelector(".gitlab-overview")?.classList.add("hidden");
       });
 
-      this.fetchGithubStats(githubLink.href)
+      this.fetchGithubStats(/** @type {string} */ (githubLink.href))
         .catch(console.error);
     }
     else {
@@ -78,20 +81,23 @@ export class Overview {
 
       const gitlabLink = this.package.links.gitlab;
       if (gitlabLink.showInHeader) {
-        this.fetchGitlabStats(gitlabLink.href)
+        this.fetchGitlabStats(/** @type {string} */ (gitlabLink.href))
           .catch(console.error);
       }
       else {
         setTimeout(() => {
-          document.querySelector(".gitlab-overview").classList.add("hidden");
+          document.querySelector(".gitlab-overview")?.classList.add("hidden");
         });
       }
     }
 
-    clone.querySelector(".package-maintainers")
+    /** @type {HTMLElement} */ (clone.querySelector(".package-maintainers"))
       .appendChild(this.renderMaintainers());
   }
 
+  /**
+   * @param {string} githubLink
+   */
   async fetchGithubStats(githubLink) {
     const github = new URL(githubLink);
     const repoName = github.pathname.slice(
@@ -108,7 +114,7 @@ export class Overview {
 
     const starsEl = document.querySelector(".github-stars");
     const issuesEl = document.querySelector(".github-issues");
-    const forksEl = document.querySelector(".github-forks");
+    const forksEl = /** @type {HTMLElement | null} */ (document.querySelector(".github-forks"));
     if (starsEl === null || issuesEl === null || forksEl === null) {
       return;
     }
@@ -117,6 +123,9 @@ export class Overview {
     forksEl.textContent = forks_count;
   }
 
+  /**
+   * @param {string} gitlabLink
+   */
   async fetchGitlabStats(gitlabLink) {
     const gitlab = new URL(gitlabLink);
     const repoName = gitlab.pathname.slice(
@@ -130,8 +139,8 @@ export class Overview {
     } = await fetch(`https://gitlab.com/api/v4/projects/${encodeURIComponent(repoName)}`)
       .then((value) => value.json());
 
-    document.querySelector(".gitlab-stars").innerHTML = `<i class='icon-star'></i> ${star_count}`;
-    document.querySelector(".gitlab-forks").textContent = forks_count;
+    /** @type {HTMLElement} */ (document.querySelector(".gitlab-stars")).innerHTML = `<i class='icon-star'></i> ${star_count}`;
+    /** @type {HTMLElement} */ (document.querySelector(".gitlab-forks")).textContent = forks_count;
   }
 
   renderTopFields() {
@@ -139,45 +148,50 @@ export class Overview {
     const { metadata } = this.package.dependency;
 
     const fragment = document.createDocumentFragment();
-    const i18n = window.i18n[utils.currentLang()];
+    const overview = /** @type {Record<string, string>} */ (
+      /** @type {unknown} */ (utils.getI18n().package_info.overview)
+    );
 
     const { homepage } = this.package.links;
     if (typeof homepage.href === "string") {
       fragment.appendChild(utils.createLiField(
-        i18n.package_info.overview.homepage, homepage.href, { isLink: true }
+        overview.homepage, homepage.href, { isLink: true }
       ));
     }
     fragment.appendChild(utils.createLiField(
-      i18n.package_info.overview.author, this.author
+      overview.author, this.author
     ));
     fragment.appendChild(utils.createLiField(
-      i18n.package_info.overview.size, prettyBytes(size)
+      overview.size, prettyBytes(size)
     ));
     fragment.appendChild(utils.createLiField(
-      i18n.package_info.overview.dependencies, metadata.dependencyCount
+      overview.dependencies, metadata.dependencyCount
     ));
     fragment.appendChild(utils.createLiField(
-      i18n.package_info.overview.files, composition.files.length
+      overview.files, composition.files.length
     ));
     fragment.appendChild(
-      utils.createLiField("README.md", composition.files.some((file) => /README\.md/gi.test(file)) ? "✔️" : "❌")
+      utils.createLiField(
+        "README.md",
+        composition.files.some((/** @type {string} */ file) => /README\.md/gi.test(file)) ? "✔️" : "❌"
+      )
     );
     fragment.appendChild(utils.createLiField(
-      i18n.package_info.overview.tsTypings, composition.files.some((file) => /d\.ts/gi.test(file)) ? "✔️" : "❌"
+      overview.tsTypings, composition.files.some((/** @type {string} */ file) => /d\.ts/gi.test(file)) ? "✔️" : "❌"
     ));
     if ("node" in engines) {
       fragment.appendChild(utils.createLiField(
-        i18n.package_info.overview.npm, engines.node
+        overview.npm, /** @type {string} */ (engines.node)
       ));
     }
     if ("npm" in engines) {
       fragment.appendChild(utils.createLiField(
-        i18n.package_info.overview.npm, engines.npm
+        overview.npm, /** @type {string} */ (engines.npm)
       ));
     }
 
     fragment.appendChild(utils.createLiField(
-      i18n.package_info.overview.type, type
+      overview.type, type
     ));
 
     return fragment;
@@ -192,8 +206,8 @@ export class Overview {
 
     const numberFormat = new Intl.NumberFormat();
 
-    const weeklyDownloadsEl = document.querySelector("#npm-stats .weekly-downloads");
-    const weeklyTrafficEl = document.querySelector("#npm-stats .weekly-traffic");
+    const weeklyDownloadsEl = /** @type {HTMLElement | null} */ (document.querySelector("#npm-stats .weekly-downloads"));
+    const weeklyTrafficEl = /** @type {HTMLElement | null} */ (document.querySelector("#npm-stats .weekly-traffic"));
     if (weeklyDownloadsEl === null || weeklyTrafficEl === null) {
       return;
     }
@@ -204,23 +218,25 @@ export class Overview {
   renderReleases() {
     const { metadata } = this.package.dependency;
     const fragment = document.createDocumentFragment();
-    const i18n = window.i18n[utils.currentLang()];
+    const overview = /** @type {Record<string, string>} */ (
+      /** @type {unknown} */ (utils.getI18n().package_info.overview)
+    );
 
     const lastUpdatedAt = kEnGBDateFormat.format(
       new Date(this.package.dependency.metadata.lastUpdateAt)
     );
 
     fragment.appendChild(utils.createLiField(
-      i18n.package_info.overview.lastReleaseVersion, metadata.lastVersion
+      overview.lastReleaseVersion, metadata.lastVersion
     ));
     fragment.appendChild(utils.createLiField(
-      i18n.package_info.overview.lastReleaseDate, lastUpdatedAt
+      overview.lastReleaseDate, lastUpdatedAt
     ));
     fragment.appendChild(utils.createLiField(
-      i18n.package_info.overview.publishedReleases, metadata.publishedCount
+      overview.publishedReleases, metadata.publishedCount
     ));
     fragment.appendChild(utils.createLiField(
-      i18n.package_info.overview.numberPublishers, metadata.publishers.length
+      overview.numberPublishers, metadata.publishers.length
     ));
 
     return fragment;
@@ -251,7 +267,7 @@ export class Overview {
       if (result !== null) {
         divElement.addEventListener("click", () => {
           const [name, data] = result;
-          const popupMaintainer = document.createElement("popup-maintainer");
+          const popupMaintainer = /** @type {any} */ (document.createElement("popup-maintainer"));
           popupMaintainer.data = data;
           popupMaintainer.theme = this.package.nsn.secureDataSet.theme;
           popupMaintainer.nsn = this.package.nsn;
diff --git a/workspaces/cli/public/components/package/pannels/scorecard/scorecard.js b/workspaces/cli/public/components/package/pannels/scorecard/scorecard.js
index b0c62a25..bf46e13d 100644
--- a/workspaces/cli/public/components/package/pannels/scorecard/scorecard.js
+++ b/workspaces/cli/public/components/package/pannels/scorecard/scorecard.js
@@ -6,25 +6,32 @@ import * as utils from "../../../../common/utils.js";
 import { fetchScorecardData, getScorecardLink } from "../../../../common/scorecard.js";
 
 export class Scorecard {
+  /**
+   * @param {import("../../package.js").PackageInfo} pkg
+   */
   constructor(pkg) {
     this.package = pkg;
   }
 
   hide() {
-    const scorecardMenu = document.getElementById("scorecard-menu");
+    const scorecardMenu = /** @type {HTMLElement | null} */ (document.getElementById("scorecard-menu"));
     if (scorecardMenu) {
       scorecardMenu.style.display = "none";
     }
   }
 
   /**
-   * @param {!HTMLTemplateElement} clone
+   * @param {!DocumentFragment} clone
    */
   generate(clone) {
     // Note: links.github.href can be a gitlab link
     // Both links.github & links.gitlab are same, the showInHeader defines wheither its a gitlab or github link
-    const [repoName, platform] = getVCSRepositoryPathAndPlatform(this.package.links.github.href) ?? [];
-    const pannel = clone.getElementById("pan-scorecard");
+    const [repoNameRaw, platformRaw] = getVCSRepositoryPathAndPlatform(
+      /** @type {string} */ (this.package.links.github.href)
+    ) ?? [];
+    const repoName = /** @type {string} */ (repoNameRaw);
+    const platform = /** @type {string} */ (platformRaw);
+    const pannel = /** @type {HTMLElement} */ (clone.getElementById("pan-scorecard"));
 
     fetchScorecardData(repoName, platform).then((data) => {
       if (!data) {
@@ -32,12 +39,17 @@ export class Scorecard {
       }
 
       pannel.appendChild(this.renderScorecard(data, repoName, platform));
-      document.getElementById("scorecard-menu").style.display = "flex";
+      /** @type {HTMLElement} */ (document.getElementById("scorecard-menu")).style.display = "flex";
 
       return void 0;
     });
   }
 
+  /**
+   * @param {import("../../../../common/scorecard.js").ScorecardData} data
+   * @param {string} repoName
+   * @param {string} platform
+   */
   renderScorecard(data, repoName, platform) {
     const { score, checks } = data;
 
@@ -49,16 +61,17 @@ export class Scorecard {
       container.append(generateCheckElement(check));
     }
 
-    document.getElementById("ossf-score").innerText = score;
-    document.getElementById("scorecard-menu").classList.add(
+    /** @type {HTMLElement} */ (document.getElementById("ossf-score")).innerText = String(score);
+    /** @type {HTMLElement} */ (document.getElementById("scorecard-menu")).classList.add(
       getScoreColor(score)
     );
-    document.getElementById("head-score").innerText = score;
-    document
-      .querySelector(".score-header .visualizer a")
+    /** @type {HTMLElement} */ (document.getElementById("head-score")).innerText = String(score);
+    /** @type {HTMLElement} */ (document
+      .querySelector(".score-header .visualizer a"))
       .setAttribute("href", getScorecardLink(repoName, platform));
 
-    container.childNodes.forEach((check, checkKey) => {
+    container.childNodes.forEach((checkNode, checkKey) => {
+      const check = /** @type {HTMLElement} */ (checkNode);
       check.addEventListener("click", () => {
         if (check.children[2].classList.contains("visible")) {
           check.children[2].classList.remove("visible");
@@ -70,10 +83,11 @@ export class Scorecard {
         check.classList.add("visible");
         check.children[2].classList.add("visible");
 
-        container.childNodes.forEach((check, key) => {
+        container.childNodes.forEach((otherCheckNode, key) => {
+          const otherCheck = /** @type {HTMLElement} */ (otherCheckNode);
           if (checkKey !== key) {
-            check.classList.remove("visible");
-            check.children[2].classList.remove("visible");
+            otherCheck.classList.remove("visible");
+            otherCheck.children[2].classList.remove("visible");
           }
         });
       });
@@ -83,6 +97,9 @@ export class Scorecard {
   }
 }
 
+/**
+ * @param {import("../../../../common/scorecard.js").ScorecardCheck} check
+ */
 function generateCheckElement(check) {
   if (!check.score || check.score < 0) {
     check.score = 0;
@@ -130,7 +147,7 @@ function generateCheckElement(check) {
   );
 
   for (const detail of check.details ?? []) {
-    fragment.querySelector(".info").appendChild(
+    /** @type {HTMLElement} */ (fragment.querySelector(".info")).appendChild(
       utils.createDOMElement("div", {
         classList: ["detail"],
         text: detail
diff --git a/workspaces/cli/public/components/package/pannels/scripts/scripts.js b/workspaces/cli/public/components/package/pannels/scripts/scripts.js
index d48bde57..c4569b8d 100644
--- a/workspaces/cli/public/components/package/pannels/scripts/scripts.js
+++ b/workspaces/cli/public/components/package/pannels/scripts/scripts.js
@@ -20,7 +20,7 @@ const kUnsafeNpmScripts = new Set([
   "postuninstall"
 ]);
 
-class Scripts extends LitElement {
+export class Scripts extends LitElement {
   static styles = [
     scrollbarStyle,
     css`
@@ -149,11 +149,15 @@ class Scripts extends LitElement {
     isHidden: { type: Boolean }
   };
 
+  /** @type {ReturnType<typeof setTimeout> | null} */
   static SimulationTimeout = null;
 
   constructor() {
     super();
+    this.package = /** @type {import("../../package.js").PackageInfo} */ (/** @type {unknown} */ (undefined));
     this.isClosed = true;
+    /** @type {boolean} */
+    this.isHidden = false;
   }
 
   render() {
@@ -208,11 +212,17 @@ class Scripts extends LitElement {
    `;
   }
 
+  /**
+   * @param {[string, string][]} scripts
+   */
   #sortScripts(scripts) {
     return [...scripts.filter(([scriptName]) => this.#isSuspicious(scriptName)),
       ...scripts.filter(([scriptName]) => !this.#isSuspicious(scriptName))];
   }
 
+  /**
+   * @param {string} scriptName
+   */
   #isSuspicious(scriptName) {
     return kUnsafeNpmScripts.has(scriptName);
   }
@@ -221,13 +231,14 @@ class Scripts extends LitElement {
     const { composition } = this.package.dependencyVersion;
 
     const lang = utils.currentLang();
-    const i18n = window.i18n[lang];
+    const i18n = utils.getI18n(lang);
+    const title = /** @type {Record<string, string>} */ (/** @type {unknown} */ (i18n.package_info.title));
 
     return html`
     ${when(composition.unused.length > 0,
       () => html`
     <div class="head-title">
-      <p>${i18n.package_info.title.unused_deps}</p>
+      <p>${title.unused_deps}</p>
     </div>
     <div  id="unuseddep">
       <items-list
@@ -241,7 +252,7 @@ class Scripts extends LitElement {
     ${when(composition.missing.length > 0,
       () => html`
       <div class="head-title">
-        <p>${i18n.package_info.title.missing_deps}</p>
+        <p>${title.missing_deps}</p>
       </div>
       <div  id="missingdep">
         <items-list
@@ -256,13 +267,13 @@ class Scripts extends LitElement {
     ${when(composition.required_nodejs.length > 0,
       () => html`
       <div class="head-title">
-        <p>${i18n.package_info.title.node_deps}</p>
+        <p>${title.node_deps}</p>
       </div>
       <div  id="nodedep">
         <items-list
         .items=${composition.required_nodejs}
         .shouldShowEveryItems=${true}
-        .onClickItem=${(coreModuleName) => this.#openNodeDocumentation(coreModuleName)}
+        .onClickItem=${(/** @type {string} */ coreModuleName) => this.#openNodeDocumentation(coreModuleName)}
         ></items-list>
       </div>
     `,
@@ -271,14 +282,14 @@ class Scripts extends LitElement {
     ${when(composition.required_thirdparty.length > 0,
       () => html`
       <div class="head-title">
-        <p>${i18n.package_info.title.third_party_deps}</p>
+        <p>${title.third_party_deps}</p>
         ${this.#showHideDependenciesInTree()}
       </div>
       <div id="requireddep">
         <items-list
          variant="line"
         .items=${composition.required_thirdparty}
-        .onClickItem=${(packageName) => this.package.nsn.focusNodeByName(packageName)}
+        .onClickItem=${(/** @type {string} */ packageName) => this.package.nsn.focusNodeByName(packageName)}
         ></items-list>
       </div>
     `,
@@ -287,13 +298,16 @@ class Scripts extends LitElement {
        `;
   }
 
+  /**
+   * @param {string} coreModuleName
+   */
   #openNodeDocumentation = (coreModuleName) => {
     const name = coreModuleName.startsWith("node:") ?
       coreModuleName.slice(5) : coreModuleName;
 
     window
       .open(`https://nodejs.org/dist/latest/docs/api/${name}.html`, "_blank")
-      .focus();
+      ?.focus();
   };
 
   #showHideDependenciesInTree() {
diff --git a/workspaces/cli/public/components/package/pannels/vulnerabilities/vulnerabilities.js b/workspaces/cli/public/components/package/pannels/vulnerabilities/vulnerabilities.js
index e68c5f4f..61475adf 100644
--- a/workspaces/cli/public/components/package/pannels/vulnerabilities/vulnerabilities.js
+++ b/workspaces/cli/public/components/package/pannels/vulnerabilities/vulnerabilities.js
@@ -8,7 +8,7 @@ import { EVENTS } from "../../../../core/events.js";
 import "../../../icon/icon.js";
 import { scrollbarStyle } from "../../../../common/scrollbar-style.js";
 
-class Vulnerabilities extends LitElement {
+export class Vulnerabilities extends LitElement {
   static styles = [scrollbarStyle, css`
 :host {
   display: block;
@@ -236,7 +236,13 @@ p {
 
   constructor() {
     super();
-    this.settingsChanged = ({ detail: { theme } }) => {
+    this.package = /** @type {import("../../package.js").PackageInfo} */ (/** @type {unknown} */ (undefined));
+    /** @type {string} */
+    this.vulnerabilityStrategy = "";
+    /** @type {string} */
+    this.theme = "";
+    this.settingsChanged = (/** @type {Event} */ event) => {
+      const { theme } = /** @type {CustomEvent<{ theme: string }>} */ (event).detail;
       if (theme !== this.theme) {
         this.theme = theme;
       }
diff --git a/workspaces/cli/public/components/package/pannels/warnings/code-fetcher.js b/workspaces/cli/public/components/package/pannels/warnings/code-fetcher.js
index 474cfec2..bc920354 100644
--- a/workspaces/cli/public/components/package/pannels/warnings/code-fetcher.js
+++ b/workspaces/cli/public/components/package/pannels/warnings/code-fetcher.js
@@ -1,11 +1,26 @@
 // Import Third-party Dependencies
-import hljs from "highlight.js/lib/core";
-window.hljs = hljs;
+import hljsCore from "highlight.js/lib/core";
+// @ts-expect-error - vendor script loaded via require(), the target resolves to a physical
+// non-module file that TS insists on type-checking; there are no type declarations to satisfy.
 require("highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js");
 
+// The `highlightjs-line-numbers.js` plugin patches `hljsCore` with `initLineNumbersOnLoad`
+// at runtime (via the `require` above), a shape TS's static `HLJSApi` type doesn't know about.
+const hljs = /** @type {import("highlight.js").HLJSApi & { initLineNumbersOnLoad(): void }} */ (
+  /** @type {unknown} */ (hljsCore)
+);
+window.hljs = hljs;
+
 // CONSTANTS
 const kLoadingMessage = "Loading ...";
 
+/**
+ * @typedef {[[number, number], [number, number]]} CodeLocation
+ */
+
+/**
+ * @param {string | null} str
+ */
 function removeTags(str) {
   if (str === null || str === "") {
     return false;
@@ -17,21 +32,28 @@ function removeTags(str) {
 export class CodeFetcher {
   static setupDocumentClickHandler = true;
 
+  /**
+   * @param {string} code
+   * @param {CodeLocation} location
+   */
   static getLineFromFile(code, location) {
     const [[startLine]] = location;
 
     return code.split("\n").slice(startLine >= 10 ? startLine - 10 : 0, startLine + 10).join("\n");
   }
 
+  /**
+   * @param {MouseEvent} event
+   */
   static hide(event) {
-    const packageCodeElement = document.querySelector(".package-code");
+    const packageCodeElement = /** @type {HTMLElement | null} */ (document.querySelector(".package-code"));
     if (!packageCodeElement) {
       return;
     }
 
     if (
       (packageCodeElement.innerText && packageCodeElement.innerText !== kLoadingMessage) &&
-      !packageCodeElement.contains(event.target)
+      !packageCodeElement.contains(/** @type {Node} */ (event.target))
       && packageCodeElement.style.visibility === "visible"
     ) {
       packageCodeElement.style.visibility = "hidden";
@@ -39,26 +61,36 @@ export class CodeFetcher {
     }
   }
 
+  /**
+   * @param {string | null} unpkgRoot
+   */
   constructor(unpkgRoot) {
     this.unpkgRoot = unpkgRoot;
 
+    /** @type {Map<string, string>} */
     this.cache = new Map();
+    /** @type {HTMLElement} */
+    this.container = /** @type {any} */ (undefined);
     if (CodeFetcher.setupDocumentClickHandler) {
       document.addEventListener("click", CodeFetcher.hide);
       CodeFetcher.setupDocumentClickHandler = false;
     }
   }
 
-  async fetchCodeLine(event, options = {}) {
+  /**
+   * @param {Event} event
+   * @param {{ file: string, location: CodeLocation, id: string, value: string | null }} options
+   */
+  async fetchCodeLine(event, options) {
     const { file, location, id, value } = options;
 
-    this.container = document.querySelector(".package-code");
+    this.container = /** @type {HTMLElement} */ (document.querySelector(".package-code"));
     this.container.style.visibility = "visible";
     const isJS = file.slice(-3) === ".js" || [".cjs", ".mjs"].includes(file.slice(-4));
     const isJSON = file.slice(-5) === ".json";
 
     if (this.cache.has(id)) {
-      this.container.innerHTML = this.cache.get(id);
+      this.container.innerHTML = /** @type {string} */ (this.cache.get(id));
       hljs.initLineNumbersOnLoad();
       event.stopPropagation();
 
@@ -82,7 +114,7 @@ export class CodeFetcher {
       codeElement.textContent = CodeFetcher.getLineFromFile(code, location);
       // eslint-disable-next-line no-nested-ternary
       codeElement.classList.add(`language-${isJS ? "js" : isJSON ? "json" : "text"}`, "hljs");
-      codeElement.setAttribute("data-ln-start-from", location[0][0] >= 10 ? location[0][0] - 9 : 1);
+      codeElement.setAttribute("data-ln-start-from", String(location[0][0] >= 10 ? location[0][0] - 9 : 1));
 
       preElement.appendChild(codeElement);
       this.container.appendChild(preElement);
@@ -97,7 +129,9 @@ export class CodeFetcher {
 
       if (isMultiLine) {
         setTimeout(() => {
-          const tdsElement = codeElement.parentElement.querySelectorAll("table tbody tr td:nth-child(2)");
+          const tdsElement = /** @type {HTMLElement} */ (
+            codeElement.parentElement
+          ).querySelectorAll("table tbody tr td:nth-child(2)");
           for (let i = 0; i < tdsElement.length; i++) {
             const tdElement = tdsElement[i];
 
diff --git a/workspaces/cli/public/components/package/pannels/warnings/warnings.js b/workspaces/cli/public/components/package/pannels/warnings/warnings.js
index 935cd314..61db49a3 100644
--- a/workspaces/cli/public/components/package/pannels/warnings/warnings.js
+++ b/workspaces/cli/public/components/package/pannels/warnings/warnings.js
@@ -7,6 +7,9 @@ import { CodeFetcher } from "./code-fetcher.js";
 import * as utils from "../../../../common/utils.js";
 
 export class Warnings {
+  /**
+   * @param {import("../../package.js").PackageInfo} pkg
+   */
   constructor(pkg) {
     this.package = pkg;
   }
@@ -17,11 +20,11 @@ export class Warnings {
   }
 
   /**
-   * @param {!HTMLTemplateElement} clone
+   * @param {!DocumentFragment} clone
    */
   generate(clone) {
     this.setupSignal(clone);
-    clone.getElementById("pan-warnings")
+    /** @type {HTMLElement} */ (clone.getElementById("pan-warnings"))
       .appendChild(this.renderWarnings());
 
     clone.querySelectorAll(".open-wiki")
@@ -34,13 +37,17 @@ export class Warnings {
   }
 
   /**
-   * @param {!HTMLTemplateElement} clone
+   * @param {!DocumentFragment} clone
    */
   setupSignal(clone) {
     const { warnings } = this.package.dependencyVersion;
     this.package.addNavigationSignal(
-      clone.getElementById("warnings-nav-menu"),
-      warnings.filter((warning) => !window.settings.config.ignore.warnings.has(warning.kind)).length
+      /** @type {HTMLElement} */ (clone.getElementById("warnings-nav-menu")),
+      warnings.filter(
+        (/** @type {import("@nodesecure/js-x-ray").Warning} */ warning) => !utils.getSettingsConfig().ignore.warnings.has(
+          warning.kind
+        )
+      ).length
     );
   }
 
@@ -52,14 +59,15 @@ export class Warnings {
 
     const codeFetcher = new CodeFetcher(unpkgRoot);
 
-    for (const warning of warnings) {
-      if (window.settings.config.ignore.warnings.has(warning.kind)) {
+    for (const warning of /** @type {import("@nodesecure/js-x-ray").Warning[]} */ (warnings)) {
+      if (utils.getSettingsConfig().ignore.warnings.has(warning.kind)) {
         continue;
       }
 
+      const file = /** @type {string} */ (warning.file);
       const id = Math.random().toString(36).slice(2);
       const hasNoInspection =
-        warning.file.includes(".min") ||
+        file.includes(".min") ||
         warning.kind === "short-identifiers" ||
         warning.kind === "obfuscated-code" ||
         warning.kind === "zero-semver";
@@ -75,10 +83,12 @@ export class Warnings {
         viewMoreElement.style.display = "none";
       }
       else {
-        const location = warning.kind === "encoded-literal" ? warning.location[0] : warning.location;
+        const location = /** @type {[[number, number], [number, number]]} */ (warning.kind === "encoded-literal" ?
+          /** @type {[[number, number], [number, number]][]} */ (warning.location)[0] :
+          warning.location);
 
         viewMoreElement.addEventListener("click", (event) => {
-          codeFetcher.fetchCodeLine(event, { file: warning.file, location, id, value: warning.value });
+          codeFetcher.fetchCodeLine(event, { file, location, id, value: warning.value });
         });
       }
 
@@ -112,10 +122,10 @@ export class Warnings {
 
       const box = document.createElement("file-box");
       box.title = warning.kind;
-      box.fileName = warning.file.length > 20 ? `${warning.file.slice(0, 20)}...` : warning.file;
+      box.fileName = file.length > 20 ? `${file.slice(0, 20)}...` : file;
       box.titleHref = warning.kind === "invalid-semver" ?
         null : `https://github.com/NodeSecure/js-x-ray/blob/master/docs/${warning.kind}.md`;
-      box.fileHref = `${unpkgRoot}${warning.file}`;
+      box.fileHref = `${unpkgRoot}${file}`;
       box.severity = warning.severity ?? "Information";
       box.appendChild(boxContainer);
       if (boxPosition) {
@@ -127,9 +137,12 @@ export class Warnings {
     return fragment;
   }
 
+  /**
+   * @param {import("@nodesecure/js-x-ray").Warning} warning
+   */
   getWarningLocation(warning) {
     if (warning.kind === "encoded-literal") {
-      return warning.location
+      return /** @type {[[number, number], [number, number]][]} */ (warning.location)
         .map((loc) => locationToString(loc)).join(" // ");
     }
 
@@ -138,6 +151,6 @@ export class Warnings {
       return Array.isArray(loc) && Array.isArray(loc[0]) ? `${loc[0][0]}:${loc[0][1]}` : "N/A";
     }
 
-    return locationToString(loc);
+    return locationToString(/** @type {number[][]} */ (loc));
   }
 }
diff --git a/workspaces/cli/public/components/popup/popup.js b/workspaces/cli/public/components/popup/popup.js
index 6e6168c6..d6488aca 100644
--- a/workspaces/cli/public/components/popup/popup.js
+++ b/workspaces/cli/public/components/popup/popup.js
@@ -65,11 +65,14 @@ section#popup--background>.popup {
   constructor() {
     super();
     this.isOpen = false;
+    /** @type {string} */
+    this.theme = "";
 
-    this.open = ({ detail: { content } }) => {
+    this.open = (/** @type {Event} */ event) => {
       if (this.isOpen) {
         return;
       }
+      const { content } = /** @type {CustomEvent<{ content: Node }>} */ (event).detail;
       this.appendChild(content);
       this.isOpen = true;
     };
@@ -82,7 +85,8 @@ section#popup--background>.popup {
       this.isOpen = false;
     };
 
-    this.settingsChanged = ({ detail: { theme } }) => {
+    this.settingsChanged = (/** @type {Event} */ event) => {
+      const { theme } = /** @type {CustomEvent<{ theme: string }>} */ (event).detail;
       if (theme !== this.theme) {
         this.theme = theme;
       }
@@ -108,8 +112,8 @@ section#popup--background>.popup {
 
     return html`
       <section class=${classMap(classes)} @click=${this.close} id="popup--background">
-        <div class="popup" part="popup-container" @click=${(e) => {
-          e.stopPropagation();
+        <div class="popup" part="popup-container" @click=${(/** @type {Event} */ event) => {
+          event.stopPropagation();
         }}>
           <slot></slot>
         </div>
diff --git a/workspaces/cli/public/components/root-selector/root-selector.js b/workspaces/cli/public/components/root-selector/root-selector.js
index 90aff032..9f19c46a 100644
--- a/workspaces/cli/public/components/root-selector/root-selector.js
+++ b/workspaces/cli/public/components/root-selector/root-selector.js
@@ -121,6 +121,17 @@ export class RootSelector extends LitElement {
     }
   `;
 
+  constructor() {
+    super();
+    /** @type {import("@nodesecure/vis-network").NodeSecureDataSet | null} */
+    this.secureDataSet = null;
+    this._open = false;
+    /** @type {(event: MouseEvent) => void} */
+    this._handleOutsideClick = () => {
+      // Placeholder function, will be replaced in connectedCallback
+    };
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this._handleOutsideClick = (event) => {
@@ -137,6 +148,9 @@ export class RootSelector extends LitElement {
     document.removeEventListener("click", this._handleOutsideClick);
   }
 
+  /**
+   * @param {string} spec
+   */
   #switchTo(spec) {
     window.dispatchEvent(new CustomEvent(EVENTS.ROOT_SWITCH, {
       detail: { spec }
@@ -161,7 +175,7 @@ export class RootSelector extends LitElement {
     return html`
       <button
         class="selector-btn"
-        @click=${(event) => {
+        @click=${(/** @type {Event} */ event) => {
           event.stopPropagation();
           if (others.length > 0) {
             this._open = !this._open;
diff --git a/workspaces/cli/public/components/views/home/home.js b/workspaces/cli/public/components/views/home/home.js
index 9a637cce..dc78ef6d 100644
--- a/workspaces/cli/public/components/views/home/home.js
+++ b/workspaces/cli/public/components/views/home/home.js
@@ -60,6 +60,7 @@ const kEmojiMetadata = {
 export class HomeView {
   /**
    * @param {!NodeSecureDataSet} secureDataSet
+   * @param {import("@nodesecure/vis-network").NodeSecureNetwork} nsn
    */
   constructor(
     secureDataSet,
@@ -69,11 +70,11 @@ export class HomeView {
     this.nsn = nsn;
     this.lang = utils.currentLang();
 
-    const homeViewHTMLElement = document.getElementById("home--view");
+    const homeViewHTMLElement = /** @type {HTMLElement} */ (document.getElementById("home--view"));
     homeViewHTMLElement.innerHTML = "";
     homeViewHTMLElement.appendChild(this.render());
 
-    if (window.settings.config.disableExternalRequests === false) {
+    if (utils.getSettingsConfig().disableExternalRequests === false) {
       this.generateScorecard();
     }
     this.generateHeader();
@@ -89,35 +90,37 @@ export class HomeView {
 
   render() {
     console.log("[HOME] cloning new template");
-    const template = document.getElementById("home-view-content");
+    const template = /** @type {HTMLTemplateElement | null} */ (document.getElementById("home-view-content"));
     if (!template) {
       throw new Error("Unable to find HTML template with ID 'home-view-content'");
     }
 
-    /** @type {HTMLTemplateElement} */
     const clone = document.importNode(template.content, true);
 
     return clone;
   }
 
   generateScorecard() {
-    const { name, version } = this.secureDataSet.linker.get(0);
-    const pkg = this.secureDataSet.data.dependencies[name];
-    const { repository } = pkg.versions[version].links;
+    const rootEntry = /** @type {import("@nodesecure/vis-network").LinkerEntry} */ (this.secureDataSet.linker.get(0));
+    const { name, version } = rootEntry;
+    const pkg = /** @type {NonNullable<NodeSecureDataSet["data"]>} */ (this.secureDataSet.data).dependencies[name];
+    const { repository } = pkg.versions[version].links ?? {};
 
     if (repository === null || repository === undefined) {
       return;
     }
 
-    const [repoName, platform] = getVCSRepositoryPathAndPlatform(repository) ?? [];
+    const [repoNameRaw, platformRaw] = getVCSRepositoryPathAndPlatform(repository) ?? [];
+    const repoName = /** @type {string} */ (repoNameRaw);
+    const platform = /** @type {string} */ (platformRaw);
 
     fetchScorecardData(repoName, platform).then((data) => {
       if (data !== null) {
-        document
-          .querySelector(".home--header--scorecard .score")
+        /** @type {HTMLElement} */ (document
+          .querySelector(".home--header--scorecard .score"))
           .classList.add(getScoreColor(data.score));
-        document.getElementById("home-scorecard-score").innerHTML = data.score;
-        const scorescardElement = document.querySelector(".home--header--scorecard");
+        /** @type {HTMLElement} */ (document.getElementById("home-scorecard-score")).innerHTML = String(data.score);
+        const scorescardElement = /** @type {HTMLElement} */ (document.querySelector(".home--header--scorecard"));
         scorescardElement.addEventListener("click", () => {
           window.open(getScorecardLink(repoName, platform), "_blank");
         });
@@ -127,11 +130,12 @@ export class HomeView {
   }
 
   generateHeader() {
-    const { name, version, description, repository } = this.secureDataSet.linker.get(0);
+    const rootEntry = /** @type {import("@nodesecure/vis-network").LinkerEntry} */ (this.secureDataSet.linker.get(0));
+    const { name, version, description, repository } = rootEntry;
 
-    document.getElementById("project-name").textContent = name;
-    document.getElementById("project-version").textContent = version;
-    document.getElementById("project-description").textContent = description;
+    /** @type {HTMLElement} */ (document.getElementById("project-name")).textContent = name;
+    /** @type {HTMLElement} */ (document.getElementById("project-version")).textContent = version;
+    /** @type {HTMLElement} */ (document.getElementById("project-description")).textContent = description;
 
     const linksFragment = document.createDocumentFragment();
     const links = {
@@ -141,7 +145,7 @@ export class HomeView {
       },
       Github: {
         src: "github-black.png",
-        href: utils.parseRepositoryUrl(repository)
+        href: utils.parseRepositoryUrl(/** @type {{ url?: string } | undefined} */ (repository))
       }
     };
 
@@ -156,15 +160,21 @@ export class HomeView {
         liElement.style.display = "none";
       }
       else {
-        liElement.addEventListener("click", () => window.open(config.href, "_blank"));
+        const href = config.href;
+        liElement.addEventListener("click", () => window.open(href, "_blank"));
       }
 
       linksFragment.appendChild(liElement);
     }
 
-    document.getElementById("project-links").appendChild(linksFragment);
+    /** @type {HTMLElement} */ (document.getElementById("project-links")).appendChild(linksFragment);
   }
 
+  /**
+   * @param {string} icon
+   * @param {string} title
+   * @param {string | number} value
+   */
   #createOverviewDiv(icon, title, value) {
     const titleDiv = utils.createDOMElement("div", {
       className: "title",
@@ -177,15 +187,19 @@ export class HomeView {
     return utils.createDOMElement("div", {
       childs: [
         titleDiv,
-        utils.createDOMElement("span", { text: value })
+        utils.createDOMElement("span", { text: String(value) })
       ]
     });
   }
 
   async generateOverview() {
     const fragment = document.createDocumentFragment();
+    const overview = /** @type {Record<string, string>} */ (
+      /** @type {unknown} */ (utils.getI18n(this.lang).home.overview)
+    );
 
-    const { name } = this.secureDataSet.linker.get(0);
+    const rootEntry = /** @type {import("@nodesecure/vis-network").LinkerEntry} */ (this.secureDataSet.linker.get(0));
+    const { name } = rootEntry;
     let directDependencies = 0;
     for (const { usedBy } of this.secureDataSet.linker.values()) {
       if (name in usedBy) {
@@ -193,22 +207,22 @@ export class HomeView {
       }
     }
     fragment.appendChild(this.#createOverviewDiv(
-      "icon-cubes", `# ${window.i18n[this.lang].home.overview.dependencies}`, this.secureDataSet.dependenciesCount
+      "icon-cubes", `# ${overview.dependencies}`, this.secureDataSet.dependenciesCount
     ));
     fragment.appendChild(this.#createOverviewDiv(
-      "icon-archive", window.i18n[this.lang].home.overview.totalSize, this.secureDataSet.prettySize
+      "icon-archive", overview.totalSize, this.secureDataSet.prettySize
     ));
     fragment.appendChild(this.#createOverviewDiv(
-      "icon-link", `# ${window.i18n[this.lang].home.overview.directDeps}`, directDependencies
+      "icon-link", `# ${overview.directDeps}`, directDependencies
     ));
     fragment.appendChild(this.#createOverviewDiv(
-      "icon-sitemap", `# ${window.i18n[this.lang].home.overview.transitiveDeps}`, this.secureDataSet.indirectDependencies
+      "icon-sitemap", `# ${overview.transitiveDeps}`, this.secureDataSet.indirectDependencies
     ));
 
-    const homeOverviewElement = document.querySelector(".home--overview");
+    const homeOverviewElement = /** @type {HTMLElement} */ (document.querySelector(".home--overview"));
     homeOverviewElement.appendChild(fragment);
 
-    if (window.settings.config.disableExternalRequests) {
+    if (utils.getSettingsConfig().disableExternalRequests) {
       return;
     }
 
@@ -219,8 +233,11 @@ export class HomeView {
     const maxPackages = 4;
     const fragment = document.createDocumentFragment();
 
+    /** @type {{ name: string, version: string, flags: string[], deprecated?: string }[]} */
     const deps = [];
-    for (const [name, dependency] of Object.entries(this.secureDataSet.data.dependencies)) {
+
+    const nodeSecureDataSetData = /** @type {NonNullable<NodeSecureDataSet["data"]>} */ (this.secureDataSet.data);
+    for (const [name, dependency] of Object.entries(nodeSecureDataSetData.dependencies)) {
       for (const [version, dependencyVer] of Object.entries(dependency.versions)) {
         const { flags } = dependencyVer;
 
@@ -242,7 +259,7 @@ export class HomeView {
 
       const [element, menuToOpen] = this.renderPackage(dependency);
       element.addEventListener("click", () => {
-        window.navigation.setNavByName("network--view");
+        utils.getNavigation().setNavByName("network--view");
         setTimeout(() => {
           PackageInfo.ForcedPackageMenu = menuToOpen;
           this.nsn.focusNodeByNameAndVersion(
@@ -259,22 +276,26 @@ export class HomeView {
     }
 
     if (fragment.children.length === 0) {
-      document.getElementById("homewatch").style.display = "none";
+      /** @type {HTMLElement} */ (document.getElementById("homewatch")).style.display = "none";
     }
     else {
       if (hideItems) {
         const expandableSpan = document.createElement("expandable-span");
-        expandableSpan.onToggle = (expandable) => utils.toggle(expandable,
-          document.querySelector(".home--packages--overview"),
+        expandableSpan.onToggle = () => utils.toggle(expandableSpan,
+          /** @type {HTMLElement} */ (document.querySelector(".home--packages--overview")),
           maxPackages);
         fragment.appendChild(expandableSpan);
       }
 
-      document.querySelector(".home--packages--overview")
+      /** @type {HTMLElement} */ (document.querySelector(".home--packages--overview"))
         .appendChild(fragment);
     }
   }
 
+  /**
+   * @param {{ name: string, version: string, flags: string[], deprecated?: string }} dependencyVer
+   * @returns {[HTMLElement, string]}
+   */
   renderPackage(dependencyVer) {
     const { name, version, flags, deprecated } = dependencyVer;
 
@@ -284,12 +305,18 @@ export class HomeView {
     };
     const inlinedEmojis = getFlagsEmojisInlined(
       flags.filter((name) => kFlagsToWatch.has(name)),
-      new Set(window.settings.config.ignore.flags)
+      new Set(utils.getSettingsConfig().ignore.flags)
     );
 
+    /** @type {HTMLElement[]} */
     const childs = [];
     for (const emoji of utils.extractEmojis(inlinedEmojis)) {
-      const { menu, description } = kEmojiMetadata[emoji];
+      const {
+        menu,
+        description
+      } = /** @type {Record<string, { menu: { name: string, priority: number }, description: string }>} */ (
+        kEmojiMetadata
+      )[emoji];
       if (menu.priority > menuToOpen.priority) {
         menuToOpen.name = menu.name;
         menuToOpen.priority = menu.priority;
@@ -332,7 +359,7 @@ export class HomeView {
   }
 
   generateWarnings() {
-    const warningsModuleElement = document.getElementById("warnings-module");
+    const warningsModuleElement = /** @type {HTMLElement} */ (document.getElementById("warnings-module"));
     if (this.secureDataSet.warnings.length === 0) {
       warningsModuleElement.style.display = "none";
 
@@ -344,8 +371,10 @@ export class HomeView {
       fragment.appendChild(utils.createDOMElement("p", { text }));
     }
 
-    warningsModuleElement.querySelector(".count").textContent = this.secureDataSet.warnings.length;
-    warningsModuleElement.querySelector(".home--warnings").appendChild(fragment);
+    /** @type {HTMLElement} */ (warningsModuleElement.querySelector(".count")).textContent = String(
+      this.secureDataSet.warnings.length
+    );
+    /** @type {HTMLElement} */ (warningsModuleElement.querySelector(".home--warnings")).appendChild(fragment);
   }
 
   generateExtensions() {
@@ -359,7 +388,7 @@ export class HomeView {
     gauge.data = extensions;
     gauge.theme = this.secureDataSet.theme;
 
-    document.getElementById("home-extensions").appendChild(gauge);
+    /** @type {HTMLElement} */ (document.getElementById("home-extensions")).appendChild(gauge);
   }
 
   generateLicenses() {
@@ -376,7 +405,7 @@ export class HomeView {
             name,
             value,
             link: result.value.spdxLicenseLinks?.[0] ?? null,
-            chips: Object.entries(result.value.spdx)
+            chips: Object.entries(/** @type {Record<string, boolean>} */ (result.value.spdx))
               .filter(([key]) => key !== "includesDeprecated")
               .map(([key, value]) => `${value ? "✔️" : "❌"} ${key}`)
           }
@@ -387,7 +416,7 @@ export class HomeView {
     gauge.data = licenses;
     gauge.theme = this.secureDataSet.theme;
 
-    document.getElementById("home-licenses").appendChild(gauge);
+    /** @type {HTMLElement} */ (document.getElementById("home-licenses")).appendChild(gauge);
   }
 
   generateMaintainers() {
@@ -398,13 +427,15 @@ export class HomeView {
     maintainers.options = {
       maximumMaintainers: 5
     };
-    const pannel = document.getElementById("pannel-right");
+    const pannel = /** @type {HTMLElement} */ (document.getElementById("pannel-right"));
     pannel.prepend(maintainers);
   }
 
   generateModuleTypes() {
-    const moduleTypesElement = document.getElementById("home-modules-types");
-    const moduleTypes = Object.values(this.secureDataSet.data.dependencies).reduce((acc, dep) => {
+    const moduleTypesElement = /** @type {HTMLElement} */ (document.getElementById("home-modules-types"));
+    const moduleTypes = Object.values(/** @type {NonNullable<NodeSecureDataSet["data"]>} */ (
+      this.secureDataSet.data
+    ).dependencies).reduce((acc, dep) => {
       const types = Object.values(dep.versions).map((version) => version.type);
       for (const type of types) {
         acc[type] += 1;
@@ -432,19 +463,23 @@ export class HomeView {
   }
 
   async generateDownloads() {
-    const homeOverviewElement = document.querySelector(".home--overview");
-    const { name } = this.secureDataSet.linker.get(0);
+    const homeOverviewElement = /** @type {HTMLElement} */ (document.querySelector(".home--overview"));
+    const rootEntry = /** @type {import("@nodesecure/vis-network").LinkerEntry} */ (this.secureDataSet.linker.get(0));
+    const { name } = rootEntry;
 
     try {
-      const { downloads } = await getJSON(`/downloads/${name.replaceAll("/", "%2F")}`);
+      const { downloads } = /** @type {{ downloads: number }} */ (await getJSON(`/downloads/${name.replaceAll("/", "%2F")}`));
 
       if (downloads) {
         const downloadsElement = document.querySelector(".home--overview div:has(i.icon-chart-bar)");
         downloadsElement?.remove();
         const formattedNumber = new Intl.NumberFormat("de-DE").format(downloads);
+        const overview = /** @type {Record<string, string>} */ (
+          /** @type {unknown} */ (utils.getI18n(this.lang).home.overview)
+        );
         homeOverviewElement.appendChild(this.#createOverviewDiv(
           "icon-chart-bar",
-          window.i18n[this.lang].home.overview.downloadsLastWeek,
+          overview.downloadsLastWeek,
           formattedNumber
         ));
       }
@@ -455,9 +490,11 @@ export class HomeView {
   }
 
   handleReport() {
-    document.querySelector(".home--header--report").addEventListener("click", async() => {
+    /** @type {HTMLElement} */ (document.querySelector(".home--header--report")).addEventListener("click", async() => {
       const popupReport = document.createElement("popup-report");
-      popupReport.dependencyName = this.secureDataSet.data.rootDependency.name;
+      popupReport.dependencyName = /** @type {NonNullable<NodeSecureDataSet["data"]>} */ (
+        this.secureDataSet.data
+      ).rootDependency.name;
       popupReport.theme = this.secureDataSet.theme;
       window.dispatchEvent(new CustomEvent(EVENTS.MODAL_OPENED, {
         detail: {
diff --git a/workspaces/cli/public/components/views/home/maintainers/maintainers.js b/workspaces/cli/public/components/views/home/maintainers/maintainers.js
index 59e261d9..5e2ca772 100644
--- a/workspaces/cli/public/components/views/home/maintainers/maintainers.js
+++ b/workspaces/cli/public/components/views/home/maintainers/maintainers.js
@@ -174,8 +174,15 @@ width: 16px;
 
   constructor() {
     super();
+    this.secureDataSet = /** @type {import("@nodesecure/vis-network").NodeSecureDataSet} */ (/** @type {unknown} */ (undefined));
+    this.nsn = /** @type {import("@nodesecure/vis-network").NodeSecureNetwork} */ (/** @type {unknown} */ (undefined));
+    /** @type {{ maximumMaintainers: number }} */
+    this.options = { maximumMaintainers: 5 };
     this.isClosed = true;
-    this.settingsChanged = ({ detail: { theme } }) => {
+    /** @type {string} */
+    this.theme = "";
+    this.settingsChanged = (/** @type {Event} */ event) => {
+      const { theme } = /** @type {CustomEvent<{ theme: string }>} */ (event).detail;
       if (theme !== this.theme) {
         this.theme = theme;
       }
@@ -204,7 +211,7 @@ width: 16px;
 
     const visibleAuthors = hideItems ? authors.slice(0, numOfMaintainers) : authors;
 
-    const i18n = window.i18n[utils.currentLang()];
+    const i18n = utils.getI18n();
 
     return html`
     <div class="module ${this.theme}">
@@ -230,6 +237,9 @@ width: 16px;
     `;
   }
 
+  /**
+   * @param {[string, import("@nodesecure/vis-network").AuthorInfo][]} authors
+   */
   #generateMaintainers(authors) {
     return html`
     ${repeat(authors.filter(([name]) => typeof name != "undefined"),
@@ -287,6 +297,9 @@ width: 16px;
 `;
   }
 
+  /**
+   * @param {[string, import("@nodesecure/vis-network").AuthorInfo][]} authors
+   */
   #highlightContacts(authors) {
     const highlightedAuthors = authors
       .filter(([_, contact]) => this.secureDataSet.isHighlightedContact(contact));
@@ -500,7 +513,14 @@ export class PopupMaintainer extends LitElement {
   constructor() {
     super();
     this.isLoading = false;
-    this.settingsChanged = ({ detail: { theme } }) => {
+    /** @type {string} */
+    this.name = "";
+    this.data = /** @type {import("@nodesecure/vis-network").AuthorInfo} */ (/** @type {unknown} */ (undefined));
+    this.nsn = /** @type {import("@nodesecure/vis-network").NodeSecureNetwork} */ (/** @type {unknown} */ (undefined));
+    /** @type {string} */
+    this.theme = "";
+    this.settingsChanged = (/** @type {Event} */ event) => {
+      const { theme } = /** @type {CustomEvent<{ theme: string }>} */ (event).detail;
       if (theme !== this.theme) {
         this.theme = theme;
       }
@@ -519,7 +539,8 @@ export class PopupMaintainer extends LitElement {
 
   render() {
     const { url = null } = this.data;
-    const { popup: { maintainer } } = window.i18n[utils.currentLang()];
+    const i18n = /** @type {Record<string, any>} */ (/** @type {unknown} */ (utils.getI18n()));
+    const { popup: { maintainer } } = i18n;
     const packagesList = [...this.data.packages]
       .map((spec) => {
         const { name, version } = utils.parseNpmSpec(spec);
@@ -553,17 +574,17 @@ export class PopupMaintainer extends LitElement {
         </a>`,
           () => nothing
         )}
-        <button class"button-icon" @click=${(e) => {
+        <button class"button-icon" @click=${(/** @type {Event} */ e) => {
           e.stopPropagation();
           const nodeIds = [...this.nsn.findNodeIds(new Set(packagesList))];
 
           this.nsn.highlightMultipleNodes(nodeIds);
-          window.locker.lock();
+          /** @type {import("../../../locker/locker.js").Locker} */ (window.locker).lock();
           window.dispatchEvent(new CustomEvent(EVENTS.MODAL_CLOSED));
-          window.navigation.setNavByName("network--view");
+          utils.getNavigation().setNavByName("network--view");
 
-          const currentSelectedNode = window.networkNav.currentNodeParams;
-          const moveTo = currentSelectedNode === null || !nodeIds.includes(currentSelectedNode.nodes[0]);
+          const currentSelectedNode = window.networkNav?.currentNodeParams;
+          const moveTo = !currentSelectedNode || !nodeIds.includes(currentSelectedNode.nodes[0]);
           if (moveTo) {
             const origin = this.nsn.network.getViewPosition();
             const nodes = nodeIds
@@ -600,10 +621,10 @@ export class PopupMaintainer extends LitElement {
           return html`<li>
             <p>${name}</p>
         <span>v${version}</span>
-        <button class"button-icon" @click=${(e) => {
+        <button class"button-icon" @click=${(/** @type {Event} */ e) => {
           e.stopPropagation();
           window.dispatchEvent(new CustomEvent(EVENTS.MODAL_CLOSED));
-          window.navigation.setNavByName("network--view");
+          utils.getNavigation().setNavByName("network--view");
           setTimeout(() => this.nsn.focusNodeByNameAndVersion(name, version), 25);
         }}>
             <nsecure-icon name="right-open-big"></nsecure-icon>
diff --git a/workspaces/cli/public/components/views/home/report/report.js b/workspaces/cli/public/components/views/home/report/report.js
index cd529031..f51ce90b 100644
--- a/workspaces/cli/public/components/views/home/report/report.js
+++ b/workspaces/cli/public/components/views/home/report/report.js
@@ -4,9 +4,9 @@ import { when } from "lit/directives/when.js";
 
 // Import Internal Dependencies
 import { EVENTS } from "../../../../core/events.js";
-import { currentLang } from "../../../../common/utils.js";
+import { getI18n } from "../../../../common/utils.js";
 
-class PopupReport extends LitElement {
+export class PopupReport extends LitElement {
   static styles = css`
 .report--popup {
   min-width: 400px;
@@ -165,7 +165,12 @@ class PopupReport extends LitElement {
   constructor() {
     super();
     this.isLoading = false;
-    this.settingsChanged = ({ detail: { theme } }) => {
+    /** @type {string} */
+    this.theme = "";
+    /** @type {string} */
+    this.dependencyName = "";
+    this.settingsChanged = (/** @type {Event} */ event) => {
+      const { theme } = /** @type {CustomEvent<{ theme: string }>} */ (event).detail;
       if (theme !== this.theme) {
         this.theme = theme;
       }
@@ -185,15 +190,16 @@ class PopupReport extends LitElement {
   firstUpdated() {
     const isLightPreference = window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches;
     if (isLightPreference) {
-      this.renderRoot.querySelector("#lightTheme").checked = true;
+      /** @type {HTMLInputElement} */ (this.renderRoot.querySelector("#lightTheme")).checked = true;
     }
     else {
-      this.renderRoot.querySelector("#darkTheme").checked = true;
+      /** @type {HTMLInputElement} */ (this.renderRoot.querySelector("#darkTheme")).checked = true;
     }
   }
 
   render() {
-    const { popup: { report } } = window.i18n[currentLang()];
+    const i18n = /** @type {Record<string, any>} */ (/** @type {unknown} */ (getI18n()));
+    const { popup: { report } } = i18n;
     const defaultTitle = `${this.dependencyName}'s report`;
 
     return html`
@@ -203,7 +209,7 @@ class PopupReport extends LitElement {
     </div>
     <form action="" @submit=${this.handleSubmit}>
       <label for="title">${report.form.title}</label>
-      <input @input=${(e) => {
+      <input @input=${(/** @type {Event} */ e) => {
         e.stopPropagation();
       }}  placeholder=${defaultTitle} type="text" id="title" name="title">
       <div>
@@ -230,13 +236,13 @@ class PopupReport extends LitElement {
   `;
   }
 
-  handleSubmit = (e) => {
+  handleSubmit = (/** @type {SubmitEvent} */ e) => {
     e.preventDefault();
     if (this.isLoading) {
       return;
     }
     this.isLoading = true;
-    const formData = new FormData(e.target);
+    const formData = new FormData(/** @type {HTMLFormElement} */ (e.target));
     const title = formData.get("title") || `${this.dependencyName} 's report`;
     const theme = formData.get("theme");
     const includesAllDeps = formData.get("includesAllDeps") === "includesAllDeps";
diff --git a/workspaces/cli/public/components/views/search/search.js b/workspaces/cli/public/components/views/search/search.js
index 53ec5c5d..69434ae0 100644
--- a/workspaces/cli/public/components/views/search/search.js
+++ b/workspaces/cli/public/components/views/search/search.js
@@ -3,15 +3,30 @@ import { LitElement, html, nothing } from "lit";
 import { getJSON } from "@nodesecure/vis-network";
 
 // Import Internal Dependencies
-import { currentLang, debounce, parseNpmSpec } from "../../../common/utils.js";
+import * as utils from "../../../common/utils.js";
 import { searchViewStyles } from "./search-view-styles.js";
 
 // CONSTANTS
 const kMinPackageNameLength = 2;
 const kMaxPackageNameLength = 64;
 
-class SearchView extends LitElement {
+/**
+ * @typedef {Object} SearchResult
+ * @property {string} name
+ * @property {string} version
+ * @property {string} [description]
+ */
+
+/**
+ * @returns {Record<string, any>}
+ */
+function getSearchI18n() {
+  return /** @type {Record<string, any>} */ (/** @type {unknown} */ (utils.getI18n().search));
+}
+
+export class SearchView extends LitElement {
   #searchDebounced;
+  /** @type {Map<string, string>} */
   #selectedVersions = new Map();
   #currentSearch = "";
 
@@ -35,12 +50,18 @@ class SearchView extends LitElement {
     this.loading = false;
     this.hint = "";
     this.notFound = false;
+    /** @type {SearchResult[]} */
     this.results = [];
+    /** @type {import("../../../types.js").CachedSpec[]} */
     this.cachedSpecs = [];
+    /** @type {Map<string, string | string[]>} */
     this._versionsMap = new Map();
-    this.#searchDebounced = debounce(() => this.#handleSearchInput(this.#currentSearch), 500);
+    this.#searchDebounced = utils.debounce(() => this.#handleSearchInput(this.#currentSearch), 500);
   }
 
+  /**
+   * @param {string} spec
+   */
   onScan(spec) {
     this.scanning = true;
     this.scanSpec = spec;
@@ -50,6 +71,9 @@ class SearchView extends LitElement {
     this.loading = false;
   }
 
+  /**
+   * @param {string} message
+   */
   onScanError(message) {
     this.scanning = false;
     this.scanSpec = "";
@@ -67,14 +91,17 @@ class SearchView extends LitElement {
     this.#selectedVersions = new Map();
     this.#currentSearch = "";
 
-    const input = this.renderRoot?.querySelector("input");
+    const input = /** @type {HTMLInputElement | null | undefined} */ (this.renderRoot?.querySelector("input"));
     if (input) {
       input.value = "";
     }
   }
 
+  /**
+   * @param {string} packageName
+   */
   async #handleSearchInput(packageName) {
-    const lang = currentLang();
+    const lang = utils.currentLang();
     this.hint = "";
     this.notFound = false;
     this.results = [];
@@ -84,7 +111,9 @@ class SearchView extends LitElement {
     }
 
     if (packageName.length < kMinPackageNameLength || packageName.length > kMaxPackageNameLength) {
-      this.hint = window.i18n[lang].search.packageLengthErr;
+      this.hint = /** @type {Record<string, string>} */ (
+        /** @type {unknown} */ (utils.getI18n(lang).search)
+      ).packageLengthErr;
 
       return;
     }
@@ -92,7 +121,9 @@ class SearchView extends LitElement {
     this.loading = true;
 
     try {
-      const { result, count } = await getJSON(`/search/${encodeURIComponent(packageName)}`);
+      const { result, count } = /** @type {{ result: SearchResult[], count: number }} */ (
+        await getJSON(`/search/${encodeURIComponent(packageName)}`)
+      );
       if (count === 0) {
         this.notFound = true;
       }
@@ -105,6 +136,9 @@ class SearchView extends LitElement {
     }
   }
 
+  /**
+   * @param {string} name
+   */
   async #loadVersions(name) {
     if (this._versionsMap.has(name)) {
       return;
@@ -114,7 +148,7 @@ class SearchView extends LitElement {
     this._versionsMap.set(name, "loading");
 
     try {
-      const versions = await getJSON(`/search-versions/${encodeURIComponent(name)}`);
+      const versions = /** @type {string[]} */ (await getJSON(`/search-versions/${encodeURIComponent(name)}`));
       this._versionsMap = new Map(this._versionsMap);
       this._versionsMap.set(name, versions.reverse());
     }
@@ -125,7 +159,7 @@ class SearchView extends LitElement {
   }
 
   #renderScanOverlay() {
-    const { scanning } = window.i18n[currentLang()].search;
+    const { scanning } = getSearchI18n();
 
     return html`
       <div class="scan-overlay">
@@ -157,7 +191,7 @@ class SearchView extends LitElement {
   }
 
   #renderHero() {
-    const { heroTitle, emptyHint } = window.i18n[currentLang()].search;
+    const { heroTitle, emptyHint } = getSearchI18n();
 
     return html`
       <div class="hero">
@@ -168,6 +202,10 @@ class SearchView extends LitElement {
     `;
   }
 
+  /**
+   * @param {string} name
+   * @param {string} latestVersion
+   */
   #renderVersionSelect(name, latestVersion) {
     const versionState = this._versionsMap.get(name);
     const selectedVersion = this.#selectedVersions.get(name) ?? latestVersion;
@@ -177,25 +215,34 @@ class SearchView extends LitElement {
         <select
           class="version-select"
           ?disabled=${versionState === "loading"}
-          @change=${(event) => this.#selectedVersions.set(name, event.target.value)}
+          @change=${(/** @type {Event} */ event) => this.#selectedVersions.set(
+            name, /** @type {HTMLSelectElement} */ (event.target).value
+          )}
         >
           <option value=${latestVersion}>${latestVersion}</option>
         </select>
       `;
     }
 
+    const versions = /** @type {string[]} */ (versionState);
+
     return html`
       <select
         class="version-select"
-        @change=${(event) => this.#selectedVersions.set(name, event.target.value)}
+        @change=${(/** @type {Event} */ event) => this.#selectedVersions.set(
+          name, /** @type {HTMLSelectElement} */ (event.target).value
+        )}
       >
-        ${versionState.map((version) => html`
+        ${versions.map((version) => html`
           <option value=${version} ?selected=${version === selectedVersion}>${version}</option>
         `)}
       </select>
     `;
   }
 
+  /**
+   * @param {SearchResult} result
+   */
   #renderResult({ name, version, description }) {
     const isExact = this.#currentSearch === name;
 
@@ -216,6 +263,10 @@ class SearchView extends LitElement {
     `;
   }
 
+  /**
+   * @param {string} title
+   * @param {import("../../../types.js").CachedSpec[]} packages
+   */
   #renderCacheSection(title, packages) {
     if (packages.length === 0) {
       return nothing;
@@ -225,7 +276,7 @@ class SearchView extends LitElement {
       <div class="cache-section">
         <h2 class="cache-title">${title}</h2>
         ${packages.map((metadata) => {
-          const { name, version } = parseNpmSpec(metadata.spec);
+          const { name, version } = utils.parseNpmSpec(metadata.spec);
           const isLocal = metadata.scanType === "cwd";
 
           return html`
@@ -235,7 +286,7 @@ class SearchView extends LitElement {
               </span>
               <button
                 class="cache-remove"
-                @click=${(event) => {
+                @click=${(/** @type {Event} */ event) => {
                   event.stopPropagation();
                   window.socket.commands.remove(metadata.spec);
                 }}
@@ -256,14 +307,14 @@ class SearchView extends LitElement {
       return this.#renderScanOverlay();
     }
 
-    const { search: i18n } = window.i18n[currentLang()];
+    const i18n = getSearchI18n();
     const hasResults = this.results.length > 0;
 
     return html`
       <div class="container">
         ${this.#renderHero()}
 
-        <form @submit=${(event) => event.preventDefault()}>
+        <form @submit=${(/** @type {Event} */ event) => event.preventDefault()}>
           <div class="search-bar">
             <input
               type="text"
@@ -271,14 +322,14 @@ class SearchView extends LitElement {
               name="package"
               placeholder=${i18n.registryPlaceholder}
               autocomplete="off"
-              @keydown=${(event) => {
+              @keydown=${(/** @type {KeyboardEvent} */ event) => {
                 event.stopPropagation();
                 if (event.key === "Enter") {
                   this.#handleScan();
                 }
               }}
-              @input=${(event) => {
-                this.#currentSearch = event.target.value;
+              @input=${(/** @type {Event} */ event) => {
+                this.#currentSearch = /** @type {HTMLInputElement} */ (event.target).value;
                 this.#searchDebounced();
               }}
             >
diff --git a/workspaces/cli/public/components/views/settings/settings.js b/workspaces/cli/public/components/views/settings/settings.js
index 48394156..3e06bb9f 100644
--- a/workspaces/cli/public/components/views/settings/settings.js
+++ b/workspaces/cli/public/components/views/settings/settings.js
@@ -5,9 +5,18 @@ import { warnings } from "@nodesecure/js-x-ray/warnings";
 
 // Import Internal Dependencies
 import { EVENTS } from "../../../core/events.js";
-import { currentLang } from "../../../common/utils.js";
+import { getI18n } from "../../../common/utils.js";
 import { FLAG_IGNORE_ITEMS } from "../../../common/flags.js";
 
+/**
+ * @typedef {Object} RawConfig
+ * @property {{ warnings: string[], flags: string[] }} ignore
+ * @property {string} [theme]
+ * @property {string} defaultPackageMenu
+ * @property {boolean} showFriendlyDependencies
+ * @property {boolean} disableExternalRequests
+ */
+
 // CONSTANTS
 const kAllowedHotKeys = new Set([
   "a", "b", "c", "d", "e", "f", "g", "h", "i", "j",
@@ -278,12 +287,14 @@ export class SettingsView extends LitElement {
 
   constructor() {
     super();
+    /** @type {import("../../../types.js").AppConfig | null} */
     this.config = null;
     this._saveEnabled = false;
 
     const storedHotkeys = localStorage.getItem("hotkeys");
     if (storedHotkeys === null) {
       localStorage.setItem("hotkeys", JSON.stringify(kDefaultHotKeys));
+      /** @type {Record<string, string>} */
       this._hotkeys = { ...kDefaultHotKeys };
     }
     else {
@@ -291,8 +302,8 @@ export class SettingsView extends LitElement {
     }
   }
 
-  #onSettingsSaved = (event) => {
-    this.setNewConfig(event.detail);
+  #onSettingsSaved = (/** @type {Event} */ event) => {
+    this.setNewConfig(/** @type {CustomEvent<RawConfig>} */ (event).detail);
     this._saveEnabled = false;
   };
 
@@ -311,12 +322,15 @@ export class SettingsView extends LitElement {
   }
 
   async fetchUserConfig() {
-    const config = await getJSON("/config");
+    const config = /** @type {RawConfig} */ (await getJSON("/config"));
     this.setNewConfig(config);
 
     return this;
   }
 
+  /**
+   * @param {RawConfig} config
+   */
   setNewConfig(config) {
     this.config = {
       ...config,
@@ -328,6 +342,9 @@ export class SettingsView extends LitElement {
     };
   }
 
+  /**
+   * @param {Record<string, string>} hotkeys
+   */
   updateNavigationHotKey(hotkeys) {
     const navigationElement = document.getElementById("view-navigation");
     if (navigationElement === null) {
@@ -336,7 +353,8 @@ export class SettingsView extends LitElement {
 
     for (const span of navigationElement.querySelectorAll("span")) {
       // network--view -> network
-      const viewName = span.parentElement.getAttribute("data-menu").split("--")[0];
+      const menu = /** @type {HTMLElement} */ (span.parentElement);
+      const viewName = /** @type {string} */ (menu.getAttribute("data-menu")).split("--")[0];
       span.textContent = hotkeys[viewName];
     }
   }
@@ -346,8 +364,9 @@ export class SettingsView extends LitElement {
   }
 
   #updateHotKeys() {
+    /** @type {Record<string, string>} */
     const hotkeys = {};
-    for (const input of this.renderRoot.querySelectorAll(".hotkey")) {
+    for (const input of /** @type {NodeListOf<HTMLInputElement>} */ (this.renderRoot.querySelectorAll(".hotkey"))) {
       hotkeys[input.id] = input.value;
     }
 
@@ -356,8 +375,11 @@ export class SettingsView extends LitElement {
     localStorage.setItem("hotkeys", JSON.stringify(hotkeys));
   }
 
+  /**
+   * @param {Event} event
+   */
   #onHotkeyClick(event) {
-    const input = event.currentTarget;
+    const input = /** @type {HTMLInputElement} */ (event.currentTarget);
     if (!input.readOnly) {
       return;
     }
@@ -366,8 +388,11 @@ export class SettingsView extends LitElement {
     input.readOnly = false;
     input.value = "";
 
+    /**
+     * @param {KeyboardEvent} keyEvent
+     */
     const onKeyDown = (keyEvent) => {
-      if (!kShortcutInputTargetIds.has(keyEvent.target.id)) {
+      if (!kShortcutInputTargetIds.has(/** @type {HTMLElement} */ (keyEvent.target).id)) {
         return;
       }
 
@@ -375,6 +400,9 @@ export class SettingsView extends LitElement {
       keyEvent.preventDefault();
       keyEvent.stopPropagation();
 
+      /**
+       * @param {string} value
+       */
       const setValue = (value) => {
         input.value = value;
         input.readOnly = true;
@@ -391,7 +419,7 @@ export class SettingsView extends LitElement {
 
       if (kAllowedHotKeys.has(keyEvent.key.toLowerCase())) {
         const isHotKeyAlreadyUsed = [...this.renderRoot.querySelectorAll(".hotkey")]
-          .find((existingInput) => existingInput.value === keyEvent.key.toUpperCase());
+          .find((existingInput) => /** @type {HTMLInputElement} */ (existingInput).value === keyEvent.key.toUpperCase());
 
         setValue(isHotKeyAlreadyUsed ? currentValue : keyEvent.key.toUpperCase());
       }
@@ -404,26 +432,32 @@ export class SettingsView extends LitElement {
       return;
     }
 
-    const defaultPackageMenu = this.renderRoot.querySelector("#default_package_menu");
-    const themeSelector = this.renderRoot.querySelector("#theme_selector");
-    const showFriendly = this.renderRoot.querySelector("#show-friendly");
-    const disableExternal = this.renderRoot.querySelector("#disable-external");
+    const defaultPackageMenu = /** @type {HTMLSelectElement} */ (this.renderRoot.querySelector("#default_package_menu"));
+    const themeSelector = /** @type {HTMLSelectElement} */ (this.renderRoot.querySelector("#theme_selector"));
+    const showFriendly = /** @type {HTMLInputElement} */ (this.renderRoot.querySelector("#show-friendly"));
+    const disableExternal = /** @type {HTMLInputElement} */ (this.renderRoot.querySelector("#disable-external"));
 
     const newConfig = {
       defaultPackageMenu: defaultPackageMenu.value || SettingsView.defaultMenuName,
-      ignore: { flags: new Set(), warnings: new Set() },
+      ignore: { flags: /** @type {Set<string>} */ (new Set()), warnings: /** @type {Set<string>} */ (new Set()) },
       showFriendlyDependencies: showFriendly.checked,
       theme: themeSelector.value,
       disableExternalRequests: disableExternal.checked
     };
 
-    for (const checkbox of this.renderRoot.querySelectorAll("input[name='warnings']")) {
+    const warningsCheckboxes = /** @type {NodeListOf<HTMLInputElement>} */ (
+      this.renderRoot.querySelectorAll("input[name='warnings']")
+    );
+    for (const checkbox of warningsCheckboxes) {
       if (checkbox.checked) {
         newConfig.ignore.warnings.add(checkbox.value);
       }
     }
 
-    for (const checkbox of this.renderRoot.querySelectorAll("input[name='flags']")) {
+    const flagsCheckboxes = /** @type {NodeListOf<HTMLInputElement>} */ (
+      this.renderRoot.querySelectorAll("input[name='flags']")
+    );
+    for (const checkbox of flagsCheckboxes) {
       if (checkbox.checked) {
         newConfig.ignore.flags.add(checkbox.value);
       }
@@ -450,6 +484,8 @@ export class SettingsView extends LitElement {
   }
 
   #renderWarningCheckboxes() {
+    const config = /** @type {import("../../../types.js").AppConfig} */ (this.config);
+
     return Object.keys(warnings).map((id) => html`
       <div>
         <input
@@ -457,7 +493,7 @@ export class SettingsView extends LitElement {
           id=${id}
           name="warnings"
           value=${id}
-          ?checked=${this.config.ignore.warnings.has(id)}
+          ?checked=${config.ignore.warnings.has(id)}
           @change=${() => this.#enableSaveButton()}
         />
         <label for=${id}>${id.replaceAll("-", " ")}</label>
@@ -466,6 +502,8 @@ export class SettingsView extends LitElement {
   }
 
   #renderFlagCheckboxes() {
+    const config = /** @type {import("../../../types.js").AppConfig} */ (this.config);
+
     return FLAG_IGNORE_ITEMS.map(({ value, emoji }) => html`
       <div>
         <input
@@ -473,7 +511,7 @@ export class SettingsView extends LitElement {
           id=${value}
           name="flags"
           value=${value}
-          ?checked=${this.config.ignore.flags.has(value)}
+          ?checked=${config.ignore.flags.has(value)}
           @change=${() => this.#enableSaveButton()}
         />
         <label for=${value}>${emoji} ${value}</label>
@@ -481,6 +519,9 @@ export class SettingsView extends LitElement {
     `);
   }
 
+  /**
+   * @param {Record<string, any>} shortcuts
+   */
   #renderShortcuts(shortcuts) {
     return kShortcuts.map(({ id, labelKey, viewKey }) => html`
       <div>
@@ -489,7 +530,7 @@ export class SettingsView extends LitElement {
           id=${id}
           class="hotkey"
           .value=${this._hotkeys[id] ?? ""}
-          @click=${(event) => this.#onHotkeyClick(event)}
+          @click=${(/** @type {Event} */ event) => this.#onHotkeyClick(event)}
         />
         <label for=${id}>${shortcuts[labelKey]}${viewKey ? ` ${shortcuts.views[viewKey]}` : ""}</label>
       </div>
@@ -501,7 +542,7 @@ export class SettingsView extends LitElement {
       return nothing;
     }
 
-    const i18n = window.i18n[currentLang()];
+    const i18n = /** @type {Record<string, any>} */ (/** @type {unknown} */ (getI18n()));
     const general = i18n.settings.general;
     const shortcuts = i18n.settings.shortcuts;
     const packageNav = i18n.package_info.navigation;
diff --git a/workspaces/cli/public/components/views/tree/tree-card.js b/workspaces/cli/public/components/views/tree/tree-card.js
index bf315692..39d94ba1 100644
--- a/workspaces/cli/public/components/views/tree/tree-card.js
+++ b/workspaces/cli/public/components/views/tree/tree-card.js
@@ -5,7 +5,7 @@ import prettyBytes from "pretty-bytes";
 
 // Import Internal Dependencies
 import { EVENTS } from "../../../core/events.js";
-import { currentLang } from "../../../common/utils.js";
+import * as utils from "../../../common/utils.js";
 
 // CONSTANTS
 const kWarningCriticalThreshold = 10;
@@ -25,11 +25,15 @@ const kModuleTypeColors = {
   faux: "#6b7280"
 };
 
+/**
+ * @param {string | Date} isoDate
+ */
 function formatTimeAgo(isoDate) {
   const ageMs = Date.now() - new Date(isoDate).getTime();
-  const rtf = new Intl.RelativeTimeFormat(kLangToLocale[currentLang()] ?? "en", {
-    numeric: "auto"
-  });
+  const rtf = new Intl.RelativeTimeFormat(
+    /** @type {Record<string, string>} */ (kLangToLocale)[utils.currentLang()] ?? "en",
+    { numeric: "auto" }
+  );
 
   if (ageMs < kOneWeek) {
     return rtf.format(-Math.floor(ageMs / kOneDay), "day");
@@ -44,8 +48,11 @@ function formatTimeAgo(isoDate) {
   return rtf.format(-Math.floor(ageMs / kOneYear), "year");
 }
 
+/**
+ * @param {string} flag
+ */
 function renderFlag(flag) {
-  const ignoredFlags = window.settings.config.ignore.flags ?? [];
+  const ignoredFlags = utils.getSettingsConfig().ignore.flags ?? [];
   const ignoredSet = new Set(ignoredFlags);
   if (ignoredSet.has(flag)) {
     return nothing;
@@ -59,10 +66,21 @@ function renderFlag(flag) {
   return html`<span class="flag" title="${flag}">${emoji}</span>`;
 }
 
+/**
+ * @param {import("@nodesecure/vis-network").NodeSecureDataSet} secureDataSet
+ * @param {string} name
+ * @param {string} version
+ */
 function getVersionData(secureDataSet, name, version) {
-  return secureDataSet.data.dependencies[name]?.versions[version];
+  return /** @type {NonNullable<import("@nodesecure/vis-network").NodeSecureDataSet["data"]>} */ (
+    secureDataSet.data
+  ).dependencies[name]?.versions[version];
 }
 
+/**
+ * @param {import("@nodesecure/vis-network").NodeSecureDataSet} secureDataSet
+ * @param {{ nodeId: number, parentId?: number | null, isRoot?: boolean, publishedAt?: string | Date | null, publishedColor?: string | null }} options
+ */
 export function renderCardContent(secureDataSet, options) {
   const {
     nodeId,
@@ -71,7 +89,7 @@ export function renderCardContent(secureDataSet, options) {
     publishedAt = null,
     publishedColor = null
   } = options;
-  const entry = secureDataSet.linker.get(nodeId);
+  const entry = /** @type {import("@nodesecure/vis-network").LinkerEntry} */ (secureDataSet.linker.get(nodeId));
   const versionData = getVersionData(secureDataSet, entry.name, entry.version);
   if (!versionData) {
     return nothing;
@@ -89,7 +107,7 @@ export function renderCardContent(secureDataSet, options) {
 
   const hasProvenance = Boolean(versionData.attestations?.provenance);
   const moduleType = versionData.type ?? "cjs";
-  const typeColor = kModuleTypeColors[moduleType] ?? "#6b7280";
+  const typeColor = /** @type {Record<string, string>} */ (kModuleTypeColors)[moduleType] ?? "#6b7280";
   const size = prettyBytes(versionData.size ?? 0);
   const licenses = versionData.uniqueLicenseIds?.join(", ") ?? "—";
   const depCount = versionData.dependencyCount ?? 0;
diff --git a/workspaces/cli/public/components/views/tree/tree-connectors.js b/workspaces/cli/public/components/views/tree/tree-connectors.js
index 7ef52b06..fdbb9d18 100644
--- a/workspaces/cli/public/components/views/tree/tree-connectors.js
+++ b/workspaces/cli/public/components/views/tree/tree-connectors.js
@@ -1,6 +1,18 @@
 // Import Internal Dependencies
 import { CONNECTOR_GAP } from "./tree-layout.js";
 
+/**
+ * @typedef {Object} CellRect
+ * @property {number} left
+ * @property {number} right
+ * @property {number} top
+ * @property {number} bottom
+ * @property {number} midY
+ */
+
+/**
+ * @param {HTMLElement | DocumentFragment | ShadowRoot} renderRoot
+ */
 export function drawConnectors(renderRoot) {
   const grid = renderRoot.querySelector(".tree-grid");
   if (!grid) {
@@ -15,11 +27,12 @@ export function drawConnectors(renderRoot) {
     return;
   }
 
-  const cells = grid.querySelectorAll(".tree-cell");
+  const cells = /** @type {NodeListOf<HTMLElement>} */ (grid.querySelectorAll(".tree-cell"));
 
   // Map each wrapper element to its rects:
   // - span bounds (top/bottom) from the stretched wrapper, for parent lookup
   // - midY from the inner card, for line anchoring at the visual card center
+  /** @type {Map<HTMLElement, CellRect>} */
   const elementRects = new Map();
   for (const cell of cells) {
     const wrapperRaw = cell.getBoundingClientRect();
@@ -38,6 +51,7 @@ export function drawConnectors(renderRoot) {
   // Resolve parent element for each child using spatial overlap:
   // among all cells matching data-parent-id, pick the one whose vertical
   // span (stretched to fill its grid rows) contains the child's midY.
+  /** @type {Map<HTMLElement, HTMLElement[]>} */
   const elementChildren = new Map();
   for (const child of cells) {
     const rawParentId = child.dataset.parentId;
@@ -46,15 +60,16 @@ export function drawConnectors(renderRoot) {
     }
 
     const parentId = Number(rawParentId);
-    const childMidY = elementRects.get(child).midY;
+    const childMidY = /** @type {CellRect} */ (elementRects.get(child)).midY;
 
+    /** @type {HTMLElement | null} */
     let bestParent = null;
     for (const candidate of cells) {
       if (Number(candidate.dataset.nodeId) !== parentId) {
         continue;
       }
 
-      const candidateRect = elementRects.get(candidate);
+      const candidateRect = /** @type {CellRect} */ (elementRects.get(candidate));
       if (childMidY >= candidateRect.top && childMidY <= candidateRect.bottom) {
         bestParent = candidate;
         break;
@@ -80,13 +95,13 @@ export function drawConnectors(renderRoot) {
   let hasPath = false;
 
   for (const [parent, children] of elementChildren) {
-    const parentRect = elementRects.get(parent);
-    const childRects = children.map((child) => elementRects.get(child));
+    const parentRect = /** @type {CellRect} */ (elementRects.get(parent));
+    const childRects = /** @type {CellRect[]} */ (children.map((child) => elementRects.get(child)));
 
     const midX = parentRect.right + (CONNECTOR_GAP / 2);
     const childMidYs = childRects.map((rect) => rect.midY).sort((rectA, rectB) => rectA - rectB);
     const firstChildY = childMidYs[0];
-    const lastChildY = childMidYs.at(-1);
+    const lastChildY = /** @type {number} */ (childMidYs.at(-1));
 
     let pathData = `M ${parentRect.right} ${parentRect.midY} H ${midX}`;
 
diff --git a/workspaces/cli/public/components/views/tree/tree-layout.js b/workspaces/cli/public/components/views/tree/tree-layout.js
index 698f5490..5fb09b18 100644
--- a/workspaces/cli/public/components/views/tree/tree-layout.js
+++ b/workspaces/cli/public/components/views/tree/tree-layout.js
@@ -3,7 +3,8 @@ export const CARD_WIDTH = 250;
 export const CONNECTOR_GAP = 16;
 export const GAP_ROW_HEIGHT = 16;
 
-const kEpochFallback = kEpochFallback;
+// Fallback sort date for entries missing `lastUpdateAt`; epoch sorts them as "oldest".
+const kEpochFallback = 0;
 const kOneDay = 1_000 * 60 * 60 * 24;
 const kOneWeek = kOneDay * 7;
 const kOneMonth = kOneDay * 30;
@@ -20,12 +21,29 @@ export const ACTIVITY_GROUPS = [
   { key: "stale", color: "#6b7280", threshold: Infinity }
 ];
 
+/**
+ * @typedef {import("@nodesecure/vis-network").LinkerEntry} LinkerEntry
+ * @typedef {import("@nodesecure/vis-network").VisEdge} VisEdge
+ * @typedef {Record<string, import("@nodesecure/scanner").Dependency>} Dependencies
+ */
+
+/**
+ * @param {number} nodeId
+ * @param {Map<number, number[]>} childrenByParent
+ * @param {Map<number, LinkerEntry>} linker
+ */
 export function getSortedChildren(nodeId, childrenByParent, linker) {
   return (childrenByParent.get(nodeId) ?? [])
-    .sort((idA, idB) => linker.get(idA).name.localeCompare(linker.get(idB).name));
+    .sort((idA, idB) => /** @type {LinkerEntry} */ (linker.get(idA)).name.localeCompare(
+      /** @type {LinkerEntry} */ (linker.get(idB)).name
+    ));
 }
 
+/**
+ * @param {VisEdge[]} rawEdgesData
+ */
 export function buildChildrenMap(rawEdgesData) {
+  /** @type {Map<number, number[]>} */
   const childrenByParent = new Map();
   for (const edge of rawEdgesData) {
     const children = childrenByParent.get(edge.to) ?? [];
@@ -36,9 +54,15 @@ export function buildChildrenMap(rawEdgesData) {
   return childrenByParent;
 }
 
+/**
+ * @param {Map<number, LinkerEntry>} linker
+ * @param {Dependencies} dependencies
+ */
 export function computeActivityGroups(linker, dependencies) {
   const now = Date.now();
+  /** @type {Map<string, number[]>} */
   const groups = new Map(ACTIVITY_GROUPS.map(({ key }) => [key, []]));
+  /** @type {Set<string>} */
   const seen = new Set();
 
   for (const [nodeId, entry] of linker) {
@@ -51,14 +75,18 @@ export function computeActivityGroups(linker, dependencies) {
     const lastUpdateAt = dependencies[entry.name]?.metadata?.lastUpdateAt;
     const ageMs = lastUpdateAt ? now - new Date(lastUpdateAt).getTime() : Infinity;
 
-    const bucket = ACTIVITY_GROUPS.find(({ threshold }) => ageMs < threshold) ?? ACTIVITY_GROUPS.at(-1);
-    groups.get(bucket.key).push(nodeId);
+    const bucket = ACTIVITY_GROUPS.find(
+      ({ threshold }) => ageMs < threshold) ?? /** @type {typeof ACTIVITY_GROUPS[number]} */ (ACTIVITY_GROUPS.at(-1)
+    );
+    /** @type {number[]} */ (groups.get(bucket.key)).push(nodeId);
   }
 
   for (const [, nodeIds] of groups) {
     nodeIds.sort((idA, idB) => {
-      const dateA = dependencies[linker.get(idA).name]?.metadata?.lastUpdateAt ?? kEpochFallback;
-      const dateB = dependencies[linker.get(idB).name]?.metadata?.lastUpdateAt ?? kEpochFallback;
+      const entryA = /** @type {LinkerEntry} */ (linker.get(idA));
+      const entryB = /** @type {LinkerEntry} */ (linker.get(idB));
+      const dateA = dependencies[entryA.name]?.metadata?.lastUpdateAt ?? kEpochFallback;
+      const dateB = dependencies[entryB.name]?.metadata?.lastUpdateAt ?? kEpochFallback;
 
       return new Date(dateB).getTime() - new Date(dateA).getTime();
     });
@@ -67,6 +95,9 @@ export function computeActivityGroups(linker, dependencies) {
   return groups;
 }
 
+/**
+ * @param {VisEdge[]} rawEdgesData
+ */
 export function computeDepthGroups(rawEdgesData) {
   const childrenByParent = buildChildrenMap(rawEdgesData);
 
@@ -75,7 +106,7 @@ export function computeDepthGroups(rawEdgesData) {
   const queue = [0];
 
   while (queue.length > 0) {
-    const current = queue.shift();
+    const current = /** @type {number} */ (queue.shift());
     const currentDepth = depthMap.get(current);
 
     for (const childId of (childrenByParent.get(current) ?? [])) {
@@ -96,10 +127,28 @@ export function computeDepthGroups(rawEdgesData) {
   return new Map([...byDepth.entries()].sort((entryA, entryB) => entryA[0] - entryB[0]));
 }
 
+/**
+ * @typedef {Object} TreeCell
+ * @property {number} [nodeId]
+ * @property {number} [col]
+ * @property {number} [row]
+ * @property {number} [rowSpan]
+ * @property {number | null} [parentId]
+ * @property {boolean} [isCyclic]
+ * @property {boolean} [isRoot]
+ * @property {boolean} [isGap]
+ */
+
 /**
  * Recursively builds grid cells for a subtree.
  * Returns the total number of rows used.
  * Appends cells to the `cells` array (children before parent).
+ *
+ * @param {{
+ *   nodeId: number, col: number, startRow: number, parentId: number,
+ *   ancestors: Set<number>, childrenByParent: Map<number, number[]>,
+ *   linker: Map<number, LinkerEntry>, cells: TreeCell[]
+ * }} params
  */
 function buildSubtree({ nodeId, col, startRow, parentId, ancestors, childrenByParent, linker, cells }) {
   if (ancestors.has(nodeId)) {
@@ -144,9 +193,13 @@ function buildSubtree({ nodeId, col, startRow, parentId, ancestors, childrenByPa
 /**
  * Builds the full tree layout as a unified CSS grid.
  * Returns cells[] and the total row count (including gap rows).
+ *
+ * @param {VisEdge[]} rawEdgesData
+ * @param {Map<number, LinkerEntry>} linker
  */
 export function computeTreeLayout(rawEdgesData, linker) {
   const childrenByParent = buildChildrenMap(rawEdgesData);
+  /** @type {TreeCell[]} */
   const cells = [];
   let currentRow = 1;
 
diff --git a/workspaces/cli/public/components/views/tree/tree.js b/workspaces/cli/public/components/views/tree/tree.js
index 0f2eb26f..036e7e90 100644
--- a/workspaces/cli/public/components/views/tree/tree.js
+++ b/workspaces/cli/public/components/views/tree/tree.js
@@ -2,7 +2,7 @@
 import { LitElement, html, nothing } from "lit";
 
 // Import Internal Dependencies
-import { currentLang } from "../../../common/utils.js";
+import { getI18n } from "../../../common/utils.js";
 import { EVENTS } from "../../../core/events.js";
 import { treeStyles } from "./tree-styles.js";
 import {
@@ -18,7 +18,7 @@ import { renderCardContent } from "./tree-card.js";
 import { drawConnectors } from "./tree-connectors.js";
 import "../../root-selector/root-selector.js";
 
-class TreeView extends LitElement {
+export class TreeView extends LitElement {
   static styles = treeStyles;
 
   static properties = {
@@ -28,6 +28,7 @@ class TreeView extends LitElement {
 
   constructor() {
     super();
+    /** @type {import("@nodesecure/vis-network").NodeSecureDataSet | null} */
     this.secureDataSet = null;
     this._mode = "depth";
   }
@@ -38,15 +39,27 @@ class TreeView extends LitElement {
     }
   }
 
+  /**
+   * @returns {Record<string, any>}
+   */
+  #getTreeI18n() {
+    return /** @type {Record<string, any>} */ (/** @type {unknown} */ (getI18n().tree));
+  }
+
+  /**
+   * @param {number} depth
+   * @param {number[]} nodeIds
+   */
   #renderDepthColumn(depth, nodeIds) {
-    const i18n = window.i18n[currentLang()];
+    const i18n = this.#getTreeI18n();
     const label = depth === 0
-      ? i18n.tree.root
-      : `${i18n.tree.depth} ${depth}`;
+      ? i18n.root
+      : `${i18n.depth} ${depth}`;
 
+    const secureDataSet = /** @type {import("@nodesecure/vis-network").NodeSecureDataSet} */ (this.secureDataSet);
     const sortedNodeIds = [...nodeIds].sort((idA, idB) => {
-      const entryA = this.secureDataSet.linker.get(idA);
-      const entryB = this.secureDataSet.linker.get(idB);
+      const entryA = /** @type {import("@nodesecure/vis-network").LinkerEntry} */ (secureDataSet.linker.get(idA));
+      const entryB = /** @type {import("@nodesecure/vis-network").LinkerEntry} */ (secureDataSet.linker.get(idB));
 
       return entryA.name.localeCompare(entryB.name);
     });
@@ -58,12 +71,15 @@ class TreeView extends LitElement {
           <span class="depth-column--count">${sortedNodeIds.length}</span>
         </div>
         <div class="depth-column--cards">
-          ${sortedNodeIds.map((nodeId) => renderCardContent(this.secureDataSet, { nodeId }))}
+          ${sortedNodeIds.map((nodeId) => renderCardContent(secureDataSet, { nodeId }))}
         </div>
       </div>
     `;
   }
 
+  /**
+   * @param {Map<number, number[]>} depthGroups
+   */
   #renderDepthMode(depthGroups) {
     return html`
       <div class="depth-container">
@@ -74,8 +90,12 @@ class TreeView extends LitElement {
     `;
   }
 
+  /**
+   * @param {number} maxDepth
+   */
   #renderTreeMode(maxDepth) {
-    const { cells, totalRows } = computeTreeLayout(this.secureDataSet.rawEdgesData, this.secureDataSet.linker);
+    const secureDataSet = /** @type {import("@nodesecure/vis-network").NodeSecureDataSet} */ (this.secureDataSet);
+    const { cells, totalRows } = computeTreeLayout(secureDataSet.rawEdgesData, secureDataSet.linker);
 
     const colWidth = CARD_WIDTH + CONNECTOR_GAP;
     // +1 for root col
@@ -108,7 +128,8 @@ class TreeView extends LitElement {
                   class="tree-cell"
                   data-node-id="${cell.nodeId}"
                   data-parent-id="${cell.parentId === null ? nothing : cell.parentId}"
-                  style="grid-column: ${cell.col + 1}; grid-row: ${cell.row} / span ${cell.rowSpan}; width: ${CARD_WIDTH}px"
+                  style="grid-column: ${(cell.col ?? 0) + 1};
+                  grid-row: ${cell.row} / span ${cell.rowSpan}; width: ${CARD_WIDTH}px"
                 >
                   <div
                     class="tree-card"
@@ -118,7 +139,9 @@ class TreeView extends LitElement {
                     )}
                   >
                     <div class="tree-card--header">
-                      <span class="tree-card--name">${this.secureDataSet.linker.get(cell.nodeId).name}</span>
+                      <span class="tree-card--name">${/** @type {import("@nodesecure/vis-network").LinkerEntry} */ (
+                        secureDataSet.linker.get(/** @type {number} */ (cell.nodeId))
+                      ).name}</span>
                       <span class="tree-card--cyclic" title="Circular dependency">↺ cyclic</span>
                     </div>
                   </div>
@@ -131,10 +154,10 @@ class TreeView extends LitElement {
                 class="tree-cell"
                 data-node-id="${cell.nodeId}"
                 data-parent-id="${cell.parentId === null ? nothing : cell.parentId}"
-                style="grid-column: ${cell.col + 1}; grid-row: ${cell.row} / span ${cell.rowSpan}; width: ${CARD_WIDTH}px"
+                style="grid-column: ${(cell.col ?? 0) + 1}; grid-row: ${cell.row} / span ${cell.rowSpan}; width: ${CARD_WIDTH}px"
               >
-                ${renderCardContent(this.secureDataSet, {
-                  nodeId: cell.nodeId,
+                ${renderCardContent(secureDataSet, {
+                  nodeId: /** @type {number} */ (cell.nodeId),
                   parentId: cell.parentId,
                   isRoot: cell.isRoot ?? false
                 })}
@@ -146,22 +169,28 @@ class TreeView extends LitElement {
     `;
   }
 
+  /**
+   * @param {typeof ACTIVITY_GROUPS[number]} bucket
+   * @param {number[]} nodeIds
+   */
   #renderActivityColumn(bucket, nodeIds) {
-    const i18n = window.i18n[currentLang()];
+    const i18n = this.#getTreeI18n();
     const labelKey = `activity${bucket.key.charAt(0).toUpperCase()}${bucket.key.slice(1)}`;
+    const secureDataSet = /** @type {import("@nodesecure/vis-network").NodeSecureDataSet} */ (this.secureDataSet);
+    const dsData = /** @type {NonNullable<import("@nodesecure/vis-network").NodeSecureDataSet["data"]>} */ (secureDataSet.data);
 
     return html`
       <div class="depth-column">
         <div class="depth-column--header" style="border-bottom-color: ${bucket.color}">
-          <span class="depth-column--label" style="color: ${bucket.color}">${i18n.tree[labelKey]}</span>
+          <span class="depth-column--label" style="color: ${bucket.color}">${i18n[labelKey]}</span>
           <span class="depth-column--count" style="background: ${bucket.color}">${nodeIds.length}</span>
         </div>
         <div class="depth-column--cards">
           ${nodeIds.map((nodeId) => {
-            const entry = this.secureDataSet.linker.get(nodeId);
-            const publishedAt = this.secureDataSet.data.dependencies[entry.name]?.metadata?.lastUpdateAt ?? null;
+            const entry = /** @type {import("@nodesecure/vis-network").LinkerEntry} */ (secureDataSet.linker.get(nodeId));
+            const publishedAt = dsData.dependencies[entry.name]?.metadata?.lastUpdateAt ?? null;
 
-            return renderCardContent(this.secureDataSet, { nodeId, publishedAt, publishedColor: bucket.color });
+            return renderCardContent(secureDataSet, { nodeId, publishedAt, publishedColor: bucket.color });
           })}
         </div>
       </div>
@@ -169,31 +198,38 @@ class TreeView extends LitElement {
   }
 
   #renderActivityMode() {
+    const secureDataSet = /** @type {import("@nodesecure/vis-network").NodeSecureDataSet} */ (this.secureDataSet);
+    const dsData = /** @type {NonNullable<import("@nodesecure/vis-network").NodeSecureDataSet["data"]>} */ (secureDataSet.data);
     const activityGroups = computeActivityGroups(
-      this.secureDataSet.linker,
-      this.secureDataSet.data.dependencies
+      secureDataSet.linker,
+      dsData.dependencies
     );
 
     return html`
       <div class="depth-container">
-        ${ACTIVITY_GROUPS.map((bucket) => this.#renderActivityColumn(bucket, activityGroups.get(bucket.key)))}
+        ${ACTIVITY_GROUPS.map((bucket) => this.#renderActivityColumn(bucket, activityGroups.get(bucket.key) ?? []))}
       </div>
     `;
   }
 
+  /**
+   * @param {Map<number, number[]>} depthGroups
+   */
   #renderHeader(depthGroups) {
-    const totalDeps = Object.keys(this.secureDataSet.data.dependencies).length;
+    const secureDataSet = /** @type {import("@nodesecure/vis-network").NodeSecureDataSet} */ (this.secureDataSet);
+    const dsData = /** @type {NonNullable<import("@nodesecure/vis-network").NodeSecureDataSet["data"]>} */ (secureDataSet.data);
+    const totalDeps = Object.keys(dsData.dependencies).length;
     const directDeps = (depthGroups.get(1) ?? []).length;
     const maxDepth = Math.max(...depthGroups.keys());
-    const i18n = window.i18n[currentLang()];
+    const i18n = this.#getTreeI18n();
 
     return html`
       <div class="page-header">
         <root-selector .secureDataSet=${this.secureDataSet}></root-selector>
         <div class="page-header--stats">
-          <span class="page-header--stat-badge">${totalDeps} ${i18n.tree.deps}</span>
-          <span class="page-header--stat-badge">${directDeps} ${i18n.tree.direct}</span>
-          <span class="page-header--stat-badge">${i18n.tree.depth} ${maxDepth}</span>
+          <span class="page-header--stat-badge">${totalDeps} ${i18n.deps}</span>
+          <span class="page-header--stat-badge">${directDeps} ${i18n.direct}</span>
+          <span class="page-header--stat-badge">${i18n.depth} ${maxDepth}</span>
         </div>
         <div class="page-header--modes">
           <button
@@ -201,24 +237,28 @@ class TreeView extends LitElement {
             @click=${() => {
               this._mode = "depth";
             }}
-          >${i18n.tree.modeDepth}</button>
+          >${i18n.modeDepth}</button>
           <button
             class="mode-btn ${this._mode === "tree" ? "active" : ""}"
             @click=${() => {
               this._mode = "tree";
             }}
-          >${i18n.tree.modeTree}</button>
+          >${i18n.modeTree}</button>
           <button
             class="mode-btn ${this._mode === "activity" ? "active" : ""}"
             @click=${() => {
               this._mode = "activity";
             }}
-          >${i18n.tree.modeActivity}</button>
+          >${i18n.modeActivity}</button>
         </div>
       </div>
     `;
   }
 
+  /**
+   * @param {Map<number, number[]>} depthGroups
+   * @param {number} maxDepth
+   */
   #renderBody(depthGroups, maxDepth) {
     if (this._mode === "tree") {
       return this.#renderTreeMode(maxDepth);
@@ -235,10 +275,7 @@ class TreeView extends LitElement {
       return nothing;
     }
 
-    const depthGroups = computeDepthGroups(
-      this.secureDataSet.rawEdgesData,
-      this.secureDataSet.linker
-    );
+    const depthGroups = computeDepthGroups(this.secureDataSet.rawEdgesData);
     const maxDepth = Math.max(...depthGroups.keys());
 
     return html`
diff --git a/workspaces/cli/public/components/views/warnings/warnings.js b/workspaces/cli/public/components/views/warnings/warnings.js
index 19a54526..1c37372c 100644
--- a/workspaces/cli/public/components/views/warnings/warnings.js
+++ b/workspaces/cli/public/components/views/warnings/warnings.js
@@ -3,7 +3,7 @@ import { LitElement, html, css, nothing } from "lit";
 
 // Import Internal Dependencies
 import { EVENTS } from "../../../core/events.js";
-import { currentLang } from "../../../common/utils.js";
+import * as utils from "../../../common/utils.js";
 import "../../root-selector/root-selector.js";
 
 // CONSTANTS
@@ -15,7 +15,30 @@ const kSeverityColors = {
 };
 const kDocsBaseUrl = "https://github.com/NodeSecure/js-x-ray/blob/master/docs";
 
+/**
+ * @typedef {Object} KindPackage
+ * @property {string} name
+ * @property {string} version
+ * @property {number} nodeId
+ * @property {number} count
+ */
+
+/**
+ * @typedef {Object} KindData
+ * @property {string} kind
+ * @property {string} severity
+ * @property {Map<string, KindPackage>} packages
+ */
+
+/**
+ * @typedef {Record<string, KindData[]>} GroupedWarnings
+ */
+
+/**
+ * @param {import("@nodesecure/vis-network").NodeSecureDataSet} secureDataSet
+ */
 function buildWarningsData(secureDataSet) {
+  /** @type {Map<string, number>} */
   const nodeIdBySpec = new Map();
   for (const [nodeId, entry] of secureDataSet.linker) {
     const spec = `${entry.name}@${entry.version}`;
@@ -24,11 +47,15 @@ function buildWarningsData(secureDataSet) {
     }
   }
 
+  /** @type {Map<string, KindData>} */
   const byKind = new Map();
-  for (const [packageName, dependency] of Object.entries(secureDataSet.data.dependencies)) {
+  const dsData = /** @type {NonNullable<import("@nodesecure/vis-network").NodeSecureDataSet["data"]>} */ (secureDataSet.data);
+  for (const [packageName, dependency] of Object.entries(dsData.dependencies)) {
     for (const [version, versionData] of Object.entries(dependency.versions)) {
       const filteredWarnings = versionData.warnings.filter(
-        (warning) => !window.settings.config.ignore.warnings.has(warning.kind)
+        (/** @type {import("@nodesecure/js-x-ray").Warning} */ warning) => !utils.getSettingsConfig().ignore.warnings.has(
+          warning.kind
+        )
       );
 
       for (const warning of filteredWarnings) {
@@ -37,12 +64,12 @@ function buildWarningsData(secureDataSet) {
           byKind.set(kind, { kind, severity, packages: new Map() });
         }
 
-        const kindData = byKind.get(kind);
+        const kindData = /** @type {KindData} */ (byKind.get(kind));
         const spec = `${packageName}@${version}`;
         const existing = kindData.packages.get(spec) ?? {
           name: packageName,
           version,
-          nodeId: nodeIdBySpec.get(spec),
+          nodeId: /** @type {number} */ (nodeIdBySpec.get(spec)),
           count: 0
         };
         existing.count++;
@@ -51,6 +78,7 @@ function buildWarningsData(secureDataSet) {
     }
   }
 
+  /** @type {GroupedWarnings} */
   const grouped = Object.fromEntries(kSeverityOrder.map((severity) => [severity, []]));
   for (const kindData of byKind.values()) {
     const list = grouped[kindData.severity];
@@ -69,6 +97,7 @@ function buildWarningsData(secureDataSet) {
   }
 
   let totalWarnings = 0;
+  /** @type {Set<string>} */
   const affectedSpecs = new Set();
   for (const kindData of byKind.values()) {
     for (const [spec, pkg] of kindData.packages) {
@@ -80,8 +109,11 @@ function buildWarningsData(secureDataSet) {
   return { grouped, totalWarnings, totalPackages: affectedSpecs.size };
 }
 
+/**
+ * @param {GroupedWarnings} grouped
+ */
 function countBySeverity(grouped) {
-  return Object.fromEntries(
+  return /** @type {Record<string, number>} */ (Object.fromEntries(
     kSeverityOrder.map((severity) => [
       severity,
       grouped[severity].reduce(
@@ -89,7 +121,7 @@ function countBySeverity(grouped) {
         0
       )
     ])
-  );
+  ));
 }
 
 export class WarningsView extends LitElement {
@@ -365,6 +397,15 @@ export class WarningsView extends LitElement {
     }
   `;
 
+  constructor() {
+    super();
+    /** @type {import("@nodesecure/vis-network").NodeSecureDataSet | null} */
+    this.secureDataSet = null;
+  }
+
+  /**
+   * @param {number} [nodeId]
+   */
   #onPackageClick(nodeId) {
     if (nodeId === undefined) {
       return;
@@ -375,11 +416,14 @@ export class WarningsView extends LitElement {
     }));
   }
 
+  /**
+   * @param {KindData} kindData
+   */
   #renderKindCard(kindData) {
-    const i18n = window.i18n[currentLang()];
+    const i18n = /** @type {Record<string, any>} */ (/** @type {unknown} */ (utils.getI18n()));
     const packages = [...kindData.packages.values()];
     const totalCount = packages.reduce((sum, pkg) => sum + pkg.count, 0);
-    const color = kSeverityColors[kindData.severity] ?? "#6b7280";
+    const color = /** @type {Record<string, string>} */ (kSeverityColors)[kindData.severity] ?? "#6b7280";
     const severityLabel = i18n.warnings[kindData.severity.toLowerCase()];
     const docsLabel = i18n.warnings.docs;
 
@@ -393,7 +437,7 @@ export class WarningsView extends LitElement {
             href="${kDocsBaseUrl}/${kindData.kind}.md"
             target="_blank"
             rel="noopener noreferrer"
-            @click=${(event) => event.stopPropagation()}
+            @click=${(/** @type {Event} */ event) => event.stopPropagation()}
           >${docsLabel} ↗</a>
         </div>
         <div class="kind-card--meta">
@@ -411,12 +455,17 @@ export class WarningsView extends LitElement {
     `;
   }
 
+  /**
+   * @param {string} severity
+   * @param {KindData[]} kindList
+   * @param {Record<string, any>} i18n
+   */
   #renderSeveritySection(severity, kindList, i18n) {
     if (kindList.length === 0) {
       return nothing;
     }
 
-    const color = kSeverityColors[severity];
+    const color = /** @type {Record<string, string>} */ (kSeverityColors)[severity];
     const label = i18n.warnings[severity.toLowerCase()];
 
     return html`
@@ -437,7 +486,7 @@ export class WarningsView extends LitElement {
       return nothing;
     }
 
-    const i18n = window.i18n[currentLang()];
+    const i18n = /** @type {Record<string, any>} */ (/** @type {unknown} */ (utils.getI18n()));
     const { grouped, totalWarnings, totalPackages } = buildWarningsData(this.secureDataSet);
     const bySeverity = countBySeverity(grouped);
     const hasWarnings = totalWarnings > 0;
diff --git a/workspaces/cli/public/components/wiki/wiki.js b/workspaces/cli/public/components/wiki/wiki.js
index 7b1aec97..81800602 100644
--- a/workspaces/cli/public/components/wiki/wiki.js
+++ b/workspaces/cli/public/components/wiki/wiki.js
@@ -5,17 +5,25 @@ import * as documentationUI from "@nodesecure/documentation-ui";
 import { PackageInfo } from "../package/package.js";
 
 export class Wiki {
+  /** @type {HTMLElement} */
+  documentationRootElement;
+
   constructor() {
-    this.documentationRootElement = document.querySelector(
+    const documentationRootElement = document.querySelector(
       "#documentation-root-element"
     );
-    this.openButton = this.documentationRootElement.querySelector(
+    if (!documentationRootElement) {
+      throw new Error("Wiki Documentation root element not found");
+    }
+
+    this.documentationRootElement = /** @type {HTMLElement} */ (documentationRootElement);
+    const openButton = /** @type {HTMLElement} */ (this.documentationRootElement.querySelector(
       ".open-button"
-    );
+    ));
 
-    const documentationRenderContainer = this.documentationRootElement.querySelector(
+    const documentationRenderContainer = /** @type {HTMLElement} */ (this.documentationRootElement.querySelector(
       ".documentation-render-container"
-    );
+    ));
     for (const node of documentationRenderContainer.childNodes) {
       node.remove();
     }
@@ -25,22 +33,22 @@ export class Wiki {
       { prefetch: true }
     );
 
-    /** @type {documentationUI.Header} */
+    /** @type {documentationUI.RenderResult["header"]} */
     this.header = header;
-    /** @type {Record<string, documentationUI.Navigation>} */
+    /** @type {documentationUI.RenderResult["navigation"]} */
     this.navigation = navigation;
 
-    const packageInfoDomElement = document.getElementById(PackageInfo.DOMElementName);
+    const packageInfoDomElement = /** @type {HTMLElement} */ (document.getElementById(PackageInfo.DOMElementName));
     document.addEventListener("click", (event) => {
-      const isInWiki = this.documentationRootElement.contains(event.target);
-      const isInPackageInfo = packageInfoDomElement.contains(event.target);
+      const isInWiki = this.documentationRootElement.contains(/** @type {Node} */ (event.target));
+      const isInPackageInfo = packageInfoDomElement.contains(/** @type {Node} */ (event.target));
 
       if (!isInWiki && !isInPackageInfo && this.isOpen) {
         this.close();
       }
     });
 
-    this.openButton.addEventListener("click", () => {
+    openButton.addEventListener("click", () => {
       this[this.isOpen ? "close" : "open"]();
     });
 
@@ -56,14 +64,15 @@ export class Wiki {
    * @param {KeyboardEvent} event
    */
   #keydownHotkeys(event) {
-    const isTargetInput = event.target.tagName === "INPUT";
-    const isTargetPopup = event.target.id === "popup--background";
+    const target = /** @type {HTMLElement} */ (event.target);
+    const isTargetInput = target.tagName === "INPUT";
+    const isTargetPopup = target.id === "popup--background";
     const isSearchCommandOpen = Boolean(document.querySelector("command-palette")?.open);
     if (isTargetInput || isTargetPopup || isSearchCommandOpen) {
       return;
     }
 
-    const hotkeys = JSON.parse(localStorage.getItem("hotkeys"));
+    const hotkeys = JSON.parse(/** @type {string} */ (localStorage.getItem("hotkeys")));
 
     if (event.key.toUpperCase() === hotkeys.wiki) {
       this[this.isOpen ? "close" : "open"]();
@@ -74,8 +83,9 @@ export class Wiki {
    * @param {KeyboardEvent} event
    */
   #keydownArrows(event) {
-    /** @type {documentationUI.Navigation} */
-    const activeNav = this.navigation[this.header.active.getAttribute("data-menu")];
+    const activeHeader = /** @type {HTMLElement} */ (this.header.active);
+    const menuName = /** @type {string} */ (activeHeader.getAttribute("data-menu"));
+    const activeNav = this.navigation[menuName];
 
     switch (event.key) {
       case "ArrowLeft":
diff --git a/workspaces/cli/public/core/i18n.js b/workspaces/cli/public/core/i18n.js
index 1036df00..ff0f6d43 100644
--- a/workspaces/cli/public/core/i18n.js
+++ b/workspaces/cli/public/core/i18n.js
@@ -2,7 +2,10 @@
 import { getJSON } from "@nodesecure/vis-network";
 
 export class i18n {
+  /**
+   * @returns {Promise<Record<string, Record<string, Record<string, string>>>>}
+   */
   async fetch() {
-    return await getJSON("/i18n");
+    return /** @type {Record<string, Record<string, Record<string, string>>>} */ (await getJSON("/i18n"));
   }
 }
diff --git a/workspaces/cli/public/core/network-navigation.js b/workspaces/cli/public/core/network-navigation.js
index 9e4bd11d..a45e3a06 100644
--- a/workspaces/cli/public/core/network-navigation.js
+++ b/workspaces/cli/public/core/network-navigation.js
@@ -2,6 +2,20 @@
 import { PackageInfo } from "../components/package/package.js";
 import { EVENTS } from "./events.js";
 
+/**
+ * @typedef {Object} NavNode
+ * @property {number} id
+ * @property {string} name
+ * @property {Record<string, string>} usedBy
+ * @property {import("vis-network/standalone").Position} position
+ */
+
+/**
+ * @typedef {Object} LevelParams
+ * @property {number[]} nodes
+ * @property {import("vis-network/standalone").IdType[]} [edges]
+ */
+
 export class NetworkNavigation {
   /**
    * @type {import("@nodesecure/vis-network").NodeSecureDataSet}
@@ -16,6 +30,8 @@ export class NetworkNavigation {
    *
    * When the user navigate to a new level, the previous level is stored in this Map.
    * It is used to navigate back to the previous dependency when navigating to the previous level.
+   *
+   * @type {Map<number, LevelParams>}
    */
   #dependenciesMapByLevel = new Map();
   /**
@@ -29,37 +45,37 @@ export class NetworkNavigation {
   /**
    * Represents all nodes of the graph.
    *
-   * @type {import("@nodesecure/vis-network").NodeSecureDataSet["linker"]}
+   * @type {[number, NavNode][]}
    */
   #nodes;
   /**
    * Represents the current node params.
    *
-   * @type {{nodes: number[], edges: string[]}}
+   * @type {LevelParams | null | undefined}
    */
   #currentNodeParams;
   /**
    * Represents the current node.
    *
-   * @type {[number, import("@nodesecure/vis-network").NodeSecureDataSet["linker"][number]]}
+   * @type {[number, NavNode] | undefined}
    */
   #currentNode;
   /**
    * Represents the current node dependencies.
    *
-   * @type {[number, import("@nodesecure/vis-network").NodeSecureDataSet["linker"][number]][]}
+   * @type {[number, NavNode][] | undefined}
    */
   #currentNodeUsedBy;
   /**
    * Represents the dependencies that depends on the current node.
    *
-   * @type {[number, import("@nodesecure/vis-network").NodeSecureDataSet["linker"][number]][]}
+   * @type {[number, NavNode][] | undefined}
    */
   #usedByCurrentNode;
   /**
    * Represents the locked nodes.
    *
-   *  @type {[number, import("@nodesecure/vis-network").NodeSecureDataSet["linker"][number]][]}
+   * @type {[number, import("@nodesecure/vis-network").LinkerEntry & { position: import("vis-network/standalone").Position }][]}
    */
   #lockedNodes = [];
   /**
@@ -91,6 +107,10 @@ export class NetworkNavigation {
     };
   }
 
+  /**
+   * @param {import("vis-network/standalone").Position} position1
+   * @param {import("vis-network/standalone").Position} position2
+   */
   calculateAngle(position1, position2) {
     const dx = position2.x - position1.x;
     const dy = position2.y - position1.y;
@@ -98,16 +118,23 @@ export class NetworkNavigation {
     return Math.atan2(dy, dx);
   }
 
+  /**
+   * @param {number} level
+   */
   setLevel(level) {
     this.#currentLevel = level;
   }
 
+  /**
+   * @param {import("@nodesecure/vis-network").NodeSecureDataSet} secureDataSet
+   * @param {import("@nodesecure/vis-network").NodeSecureNetwork} nsn
+   */
   constructor(secureDataSet, nsn) {
     this.#secureDataSet = secureDataSet;
     this.#nsn = nsn;
 
     this.#nodes = [...this.#secureDataSet.linker]
-      .map(([nodeId, { id, name, usedBy }]) => [
+      .map(([nodeId, { id, name, usedBy }]) => /** @type {[number, NavNode]} */ ([
         nodeId,
         {
           id,
@@ -115,7 +142,7 @@ export class NetworkNavigation {
           usedBy,
           position: nsn.network.getPosition(id)
         }
-      ]);
+      ]));
 
     this.#dependenciesMapByLevel.set(0, this.rootNodeParams);
 
@@ -127,11 +154,15 @@ export class NetworkNavigation {
     });
 
     document.addEventListener("keydown", (event) => {
-      const isNetworkViewHidden = document.getElementById("network--view").classList.contains("hidden");
-      const isWikiOpen = document.getElementById("documentation-root-element").classList.contains("slide-in");
-      const isTargetPopup = event.target.id === "popup--background";
-      const isTargetInput = event.target.tagName === "INPUT";
-      const isSearchCommandOpen = Boolean(document.querySelector("command-palette")?.open);
+      const networkView = /** @type {HTMLElement} */ (document.getElementById("network--view"));
+      const wikiRoot = /** @type {HTMLElement} */ (document.getElementById("documentation-root-element"));
+      const isNetworkViewHidden = networkView.classList.contains("hidden");
+      const isWikiOpen = wikiRoot.classList.contains("slide-in");
+      const eventTarget = /** @type {HTMLElement} */ (event.target);
+      const isTargetPopup = eventTarget.id === "popup--background";
+      const isTargetInput = eventTarget.tagName === "INPUT";
+      const commandPalette = /** @type {(HTMLElement & { open: boolean }) | null} */ (document.querySelector("command-palette"));
+      const isSearchCommandOpen = Boolean(commandPalette?.open);
       if (isNetworkViewHidden || isWikiOpen || isTargetPopup || isTargetInput || isSearchCommandOpen) {
         return;
       }
@@ -164,10 +195,10 @@ export class NetworkNavigation {
         return;
       }
 
-      const nodeDependencyName = this.#secureDataSet.linker.get(Number(nodeParam.nodes[0])).name;
+      const nodeDependencyName = this.#getLinkerEntry(Number(nodeParam.nodes[0])).name;
 
       this.#currentNodeUsedBy = this.#nodes
-        .filter(([_, opt]) => Object.keys(this.#secureDataSet.linker.get(Number(nodeParam.nodes[0])).usedBy).includes(opt.name));
+        .filter(([_, opt]) => Object.keys(this.#getLinkerEntry(Number(nodeParam.nodes[0])).usedBy).includes(opt.name));
       this.#usedByCurrentNode = this.#nodes.filter(([_, opt]) => Reflect.has(opt.usedBy, nodeDependencyName));
 
       this.#currentNode = this.#nodes.find(([id]) => id === Number(nodeParam.nodes[0]));
@@ -195,6 +226,17 @@ export class NetworkNavigation {
     });
   }
 
+  /**
+   * @param {number} id
+   * @returns {import("@nodesecure/vis-network").LinkerEntry}
+   */
+  #getLinkerEntry(id) {
+    return /** @type {import("@nodesecure/vis-network").LinkerEntry} */ (this.#secureDataSet.linker.get(id));
+  }
+
+  /**
+   * @param {[number, NavNode]} node
+   */
   #navigateTreeLevel(node) {
     const activeNode = node[0];
     this.#nsn.focusNodeById(activeNode);
@@ -206,21 +248,33 @@ export class NetworkNavigation {
     this.#dependenciesMapByLevel.set(this.#currentLevel, this.#currentNodeParams);
   }
 
+  /**
+   * @param {[number, NavNode][]} nodes
+   * @returns {[number, NavNode][]}
+   */
   #sortByDistance(nodes) {
+    const currentNode = /** @type {[number, NavNode]} */ (this.#currentNode);
+
     return nodes.slice(0).sort((node1, node2) => {
       const distance1 = Math.sqrt(
-        Math.pow(node1[1].position.x - this.#currentNode[1].position.x, 2) +
-        Math.pow(node1[1].position.y - this.#currentNode[1].position.y, 2)
+        Math.pow(node1[1].position.x - currentNode[1].position.x, 2) +
+        Math.pow(node1[1].position.y - currentNode[1].position.y, 2)
       );
       const distance2 = Math.sqrt(
-        Math.pow(node2[1].position.x - this.#currentNode[1].position.x, 2) +
-        Math.pow(node2[1].position.y - this.#currentNode[1].position.y, 2)
+        Math.pow(node2[1].position.x - currentNode[1].position.x, 2) +
+        Math.pow(node2[1].position.y - currentNode[1].position.y, 2)
       );
 
       return distance1 - distance2;
     });
   }
 
+  /**
+   * @template {{ position: import("vis-network/standalone").Position }} T
+   * @param {[number, T][]} nodes
+   * @param {import("vis-network/standalone").Position} from
+   * @returns {[number, T][]}
+   */
   #sortByAngle(nodes, from) {
     return nodes.slice(0).sort((node1, node2) => {
       const angle1 = this.calculateAngle(from, node1[1].position);
@@ -231,15 +285,16 @@ export class NetworkNavigation {
   }
 
   #moveToNextLevel() {
-    if (this.#usedByCurrentNode.length === 0) {
+    const usedByCurrentNode = /** @type {[number, NavNode][]} */ (this.#usedByCurrentNode);
+    if (usedByCurrentNode.length === 0) {
       return;
     }
 
     this.#currentLevelDependenciesIndex = 0;
 
-    const sortedNodes = this.#sortByDistance(this.#usedByCurrentNode);
+    const sortedNodes = this.#sortByDistance(usedByCurrentNode);
 
-    const nextLevelNodeMatchingUseDependencies = this.#usedByCurrentNode
+    const nextLevelNodeMatchingUseDependencies = usedByCurrentNode
       .find(([id]) => id === this.#dependenciesMapByLevel.get(this.#currentLevel + 1)?.nodes[0]);
 
     this.#currentLevel++;
@@ -259,14 +314,15 @@ export class NetworkNavigation {
     this.#currentLevelDependenciesIndex = 0;
 
     const previousLevelId = this.#dependenciesMapByLevel.get(this.#currentLevel - 1)?.nodes[0];
-    const previousLevelNodeMatchingUsedByDependencies = this.#currentNodeUsedBy.find(([id]) => id === previousLevelId);
+    const currentNodeUsedBy = /** @type {[number, NavNode][]} */ (this.#currentNodeUsedBy);
+    const previousLevelNodeMatchingUsedByDependencies = currentNodeUsedBy.find(([id]) => id === previousLevelId);
 
     this.#currentLevel--;
     if (previousLevelNodeMatchingUsedByDependencies) {
       this.#navigateTreeLevel(previousLevelNodeMatchingUsedByDependencies);
     }
     else {
-      this.#navigateTreeLevel(this.#currentNodeUsedBy[0]);
+      this.#navigateTreeLevel(currentNodeUsedBy[0]);
     }
   }
 
@@ -275,18 +331,16 @@ export class NetworkNavigation {
       return;
     }
 
-    const previousNodeDependencyName = this.#secureDataSet.linker.get(
-      this.#dependenciesMapByLevel.get(this.#currentLevel - 1).nodes[0]
-    ).name;
+    const previousLevelParams = /** @type {LevelParams} */ (this.#dependenciesMapByLevel.get(this.#currentLevel - 1));
+    const currentLevelParams = /** @type {LevelParams} */ (this.#dependenciesMapByLevel.get(this.#currentLevel));
+    const previousNodeDependencyName = this.#getLinkerEntry(previousLevelParams.nodes[0]).name;
     const useByPrevious = this.#nodes
       .filter(([_, opt]) => Reflect.has(opt.usedBy, previousNodeDependencyName) &&
-        opt.id !== this.#dependenciesMapByLevel.get(this.#currentLevel - 1).nodes[0]
+        opt.id !== previousLevelParams.nodes[0]
       );
 
-    const curr = this.#nodes.find((node) => node[0] === this.#dependenciesMapByLevel.get(this.#currentLevel).nodes[0]);
-    const prev = this.#nodes.find((node) => node[0] ===
-      this.#dependenciesMapByLevel.get(this.#currentLevel - 1).nodes[0]
-    );
+    const curr = /** @type {[number, NavNode]} */ (this.#nodes.find((node) => node[0] === currentLevelParams.nodes[0]));
+    const prev = /** @type {[number, NavNode]} */ (this.#nodes.find((node) => node[0] === previousLevelParams.nodes[0]));
 
     const sortedNodes = this.#sortByAngle(useByPrevious, prev[1].position);
 
@@ -319,18 +373,16 @@ export class NetworkNavigation {
       return;
     }
 
-    const previousNodeDependencyName = this.#secureDataSet.linker.get(
-      this.#dependenciesMapByLevel.get(this.#currentLevel - 1).nodes[0]
-    ).name;
+    const previousLevelParams = /** @type {LevelParams} */ (this.#dependenciesMapByLevel.get(this.#currentLevel - 1));
+    const currentLevelParams = /** @type {LevelParams} */ (this.#dependenciesMapByLevel.get(this.#currentLevel));
+    const previousNodeDependencyName = this.#getLinkerEntry(previousLevelParams.nodes[0]).name;
     const useByPrevious = this.#nodes
       .filter(([_, opt]) => Reflect.has(opt.usedBy, previousNodeDependencyName) &&
-        opt.id !== this.#dependenciesMapByLevel.get(this.#currentLevel - 1).nodes[0]
+        opt.id !== previousLevelParams.nodes[0]
       );
 
-    const curr = this.#nodes.find((node) => node[0] === this.#dependenciesMapByLevel.get(this.#currentLevel).nodes[0]);
-    const prev = this.#nodes.find((node) => node[0] ===
-      this.#dependenciesMapByLevel.get(this.#currentLevel - 1).nodes[0]
-    );
+    const curr = /** @type {[number, NavNode]} */ (this.#nodes.find((node) => node[0] === currentLevelParams.nodes[0]));
+    const prev = /** @type {[number, NavNode]} */ (this.#nodes.find((node) => node[0] === previousLevelParams.nodes[0]));
     const sortedNodes = this.#sortByAngle(useByPrevious, prev[1].position);
 
     if (useByPrevious.length <= 1) {
@@ -364,10 +416,18 @@ export class NetworkNavigation {
     else {
       this.#lockedNodes = this.#sortByAngle(
         [...this.#nsn.lastHighlightedIds].map(
-          (id) => [id, {
-            ...this.#secureDataSet.linker.get(id),
-            position: this.#nsn.network.getPosition(id)
-          }]
+          (id) => {
+            const numericId = Number(id);
+
+            /** @type {[number, import("@nodesecure/vis-network").LinkerEntry & { position: import("vis-network/standalone").Position }]} */
+            return [
+              numericId,
+              {
+                ...this.#getLinkerEntry(numericId),
+                position: this.#nsn.network.getPosition(id)
+              }
+            ];
+          }
         ),
         { ...this.#nsn.network.getPosition(this.rootNodeParams.nodes[0]) }
       );
@@ -390,6 +450,9 @@ export class NetworkNavigation {
     }
   }
 
+  /**
+   * @param {KeyboardEvent} event
+   */
   #navigateBetweenLockedNodes(event) {
     switch (event.code) {
       case "ArrowLeft":
diff --git a/workspaces/cli/public/global.d.ts b/workspaces/cli/public/global.d.ts
index 84b76275..61bcbe41 100644
--- a/workspaces/cli/public/global.d.ts
+++ b/workspaces/cli/public/global.d.ts
@@ -1,32 +1,72 @@
 // Import Third-party Dependencies
 import type { HLJSApi } from "highlight.js";
 
+declare module "highlightjs-line-numbers.js";
+declare module "highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js";
+
 // Import Internal Dependencies
-import type { Settings } from "./components/views/settings/settings.js";
+import type { SettingsView } from "./components/views/settings/settings.js";
 import type { ViewNavigation } from "./components/navigation/navigation.js";
 import type { Wiki } from "./components/wiki/wiki.js";
 import type { NetworkNavigation } from "./core/network-navigation.js";
 import type { WebSocketClient } from "./websocket.js";
+import type { SearchView } from "./components/views/search/search.js";
+import type { TreeView } from "./components/views/tree/tree.js";
+import type { WarningsView } from "./components/views/warnings/warnings.js";
+import type { NetworkBreadcrumb } from "./components/network-breadcrumb/network-breadcrumb.js";
+import type { CommandPalette } from "./components/command-palette/command-palette.js";
+import type { Files } from "./components/package/pannels/files/files.js";
+import type { Licenses } from "./components/package/pannels/licenses/licenses.js";
+import type { Vulnerabilities } from "./components/package/pannels/vulnerabilities/vulnerabilities.js";
+import type { Scripts } from "./components/package/pannels/scripts/scripts.js";
+import type { Locker } from "./components/locker/locker.js";
+import type { NpmAvatar } from "./components/npm-avatar/npm-avatar.js";
+import type { Maintainers, PopupMaintainer } from "./components/views/home/maintainers/maintainers.js";
+import type { PopupReport } from "./components/views/home/report/report.js";
+import type { FileBox } from "./components/file-box/file-box.js";
+import type { Gauge } from "./components/gauge/gauge.js";
+import type { Expandable } from "./components/expandable/expandable.js";
 
 declare global {
+  interface HTMLElementTagNameMap {
+    "search-view": SearchView;
+    "tree-view": TreeView;
+    "warnings-view": WarningsView;
+    "settings-view": SettingsView;
+    "network-breadcrumb": NetworkBreadcrumb;
+    "command-palette": CommandPalette;
+    "package-files": Files;
+    "package-licenses": Licenses;
+    "package-vulnerabilities": Vulnerabilities;
+    "package-scripts": Scripts;
+    "nsecure-locker": Locker;
+    "npm-avatar": NpmAvatar;
+    "nsecure-maintainers": Maintainers;
+    "popup-maintainer": PopupMaintainer;
+    "file-box": FileBox;
+    "gauge-bar": Gauge;
+    "expandable-span": Expandable;
+    "popup-report": PopupReport;
+  }
+
   interface Window {
     /**
      * Cached package specifications received from the server (e.g. `"express@4.18.0"`).
      * Populated on the `INIT` / `RELOAD` WebSocket events.
      */
-    cachedSpecs: string[];
+    cachedSpecs: import("./types.js").CachedSpec[];
 
     /**
      * The `<nsecure-locker>` custom element placed in the network view.
      * `null` until the network dataset is first loaded.
      */
-    locker: (HTMLElement & { nsn: unknown }) | null;
+    locker: Locker | null;
 
     /**
      * Application settings instance, hydrated from the `/config` endpoint.
      * Contains the active theme, ignored warnings/flags, and other UI preferences.
      */
-    settings: Settings;
+    settings: SettingsView;
 
     /**
      * Localisation dictionary fetched from `/i18n`.
@@ -83,6 +123,11 @@ declare global {
      * The `highlightjs-line-numbers` plugin attaches `initLineNumbersOnLoad` at runtime.
      */
     hljs: HLJSApi & { initLineNumbersOnLoad(): void };
+
+    /**
+     * WebSocket server port, injected server-side into `views/index.html`.
+     */
+    __WS_PORT__: number;
   }
 }
 
diff --git a/workspaces/cli/public/jsconfig.json b/workspaces/cli/public/jsconfig.json
index da73add0..3b99e60f 100644
--- a/workspaces/cli/public/jsconfig.json
+++ b/workspaces/cli/public/jsconfig.json
@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
-    "checkJs": false,
+    "checkJs": true,
     "lib": ["dom", "dom.iterable", "ESNext"],
     "module": "ESNext",
     "moduleResolution": "bundler",
     "target": "ESNext"
   },
-  "include": ["./**/*.js", "./global.d.ts"]
+  "include": ["./**/*.js", "./global.d.ts", "./types.d.ts"]
 }
diff --git a/workspaces/cli/public/main.js b/workspaces/cli/public/main.js
index dcb6b749..fd044be7 100644
--- a/workspaces/cli/public/main.js
+++ b/workspaces/cli/public/main.js
@@ -26,35 +26,60 @@ import { WebSocketClient } from "./websocket.js";
 // CONSTANTS
 const kSearchShortcut = navigator.userAgent.includes("Mac") ? "⌘K" : "Ctrl+K";
 
+/** @type {NodeSecureDataSet | undefined} */
 let secureDataSet;
+/** @type {NodeSecureNetwork | undefined} */
 let nsn;
+/** @type {HomeView | undefined} */
 let homeView;
+/** @type {import("./components/views/search/search.js").SearchView | undefined} */
 let searchview;
+/** @type {import("./components/views/tree/tree.js").TreeView | undefined} */
 let treeView;
+/** @type {import("./components/views/warnings/warnings.js").WarningsView | undefined} */
 let warningsView;
+/** @type {string | null} */
 let viewAfterSwitch = null;
+/** @type {import("./components/network-breadcrumb/network-breadcrumb.js").NetworkBreadcrumb | undefined} */
 let drillBreadcrumb;
 let packageInfoOpened = false;
+/** @type {number[]} */
 const drillStack = [];
 
+/**
+ * @typedef {Object} SocketPayloadDetail
+ * @property {{ rootDependency: { name: string, version: string } }} payload
+ */
+
+/**
+ * @typedef {Object} SocketInitDetail
+ * @property {import("./types.js").CachedSpec[]} cache
+ * @property {string} status
+ */
+
 document.addEventListener("DOMContentLoaded", async() => {
-  searchview = document.querySelector("search-view");
-  treeView = document.querySelector("tree-view");
-  warningsView = document.querySelector("warnings-view");
+  searchview = /** @type {import("./components/views/search/search.js").SearchView} */ (document.querySelector("search-view"));
+  treeView = /** @type {import("./components/views/tree/tree.js").TreeView} */ (document.querySelector("tree-view"));
+  warningsView = /** @type {import("./components/views/warnings/warnings.js").WarningsView} */ (
+    document.querySelector("warnings-view")
+  );
 
   window.cachedSpecs = [];
   window.locker = null;
   window.i18n = await new i18n().fetch();
-  const settingsView = document.querySelector("settings-view");
-  window.settings = settingsView;
+  const settingsView = /** @type {import("./components/views/settings/settings.js").SettingsView} */ (
+    document.querySelector("settings-view")
+  );
+  window.settings = /** @type {any} */ (settingsView);
   await settingsView.fetchUserConfig();
-  window.navigation = new ViewNavigation();
+  window.navigation = /** @type {any} */ (new ViewNavigation());
   window.wiki = new Wiki();
 
   // update searchview after window.i18n is set
   searchview.requestUpdate();
 
-  const isNetworkViewActive = document.getElementById("network--view").classList.contains("hidden") === false;
+  const networkView = /** @type {HTMLElement} */ (document.getElementById("network--view"));
+  const isNetworkViewActive = networkView.classList.contains("hidden") === false;
   const searchShortcutHint = utils.createDOMElement("div", {
     classList: isNetworkViewActive ? ["search-shortcut-hint"] : ["search-shortcut-hint", "hidden"],
     attributes: { id: "search-shortcut-hint" },
@@ -68,41 +93,45 @@ document.addEventListener("DOMContentLoaded", async() => {
     searchShortcutHint.classList.add("hidden");
   });
   window.addEventListener(EVENTS.NETWORK_VIEW_SHOWED, () => {
-    if (!document.getElementById("network--view").classList.contains("hidden")) {
+    if (!networkView.classList.contains("hidden")) {
       searchShortcutHint.classList.remove("hidden");
     }
   });
 
-  drillBreadcrumb = document.querySelector("network-breadcrumb");
+  drillBreadcrumb = /** @type {import("./components/network-breadcrumb/network-breadcrumb.js").NetworkBreadcrumb} */ (
+    document.querySelector("network-breadcrumb")
+  );
   drillBreadcrumb.addEventListener(EVENTS.DRILL_RESET, resetDrill);
-  drillBreadcrumb.addEventListener(EVENTS.DRILL_BACK, function handleDrillBack(event) {
-    drillBackTo(event.detail.index);
+  drillBreadcrumb.addEventListener(EVENTS.DRILL_BACK, function handleDrillBack(/** @type {Event} */ event) {
+    drillBackTo(/** @type {CustomEvent<{ index: number }>} */ (event).detail.index);
   });
-  drillBreadcrumb.addEventListener(EVENTS.DRILL_SWITCH, function handleDrillSwitch(event) {
-    const { stackIndex, nodeId } = event.detail;
+  drillBreadcrumb.addEventListener(EVENTS.DRILL_SWITCH, function handleDrillSwitch(/** @type {Event} */ event) {
+    const { stackIndex, nodeId } = /** @type {CustomEvent<{ stackIndex: number, nodeId: number }>} */ (event).detail;
     drillStack.length = stackIndex;
     drillInto(nodeId);
   });
-  drillBreadcrumb.addEventListener(EVENTS.ROOT_SWITCH, function handleRootSwitch(event) {
-    window.socket.commands.search(event.detail.spec);
+  drillBreadcrumb.addEventListener(EVENTS.ROOT_SWITCH, function handleRootSwitch(/** @type {Event} */ event) {
+    window.socket.commands.search(/** @type {CustomEvent<{ spec: string }>} */ (event).detail.spec);
   });
 
-  window.addEventListener(EVENTS.ROOT_SWITCH, function handleGlobalRootSwitch(event) {
-    viewAfterSwitch = window.navigation.activeMenu?.getAttribute("data-menu") ?? null;
-    window.socket.commands.search(event.detail.spec);
+  window.addEventListener(EVENTS.ROOT_SWITCH, function handleGlobalRootSwitch(/** @type {Event} */ event) {
+    viewAfterSwitch = utils.getNavigation().activeMenu?.getAttribute("data-menu") ?? null;
+    window.socket.commands.search(/** @type {CustomEvent<{ spec: string }>} */ (event).detail.spec);
   });
   drillBreadcrumb.addEventListener(EVENTS.ROOT_REMOVE, function handleRootRemove() {
     const specToRemove = window.activePackage;
-    const nextPackage = drillBreadcrumb.packages[0];
+    const nextPackage = /** @type {import("./components/network-breadcrumb/network-breadcrumb.js").NetworkBreadcrumb} */ (
+      drillBreadcrumb
+    ).packages[0];
     if (nextPackage) {
       window.socket.commands.search(nextPackage.spec);
     }
     else {
-      window.navigation.hideMenu("network--view");
-      window.navigation.hideMenu("home--view");
-      window.navigation.hideMenu("tree--view");
-      window.navigation.hideMenu("warnings--view");
-      window.navigation.setNavByName("search--view");
+      utils.getNavigation().hideMenu("network--view");
+      utils.getNavigation().hideMenu("home--view");
+      utils.getNavigation().hideMenu("tree--view");
+      utils.getNavigation().hideMenu("warnings--view");
+      utils.getNavigation().setNavByName("search--view");
     }
     window.socket.commands.remove(specToRemove);
   });
@@ -125,29 +154,29 @@ document.addEventListener("DOMContentLoaded", async() => {
     }
   });
 
-  window.addEventListener(EVENTS.WARNINGS_PACKAGE_CLICK, (event) => {
-    const { nodeId } = event.detail;
-    const node = secureDataSet.linker.get(nodeId);
+  window.addEventListener(EVENTS.WARNINGS_PACKAGE_CLICK, (/** @type {Event} */ event) => {
+    const { nodeId } = /** @type {CustomEvent<{ nodeId: number }>} */ (event).detail;
+    const node = secureDataSet?.linker.get(nodeId);
     if (!node) {
       return;
     }
 
-    window.navigation.setNavByName("network--view");
+    utils.getNavigation().setNavByName("network--view");
     setTimeout(() => {
       PackageInfo.ForcedPackageMenu = "warnings";
-      nsn.focusNodeByNameAndVersion(node.name, node.version);
+      nsn?.focusNodeByNameAndVersion(node.name, node.version);
     }, 25);
   });
 
-  window.addEventListener(EVENTS.TREE_NODE_CLICK, (event) => {
+  window.addEventListener(EVENTS.TREE_NODE_CLICK, (/** @type {Event} */ event) => {
     console.log(event);
     if (!secureDataSet) {
       return;
     }
 
-    const { nodeId } = event.detail;
+    const { nodeId } = /** @type {CustomEvent<{ nodeId: number }>} */ (event).detail;
     const selectedNode = secureDataSet.linker.get(nodeId);
-    if (!selectedNode) {
+    if (!selectedNode || !secureDataSet.data) {
       return;
     }
 
@@ -157,29 +186,32 @@ document.addEventListener("DOMContentLoaded", async() => {
   await init();
   window.dispatchEvent(
     new CustomEvent(EVENTS.SETTINGS_SAVED, {
-      detail: window.settings.config
+      detail: utils.getSettingsConfig()
     })
   );
-  onSettingsSaved(window.settings.config);
+  onSettingsSaved(utils.getSettingsConfig());
 
   const socket = new WebSocketClient(`ws://${window.location.hostname}:${window.__WS_PORT__}`);
   socket.addEventListener("PAYLOAD", onSocketPayload);
   socket.addEventListener("INIT", onSocketInitOrReload);
   socket.addEventListener("RELOAD", onSocketInitOrReload);
-  socket.addEventListener("SCAN", (event) => {
-    const data = event.detail;
+  socket.addEventListener("SCAN", (/** @type {Event} */ event) => {
+    const data = /** @type {CustomEvent<{ spec: string }>} */ (event).detail;
 
-    searchview.onScan(data.spec);
+    searchview?.onScan(data.spec);
   });
-  socket.addEventListener("ERROR", (event) => {
-    const data = event.detail;
+  socket.addEventListener("ERROR", (/** @type {Event} */ event) => {
+    const data = /** @type {CustomEvent<{ error: string }>} */ (event).detail;
 
-    searchview.onScanError(data.error);
+    searchview?.onScanError(data.error);
   });
 });
 
+/**
+ * @param {Event} event
+ */
 async function onSocketPayload(event) {
-  const data = event.detail;
+  const data = /** @type {CustomEvent<SocketPayloadDetail>} */ (event).detail;
   const { payload } = data;
 
   const { name, version } = payload.rootDependency;
@@ -191,14 +223,17 @@ async function onSocketPayload(event) {
   await init({ navigateToNetworkView: targetView === null });
 
   if (targetView !== null && targetView !== "network--view") {
-    window.navigation.setNavByName(targetView);
+    utils.getNavigation().setNavByName(targetView);
   }
 
   dispatchCommandPaletteInit();
 }
 
+/**
+ * @param {Event} event
+ */
 async function onSocketInitOrReload(event) {
-  const data = event.detail;
+  const data = /** @type {CustomEvent<SocketInitDetail>} */ (event).detail;
   const { cache } = data;
 
   window.cachedSpecs = cache;
@@ -220,16 +255,20 @@ async function onSocketInitOrReload(event) {
     await init();
   }
 
-  drillBreadcrumb.packages = cache.filter((pkg) => pkg.spec !== window.activePackage);
-  searchview.cachedSpecs = cache;
-  searchview.reset();
+  if (drillBreadcrumb) {
+    drillBreadcrumb.packages = cache.filter((pkg) => pkg.spec !== window.activePackage);
+  }
+  if (searchview) {
+    searchview.cachedSpecs = cache;
+    searchview.reset();
+  }
 
   if (cache.length === 0) {
-    window.navigation.hideMenu("network--view");
-    window.navigation.hideMenu("home--view");
-    window.navigation.hideMenu("tree--view");
-    window.navigation.hideMenu("warnings--view");
-    window.navigation.setNavByName("search--view");
+    utils.getNavigation().hideMenu("network--view");
+    utils.getNavigation().hideMenu("home--view");
+    utils.getNavigation().hideMenu("tree--view");
+    utils.getNavigation().hideMenu("warnings--view");
+    utils.getNavigation().setNavByName("search--view");
   }
 
   dispatchCommandPaletteInit();
@@ -250,33 +289,46 @@ function dispatchCommandPaletteInit() {
   window.dispatchEvent(event);
 }
 
+/**
+ * @param {number} parentId
+ * @param {number} excludeId
+ */
 function computeSiblings(parentId, excludeId) {
+  const ds = /** @type {NodeSecureDataSet} */ (secureDataSet);
+  /** @type {Set<number>} */
   const seen = new Set();
+  /** @type {{ nodeId: number, name: string, version: string }[]} */
   const result = [];
 
-  for (const edge of secureDataSet.rawEdgesData) {
+  for (const edge of ds.rawEdgesData) {
     if (edge.to === parentId && edge.from !== excludeId && !seen.has(edge.from)) {
       seen.add(edge.from);
 
-      const entry = secureDataSet.linker.get(edge.from);
-      result.push({
-        nodeId: edge.from,
-        name: entry.name,
-        version: entry.version
-      });
+      const entry = ds.linker.get(edge.from);
+      if (entry) {
+        result.push({
+          nodeId: edge.from,
+          name: entry.name,
+          version: entry.version
+        });
+      }
     }
   }
 
   return result.sort((nodeA, nodeB) => nodeA.name.localeCompare(nodeB.name));
 }
 
+/**
+ * @param {number} rootNodeId
+ */
 function computeDrillSubtree(rootNodeId) {
+  const ds = /** @type {NodeSecureDataSet} */ (secureDataSet);
   const subtreeIds = new Set([rootNodeId]);
   const queue = [rootNodeId];
 
   while (queue.length > 0) {
     const current = queue.shift();
-    for (const edge of secureDataSet.rawEdgesData) {
+    for (const edge of ds.rawEdgesData) {
       if (edge.to === current && !subtreeIds.has(edge.from)) {
         subtreeIds.add(edge.from);
         queue.push(edge.from);
@@ -287,21 +339,29 @@ function computeDrillSubtree(rootNodeId) {
   return subtreeIds;
 }
 
+/**
+ * @param {number} nodeId
+ */
 function applyDrill(nodeId) {
+  const ds = /** @type {NodeSecureDataSet} */ (secureDataSet);
+  const network = /** @type {NodeSecureNetwork} */ (nsn);
   const subtreeIds = computeDrillSubtree(nodeId);
-  const updates = [...secureDataSet.linker.keys()].map((id) => {
+  const updates = [...ds.linker.keys()].map((id) => {
     return {
       id,
       hidden: !subtreeIds.has(id)
     };
   });
-  nsn.nodes.update(updates);
-  nsn.network.unselectAll();
+  network.nodes.update(updates);
+  network.network.unselectAll();
   updateDrillBreadcrumb();
   PackageInfo.close();
-  nsn.neighbourHighlight({ nodes: [nodeId], edges: [] });
+  network.neighbourHighlight({ nodes: [nodeId], edges: [] });
 }
 
+/**
+ * @param {number} nodeId
+ */
 function drillInto(nodeId) {
   const currentRoot = drillStack.length === 0 ? 0 : drillStack.at(-1);
   if (nodeId === currentRoot) {
@@ -312,48 +372,60 @@ function drillInto(nodeId) {
   applyDrill(nodeId);
 }
 
+/**
+ * @param {number} stackIndex
+ */
 function drillBackTo(stackIndex) {
   drillStack.length = stackIndex + 1;
   applyDrill(drillStack[stackIndex]);
 }
 
 function resetDrill() {
+  const ds = /** @type {NodeSecureDataSet} */ (secureDataSet);
+  const network = /** @type {NodeSecureNetwork} */ (nsn);
   drillStack.length = 0;
-  const updates = [...secureDataSet.linker.keys()].map((id) => {
+  const updates = [...ds.linker.keys()].map((id) => {
     return {
       id,
       hidden: false
     };
   });
-  nsn.nodes.update(updates);
+  network.nodes.update(updates);
   updateDrillBreadcrumb();
   PackageInfo.close();
 }
 
 function updateDrillBreadcrumb() {
-  const rootEntry = secureDataSet.linker.get(0);
-  drillBreadcrumb.root = {
+  const ds = /** @type {NodeSecureDataSet} */ (secureDataSet);
+  const breadcrumb = /** @type {import("./components/network-breadcrumb/network-breadcrumb.js").NetworkBreadcrumb} */ (
+    drillBreadcrumb
+  );
+  const rootEntry = /** @type {import("@nodesecure/vis-network").LinkerEntry} */ (ds.linker.get(0));
+  breadcrumb.root = {
     name: rootEntry.name,
     version: rootEntry.version
   };
-  drillBreadcrumb.packages = window.cachedSpecs.filter(
+  breadcrumb.packages = window.cachedSpecs.filter(
     (pkg) => pkg.spec !== window.activePackage
   );
-  drillBreadcrumb.stack = drillStack.map((nodeId) => {
-    const entry = secureDataSet.linker.get(nodeId);
+  breadcrumb.stack = drillStack.map((nodeId) => {
+    const entry = /** @type {import("@nodesecure/vis-network").LinkerEntry} */ (ds.linker.get(nodeId));
 
     return {
       name: entry.name,
       version: entry.version
     };
   });
-  drillBreadcrumb.siblings = drillStack.map((nodeId, index) => {
+  breadcrumb.siblings = drillStack.map((nodeId, index) => {
     const parentId = index === 0 ? 0 : drillStack[index - 1];
 
     return computeSiblings(parentId, nodeId);
   });
 }
 
+/**
+ * @param {{ navigateToNetworkView?: boolean }} options
+ */
 async function init(options = {}) {
   const { navigateToNetworkView = false } = options;
 
@@ -362,35 +434,47 @@ async function init(options = {}) {
     return;
   }
 
-  window.navigation.showMenu("network--view");
-  window.navigation.showMenu("home--view");
-  window.navigation.showMenu("tree--view");
-  window.navigation.showMenu("warnings--view");
-  treeView.secureDataSet = secureDataSet;
-  warningsView.secureDataSet = secureDataSet;
+  const ds = /** @type {NodeSecureDataSet} */ (secureDataSet);
+  const dsData = /** @type {NonNullable<NodeSecureDataSet["data"]>} */ (ds.data);
 
-  window.vulnerabilityStrategy = secureDataSet.data.vulnerabilityStrategy;
+  utils.getNavigation().showMenu("network--view");
+  utils.getNavigation().showMenu("home--view");
+  utils.getNavigation().showMenu("tree--view");
+  utils.getNavigation().showMenu("warnings--view");
+  if (treeView) {
+    treeView.secureDataSet = ds;
+  }
+  if (warningsView) {
+    warningsView.secureDataSet = ds;
+  }
+
+  window.vulnerabilityStrategy = dsData.vulnerabilityStrategy;
 
   // Initialize vis Network
   NodeSecureNetwork.networkElementId = "dependency-graph";
-  nsn = new NodeSecureNetwork(secureDataSet, {
-    i18n: window.i18n[utils.currentLang()],
-    theme: window.settings.config.theme
+  nsn = new NodeSecureNetwork(ds, {
+    i18n: /** @type {any} */ (window.i18n[utils.currentLang()]),
+    theme: utils.getSettingsConfig().theme
   });
-  window.locker = document.createElement("nsecure-locker");
-  window.locker.nsn = nsn;
+  const lockerElement = document.createElement("nsecure-locker");
+  lockerElement.nsn = nsn;
+  window.locker = lockerElement;
   const locker = document.getElementById("network-locker");
   // locker may already have been replaced when reinitializing via the search view
   if (locker) {
-    locker.replaceWith(window.locker);
+    locker.replaceWith(lockerElement);
   }
-  const legend = document.getElementById("legend");
-  legend.isVisible = window.settings.config.showFriendlyDependencies;
+  const legend = /** @type {HTMLElement & { isVisible: boolean, show(): void, hide(): void }} */ (
+    document.getElementById("legend")
+  );
+  legend.isVisible = utils.getSettingsConfig().showFriendlyDependencies;
   window.legend = legend;
-  homeView = new HomeView(secureDataSet, nsn);
+  homeView = new HomeView(ds, nsn);
 
   window.addEventListener(EVENTS.PACKAGE_INFO_CLOSED, () => {
-    window.networkNav.currentNodeParams = null;
+    if (window.networkNav) {
+      window.networkNav.currentNodeParams = null;
+    }
     packageInfoOpened = false;
   });
 
@@ -411,11 +495,11 @@ async function init(options = {}) {
   drillStack.length = 0;
   updateDrillBreadcrumb();
 
-  const networkNavigation = new NetworkNavigation(secureDataSet, nsn);
+  const networkNavigation = new NetworkNavigation(ds, nsn);
   window.networkNav = networkNavigation;
 
   if (navigateToNetworkView) {
-    window.navigation.setNavByName("network--view");
+    utils.getNavigation().setNavByName("network--view");
   }
 
   PackageInfo.close();
@@ -424,21 +508,21 @@ async function init(options = {}) {
 }
 
 async function loadDataSet() {
-  const config = window.settings.config;
+  const config = utils.getSettingsConfig();
 
   secureDataSet = new NodeSecureDataSet({
-    flagsToIgnore: config.ignore.flags,
-    warningsToIgnore: config.ignore.warnings,
+    flagsToIgnore: /** @type {string[]} */ (/** @type {unknown} */ (config.ignore.flags)),
+    warningsToIgnore: /** @type {string[]} */ (/** @type {unknown} */ (config.ignore.warnings)),
     theme: config.theme
   });
   await secureDataSet.init();
 
   if (secureDataSet.data === null) {
-    window.navigation.hideMenu("network--view");
-    window.navigation.hideMenu("home--view");
-    window.navigation.hideMenu("tree--view");
-    window.navigation.hideMenu("warnings--view");
-    window.navigation.setNavByName("search--view");
+    utils.getNavigation().hideMenu("network--view");
+    utils.getNavigation().hideMenu("home--view");
+    utils.getNavigation().hideMenu("tree--view");
+    utils.getNavigation().hideMenu("warnings--view");
+    utils.getNavigation().setNavByName("search--view");
 
     return false;
   }
@@ -446,69 +530,84 @@ async function loadDataSet() {
   return true;
 }
 
+/**
+ * @param {any} params
+ */
 async function updateShowInfoMenu(params) {
+  const networkNav = /** @type {NetworkNavigation} */ (window.networkNav);
+  const ds = /** @type {NodeSecureDataSet} */ (secureDataSet);
+  const dsData = /** @type {NonNullable<NodeSecureDataSet["data"]>} */ (ds.data);
+  const network = /** @type {NodeSecureNetwork} */ (nsn);
+
   if (params.nodes.length === 0) {
-    window.networkNav.currentNodeParams = null;
+    networkNav.currentNodeParams = null;
 
     return PackageInfo.close();
   }
 
-  if (window.networkNav.currentNodeParams?.nodes[0] === params.nodes[0] && packageInfoOpened === true) {
+  if (networkNav.currentNodeParams?.nodes[0] === params.nodes[0] && packageInfoOpened === true) {
     return void 0;
   }
 
   packageInfoOpened = true;
-  window.networkNav.currentNodeParams = params;
-  const currentNode = window.networkNav.currentNodeParams.nodes[0];
-  const selectedNode = secureDataSet.linker.get(
+  networkNav.currentNodeParams = params;
+  const currentNode = /** @type {import("./core/network-navigation.js").LevelParams} */ (networkNav.currentNodeParams).nodes[0];
+  const selectedNode = /** @type {import("@nodesecure/vis-network").LinkerEntry} */ (ds.linker.get(
     Number(currentNode)
-  );
-  const selectedNodeLevel = nsn.getNodeLevel(selectedNode);
+  ));
+  const selectedNodeLevel = network.getNodeLevel(selectedNode);
 
-  window.networkNav.setLevel(selectedNodeLevel);
-  if (window.networkNav.dependenciesMapByLevel.get(selectedNodeLevel) === undefined) {
-    window.networkNav.dependenciesMapByLevel.set(selectedNodeLevel, params);
+  networkNav.setLevel(selectedNodeLevel);
+  if (networkNav.dependenciesMapByLevel.get(selectedNodeLevel) === undefined) {
+    networkNav.dependenciesMapByLevel.set(selectedNodeLevel, params);
   }
 
-  new PackageInfo(selectedNode, currentNode, secureDataSet.data.dependencies[selectedNode.name], nsn);
+  new PackageInfo(selectedNode, currentNode, dsData.dependencies[selectedNode.name], network);
 
   return void 0;
 }
 
+/**
+ * @param {import("./types.js").AppConfig | null} defaultConfig
+ */
 function onSettingsSaved(defaultConfig = null) {
+  /**
+   * @param {import("./types.js").AppConfig} config
+   */
   async function updateSettings(config) {
     console.log("[INFO] Settings saved:", config);
     const warningsToIgnore = new Set(config.ignore.warnings);
     const flagsToIgnore = new Set(config.ignore.flags);
     const theme = config.theme;
-    secureDataSet.warningsToIgnore = warningsToIgnore;
-    secureDataSet.flagsToIgnore = flagsToIgnore;
-    secureDataSet.theme = theme;
-    window.settings.config.ignore.warnings = warningsToIgnore;
-    window.settings.config.ignore.flags = flagsToIgnore;
-    window.settings.config.theme = theme;
-    window.settings.config.disableExternalRequests = config.disableExternalRequests;
+    const ds = /** @type {NodeSecureDataSet} */ (secureDataSet);
+    ds.warningsToIgnore = warningsToIgnore;
+    ds.flagsToIgnore = flagsToIgnore;
+    ds.theme = theme;
+    const settingsConfig = utils.getSettingsConfig();
+    settingsConfig.ignore.warnings = warningsToIgnore;
+    settingsConfig.ignore.flags = flagsToIgnore;
+    settingsConfig.theme = theme;
+    settingsConfig.disableExternalRequests = config.disableExternalRequests;
 
     document.body.classList.toggle("dark", theme === "dark");
 
-    await secureDataSet.init(
-      secureDataSet.data,
-      secureDataSet.FLAGS,
-      secureDataSet.theme
-    );
+    await ds.init(ds.data, ds.FLAGS);
 
     if (!nsn) {
       return;
     }
 
-    const { nodes } = secureDataSet.build();
+    const { nodes } = ds.build();
     nsn.nodes.update(nodes.get());
-    const rootNode = secureDataSet.linker.get(0);
+    const rootNode = /** @type {import("@nodesecure/vis-network").LinkerEntry} */ (ds.linker.get(0));
     window.activePackage = rootNode.name + "@" + rootNode.version;
 
-    if (window.networkNav.currentNodeParams !== null) {
-      window.navigation.setNavByName("network--view");
-      nsn.neighbourHighlight(window.networkNav.currentNodeParams, window.i18n[utils.currentLang()]);
+    if (window.networkNav && window.networkNav.currentNodeParams !== null) {
+      utils.getNavigation().setNavByName("network--view");
+      nsn.neighbourHighlight(
+        /** @type {any} */ (window.networkNav.currentNodeParams),
+        /** @type {any} */ (window.i18n[utils.currentLang()])
+      );
       updateShowInfoMenu(window.networkNav.currentNodeParams);
     }
 
@@ -520,21 +619,21 @@ function onSettingsSaved(defaultConfig = null) {
     }
 
     if (config.disableExternalRequests === false) {
-      homeView.generateDownloads();
+      homeView?.generateDownloads();
     }
 
-    warningsView.requestUpdate();
-    treeView.requestUpdate();
+    warningsView?.requestUpdate();
+    treeView?.requestUpdate();
   }
 
   if (defaultConfig) {
     updateSettings(defaultConfig);
   }
 
-  const networkView = document.getElementById("network--view");
+  const networkView = /** @type {HTMLElement} */ (document.getElementById("network--view"));
 
-  window.addEventListener(EVENTS.SETTINGS_SAVED, async(event) => {
-    updateSettings(event.detail);
+  window.addEventListener(EVENTS.SETTINGS_SAVED, async(/** @type {Event} */ event) => {
+    updateSettings(/** @type {CustomEvent<import("./types.js").AppConfig>} */ (event).detail);
   });
 
   window.addEventListener(EVENTS.LOCKED, () => {
diff --git a/workspaces/cli/public/types.d.ts b/workspaces/cli/public/types.d.ts
new file mode 100644
index 00000000..dfca92db
--- /dev/null
+++ b/workspaces/cli/public/types.d.ts
@@ -0,0 +1,28 @@
+// Shared structural types reused across multiple components.
+// Component-local, single-use shapes should stay as local `@typedef` blocks
+// in their own file instead of being added here.
+
+/**
+ * Application settings, hydrated from the `/config` endpoint and mutated in place
+ * whenever the user updates a preference (see `SettingsView#setNewConfig`).
+ */
+export interface AppConfig {
+  ignore: {
+    warnings: Set<string>;
+    flags: Set<string>;
+  };
+  theme: string;
+  defaultPackageMenu: string;
+  showFriendlyDependencies: boolean;
+  disableExternalRequests: boolean;
+}
+
+/**
+ * A cached package specification, as returned by the WebSocket `INIT` / `RELOAD` events.
+ */
+export interface CachedSpec {
+  spec: string;
+  scanType?: string;
+}
+
+export {};
diff --git a/workspaces/cli/public/websocket.js b/workspaces/cli/public/websocket.js
index f7591be7..ec4b0eb3 100644
--- a/workspaces/cli/public/websocket.js
+++ b/workspaces/cli/public/websocket.js
@@ -15,7 +15,11 @@ export class WebSocketClient extends EventTarget {
     this.client.addEventListener("message", this.#messageHandler.bind(this));
 
     /**
-     * @type {{ search: (spec: Spec) => void, remove: (spec: Spec) => void }}
+     * @type {{
+     * search: (spec: Spec) => void,
+     * remove: (spec: Spec) => void,
+     * clear: () => void
+     * }}
      */
     this.commands = {
       search: (spec) => this.send({ commandName: "SEARCH", spec }),