@echothink-ui/quality 0.1.0

package/dist/index.js

@@ -0,0 +1,329 @@
+// src/components/QCMetricsInspector.tsx
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, StatusDot, Surface } from "@echothink-ui/core";
+import { DataTable } from "@echothink-ui/data";
+import { jsx, jsxs } from "react/jsx-runtime";
+function QCMetricsInspector({ metrics, decision, className }) {
+  const columns = React.useMemo(
+    () => [
+      { key: "label", header: "Metric" },
+      {
+        key: "value",
+        header: "Value",
+        render: (metric) => `${metric.value}${metric.unit ? ` ${metric.unit}` : ""}`
+      },
+      {
+        key: "threshold",
+        header: "Threshold",
+        render: (metric) => thresholdLabel(metric.threshold)
+      },
+      {
+        key: "status",
+        header: "Status",
+        render: (metric) => /* @__PURE__ */ jsx(StatusDot, { status: metricStatus(metric.status), label: metricStatusLabel(metric.status) })
+      }
+    ],
+    []
+  );
+  return /* @__PURE__ */ jsxs(
+    Surface,
+    {
+      className: clsx("eth-quality-qc-metrics-inspector", className),
+      title: "QC metrics",
+      subtitle: decision ? "Automated decision available" : void 0,
+      "data-eth-component": "QCMetricsInspector",
+      children: [
+        decision ? /* @__PURE__ */ jsxs("div", { className: "eth-quality-qc-metrics-inspector__decision", children: [
+          /* @__PURE__ */ jsx(Badge, { severity: decisionSeverity(decision.status), children: decisionLabel(decision.status) }),
+          decision.reasons?.length ? /* @__PURE__ */ jsx("ul", { children: decision.reasons.map((reason) => /* @__PURE__ */ jsx("li", { children: reason }, reason)) }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx(DataTable, { rows: metrics, columns })
+      ]
+    }
+  );
+}
+function thresholdLabel(threshold) {
+  if (!threshold) return "-";
+  if (threshold.min !== void 0 && threshold.max !== void 0) {
+    return `${threshold.min} - ${threshold.max}`;
+  }
+  if (threshold.min !== void 0) return `>= ${threshold.min}`;
+  if (threshold.max !== void 0) return `<= ${threshold.max}`;
+  return "-";
+}
+function metricStatus(status) {
+  if (status === "pass") return "succeeded";
+  if (status === "fail") return "failed";
+  if (status === "warning") return "warning";
+  return "approval-required";
+}
+function metricStatusLabel(status) {
+  if (status === "manual-review") return "Manual review";
+  return status.charAt(0).toUpperCase() + status.slice(1);
+}
+function decisionSeverity(status) {
+  if (status === "pass") return "success";
+  if (status === "fail") return "danger";
+  return "warning";
+}
+function decisionLabel(status) {
+  if (status === "manual-review-required") return "Manual review required";
+  return status.charAt(0).toUpperCase() + status.slice(1);
+}
+
+// src/components/QCProfileEditor.tsx
+import * as React2 from "react";
+import clsx2 from "clsx";
+import { ConfigForm, RuleBuilder } from "@echothink-ui/forms";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var operatorOptions = [
+  { value: "lt", label: "Less than" },
+  { value: "lte", label: "Less than or equal" },
+  { value: "gt", label: "Greater than" },
+  { value: "gte", label: "Greater than or equal" },
+  { value: "eq", label: "Equals" },
+  { value: "between", label: "Between" }
+];
+function QCProfileEditor({ profile, onChange, onSubmit, className }) {
+  const values = React2.useMemo(() => valuesFromProfile(profile), [profile]);
+  const rules = React2.useMemo(() => rulesFromProfile(profile), [profile]);
+  return /* @__PURE__ */ jsxs2("div", { className: clsx2("eth-quality-qc-profile-editor", className), "data-eth-component": "QCProfileEditor", children: [
+    /* @__PURE__ */ jsx2(
+      ConfigForm,
+      {
+        title: "QC profile",
+        description: `Profile ${profile.id}`,
+        sections: [
+          {
+            id: "profile",
+            title: "Thresholds",
+            description: "Language and threshold values used by the automated QC job.",
+            fields: [
+              {
+                name: "language",
+                type: "text",
+                label: "Language",
+                required: true
+              },
+              ...profile.thresholds.flatMap((threshold) => [
+                {
+                  name: operatorKey(threshold.id),
+                  type: "select",
+                  label: `${threshold.label} operator`,
+                  options: operatorOptions
+                },
+                {
+                  name: valueKey(threshold.id),
+                  type: typeof threshold.value === "number" ? "number" : "text",
+                  label: `${threshold.label} value`
+                }
+              ])
+            ]
+          }
+        ],
+        values,
+        submitLabel: "Save profile",
+        onChange: (nextValues) => onChange?.(profileFromValues(profile, nextValues)),
+        onSubmit: (nextValues) => onSubmit?.(profileFromValues(profile, nextValues))
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      RuleBuilder,
+      {
+        className: "eth-quality-qc-profile-editor__rules",
+        rules,
+        variables: profile.thresholds.map((threshold) => threshold.id),
+        onChange: (nextRules) => onChange?.(profileFromRules(profile, nextRules))
+      }
+    )
+  ] });
+}
+function valuesFromProfile(profile) {
+  return profile.thresholds.reduce(
+    (values, threshold) => ({
+      ...values,
+      [operatorKey(threshold.id)]: threshold.operator,
+      [valueKey(threshold.id)]: threshold.value
+    }),
+    { language: profile.language }
+  );
+}
+function profileFromValues(profile, values) {
+  return {
+    ...profile,
+    language: String(values.language ?? ""),
+    thresholds: profile.thresholds.map((threshold) => ({
+      ...threshold,
+      operator: String(values[operatorKey(threshold.id)] ?? threshold.operator),
+      value: normalizeThresholdValue(threshold.value, values[valueKey(threshold.id)])
+    }))
+  };
+}
+function rulesFromProfile(profile) {
+  return profile.thresholds.map((threshold) => ({
+    id: threshold.id,
+    when: {
+      kind: "leaf",
+      field: threshold.id,
+      op: threshold.operator,
+      value: threshold.value
+    },
+    then: {
+      type: "require-approval",
+      target: "manual-review"
+    }
+  }));
+}
+function profileFromRules(profile, rules) {
+  return {
+    ...profile,
+    thresholds: profile.thresholds.map((threshold) => {
+      const rule = rules.find((item) => item.id === threshold.id);
+      if (!rule) return threshold;
+      return {
+        ...threshold,
+        operator: rule.when.op ?? threshold.operator,
+        value: normalizeThresholdValue(threshold.value, rule.when.value)
+      };
+    })
+  };
+}
+function normalizeThresholdValue(previousValue, nextValue) {
+  if (typeof previousValue === "number") {
+    const numeric = Number(nextValue);
+    return Number.isNaN(numeric) ? previousValue : numeric;
+  }
+  return String(nextValue ?? "");
+}
+function operatorKey(id) {
+  return `${id}.operator`;
+}
+function valueKey(id) {
+  return `${id}.value`;
+}
+
+// src/components/QCJobMonitor.tsx
+import * as React3 from "react";
+import clsx3 from "clsx";
+import { StatusDot as StatusDot2, Surface as Surface2 } from "@echothink-ui/core";
+import { JobQueuePanel } from "@echothink-ui/admin";
+import { DataTable as DataTable2 } from "@echothink-ui/data";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function QCJobMonitor({ jobs, className }) {
+  const columns = React3.useMemo(
+    () => [
+      { key: "recordingId", header: "Recording" },
+      {
+        key: "status",
+        header: "Status",
+        render: (job) => /* @__PURE__ */ jsx3(StatusDot2, { status: job.status, label: job.status })
+      },
+      { key: "queuedAt", header: "Queued" },
+      { key: "durationMs", header: "Duration", render: (job) => formatDuration(job.durationMs) },
+      { key: "profile", header: "Profile", render: (job) => job.profile ?? "default" }
+    ],
+    []
+  );
+  return /* @__PURE__ */ jsxs3(
+    Surface2,
+    {
+      className: clsx3("eth-quality-qc-job-monitor", className),
+      title: "QC job monitor",
+      "data-eth-component": "QCJobMonitor",
+      children: [
+        /* @__PURE__ */ jsx3(JobQueuePanel, { queues: queuesFromJobs(jobs) }),
+        /* @__PURE__ */ jsx3(DataTable2, { rows: jobs, columns })
+      ]
+    }
+  );
+}
+function queuesFromJobs(jobs) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const job of jobs) {
+    const key = job.profile ?? "default";
+    grouped.set(key, [...grouped.get(key) ?? [], job]);
+  }
+  return Array.from(grouped.entries()).map(([profile, profileJobs]) => ({
+    id: profile,
+    name: `${profile} QC`,
+    depth: profileJobs.filter((job) => job.status === "queued").length,
+    processing: profileJobs.filter((job) => job.status === "running" || job.status === "in-progress").length,
+    failed: profileJobs.filter((job) => job.status === "failed").length,
+    retryRate: retryRate(profileJobs)
+  }));
+}
+function retryRate(jobs) {
+  if (!jobs.length) return 0;
+  return Math.round(jobs.filter((job) => job.status === "failed").length / jobs.length * 100);
+}
+function formatDuration(durationMs) {
+  if (durationMs === void 0) return "-";
+  if (durationMs < 1e3) return `${durationMs}ms`;
+  const seconds = Math.round(durationMs / 1e3);
+  return `${seconds}s`;
+}
+
+// src/components/QCDecisionBadge.tsx
+import clsx4 from "clsx";
+import { Badge as Badge2 } from "@echothink-ui/core";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function QCDecisionBadge({ decision, reason, className }) {
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      className: clsx4("eth-quality-qc-decision-badge", className),
+      title: reason,
+      "data-eth-component": "QCDecisionBadge",
+      children: /* @__PURE__ */ jsx4(Badge2, { severity: decisionSeverity2(decision), children: decisionLabel2(decision) })
+    }
+  );
+}
+function decisionSeverity2(decision) {
+  if (decision === "pass") return "success";
+  if (decision === "fail") return "danger";
+  if (decision === "overridden") return "info";
+  return "warning";
+}
+function decisionLabel2(decision) {
+  if (decision === "manual-review-required") return "Manual review required";
+  return decision.charAt(0).toUpperCase() + decision.slice(1);
+}
+
+// src/components/QCRoutingTimeline.tsx
+import clsx5 from "clsx";
+import { Badge as Badge3, Surface as Surface3 } from "@echothink-ui/core";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function QCRoutingTimeline({ events, className }) {
+  return /* @__PURE__ */ jsx5(
+    Surface3,
+    {
+      className: clsx5("eth-quality-qc-routing-timeline", className),
+      title: "Routing timeline",
+      "data-eth-component": "QCRoutingTimeline",
+      children: /* @__PURE__ */ jsx5("ol", { className: "eth-quality-qc-routing-timeline__events", children: events.map((event) => /* @__PURE__ */ jsxs4("li", { children: [
+        /* @__PURE__ */ jsx5("time", { children: event.at }),
+        /* @__PURE__ */ jsx5(Badge3, { severity: event.severity ?? "info", children: event.severity ?? "info" }),
+        /* @__PURE__ */ jsx5("span", { children: event.label })
+      ] }, `${event.at}-${event.label}`)) })
+    }
+  );
+}
+
+// src/index.tsx
+var QualityComponentNames = [
+  "QCMetricsInspector",
+  "QCProfileEditor",
+  "QCJobMonitor",
+  "QCDecisionBadge",
+  "QCRoutingTimeline"
+];
+export {
+  QCDecisionBadge,
+  QCJobMonitor,
+  QCMetricsInspector,
+  QCProfileEditor,
+  QCRoutingTimeline,
+  QualityComponentNames
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/QCMetricsInspector.tsx","../src/components/QCProfileEditor.tsx","../src/components/QCJobMonitor.tsx","../src/components/QCDecisionBadge.tsx","../src/components/QCRoutingTimeline.tsx","../src/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport clsx from \"clsx\";\nimport { Badge, StatusDot, Surface } from \"@echothink-ui/core\";\nimport type { EthOperationalStatus, EthSeverity } from \"@echothink-ui/core\";\nimport { DataTable } from \"@echothink-ui/data\";\nimport type { DataColumn } from \"@echothink-ui/data\";\n\nexport interface QCMetric extends Record<string, unknown> {\n  id: string;\n  label: string;\n  value: number | string;\n  unit?: string;\n  threshold?: { min?: number; max?: number };\n  status: \"pass\" | \"fail\" | \"warning\" | \"manual-review\";\n}\n\nexport interface QCDecision {\n  status: \"pass\" | \"fail\" | \"manual-review-required\";\n  reasons?: string[];\n}\n\nexport interface QCMetricsInspectorProps {\n  metrics: QCMetric[];\n  decision?: QCDecision;\n  className?: string;\n}\n\nexport function QCMetricsInspector({ metrics, decision, className }: QCMetricsInspectorProps) {\n  const columns = React.useMemo<DataColumn<QCMetric>[]>(\n    () => [\n      { key: \"label\", header: \"Metric\" },\n      {\n        key: \"value\",\n        header: \"Value\",\n        render: (metric) => `${metric.value}${metric.unit ? ` ${metric.unit}` : \"\"}`\n      },\n      {\n        key: \"threshold\",\n        header: \"Threshold\",\n        render: (metric) => thresholdLabel(metric.threshold)\n      },\n      {\n        key: \"status\",\n        header: \"Status\",\n        render: (metric) => (\n          <StatusDot status={metricStatus(metric.status)} label={metricStatusLabel(metric.status)} />\n        )\n      }\n    ],\n    []\n  );\n\n  return (\n    <Surface\n      className={clsx(\"eth-quality-qc-metrics-inspector\", className)}\n      title=\"QC metrics\"\n      subtitle={decision ? \"Automated decision available\" : undefined}\n      data-eth-component=\"QCMetricsInspector\"\n    >\n      {decision ? (\n        <div className=\"eth-quality-qc-metrics-inspector__decision\">\n          <Badge severity={decisionSeverity(decision.status)}>{decisionLabel(decision.status)}</Badge>\n          {decision.reasons?.length ? (\n            <ul>\n              {decision.reasons.map((reason) => (\n                <li key={reason}>{reason}</li>\n              ))}\n            </ul>\n          ) : null}\n        </div>\n      ) : null}\n      <DataTable rows={metrics} columns={columns} />\n    </Surface>\n  );\n}\n\nfunction thresholdLabel(threshold?: QCMetric[\"threshold\"]) {\n  if (!threshold) return \"-\";\n  if (threshold.min !== undefined && threshold.max !== undefined) {\n    return `${threshold.min} - ${threshold.max}`;\n  }\n  if (threshold.min !== undefined) return `>= ${threshold.min}`;\n  if (threshold.max !== undefined) return `<= ${threshold.max}`;\n  return \"-\";\n}\n\nfunction metricStatus(status: QCMetric[\"status\"]): EthOperationalStatus {\n  if (status === \"pass\") return \"succeeded\";\n  if (status === \"fail\") return \"failed\";\n  if (status === \"warning\") return \"warning\";\n  return \"approval-required\";\n}\n\nfunction metricStatusLabel(status: QCMetric[\"status\"]) {\n  if (status === \"manual-review\") return \"Manual review\";\n  return status.charAt(0).toUpperCase() + status.slice(1);\n}\n\nfunction decisionSeverity(status: QCDecision[\"status\"]): EthSeverity {\n  if (status === \"pass\") return \"success\";\n  if (status === \"fail\") return \"danger\";\n  return \"warning\";\n}\n\nfunction decisionLabel(status: QCDecision[\"status\"]) {\n  if (status === \"manual-review-required\") return \"Manual review required\";\n  return status.charAt(0).toUpperCase() + status.slice(1);\n}\n","import * as React from \"react\";\nimport clsx from \"clsx\";\nimport { ConfigForm, RuleBuilder } from \"@echothink-ui/forms\";\nimport type { FormValues, RuleDefinition } from \"@echothink-ui/forms\";\n\nexport interface QCThreshold {\n  id: string;\n  label: string;\n  operator: string;\n  value: number | string;\n}\n\nexport interface QCProfile {\n  id: string;\n  language: string;\n  thresholds: QCThreshold[];\n}\n\nexport interface QCProfileEditorProps {\n  profile: QCProfile;\n  onChange?: (profile: QCProfile) => void;\n  onSubmit?: (profile: QCProfile) => void;\n  className?: string;\n}\n\nconst operatorOptions = [\n  { value: \"lt\", label: \"Less than\" },\n  { value: \"lte\", label: \"Less than or equal\" },\n  { value: \"gt\", label: \"Greater than\" },\n  { value: \"gte\", label: \"Greater than or equal\" },\n  { value: \"eq\", label: \"Equals\" },\n  { value: \"between\", label: \"Between\" }\n];\n\nexport function QCProfileEditor({ profile, onChange, onSubmit, className }: QCProfileEditorProps) {\n  const values = React.useMemo(() => valuesFromProfile(profile), [profile]);\n  const rules = React.useMemo(() => rulesFromProfile(profile), [profile]);\n\n  return (\n    <div className={clsx(\"eth-quality-qc-profile-editor\", className)} data-eth-component=\"QCProfileEditor\">\n      <ConfigForm\n        title=\"QC profile\"\n        description={`Profile ${profile.id}`}\n        sections={[\n          {\n            id: \"profile\",\n            title: \"Thresholds\",\n            description: \"Language and threshold values used by the automated QC job.\",\n            fields: [\n              {\n                name: \"language\",\n                type: \"text\",\n                label: \"Language\",\n                required: true\n              },\n              ...profile.thresholds.flatMap((threshold) => [\n                {\n                  name: operatorKey(threshold.id),\n                  type: \"select\" as const,\n                  label: `${threshold.label} operator`,\n                  options: operatorOptions\n                },\n                {\n                  name: valueKey(threshold.id),\n                  type: typeof threshold.value === \"number\" ? (\"number\" as const) : (\"text\" as const),\n                  label: `${threshold.label} value`\n                }\n              ])\n            ]\n          }\n        ]}\n        values={values}\n        submitLabel=\"Save profile\"\n        onChange={(nextValues) => onChange?.(profileFromValues(profile, nextValues))}\n        onSubmit={(nextValues) => onSubmit?.(profileFromValues(profile, nextValues))}\n      />\n      <RuleBuilder\n        className=\"eth-quality-qc-profile-editor__rules\"\n        rules={rules}\n        variables={profile.thresholds.map((threshold) => threshold.id)}\n        onChange={(nextRules) => onChange?.(profileFromRules(profile, nextRules))}\n      />\n    </div>\n  );\n}\n\nfunction valuesFromProfile(profile: QCProfile): FormValues {\n  return profile.thresholds.reduce<FormValues>(\n    (values, threshold) => ({\n      ...values,\n      [operatorKey(threshold.id)]: threshold.operator,\n      [valueKey(threshold.id)]: threshold.value\n    }),\n    { language: profile.language }\n  );\n}\n\nfunction profileFromValues(profile: QCProfile, values: FormValues): QCProfile {\n  return {\n    ...profile,\n    language: String(values.language ?? \"\"),\n    thresholds: profile.thresholds.map((threshold) => ({\n      ...threshold,\n      operator: String(values[operatorKey(threshold.id)] ?? threshold.operator),\n      value: normalizeThresholdValue(threshold.value, values[valueKey(threshold.id)])\n    }))\n  };\n}\n\nfunction rulesFromProfile(profile: QCProfile): RuleDefinition[] {\n  return profile.thresholds.map((threshold) => ({\n    id: threshold.id,\n    when: {\n      kind: \"leaf\",\n      field: threshold.id,\n      op: threshold.operator,\n      value: threshold.value\n    },\n    then: {\n      type: \"require-approval\",\n      target: \"manual-review\"\n    }\n  }));\n}\n\nfunction profileFromRules(profile: QCProfile, rules: RuleDefinition[]): QCProfile {\n  return {\n    ...profile,\n    thresholds: profile.thresholds.map((threshold) => {\n      const rule = rules.find((item) => item.id === threshold.id);\n      if (!rule) return threshold;\n      return {\n        ...threshold,\n        operator: rule.when.op ?? threshold.operator,\n        value: normalizeThresholdValue(threshold.value, rule.when.value)\n      };\n    })\n  };\n}\n\nfunction normalizeThresholdValue(previousValue: string | number, nextValue: unknown) {\n  if (typeof previousValue === \"number\") {\n    const numeric = Number(nextValue);\n    return Number.isNaN(numeric) ? previousValue : numeric;\n  }\n  return String(nextValue ?? \"\");\n}\n\nfunction operatorKey(id: string) {\n  return `${id}.operator`;\n}\n\nfunction valueKey(id: string) {\n  return `${id}.value`;\n}\n","import * as React from \"react\";\nimport clsx from \"clsx\";\nimport { StatusDot, Surface } from \"@echothink-ui/core\";\nimport type { EthOperationalStatus } from \"@echothink-ui/core\";\nimport { JobQueuePanel } from \"@echothink-ui/admin\";\nimport { DataTable } from \"@echothink-ui/data\";\nimport type { DataColumn } from \"@echothink-ui/data\";\n\nexport interface QCJob extends Record<string, unknown> {\n  id: string;\n  recordingId: string;\n  status: EthOperationalStatus;\n  queuedAt: string;\n  durationMs?: number;\n  profile?: string;\n}\n\nexport interface QCJobMonitorProps {\n  jobs: QCJob[];\n  className?: string;\n}\n\nexport function QCJobMonitor({ jobs, className }: QCJobMonitorProps) {\n  const columns = React.useMemo<DataColumn<QCJob>[]>(\n    () => [\n      { key: \"recordingId\", header: \"Recording\" },\n      {\n        key: \"status\",\n        header: \"Status\",\n        render: (job) => <StatusDot status={job.status} label={job.status} />\n      },\n      { key: \"queuedAt\", header: \"Queued\" },\n      { key: \"durationMs\", header: \"Duration\", render: (job) => formatDuration(job.durationMs) },\n      { key: \"profile\", header: \"Profile\", render: (job) => job.profile ?? \"default\" }\n    ],\n    []\n  );\n\n  return (\n    <Surface\n      className={clsx(\"eth-quality-qc-job-monitor\", className)}\n      title=\"QC job monitor\"\n      data-eth-component=\"QCJobMonitor\"\n    >\n      <JobQueuePanel queues={queuesFromJobs(jobs)} />\n      <DataTable rows={jobs} columns={columns} />\n    </Surface>\n  );\n}\n\nfunction queuesFromJobs(jobs: QCJob[]) {\n  const grouped = new Map<string, QCJob[]>();\n  for (const job of jobs) {\n    const key = job.profile ?? \"default\";\n    grouped.set(key, [...(grouped.get(key) ?? []), job]);\n  }\n  return Array.from(grouped.entries()).map(([profile, profileJobs]) => ({\n    id: profile,\n    name: `${profile} QC`,\n    depth: profileJobs.filter((job) => job.status === \"queued\").length,\n    processing: profileJobs.filter((job) => job.status === \"running\" || job.status === \"in-progress\").length,\n    failed: profileJobs.filter((job) => job.status === \"failed\").length,\n    retryRate: retryRate(profileJobs)\n  }));\n}\n\nfunction retryRate(jobs: QCJob[]) {\n  if (!jobs.length) return 0;\n  return Math.round((jobs.filter((job) => job.status === \"failed\").length / jobs.length) * 100);\n}\n\nfunction formatDuration(durationMs?: number) {\n  if (durationMs === undefined) return \"-\";\n  if (durationMs < 1000) return `${durationMs}ms`;\n  const seconds = Math.round(durationMs / 1000);\n  return `${seconds}s`;\n}\n","import * as React from \"react\";\nimport clsx from \"clsx\";\nimport { Badge } from \"@echothink-ui/core\";\nimport type { EthSeverity } from \"@echothink-ui/core\";\n\nexport interface QCDecisionBadgeProps {\n  decision: \"pass\" | \"fail\" | \"manual-review-required\" | \"overridden\";\n  reason?: string;\n  className?: string;\n}\n\nexport function QCDecisionBadge({ decision, reason, className }: QCDecisionBadgeProps) {\n  return (\n    <span\n      className={clsx(\"eth-quality-qc-decision-badge\", className)}\n      title={reason}\n      data-eth-component=\"QCDecisionBadge\"\n    >\n      <Badge severity={decisionSeverity(decision)}>{decisionLabel(decision)}</Badge>\n    </span>\n  );\n}\n\nfunction decisionSeverity(decision: QCDecisionBadgeProps[\"decision\"]): EthSeverity {\n  if (decision === \"pass\") return \"success\";\n  if (decision === \"fail\") return \"danger\";\n  if (decision === \"overridden\") return \"info\";\n  return \"warning\";\n}\n\nfunction decisionLabel(decision: QCDecisionBadgeProps[\"decision\"]) {\n  if (decision === \"manual-review-required\") return \"Manual review required\";\n  return decision.charAt(0).toUpperCase() + decision.slice(1);\n}\n","import * as React from \"react\";\nimport clsx from \"clsx\";\nimport { Badge, Surface } from \"@echothink-ui/core\";\nimport type { EthSeverity } from \"@echothink-ui/core\";\n\nexport interface QCRoutingEvent {\n  at: string;\n  label: string;\n  severity?: EthSeverity;\n}\n\nexport interface QCRoutingTimelineProps {\n  events: QCRoutingEvent[];\n  className?: string;\n}\n\nexport function QCRoutingTimeline({ events, className }: QCRoutingTimelineProps) {\n  return (\n    <Surface\n      className={clsx(\"eth-quality-qc-routing-timeline\", className)}\n      title=\"Routing timeline\"\n      data-eth-component=\"QCRoutingTimeline\"\n    >\n      <ol className=\"eth-quality-qc-routing-timeline__events\">\n        {events.map((event) => (\n          <li key={`${event.at}-${event.label}`}>\n            <time>{event.at}</time>\n            <Badge severity={event.severity ?? \"info\"}>{event.severity ?? \"info\"}</Badge>\n            <span>{event.label}</span>\n          </li>\n        ))}\n      </ol>\n    </Surface>\n  );\n}\n","export * from \"./components/QCMetricsInspector\";\nexport * from \"./components/QCProfileEditor\";\nexport * from \"./components/QCJobMonitor\";\nexport * from \"./components/QCDecisionBadge\";\nexport * from \"./components/QCRoutingTimeline\";\n\nexport const QualityComponentNames = [\n  \"QCMetricsInspector\",\n  \"QCProfileEditor\",\n  \"QCJobMonitor\",\n  \"QCDecisionBadge\",\n  \"QCRoutingTimeline\"\n] as const;\nexport type QualityComponentName = (typeof QualityComponentNames)[number];\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,OAAO,UAAU;AACjB,SAAS,OAAO,WAAW,eAAe;AAE1C,SAAS,iBAAiB;AAyChB,cAeF,YAfE;AAlBH,SAAS,mBAAmB,EAAE,SAAS,UAAU,UAAU,GAA4B;AAC5F,QAAM,UAAgB;AAAA,IACpB,MAAM;AAAA,MACJ,EAAE,KAAK,SAAS,QAAQ,SAAS;AAAA,MACjC;AAAA,QACE,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ,CAAC,WAAW,GAAG,OAAO,KAAK,GAAG,OAAO,OAAO,IAAI,OAAO,IAAI,KAAK,EAAE;AAAA,MAC5E;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ,CAAC,WAAW,eAAe,OAAO,SAAS;AAAA,MACrD;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ,CAAC,WACP,oBAAC,aAAU,QAAQ,aAAa,OAAO,MAAM,GAAG,OAAO,kBAAkB,OAAO,MAAM,GAAG;AAAA,MAE7F;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,oCAAoC,SAAS;AAAA,MAC7D,OAAM;AAAA,MACN,UAAU,WAAW,iCAAiC;AAAA,MACtD,sBAAmB;AAAA,MAElB;AAAA,mBACC,qBAAC,SAAI,WAAU,8CACb;AAAA,8BAAC,SAAM,UAAU,iBAAiB,SAAS,MAAM,GAAI,wBAAc,SAAS,MAAM,GAAE;AAAA,UACnF,SAAS,SAAS,SACjB,oBAAC,QACE,mBAAS,QAAQ,IAAI,CAAC,WACrB,oBAAC,QAAiB,oBAAT,MAAgB,CAC1B,GACH,IACE;AAAA,WACN,IACE;AAAA,QACJ,oBAAC,aAAU,MAAM,SAAS,SAAkB;AAAA;AAAA;AAAA,EAC9C;AAEJ;AAEA,SAAS,eAAe,WAAmC;AACzD,MAAI,CAAC,UAAW,QAAO;AACvB,MAAI,UAAU,QAAQ,UAAa,UAAU,QAAQ,QAAW;AAC9D,WAAO,GAAG,UAAU,GAAG,MAAM,UAAU,GAAG;AAAA,EAC5C;AACA,MAAI,UAAU,QAAQ,OAAW,QAAO,MAAM,UAAU,GAAG;AAC3D,MAAI,UAAU,QAAQ,OAAW,QAAO,MAAM,UAAU,GAAG;AAC3D,SAAO;AACT;AAEA,SAAS,aAAa,QAAkD;AACtE,MAAI,WAAW,OAAQ,QAAO;AAC9B,MAAI,WAAW,OAAQ,QAAO;AAC9B,MAAI,WAAW,UAAW,QAAO;AACjC,SAAO;AACT;AAEA,SAAS,kBAAkB,QAA4B;AACrD,MAAI,WAAW,gBAAiB,QAAO;AACvC,SAAO,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AACxD;AAEA,SAAS,iBAAiB,QAA2C;AACnE,MAAI,WAAW,OAAQ,QAAO;AAC9B,MAAI,WAAW,OAAQ,QAAO;AAC9B,SAAO;AACT;AAEA,SAAS,cAAc,QAA8B;AACnD,MAAI,WAAW,yBAA0B,QAAO;AAChD,SAAO,OAAO,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;AACxD;;;AC3GA,YAAYA,YAAW;AACvB,OAAOC,WAAU;AACjB,SAAS,YAAY,mBAAmB;AAqCpC,SACE,OAAAC,MADF,QAAAC,aAAA;AAdJ,IAAM,kBAAkB;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,YAAY;AAAA,EAClC,EAAE,OAAO,OAAO,OAAO,qBAAqB;AAAA,EAC5C,EAAE,OAAO,MAAM,OAAO,eAAe;AAAA,EACrC,EAAE,OAAO,OAAO,OAAO,wBAAwB;AAAA,EAC/C,EAAE,OAAO,MAAM,OAAO,SAAS;AAAA,EAC/B,EAAE,OAAO,WAAW,OAAO,UAAU;AACvC;AAEO,SAAS,gBAAgB,EAAE,SAAS,UAAU,UAAU,UAAU,GAAyB;AAChG,QAAM,SAAe,eAAQ,MAAM,kBAAkB,OAAO,GAAG,CAAC,OAAO,CAAC;AACxE,QAAM,QAAc,eAAQ,MAAM,iBAAiB,OAAO,GAAG,CAAC,OAAO,CAAC;AAEtE,SACE,gBAAAA,MAAC,SAAI,WAAWF,MAAK,iCAAiC,SAAS,GAAG,sBAAmB,mBACnF;AAAA,oBAAAC;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAa,WAAW,QAAQ,EAAE;AAAA,QAClC,UAAU;AAAA,UACR;AAAA,YACE,IAAI;AAAA,YACJ,OAAO;AAAA,YACP,aAAa;AAAA,YACb,QAAQ;AAAA,cACN;AAAA,gBACE,MAAM;AAAA,gBACN,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,UAAU;AAAA,cACZ;AAAA,cACA,GAAG,QAAQ,WAAW,QAAQ,CAAC,cAAc;AAAA,gBAC3C;AAAA,kBACE,MAAM,YAAY,UAAU,EAAE;AAAA,kBAC9B,MAAM;AAAA,kBACN,OAAO,GAAG,UAAU,KAAK;AAAA,kBACzB,SAAS;AAAA,gBACX;AAAA,gBACA;AAAA,kBACE,MAAM,SAAS,UAAU,EAAE;AAAA,kBAC3B,MAAM,OAAO,UAAU,UAAU,WAAY,WAAsB;AAAA,kBACnE,OAAO,GAAG,UAAU,KAAK;AAAA,gBAC3B;AAAA,cACF,CAAC;AAAA,YACH;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,QACA,aAAY;AAAA,QACZ,UAAU,CAAC,eAAe,WAAW,kBAAkB,SAAS,UAAU,CAAC;AAAA,QAC3E,UAAU,CAAC,eAAe,WAAW,kBAAkB,SAAS,UAAU,CAAC;AAAA;AAAA,IAC7E;AAAA,IACA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV;AAAA,QACA,WAAW,QAAQ,WAAW,IAAI,CAAC,cAAc,UAAU,EAAE;AAAA,QAC7D,UAAU,CAAC,cAAc,WAAW,iBAAiB,SAAS,SAAS,CAAC;AAAA;AAAA,IAC1E;AAAA,KACF;AAEJ;AAEA,SAAS,kBAAkB,SAAgC;AACzD,SAAO,QAAQ,WAAW;AAAA,IACxB,CAAC,QAAQ,eAAe;AAAA,MACtB,GAAG;AAAA,MACH,CAAC,YAAY,UAAU,EAAE,CAAC,GAAG,UAAU;AAAA,MACvC,CAAC,SAAS,UAAU,EAAE,CAAC,GAAG,UAAU;AAAA,IACtC;AAAA,IACA,EAAE,UAAU,QAAQ,SAAS;AAAA,EAC/B;AACF;AAEA,SAAS,kBAAkB,SAAoB,QAA+B;AAC5E,SAAO;AAAA,IACL,GAAG;AAAA,IACH,UAAU,OAAO,OAAO,YAAY,EAAE;AAAA,IACtC,YAAY,QAAQ,WAAW,IAAI,CAAC,eAAe;AAAA,MACjD,GAAG;AAAA,MACH,UAAU,OAAO,OAAO,YAAY,UAAU,EAAE,CAAC,KAAK,UAAU,QAAQ;AAAA,MACxE,OAAO,wBAAwB,UAAU,OAAO,OAAO,SAAS,UAAU,EAAE,CAAC,CAAC;AAAA,IAChF,EAAE;AAAA,EACJ;AACF;AAEA,SAAS,iBAAiB,SAAsC;AAC9D,SAAO,QAAQ,WAAW,IAAI,CAAC,eAAe;AAAA,IAC5C,IAAI,UAAU;AAAA,IACd,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,OAAO,UAAU;AAAA,MACjB,IAAI,UAAU;AAAA,MACd,OAAO,UAAU;AAAA,IACnB;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF,EAAE;AACJ;AAEA,SAAS,iBAAiB,SAAoB,OAAoC;AAChF,SAAO;AAAA,IACL,GAAG;AAAA,IACH,YAAY,QAAQ,WAAW,IAAI,CAAC,cAAc;AAChD,YAAM,OAAO,MAAM,KAAK,CAAC,SAAS,KAAK,OAAO,UAAU,EAAE;AAC1D,UAAI,CAAC,KAAM,QAAO;AAClB,aAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAU,KAAK,KAAK,MAAM,UAAU;AAAA,QACpC,OAAO,wBAAwB,UAAU,OAAO,KAAK,KAAK,KAAK;AAAA,MACjE;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAEA,SAAS,wBAAwB,eAAgC,WAAoB;AACnF,MAAI,OAAO,kBAAkB,UAAU;AACrC,UAAM,UAAU,OAAO,SAAS;AAChC,WAAO,OAAO,MAAM,OAAO,IAAI,gBAAgB;AAAA,EACjD;AACA,SAAO,OAAO,aAAa,EAAE;AAC/B;AAEA,SAAS,YAAY,IAAY;AAC/B,SAAO,GAAG,EAAE;AACd;AAEA,SAAS,SAAS,IAAY;AAC5B,SAAO,GAAG,EAAE;AACd;;;AC1JA,YAAYE,YAAW;AACvB,OAAOC,WAAU;AACjB,SAAS,aAAAC,YAAW,WAAAC,gBAAe;AAEnC,SAAS,qBAAqB;AAC9B,SAAS,aAAAC,kBAAiB;AAwBD,gBAAAC,MAUrB,QAAAC,aAVqB;AAPlB,SAAS,aAAa,EAAE,MAAM,UAAU,GAAsB;AACnE,QAAM,UAAgB;AAAA,IACpB,MAAM;AAAA,MACJ,EAAE,KAAK,eAAe,QAAQ,YAAY;AAAA,MAC1C;AAAA,QACE,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ,CAAC,QAAQ,gBAAAD,KAACH,YAAA,EAAU,QAAQ,IAAI,QAAQ,OAAO,IAAI,QAAQ;AAAA,MACrE;AAAA,MACA,EAAE,KAAK,YAAY,QAAQ,SAAS;AAAA,MACpC,EAAE,KAAK,cAAc,QAAQ,YAAY,QAAQ,CAAC,QAAQ,eAAe,IAAI,UAAU,EAAE;AAAA,MACzF,EAAE,KAAK,WAAW,QAAQ,WAAW,QAAQ,CAAC,QAAQ,IAAI,WAAW,UAAU;AAAA,IACjF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SACE,gBAAAI;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,WAAWF,MAAK,8BAA8B,SAAS;AAAA,MACvD,OAAM;AAAA,MACN,sBAAmB;AAAA,MAEnB;AAAA,wBAAAI,KAAC,iBAAc,QAAQ,eAAe,IAAI,GAAG;AAAA,QAC7C,gBAAAA,KAACD,YAAA,EAAU,MAAM,MAAM,SAAkB;AAAA;AAAA;AAAA,EAC3C;AAEJ;AAEA,SAAS,eAAe,MAAe;AACrC,QAAM,UAAU,oBAAI,IAAqB;AACzC,aAAW,OAAO,MAAM;AACtB,UAAM,MAAM,IAAI,WAAW;AAC3B,YAAQ,IAAI,KAAK,CAAC,GAAI,QAAQ,IAAI,GAAG,KAAK,CAAC,GAAI,GAAG,CAAC;AAAA,EACrD;AACA,SAAO,MAAM,KAAK,QAAQ,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,SAAS,WAAW,OAAO;AAAA,IACpE,IAAI;AAAA,IACJ,MAAM,GAAG,OAAO;AAAA,IAChB,OAAO,YAAY,OAAO,CAAC,QAAQ,IAAI,WAAW,QAAQ,EAAE;AAAA,IAC5D,YAAY,YAAY,OAAO,CAAC,QAAQ,IAAI,WAAW,aAAa,IAAI,WAAW,aAAa,EAAE;AAAA,IAClG,QAAQ,YAAY,OAAO,CAAC,QAAQ,IAAI,WAAW,QAAQ,EAAE;AAAA,IAC7D,WAAW,UAAU,WAAW;AAAA,EAClC,EAAE;AACJ;AAEA,SAAS,UAAU,MAAe;AAChC,MAAI,CAAC,KAAK,OAAQ,QAAO;AACzB,SAAO,KAAK,MAAO,KAAK,OAAO,CAAC,QAAQ,IAAI,WAAW,QAAQ,EAAE,SAAS,KAAK,SAAU,GAAG;AAC9F;AAEA,SAAS,eAAe,YAAqB;AAC3C,MAAI,eAAe,OAAW,QAAO;AACrC,MAAI,aAAa,IAAM,QAAO,GAAG,UAAU;AAC3C,QAAM,UAAU,KAAK,MAAM,aAAa,GAAI;AAC5C,SAAO,GAAG,OAAO;AACnB;;;AC3EA,OAAOG,WAAU;AACjB,SAAS,SAAAC,cAAa;AAgBhB,gBAAAC,YAAA;AAPC,SAAS,gBAAgB,EAAE,UAAU,QAAQ,UAAU,GAAyB;AACrF,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAWF,MAAK,iCAAiC,SAAS;AAAA,MAC1D,OAAO;AAAA,MACP,sBAAmB;AAAA,MAEnB,0BAAAE,KAACD,QAAA,EAAM,UAAUE,kBAAiB,QAAQ,GAAI,UAAAC,eAAc,QAAQ,GAAE;AAAA;AAAA,EACxE;AAEJ;AAEA,SAASD,kBAAiB,UAAyD;AACjF,MAAI,aAAa,OAAQ,QAAO;AAChC,MAAI,aAAa,OAAQ,QAAO;AAChC,MAAI,aAAa,aAAc,QAAO;AACtC,SAAO;AACT;AAEA,SAASC,eAAc,UAA4C;AACjE,MAAI,aAAa,yBAA0B,QAAO;AAClD,SAAO,SAAS,OAAO,CAAC,EAAE,YAAY,IAAI,SAAS,MAAM,CAAC;AAC5D;;;AChCA,OAAOC,WAAU;AACjB,SAAS,SAAAC,QAAO,WAAAC,gBAAe;AAuBrB,SACE,OAAAC,MADF,QAAAC,aAAA;AATH,SAAS,kBAAkB,EAAE,QAAQ,UAAU,GAA2B;AAC/E,SACE,gBAAAD;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,WAAWF,MAAK,mCAAmC,SAAS;AAAA,MAC5D,OAAM;AAAA,MACN,sBAAmB;AAAA,MAEnB,0BAAAG,KAAC,QAAG,WAAU,2CACX,iBAAO,IAAI,CAAC,UACX,gBAAAC,MAAC,QACC;AAAA,wBAAAD,KAAC,UAAM,gBAAM,IAAG;AAAA,QAChB,gBAAAA,KAACF,QAAA,EAAM,UAAU,MAAM,YAAY,QAAS,gBAAM,YAAY,QAAO;AAAA,QACrE,gBAAAE,KAAC,UAAM,gBAAM,OAAM;AAAA,WAHZ,GAAG,MAAM,EAAE,IAAI,MAAM,KAAK,EAInC,CACD,GACH;AAAA;AAAA,EACF;AAEJ;;;AC5BO,IAAM,wBAAwB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;","names":["React","clsx","jsx","jsxs","React","clsx","StatusDot","Surface","DataTable","jsx","jsxs","clsx","Badge","jsx","decisionSeverity","decisionLabel","clsx","Badge","Surface","jsx","jsxs"]}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@echothink-ui/quality",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18.3.0",
+    "react-dom": ">=18.3.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "@echothink-ui/data": "0.2.0",
+    "@echothink-ui/core": "0.2.0",
+    "@echothink-ui/forms": "0.2.0",
+    "@echothink-ui/admin": "0.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --sourcemap --clean --external react --external react-dom && tsc -p tsconfig.json --declaration --emitDeclarationOnly --noEmit false --outDir dist",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run --config ../../vitest.config.ts --passWithNoTests",
+    "lint": "eslint src"
+  }
+}

