React

npm install @pleach/react @pleach/core react react-dom

import { useState } from "react";
import { useSessionRuntime, useSessionMessageStream } from "@pleach/react";
import { createPleachRuntime } from "@pleach/core/runtime";

function Chat() {
  const { runtime, sessionId } = useSessionRuntime({
    buildRuntime: () => createPleachRuntime({ /* config */ }),
    initSession: async (rt) => rt.sessions.create(),
  });

  const { streamMessage, isStreaming } = useSessionMessageStream({
    runtime,
    sessionId,
    onEvent: (event, ctx) => {
      // optional intercept — return { handled: true } to short-circuit.
      // `ctx.accumulator` carries the post-append streaming buffer.
    },
  });

  const [input, setInput] = useState("");

  return (
    <form onSubmit={(e) => { e.preventDefault(); streamMessage({ content: input }); }}>
      <input value={input} onChange={(e) => setInput((e.target as unknown as { value: string }).value)} disabled={isStreaming} />
      {/* render the accumulator via your onEvent reducer; gate UI on isStreaming */}
    </form>
  );
}

# Server-only — no React peer needed
npm install @pleach/core

# UI consumer — install the peer
npm install @pleach/core @pleach/react react react-dom

// Primitives — @pleach/react (1.0)
import { useSessionRuntime }       from "@pleach/react/hooks/useSessionRuntime";
import { useSessionMessageStream } from "@pleach/react/hooks/useSessionMessageStream";
import { useEventLog }             from "@pleach/react/hooks/useEventLog";
import { useInterruptUI }          from "@pleach/react/hooks/useInterruptUI";
import { createCorrectionDedup }   from "@pleach/react/utils/correctionDedup";
import { createStreamLock }        from "@pleach/react/utils/streamLock";

// Facade — @pleach/core/react (1.x with back-compat shim)
import {
  HarnessProvider,
  useHarness,
  useHarnessContext,
  useRuntime,
  useIsEnterpriseEnabled,
  useSessionList,
  useSessionCheckpoints,
  useTools,
  useToolsByCategory,
  useTool,
  useToolValidation,
  useSyncStatus,
  useIsSynced,
  usePendingChanges,
  useTeam,
  useCompliance,
  useHarnessDevTools,
  updateDevToolsSession,
  createCorrectionDedup,
  createDefaultCorrectionDedup,
} from "@pleach/core/react";

const { runtime, sessionId, ready } = useSessionRuntime({
  buildRuntime: () =>
    new SessionRuntime({
      storage: new IndexedDBAdapter({ databaseName: "pleach" }),
      tenantId,
    }),
  initSession: async (rt) => (await rt.createSession()).id,
  onError: (err) => reportToSentry(err),
});

// runtime + sessionId are null until the mount effect commits.
// `ready` resolves when both are live.

const {
  streamMessage,
  abort,
  isStreaming,
  isReasoning,
  reasoningText,
} = useSessionMessageStream({
  runtime,
  sessionId,
  onEvent:        (event, ctx) => dispatch({ type: "STREAM_EVENT", event }),
  onTurnComplete: (ctx)        => track("turn.complete", { events: ctx.events.length }),
  onError:        (err)        => dispatch({ type: "STREAM_ERROR", err }),
});

await streamMessage({ content: "Hello" });

{isReasoning && <Spinner label="Thinking…" />}
{reasoningText && (
  <details>
    <summary>Thought process</summary>
    <pre>{reasoningText}</pre>
  </details>
)}

const { log, flush } = useEventLog({
  client: eventLogClient,         // or `clientRef: { current: ... }` for
                                  // refs constructed inside a `useEffect`
  onEvent: (e) => devtools.push(e),
});

log({ type: "ui.bubble.copied", messageId });
await flush();   // best-effort drain before unmount

const { activeInterrupts, renderActive, resolveInterrupt, cancelInterrupt } =
  useInterruptUI({
    runtime,
    handlers: pluginManager.collectInterruptUIHandlers(),
    onInterrupt: (i)  => track("interrupt.shown", { type: i.toolCall?.name }),
    onResolve:   (id, decision) => eventLog.log({ type: "interrupt.resolved", id, decision }),
    onCancel:    (id) => eventLog.log({ type: "interrupt.cancelled", id }),
    onTimeout:   (id) => eventLog.log({ type: "interrupt.timeout", id }),
  });

return <>{renderActive()}</>;

function Chat({ tenantId }: { tenantId: string }) {
  const { runtime, sessionId } = useSessionRuntime({
    buildRuntime: () =>
      new SessionRuntime({
        storage: new IndexedDBAdapter({ databaseName: "pleach" }),
        tenantId,
      }),
    initSession: async (rt) => (await rt.createSession()).id,
  });

  const [messages, setMessages] = useState<Message[]>([]);

  const { streamMessage, isStreaming } = useSessionMessageStream({
    runtime,
    sessionId,
    onEvent: (e) => setMessages((prev) => reduceMessage(prev, e)),
  });

  const { renderActive } = useInterruptUI({
    runtime,
    handlers: interruptHandlers,
  });

  return (
    <>
      <Transcript messages={messages} />
      {renderActive()}
      <Composer
        disabled={isStreaming}
        onSend={(text) => streamMessage({ content: text })}
      />
    </>
  );
}

// app/page.tsx
'use client';

import { SessionRuntime, AiSdkProvider } from "@pleach/core";
import { IndexedDBAdapter } from "@pleach/core/sessions";
import { HarnessProvider } from "@pleach/core/react";
import { createOpenRouter } from "@openrouter/ai-sdk-provider";

