@tensorfeed/status-widget 0.1.0

package/README.md

@@ -0,0 +1,72 @@
+# @tensorfeed/status-widget
+
+Drop the live [TensorFeed](https://tensorfeed.ai) AI status monitor onto
+any site with one line. Real-time operational status and p95 latency for
+every major AI provider and service, in a self-contained sci-fi console.
+Free, no API key, no tracking, zero dependencies.
+
+Live preview and docs: https://tensorfeed.ai/embed
+
+## Install
+
+```sh
+npm install @tensorfeed/status-widget
+```
+
+## Use it (any framework, or none)
+
+```js
+import '@tensorfeed/status-widget';
+```
+
+```html
+<tensorfeed-status accent="blue" poll="30" height="600"></tensorfeed-status>
+```
+
+The custom element renders the widget in a shadow root, so host-page CSS
+cannot affect it and it cannot affect your page.
+
+### React
+
+No custom element needed. Use the URL helper:
+
+```jsx
+import { tensorfeedStatusSrc } from '@tensorfeed/status-widget';
+
+<iframe
+  src={tensorfeedStatusSrc({ accent: 'blue' })}
+  title="TensorFeed live AI status"
+  loading="lazy"
+  style={{ width: '100%', maxWidth: 720, height: 600, border: 0 }}
+/>
+```
+
+### Plain HTML, no build
+
+```html
+<script type="module">
+  import 'https://esm.sh/@tensorfeed/status-widget';
+</script>
+<tensorfeed-status></tensorfeed-status>
+```
+
+## Attributes
+
+| Attribute | Values | Default | Notes |
+|---|---|---|---|
+| `accent` | `blue` \| `auto` \| `green` | `blue` | `blue` is a light-blue spine with green status indicators. `auto` greens the whole accent when all systems are nominal. `green` forces green. |
+| `poll` | `5` to `600` | `30` | Client poll interval in seconds. Raise it on low-traffic pages. |
+| `height` | px number or any CSS length | `600` | Widget caps at 720px wide and reflows down to ~320px. |
+| `label` | string | `TensorFeed live AI status` | Accessible iframe title. |
+
+## What it shows
+
+Operational status and probed p95 latency where TensorFeed measures it,
+real 7-day uptime % otherwise. Vendor status is authoritative; a
+provider with no status source is shown as "no data", never a false
+alarm. "Detail" deep-links to the per-provider page on tensorfeed.ai.
+
+## License
+
+MIT. The widget data comes from the public TensorFeed endpoints
+`/api/status/summary` and `/api/status/leaderboard`.

package/index.d.ts

@@ -0,0 +1,18 @@
+export interface TensorfeedStatusOptions {
+  /** Accent scheme. Default "blue" (light-blue spine, green status).
+   *  "auto" greens the whole accent when all systems are nominal.
+   *  "green" forces green. */
+  accent?: 'blue' | 'auto' | 'green';
+  /** Client poll interval in seconds (5 to 600). Default 30. */
+  poll?: number;
+}
+
+/** Build the widget iframe URL with clean, default-aware query params. */
+export function tensorfeedStatusSrc(opts?: TensorfeedStatusOptions): string;
+
+/** Register the <tensorfeed-status> custom element. Idempotent; a no-op
+ *  in non-DOM (SSR) environments. Called automatically on import. */
+export function defineTensorFeedStatus(tag?: string): void;
+
+/** The custom element class, exported for advanced registration. */
+export class TensorFeedStatus extends HTMLElement {}

package/index.js

@@ -0,0 +1,96 @@
+/**
+ * @tensorfeed/status-widget
+ *
+ * The live TensorFeed AI status monitor, as a zero-dependency, framework
+ * agnostic custom element plus a tiny helper. The widget itself is a
+ * fully self-contained page at tensorfeed.ai/widget/status; this package
+ * just makes embedding it a one-liner and keeps the query params honest.
+ *
+ * HTML / any framework:
+ *   import '@tensorfeed/status-widget';
+ *   <tensorfeed-status accent="blue" poll="30" height="600"></tensorfeed-status>
+ *
+ * React (no custom element needed):
+ *   import { tensorfeedStatusSrc } from '@tensorfeed/status-widget';
+ *   <iframe src={tensorfeedStatusSrc({ accent: 'blue' })}
+ *           title="TensorFeed live AI status"
+ *           style={{ width: '100%', height: 600, border: 0, maxWidth: 720 }} />
+ */
+
+const BASE = 'https://tensorfeed.ai/widget/status';
+
+/**
+ * Build the widget iframe URL. Mirrors the widget's own defaults so the
+ * URL stays clean: accent defaults to blue, poll to 30s; only
+ * non-defaults are added as query params.
+ */
+export function tensorfeedStatusSrc(opts = {}) {
+  const params = new URLSearchParams();
+  const accent = String(opts.accent || 'blue').toLowerCase();
+  if (accent === 'auto' || accent === 'green') params.set('accent', accent);
+  const poll = Number(opts.poll);
+  if (Number.isFinite(poll) && poll >= 5 && poll <= 600 && poll !== 30) {
+    params.set('poll', String(Math.round(poll)));
+  }
+  params.set('utm_source', 'npm');
+  params.set('utm_medium', 'component');
+  return `${BASE}?${params.toString()}`;
+}
+
+function resolveHeight(h) {
+  if (h == null || h === '') return '600px';
+  return /^\d+$/.test(String(h)) ? `${h}px` : String(h);
+}
+
+// Guarded base so `import`-ing this package never throws in Node / SSR
+// (Next.js, etc.) where HTMLElement does not exist. The element only
+// actually does anything once defineTensorFeedStatus runs in a browser.
+const ElementBase = typeof HTMLElement !== 'undefined' ? HTMLElement : class {};
+
+class TensorFeedStatus extends ElementBase {
+  static get observedAttributes() {
+    return ['accent', 'poll', 'height', 'label'];
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot) this.attachShadow({ mode: 'open' });
+    this._render();
+  }
+
+  attributeChangedCallback() {
+    if (this.shadowRoot) this._render();
+  }
+
+  _render() {
+    const src = tensorfeedStatusSrc({
+      accent: this.getAttribute('accent'),
+      poll: this.getAttribute('poll'),
+    });
+    const height = resolveHeight(this.getAttribute('height'));
+    const label = this.getAttribute('label') || 'TensorFeed live AI status';
+    // Shadow DOM keeps host page CSS from touching the iframe and vice
+    // versa. The widget brings all its own styling.
+    this.shadowRoot.innerHTML =
+      `<style>:host{display:block;width:100%}` +
+      `iframe{display:block;width:100%;max-width:720px;height:${height};border:0;` +
+      `border-radius:6px 28px 28px 6px;overflow:hidden}</style>` +
+      `<iframe src="${src}" title="${label.replace(/"/g, '&quot;')}" ` +
+      `loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>`;
+  }
+}
+
+/**
+ * Register the <tensorfeed-status> custom element. Safe to call more
+ * than once and a no-op in non-DOM environments (SSR).
+ */
+export function defineTensorFeedStatus(tag = 'tensorfeed-status') {
+  if (typeof window === 'undefined' || typeof customElements === 'undefined') return;
+  if (!customElements.get(tag)) customElements.define(tag, TensorFeedStatus);
+}
+
+// Importing the package auto-registers the element (declared as a side
+// effect in package.json). React-only users can ignore this and use
+// tensorfeedStatusSrc directly.
+defineTensorFeedStatus();
+
+export { TensorFeedStatus };

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@tensorfeed/status-widget",
+  "version": "0.1.0",
+  "description": "Drop the live TensorFeed AI status monitor onto any site with one line. Zero dependencies, framework agnostic web component plus a helper for React and plain HTML.",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    }
+  },
+  "files": ["index.js", "index.d.ts", "README.md"],
+  "sideEffects": ["./index.js"],
+  "keywords": [
+    "tensorfeed",
+    "ai",
+    "llm",
+    "status",
+    "monitor",
+    "uptime",
+    "widget",
+    "web-component",
+    "embed",
+    "openai",
+    "anthropic",
+    "claude",
+    "gemini"
+  ],
+  "homepage": "https://tensorfeed.ai/embed",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/RipperMercs/tensorfeed.git",
+    "directory": "packages/status-widget"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}