'use client'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { Button, Notice, Segmented, Select } from '@/components/ui/controls'
import {
Badge,
EmptyState,
Meter,
Panel,
PanelBody,
PanelHeader,
StatCard,
} from '@/components/ui/display'
import { useI18n } from '@/components/providers/i18n-provider'
import { api } from '@/lib/api/client'
import { cn } from '@/lib/cn'
/**
* The sensor inspector and provenance graph (5.0 §4–§5).
*
* Two questions, one screen. *What is this instrument doing?* — its readings, its age, its
* health and every finding against it. And *what is behind this decision?* — the chain from
* instrument to recommendation, with its confidence capped by the weakest link.
*
* Three rules this surface never bends:
*
* **A finding about the data is never a finding about the plant** (§6). Every anomaly is
* labelled DATA ANOMALY, in those words. A frozen reading means the platform stopped
* learning about the asset, not that the asset stopped changing, and this screen says so
* beside every finding rather than in a footnote.
*
* **Estimated is never shown as measured** (§21). The origin badge comes from the payload;
* this component has no rule that would let it upgrade one to the other.
*
* **The live refusal is the server's** (§7). The mode selector below can be set to LIVE and
* the fault buttons stay enabled — because the refusal that matters is the one the server
* performs, and showing it is more honest than hiding the button and implying a client-side
* guard is the protection.
*/
// ─────────────────────────────────────────────────────────────────────────────
// The payload
// ─────────────────────────────────────────────────────────────────────────────
interface SensorView {
code: string
assetCode: string
assetName: string
assetNameAr: string
kind: string
unit: string
accuracy: number
status: string
firmware: string
samplingIntervalMin: number
lastCalibratedAt: number | null
lastSeenAt: number | null
connectorCode: string | null
connectorLabel: string | null
protocol: string | null
trustScore: number | null
trustBand: string | null
}
interface Anomaly {
kind: string
classification: string
severity: 'info' | 'warning' | 'critical'
confidencePenalty: number
message: string
messageAr: string
}
interface SensorDetail extends SensorView {
latestValue: number | null
latestTs: number | null
dataAgeMin: number
origin: 'measured' | 'synthetic'
quality: string
health: {
healthScore: number
status: string
anomalies: Anomaly[]
dataAgeMin: number
completenessPct: number
meanValue: number | null
stdDev: number | null
}
readings: Array<{ ts: number; value: number }>
faultKind: string | null
faultLabel: string | null
}
interface ProvenanceNode {
stage: string
id: string
label: string
labelAr: string
confidence: number
kind: string
detail: string
detailAr: string
}
interface Provenance {
assetCode: string
subject: string
chain: {
subject: string
nodes: ProvenanceNode[]
sensors: string[]
overallConfidence: number
weakestStage: string | null
weakestConfidence: number
}
sensorHealth: Array<{ sensorCode: string; kind: string; healthScore: number; status: string }>
}
const FAULT_KINDS = [
'offline',
'frozen',
'spike',
'drift',
'noise',
'delay',
'loss',
'wrong_unit',
'bad_timestamp',
'partial_data',
] as const
type Mode = 'demo' | 'simulation' | 'live'
const WINDOWS = [15, 30, 60, 120] as const
function severityTone(severity: string): string {
return severity === 'critical' ? 'text-critical' : severity === 'warning' ? 'text-warning' : 'text-muted'
}
function confidenceTone(value: number): string {
return value >= 80 ? 'text-normal' : value >= 55 ? 'text-watch' : 'text-warning'
}
/**
* The reading window, drawn.
*
* A plain polyline rather than a chart library: the shape of a frozen, drifting or spiking
* stream is the whole point, and it reads at this size without axes.
*/
function ReadingTrace({ readings, unit }: { readings: Array<{ ts: number; value: number }>; unit: string }) {
const path = useMemo(() => {
if (readings.length < 2) return null
const values = readings.map((reading) => reading.value)
const min = Math.min(...values)
const max = Math.max(...values)
// A flat stream has no range to scale against; give it the middle of the box rather
// than dividing by zero, so a frozen sensor draws as the flat line it is.
const span = max - min || 1
return readings
.map((reading, index) => {
const x = (index / (readings.length - 1)) * 100
const y = 100 - ((reading.value - min) / span) * 100
return `${index === 0 ? 'M' : 'L'}${x.toFixed(2)},${y.toFixed(2)}`
})
.join(' ')
}, [readings])
if (!path) return null
const values = readings.map((reading) => reading.value)
return (
{provenance.chain.nodes.map((node, index) => {
// The weakest link is a node, not a stage: five sensors feed this chain
// and marking all of them because one is the weak one would point at the
// wrong instrument. Ties are genuine and both are marked.
const isWeakest =
node.stage === provenance.chain.weakestStage &&
Math.abs(node.confidence - provenance.chain.weakestConfidence) < 0.01
return (