package/src/components/QCDecisionBadge.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge } from "@echothink-ui/core";
+import type { EthSeverity } from "@echothink-ui/core";
+
+export interface QCDecisionBadgeProps {
+  decision: "pass" | "fail" | "manual-review-required" | "overridden";
+  reason?: string;
+  className?: string;
+}
+
+export function QCDecisionBadge({ decision, reason, className }: QCDecisionBadgeProps) {
+  return (
+    <span
+      className={clsx("eth-quality-qc-decision-badge", className)}
+      title={reason}
+      data-eth-component="QCDecisionBadge"
+    >
+      <Badge severity={decisionSeverity(decision)}>{decisionLabel(decision)}</Badge>
+    </span>
+  );
+}
+
+function decisionSeverity(decision: QCDecisionBadgeProps["decision"]): EthSeverity {
+  if (decision === "pass") return "success";
+  if (decision === "fail") return "danger";
+  if (decision === "overridden") return "info";
+  return "warning";
+}
+
+function decisionLabel(decision: QCDecisionBadgeProps["decision"]) {
+  if (decision === "manual-review-required") return "Manual review required";
+  return decision.charAt(0).toUpperCase() + decision.slice(1);
+}

package/src/components/QCJobMonitor.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import clsx from "clsx";
+import { StatusDot, Surface } from "@echothink-ui/core";
+import type { EthOperationalStatus } from "@echothink-ui/core";
+import { JobQueuePanel } from "@echothink-ui/admin";
+import { DataTable } from "@echothink-ui/data";
+import type { DataColumn } from "@echothink-ui/data";
+
+export interface QCJob extends Record<string, unknown> {
+  id: string;
+  recordingId: string;
+  status: EthOperationalStatus;
+  queuedAt: string;
+  durationMs?: number;
+  profile?: string;
+}
+
+export interface QCJobMonitorProps {
+  jobs: QCJob[];
+  className?: string;
+}
+
+export function QCJobMonitor({ jobs, className }: QCJobMonitorProps) {
+  const columns = React.useMemo<DataColumn<QCJob>[]>(
+    () => [
+      { key: "recordingId", header: "Recording" },
+      {
+        key: "status",
+        header: "Status",
+        render: (job) => <StatusDot status={job.status} label={job.status} />
+      },
+      { key: "queuedAt", header: "Queued" },
+      { key: "durationMs", header: "Duration", render: (job) => formatDuration(job.durationMs) },
+      { key: "profile", header: "Profile", render: (job) => job.profile ?? "default" }
+    ],
+    []
+  );
+
+  return (
+    <Surface
+      className={clsx("eth-quality-qc-job-monitor", className)}
+      title="QC job monitor"
+      data-eth-component="QCJobMonitor"
+    >
+      <JobQueuePanel queues={queuesFromJobs(jobs)} />
+      <DataTable rows={jobs} columns={columns} />
+    </Surface>
+  );
+}
+
+function queuesFromJobs(jobs: QCJob[]) {
+  const grouped = new Map<string, QCJob[]>();
+  for (const job of jobs) {
+    const key = job.profile ?? "default";
+    grouped.set(key, [...(grouped.get(key) ?? []), job]);
+  }
+  return Array.from(grouped.entries()).map(([profile, profileJobs]) => ({
+    id: profile,
+    name: `${profile} QC`,
+    depth: profileJobs.filter((job) => job.status === "queued").length,
+    processing: profileJobs.filter((job) => job.status === "running" || job.status === "in-progress").length,
+    failed: profileJobs.filter((job) => job.status === "failed").length,
+    retryRate: retryRate(profileJobs)
+  }));
+}
+
+function retryRate(jobs: QCJob[]) {
+  if (!jobs.length) return 0;
+  return Math.round((jobs.filter((job) => job.status === "failed").length / jobs.length) * 100);
+}
+
+function formatDuration(durationMs?: number) {
+  if (durationMs === undefined) return "-";
+  if (durationMs < 1000) return `${durationMs}ms`;
+  const seconds = Math.round(durationMs / 1000);
+  return `${seconds}s`;
+}

