DevTools
Local-AI observability surfaces — queue, event, pipeline, and model-cache monitors that render @localmode/devtools hook snapshots (or any backend's data) with zero @localmode dependencies.
The DevTools family turns on-device AI observability into copy-owned UI. Each
primitive renders plain props — the recommended producers are the nine hooks on
@localmode/devtools/react, but any backend that shapes the same data works
("local-first by design, cloud-compatible by contract").
Components
| Component | Renders | Recommended hook |
|---|---|---|
| Inference Queue Monitor | Per-queue pending / active / completed / failed / avg-latency | useDevToolsQueueStats |
| Event Log Viewer | Newest-first namespaced event stream with filter + cap | useDevToolsEvents |
| Pipeline Run Inspector | Per-run status, progress, current step, durations | useDevToolsPipelineRuns |
| Model Cache Table | Cached models: status, load time, last used, size, evict | useDevToolsModelCache |
Widget-parity map
This family (plus two reused local-first items) supersedes the deprecated
DevToolsWidget's six panels:
| Widget panel | Successor |
|---|---|
| Queue | ui/devtools/inference-queue-monitor |
| Events | ui/devtools/event-log-viewer |
| Pipeline | ui/devtools/pipeline-run-inspector |
| Models | ui/devtools/model-cache-table |
| Device | ui/local-first/device-capability-grid (reused — device data is not devtools-specific) |
| VectorDB | ui/local-first/vector-storage-observability (reused; per-collection op counts come from useDevToolsVectorDBs) |
Wiring
Collectors are off until you opt in — enable them once, then render hook snapshots straight into the primitives:
import { enableDevTools } from '@localmode/devtools';
import { useDevToolsQueueStats } from '@localmode/devtools/react';
import { InferenceQueueMonitor } from '@/components/inference-queue-monitor';
enableDevTools(); // e.g. behind your own debug toggle
export function QueuePanel() {
const queues = useDevToolsQueueStats();
return <InferenceQueueMonitor queues={queues} />;
}The composed drawer
A ready-made six-tab drawer (Queue / Events / Pipeline / Models / Device / VectorDB) that wires all of the above ships as an installable block:
npx shadcn@latest add @localmode/ui/blocks/devtools-drawerBlocks are the wiring layer, so the drawer legitimately depends on
@localmode/devtools — the four primitives above stay zero-@localmode/*.
Lock Status Badge
A compact session-lock indicator — locked, unlocked, or no-vault — with distinct iconography and an accessible text label.
Inference Queue Monitor
Per-queue inference observability: pending, active, completed, failed, and average latency per registered queue, with live active and destructive failed accents.