The 46px rail is the top-most chrome element. It holds the brand identity on the left, six clickable stat counters in the center, and operational controls on the right. Stats animate from zero on every refresh using animCount().

The 20px ticker sits immediately below the rail. It contains all current events (incidents + alerts + devices) in a CSS-animated continuous scroll. Color coding follows severity: red for crit, orange for high, green for low.

• Hover pauses the scroll — CSS animation-play-state:paused on hover for closer inspection.
• Format per item: HH:MM · EVENT-ID · TITLE
• Ticker content is rebuilt via buildTicker() on every refresh cycle.
• Animation duration is 70 seconds for a full cycle — adjust in .tscroll CSS for faster or slower display contexts.

Two filter rows sit above a scrollable alert stream. The top row filters by event type; the second row filters by severity. Both filters stack — active type and active severity both apply simultaneously.

The alert stream below shows compact event rows (colored severity dot · title · client name · age). Clicking any row calls fgSelectRow(id) which populates the right column inspection panel and highlights the matching row in the center event table.

Lists all FortiOS REST API endpoints used by the console with live latency and status. In demo mode latencies are randomized. In live mode they reflect actual round-trip times from the proxy.

• Green dot = OK. Orange = WARN (>300ms or intermittent). Red = FAIL (no response).
• Clicking an endpoint row populates the right panel with the endpoint path, latency, status, and a Re-test + Log Service Issue action.
• Endpoints verified against FortiOS 7.x REST API documentation are listed in Section 11.

Shows all FortiGuard subscription services with current signature version, days until expiry, and status badge. Data source: mockFortiGuard() in demo mode, /api/v2/monitor/license/status in live mode.

• Services tracked: AntiVirus, IPS, Web Filter, DNS Filter, App Control, AntiSpam, Outbreak Prevention, FortiSandbox Cloud.
• Status colors: OK = within expiry. EXPIRING = approaching expiry (random threshold in demo). EXPIRED = past expiry date.
• Clicking a service row opens an inspection panel with version detail and a Force Update action.
• Expiring services also surface a Renewal Ticket action button.

Shows the HA cluster configuration and per-member stats. Data source: mockHA() in demo mode, /api/v2/monitor/system/ha-statistics in live mode.

• Cluster fields: Mode (Active-Passive), Group name, Group ID, Heartbeat state, Last failover timestamp.
• Per-member rows show: name, serial, role (Primary / Secondary), CPU %, memory %, session count, sync state, uptime.
• Clicking a member row opens the inspection panel with progress bars for CPU and memory and Force Failover / Force HA Sync actions.

Seven interface/service cards scroll horizontally above the center tabs. Each card has a colored 2px top bar (green = OK, orange = degraded/standby, red flashing = critical), an icon, interface name, status label, and info line.

A scrollable table of all current events filtered by the active client, type filter, and severity filter. Column layout:

A 2px left border on each row is colored by severity: red = crit, orange = high, yellow = med, blue = low. Row hover highlights orange-tinted. Selected row (after clicking) highlights with a stronger orange background.

Displays the FortiGate IPv4 routing table. Data source: mockRoutes() / /api/v2/monitor/router/ipv4. Columns: Type (BGP/OSPF/Static/Connected) · Destination · Gateway · Interface · Admin Distance · Status badge.

Clicking any row populates the right panel with route detail and Flush Route / Traceroute actions.

Lists all firewall policies. Data source: mockPolicies() / /api/v2/cmdb/firewall/policy. Columns: ID · Name · Src→Dst · Service · Action (ACCEPT / DENY badge) · Hit Count · Status (enabled / disabled badge).

Clicking any row opens a detail panel with IPS, AV, and web filter profile state and Edit Policy / Disable Policy actions.

Lists IPs in the FortiGate banned (quarantine) list. Data source: mockQuarantine() / /api/v2/monitor/user/banned. Columns: IP Address · Reason · Source engine · Added time · Expires · Release button.

Clicking a row opens a detail panel with Release from Quarantine / Extend Ban / Create Ticket actions.

Displays WAN1 and WAN2 bandwidth charts (stacked bar, 20 samples), Top Applications by percentage, and Top Source IPs by bytes and session count. Data source: mockTraffic() / /api/v2/monitor/firewall/session + /api/v2/monitor/system/interface.

Clicking a source IP fires a toast: "🔍 Investigating X.X.X.X". In live mode this should trigger a lookup action.

Active VPN user sessions. Data source: mockUsers() / /api/v2/monitor/vpn/ssl. Columns: Username · Auth Type · IP Address · Duration · Rx/Tx bytes · Status badge.

Clicking any row surfaces Disconnect User and Block IP actions.

When a row is clicked via fgSelectRow(id), the panel renders:

• Detail grid: Severity, Status, Age, Assigned — 2×2 card grid with large colored values.
• Description: Full detail text from the event's detail field — FortiOS log context, IPS rule matched, affected hosts, action taken.
• Identifiers list: Event ID, Device, Source, Client, Type, Policy, Src IP, Dst IP, Action, Model, Firmware, CPU%, Mem%, Sessions — only fields that exist for the selected object are rendered.
• Quick Actions: Context-sensitive buttons based on event type. See action table below.

All action buttons call fgAct(type) which triggers the action modal with a multi-step execution sequence. In demo mode steps animate but no real API calls are made. In live mode each step maps to an actual API call via the proxy.

The FG_CLIENTS array defines all managed tenants. One entry per client. Each entry drives the client selector chip UI and (in live mode) provides the credentials for routing API calls to that specific FortiGate instance.

var FG_CLIENTS = [
  {
    id:       'acme',              // unique slug — used for chip DOM ID
    name:     'Acme Corp',         // display name — must match a.client in data
    color:    '#4dabff',           // chip accent color when selected
    baseUrl:  'https://fg.acme.corp', // FortiGate FQDN for this client (live mode)
    apiToken: ''                  // API token for this client's FortiGate
  },
  // ... one entry per client
];

Runtime state is stored in var FG = { ... } at the top of the script. Do not edit this — it is initialized programmatically. Key properties for reference:

• Events tab: Fully filtered — only events where a.client === FG.activeClient are rendered.
• Alert stream (left panel): Fully filtered — mini event rows respect the active client.
• Rail stat counters: Filtered — crit and high counts reflect the selected client's events only.
• KPI tiles: In demo mode, summary data is not per-client (single mock summary object). In live mode, fgFetch('summary') routes to the selected client's FortiGate, so KPI tiles will be client-specific.
• Routing, Policies, Quarantine, Traffic, Users tabs: In live mode these are inherently per-client (the proxy routes to the selected FortiGate). In demo mode they show shared mock data regardless of client selection.