package/src/components/QCMetricsInspector.tsx

@@ -0,0 +1,108 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Badge, StatusDot, Surface } from "@echothink-ui/core";
+import type { EthOperationalStatus, EthSeverity } from "@echothink-ui/core";
+import { DataTable } from "@echothink-ui/data";
+import type { DataColumn } from "@echothink-ui/data";
+
+export interface QCMetric extends Record<string, unknown> {
+  id: string;
+  label: string;
+  value: number | string;
+  unit?: string;
+  threshold?: { min?: number; max?: number };
+  status: "pass" | "fail" | "warning" | "manual-review";
+}
+
+export interface QCDecision {
+  status: "pass" | "fail" | "manual-review-required";
+  reasons?: string[];
+}
+
+export interface QCMetricsInspectorProps {
+  metrics: QCMetric[];
+  decision?: QCDecision;
+  className?: string;
+}
+
+export function QCMetricsInspector({ metrics, decision, className }: QCMetricsInspectorProps) {
+  const columns = React.useMemo<DataColumn<QCMetric>[]>(
+    () => [
+      { key: "label", header: "Metric" },
+      {
+        key: "value",
+        header: "Value",
+        render: (metric) => `${metric.value}${metric.unit ? ` ${metric.unit}` : ""}`
+      },
+      {
+        key: "threshold",
+        header: "Threshold",
+        render: (metric) => thresholdLabel(metric.threshold)
+      },
+      {
+        key: "status",
+        header: "Status",
+        render: (metric) => (
+          <StatusDot status={metricStatus(metric.status)} label={metricStatusLabel(metric.status)} />
+        )
+      }
+    ],
+    []
+  );
+
+  return (
+    <Surface
+      className={clsx("eth-quality-qc-metrics-inspector", className)}
+      title="QC metrics"
+      subtitle={decision ? "Automated decision available" : undefined}
+      data-eth-component="QCMetricsInspector"
+    >
+      {decision ? (
+        <div className="eth-quality-qc-metrics-inspector__decision">
+          <Badge severity={decisionSeverity(decision.status)}>{decisionLabel(decision.status)}</Badge>
+          {decision.reasons?.length ? (
+            <ul>
+              {decision.reasons.map((reason) => (
+                <li key={reason}>{reason}</li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+      ) : null}
+      <DataTable rows={metrics} columns={columns} />
+    </Surface>
+  );
+}
+
+function thresholdLabel(threshold?: QCMetric["threshold"]) {
+  if (!threshold) return "-";
+  if (threshold.min !== undefined && threshold.max !== undefined) {
+    return `${threshold.min} - ${threshold.max}`;
+  }
+  if (threshold.min !== undefined) return `>= ${threshold.min}`;
+  if (threshold.max !== undefined) return `<= ${threshold.max}`;
+  return "-";
+}
+
+function metricStatus(status: QCMetric["status"]): EthOperationalStatus {
+  if (status === "pass") return "succeeded";
+  if (status === "fail") return "failed";
+  if (status === "warning") return "warning";
+  return "approval-required";
+}
+
+function metricStatusLabel(status: QCMetric["status"]) {
+  if (status === "manual-review") return "Manual review";
+  return status.charAt(0).toUpperCase() + status.slice(1);
+}
+
+function decisionSeverity(status: QCDecision["status"]): EthSeverity {
+  if (status === "pass") return "success";
+  if (status === "fail") return "danger";
+  return "warning";
+}
+
+function decisionLabel(status: QCDecision["status"]) {
+  if (status === "manual-review-required") return "Manual review required";
+  return status.charAt(0).toUpperCase() + status.slice(1);
+}