Remove native classes from TS runtime

ts/packages/workbench/src/components/error-boundary.tsx

@@ -1,4 +1,8 @@
-import { Component, type ErrorInfo, type ReactNode } from "react";
+import type { ReactNode } from "react";
+import {
+  ErrorBoundary as ReactErrorBoundary,
+  type FallbackProps,
+} from "react-error-boundary";
 import { AlertTriangle, RefreshCw } from "lucide-react";
 
 interface Props {
@@ -7,55 +11,41 @@ interface Props {
   fallback?: ReactNode;
 }
 
-interface State {
-  hasError: boolean;
-  error: Error | null;
+const errorMessage = (error: unknown): string =>
+  error instanceof Error ? error.message : "An unexpected error occurred.";
+
+function DefaultFallback({ error, resetErrorBoundary }: FallbackProps) {
+  return (
+    <div className="flex h-full items-center justify-center p-8">
+      <div className="max-w-md rounded-lg border border-error/30 bg-error/5 p-6 text-center">
+        <AlertTriangle className="mx-auto mb-3 h-8 w-8 text-error" />
+        <h2 className="mb-2 text-lg font-semibold text-fg">
+          Something went wrong
+        </h2>
+        <p className="mb-4 text-sm text-fg-muted">
+          {errorMessage(error)}
+        </p>
+        <button
+          onClick={() => resetErrorBoundary()}
+          className="inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-500"
+        >
+          <RefreshCw className="h-3.5 w-3.5" />
+          Try Again
+        </button>
+      </div>
+    </div>
+  );
 }
 
-export class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error };
-  }
-
-  override componentDidCatch(error: Error, info: ErrorInfo) {
-    console.error("[ErrorBoundary]", error, info.componentStack);
-  }
-
-  handleReset = () => {
-    this.setState({ hasError: false, error: null });
-  };
-
-  override render() {
-    if (this.state.hasError) {
-      if (this.props.fallback !== undefined) return this.props.fallback;
-
-      return (
-        <div className="flex h-full items-center justify-center p-8">
-          <div className="max-w-md rounded-lg border border-error/30 bg-error/5 p-6 text-center">
-            <AlertTriangle className="mx-auto mb-3 h-8 w-8 text-error" />
-            <h2 className="mb-2 text-lg font-semibold text-fg">
-              Something went wrong
-            </h2>
-            <p className="mb-4 text-sm text-fg-muted">
-              {this.state.error?.message ?? "An unexpected error occurred."}
-            </p>
-            <button
-              onClick={this.handleReset}
-              className="inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-500"
-            >
-              <RefreshCw className="h-3.5 w-3.5" />
-              Try Again
-            </button>
-          </div>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
+export function ErrorBoundary({ children, fallback }: Props) {
+  return (
+    <ReactErrorBoundary
+      fallbackRender={(props) => fallback ?? <DefaultFallback {...props} />}
+      onError={(error, info) => {
+        console.error("[ErrorBoundary]", error, info.componentStack);
+      }}
+    >
+      {children}
+    </ReactErrorBoundary>
+  );
 }

ts/packages/workbench/src/qa/mock-api.ts

@@ -1,4 +1,4 @@
-import { BaseApi, type ConnectionState, type DocumentMetadata, type ProcessingMetadata, type StreamingMetadata, type Triple } from "@trustgraph/client";
+import { makeBaseApiWithRpc, type BaseApi, type DocumentMetadata, type ProcessingMetadata, type StreamingMetadata, type Triple } from "@trustgraph/client";
 import { Option, Schema as S } from "effect";
 
 type ConfigValues = Record<string, Record<string, unknown>>;
@@ -80,24 +80,6 @@ interface MockState {
   };
 }
 
-interface MockBaseApi extends BaseApi {
-  makeRequest<RequestType extends object, ResponseType>(
-    service: string,
-    request: RequestType,
-    timeout?: number,
-    retries?: number,
-    flow?: string,
-  ): Promise<ResponseType>;
-  makeRequestMulti<RequestType extends object, ResponseType>(
-    service: string,
-    request: RequestType,
-    receiver: (resp: unknown) => boolean,
-    timeout?: number,
-    retries?: number,
-    flow?: string,
-  ): Promise<ResponseType>;
-}
-
 const encodeJsonUnknown = S.encodeUnknownOption(S.fromJsonString(S.Unknown));
 const decodeJsonUnknown = S.decodeUnknownOption(S.UnknownFromJsonString);
 
@@ -533,40 +515,33 @@ function dispatchStream<ResponseType>(
 
 export function makeMockBaseApi(fixture: MockWorkbenchFixture = {}): BaseApi {
   const state = createState(fixture);
-  const api = Object.create(BaseApi.prototype) as MockBaseApi;
-  api.tag = "mock-workbench";
-  api.id = 1;
-  api.token = state.settings.apiKey.length > 0 ? state.settings.apiKey : undefined;
-  api.user = state.settings.user;
-  api.socketUrl = state.settings.gatewayUrl;
-  api.makeRequest = function makeRequest<RequestType extends object, ResponseType>(
-    service: string,
-    request: RequestType,
-    _timeout?: number,
-    _retries?: number,
-    flow?: string,
-  ) {
-    return Promise.resolve(dispatchRequest(state, service, request as Record<string, unknown>, flow) as ResponseType);
-  };
-  api.makeRequestMulti = function makeRequestMulti<RequestType extends object, ResponseType>(
-    service: string,
-    _request: RequestType,
-    receiver: (resp: unknown) => boolean,
-    _timeout?: number,
-    _retries?: number,
-    _flow?: string,
-  ) {
-    return dispatchStream<ResponseType>(state, service, receiver);
-  };
-  api.onConnectionStateChange = function onConnectionStateChange(listener: (state: ConnectionState) => void) {
-    listener({
-      status: api.token === undefined ? "unauthenticated" : "authenticated",
-      hasApiKey: api.token !== undefined,
-    });
-    return () => {};
-  };
-  api.close = function close() {};
-  return api;
+  const token = state.settings.apiKey.length > 0 ? state.settings.apiKey : undefined;
+  return makeBaseApiWithRpc(state.settings.user, token, state.settings.gatewayUrl, {
+    dispatch: (input) =>
+      Promise.resolve(
+        dispatchRequest(
+          state,
+          input.service,
+          input.request,
+          input.flow,
+        ),
+      ),
+    dispatchStream: async (input, receiver) => {
+      await dispatchStream(state, input.service, (message) => {
+        const chunk = message as { response?: unknown; complete?: boolean };
+        return receiver({
+          response: chunk.response,
+          complete: chunk.complete === true,
+        });
+      });
+      return undefined;
+    },
+    subscribe: (listener) => {
+      listener({ status: token === undefined ? "connected" : "connected" });
+      return () => {};
+    },
+    close: () => Promise.resolve(),
+  });
 }
 
 export function qaSettingsFromFixture(fixture: MockWorkbenchFixture = {}) {