feat(ui): redesign knowledge integrations and audit

2026-08-02 03:27:22 +02:00
parent ce98a5f1c9
commit fd9b25c25c
3 changed files with 54 additions and 36 deletions
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { api } from "../api/client";
 import type { AuditEvent } from "../api/types";
+import { EmptyState, ErrorState, LoadingState, PageHeader } from "../components/PageChrome";

 export function Audit() {
  const [events, setEvents] = useState<AuditEvent[] | null>(null);
@@ -8,6 +9,8 @@ export function Audit() {
  const [action, setAction] = useState("");

  useEffect(() => {
+    setEvents(null);
+    setError(null);
    const params = new URLSearchParams();
    if (action) params.set("action", action);
    api
@@ -18,7 +21,7 @@ export function Audit() {

  return (
    <div className="page">
-      <h1>Audit</h1>
+      <PageHeader eyebrow="Assurance / Immutable history" title="Audit trail" description="Trace important state changes, actors and correlation references." />

      <form className="filters" aria-label="Filter audit events">
        <label>
@@ -32,12 +35,12 @@ export function Audit() {
        </label>
      </form>

-      {error && <p className="error" role="alert">{error}</p>}
-      {!error && !events && <p>Loading audit trail…</p>}
-      {events && events.length === 0 && <p>No audit events match this filter.</p>}
+      {error && <ErrorState message={error} />}
+      {!error && !events && <LoadingState label="Loading audit trail…" />}
+      {events && events.length === 0 && <EmptyState icon="audit" title="No audit events found" detail="Adjust the action filter." />}

      {events && events.length > 0 && (
-        <table className="data-table">
+        <div className="table-shell"><div className="table-meta"><span>{events.length} events</span><span>UTC stored · Brussels rendered</span></div><table className="data-table">
          <caption className="visually-hidden">Audit events</caption>
          <thead>
            <tr>
@@ -51,19 +54,19 @@ export function Audit() {
          <tbody>
            {events.map((e) => (
              <tr key={e.id}>
-                <td>
+                <td data-label="When">
                  <time dateTime={e.occurred_at}>
                    {new Date(e.occurred_at).toLocaleString("en-GB", { timeZone: "Europe/Brussels" })}
                  </time>
                </td>
-                <td>{e.actor_label} ({e.actor_type})</td>
-                <td>{e.action}</td>
-                <td>{e.entity_type}</td>
-                <td className="mono">{e.correlation_id.slice(0, 8)}</td>
+                <td data-label="Actor"><strong>{e.actor_label}</strong><small className="table-subtext">{e.actor_type}</small></td>
+                <td data-label="Action">{e.action.replace(/_/g, " ")}</td>
+                <td data-label="Entity">{e.entity_type}</td>
+                <td className="mono" data-label="Correlation"><details><summary>{e.correlation_id.slice(0, 8)}</summary><pre>{JSON.stringify(e.metadata ?? {}, null, 2)}</pre></details></td>
              </tr>
            ))}
          </tbody>
-        </table>
+        </table></div>
      )}
    </div>
  );
@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
 import { api, ApiError } from "../api/client";
-import type { AutomationRun } from "../api/types";
+import type { AutomationRun, KnowledgeHealth } from "../api/types";
 import { StatusBadge } from "../components/Badge";
 import { useAuth } from "../context/AuthContext";
+import { ErrorState, IntegrationMark, LoadingState, PageHeader, SectionHeading } from "../components/PageChrome";

 export function Automation() {
  const { user } = useAuth();
@@ -11,8 +12,11 @@ export function Automation() {
  const [status, setStatus] = useState("");
  const [retryError, setRetryError] = useState<string | null>(null);
  const [retrying, setRetrying] = useState<string | null>(null);
+  const [knowledge, setKnowledge] = useState<KnowledgeHealth | null>(null);

  const load = useCallback(() => {
+    setRuns(null);
+    setError(null);
    const params = new URLSearchParams();
    if (status) params.set("status", status);
    api
@@ -31,6 +35,10 @@ export function Automation() {
    load();
  }, [load]);

+  useEffect(() => {
+    api.get<KnowledgeHealth>("/api/v1/knowledge/status").then(setKnowledge).catch(() => setKnowledge(null));
+  }, []);
+
  async function handleRetry(eventId: string) {
    setRetryError(null);
    setRetrying(eventId);
@@ -47,7 +55,7 @@ export function Automation() {
  if (user?.role !== "operations_manager") {
    return (
      <div className="page">
-        <h1>Automation</h1>
+        <PageHeader eyebrow="Assurance / Integrations" title="Integrations" description="Delivery evidence is visible to Operations Managers only." />
        <p>Automation delivery status is visible to Operations Managers only.</p>
      </div>
    );
@@ -55,7 +63,15 @@ export function Automation() {

  return (
    <div className="page">
-      <h1>Automation</h1>
+      <PageHeader eyebrow="Assurance / Integrations" title="Integration control" description="Monitor delivery health, graceful degradation and retryable workflow events." />
+
+      <section className="integration-cards" aria-label="Integration health">
+        <article><IntegrationMark kind="n8n" /><div><span className="integration-kicker">Orchestration</span><h2>n8n delivery</h2><p>Return events are committed locally first and then delivered through the outbox.</p></div><StatusBadge status={runs?.[0]?.status ?? "no_events"} /></article>
+        <article><IntegrationMark kind="rag" /><div><span className="integration-kicker">Knowledge</span><h2>RAGcore</h2><p>{knowledge ? `${knowledge.document_count} procedures indexed in ${knowledge.collection}.` : "Health evidence is currently unavailable."}</p></div><StatusBadge status={knowledge?.available ? "available" : "unavailable"} /></article>
+        <article><IntegrationMark kind="mcp" /><div><span className="integration-kicker">Tool gateway</span><h2>MCP Hub</h2><p>No active MobilityOps adapter is configured in this proof of concept.</p></div><StatusBadge status="not_configured" /></article>
+      </section>
+
+      <SectionHeading title="Delivery ledger" description="Persisted outbox attempts with the latest failure evidence." />

      <form className="filters" aria-label="Filter automation runs">
        <label>
@@ -70,13 +86,13 @@ export function Automation() {
        </label>
      </form>

-      {error && <p className="error" role="alert">{error}</p>}
+      {error && <ErrorState message={error} />}
      {retryError && <p className="error" role="alert">{retryError}</p>}
-      {!error && !runs && <p>Loading automation runs…</p>}
+      {!error && !runs && <LoadingState label="Loading workflow delivery ledger…" />}
      {runs && runs.length === 0 && <p>No automation runs match this filter.</p>}

      {runs && runs.length > 0 && (
-        <table className="data-table">
+        <div className="table-shell"><div className="table-meta"><span>{runs.length} workflow events</span><span>Bounded retries</span></div><table className="data-table">
          <caption className="visually-hidden">Automation runs</caption>
          <thead>
            <tr>
@@ -93,20 +109,20 @@ export function Automation() {
          <tbody>
            {runs.map((r) => (
              <tr key={r.event_id}>
-                <td className="mono">{r.event_id.slice(0, 8)}</td>
-                <td>{r.event_type}</td>
-                <td>{r.aggregate_ref}</td>
-                <td>
+                <td className="mono" data-label="Event">{r.event_id.slice(0, 8)}</td>
+                <td data-label="Type">{r.event_type}</td>
+                <td data-label="Booking">{r.aggregate_ref}</td>
+                <td data-label="Status">
                  <StatusBadge status={r.status} />
                </td>
-                <td>{r.attempts}</td>
-                <td>{r.last_error ?? "—"}</td>
-                <td>
+                <td data-label="Attempts">{r.attempts}</td>
+                <td data-label="Last error">{r.last_error ?? "—"}</td>
+                <td data-label="When">
                  <time dateTime={r.occurred_at}>
                    {new Date(r.occurred_at).toLocaleString("en-GB", { timeZone: "Europe/Brussels" })}
                  </time>
                </td>
-                <td>
+                <td data-label="Action">
                  {r.status === "failed" ? (
                    <button
                      type="button"
@@ -122,7 +138,7 @@ export function Automation() {
              </tr>
            ))}
          </tbody>
-        </table>
+        </table></div>
      )}
    </div>
  );
@@ -1,6 +1,8 @@
 import { useEffect, useState, type FormEvent } from "react";
 import { api, ApiError } from "../api/client";
 import type { GroundedAnswer, KnowledgeHealth } from "../api/types";
+import { Icon } from "../components/Icons";
+import { PageHeader } from "../components/PageChrome";

 interface Exchange {
  question: string;
@@ -45,17 +47,13 @@ export function Knowledge() {

  return (
    <div className="page">
-      <h1>Knowledge</h1>
+      <PageHeader eyebrow="Assurance / Grounded knowledge" title="Procedure knowledge" description="Ask operational questions. Answers are shown only when RAGcore returns sufficient cited evidence." />
      {status && (
-        <p className="knowledge-status">
-          Provider: <strong>{status.provider}</strong> ·{" "}
-          {status.available ? "available" : "unavailable"} · {status.document_count} procedures
-          indexed
-        </p>
+        <div className="knowledge-status"><span className={`health-orb ${status.available ? "is-healthy" : "is-down"}`} /><div><strong>{status.provider}</strong><span>{status.available ? "Available" : "Unavailable"} · {status.document_count} procedures indexed</span></div><small>{status.collection}</small></div>
      )}

      <form className="panel knowledge-form" onSubmit={handleSubmit} aria-labelledby="ask-heading">
-        <h2 id="ask-heading">Ask a procedure question</h2>
+        <div className="ask-heading"><span><Icon name="spark" /></span><div><h2 id="ask-heading">Ask a procedure question</h2><p>Retrieval → evidence check → grounded answer</p></div></div>
        <label htmlFor="knowledge-question" className="visually-hidden">
          Question
        </label>
@@ -70,22 +68,23 @@ export function Knowledge() {
            maxLength={1000}
            required
          />
-          <button type="submit" disabled={submitting}>
+          <button className="button button-primary" type="submit" disabled={submitting}>
            {submitting ? "Asking…" : "Ask"}
+            {!submitting && <Icon name="chevron" />}
          </button>
        </div>
        {error && <p className="error" role="alert">{error}</p>}
      </form>

      {exchanges.length === 0 && !error && (
-        <p>Ask a question about one of the ten operational procedures to see cited sources.</p>
+        <div className="knowledge-empty"><span><Icon name="knowledge" /></span><h2>Evidence before answers</h2><p>Ask about returns, damage, inspections or another indexed procedure. MobilityOps will not invent an answer when evidence is missing.</p><div className="retrieval-flow" aria-hidden="true"><span>Question</span><i /><span>RAGcore</span><i /><span>Sources</span><i /><span>Answer</span></div></div>
      )}

      <ul className="exchange-list">
        {exchanges.map((exchange, index) => (
          <li key={index} className="panel exchange">
            <p className="exchange-question">
-              <strong>Q:</strong> {exchange.question}
+              <strong>Question</strong> {exchange.question}
            </p>
            <p className={`evidence-state evidence-${exchange.answer.evidence_state}`}>
              {EVIDENCE_LABEL[exchange.answer.evidence_state]}