Inference Queue Monitor

The Inference Queue Monitor renders one card per registered inference queue showing all five queue metrics — pending, active, completed, failed, and average latency. Non-zero active counts get a live accent (plus a pulsing "active" badge on the queue header), non-zero pending counts are highlighted, and non-zero failed counts render destructive. With no queues registered it shows an empty state pointing at registerQueue(). Stats are passed in as props — works with any backend (recommended producer: useDevToolsQueueStats from @localmode/devtools/react, whose snapshot spreads straight into queues).

Preview

Installation

pnpm dlx shadcn@latest add @localmode/ui/devtools/inference-queue-monitor

npx shadcn@latest add @localmode/ui/devtools/inference-queue-monitor

yarn dlx shadcn@latest add @localmode/ui/devtools/inference-queue-monitor

bunx --bun shadcn@latest add @localmode/ui/devtools/inference-queue-monitor

Data source & dependencies

Data source: renders the per-queue stats record you pass — works with any backend. Recommended producer: useDevToolsQueueStats from @localmode/devtools/react (on-device, optional) — its Record<string, QueueStats> snapshot matches queues field-for-field, no mapping layer needed.

• lucide-react — icons
• clsx + tailwind-merge — via the shared cn() util (installed automatically as a registry dependency)

Files installed

• inference-queue-monitor.tsx — the InferenceQueueMonitor component
• lib/utils.ts — the cn() helper (if not already present)

Props

Examples

Wired to the LocalMode devtools bridge

Enable devtools once, register each queue you create, then feed the hook's snapshot straight into the monitor:

import { createInferenceQueue } from '@localmode/core';
import { enableDevTools, registerQueue } from '@localmode/devtools';
import { useDevToolsQueueStats } from '@localmode/devtools/react';

import { InferenceQueueMonitor } from '@/components/inference-queue-monitor';

// Once, at app init
enableDevTools();

// Wherever queues are created
const queue = createInferenceQueue({ concurrency: 1 });
registerQueue('embeddings', queue);

// The monitoring surface
function QueuePanel() {
  const queues = useDevToolsQueueStats();
  return <InferenceQueueMonitor queues={queues} />;
}

Any backend

queues is just a record of per-queue counters — feed it from your own scheduler, a server metrics endpoint, or a test fixture:

<InferenceQueueMonitor
  queues={{
    transcode: { pending: 3, active: 1, completed: 87, failed: 0, avgLatencyMs: 640 },
  }}
/>

Customization

Active counts accent emerald (with a pulsing header badge while active > 0), pending counts accent amber, and failed counts use the theme's destructive token. Average latency renders as milliseconds below one second and seconds above. Styled entirely with shadcn/ui CSS-variable utilities so it inherits your theme — because you own the copied file, every class, accent color, and threshold is yours to change.