+
+ );
+}
diff --git a/frontend/apps/inspector/src/app/layout.tsx b/frontend/apps/inspector/src/app/layout.tsx
new file mode 100644
index 0000000000..07da8f7fa8
--- /dev/null
+++ b/frontend/apps/inspector/src/app/layout.tsx
@@ -0,0 +1,405 @@
+import {
+ faArrowUpRight,
+ faLink,
+ faLinkSlash,
+ faSpinnerThird,
+ Icon,
+} from "@rivet-gg/icons";
+import { Link, useMatchRoute } from "@tanstack/react-router";
+import {
+ type ComponentProps,
+ createContext,
+ type PropsWithChildren,
+ type ReactNode,
+ type RefObject,
+ useContext,
+ useLayoutEffect,
+ useRef,
+ useState,
+} from "react";
+import type { ImperativePanelGroupHandle } from "react-resizable-panels";
+import { ActorBuildsList } from "@/app/actor-builds-list";
+import {
+ useInspectorContext,
+ useInspectorEndpoint,
+ useInspectorStatus,
+} from "@/app/inspector-context";
+import {
+ Button,
+ type ButtonProps,
+ cn,
+ type ImperativePanelHandle,
+ Ping,
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+ ScrollArea,
+ WithTooltip,
+} from "@/components";
+import { useRootLayoutOptional } from "@/components/actors/root-layout-context";
+import type { HeaderLinkProps } from "@/components/header/header-link";
+import { ensureTrailingSlash } from "@/lib/utils";
+
+interface RootProps {
+ children: ReactNode;
+}
+
+const Root = ({ children }: RootProps) => {
+ return
+ {
+ const hasLocalNetworkAccess =
+ await askForLocalNetworkAccess();
+
+ if (!hasLocalNetworkAccess) {
+ form.setError("url", {
+ message:
+ "Local network access is required to connect to local RivetKit. Please enable local network access in your browser settings and try again.",
+ });
+ return;
+ }
+
+ try {
+ const realUrl = await getInspectorClientEndpoint(
+ values.url,
+ );
+
+ await connect({ url: realUrl });
+ } catch {
+ form.setError("url", {
+ message: "localhost.cors.error",
+ });
+ }
+ }}
+ />
+
+ {children}
;
+};
+
+const Main = ({
+ children,
+ ref,
+}: RootProps & { ref?: RefObject
+
+
+
+
+
+
+
+
+
+
+
+ Whats new?
+
+
+
+
+
+ );
+};
+
+function HeaderButton({ children, className, ...props }: ButtonProps) {
+ return (
+
+ );
+}
+
+function HeaderLink({ icon, children, className, ...props }: HeaderLinkProps) {
+ return (
+
+
+ Instances
+
+
+
+
+ );
+ }
+
+ if (status === "disconnected") {
+ return (
+
+
+ Connecting
+{endpoint}
+
+ disconnect()}
+ >
+
+ );
+ }
+
+ if (status === "connected") {
+ return (
+
+
+
+
+
+ Disconnected
++ {endpoint} +
+
+ disconnect()}
+ >
+
+ );
+ }
+
+ return null;
+}
+
+export const Content = ({
+ className,
+ children,
+}: {
+ className?: string;
+ children: ReactNode;
+}) => {
+ const isInRootLayout = !!useRootLayoutOptional();
+ const { isSidebarCollapsed } = useRootLayoutOptional() || {};
+ return (
+
+
+
+ Connected
+{endpoint}
+
+ {children}
+
+ );
+};
diff --git a/frontend/apps/inspector/src/app/route-layout.tsx b/frontend/apps/inspector/src/app/route-layout.tsx
new file mode 100644
index 0000000000..46522bf767
--- /dev/null
+++ b/frontend/apps/inspector/src/app/route-layout.tsx
@@ -0,0 +1,64 @@
+import { Outlet } from "@tanstack/react-router";
+import { useRef, useState } from "react";
+import type { ImperativePanelHandle } from "react-resizable-panels";
+import { H2, Skeleton } from "@/components";
+import { RootLayoutContextProvider } from "@/components/actors/root-layout-context";
+import * as Layout from "./layout";
+
+export function RouteLayout({
+ children =
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{match(__APP_TYPE__)
- .with("inspector", () => (
- <>
-
-
-
- ))
.with("engine", () => (
<>
(
+ () => data?.tables?.[0]?.table.name,
+ );
+ const [page, setPage] = useState(0);
+
+ const selectedTable = table || data?.tables?.[0]?.table.name;
+
+ const {
+ data: rows,
+ refetch: refetchData,
+ isLoading,
+ } = useQuery({
+ ...actorInspector.actorDatabaseRowsQueryOptions(
+ actorId,
+ selectedTable ?? "",
+ page,
+ PAGE_SIZE,
+ ),
+ enabled: !!selectedTable,
+ });
+
+ const currentTable = data?.tables?.find(
+ (t) => t.table.name === selectedTable,
+ );
+
+ const totalRows = currentTable?.records ?? 0;
+ const totalPages = Math.max(1, Math.ceil(totalRows / PAGE_SIZE));
+ const hasNextPage = page < totalPages - 1;
+ const hasPrevPage = page > 0;
+
+ return (
+ <>
+ ;
executeAction: (name: string, args: unknown[]) => Promise;
@@ -72,6 +99,12 @@ interface ActorInspectorApi {
history: WorkflowHistory | null;
isEnabled: boolean;
}>;
+ getDatabaseSchema: () => Promise;
+ getDatabaseTableRows: (
+ table: string,
+ limit: number,
+ offset: number,
+ ) => Promise;
getMetadata: () => Promise<{ version: string }>;
}
@@ -84,6 +117,7 @@ type FeatureSupport = {
const MIN_RIVETKIT_VERSION_TRACES = "2.0.40";
const MIN_RIVETKIT_VERSION_QUEUE = "2.0.40";
+const MIN_RIVETKIT_VERSION_DATABASE = "2.0.42";
const INSPECTOR_ERROR_EVENTS_DROPPED = "inspector.events_dropped";
function parseSemver(version?: string) {
@@ -152,10 +186,7 @@ function getInspectorProtocolVersion(version: string | undefined) {
if (!parsed) {
return 2;
}
- if (isVersionAtLeast(version, MIN_RIVETKIT_VERSION_QUEUE)) {
- return 4;
- }
- if (isVersionAtLeast(version, MIN_RIVETKIT_VERSION_TRACES)) {
+ if (isVersionAtLeast(version, MIN_RIVETKIT_VERSION_DATABASE)) {
return 3;
}
if (parsed.major >= 2) {
@@ -214,37 +245,31 @@ export const createDefaultActorInspectorContext = ({
},
actorDatabaseQueryOptions(actorId: ActorId) {
- // TODO: implement
return queryOptions({
- staleTime: Infinity,
+ staleTime: 0,
queryKey: actorInspectorQueriesKeys.actorDatabase(actorId),
queryFn: () => {
- return { enabled: false, db: [] } as unknown as {
- enabled: boolean;
- db: {
- table: { name: string; type: string };
- records: number;
- }[];
- };
+ return api.getDatabaseSchema();
},
});
},
actorDatabaseEnabledQueryOptions(actorId: ActorId) {
- // TODO: implement
return queryOptions({
staleTime: Infinity,
- ...this.actorDatabaseQueryOptions(actorId),
- select: (data) => data.enabled,
+ queryKey: [
+ ...actorInspectorQueriesKeys.actorDatabase(actorId),
+ "enabled",
+ ],
+ queryFn: () => new Promise(() => {}),
});
},
actorDatabaseTablesQueryOptions(actorId: ActorId) {
- // TODO: implement
return queryOptions({
...this.actorDatabaseQueryOptions(actorId),
select: (data) =>
- data.db?.map((table) => ({
+ data.tables?.map((table) => ({
name: table.table.name,
type: table.table.type,
records: table.records,
@@ -253,16 +278,27 @@ export const createDefaultActorInspectorContext = ({
});
},
- actorDatabaseRowsQueryOptions(actorId: ActorId, table: string) {
- // TODO: implement
+ actorDatabaseRowsQueryOptions(
+ actorId: ActorId,
+ table: string,
+ page: number,
+ pageSize = 100,
+ ) {
return queryOptions({
- staleTime: Infinity,
+ staleTime: 0,
+ gcTime: 5000,
queryKey: [
...actorInspectorQueriesKeys.actorDatabase(actorId),
table,
+ page,
+ pageSize,
],
queryFn: () => {
- return [] as unknown as Record[];
+ return api.getDatabaseTableRows(
+ table,
+ pageSize,
+ page * pageSize,
+ );
},
});
},
@@ -730,6 +766,56 @@ export const ActorInspectorProvider = ({
return promise;
},
+ getDatabaseSchema: async () => {
+ const { id, promise } =
+ actionsManager.current.createResolver({
+ name: "getDatabaseSchema",
+ timeoutMs: 10_000,
+ });
+
+ sendMessage(
+ serverMessage(
+ {
+ body: {
+ tag: "DatabaseSchemaRequest",
+ val: { id: BigInt(id) },
+ },
+ },
+ inspectorProtocolVersion,
+ ),
+ );
+
+ return promise;
+ },
+
+ getDatabaseTableRows: async (table, limit, offset) => {
+ const { id, promise } = actionsManager.current.createResolver<
+ unknown[]
+ >({
+ name: "getDatabaseTableRows",
+ timeoutMs: 10_000,
+ });
+
+ sendMessage(
+ serverMessage(
+ {
+ body: {
+ tag: "DatabaseTableRowsRequest",
+ val: {
+ id: BigInt(id),
+ table,
+ limit: BigInt(limit),
+ offset: BigInt(offset),
+ },
+ },
+ },
+ inspectorProtocolVersion,
+ ),
+ );
+
+ return promise;
+ },
+
getMetadata() {
return getActorMetadataProxy.current();
},
@@ -811,6 +897,14 @@ const createMessageHandler =
body.val.isWorkflowEnabled,
);
+ queryClient.setQueryData(
+ [
+ ...actorInspectorQueriesKeys.actorDatabase(actorId),
+ "enabled",
+ ],
+ body.val.isDatabaseEnabled,
+ );
+
if (body.val.workflowHistory) {
queryClient.setQueryData(
actorInspectorQueriesKeys.actorWorkflowHistory(actorId),
@@ -904,6 +998,20 @@ const createMessageHandler =
isEnabled: body.val.isWorkflowEnabled,
});
})
+ .with({ tag: "DatabaseSchemaResponse" }, (body) => {
+ const { rid } = body.val;
+ actionsManager.current.resolve(
+ Number(rid),
+ cbor.decode(new Uint8Array(body.val.schema)),
+ );
+ })
+ .with({ tag: "DatabaseTableRowsResponse" }, (body) => {
+ const { rid } = body.val;
+ actionsManager.current.resolve(
+ Number(rid),
+ cbor.decode(new Uint8Array(body.val.result)),
+ );
+ })
.with({ tag: "Error" }, (body) => {
if (body.val.message === INSPECTOR_ERROR_EVENTS_DROPPED) {
return;
diff --git a/frontend/src/components/actors/actor-traces.tsx b/frontend/src/components/actors/actor-traces.tsx
index 3faa1492a3..98d5043333 100644
--- a/frontend/src/components/actors/actor-traces.tsx
+++ b/frontend/src/components/actors/actor-traces.tsx
@@ -21,7 +21,6 @@ import {
SelectTrigger,
SelectValue,
} from "../ui/select";
-import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group";
import { useActorInspector } from "./actor-inspector-context";
import { ActorObjectInspector } from "./console/actor-inspector";
import type { ActorId } from "./queries";
@@ -212,7 +211,7 @@ export function ActorTraces({ actorId }: { actorId: ActorId }) {
: "Select a time range"}
-
-
- );
- }
-
- if (status === "disconnected") {
- return (
-
-
- Connecting
-{endpoint}
-
- disconnect()}
- >
-
- );
- }
-
- if (status === "connected") {
- return (
-
-
-
-
-
- Disconnected
-- {endpoint} -
-
- disconnect()}
- >
-
- );
- }
-
- return null;
-}
function CloudSidebar(): ReactNode {
return (
diff --git a/frontend/src/components/actors/actor-database.tsx b/frontend/src/components/actors/actor-database.tsx
index 821b16aeda..3930336b34 100644
--- a/frontend/src/components/actors/actor-database.tsx
+++ b/frontend/src/components/actors/actor-database.tsx
@@ -1,9 +1,205 @@
+import { Button, Flex, ScrollArea, WithTooltip } from "@/components";
+import {
+ faChevronLeft,
+ faChevronRight,
+ faRefresh,
+ faTable,
+ faTableCells,
+ Icon,
+} from "@rivet-gg/icons";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { ShimmerLine } from "../shimmer-line";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "../ui/select";
+import { useActorInspector } from "./actor-inspector-context";
+import { DatabaseTable } from "./database/database-table";
import type { ActorId } from "./queries";
+const PAGE_SIZE = 100;
+
interface ActorDatabaseProps {
actorId: ActorId;
}
-export function ActorDatabase(_props: ActorDatabaseProps) {
- return null;
+export function ActorDatabase({ actorId }: ActorDatabaseProps) {
+ const actorInspector = useActorInspector();
+ const { data, refetch } = useQuery(
+ actorInspector.actorDatabaseQueryOptions(actorId),
+ );
+ const [table, setTable] = useState
-
-
- Connected
-{endpoint}
-
+
+
+ {
+ setTable(t);
+ setPage(0);
+ }}
+ value={selectedTable}
+ />
+
+
+
+
+
+
+ {
+ refetch();
+ refetchData();
+ }}
+ >
+
+
+ setPage((p) => p - 1)}
+ >
+ setPage((p) => p + 1)}
+ >
+
+
+ {isLoading ?
+ {currentTable ? (
+
+
+
+ );
+}
+
+function TableSelect({
+ actorId,
+ value,
+ onSelect,
+}: {
+ actorId: ActorId;
+ onSelect: (table: string) => void;
+ value: string | undefined;
+}) {
+ const actorInspector = useActorInspector();
+ const { data: tables } = useQuery(
+ actorInspector.actorDatabaseTablesQueryOptions(actorId),
+ );
+
+ return (
+
+ );
}
diff --git a/frontend/src/components/actors/actor-inspector-context.tsx b/frontend/src/components/actors/actor-inspector-context.tsx
index 012dc84eca..239bf5d682 100644
--- a/frontend/src/components/actors/actor-inspector-context.tsx
+++ b/frontend/src/components/actors/actor-inspector-context.tsx
@@ -17,7 +17,7 @@ import {
type ToServer,
TO_CLIENT_VERSIONED as toClient,
TO_SERVER_VERSIONED as toServer,
-} from "rivetkit/inspector";
+} from "rivetkit/inspector/client";
import { toast } from "sonner";
import { match } from "ts-pattern";
import z from "zod";
@@ -59,6 +59,33 @@ type QueueStatusSummary = {
}>;
};
+export type DatabaseColumn = {
+ cid: number;
+ name: string;
+ type: string;
+ notnull: boolean;
+ dflt_value: string | null;
+ pk: boolean | null;
+};
+
+export type DatabaseForeignKey = {
+ id: number;
+ table: string;
+ from: string;
+ to: string;
+};
+
+export type DatabaseTableInfo = {
+ table: { schema: string; name: string; type: string };
+ columns: DatabaseColumn[];
+ foreignKeys: DatabaseForeignKey[];
+ records: number;
+};
+
+export type DatabaseSchema = {
+ tables: DatabaseTableInfo[];
+};
+
interface ActorInspectorApi {
ping: () => Promise
-
-
-
-
-
-
-
-
- {/* biome-ignore lint/a11y/noStaticElementInteractions: Canvas for panning/zooming workflow visualization */}
-
{/* Bottom details panel */}
@@ -1890,23 +113,21 @@ export function WorkflowVisualizer({
style={{
backgroundColor:
TYPE_COLORS[
- selectedNode.type as MetaExtendedEntryType
- ].iconBg,
+ selectedNode.entryType as MetaExtendedEntryType
+ ]?.iconBg,
}}
>
- {/* Dot grid */}
-
-
- {/* Workflow */}
-
+
+
-
-
-
- {/* Zoom controls */}
-
-
-
-
-
-
-
-
- {/* Header */}
-
- {Math.round(transform.scale * 100)}%
-
-
-
-
- {/* Hover popover - rendered as HTML for proper z-index */}
- {hoveredNode && !detailedMode && (
-
-
-
-
-
-
-
-
- Workflow
-
-
- {workflow.workflowId.slice(0, 8)}... |{" "}
- {workflow.state}
-
-
-
- )}
-
-
-
-
- {hoveredNode.node.startedAt && (
-
- Key
-
-
- {hoveredNode.node.key}
-
-
-
- )}
- {hoveredNode.node.completedAt && (
-
- Started
-
-
- {new Date(
- hoveredNode.node.startedAt,
- ).toLocaleString()}
- .
- {String(
- hoveredNode.node.startedAt %
- 1000,
- ).padStart(3, "0")}
-
-
-
- )}
- {hoveredNode.node.error && (
-
- Completed
-
-
- {new Date(
- hoveredNode.node.completedAt,
- ).toLocaleString()}
- .
- {String(
- hoveredNode.node.completedAt %
- 1000,
- ).padStart(3, "0")}
-
-
-
- )}
- {hoveredNode.node.retryCount &&
- hoveredNode.node.retryCount > 0 && (
-
- Error
-
-
- {hoveredNode.node.error}
-
-
-
- )}
-
- Retries
-
-
- {hoveredNode.node.retryCount}{" "}
- attempt(s)
-
-
-
-
- Data
-
-
- {JSON.stringify(
- hoveredNode.node.data,
- null,
- 2,
- ).slice(0, 200)}
- {JSON.stringify(
- hoveredNode.node.data,
- null,
- 2,
- ).length > 200
- ? "..."
- : ""}
-
-
- {selectedNode.name}
+ {selectedNode.label}
- {selectedNode.type}
+ {selectedNode.entryType}
{selectedNode.status}
- {selectedNode.retryCount &&
+ {selectedNode.retryCount != null &&
selectedNode.retryCount > 0 && (
{selectedNode.retryCount} retry(s)
@@ -1960,12 +181,12 @@ export function WorkflowVisualizer({
Key
-
-
-
- );
-}
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
index f6aabeedf7..86d01374b3 100644
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -1,7 +1,7 @@
///
+ state: optional
+ isStateEnabled: bool
+ rpcs: list
+ isDatabaseEnabled: bool
+ queueSize: uint
+ workflowHistory: optional
+ isWorkflowEnabled: bool
+}
+
+type ConnectionsResponse struct {
+ rid: uint
+ connections: list
+}
+
+type StateResponse struct {
+ rid: uint
+ state: optional
+ isStateEnabled: bool
+}
+
+type ActionResponse struct {
+ rid: uint
+ output: data
+}
+
+type TraceQueryResponse struct {
+ rid: uint
+ payload: data
+}
+
+type QueueMessageSummary struct {
+ id: uint
+ name: str
+ createdAtMs: uint
+}
+
+type QueueStatus struct {
+ size: uint
+ maxSize: uint
+ messages: list
+ truncated: bool
+}
+
+type QueueResponse struct {
+ rid: uint
+ status: QueueStatus
+}
+
+type WorkflowHistoryResponse struct {
+ rid: uint
+ history: optional
+ isWorkflowEnabled: bool
+}
+
+# Database schema is CBOR-encoded with table metadata.
+type DatabaseSchemaResponse struct {
+ rid: uint
+ schema: data
+}
+
+# Database table rows result is CBOR-encoded rows.
+type DatabaseTableRowsResponse struct {
+ rid: uint
+ result: data
+}
+
+type StateUpdated struct {
+ state: State
+}
+
+type QueueUpdated struct {
+ queueSize: uint
+}
+
+type WorkflowHistoryUpdated struct {
+ history: WorkflowHistory
+}
+
+type RpcsListResponse struct {
+ rid: uint
+ rpcs: list
+}
+
+type ConnectionsUpdated struct {
+ connections: list
+}
+
+type Error struct {
+ message: str
+}
+
+type ToClientBody union {
+ StateResponse |
+ ConnectionsResponse |
+ ActionResponse |
+ ConnectionsUpdated |
+ QueueUpdated |
+ StateUpdated |
+ WorkflowHistoryUpdated |
+ RpcsListResponse |
+ TraceQueryResponse |
+ QueueResponse |
+ WorkflowHistoryResponse |
+ Error |
+ Init |
+ DatabaseSchemaResponse |
+ DatabaseTableRowsResponse
+}
+
+type ToClient struct {
+ body: ToClientBody
+}
diff --git a/rivetkit-typescript/packages/rivetkit/scripts/pack-inspector.ts b/rivetkit-typescript/packages/rivetkit/scripts/pack-inspector.ts
new file mode 100644
index 0000000000..488be3cfc0
--- /dev/null
+++ b/rivetkit-typescript/packages/rivetkit/scripts/pack-inspector.ts
@@ -0,0 +1,20 @@
+import { existsSync } from "node:fs";
+import { mkdir } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { create } from "tar";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const src = join(__dirname, "../../../../frontend/dist/inspector");
+const destDir = join(__dirname, "../dist");
+const destTar = join(destDir, "inspector.tar.gz");
+
+if (!existsSync(src)) {
+ throw new Error(
+ `Inspector frontend not built yet. Run 'pnpm turbo build:inspector --filter=@rivetkit/engine-frontend' first.`,
+ );
+}
+
+await mkdir(destDir, { recursive: true });
+await create({ gzip: true, file: destTar, cwd: src }, ["."]);
+console.log(`Packed inspector into ${destTar}`);
diff --git a/rivetkit-typescript/packages/rivetkit/src/actor/instance/mod.ts b/rivetkit-typescript/packages/rivetkit/src/actor/instance/mod.ts
index 053ef373e9..d1dac6d1ce 100644
--- a/rivetkit-typescript/packages/rivetkit/src/actor/instance/mod.ts
+++ b/rivetkit-typescript/packages/rivetkit/src/actor/instance/mod.ts
@@ -473,7 +473,7 @@ export class ActorInstance<
// Abort listeners
try {
this.#abortController.abort();
- } catch {}
+ } catch { }
// Wait for run handler to complete
await this.#waitForRunHandler(this.#config.options.runStopTimeout);
@@ -590,14 +590,14 @@ export class ActorInstance<
async processMessage(
message: {
body:
- | {
- tag: "ActionRequest";
- val: { id: bigint; name: string; args: unknown };
- }
- | {
- tag: "SubscriptionRequest";
- val: { eventName: string; subscribe: boolean };
- };
+ | {
+ tag: "ActionRequest";
+ val: { id: bigint; name: string; args: unknown };
+ }
+ | {
+ tag: "SubscriptionRequest";
+ val: { eventName: string; subscribe: boolean };
+ };
},
conn: Conn,
) {
@@ -668,6 +668,8 @@ export class ActorInstance<
throw new errors.ActionNotFound(actionName);
}
+ this.#activeKeepAwakeCount++;
+ this.resetSleepTimer();
const actionSpan = this.startTraceSpan(`actor.action.${actionName}`, {
"rivet.action.name": actionName,
});
@@ -688,9 +690,15 @@ export class ActorInstance<
);
let output: unknown;
- if (outputOrPromise instanceof Promise) {
+ const maybeThenable = outputOrPromise as {
+ then?: (
+ onfulfilled?: unknown,
+ onrejected?: unknown,
+ ) => unknown;
+ };
+ if (maybeThenable && typeof maybeThenable.then === "function") {
output = await deadline(
- outputOrPromise,
+ Promise.resolve(outputOrPromise),
this.#config.options.actionTimeout,
);
} else {
@@ -750,6 +758,15 @@ export class ActorInstance<
status: { code: "OK" },
});
}
+ this.#activeKeepAwakeCount--;
+ if (this.#activeKeepAwakeCount < 0) {
+ this.#activeKeepAwakeCount = 0;
+ this.#rLog.warn({
+ msg: "active keep awake count went below 0, this is a RivetKit bug",
+ ...EXTRA_ERROR_LOG,
+ });
+ }
+ this.resetSleepTimer();
this.stateManager.savePersistThrottled();
}
}
@@ -1364,25 +1381,23 @@ export class ActorInstance<
}
async #setupDatabase() {
- if ("db" in this.#config && this.#config.db) {
+ if (!("db" in this.#config) || !this.#config.db) {
+ return;
+ }
+
+ try {
const client = await this.#config.db.createClient({
actorId: this.#actorId,
overrideRawDatabaseClient: this.driver.overrideRawDatabaseClient
? () => this.driver.overrideRawDatabaseClient!(this.#actorId)
: undefined,
- overrideDrizzleDatabaseClient:
- this.driver.overrideDrizzleDatabaseClient
- ? () =>
- this.driver.overrideDrizzleDatabaseClient!(
- this.#actorId,
- )
- : undefined,
+ overrideDrizzleDatabaseClient: this.driver.overrideDrizzleDatabaseClient
+ ? () => this.driver.overrideDrizzleDatabaseClient!(this.#actorId)
+ : undefined,
kv: {
- batchPut: (entries) =>
- this.driver.kvBatchPut(this.#actorId, entries),
+ batchPut: (entries) => this.driver.kvBatchPut(this.#actorId, entries),
batchGet: (keys) => this.driver.kvBatchGet(this.#actorId, keys),
- batchDelete: (keys) =>
- this.driver.kvBatchDelete(this.#actorId, keys),
+ batchDelete: (keys) => this.driver.kvBatchDelete(this.#actorId, keys),
},
sqliteVfs: this.driver.sqliteVfs,
});
@@ -1390,6 +1405,21 @@ export class ActorInstance<
await this.#config.db.onMigrate?.(client);
this.#rLog.info({ msg: "database migration complete" });
this.#db = client;
+ } catch (error) {
+ if (error instanceof Error) {
+ this.#rLog.error({
+ msg: "database setup failed",
+ error: stringifyError(error),
+ });
+ throw error;
+ }
+ const wrappedError = new Error(`Database setup failed: ${String(error)}`);
+ this.#rLog.error({
+ msg: "database setup failed with non-Error object",
+ error: String(error),
+ errorType: typeof error,
+ });
+ throw wrappedError;
}
}
diff --git a/rivetkit-typescript/packages/rivetkit/src/client/mod.browser.ts b/rivetkit-typescript/packages/rivetkit/src/client/mod.browser.ts
new file mode 100644
index 0000000000..5a27f3f499
--- /dev/null
+++ b/rivetkit-typescript/packages/rivetkit/src/client/mod.browser.ts
@@ -0,0 +1,2 @@
+// Browser-safe client exports (all client functionality is browser-compatible)
+export * from "./mod";
diff --git a/rivetkit-typescript/packages/rivetkit/src/db/drizzle/mod.ts b/rivetkit-typescript/packages/rivetkit/src/db/drizzle/mod.ts
index a7875071f1..3829beb9c9 100644
--- a/rivetkit-typescript/packages/rivetkit/src/db/drizzle/mod.ts
+++ b/rivetkit-typescript/packages/rivetkit/src/db/drizzle/mod.ts
@@ -1,14 +1,10 @@
+import type { Database } from "@rivetkit/sqlite-vfs";
import {
- type BetterSQLite3Database,
- drizzle as sqliteDrizzle,
-} from "drizzle-orm/better-sqlite3";
-import {
- type SqliteRemoteDatabase,
drizzle as proxyDrizzle,
+ type SqliteRemoteDatabase,
} from "drizzle-orm/sqlite-proxy";
-import type { KvVfsOptions } from "../sqlite-vfs";
import type { DatabaseProvider, RawAccess } from "../config";
-import type { Database } from "@rivetkit/sqlite-vfs";
+import type { KvVfsOptions } from "../sqlite-vfs";
export * from "./sqlite-core";
@@ -59,30 +55,65 @@ function createActorKvStore(kv: {
};
}
+/**
+ * Mutex to serialize async operations on a wa-sqlite database handle.
+ * wa-sqlite is not safe for concurrent operations on the same handle.
+ */
+class DbMutex {
+ #locked = false;
+ #waiting: (() => void)[] = [];
+
+ async acquire(): Promise {
+ while (this.#locked) {
+ await new Promise((resolve) => this.#waiting.push(resolve));
+ }
+ this.#locked = true;
+ }
+
+ release(): void {
+ this.#locked = false;
+ const next = this.#waiting.shift();
+ if (next) {
+ next();
+ }
+ }
+
+ async run(fn: () => Promise): Promise {
+ await this.acquire();
+ try {
+ return await fn();
+ } finally {
+ this.release();
+ }
+ }
+}
+
/**
* Create a sqlite-proxy async callback from a wa-sqlite Database
*/
-function createProxyCallback(waDb: Database) {
+function createProxyCallback(waDb: Database, mutex: DbMutex) {
return async (
sql: string,
params: any[],
method: "run" | "all" | "values" | "get",
): Promise<{ rows: any }> => {
- if (method === "run") {
- await waDb.run(sql, params);
- return { rows: [] };
- }
+ return mutex.run(async () => {
+ if (method === "run") {
+ await waDb.run(sql, params);
+ return { rows: [] };
+ }
- // For all/get/values, use parameterized query
- const result = await waDb.query(sql, params);
+ // For all/get/values, use parameterized query
+ const result = await waDb.query(sql, params);
- // drizzle's mapResultRow accesses rows by column index (positional arrays)
- // so we return raw arrays for all methods
- if (method === "get") {
- return { rows: result.rows[0] };
- }
+ // drizzle's mapResultRow accesses rows by column index (positional arrays)
+ // so we return raw arrays for all methods
+ if (method === "get") {
+ return { rows: result.rows[0] };
+ }
- return { rows: result.rows };
+ return { rows: result.rows };
+ });
};
}
@@ -92,24 +123,29 @@ function createProxyCallback(waDb: Database) {
*/
async function runInlineMigrations(
waDb: Database,
+ mutex: DbMutex,
migrations: any,
): Promise {
// Create migrations table
- await waDb.exec(`
+ await mutex.run(() =>
+ waDb.exec(`
CREATE TABLE IF NOT EXISTS __drizzle_migrations (
id INTEGER PRIMARY KEY AUTOINCREMENT,
hash TEXT NOT NULL,
created_at INTEGER
)
- `);
+ `),
+ );
// Get the last applied migration
let lastCreatedAt = 0;
- await waDb.exec(
- "SELECT id, hash, created_at FROM __drizzle_migrations ORDER BY created_at DESC LIMIT 1",
- (row) => {
- lastCreatedAt = Number(row[2]) || 0;
- },
+ await mutex.run(() =>
+ waDb.exec(
+ "SELECT id, hash, created_at FROM __drizzle_migrations ORDER BY created_at DESC LIMIT 1",
+ (row) => {
+ lastCreatedAt = Number(row[2]) || 0;
+ },
+ ),
);
// Apply pending migrations from journal entries
@@ -126,11 +162,13 @@ async function runInlineMigrations(
if (!sql) continue;
// Execute migration SQL
- await waDb.exec(sql);
+ await mutex.run(() => waDb.exec(sql));
// Record migration
- await waDb.exec(
- `INSERT INTO __drizzle_migrations (hash, created_at) VALUES ('${entry.tag}', ${entry.when})`,
+ await mutex.run(() =>
+ waDb.exec(
+ `INSERT INTO __drizzle_migrations (hash, created_at) VALUES ('${entry.tag}', ${entry.when})`,
+ ),
);
}
}
@@ -142,6 +180,7 @@ export function db<
): DatabaseProvider & RawAccess> {
// Store the wa-sqlite Database instance alongside the drizzle client
let waDbInstance: Database | null = null;
+ const mutex = new DbMutex();
return {
createClient: async (ctx) => {
@@ -157,7 +196,7 @@ export function db<
waDbInstance = waDb;
// Create the async proxy callback
- const callback = createProxyCallback(waDb);
+ const callback = createProxyCallback(waDb, mutex);
// Create the drizzle instance using sqlite-proxy
const client = proxyDrizzle(callback, config);
@@ -169,30 +208,40 @@ export function db<
query: string,
...args: unknown[]
): Promise => {
- if (args.length > 0) {
- const { rows, columns } = await waDb.query(query, args);
- return rows.map((row: unknown[]) => {
- const rowObj: Record = {};
- for (let i = 0; i < row.length; i++) {
- rowObj[columns[i]] = row[i];
- }
- return rowObj;
- }) as TRow[];
- }
-
- const results: Record[] = [];
- let columnNames: string[] | null = null;
- await waDb.exec(query, (row: unknown[], columns: string[]) => {
- if (!columnNames) {
- columnNames = columns;
- }
- const rowObj: Record = {};
- for (let i = 0; i < row.length; i++) {
- rowObj[columnNames[i]] = row[i];
+ return mutex.run(async () => {
+ if (args.length > 0) {
+ const result = await waDb.query(query, args);
+ return result.rows.map((row: unknown[]) => {
+ const obj: Record = {};
+ for (
+ let i = 0;
+ i < result.columns.length;
+ i++
+ ) {
+ obj[result.columns[i]] = row[i];
+ }
+ return obj;
+ }) as TRow[];
}
- results.push(rowObj);
+ // Use exec for non-parameterized queries since
+ // wa-sqlite's query() can crash on some statements.
+ const results: Record[] = [];
+ let columnNames: string[] | null = null;
+ await waDb.exec(
+ query,
+ (row: unknown[], columns: string[]) => {
+ if (!columnNames) {
+ columnNames = columns;
+ }
+ const obj: Record = {};
+ for (let i = 0; i < row.length; i++) {
+ obj[columnNames[i]] = row[i];
+ }
+ results.push(obj);
+ },
+ );
+ return results as TRow[];
});
- return results as TRow[];
},
close: async () => {
await waDb.close();
@@ -202,7 +251,11 @@ export function db<
},
onMigrate: async (_client) => {
if (config?.migrations && waDbInstance) {
- await runInlineMigrations(waDbInstance, config.migrations);
+ await runInlineMigrations(
+ waDbInstance,
+ mutex,
+ config.migrations,
+ );
}
},
onDestroy: async (client) => {
diff --git a/rivetkit-typescript/packages/rivetkit/src/db/mod.ts b/rivetkit-typescript/packages/rivetkit/src/db/mod.ts
index 1cd28de725..f5a894802e 100644
--- a/rivetkit-typescript/packages/rivetkit/src/db/mod.ts
+++ b/rivetkit-typescript/packages/rivetkit/src/db/mod.ts
@@ -5,6 +5,31 @@ interface DatabaseFactoryConfig {
onMigrate?: (db: RawAccess) => Promise | void;
}
+/**
+ * Mutex to serialize async operations on a wa-sqlite database handle.
+ * wa-sqlite is not safe for concurrent operations on the same handle.
+ */
+class DbMutex {
+ #locked = false;
+ #waiting: (() => void)[] = [];
+
+ async run(fn: () => Promise): Promise {
+ while (this.#locked) {
+ await new Promise((resolve) => this.#waiting.push(resolve));
+ }
+ this.#locked = true;
+ try {
+ return await fn();
+ } finally {
+ this.#locked = false;
+ const next = this.#waiting.shift();
+ if (next) {
+ next();
+ }
+ }
+ }
+}
+
/**
* Create a KV store wrapper that uses the actor driver's KV operations
*/
@@ -36,6 +61,8 @@ function createActorKvStore(kv: {
export function db({
onMigrate,
}: DatabaseFactoryConfig = {}): DatabaseProvider {
+ const mutex = new DbMutex();
+
return {
createClient: async (ctx) => {
// Check if override is provided
@@ -71,37 +98,39 @@ export function db({
return {
execute: async <
TRow extends Record = Record,
- >(
- query: string,
- ...args: unknown[]
- ): Promise => {
- if (args.length > 0) {
- // Use parameterized query when args are provided
- const { rows, columns } = await db.query(query, args);
- return rows.map((row: unknown[]) => {
- const rowObj: Record = {};
- for (let i = 0; i < row.length; i++) {
- rowObj[columns[i]] = row[i];
+ >(
+ query: string,
+ ...args: unknown[]
+ ): Promise => {
+ return mutex.run(async () => {
+ if (args.length > 0) {
+ // Use parameterized query when args are provided
+ const { rows, columns } = await db.query(query, args);
+ return rows.map((row: unknown[]) => {
+ const rowObj: Record = {};
+ for (let i = 0; i < row.length; i++) {
+ rowObj[columns[i]] = row[i];
+ }
+ return rowObj;
+ }) as TRow[];
}
- return rowObj;
- }) as TRow[];
- }
- // Use exec for non-parameterized queries
- const results: Record[] = [];
- let columnNames: string[] | null = null;
- await db.exec(query, (row: unknown[], columns: string[]) => {
- if (!columnNames) {
- columnNames = columns;
- }
- const rowObj: Record = {};
- for (let i = 0; i < row.length; i++) {
- rowObj[columnNames[i]] = row[i];
- }
- results.push(rowObj);
- });
- return results as TRow[];
- },
+ // Use exec for non-parameterized queries
+ const results: Record[] = [];
+ let columnNames: string[] | null = null;
+ await db.exec(query, (row: unknown[], columns: string[]) => {
+ if (!columnNames) {
+ columnNames = columns;
+ }
+ const rowObj: Record = {};
+ for (let i = 0; i < row.length; i++) {
+ rowObj[columnNames[i]] = row[i];
+ }
+ results.push(rowObj);
+ });
+ return results as TRow[];
+ });
+ },
close: async () => {
await db.close();
},
diff --git a/rivetkit-typescript/packages/rivetkit/src/inspector/actor-inspector.ts b/rivetkit-typescript/packages/rivetkit/src/inspector/actor-inspector.ts
index cd5b05bccd..701229c093 100644
--- a/rivetkit-typescript/packages/rivetkit/src/inspector/actor-inspector.ts
+++ b/rivetkit-typescript/packages/rivetkit/src/inspector/actor-inspector.ts
@@ -103,6 +103,73 @@ export class ActorInspector {
}
}
+ async getDatabaseSchema(): Promise {
+ if (!this.isDatabaseEnabled()) {
+ throw new actorErrors.DatabaseNotEnabled();
+ }
+
+ const db = this.actor.db;
+
+ // Get table list from sqlite_master, excluding internal tables.
+ const tables = await db.execute(
+ "SELECT name, type FROM sqlite_master WHERE type IN ('table', 'view') AND name NOT LIKE 'sqlite_%' AND name NOT LIKE '__drizzle_%'",
+ ) as { name: string; type: string }[];
+
+ // Serialize all queries to avoid concurrent wa-sqlite access
+ // which can cause "file is not a database" errors.
+ const tableInfos = [];
+ for (const table of tables) {
+ const quoted = `"${escapeDoubleQuotes(table.name)}"`;
+ const sample = await db.execute(
+ `SELECT * FROM ${quoted} LIMIT 1`,
+ ) as Record[];
+ const countResult = await db.execute(
+ `SELECT COUNT(*) as count FROM ${quoted}`,
+ ) as { count: number }[];
+
+ const columnNames = sample?.[0]
+ ? Object.keys(sample[0])
+ : [];
+
+ tableInfos.push({
+ table: { schema: "main", name: table.name, type: table.type },
+ columns: columnNames.map((name, cid) => ({
+ cid,
+ name,
+ type: "",
+ notnull: 0,
+ dflt_value: null,
+ pk: 0,
+ })),
+ foreignKeys: [],
+ records: countResult?.[0]?.count ?? 0,
+ });
+ }
+
+ return bufferToArrayBuffer(cbor.encode({ tables: tableInfos }));
+ }
+
+ async getDatabaseTableRows(
+ table: string,
+ limit: number,
+ offset: number,
+ ): Promise {
+ if (!this.isDatabaseEnabled()) {
+ throw new actorErrors.DatabaseNotEnabled();
+ }
+
+ const db = this.actor.db;
+ const safeLimit = Math.max(0, Math.min(Math.floor(limit), 500));
+ const safeOffset = Math.max(0, Math.floor(offset));
+ const quoted = `"${escapeDoubleQuotes(table)}"`;
+ const result = await db.execute(
+ `SELECT * FROM ${quoted} LIMIT ? OFFSET ?`,
+ safeLimit,
+ safeOffset,
+ );
+ return bufferToArrayBuffer(cbor.encode(result));
+ }
+
isStateEnabled() {
return this.actor.stateEnabled;
}
@@ -278,3 +345,8 @@ export class ActorInspector {
}));
}
}
+
+function escapeDoubleQuotes(value: string): string {
+ return value.replace(/"/g, '""');
+}
+
diff --git a/rivetkit-typescript/packages/rivetkit/src/inspector/handler.ts b/rivetkit-typescript/packages/rivetkit/src/inspector/handler.ts
index ca10f33933..e62ea714e7 100644
--- a/rivetkit-typescript/packages/rivetkit/src/inspector/handler.ts
+++ b/rivetkit-typescript/packages/rivetkit/src/inspector/handler.ts
@@ -176,6 +176,58 @@ export async function handleWebSocketInspectorConnect({
},
},
});
+ } else if (message.body.tag === "DatabaseSchemaRequest") {
+ const { id } = message.body.val;
+ try {
+ const schema = await inspector.getDatabaseSchema();
+ sendMessage(ws, {
+ body: {
+ tag: "DatabaseSchemaResponse",
+ val: { rid: id, schema },
+ },
+ });
+ } catch (error) {
+ inspectorLogger().warn(
+ { error },
+ "Failed to get database schema",
+ );
+ sendMessage(ws, {
+ body: {
+ tag: "Error",
+ val: {
+ message: `Failed to get database schema: ${error instanceof Error ? error.message : String(error)}`,
+ },
+ },
+ });
+ }
+ } else if (message.body.tag === "DatabaseTableRowsRequest") {
+ const { id, table, limit, offset } = message.body.val;
+ try {
+ const result = await inspector.getDatabaseTableRows(
+ table,
+ Number(limit),
+ Number(offset),
+ );
+ sendMessage(ws, {
+ body: {
+ tag: "DatabaseTableRowsResponse",
+ val: { rid: id, result },
+ },
+ });
+ } catch (error) {
+ inspectorLogger().warn(
+ { error },
+ "Failed to get database table rows",
+ );
+ sendMessage(ws, {
+ body: {
+ tag: "Error",
+ val: {
+ message: `Failed to get database rows: ${error instanceof Error ? error.message : String(error)}`,
+ },
+ },
+ });
+ }
} else {
assertUnreachable(message.body);
}
diff --git a/rivetkit-typescript/packages/rivetkit/src/inspector/mod.browser.ts b/rivetkit-typescript/packages/rivetkit/src/inspector/mod.browser.ts
new file mode 100644
index 0000000000..c18bcb704c
--- /dev/null
+++ b/rivetkit-typescript/packages/rivetkit/src/inspector/mod.browser.ts
@@ -0,0 +1,8 @@
+// Browser-safe inspector exports (schemas and types only, no server runtime)
+export * from "../schemas/actor-inspector/mod";
+export * from "../schemas/actor-inspector/versioned";
+export type { WorkflowHistory as TransportWorkflowHistory } from "../schemas/transport/mod";
+export {
+ decodeWorkflowHistoryTransport,
+ encodeWorkflowHistoryTransport,
+} from "./transport";
diff --git a/rivetkit-typescript/packages/rivetkit/src/inspector/serve-ui.ts b/rivetkit-typescript/packages/rivetkit/src/inspector/serve-ui.ts
new file mode 100644
index 0000000000..58e35e6ec5
--- /dev/null
+++ b/rivetkit-typescript/packages/rivetkit/src/inspector/serve-ui.ts
@@ -0,0 +1,40 @@
+
+import { extract } from "tar";
+import { getNodeFs, getNodeOs, getNodePath, getNodeUrl } from "@/utils/node";
+
+let extractedDir: string | undefined;
+let extractionPromise: Promise | undefined;
+
+export async function getInspectorDir(): Promise {
+ if (extractedDir !== undefined) return extractedDir;
+ if (extractionPromise !== undefined) return extractionPromise;
+
+ const nodeFs = getNodeFs();
+ const os = getNodeOs();
+ const url = getNodeUrl();
+ const path = getNodePath();
+
+ extractionPromise = (async () => {
+ const tarball = path.join(
+ path.dirname(url.fileURLToPath(import.meta.url)),
+ "../../dist/inspector.tar.gz",
+ );
+
+ try {
+ await nodeFs.access(tarball);
+ } catch {
+ throw new Error(
+ `Inspector tarball not found at ${tarball}. Run 'pnpm build:pack-inspector' first.`,
+ );
+ }
+
+ const dest = path.join(os.tmpdir(), "rivetkit-inspector");
+ await nodeFs.mkdir(dest, { recursive: true });
+ await extract({ file: tarball, cwd: dest });
+
+ extractedDir = dest;
+ return dest;
+ })();
+
+ return extractionPromise;
+}
diff --git a/rivetkit-typescript/packages/rivetkit/src/inspector/utils.ts b/rivetkit-typescript/packages/rivetkit/src/inspector/utils.ts
index 61d46802ea..1b78fcd453 100644
--- a/rivetkit-typescript/packages/rivetkit/src/inspector/utils.ts
+++ b/rivetkit-typescript/packages/rivetkit/src/inspector/utils.ts
@@ -26,17 +26,7 @@ export function getInspectorUrl(
): string | undefined {
if (!config.inspector.enabled) return undefined;
- const url = new URL("https://inspect.rivet.dev");
-
- // Only override endpoint if using non-default port or custom endpoint is set
- const endpoint =
- config.inspector.defaultEndpoint ??
- (config.managerPort !== 6420
- ? `http://127.0.0.1:${managerPort}`
- : undefined);
- if (endpoint) {
- url.searchParams.set("u", endpoint);
- }
-
- return url.href;
+ const base =
+ config.inspector.defaultEndpoint ?? `http://127.0.0.1:${managerPort}`;
+ return new URL("/ui/", base).href;
}
diff --git a/rivetkit-typescript/packages/rivetkit/src/manager/router.ts b/rivetkit-typescript/packages/rivetkit/src/manager/router.ts
index 0310f9f26d..887bf1ff7c 100644
--- a/rivetkit-typescript/packages/rivetkit/src/manager/router.ts
+++ b/rivetkit-typescript/packages/rivetkit/src/manager/router.ts
@@ -1,13 +1,11 @@
+import { serveStatic } from "@hono/node-server/serve-static";
import { createRoute } from "@hono/zod-openapi";
import * as cbor from "cbor-x";
-
import type { Hono } from "hono";
import invariant from "invariant";
import { z } from "zod/v4";
import { Forbidden, RestrictedFeature } from "@/actor/errors";
-
import { deserializeActorKey, serializeActorKey } from "@/actor/keys";
-
import type { Encoding } from "@/client/mod";
import {
HEADER_RIVET_TOKEN,
@@ -23,6 +21,7 @@ import type {
TestInlineDriverCallRequest,
TestInlineDriverCallResponse,
} from "@/driver-test-suite/test-inline-client-driver";
+import { getInspectorDir } from "@/inspector/serve-ui";
import {
ActorsCreateRequestSchema,
type ActorsCreateResponse,
@@ -95,9 +94,9 @@ export function buildManagerRouter(
const actorIdsParsed = actor_ids
? actor_ids
- .split(",")
- .map((id) => id.trim())
- .filter((id) => id.length > 0)
+ .split(",")
+ .map((id) => id.trim())
+ .filter((id) => id.length > 0)
: undefined;
const actors: ActorOutput[] = [];
@@ -587,6 +586,33 @@ export function buildManagerRouter(
});
}
+ if (config.inspector.enabled) {
+ let inspectorRoot: string | undefined;
+
+
+ router.get("/ui/*", async (c, next) => {
+ if (!inspectorRoot) {
+ inspectorRoot = await getInspectorDir();
+ }
+ const root = inspectorRoot;
+ const rewrite = (path: string) =>
+ path.replace(/^\/ui/, "") || "/";
+
+ return serveStatic({
+ root,
+ rewriteRequestPath: rewrite,
+ onNotFound: async (_path, c) => {
+ await serveStatic({ root, path: "index.html" })(
+ c,
+ next,
+ );
+ },
+ })(c, next);
+ });
+
+ router.get("/ui", (c) => c.redirect("/ui/"));
+ }
+
router.get("/health", (c) => handleHealthRequest(c));
router.get("/metadata", (c) =>
diff --git a/rivetkit-typescript/packages/rivetkit/src/schemas/actor-inspector/mod.ts b/rivetkit-typescript/packages/rivetkit/src/schemas/actor-inspector/mod.ts
index 87a57d3b2c..8341c0c4a1 100644
--- a/rivetkit-typescript/packages/rivetkit/src/schemas/actor-inspector/mod.ts
+++ b/rivetkit-typescript/packages/rivetkit/src/schemas/actor-inspector/mod.ts
@@ -1 +1 @@
-export * from "../../../dist/schemas/actor-inspector/v2";
+export * from "../../../dist/schemas/actor-inspector/v3";
diff --git a/rivetkit-typescript/packages/rivetkit/src/schemas/actor-inspector/versioned.ts b/rivetkit-typescript/packages/rivetkit/src/schemas/actor-inspector/versioned.ts
index 73379b94f0..75e46d63c5 100644
--- a/rivetkit-typescript/packages/rivetkit/src/schemas/actor-inspector/versioned.ts
+++ b/rivetkit-typescript/packages/rivetkit/src/schemas/actor-inspector/versioned.ts
@@ -2,13 +2,15 @@ import { createVersionedDataHandler } from "vbare";
import * as v1 from "../../../dist/schemas/actor-inspector/v1";
import * as v2 from "../../../dist/schemas/actor-inspector/v2";
+import * as v3 from "../../../dist/schemas/actor-inspector/v3";
-export const CURRENT_VERSION = 2;
+export const CURRENT_VERSION = 3;
const EVENTS_DROPPED_ERROR = "inspector.events_dropped";
const WORKFLOW_HISTORY_DROPPED_ERROR = "inspector.workflow_history_dropped";
const QUEUE_DROPPED_ERROR = "inspector.queue_dropped";
const TRACE_DROPPED_ERROR = "inspector.trace_dropped";
+const DATABASE_DROPPED_ERROR = "inspector.database_dropped";
// Converter from v1 to v2: Drop events in Init and add new fields
const v1ToClientToV2 = (v1Data: v1.ToClient): v2.ToClient => {
@@ -110,6 +112,29 @@ const v2ToClientToV1 = (v2Data: v2.ToClient): v1.ToClient => {
return v2Data as unknown as v1.ToClient;
};
+// Converter from v2 to v3: v2 messages are a subset of v3
+const v2ToClientToV3 = (v2Data: v2.ToClient): v3.ToClient => {
+ return v2Data as unknown as v3.ToClient;
+};
+
+// Converter from v3 to v2: Drop database responses
+const v3ToClientToV2 = (v3Data: v3.ToClient): v2.ToClient => {
+ if (
+ v3Data.body.tag === "DatabaseSchemaResponse" ||
+ v3Data.body.tag === "DatabaseTableRowsResponse"
+ ) {
+ return {
+ body: {
+ tag: "Error",
+ val: {
+ message: DATABASE_DROPPED_ERROR,
+ },
+ },
+ };
+ }
+ return v3Data as unknown as v2.ToClient;
+};
+
// Converter from v1 to v2: Drop events requests
const v1ToServerToV2 = (v1Data: v1.ToServer): v2.ToServer => {
if (
@@ -133,13 +158,31 @@ const v2ToServerToV1 = (v2Data: v2.ToServer): v1.ToServer => {
return v2Data as unknown as v1.ToServer;
};
-export const TO_SERVER_VERSIONED = createVersionedDataHandler({
+// Converter from v2 to v3: v2 messages are a subset of v3
+const v2ToServerToV3 = (v2Data: v2.ToServer): v3.ToServer => {
+ return v2Data as unknown as v3.ToServer;
+};
+
+// Converter from v3 to v2: Drop database requests
+const v3ToServerToV2 = (v3Data: v3.ToServer): v2.ToServer => {
+ if (
+ v3Data.body.tag === "DatabaseSchemaRequest" ||
+ v3Data.body.tag === "DatabaseTableRowsRequest"
+ ) {
+ throw new Error("Cannot convert v3-only database requests to v2");
+ }
+ return v3Data as unknown as v2.ToServer;
+};
+
+export const TO_SERVER_VERSIONED = createVersionedDataHandler({
serializeVersion: (data, version) => {
switch (version) {
case 1:
return v1.encodeToServer(data as v1.ToServer);
case 2:
return v2.encodeToServer(data as v2.ToServer);
+ case 3:
+ return v3.encodeToServer(data as v3.ToServer);
default:
throw new Error(`Unknown version ${version}`);
}
@@ -150,21 +193,25 @@ export const TO_SERVER_VERSIONED = createVersionedDataHandler({
return v1.decodeToServer(bytes);
case 2:
return v2.decodeToServer(bytes);
+ case 3:
+ return v3.decodeToServer(bytes);
default:
throw new Error(`Unknown version ${version}`);
}
},
- deserializeConverters: () => [v1ToServerToV2],
- serializeConverters: () => [v2ToServerToV1],
+ deserializeConverters: () => [v1ToServerToV2, v2ToServerToV3],
+ serializeConverters: () => [v3ToServerToV2, v2ToServerToV1],
});
-export const TO_CLIENT_VERSIONED = createVersionedDataHandler({
+export const TO_CLIENT_VERSIONED = createVersionedDataHandler({
serializeVersion: (data, version) => {
switch (version) {
case 1:
return v1.encodeToClient(data as v1.ToClient);
case 2:
return v2.encodeToClient(data as v2.ToClient);
+ case 3:
+ return v3.encodeToClient(data as v3.ToClient);
default:
throw new Error(`Unknown version ${version}`);
}
@@ -175,10 +222,12 @@ export const TO_CLIENT_VERSIONED = createVersionedDataHandler({
return v1.decodeToClient(bytes);
case 2:
return v2.decodeToClient(bytes);
+ case 3:
+ return v3.decodeToClient(bytes);
default:
throw new Error(`Unknown version ${version}`);
}
},
- deserializeConverters: () => [v1ToClientToV2],
- serializeConverters: () => [v2ToClientToV1],
+ deserializeConverters: () => [v1ToClientToV2, v2ToClientToV3],
+ serializeConverters: () => [v3ToClientToV2, v2ToClientToV1],
});
diff --git a/rivetkit-typescript/packages/rivetkit/src/utils/node.ts b/rivetkit-typescript/packages/rivetkit/src/utils/node.ts
index c60f2514d5..6ed67246bb 100644
--- a/rivetkit-typescript/packages/rivetkit/src/utils/node.ts
+++ b/rivetkit-typescript/packages/rivetkit/src/utils/node.ts
@@ -16,6 +16,7 @@ let nodePath: typeof import("node:path") | undefined;
let nodeOs: typeof import("node:os") | undefined;
let nodeChildProcess: typeof import("node:child_process") | undefined;
let nodeStream: typeof import("node:stream/promises") | undefined;
+let nodeUrl: typeof import("node:url") | undefined;
let hasImportedDependencies = false;
@@ -62,7 +63,7 @@ export function importNodeDependencies(): void {
nodeStream = requireFn(
/* webpackIgnore: true */ "node:stream/promises",
);
-
+ nodeUrl = requireFn(/* webpackIgnore: true */ "node:url");
hasImportedDependencies = true;
} catch (err) {
console.warn(
@@ -163,3 +164,15 @@ export function getNodeStream(): typeof import("node:stream/promises") {
}
return nodeStream;
}
+
+/**
+ * Gets the Node.js url module lazily.
+ */
+export function getNodeUrl(): typeof import("node:url") {
+ if (!nodeUrl) {
+ throw new Error(
+ "Node url module not loaded. Ensure importNodeDependencies() has been called.",
+ );
+ }
+ return nodeUrl;
+}
\ No newline at end of file
diff --git a/rivetkit-typescript/packages/rivetkit/tsup.browser.config.ts b/rivetkit-typescript/packages/rivetkit/tsup.browser.config.ts
new file mode 100644
index 0000000000..d1496c78e6
--- /dev/null
+++ b/rivetkit-typescript/packages/rivetkit/tsup.browser.config.ts
@@ -0,0 +1,49 @@
+///
- Data
+ {selectedNode.rawData && (
+
+ )}
{selectedNode.error && (
+
-
+ Data
+
+ ++
---
diff --git a/frontend/src/components/actors/workflow/xyflow-nodes.stories.tsx b/frontend/src/components/actors/workflow/xyflow-nodes.stories.tsx
new file mode 100644
index 0000000000..f849efc1b9
--- /dev/null
+++ b/frontend/src/components/actors/workflow/xyflow-nodes.stories.tsx
@@ -0,0 +1,434 @@
+import type { Story } from "@ladle/react";
+import {
+ Background,
+ BackgroundVariant,
+ Controls,
+ type Edge,
+ MiniMap,
+ type Node,
+ ReactFlow,
+ ReactFlowProvider,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import "../../../../.ladle/ladle.css";
+import {
+ failedWorkflow,
+ inProgressWorkflow,
+ joinWorkflow,
+ loopWorkflow,
+ raceWorkflow,
+ retryWorkflow,
+ sampleWorkflowHistory,
+ simpleLinearWorkflow,
+} from "./workflow-example-data";
+import { workflowHistoryToXYFlow } from "./workflow-to-xyflow";
+import {
+ NODE_HEIGHT,
+ NODE_WIDTH,
+ TYPE_COLORS,
+ type WorkflowNodeData,
+ workflowNodeTypes,
+} from "./xyflow-nodes";
+
+// Wrapper that applies dark theme and renders a minimal ReactFlow canvas.
+function StoryCanvas({ nodes, edges = [] }: { nodes: Node[]; edges?: Edge[] }) {
+ return (
+ [] {
+ return [
+ {
+ id: "1",
+ type: "workflow",
+ position: { x: 0, y: 0 },
+ measured: { width: NODE_WIDTH, height: NODE_HEIGHT },
+ data,
+ },
+ ];
+}
+
+// ─── Individual Node Types ───────────────────────────────────
+
+export const StepCompleted: Story = () => (
+ [] = types.map((t, i) => ({
+ id: t.id,
+ type: "workflow" as const,
+ position: {
+ x: Math.floor(i / colSize) * colGap,
+ y: (i % colSize) * gap,
+ },
+ measured: { width: NODE_WIDTH, height: NODE_HEIGHT },
+ data: t.data,
+ }));
+
+ return ;
+
+export const NODE_WIDTH = 200;
+export const NODE_HEIGHT = 52;
+export const LOOP_HEADER_HEIGHT = 40;
+export const LOOP_PADDING_X = 16;
+export const LOOP_PADDING_BOTTOM = 16;
+
+export function WorkflowNode({ data, selected }: NodeProps) {
+ const colors = TYPE_COLORS[data.entryType];
+ const isFailed = data.status === "failed";
+ const [hovered, setHovered] = useState(false);
+
+ return (
+ ;
+
+export function LoopGroupNode({ data }: NodeProps) {
+ const colors = TYPE_COLORS.loop;
+
+ return (
+ ;
+
+export function BranchGroupNode({ data }: NodeProps) {
+ const colors = TYPE_COLORS[data.entryType];
+ const isFailed =
+ data.branchStatus === "failed" || data.branchStatus === "cancelled";
+ const isCompleted = data.branchStatus === "completed";
+
+ const accentColor = isFailed
+ ? "#ef4444"
+ : isCompleted
+ ? "#22c55e"
+ : colors.icon;
+ const borderColor = `${accentColor}66`;
+ const bgColor = `${accentColor}08`;
+
+ return (
+ ;
+
+export function TerminationNode(_props: NodeProps) {
+ return (
+ ),
) => EngineContext;
- getOrCreateInspectorContext: (opts: {
- url?: string;
- token?: string;
- }) => InspectorContext;
getOrCreateOrganizationContext: (
parent: CloudContext,
organization: string,
diff --git a/frontend/src/routes/_context.tsx b/frontend/src/routes/_context.tsx
index 7c01c00a40..a636579099 100644
--- a/frontend/src/routes/_context.tsx
+++ b/frontend/src/routes/_context.tsx
@@ -1,6 +1,5 @@
import {
createFileRoute,
- isRedirect,
Outlet,
redirect,
useNavigate,
@@ -8,7 +7,6 @@ import {
import { zodValidator } from "@tanstack/zod-adapter";
import { match } from "ts-pattern";
import z from "zod";
-import { getInspectorClientEndpoint } from "@/app/data-providers/inspector-data-provider";
import { getConfig, ls, useDialog } from "@/components";
import { ModalRenderer } from "@/components/modal-renderer";
import { waitForClerk } from "@/lib/waitForClerk";
@@ -29,8 +27,6 @@ const searchSchema = z
actorId: z.string().optional(),
tab: z.string().optional(),
n: z.array(z.string()).optional(),
- u: z.string().optional(),
- t: z.string().optional(),
// clerk related
__clerk_ticket: z.string().optional(),
__clerk_status: z.string().optional(),
@@ -40,7 +36,7 @@ const searchSchema = z
export const Route = createFileRoute("/_context")({
component: RouteComponent,
validateSearch: zodValidator(searchSchema),
- context: ({ location: { search }, context }) => {
+ context: ({ context }) => {
return match(__APP_TYPE__)
.with("engine", () => ({
dataProvider: context.getOrCreateEngineContext(
@@ -52,16 +48,6 @@ export const Route = createFileRoute("/_context")({
dataProvider: context.getOrCreateCloudContext(context.clerk),
__type: "cloud" as const,
}))
- .with("inspector", () => {
- const typedSearch = search as z.infer;
- return {
- dataProvider: context.getOrCreateInspectorContext({
- url: typedSearch.u || "http://localhost:6420",
- token: typedSearch.t,
- }),
- __type: "inspector" as const,
- };
- })
.exhaustive();
},
beforeLoad: async (route) => {
@@ -89,32 +75,8 @@ export const Route = createFileRoute("/_context")({
});
}
})
- .with({ __type: "inspector" }, () => async () => {
- if (route.search.u) {
- try {
- const realUrl = await getInspectorClientEndpoint(
- route.search.u,
- );
- if (realUrl !== route.search.u) {
- throw redirect({
- to: route.location.pathname,
- search: {
- ...route.search,
- u: realUrl,
- },
- });
- }
- } catch (e) {
- if (isRedirect(e)) {
- throw e;
- }
- // ignore errors here
- }
- }
- })
.otherwise(() => () => {})();
},
- loaderDeps: (route) => ({ token: route.search.t, url: route.search.u }),
});
function RouteComponent() {
diff --git a/frontend/src/routes/_context/index.tsx b/frontend/src/routes/_context/index.tsx
index e80b3bfb31..f604aa96f6 100644
--- a/frontend/src/routes/_context/index.tsx
+++ b/frontend/src/routes/_context/index.tsx
@@ -1,8 +1,6 @@
import { createFileRoute, isRedirect, redirect } from "@tanstack/react-router";
import { match } from "ts-pattern";
import CreateNamespacesFrameContent from "@/app/dialogs/create-namespace-frame";
-import { InspectorContextProvider } from "@/app/inspector-context";
-import { InspectorRoot } from "@/app/inspector-root";
import { Logo } from "@/app/logo";
import { Card } from "@/components";
import { redirectToOrganization } from "@/lib/auth";
@@ -12,7 +10,6 @@ export const Route = createFileRoute("/_context/")({
match(__APP_TYPE__)
.with("cloud", () =>
);
}
-
-function InspectorRoute() {
- return (
-
+
+
+ {
+ const entryType = node.data?.entryType as
+ | string
+ | undefined;
+ if (
+ typeof entryType === "string" &&
+ entryType in TYPE_COLORS
+ ) {
+ return TYPE_COLORS[
+ entryType as keyof typeof TYPE_COLORS
+ ].icon;
+ }
+ return "#3b82f6";
+ }}
+ nodeStrokeColor="transparent"
+ maskColor="hsl(20 14.3% 4.1% / 0.7)"
+ />
+
+
+
+ );
+}
+
+// Helper to create a single centered node.
+function singleNode(
+ data: WorkflowNodeData,
+): Node setHovered(true)}
+ onPointerLeave={() => setHovered(false)}
+ >
+ {/* Card */}
+
+ );
+}
+
+export interface LoopGroupNodeData {
+ [key: string]: unknown;
+ label: string;
+ summary: string;
+}
+
+export type LoopGroupNodeType = Node
+
+
+
+ {/* Retry count badge */}
+ {data.retryCount != null && data.retryCount > 0 && (
+
+
+
+
+ {data.label}
+
+
+ {data.duration !== undefined && (
+
+ Duration: {formatDuration(data.duration)}
+
+ )}
+ {data.retryCount != null && data.retryCount > 0 && (
+
+ Retries: {data.retryCount}
+
+ )}
+ {data.error && (
+
+ Error: {data.error}
+
+ )}
+
+
+ x{data.retryCount}
+
+
+ )}
+
+ {/* Icon box */}
+
+
+
+ {/* Text */}
+
+
+
+ {/* Duration */}
+ {data.duration !== undefined &&
+ !data.retryCount &&
+ data.status !== "running" &&
+ data.status !== "retrying" && (
+
+ {formatDuration(data.duration)}
+
+ )}
+
+ {/* Running spinner */}
+ {(data.status === "running" || data.status === "retrying") && (
+
+ {data.label.length > 18
+ ? `${data.label.slice(0, 18)}...`
+ : data.label}
+
+
+ {data.summary}
+
+
+
+ )}
+
+ {/* Failed icon */}
+ {isFailed && (
+
+
+ )}
+
+ {/* Header */}
+
+ );
+}
+
+export interface BranchGroupNodeData {
+ [key: string]: unknown;
+ label: string;
+ entryType: "join" | "race";
+ branchStatus: "pending" | "running" | "completed" | "failed" | "cancelled";
+}
+
+export type BranchGroupNodeType = Node
+
+
+
+
+
+ {data.label}
+
+
+ {data.summary}
+
+
+ {/* Header */}
+
+ );
+}
+
+// ─── Termination node (X) for failed/cancelled branches ──────
+
+export const TERMINATION_NODE_SIZE = 28;
+
+export interface TerminationNodeData {
+ [key: string]: unknown;
+}
+
+export type TerminationNodeType = Node
+
+
+
+
+
+ {data.label}
+
+
+
+ );
+}
+
+export const workflowNodeTypes = {
+ workflow: WorkflowNode,
+ loopGroup: LoopGroupNode,
+ branchGroup: BranchGroupNode,
+ termination: TerminationNode,
+};
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 1822e622ca..4385dbf813 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -64,6 +64,38 @@
}
}
+/* Dark theme overrides for xyflow (React Flow). */
+.react-flow__controls {
+ background: hsl(var(--card));
+ border: 1px solid hsl(var(--border));
+ border-radius: 6px;
+ box-shadow: none;
+}
+
+.react-flow__controls-button {
+ background: transparent;
+ border-bottom: 1px solid hsl(var(--border));
+ fill: hsl(var(--foreground));
+}
+
+.react-flow__controls-button:hover {
+ background: hsl(var(--accent));
+}
+
+.react-flow__controls-button:last-child {
+ border-bottom: none;
+}
+
+.react-flow__minimap {
+ background: hsl(var(--card)) !important;
+ border: 1px solid hsl(var(--border));
+ border-radius: 6px;
+}
+
+.react-flow__edge-path {
+ stroke: hsl(var(--muted-foreground));
+}
+
:root {
/* biome-ignore lint/correctness/noUnknownFunction: tailwind functions */
--shiki-color-text: theme("colors.white");
diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
index bcd96a4a37..bea7d11387 100644
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -14,7 +14,6 @@ import type {
CloudNamespaceContext,
EngineContext,
EngineNamespaceContext,
- InspectorContext,
OrganizationContext,
ProjectContext,
} from "@/app/data-providers/cache";
@@ -82,10 +81,6 @@ interface RootRouteContext {
getOrCreateEngineContext: (
engineToken: (() => string) | string | (() => Promise