const openrouter = createOpenRouter({ apiKey: process.env.NEXT_PUBLIC_OPENROUTER_API_KEY! });

const runtime = new SessionRuntime({
  storage:  new IndexedDBAdapter({ databaseName: "pleach" }),
  provider: new AiSdkProvider({
    model:    openrouter("anthropic/claude-sonnet-4-5"),
    maxSteps: 5,
  }),
  userId:   "user_123",
});

export function App() {
  return (
    <HarnessProvider runtime={runtime}>
      <Chat />
    </HarnessProvider>
  );
}

function Chat() {
  const {
    messages,
    sendMessage,
    createSession,
    abort,
    isStreaming,
    syncStatus,
    session,
  } = useHarness();

  return (
    <div>
      {messages.map((m) => (
        <Bubble key={m.id} message={m} />
      ))}
      <Composer
        onSend={(text) => sendMessage(text)}
        disabled={isStreaming}
      />
      {isStreaming && <button onClick={abort}>Stop</button>}
      <SyncPill status={syncStatus} />
    </div>
  );
}

function Sidebar() {
  const { sessions, isLoading } = useSessionList({
    filter: { userId: currentUser.id },
    limit:  50,
  });

  if (isLoading) return <Skeleton />;

  return (
    <ul>
      {sessions.map((s) => (
        <li key={s.id}>
          <a href={`/c/${s.id}`}>{s.title ?? "Untitled"}</a>
        </li>
      ))}
    </ul>
  );
}

function CheckpointPicker({ sessionId }: { sessionId: string }) {
  const checkpoints = useSessionCheckpoints(sessionId);
  return (
    <select>
      {checkpoints.map((cp) => (
        <option key={cp.id} value={cp.id}>
          {cp.stageId} — {new Date(cp.createdAt).toLocaleTimeString()}
        </option>
      ))}
    </select>
  );
}

function ToolPalette() {
  const { tools } = useTools({ enabledOnly: true });
  return tools.map((t) => <ToolCard key={t.name} tool={t} />);
}

function ToolArgsForm({ toolName }: { toolName: string }) {
  const validate = useToolValidation(toolName);
  const [args, setArgs] = useState({});
  const result = validate(args);

  return (
    <form>
      <SchemaForm value={args} onChange={setArgs} />
      {!result.ok && <ValidationErrors errors={result.errors} />}
    </form>
  );
}

function SavedPill() {
  const synced = useIsSynced();
  return <span>{synced ? "Saved" : "Saving…"}</span>;
}

function NavGuard() {
  const pending = usePendingChanges();
  useBeforeUnload(pending > 0, "You have unsaved changes.");
  return null;
}

function PresenceBar({ sessionId }: { sessionId: string }) {
  const { members, cursors } = useTeam({ sessionId });
  return (
    <div>
      {members.map((m) => (
        <Avatar key={m.userId} user={m} active={m.lastSeenMs < 5000} />
      ))}
    </div>
  );
}

import { useCompliance } from "@pleach/core/react";

function ComplianceBadge() {
  const compliance = useCompliance({ sessionId, compliance: complianceExtension });
  return <span>audit records: {compliance.auditRecordCount}</span>;
}

import { createCorrectionDedup, createDefaultCorrectionDedup } from "@pleach/core/react";

const shouldAllow = createCorrectionDedup({
  priorityMap:    { "tool.input": 10, "tool.output": 5 },
  defaultPriority: 1,
  windowMs:       500,
});

// or the defaults:
const shouldAllowDefault = createDefaultCorrectionDedup();

import { useHarnessDevTools } from "@pleach/core/react";

function App() {
  if (process.env.NODE_ENV !== "production") {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useHarnessDevTools();
  }
  return <HarnessProvider runtime={runtime}>...</HarnessProvider>;
}

__HARNESS_DEVTOOLS__.session;               // SessionState
__HARNESS_DEVTOOLS__.checkpoints();         // Checkpoint[]
__HARNESS_DEVTOOLS__.rollback("cp_...");    // restore to checkpoint
__HARNESS_DEVTOOLS__.tools();               // ToolDefinition[]
__HARNESS_DEVTOOLS__.syncStatus();          // sync coordinator status
__HARNESS_DEVTOOLS__.forceSync();           // push a sync now

'use client';

import { useMemo } from "react";
import { SessionRuntime } from "@pleach/core";
import { IndexedDBAdapter } from "@pleach/core/sessions";
import { IndexedDBSaver } from "@pleach/core/checkpointing";
import {
  HarnessProvider,
  useHarness,
} from "@pleach/core/react";

function App({ userId }: { userId: string }) {
  const runtime = useMemo(
    () =>
      new SessionRuntime({
        storage:      new IndexedDBAdapter({ databaseName: "pleach" }),
        checkpointer: new IndexedDBSaver({ databaseName: "pleach" }),
        userId,
      }),
    [userId],
  );

  return (
    <HarnessProvider runtime={runtime}>
      <Chat />
    </HarnessProvider>
  );
}

function Chat() {
  const { messages, sendMessage, isLoading } = useHarness();
  return (
    <>
      {messages.map((m) => (
        <p key={m.id}>{m.content}</p>
      ))}
      <button
        disabled={isLoading}
        onClick={() => sendMessage("Hello")}
      >
        Send
      </button>
    </>
  );
}

import { PleachLab } from "@pleach/react/lab";

<PleachLab buildRuntime={() => new SessionRuntime(/* … */)} />