# Inference Queue Monitor

Inference Queue Monitor [#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 [#preview]

```tsx
'use client';

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

/**
 * Demo for InferenceQueueMonitor. Renders three fixture queues — an embedding
 * queue mid-burst (pending + active accents), an interactive chat queue with
 * one live task, and a background indexing queue carrying failures
 * (destructive accent). Wire `queues` to `useDevToolsQueueStats()` from
 * `@localmode/devtools/react` in your app.
 */
export default function InferenceQueueMonitorDemo() {
  return (
    <InferenceQueueMonitor
      queues={{
        embeddings: {
          pending: 12,
          active: 2,
          completed: 148,
          failed: 0,
          avgLatencyMs: 42,
        },
        'chat-interactive': {
          pending: 0,
          active: 1,
          completed: 23,
          failed: 0,
          avgLatencyMs: 1840,
        },
        'background-index': {
          pending: 4,
          active: 0,
          completed: 512,
          failed: 3,
          avgLatencyMs: 310,
        },
      }}
    />
  );
}
```

Installation [#installation]

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

Data source & dependencies [#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 [#files-installed]

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

Props [#props]

**InferenceQueueMonitor**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `queues` | `Record<string, object>` | — | **Required.** Stats per registered queue, keyed by queue name. |

**QueueStatsLike**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `pending` | `number` | — | **Required.** Number of tasks waiting to execute. |
| `active` | `number` | — | **Required.** Number of tasks currently executing. |
| `completed` | `number` | — | **Required.** Total tasks completed successfully. |
| `failed` | `number` | — | **Required.** Total tasks that failed. |
| `avgLatencyMs` | `number` | — | **Required.** Average latency in milliseconds for completed tasks. |

Examples [#examples]

Wired to the LocalMode devtools bridge [#wired-to-the-localmode-devtools-bridge]

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

```tsx
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 [#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:

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

Customization [#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.