durable-actors-observer 0.7.2 → 0.7.3

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`, `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.
+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, drawer, 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.
 
@@ -34,7 +34,9 @@ The localhost-only `durable-actors dev` runtime allows observability requests wi
 
 ## 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.
+`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. Calls to the same operation on the same actor instance share one row, with separate rows for method calls and WebSocket events. Each invocation has its own marker on a shared relative time axis, making interleaved methods visible together. Rows show call counts and summed durations; hover or select a marker to inspect identifiers, outcomes, queue wait, and the gap or overlap with preceding calls on that instance. Switch to Table for the tabular view. Live updates, pause, history filters, and loading older requests apply to both views.
+
+Request details open in a right-side [shadcn Drawer](https://ui.shadcn.com/docs/components/radix/drawer), powered by Vaul. Dismiss with the close button, Escape, an outside click, or a swipe to the right; focus returns to the selected invocation. The portal stays within the observer's theme scope, and long details scroll below the header.
 
 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.
 

package/dist/components/ui/drawer.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+declare function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element;
+declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): React.JSX.Element;
+declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): React.JSX.Element;
+declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): React.JSX.Element;
+declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): React.JSX.Element;
+declare function DrawerContent({ className, children, container, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content> & {
+    container?: HTMLElement | null;
+}): React.JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): React.JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): React.JSX.Element;
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription };

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export { Badge, badgeVariants } from "./components/ui/badge.js";
 export { Button, buttonVariants } from "./components/ui/button.js";
 export { Calendar, CalendarDayButton } from "./components/ui/calendar.js";
 export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from "./components/ui/command.js";
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription } from "./components/ui/drawer.js";
 export { Input } from "./components/ui/input.js";
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverHeader, PopoverTitle, PopoverDescription } from "./components/ui/popover.js";
 export { Sheet, SheetContent, SheetTitle, SheetDescription } from "./components/ui/sheet.js";