MSP Console v2 is a self-contained single-file HTML dashboard purpose-built for MSP engineers managing a specific client environment. The demo client is "Meridian Financial Group" but every reference is hardcoded and replaceable. All logic runs client-side with no build process required.

The console operates in two modes: Demo Mode (default, all data is static/simulated) and Live Mode (real data via a backend proxy and WebSocket connection). Switching between them requires no code changes beyond toggling Live Mode in Settings and providing a backend URL.

The file loads three CDN scripts and two Google fonts. All other logic is vanilla JavaScript inside a single <script> block. There is no module system, no transpilation, and no state management library.

Content Security Policy

A <meta http-equiv="Content-Security-Policy"> tag is embedded in the head. Key directives:

Page Structure

The layout is a CSS grid with a 196px fixed sidebar and a fluid content area (main { grid-template-columns: 196px 1fr }). The content area uses overflow-y: auto on a #contentBody div. Navigation switches sections by calling loadSection(name) which writes HTML into #contentBody via the sectionMap registry.

All runtime data lives in a single const state object. This is the source of truth for every render function. The WebSocket handlers, CSV import pipeline, and score calculator all mutate this object and then trigger re-renders.

const state = {
  score:         88,    // 0–100 safety score (recomputed by score heuristic)
  grade:         'A',   // 'A+' | 'A' | 'B' | 'C' | 'D'
  mfaPct:        88,    // % of users with MFA enabled (0–100)
  nonCompliant:  2,     // count of Intune noncompliant devices
  activeUsers:   142,   // total Entra ID licensed users
  stalePasswords:12,    // accounts with passwords 90+ days old
  lockedOut:     0,     // accounts currently locked out (real-time)
  riskySignIns:  0,     // risky sign-ins in current window

  criticalItems: [       // "Must Fix This Week" list
    {
      main:        'MFA disabled on 6 finance/ops accounts',
      sub:         'T. Williams, A. Patel, M. Chen + 3 others',
      action:      'https://entra.microsoft.com/...',
      actionLabel: 'Open Entra MFA →',
      importSource:'lockouts' // optional — set by CSV import for deduplication
    }
  ],

  warningItems: [        // "Fix This Month" list — same shape as criticalItems
  ],

  activityLog:  [],     // array of { msg, level, time } — max 60 entries, newest first
  lastSync:     new Date(),
  lastSyncMs:   Date.now(),
}

The trendData object holds 12-month historical arrays for the safety score and MFA trend charts. These are separate from state because they are chart-only data that the live event handlers never need to mutate.

The Dashboard is the default landing section, rendered by renderDashboard(). It contains five visual zones that give the shift engineer a complete situational picture without needing to open any other section.

Score Ring Color Logic

The sidebar has 9 nav items. All sections except Dashboard, Credentials, Import, and Audit Log are rendered by simple functions that return an HTML string. loadSection(name) writes the string to #contentBody and handles the active state on the nav item.

Sign-Ins Section

The Sign-Ins section is unique: it filters state.activityLog for entries that include the strings 'Sign-in' or 'Risky'. This means it is not a separate data store — it is a filtered view of the live feed. In production with real WebSocket data, this section will populate automatically as events arrive.

Infrastructure Section

The Infrastructure section renders four monitoring cards: Active Directory, Server Health, SQL Server, and File Server. In demo mode it uses a hardcoded infraDemo object. In Live Mode it polls GET /infra on the configured backend URL. Each card shows metrics with color-coded thresholds using the valC(value, suffix, goodFn, warnFn) helper. Metrics with no good/warn function default to muted display.

The safety score is a proprietary MSP heuristic, not Microsoft Secure Score or NIST 800-53. It is computed fresh every time the CSV import applies data. The formula deducts points from 100 based on five signals from the state object.

const mfaDeduct    = Math.max(0,  Math.round((100 - state.mfaPct) * 0.5));
const devDeduct    = Math.min(20, state.nonCompliant * 7);
const lockedDeduct = Math.min(10, state.lockedOut * 3);
const staleDeduct  = Math.min(8,  Math.round(state.stalePasswords * 0.3));
const riskDeduct   = Math.min(10, state.riskySignIns * 2);
const rawScore     = 100 - mfaDeduct - devDeduct - lockedDeduct - staleDeduct - riskDeduct;
const newScore     = Math.max(0, Math.min(100, rawScore));

