@halo-sdk/react

Lightweight, strongly-typed React hooks for Halo SDK. They fold the S5 HaloEvent stream into UI state so you can show cache, cost, loop, and human-in-the-loop effects live — without a heavy client runtime.

Every hook takes a Subscribe function with the exact shape of HaloAgent.observe — pass agent.observe directly (same process), or a transport that relays events to the browser.

import { useCacheProfile, useCost, useApprovals } from "@halo-sdk/react";

function Dashboard({ subscribe }) {
  const cache = useCacheProfile(subscribe); // { hitRate, grade, ... }
  const cost = useCost(subscribe); // { turns, estimatedUsd, ... }
  const pending = useApprovals(subscribe); // pending HITL tool calls

  return (
    <>
      <Badge grade={cache.grade} hitRate={cache.hitRate} />
      <Spend usd={cost.estimatedUsd} turns={cost.turns} />
      {pending.map((p) => (
        <ApprovalCard key={p.toolCallId} call={p.call} />
      ))}
    </>
  );
}

Hooks

• useCacheStats — hit/miss/write tokens + hit rate
• useCacheProfile — the above plus an A–F cacheability grade
• useCost — cumulative turns, tokens, estimated USD
• useLoopState — current step + status (idle/running/paused/error)
• useApprovals — pending HITL tool approvals
• useHaloState — the generic reducer hook the others build on

The reducers (cacheStatsReducer, costReducer, loopStateReducer, approvalsReducer) are pure and exported, so you can fold the same stream server-side or in tests.