@caido/sdk-frontend 0.56.1 → 0.56.3-beta.0

package/src/types/types/replay.d.ts

@@ -1,5 +1,28 @@
-import { type ButtonSlotContent, type CommandSlotContent, type CustomSlotContent } from "./slots";
+import { type ButtonSlotContent, type CommandSlotContent, type CustomSlotContent, type SlotContentProps, type SlotContentPropsGroup } from "./slots";
 import { type ID, type Selection } from "./utils";
+/**
+ * The connection information to use for the request.
+ * @category Replay
+ */
+type ConnectionInfo = {
+    /**
+     * The host to use for the request.
+     */
+    host: string;
+    /**
+     * The port to use for the request.
+     */
+    port: number;
+    /**
+     * Whether the request is TLS.
+     */
+    isTLS: boolean;
+    /**
+     * The SNI to use for the request.
+     * If not provided, the SNI will be inferred from the host.
+     */
+    SNI?: string;
+};
 /**
  * The slots in the Replay UI.
  * @category Replay
@@ -19,10 +42,12 @@ export declare const ReplaySlot: {
     readonly Topbar: "topbar";
 };
 export type ReplaySlot = (typeof ReplaySlot)[keyof typeof ReplaySlot];
-export type ReplaySlotContent = {
-    [ReplaySlot.SessionToolbarPrimary]: ButtonSlotContent | CustomSlotContent | CommandSlotContent;
-    [ReplaySlot.SessionToolbarSecondary]: ButtonSlotContent | CustomSlotContent | CommandSlotContent;
-    [ReplaySlot.Topbar]: ButtonSlotContent | CustomSlotContent | CommandSlotContent;
+/**
+ * Content that can be added to replay slots.
+ * @category Replay
+ */
+export type ReplaySlotContent<TProps extends SlotContentPropsGroup = SlotContentProps> = {
+    [K in ReplaySlot]: ButtonSlotContent | CustomSlotContent<TProps> | CommandSlotContent;
 };
 /**
  * Options for opening a tab.
@@ -108,49 +133,6 @@ export type ReplayCollection = {
  * @category Replay
  */
 export type SendRequestOptions = {
-    /**
-     * The connection information to use for the request.
-     */
-    connectionInfo: {
-        /**
-         * The host to use for the request.
-         */
-        host: string;
-        /**
-         * The port to use for the request.
-         */
-        port: number;
-        /**
-         * Whether the request is TLS.
-         */
-        isTLS: boolean;
-        /**
-         * The SNI to use for the request.
-         * If not provided, the SNI will be inferred from the host.
-         */
-        SNI?: string;
-    };
-    /**
-     * The raw request to send.
-     */
-    raw: string;
-    /**
-     * Whether to update the content length automatically to match the body.
-     * Defaults to true.
-     */
-    updateContentLength?: boolean;
-    /**
-     * Whether to force close the connection by setting Connection: close header.
-     * Defaults to true.
-     */
-    connectionClose?: boolean;
-    /**
-     * Whether to overwrite the editor's draft content.
-     * If true, draft content will be overwritten with the new request.
-     * If false, the draft will be kept.
-     * Defaults to true.
-     */
-    overwriteDraft?: boolean;
     /**
      * Whether to send the request in the background without updating the UI.
      * If true, the request will not update the UI.
@@ -183,7 +165,7 @@ export type SendRequestOptions = {
 export type RequestSource = {
     type: "Raw";
     raw: string;
-    connectionInfo: SendRequestOptions["connectionInfo"];
+    connectionInfo: ConnectionInfo;
 } | {
     type: "ID";
     id: string;

package/src/types/types/request.d.ts

@@ -1,3 +1,5 @@
+import { type EditorView } from "@codemirror/view";
+import { type API } from "../sdks";
 import { type As, type ComponentDefinition, type ID, type Prettify } from "./utils";
 /**
  * A draft request that has not yet been saved to the database.
@@ -38,11 +40,47 @@ export type RequestFull = Prettify<As<"RequestFull"> & {
     streamId: ID | undefined;
     raw: string;
 }>;
+/**
+ * The internal props for the request read-only view mode.
+ * @category Request
+ */
+export type RequestReadableViewModePropsInternal = {
+    request: RequestFull;
+    view: EditorView;
+};
+/**
+ * The internal props for the request writable view mode.
+ * @category Request
+ */
+export type RequestWritableViewModePropsInternal = {
+    request: RequestFull | undefined;
+    draft: RequestDraft;
+    view: EditorView;
+};
+/**
+ * The props for the request writable view mode.
+ * @category Request
+ */
+export type RequestWritableViewModeProps = RequestWritableViewModePropsInternal & {
+    sdk: API;
+};
+/**
+ * The props for the request read-only view mode.
+ * @category Request
+ */
+export type RequestReadableViewModeProps = RequestReadableViewModePropsInternal & {
+    sdk: API;
+};
+/**
+ * The props group for the request view mode.
+ * @category Request
+ */
+export type RequestViewModeProps = RequestReadableViewModeProps | RequestWritableViewModeProps | RequestReadableViewModePropsInternal | RequestWritableViewModePropsInternal;
 /**
  * Options for defining a custom request view mode.
  * @category Request
  */
-export type RequestViewModeOptions = {
+export type RequestViewModeOptions<TProps extends RequestViewModeProps> = {
     /**
      * The label of the view mode.
      */
@@ -50,7 +88,7 @@ export type RequestViewModeOptions = {
     /**
      * The component to render when the view mode is selected.
      */
-    view: ComponentDefinition;
+    view: ComponentDefinition<TProps>;
     /**
      * A function that determines if the view mode should be shown for a given request.
      */

package/src/types/types/response.d.ts

@@ -1,3 +1,5 @@
+import { type EditorView } from "@codemirror/view";
+import { type API } from "../sdks";
 import type { RequestFull, RequestMeta } from "./request";
 import type { As, ComponentDefinition, ID, Prettify } from "./utils";
 /**
@@ -12,11 +14,26 @@ export type ResponseFull = Prettify<As<"ResponseFull"> & {
     length: number;
     createdAt: Date;
 }>;
+/**
+ * The internal props for the response view mode.
+ * @category Response
+ */
+export type ResponseViewModePropsInternal = {
+    response: ResponseFull;
+    view: EditorView;
+};
+/**
+ * The props for the response view mode.
+ * @category Response
+ */
+export type ResponseViewModeProps = ResponseViewModePropsInternal & {
+    sdk: API;
+};
 /**
  * Options for defining a custom response view mode.
  * @category Response
  */
-export type ResponseViewModeOptions = {
+export type ResponseViewModeOptions<TProps extends ResponseViewModeProps | ResponseViewModePropsInternal> = {
     /**
      * The label of the view mode.
      */
@@ -24,7 +41,7 @@ export type ResponseViewModeOptions = {
     /**
      * The component to render when the view mode is selected.
      */
-    view: ComponentDefinition;
+    view: ComponentDefinition<TProps>;
     /**
      * A function that determines if the view mode should be shown for a given response.
      */

package/src/types/types/scopes.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonSlotContent, type CommandSlotContent, type CustomSlotContent } from "./slots";
+import { type ButtonSlotContent, type CommandSlotContent, type CustomSlotContent, type SlotContentProps, type SlotContentPropsGroup } from "./slots";
 import { type ID, type Selection } from "./utils";
 /**
  * Represents a scope.
@@ -37,9 +37,12 @@ export declare const ScopeSlot: {
     readonly CreateHeader: "create-header";
 };
 export type ScopeSlot = (typeof ScopeSlot)[keyof typeof ScopeSlot];
-export type ScopeSlotContent = {
-    [ScopeSlot.UpdateHeader]: ButtonSlotContent | CustomSlotContent | CommandSlotContent;
-    [ScopeSlot.CreateHeader]: ButtonSlotContent | CustomSlotContent | CommandSlotContent;
+/**
+ * Content that can be added to scope slots.
+ * @category Scopes
+ */
+export type ScopeSlotContent<TProps extends SlotContentPropsGroup = SlotContentProps> = {
+    [K in ScopeSlot]: ButtonSlotContent | CustomSlotContent<TProps> | CommandSlotContent;
 };
 /**
  * Event fired when the current scope changes.

package/src/types/types/search.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonSlotContent, type CommandSlotContent, type CustomSlotContent } from "./slots";
+import { type ButtonSlotContent, type CommandSlotContent, type CustomSlotContent, type SlotContentProps, type SlotContentPropsGroup } from "./slots";
 /**
  * The slots in the Search UI.
  * @category Search
@@ -10,8 +10,12 @@ export declare const SearchSlot: {
     readonly ToolbarPrimary: "search-toolbar-primary";
 };
 export type SearchSlot = (typeof SearchSlot)[keyof typeof SearchSlot];
-export type SearchSlotContent = {
-    [SearchSlot.ToolbarPrimary]: ButtonSlotContent | CustomSlotContent | CommandSlotContent;
+/**
+ * Content that can be added to search slots.
+ * @category Search
+ */
+export type SearchSlotContent<TProps extends SlotContentPropsGroup = SlotContentProps> = {
+    [K in SearchSlot]: ButtonSlotContent | CustomSlotContent<TProps> | CommandSlotContent;
 };
 /**
  * Search page context.

package/src/types/types/slots.d.ts

@@ -1,8 +1,26 @@
+import { type API } from "../sdks";
 import { type CommandID } from "./commands";
 import { type ComponentDefinition, type Prettify } from "./utils";
 type DefineSlotContent<TType extends string, P extends Record<string, unknown>> = Prettify<{
     type: TType;
 } & P>;
+/**
+ * The internal props for a slot content.
+ * @category Slots
+ */
+export type SlotContentPropsInternal = {};
+/**
+ * The props for a slot content.
+ * @category Slots
+ */
+export type SlotContentProps = SlotContentPropsInternal & {
+    sdk: API;
+};
+/**
+ * The props group for a slot content.
+ * @category Slots
+ */
+export type SlotContentPropsGroup = SlotContentProps | SlotContentPropsInternal;
 /**
  * Content for a button slot.
  * @category Slots
@@ -16,8 +34,8 @@ export type ButtonSlotContent = DefineSlotContent<"Button", {
  * Content for a custom component slot.
  * @category Slots
  */
-export type CustomSlotContent = DefineSlotContent<"Custom", {
-    definition: ComponentDefinition;
+export type CustomSlotContent<TProps extends SlotContentPropsGroup = SlotContentProps> = DefineSlotContent<"Custom", {
+    definition: ComponentDefinition<TProps>;
 }>;
 /**
  * Content for a command slot.
@@ -31,7 +49,7 @@ export type CommandSlotContent = DefineSlotContent<"Command", {
  * Union type of all possible slot content types.
  * @category Slots
  */
-export type SlotContent = ButtonSlotContent | CustomSlotContent | CommandSlotContent;
+export type SlotContent<TProps extends SlotContentPropsGroup = SlotContentProps> = ButtonSlotContent | CustomSlotContent<TProps> | CommandSlotContent;
 /**
  * A function type for adding content to slots.
  * @category Slots

package/src/types/types/utils.d.ts

@@ -1,4 +1,5 @@
 import { type Component as VueComponent } from "vue";
+import { type API } from "../index";
 /**
  * A unique Caido identifier per type.
  * @category Utils
@@ -14,6 +15,21 @@ export type ID = string & {
 export type HTTPQL = string & {
     __httpql?: never;
 };
+/**
+ * A STREAMQL expression.
+ * @example `ws.raw.cont:"hello"`
+ * @category Utils
+ */
+export type StreamQL = string & {
+    __streamql?: never;
+};
+/**
+ * A query input.
+ * @example `"req.method.eq:'POST'"`
+ * @example `"ws.raw.cont:'hello'"`
+ * @category Utils
+ */
+export type QueryInput = HTTPQL | StreamQL;
 /**
  * A {@link https://fontawesome.com/icons|FontAwesome} icon class.
  * @example "fas fa-rocket"
@@ -22,13 +38,25 @@ export type HTTPQL = string & {
 export type Icon = string & {
     __icon?: never;
 };
+/**
+ * A set of properties that can be passed to a component.
+ * @category Utils
+ */
+export type ComponentProps = Record<string, unknown>;
+/**
+ * A set of properties that can be passed to a component definition with the SDK.
+ * @category Utils
+ */
+export type ComponentPropsWithSdk<TProps extends ComponentProps> = TProps & {
+    sdk: API;
+};
 /**
  * A custom component that will be rendered in the UI.
  * @category Utils
  */
-export type ComponentDefinition = {
-    component: VueComponent;
-    props?: Record<string, unknown>;
+export type ComponentDefinition<TProps = ComponentProps> = {
+    component: VueComponent<TProps>;
+    props?: ComponentProps;
     events?: Record<string, (...args: unknown[]) => void>;
 };
 /**

package/src/types/types/websocket.d.ts

@@ -1,3 +1,5 @@
+import { type EditorView } from "@codemirror/view";
+import type { As, ComponentDefinition, ComponentPropsWithSdk, ID, Prettify } from "./utils";
 /**
  * Certificate page context.
  * @category Websockets
@@ -5,3 +7,49 @@
 export type WebsocketPageContext = {
     kind: "Websocket";
 };
+/**
+ * A complete message with all metadata and raw content.
+ * @category Websockets
+ */
+export type StreamWsMessageMeta = Prettify<As<"StreamWsMessageMeta"> & {
+    id: ID;
+    streamId: ID;
+    head: {
+        id: ID;
+        length: number;
+        direction: "CLIENT" | "SERVER";
+        format: "BINARY" | "CLOSE" | "PING" | "PONG" | "TEXT";
+        createdAt: Date;
+    };
+}>;
+/**
+ * The internal props for the message view mode.
+ * @category Websockets
+ */
+export type MessageViewModePropsInternal = {
+    message: StreamWsMessageMeta;
+    view: EditorView;
+};
+/**
+ * The props for the message view mode.
+ * @category Websockets
+ */
+export type MessageViewModeProps = ComponentPropsWithSdk<MessageViewModePropsInternal>;
+/**
+ * Options for defining a custom message view mode.
+ * @category Websockets
+ */
+export type MessageViewModeOptions<TProps extends MessageViewModeProps | MessageViewModePropsInternal> = {
+    /**
+     * The label of the view mode.
+     */
+    label: string;
+    /**
+     * The component to render when the view mode is selected.
+     */
+    view: ComponentDefinition<TProps>;
+    /**
+     * A function that determines if the view mode should be shown for a given message.
+     */
+    when?: (message: StreamWsMessageMeta) => boolean;
+};

package/src/types/types/window.d.ts

@@ -15,6 +15,7 @@ import type { ReplayPageContext } from "./replay";
 import type { ScopePageContext } from "./scopes";
 import type { SearchPageContext } from "./search";
 import type { SitemapPageContext } from "./sitemap";
+import type { ComponentDefinition, ComponentProps, ComponentPropsWithSdk } from "./utils";
 import { type WebsocketPageContext } from "./websocket";
 import type { WorkflowsPageContext } from "./workflows";
 /**
@@ -29,6 +30,11 @@ export type DialogOptions = {
     modal?: boolean;
     position?: "left" | "right" | "top" | "bottom" | "center" | "topleft" | "topright" | "bottomleft" | "bottomright";
 };
+/**
+ * The component definition for a dialog.
+ * @category Window
+ */
+export type DialogComponent = ComponentDefinition<ComponentPropsWithSdk<ComponentProps>>;
 /**
  * A dialog instance that can be closed programmatically.
  * @category Window