The RT object manages the WebSocket connection. In demo mode, RT.connect() calls itself without a URL argument and simulates events via setTimeout. In production, call RT.connect('wss://your-backend.azurewebsites.net').

/*
 * TO GO LIVE:
 *   1. Uncomment: <script src="https://cdn.socket.io/4.7.5/socket.io.min.js">
 *   2. Change: RT.connect('wss://your-backend.azurewebsites.net');
 */
RT.connect(); // currently runs in demo mode

Event Handlers

The const handlers object maps WebSocket event names to handler functions. Each handler mutates the relevant state field, updates the relevant DOM element, and fires a toast notification.

Sync Status Indicator

The header shows a sync dot and timestamp driven by updateSyncStatus(), called every 10 seconds via setInterval. The dot transitions through three states based on time since last markSynced() call:

The AI panel is a fixed bottom-right chat widget labeled "Grok Assistant." It calls the Anthropic API (api.anthropic.com/v1/messages) directly from the browser. The CSP connect-src allows only this domain. The model used is configurable in askAI().

Quick Chips

Four quick-access chips send preset queries without typing: mfa gaps, top risks, fix plan, and score. Each chip value is passed to askAI(query) which assembles a context-rich system prompt from the current state object before calling the API.

AI Offline Mode

The header button "AI Offline: OFF" toggles window._aiOffline. When active, askAI() returns immediately without making any API call and shows a local message instead. The state persists to localStorage as xai_msp_ai_offline. Use this during client meetings or any context where external API traffic is inappropriate.

AI Panel Toggle

The "AI Analyst: ON/OFF" header button controls panel visibility. The preference is saved to localStorage under the key AI_PREF_KEY. The panel is hidden on viewports below 680px and accessible instead via the Settings modal.

Context Injection

Every AI query prepends a system prompt built from live state values. This gives the model accurate numbers for the current client session without requiring it to hallucinate or estimate. The system prompt includes: client name, current score and grade, MFA percent, non-compliant device count, locked out count, stale passwords, risky sign-ins, and the text of all critical and warning items.

The Credentials section stores on-premise server credentials used by the backend proxy to connect to AD, SQL, File, and utility servers for the Infrastructure section. The security model is carefully designed to minimize credential exposure risk.

Credential Object Shape

{
  id:       'cr_m8k2q9xa',    // generated by credUid()
  name:     'Primary DC',
  hostname: 'dc01.contoso.local',
  username: 'DOMAIN\\svc_msp',
  password: '••••••••',        // in memory only — never persisted locally
  roles:    ['dc', 'server']
}

// localStorage stores this shape — NO password field:
{
  id:         'cr_m8k2q9xa',
  name:       'Primary DC',
  hostname:   'dc01.contoso.local',
  username:   'DOMAIN\\svc_msp',
  roles:      ['dc', 'server'],
  addedAt:    1711123456789,
  lastStatus: 'ok',   // 'ok' | 'fail' | null
  lastTest:   1711123500000
}

Server Roles

Each credential can be tagged with one or more roles that determine which Infrastructure section panels it feeds data to:

Test Connection

testCredConnection(id) calls GET /credentials/{id}/test on the configured backend. The backend attempts a connection using the stored (encrypted) password and returns { reachable: true|false }. The card border and status badge update accordingly. This requires a backend URL to be set in Settings.

The Import CSVs section provides a drag-and-drop interface for applying monthly maintenance script outputs directly to the dashboard. Files are parsed entirely in the browser — no data is transmitted anywhere. This is the primary mechanism for updating state when Live Mode is not connected.

Workflow

1. 01
   Drop or browse CSV files. Multiple files can be queued at once. The drop zone accepts .csv only. The queue displays each file name with a size label.
2. 02
   Click "Parse and Preview." importParseAndPreview() reads each file using FileReader, splits by newlines, parses headers, and counts rows. Delta chips appear below the drop zone showing what will change.
3. 03
   Click "Apply to Dashboard." importApplyToDashboard() maps each file to the CSV_SCHEMA entries, writes row counts to state fields, recalculates the score, and navigates to the Dashboard.

CSV Schema Map

The CSV_SCHEMA object maps filename patterns to state fields. Filenames are matched case-insensitively. Unknown files are accepted in the queue but produce no state changes.

After a successful apply, file names (not content) are saved to localStorage as lastImportNames. This drives the "Last import:" hint text shown inside the drop zone on subsequent visits.

