durable-actors-observer 0.6.1 → 0.7.1

package/README.md

@@ -22,7 +22,7 @@ export function Observability() {
 
 Import `styles.css` once. The optional `theme.css` supplies light and dark theme tokens; omit it when the host supplies those tokens. Apply the `dark` class to an ancestor for dark mode.
 
-The package exports `ActorObserver`, `RequestObserver`, `Overview`, `WebSocketObserver`, `ConsoleApp`, `SocketTimeline`, `TimeRangePicker`, and `FilterCombobox`, along with their named props types. It also exports the shared badge, button, calendar, command, input, popover, sheet, and table components from the package root. Use React's `ComponentProps<typeof Button>` (and equivalent) for primitive props.
+The package exports `ActorObserver`, `RequestObserver`, `Overview`, `WebSocketObserver`, `ConsoleApp`, `RequestTimeline`, `SocketTimeline`, `TimeRangePicker`, and `FilterCombobox`, along with their named props types. It also exports the shared badge, button, calendar, command, input, popover, sheet, and table components from the package root. Use React's `ComponentProps<typeof Button>` (and equivalent) for primitive props.
 
 Pass your own `ObserverClient` to connect these views to a hosted backend, or configure `HttpObserverClient` with your API prefix and fetch implementation. React remains a peer dependency. `ConsoleApp` provides the complete navigation shell and requires a `toggleTheme` callback; individual views can be placed inside your own navigation.
 
@@ -32,6 +32,12 @@ The observer version follows the SDK and runtime version. Run `pnpm release:prep
 
 The localhost-only `durable-actors dev` runtime allows observability requests without a secret, even when a secret is configured for application routes. Hosted runtimes retain their configured admin authentication.
 
+## Invocation waterfall
+
+`RequestObserver` opens with a waterfall of retained method calls and WebSocket events, including inside an actor instance. Instance inspection combines identity, residency, and queue metrics in a compact header; Requests, State, and WebSockets views preserve inspection controls when switching. Each row shares a relative time axis and shows total duration, queue wait, and the gap or overlap with preceding calls on that instance. Select a row to inspect identifiers, outcomes, and exact timings; switch to Table for the tabular view. Live updates, pause, history filters, and loading older requests apply to both views.
+
+Durations include queue wait, actor processing, and persistence. Gaps are calculated only from the calls loaded in the current view; filtered or unretained calls are not included. The waterfall uses request traces, so internal helper calls within one invocation are not separate spans. Embed `RequestTimeline` directly with `records` and an `onSelect(record, trigger)` callback when providing your own request controls.
+
 ## Persisted actor state
 
 Select an actor instance in `ActorObserver` to inspect persisted fields, JSON types, nested values, and version diffs. Request and connection links filter the existing request history. The standard `HttpObserverClient` and `durable-actors observe` include this capability; custom clients implement `getState` and `listStateHistory` to enable it.

package/dist/RequestTimeline.d.ts

@@ -0,0 +1,7 @@
+import type { RequestTrace } from "./client.js";
+export interface RequestTimelineProps {
+    records: RequestTrace[];
+    selected?: RequestTrace;
+    onSelect: (record: RequestTrace, trigger: HTMLButtonElement) => void;
+}
+export declare function RequestTimeline({ records, selected, onSelect }: RequestTimelineProps): import("react").JSX.Element;

package/dist/index.d.ts

@@ -8,6 +8,8 @@ export { Overview } from "./Overview.js";
 export type { OverviewProps } from "./Overview.js";
 export { RequestObserver } from "./RequestObserver.js";
 export type { RequestObserverProps } from "./RequestObserver.js";
+export { RequestTimeline } from "./RequestTimeline.js";
+export type { RequestTimelineProps } from "./RequestTimeline.js";
 export { SocketTimeline } from "./SocketTimeline.js";
 export type { SocketTimelineProps } from "./SocketTimeline.js";
 export { TimeRangePicker } from "./TimeRangePicker.js";