@caido-utils/frontend

Composables and utilities for Caido plugin frontends.

Installation

pnpm add @caido-utils/frontend

Peer dependencies: vue, primevue, @caido/sdk-frontend, @codemirror/view

import { useFrontend, useReplay, getRequestId } from "@caido-utils/frontend";

For Vue components, see @caido-utils/components.

Composables

useFrontend

Caido editor utilities.

const {
  getEditorContent,
  setEditorContent,
  getSelectedText,
  getReplayRequestId,
} = useFrontend(sdk);

Returns

| Method | Signature | Description | | -------------------- | ---------------------------------------------------- | ------------------------------------------ | | getEditorView | (showErrors?: boolean) => EditorView \| undefined | Get active CodeMirror editor view | | getEditorContent | () => string \| undefined | Get active editor text content | | getSelectedText | () => string \| undefined | Get selected text in editor | | setEditorContent | (content: string, showErrors?: boolean) => boolean | Replace editor content | | getReplayRequestId | () => string \| undefined | Get request ID from current replay session |

useEditor

CodeMirror editor management (SDK-independent).

const { updateEditor, clearEditor, scrollToPosition } = useEditor(
  () => editorViewRef.value,
);

Returns

| Method | Signature | Description | | ------------------ | ----------------------------------------- | -------------------------------------------- | | updateEditor | (content: string) => Promise<void> | Replace editor content (skips if unchanged) | | clearEditor | () => void | Clear editor content | | scrollToPosition | (line: number, column?: number) => void | Scroll to line (1-based) and optional column |

useReplay

Send requests to Caido's Replay tab.

const { sendToReplay, sendRequestToReplay } = useReplay(sdk, "My Collection");

Returns

| Method | Signature | Description | | --------------------- | --------------------------------------------------------- | ------------------------------- | | sendToReplay | (url: string, collectionName?: string) => Promise<void> | Create replay session from URL | | sendRequestToReplay | (requestId: string, options?) => Promise<void> | Send existing request to replay |

sendRequestToReplay options:

| Option | Type | Description | | ---------------- | -------- | --------------------------- | | collectionName | string | Override default collection | | sessionName | string | Custom session name |

useStorage

Reactive plugin storage with auto-persistence.

// Inside a Pinia defineStore:
const { data, save } = useStorage(sdk, {
  filter: "",
  pageSize: 100,
});

// data.filter is Ref<string>, data.pageSize is Ref<number>
data.filter.value = "req.host.cont:example.com";
await save();

Returns

| Property | Type | Description | | -------- | ------------------------------- | ----------------------------- | | data | { [K in keyof T]: Ref<T[K]> } | Reactive refs for each key | | save | () => Promise<void> | Persist all values to storage |

Automatically hydrates from existing storage on setup and listens for external changes.

useDialogManager

Generic dialog state manager.

type DialogType = "create" | "edit" | "delete";
const { openDialog, closeDialog, isDialogOpen, getDialogData } =
  useDialogManager<DialogType>();

openDialog("edit", { id: "123" });
isDialogOpen("edit"); // true
getDialogData<{ id: string }>(); // { id: "123" }
closeDialog();

Returns

| Method | Signature | Description | | --------------- | ----------------------------------- | ----------------------------------- | | activeDialog | Ref<{ type, data } \| undefined> | Current dialog state | | openDialog | (type: T, data?: unknown) => void | Open a dialog with optional payload | | closeDialog | () => void | Close active dialog | | isDialogOpen | (type: T) => boolean | Check if specific dialog is open | | getDialogData | <D>() => D \| undefined | Get typed payload of active dialog |

Utilities

getRequestId

Extract a single request ID from a Caido command context.

import { getRequestId } from "@caido-utils/frontend";

sdk.commands.register("my:command", {
  name: "My Command",
  run: (context) => {
    const requestId = getRequestId(context);
  },
});

Supported context types: RequestContext, RequestRowContext (first item), ResponseContext.

getRequestIds

Extract all request IDs from a command context (supports multi-row selection).

import { getRequestIds } from "@caido-utils/frontend";

const ids = getRequestIds(context); // string[]