Rendering Complex AI Reasoning States in a React Dashboard

AI agents are useless if human operators cannot understand what they are thinking in real time.

We built a React dashboard that visualizes the agent's reasoning, memory hits, and recovery actions.

The difference in operator trust was dramatic.

The problem

Our first UI was a simple table of incidents.

It showed what happened, but not why.

Operators could not tell if the agent was using a Hindsight memory recall or running fresh LLM reasoning.

Trust in the system was low — 2 out of 10 in our internal survey.

If the operator cannot see the agent's confidence, they will override it.

And if they override it every time, what is the point of having an agent?

The fix — make reasoning visible

We built a MemoryHitBadge component that shows operators the source of every resolution:

// ui/src/components/MemoryHitBadge.tsx

export const MemoryHitBadge: React.FC<MemoryHitBadgeProps> = ({
  mode,
  durationSeconds,
  confidence,
}) => {
  const isRecall = mode === "recall";

  const containerClasses = isRecall
    ? "bg-violet-50 border-violet-200"
    : "bg-amber-50 border-amber-200";

  const titleText = isRecall
    ? "HINDSIGHT RECALL HIT"
    : "FRESH REASONING";

  const subtitleText = isRecall
    ? `${durationSeconds}s · 0 LLM tokens · playbook from memory`
    : `${durationSeconds}s · ReAct loop · playbook retained to memory`;

  return (
    <div
      className={`w-full flex items-center justify-between border rounded-lg px-4 py-3 ${containerClasses}`}
    >
      <span className="text-xs font-semibold tracking-wider">
        {titleText}
      </span>

      <span className="text-xs">
        {subtitleText}
      </span>

      <span className="px-2.5 py-1 rounded-full text-[10px] font-mono font-bold">
        {(confidence * 100).toFixed(0)}% CONF
      </span>
    </div>
  );
};

Two colors, two meanings:

• Purple = instant recall from Hindsight memory (0 LLM tokens)
• Amber = fresh ReAct reasoning, new playbook retained to memory

Operators instantly understand where every recommendation came from.

The live topology graph

We also added a Live Topology graph using @xyflow/react.

It shows the full microservice architecture with real-time status.

When an incident fires, the impacted services light up.

This gives operators the blast radius in one glance instead of requiring them to scroll through logs.

Conceptually:

                ┌─────────────┐
                │ AI Copilot  │
                └──────┬──────┘
                       │
        ┌──────────────┼──────────────┐
        ↓              ↓              ↓
   Memory Service   Incident      Execution
                     Engine        Engine
        ↓              ↓              ↓
     Hindsight      Database    Kubernetes
                                       ↓
                                Recovery Engine

The topology graph turns that architecture into something operators can understand visually.

Polling strategy — the hidden performance trap

The dashboard polls the Backend-For-Frontend every 3 seconds.

But naive polling can create unnecessary traffic and background work.

We use TanStack Query with two important settings:

// ui/src/App.tsx

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchInterval: 3000,
      refetchIntervalInBackground: false,
      refetchOnWindowFocus: true,
    },
  },
});

The important flag here is:

refetchIntervalInBackground: false

It pauses polling when the tab is inactive.

Before this, a developer with 5 tabs open could generate roughly 5x the polling traffic against the BFF.

After enabling the flag, background traffic drops to near zero when nobody is looking at the dashboard.

This is a small configuration change, but it makes a noticeable difference when multiple dashboards or tabs are open.

Before vs after

The following results are from our project testing:

Metric	Before	After
Dashboard render latency	2.5s	150ms
Operator trust (internal survey)	2/10	8/10
UI pages	1	11
Background polling traffic	High	Near zero when inactive

We achieved the approximately 150ms render latency by shifting from heavy API aggregation to a Backend-For-Frontend (BFF) architecture.

The BFF handles aggregation.

The UI focuses on rendering.

That separation keeps the frontend simpler and reduces the amount of work required by individual UI components.

The honest lesson

Complex distributed systems require simplified, highly visual UI components to establish trust with human operators.

A confidence badge can communicate more quickly than a log file.

A visual topology can communicate more quickly than a metrics dump.

If you are building an AI agent, budget meaningful engineering time for the UI.

It is not decoration.

It is the interface between the agent's reasoning and the human's judgment.

How this fits with agent memory

The point of a memory layer such as Hindsight is not only to store information.

The operator also needs to understand when that memory was used.

The UI shows:

• Whether the current resolution is a recall hit or fresh reasoning
• The confidence score for every decision
• The blast radius of every incident
• The history of similar incidents from agent memory

Without this visibility, operators can experience the agent as a black box.

With it, they can understand where a recommendation came from and why the system selected it.

The overall flow becomes:

Incident Detected
       ↓
Agent Analysis
       ↓
┌──────────────────────┐
│ Memory Recall Match? │
└──────────┬───────────┘
           │
      ┌────┴────┐
      ↓         ↓
    Recall    Fresh
      ↓       Reasoning
      └────┬────┘
           ↓
     Decision + Confidence
           ↓
       UI Dashboard
           ↓
   Recovery / Verification

The dashboard makes these states visible instead of hiding them behind API calls and logs.

You can explore how persistent memory works in the Hindsight documentation.

You can also explore the Hindsight GitHub repository.