The "PDF Report" header button generates a 4-page A4 PDF using jsPDF and jsPDF-AutoTable. The report is generated entirely client-side from the current state object and immediately downloaded. The filename is MSP-Security-Report-{ClientName}-{Month}-{Year}.pdf.

Chart White-Background Composite

The dark-themed chart canvas is composited onto a white offscreen canvas before embedding. This is done by creating a new canvas at 2x pixel density, drawing a white fillRect, then drawing the live canvas on top. This produces a sharp, print-appropriate chart without modifying the live Chart.js instance or causing any visual flash in the UI.

Every AI query submitted through the chat panel is logged to IndexedDB (msp_console_audit, version 2). The prompt text is encrypted with AES-GCM using a session-only CryptoKey before the write. The key is non-extractable and lives only in memory — it is generated fresh on each page load via the Web Crypto API.

What Is Logged

TTL and Auto-Expiry

On every page load, _purgeExpiredLogs() runs an IndexedDB cursor sweep on the by_ts index and deletes any entry with a timestamp older than LOG_TTL_DAYS (default 90 days). To change the retention window, edit const LOG_TTL_DAYS = 90 near the top of the audit section in the script.

Export and Clear

The Audit Log section renders Export CSV and Clear Logs buttons. Export decrypts each entry (prompts decrypt successfully only in the same browser session using the same in-memory key) and generates a CSV download. Entries from a previous session will decrypt as [encrypted — key unavailable] because the key is never persisted. Clear Logs deletes all IndexedDB entries and resets the nav badge.

The Settings modal is opened via the ⚙ header button. It controls four areas. Settings are persisted to localStorage under the liveSettings key.

Live Infrastructure Monitoring

Source Toggles

Four toggles control which infrastructure data sources are polled: AD, SQL, File Server, and Server Health. Disabled sources show "Disabled" in the relevant Infrastructure card header and do not trigger API calls for that data type.

AI and Privacy

A toggle controls AI panel visibility (same effect as the header button). Settings also contains the AI Offline Mode toggle as an alternative to the header button.

localStorage Keys Reference

The console was built with several specific security and accessibility decisions that are worth understanding before deployment or modification.

Accessibility Features

Starfield Performance

50 star elements are generated by JavaScript in initStarfield(). Each star uses CSS custom properties (--star-opacity, --star-dx, --star-dy) to randomize appearance without generating 50 separate keyframe rules. The will-change: transform, opacity declaration promotes each star to its own GPU compositor layer, preventing layout thrash during animation.

Go-Live Checklist

1. 01
   Replace the client name. Find and replace all instances of Meridian Financial Group with your client name. Also update the HTML <title> tag.
2. 02
   Self-host the CDN dependencies. Download Chart.js, jsPDF 2.5.1, and jsPDF-AutoTable 3.8.2. Place them alongside the HTML file. Update the three <script src> tags to relative paths.
3. 03
   Update the CSP if changing script hosts. If you host scripts on a different domain, add it to the script-src directive in the CSP meta tag. If you add a backend proxy URL, add it to connect-src.
4. 04
   Move the Anthropic API key to a backend proxy. Replace the direct Anthropic fetch in askAI() with a POST to /ai/ask on your backend. The backend injects the API key. Update connect-src to your backend domain.
5. 05
   Set up the backend for Live Mode. The console expects a backend that responds to: GET /infra, GET /credentials/{id}/test, POST /credentials, DELETE /credentials/{id}. Wire the WebSocket server to push events matching the handler names documented in Section 07.
6. 06
   Uncomment the socket.io script tag. The <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"> tag is commented out in the source. Uncomment it and add cdn.socket.io to the CSP script-src.
7. 07
   Update RT.connect() with your WebSocket URL. Change the boot call at the bottom of the script from RT.connect() to RT.connect('wss://your-backend.azurewebsites.net').
8. 08
   Update the demo data in state. Replace state.criticalItems and state.warningItems with the client's actual current findings. Replace trendData.safety and trendData.mfa with 12-month historical actuals from the client's Microsoft 365 tenant.
9. 09
   Serve from an authenticated URL. This file contains API endpoint references, a backend URL, and potentially an API key. It must not be publicly accessible. Serve from an authenticated internal host, VPN-gated URL, or behind HTTP Basic Auth at minimum.
10. 10
    Test PDF generation on the target machine. Navigate to Dashboard, wait for charts to render, then click PDF Report. Verify the chart image appears on Page 4. Test that the AutoTable metrics render correctly with your actual state values.