VANTAGE
Documentation

Argus UI Widget SDK (@xtnd-dynamics/xtnd-argus-sdk)

Repository: XTND-DYNAMICS/xtnd-argus-sdk
NPM Package: @xtnd-dynamics/xtnd-argus-sdk

1. Overview

@xtnd-dynamics/xtnd-argus-sdk allows internal admin consoles, developer tools, and client portals (e.g. X360 Task Command and XTND Transfer Admin) to embed live Vantage telemetry widgets directly into their UI without importing heavy charting dependencies.

All widgets output clean, self-contained HTML strings with encapsulated inline styles matching the XTND cyberpunk dark design palette.

2. Available Components

2.1 Quota Progress Card (renderQuotaWidget)

Renders an AI provider budget status card with dynamic color thresholds and progress bar:

import { renderQuotaWidget } from '@xtnd-dynamics/xtnd-argus-sdk';

const html = renderQuotaWidget({
  provider: 'Anthropic Claude',
  monthlyLimitUsd: 1000.00,
  currentSpendUsd: 412.50,
  remainingCreditsUsd: 587.50,
  remainingPercent: 58.75,
  renewsInDays: 14,
});

document.getElementById('quota-container')!.innerHTML = html;

Visual Features:

  • Neon Progress Bar: #00f0ff bar proportional to remaining budget percentage.
  • Dynamic Warning Badge: Automatically shifts from green (#10b981) to amber (#f59e0b) when remaining budget falls below 20%.
  • Spend & Renewal Metadata: Displays dollar spend and countdown days.

2.2 Live Status Badge (renderStatusWidget)

Renders an operational status pill badge with latency readout:

import { renderStatusWidget } from '@xtnd-dynamics/xtnd-argus-sdk';

const html = renderStatusWidget({
  serviceName: 'Sonar AI Gateway',
  status: 'OPERATIONAL',
  latencyMs: 24,
});

document.getElementById('header-status')!.innerHTML = html;

Visual Features:

  • Monospace font (JetBrains Mono / monospace fallback).
  • Emerald glowing dot for OPERATIONAL, Rose glowing dot for DEGRADED or OUTAGE.
  • Round-trip latency display.

3. Framework Integration

In React:

import { renderQuotaWidget } from '@xtnd-dynamics/xtnd-argus-sdk';

export function AIQuotaCard({ quotaData }) {
  return (
    <div
      dangerouslySetInnerHTML={{ __html: renderQuotaWidget(quotaData) }}
    />
  );
}

In Angular:

<div [innerHTML]="renderStatusWidget({ serviceName: 'Edge Exchange', status: 'OPERATIONAL' })"></div>