-
-
-
-```
-
-```ts
-import type { Caido } from "@caido/sdk-frontend";
-import FormView from "./FormView.vue";
-
-export type CaidoSDK = Caido;
-
-export const init = (sdk: CaidoSDK) => {
- sdk.commands.register("show-form", {
- name: "Show Form",
- run: () => {
- sdk.commandPalette.pushView({
- type: "Custom",
- definition: {
- component: FormView,
- },
- });
- },
- });
-
- sdk.commandPalette.register("show-form");
-};
-```
diff --git a/src/guides/dialogs.md b/src/guides/dialogs.md
index aa1d04f..a368c89 100644
--- a/src/guides/dialogs.md
+++ b/src/guides/dialogs.md
@@ -53,43 +53,34 @@ dialog.close();
### Confirmation Dialog
-This example creates a reusable confirmation dialog function that displays a message and returns a promise resolving to `true` if confirmed or `false` if cancelled. It's used in a page with a delete button.
+This example creates a reusable confirmation dialog function that displays a message and returns a promise resolving to `true` if confirmed or `false` if cancelled.
```ts
-import type { Caido } from "@caido/sdk-frontend";
-
-export type CaidoSDK = Caido;
+import Button from "primevue/button";
const showConfirmationDialog = (sdk: CaidoSDK, message: string): Promise
-
+::: info
+For information on creating pages and setting up Vue components, see [Create a Page](/guides/page.md).
:::
## The Result
diff --git a/src/guides/fetch.md b/src/guides/fetch.md
index 3d084a9..26f157c 100644
--- a/src/guides/fetch.md
+++ b/src/guides/fetch.md
@@ -182,54 +182,33 @@ Fetch Response:
:::
-::: tip
-To view how the endpoint can be called with a frontend plugin, expand the following:
-
-Example
+To subscribe to backend events in a Vue component: -``` ts -import type { Caido } from "@caido/sdk-frontend"; -import type { BackendAPI, BackendEvents } from "../../backend/src"; +```vue + + + +
+
+
```
--
+
- + {{ result }} + +
-;
-
-const createPage = (sdk: CaidoSDK) => {
-
- const resultText = document.createElement("p");
- resultText.textContent = "Result will appear here.";
-
- const calculateButton = sdk.ui.button({
- variant: "primary",
- label: "Fetch",
- });
-
- calculateButton.addEventListener("click", async () => {
- const result = await sdk.backend.callApi();
- resultText.textContent = `Result: ${JSON.stringify(result, null, 2)}`;
- });
-
- const container = document.createElement("div");
- container.appendChild(calculateButton);
- container.appendChild(resultText);
-
- const card = sdk.ui.card({
- body: container
- });
-
- sdk.navigation.addPage("/fetch-page", {
- body: card
- });
-}
-
-export function init(sdk: CaidoSDK) {
- createPage(sdk);
-
- sdk.sidebar.registerItem("Fetch", "/fetch-page", {
- icon: "fas fa-paper-plane"
- });
-}
+### Calling the Endpoint from Frontend
+
+To call the endpoint from a Vue component, use the backend SDK:
+
+```vue
+
+
+
+
+::: info
+For information on creating pages and setting up Vue components, see [Create a Page](/guides/page.md).
:::
diff --git a/src/guides/filters.md b/src/guides/filters.md
index 6c29a00..c3d0b85 100644
--- a/src/guides/filters.md
+++ b/src/guides/filters.md
@@ -20,6 +20,10 @@ const filter = await sdk.filters.create({
- `alias` - A short identifier used in HTTPQL queries (e.g., `preset:my-filter`)
- `query` - The HTTPQL query expression
+::: tip
+Use saved filters to create reusable query presets that can be referenced with the `preset:` prefix in HTTPQL queries.
+:::
+
### Getting All Filters
To retrieve all saved filters:
@@ -107,205 +111,106 @@ Common HTTPQL query patterns:
## Examples
-### Filter Management Plugin
+### Dynamic Query Building
-This example creates a complete filter management interface that displays all saved filters, allows creating new filters, applying filters to HTTP History, and deleting existing filters. Each filter shows its name, alias, and query.
+This example creates a query builder interface with input fields for status code, HTTP method, and path. It dynamically constructs HTTPQL queries from the input values and applies them to HTTP History.
```ts
+import { Classic } from "@caido/primevue";
+import PrimeVue from "primevue/config";
+import { createApp } from "vue";
+
import type { Caido } from "@caido/sdk-frontend";
+import App from "./views/QueryBuilder.vue";
+
export type CaidoSDK = Caido;
-const createPage = (sdk: CaidoSDK) => {
- const container = document.createElement("div");
- container.style.padding = "20px";
- container.style.display = "flex";
- container.style.flexDirection = "column";
- container.style.gap = "16px";
-
- // Filter list
- const filterList = document.createElement("div");
- filterList.id = "filter-list";
-
- const refreshFilterList = async () => {
- filterList.innerHTML = "";
- const filters = await sdk.filters.getAll();
-
- if (filters.length === 0) {
- filterList.textContent = "No filters found";
- return;
- }
-
- filters.forEach((filter) => {
- const filterItem = document.createElement("div");
- filterItem.style.padding = "8px";
- filterItem.style.border = "1px solid #ccc";
- filterItem.style.marginBottom = "8px";
-
- const name = document.createElement("h3");
- name.textContent = filter.name;
- filterItem.appendChild(name);
-
- const alias = document.createElement("p");
- alias.textContent = `Alias: ${filter.alias}`;
- filterItem.appendChild(alias);
-
- const query = document.createElement("p");
- query.textContent = `Query: ${filter.query}`;
- filterItem.appendChild(query);
-
- const applyButton = sdk.ui.button({
- variant: "primary",
- label: "Apply to HTTP History",
- size: "small",
- });
- applyButton.addEventListener("click", () => {
- sdk.httpHistory.setQuery(filter.query);
- sdk.navigation.goTo({ id: "http-history" });
- sdk.window.showToast("Filter applied", { variant: "success" });
- });
- filterItem.appendChild(applyButton);
-
- const deleteButton = sdk.ui.button({
- variant: "secondary",
- label: "Delete",
- size: "small",
- });
- deleteButton.addEventListener("click", async () => {
- await sdk.filters.delete(filter.id);
- refreshFilterList();
- sdk.window.showToast("Filter deleted", { variant: "success" });
- });
- filterItem.appendChild(deleteButton);
-
- filterList.appendChild(filterItem);
- });
- };
-
- // Create filter button
- const createButton = sdk.ui.button({
- variant: "primary",
- label: "Create New Filter",
- });
- createButton.addEventListener("click", async () => {
- const filter = await sdk.filters.create({
- name: `Filter ${Date.now()}`,
- alias: `filter-${Date.now()}`,
- query: "status:200",
- });
- if (filter) {
- refreshFilterList();
- sdk.window.showToast("Filter created", { variant: "success" });
- }
+export const init = (sdk: CaidoSDK) => {
+ const app = createApp(App);
+
+ app.provide("sdk", sdk);
+
+ app.use(PrimeVue, {
+ unstyled: true,
+ pt: Classic,
});
- container.appendChild(createButton);
- container.appendChild(filterList);
-
- refreshFilterList();
-
- const card = sdk.ui.card({
- body: container,
+ const root = document.createElement("div");
+ Object.assign(root.style, {
+ height: "100%",
+ width: "100%",
});
- sdk.navigation.addPage("/filter-manager", {
- body: card,
- });
-};
+ app.mount(root);
-export const init = (sdk: CaidoSDK) => {
- createPage(sdk);
+ sdk.navigation.addPage("/query-builder", {
+ body: root,
+ });
};
```
-### Dynamic Query Building
+```vue
+
+
+
+ Full Script
- -``` ts -import type { Caido } from "@caido/sdk-frontend"; -import type { API } from "../../backend/src/index.ts"; - -export type CaidoSDK = Caido
+
+
+
```
-{{ result }}
+
+
+
```
### Using Filter Presets
@@ -323,7 +228,3 @@ const filter = await sdk.filters.create({
// Use the filter in a query
sdk.httpHistory.setQuery("preset:success-get");
```
-
-::: tip
-Use saved filters to create reusable query presets that can be referenced with the `preset:` prefix in HTTPQL queries.
-:::
diff --git a/src/guides/frontend_storage.md b/src/guides/frontend_storage.md
index a1e94a2..325c6e1 100644
--- a/src/guides/frontend_storage.md
+++ b/src/guides/frontend_storage.md
@@ -12,6 +12,10 @@ The storage system is defined by the [StorageSDK](/reference/sdks/frontend/#sdk)
Stored data needs to be JSON serializable.
:::
+::: info
+Although frontend storage actually exists in the backend, it is inaccessible by the backend component. To share data with the backend component of a plugin, you will need to [create and call a custom function](/guides/rpc.md).
+:::
+
## User Preferences
To demonstrate its usage, let's create a frontend interface that offers light and dark theme options.
@@ -215,7 +219,3 @@ A button for both themes are added to the user interface that will call the `upd
```
-
-::: info
-Although frontend storage actually exists in the backend, it is inaccessible by the backend component. To share data with the backend component of a plugin, you will need to [create and call a custom function](/guides/rpc.md).
-:::
diff --git a/src/guides/log.md b/src/guides/log.md
index b677725..ba99051 100644
--- a/src/guides/log.md
+++ b/src/guides/log.md
@@ -70,41 +70,36 @@ try {
This example demonstrates logging at different levels during user interactions. It logs info messages when operations start and complete, error messages when operations fail, and shows corresponding toast notifications to the user.
-```ts
-import type { Caido } from "@caido/sdk-frontend";
-
-export type CaidoSDK = Caido;
-
-const createPage = (sdk: CaidoSDK) => {
- const button = sdk.ui.button({
- variant: "primary",
- label: "Perform Action",
- });
-
- button.addEventListener("click", async () => {
- sdk.log.info("Button clicked, starting operation");
-
- try {
- const result = await performOperation();
- sdk.log.info("Operation completed successfully:", result);
- sdk.window.showToast("Success!", { variant: "success" });
- } catch (err) {
- sdk.log.error("Operation failed:", err);
- sdk.window.showToast("Error occurred", { variant: "error" });
- }
- });
-
- const card = sdk.ui.card({
- body: button,
- });
-
- sdk.navigation.addPage("/logging-example", {
- body: card,
- });
+```vue
+
-export const init = (sdk: CaidoSDK) => {
- sdk.log.info("Logging example plugin initialized");
- createPage(sdk);
-};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```
+
+::: info
+For information on creating pages and setting up Vue components, see [Create a Page](/guides/page.md).
+:::
diff --git a/src/guides/match_replace.md b/src/guides/match_replace.md
index 01fde91..d5c8ba1 100644
--- a/src/guides/match_replace.md
+++ b/src/guides/match_replace.md
@@ -22,6 +22,10 @@ To retrieve all collections:
const collections = sdk.matchReplace.getCollections();
```
+::: tip
+Use collections to organize related match and replace rules, making it easier to enable/disable groups of rules together.
+:::
+
### Updating a Collection
To update a collection:
@@ -79,6 +83,10 @@ const activeRules = sdk.matchReplace.getActiveRules();
Rules are returned in priority order from highest to lowest.
+::: info
+Active rules are processed in priority order. Higher priority rules are applied first. Use `getActiveRules()` to see the processing order.
+:::
+
### Updating a Rule
To update a rule:
@@ -124,158 +132,6 @@ sdk.matchReplace.selectRule(undefined);
## Examples
-### Rule Manager Plugin
-
-This example creates a comprehensive interface for managing match and replace rule collections and individual rules. It displays collections with their rule counts, lists all rules with their queries, and provides buttons to toggle rule states, create collections, and delete items.
-
-```ts
-import type { Caido } from "@caido/sdk-frontend";
-
-export type CaidoSDK = Caido;
-
-const createPage = (sdk: CaidoSDK) => {
- const container = document.createElement("div");
- container.style.padding = "20px";
- container.style.display = "flex";
- container.style.flexDirection = "column";
- container.style.gap = "16px";
-
- // Collections list
- const collectionsList = document.createElement("div");
- collectionsList.id = "collections-list";
-
- const refreshCollections = () => {
- collectionsList.innerHTML = "";
- const collections = sdk.matchReplace.getCollections();
-
- if (collections.length === 0) {
- collectionsList.textContent = "No collections found";
- return;
- }
-
- collections.forEach((collection) => {
- const collectionItem = document.createElement("div");
- collectionItem.style.padding = "8px";
- collectionItem.style.border = "1px solid #ccc";
- collectionItem.style.marginBottom = "8px";
-
- const name = document.createElement("h3");
- name.textContent = collection.name;
- collectionItem.appendChild(name);
-
- const ruleCount = document.createElement("p");
- ruleCount.textContent = `${collection.ruleIds.length} rules`;
- collectionItem.appendChild(ruleCount);
-
- const deleteButton = sdk.ui.button({
- variant: "secondary",
- label: "Delete",
- size: "small",
- });
- deleteButton.addEventListener("click", async () => {
- await sdk.matchReplace.deleteCollection(collection.id);
- refreshCollections();
- sdk.window.showToast("Collection deleted", { variant: "success" });
- });
- collectionItem.appendChild(deleteButton);
-
- collectionsList.appendChild(collectionItem);
- });
- };
-
- // Rules list
- const rulesList = document.createElement("div");
- rulesList.id = "rules-list";
-
- const refreshRules = () => {
- rulesList.innerHTML = "";
- const rules = sdk.matchReplace.getRules();
-
- if (rules.length === 0) {
- rulesList.textContent = "No rules found";
- return;
- }
-
- rules.forEach((rule) => {
- const ruleItem = document.createElement("div");
- ruleItem.style.padding = "8px";
- ruleItem.style.border = "1px solid #ccc";
- ruleItem.style.marginBottom = "8px";
-
- const name = document.createElement("h3");
- name.textContent = rule.name;
- ruleItem.appendChild(name);
-
- const query = document.createElement("p");
- query.textContent = `Query: ${rule.query}`;
- ruleItem.appendChild(query);
-
- const toggleButton = sdk.ui.button({
- variant: rule.enabled ? "primary" : "secondary",
- label: rule.enabled ? "Disable" : "Enable",
- size: "small",
- });
- toggleButton.addEventListener("click", async () => {
- await sdk.matchReplace.toggleRule(rule.id, !rule.enabled);
- refreshRules();
- sdk.window.showToast(`Rule ${rule.enabled ? "disabled" : "enabled"}`, {
- variant: "success",
- });
- });
- ruleItem.appendChild(toggleButton);
-
- const deleteButton = sdk.ui.button({
- variant: "secondary",
- label: "Delete",
- size: "small",
- });
- deleteButton.addEventListener("click", async () => {
- await sdk.matchReplace.deleteRule(rule.id);
- refreshRules();
- sdk.window.showToast("Rule deleted", { variant: "success" });
- });
- ruleItem.appendChild(deleteButton);
-
- rulesList.appendChild(ruleItem);
- });
- };
-
- // Create collection button
- const createCollectionButton = sdk.ui.button({
- variant: "primary",
- label: "Create Collection",
- });
- createCollectionButton.addEventListener("click", async () => {
- const collection = await sdk.matchReplace.createCollection({
- name: `Collection ${Date.now()}`,
- });
- if (collection) {
- refreshCollections();
- sdk.window.showToast("Collection created", { variant: "success" });
- }
- });
-
- container.appendChild(createCollectionButton);
- container.appendChild(collectionsList);
- container.appendChild(rulesList);
-
- refreshCollections();
- refreshRules();
-
- const card = sdk.ui.card({
- body: container,
- });
-
- sdk.navigation.addPage("/match-replace-manager", {
- body: card,
- });
-};
-
-export const init = (sdk: CaidoSDK) => {
- createPage(sdk);
-};
-```
-
### Auto-Enable Rules
This example automatically enables all rules in a specific collection named "Auto Rules" when the plugin initializes. It finds the collection, filters rules belonging to it, and enables any that are currently disabled.
@@ -328,11 +184,3 @@ export const init = (sdk: CaidoSDK) => {
});
};
```
-
-::: tip
-Use collections to organize related match and replace rules, making it easier to enable/disable groups of rules together.
-:::
-
-::: info
-Active rules are processed in priority order. Higher priority rules are applied first. Use `getActiveRules()` to see the processing order.
-:::
diff --git a/src/guides/navigation_events.md b/src/guides/navigation_events.md
index e2d6a7f..39668a6 100644
--- a/src/guides/navigation_events.md
+++ b/src/guides/navigation_events.md
@@ -18,6 +18,10 @@ The callback receives a `PageChangeEvent` object containing:
- `routeId` - The route ID of the new page
- `path` - The path of the new page
+::: tip
+Use page change events to optimize performance by only loading resources when needed for specific pages.
+:::
+
::: info
The `onPageChange` callback is called after the page has changed. To perform actions before navigation, you may need to use other mechanisms depending on your use case.
:::
@@ -87,45 +91,6 @@ export const init = (sdk: CaidoSDK) => {
};
```
-### Updating UI Based on Current Page
-
-This example creates a page that displays the current route ID and updates it in real-time as the user navigates. It subscribes to page change events and updates a status text element with the current page information.
-
-```ts
-import type { Caido } from "@caido/sdk-frontend";
-
-export type CaidoSDK = Caido;
-
-const createPage = (sdk: CaidoSDK) => {
- const statusText = document.createElement("p");
- statusText.textContent = "Current page: Unknown";
-
- const updateStatus = (routeId: string) => {
- statusText.textContent = `Current page: ${routeId}`;
- };
-
- // Subscribe to page changes
- sdk.navigation.onPageChange((event) => {
- updateStatus(event.routeId || "unknown");
- });
-
- // Get initial page state
- // Note: You may need to check the current page on initialization
-
- const card = sdk.ui.card({
- body: statusText,
- });
-
- sdk.navigation.addPage("/page-tracker", {
- body: card,
- });
-};
-
-export const init = (sdk: CaidoSDK) => {
- createPage(sdk);
-};
-```
-
### Conditional Feature Activation
This example conditionally enables or disables a feature based on the current page. The feature is only active on Replay or HTTP History pages, and is automatically deactivated when navigating to other pages.
@@ -156,7 +121,3 @@ export const init = (sdk: CaidoSDK) => {
});
};
```
-
-::: tip
-Use page change events to optimize performance by only loading resources when needed for specific pages.
-:::
diff --git a/src/guides/page.md b/src/guides/page.md
index 9c6cba8..a52b05c 100644
--- a/src/guides/page.md
+++ b/src/guides/page.md
@@ -1,6 +1,10 @@
# Create a Page
-Plugin pages provide a graphical user interface in the Caido application. There are multiple SDK objects and methods available to assist you in customization.
+Plugin pages provide a graphical user interface in the Caido application. Pages are created using Vue.js components with PrimeVue and Tailwind CSS for styling.
+
+::: info
+Vue.js is the standard approach for creating plugin pages in Caido. When you initialize a plugin using `pnpm create @caido-community/plugin`, you can choose the Vue.js template option. This guide shows how to create pages using Vue components. For more information about using PrimeVue components and styling, see [Using the Component Library](/guides/styling.md).
+:::
## Creating Pages and Navigating
@@ -8,14 +12,38 @@ Used to create pages in the application and navigate to them.
### Adding a Page
+Pages are created by setting up a Vue application and mounting it to a root element, which is then passed to `sdk.navigation.addPage()`. The Vue app handles the page's layout, state, and user interactions.
+
```ts
-sdk.navigation.addPage("/my-plugin-page", {
- body: card;
- topbar: bar;
-});
+import { Classic } from "@caido/primevue";
+import PrimeVue from "primevue/config";
+import { createApp } from "vue";
+
+import App from "./views/App.vue";
+
+export const init = (sdk: CaidoSDK) => {
+ const app = createApp(App);
+
+ app.use(PrimeVue, {
+ unstyled: true,
+ pt: Classic,
+ });
+
+ const root = document.createElement("div");
+ Object.assign(root.style, {
+ height: "100%",
+ width: "100%",
+ });
+
+ app.mount(root);
+
+ sdk.navigation.addPage("/my-plugin-page", {
+ body: root,
+ });
+};
```
-This creates a page of which the contents are the [card](#creating-a-card) you will learn how to create below.
+This creates a page where the contents are defined in your `App.vue` component. The Vue app is mounted to a root `div` element, which is then passed as the `body` property to `addPage`.
The `topbar` property is optional and appears to the right of the Caido logo in the top-left corner.
@@ -47,240 +75,124 @@ The `icon` property is optional and adds a [FontAwesome](https://fontawesome.com
- The `isExternal` property is optional and takes a boolean value of _true_ if the path points to an external URL.
:::
-## Creating UI Components
+## Building UI Components with PrimeVue
-Used to create visual elements. Content options for each element are also provided. These elements provide a way to sectionalize the user-interface of your plugin.
+UI components are built using PrimeVue components styled with Tailwind CSS. PrimeVue provides a comprehensive set of components that match Caido's design system.
-### Creating a Button
+### Using PrimeVue Components
-```ts
-const deleteButton = sdk.ui.button({
- variant: "primary",
- label: "Delete",
- trailingIcon: "fas fa-trash-can",
- size: "small",
-});
-```
+Import and use PrimeVue components directly in your Vue components. For example, to create a button:
-All button properties are optional and include:
+```vue
+
-- `variant` - Specifies the button type and can have a value of `"primary"`, `"secondary"` or `"tertiary"`.
-- `label` - Specifies the inner string within the button.
-- `leadingIcon` - Adds an icon at the leading side of the button.
-- `trailingIcon` - Addsan icon at the trailing side of the button.
-- `size` - Specifies the button size and can have a value of `"small"`, `"medium"` or `"large"`.
-
-### Creating a Card
-
-```ts
-const card = sdk.ui.card({
- header: headerContainer,
- body: bodyText,
- footer: footerText,
-});
+
+
+
```
-A **card** is a layout component. Similar to an HTML file, Cards consist of `header`, `body` and `footer` properties.
-
-All properties are optional. The value of each property is a defined HTML element.
+PrimeVue components support various props for customization:
+
+- `label` - The button text
+- `icon` - FontAwesome icon class
+- `severity` - Button style (`primary`, `secondary`, `success`, `info`, `warning`, `danger`)
+- `size` - Button size (`small`, `medium`, `large`)
+
+### Creating Layouts with Tailwind CSS
+
+Use Tailwind CSS utility classes to create layouts. For example, to create a card-like layout:
+
+```vue
+
+
+
+
+
+
+```
::: tip
-To use multiple HTML elements, combine them using `` tags:
+For a complete example of creating a page with Vue components, see the example below. This shows how to set up a Vue app in `index.ts` and create the page layout in `App.vue`:
```ts
+import { Classic } from "@caido/primevue";
+import PrimeVue from "primevue/config";
+import { createApp } from "vue";
+
import type { Caido } from "@caido/sdk-frontend";
import type { API } from "starterkit-plugin-backend";
-export type CaidoSDK = Caido
+
+ Hello world!
+Lorem ipsum.
+
+
+ Paragraph.
+
+
+ Footer text.
+
-
-### Creating a Well
-
-```ts
-const well = sdk.ui.well({
- header: title,
- body: paragraph,
- footer: advisory,
-});
-```
-
-A **well** is a layout component. Wells are similar to cards in that they consist of `header`, `body` and `footer` properties.
-
-All properties are optional. The value of each property is a defined HTML element.
-
-### Creating a Request Editor
-```ts
-const reqEditor = sdk.ui.httpRequestEditor();
-const reqEditorPane = reqEditor.getElement();
-```
-
-### Creating a Response Editor
-
-```ts
-const respEditor = sdk.ui.httpResponseEditor();
-const respEditorPane = respEditor.getElement();
-```
-
-::: tip
-For an example of a page with request and response editors, expand the following:
-
-
-;
-
-const createPage = (sdk: CaidoSDK) => {
- const headerText = document.createElement("h1");
- headerText.textContent = "Hello world!";
-
- const subText = document.createElement("p");
- subText.textContent = "Lorem ipsum.";
-
- const bodyText = document.createElement("p");
- bodyText.textContent = "Paragraph.";
-
- const reqEditor = sdk.ui.httpRequestEditor();
- const reqEditorPane = reqEditor.getElement();
- const respEditor = sdk.ui.httpResponseEditor();
- const respEditorPane = respEditor.getElement();
-
- const footerText = document.createElement("p");
- footerText.textContent = "Footer text.";
-
- const headerContainer = document.createElement("div");
- headerContainer.appendChild(headerText);
- headerContainer.appendChild(subText);
-
- const bodyContainer = document.createElement("div");
- bodyContainer.appendChild(bodyText);
-
- const editorsContainer = document.createElement("div");
- editorsContainer.classList.add("editors-container");
-
- reqEditorPane.classList.add("editor-pane");
- respEditorPane.classList.add("editor-pane");
-
- editorsContainer.appendChild(reqEditorPane);
- editorsContainer.appendChild(respEditorPane);
-
- bodyContainer.appendChild(editorsContainer);
-
- const bar = document.createElement("p");
- bar.textContent = "Topbar.";
-
- const card = sdk.ui.card({
- header: headerContainer,
- body: bodyContainer,
- footer: footerText,
+ const root = document.createElement("div");
+ Object.assign(root.style, {
+ height: "100%",
+ width: "100%",
});
+ app.mount(root);
+
sdk.navigation.addPage("/my-plugin-page", {
- body: card,
- topbar: bar,
+ body: root,
});
-};
-export const init = (sdk: CaidoSDK) => {
- createPage(sdk);
sdk.sidebar.registerItem("My Plugin", "/my-plugin-page", {
icon: "fas fa-rocket",
});
};
```
-
-:::
-
-::: tip
-To view the CSS rules of the editors shown below, expand the following:
-
-Example
- -```ts -import type { Caido } from "@caido/sdk-frontend"; -import type { API } from "starterkit-plugin-backend"; - -export type CaidoSDK = Caido
-
+The `init` function creates the Vue app, mounts it to a root element, and registers the page with `addPage`. The sidebar item is registered to make the page accessible from the navigation menu.
:::
-Example
- -``` css -.editors-container { - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; - height: 100%; -} - -.editor-pane { - flex: 1; - min-width: 300px; - min-height: 500px; - margin: 0 10px; -} - -.editor-pane h2 { - margin: 0; - padding: 10px; - border-radius: 4px; -} +The `App.vue` component defines the page layout: + +```vue + + + +
+
+
```
-
+
+ Hello world!
+Lorem ipsum.
+
+
+ Paragraph.
+
+
+ Footer text.
+
+
## Interacting with Windows and Editors
@@ -318,80 +230,83 @@ All message properties are optional and include:
- `variant` - Specifies the message type and can have a value of `"success"`, `"error"`, `"warning"` or `"info"`.
- `duration` - Specifies the amount of time a message will be displayed in milliseconds.
-::: tip
-For an example of how to trigger Toast messages on button clicks, expand the following:
+## Examples
-
-;
+```vue
+
+
+
+ ;
- const card = sdk.ui.card({
- header: headerContainer,
- body: bodyText,
- footer: footerText,
+export const init = (sdk: CaidoSDK) => {
+ const app = createApp(App);
+
+ app.provide("sdk", sdk);
+
+ app.use(PrimeVue, {
+ unstyled: true,
+ pt: Classic,
});
- sdk.navigation.addPage("/my-plugin-page", {
- body: card,
- topbar: bar,
+ const root = document.createElement("div");
+ Object.assign(root.style, {
+ height: "100%",
+ width: "100%",
});
-};
-export const init = (sdk: CaidoSDK) => {
- // Register commands
- // Commands are registered with a unique identifier and a handler function
- // The run function is called when the command is executed
- // These commands can be registered in various places like command palette, context menu, etc.
+ app.mount(root);
- // Register page
- createPage(sdk);
+ sdk.navigation.addPage("/my-plugin-page", {
+ body: root,
+ });
- // Register sidebar
sdk.sidebar.registerItem("My Plugin", "/my-plugin-page", {
icon: "fas fa-rocket",
});
};
```
-
-:::
-
Example
+### Basic Page with Button -```ts -import type { Caido } from "@caido/sdk-frontend"; -import type { API } from "starterkit-plugin-backend"; +This example creates a simple page with a button that displays a toast message when clicked. -export type CaidoSDK = Caido
+
+
+```
- const headerText = document.createElement("h1");
- headerText.textContent = "Hello world!";
-
- const subText = document.createElement("p");
- subText.textContent = "Lorem ipsum.";
+The corresponding `index.ts` file:
- const bodyText = document.createElement("p");
- bodyText.textContent = "Paragraph.";
+```ts
+import { Classic } from "@caido/primevue";
+import PrimeVue from "primevue/config";
+import { createApp } from "vue";
- const footerText = document.createElement("p");
- footerText.textContent = "Footer text.";
+import type { Caido } from "@caido/sdk-frontend";
+import type { API } from "starterkit-plugin-backend";
- const headerContainer = document.createElement("div");
- headerContainer.appendChild(headerText);
- headerContainer.appendChild(subText);
- headerContainer.appendChild(messageButton);
+import App from "./views/App.vue";
- const bar = document.createElement("p");
- bar.textContent = "Topbar.";
+export type CaidoSDK = Caido
+
+ Hello world!
+Lorem ipsum.
+
+
+ Paragraph.
+
+
+
+ 
diff --git a/src/guides/replay.md b/src/guides/replay.md
index 7dcdfe3..549e663 100644
--- a/src/guides/replay.md
+++ b/src/guides/replay.md
@@ -50,6 +50,10 @@ To create a new collection:
const collection = await sdk.replay.createCollection("My Collection");
```
+::: tip
+Use collections to organize related replay sessions, making it easier to manage and find specific sessions for testing scenarios.
+:::
+
### Getting Collections
To retrieve all collections:
@@ -129,6 +133,10 @@ const handler = sdk.replay.onCurrentSessionChange((event) => {
handler.stop();
```
+::: info
+Sessions and collections are persisted across Caido restarts, so programmatically created items will remain available.
+:::
+
## Examples
### Session Manager Plugin
@@ -136,147 +144,154 @@ handler.stop();
This example creates a comprehensive session and collection management interface. It displays all replay sessions and collections, allows opening sessions in tabs, creating new collections, and deleting items. It also subscribes to session change events.
```ts
+import { Classic } from "@caido/primevue";
+import PrimeVue from "primevue/config";
+import { createApp } from "vue";
+
import type { Caido } from "@caido/sdk-frontend";
+import App from "./views/App.vue";
+
export type CaidoSDK = Caido;
-const createPage = (sdk: CaidoSDK) => {
- const container = document.createElement("div");
- container.style.padding = "20px";
- container.style.display = "flex";
- container.style.flexDirection = "column";
- container.style.gap = "16px";
+export const init = (sdk: CaidoSDK) => {
+ const app = createApp(App);
+
+ app.provide("sdk", sdk);
+
+ app.use(PrimeVue, {
+ unstyled: true,
+ pt: Classic,
+ });
- // Sessions list
- const sessionsList = document.createElement("div");
- sessionsList.id = "sessions-list";
+ const root = document.createElement("div");
+ Object.assign(root.style, {
+ height: "100%",
+ width: "100%",
+ });
- const refreshSessions = () => {
- sessionsList.innerHTML = "";
- const sessions = sdk.replay.getSessions();
+ app.mount(root);
- if (sessions.length === 0) {
- sessionsList.textContent = "No sessions found";
- return;
- }
+ sdk.navigation.addPage("/replay-manager", {
+ body: root,
+ });
- sessions.forEach((session) => {
- const sessionItem = document.createElement("div");
- sessionItem.style.padding = "8px";
- sessionItem.style.border = "1px solid #ccc";
- sessionItem.style.marginBottom = "8px";
-
- const name = document.createElement("h3");
- name.textContent = session.name || `Session ${session.id}`;
- sessionItem.appendChild(name);
-
- const openButton = sdk.ui.button({
- variant: "primary",
- label: "Open",
- size: "small",
- });
- openButton.addEventListener("click", () => {
- sdk.replay.openTab(session.id);
- sdk.navigation.goTo({ id: "replay" });
- });
- sessionItem.appendChild(openButton);
-
- const deleteButton = sdk.ui.button({
- variant: "secondary",
- label: "Delete",
- size: "small",
- });
- deleteButton.addEventListener("click", async () => {
- await sdk.replay.deleteSessions([session.id]);
- refreshSessions();
- sdk.window.showToast("Session deleted", { variant: "success" });
- });
- sessionItem.appendChild(deleteButton);
-
- sessionsList.appendChild(sessionItem);
- });
- };
+ // Listen for session changes
+ sdk.replay.onCurrentSessionChange((event) => {
+ sdk.log.info("Current session changed to:", event.sessionId);
+ });
+};
+```
- // Collections list
- const collectionsList = document.createElement("div");
- collectionsList.id = "collections-list";
+```vue
+
+
+
+
+
+
```
### Auto-Organize Sessions
@@ -321,11 +336,3 @@ export const init = (sdk: CaidoSDK) => {
initializeCollection();
};
```
-
-::: tip
-Use collections to organize related replay sessions, making it easier to manage and find specific sessions for testing scenarios.
-:::
-
-::: info
-Sessions and collections are persisted across Caido restarts, so programmatically created items will remain available.
-:::
diff --git a/src/guides/request.md b/src/guides/request.md
index d223f2b..65e9914 100644
--- a/src/guides/request.md
+++ b/src/guides/request.md
@@ -132,79 +132,30 @@ export function init(sdk: SDK
+
+ Collections
+ +No collections found
+
+
+
+
+ {{ collection.name }}
+{{ collection.sessionIds.length }} sessions
+ +
+
+ Sessions
+No sessions found
+
+
+
+
+ {{ session.name || `Session ${session.id}` }}
+
+
+
+
+
-
+::: info
+For information on creating pages and setting up Vue components, see [Create a Page](/guides/page.md).
:::
diff --git a/src/guides/rpc.md b/src/guides/rpc.md
index 4371b8b..6c91b5c 100644
--- a/src/guides/rpc.md
+++ b/src/guides/rpc.md
@@ -74,148 +74,110 @@ Now that we've created our endpoint in the backend plugin, we can call `multiply
### /packages/frontend/src/index.ts
-``` ts
+```ts
+import { Classic } from "@caido/primevue";
+import PrimeVue from "primevue/config";
+import { createApp } from "vue";
+
import type { Caido } from "@caido/sdk-frontend";
import type { API } from "../../backend/src/index.ts";
+import App from "./views/App.vue";
+
export type CaidoSDK = CaidoTo view the entire frontend script, expand the following:
+### Calling from Frontend -``` ts -import type { Caido } from "@caido/sdk-frontend"; -import type { API } from "../../backend/src/index"; +To call the backend function from a Vue component: -import "./styles/index.css"; +```vue + -const createPage = (sdk: CaidoSDK) => { - const requestButton = sdk.ui.button({ - variant: "primary", - label: "Send Request", - }); - - requestButton.addEventListener("click", async () => { - await sending(sdk); - }); - - const headerText = document.createElement("h1"); - headerText.textContent = "Hello world!"; - - const subText = document.createElement("p"); - subText.textContent = "Lorem ipsum."; - - const bodyText = document.createElement("p"); - bodyText.textContent = "Paragraph."; - - const footerText = document.createElement("p"); - footerText.textContent = "Footer text."; - - const headerContainer = document.createElement("div"); - headerContainer.appendChild(headerText); - headerContainer.appendChild(subText); - headerContainer.appendChild(requestButton); - - const bodyContainer = document.createElement("div"); - bodyContainer.appendChild(bodyText); - - const card = sdk.ui.card({ - header: headerContainer, - body: bodyContainer, - footer: footerText, - }); - - sdk.navigation.addPage("/my-plugin-page", { - body: card, - }); -}; - -export const init = (sdk: CaidoSDK) => { - createPage(sdk); - sdk.sidebar.registerItem("My Plugin", "/my-plugin-page", { - icon: "fas fa-rocket", - }); - - sdk.commands.register(Commands.sending, { - name: "Send Request", - run: () => sending(sdk), - }); -}; + +
+
+
+
```
-
+
+
```
### Script Breakdown
-Again, we need to import the necessary type aliases: the base `SDK` and the `API` we just defined in the backend.
+The frontend setup imports the necessary type aliases and creates a Vue application. The `CaidoSDK` type alias extends the base `Caido` type with the `API` we defined in the backend.
-``` ts
+```ts
import type { Caido } from "@caido/sdk-frontend";
import type { API } from "../../backend/src/index.ts";
+
+export type CaidoSDK = Caido
+
+
+
+
+
+
+ {{ result }}
+
diff --git a/src/guides/runtime.md b/src/guides/runtime.md
index b34b5ec..7105a25 100644
--- a/src/guides/runtime.md
+++ b/src/guides/runtime.md
@@ -43,130 +43,30 @@ export const init = (sdk: CaidoSDK) => {
### Version Display
-This example creates a page that displays the current Caido version and plugin compatibility status. It shows the version information in a formatted card with styling.
-
-```ts
-import type { Caido } from "@caido/sdk-frontend";
-
-export type CaidoSDK = Caido;
-
-const createPage = (sdk: CaidoSDK) => {
- const container = document.createElement("div");
- container.style.padding = "20px";
- container.style.display = "flex";
- container.style.flexDirection = "column";
- container.style.gap = "16px";
-
- const versionInfo = document.createElement("div");
- versionInfo.style.padding = "16px";
- versionInfo.style.backgroundColor = "#f5f5f5";
- versionInfo.style.borderRadius = "4px";
-
- const version = sdk.runtime.version;
- versionInfo.innerHTML = `
- Caido Version
-Version: ${version}
-Plugin Compatibility: ✓ Compatible
- `; - - container.appendChild(versionInfo); - - const card = sdk.ui.card({ - body: container, - }); - - sdk.navigation.addPage("/version-info", { - body: card, - }); -}; - -export const init = (sdk: CaidoSDK) => { - createPage(sdk); -}; -``` - -### Feature Detection - -This example implements a feature availability checker that determines if specific features are available based on the Caido version. It checks version requirements for features like "advanced-filters" and "ai-integration" and enables or disables features accordingly. - -```ts -import type { Caido } from "@caido/sdk-frontend"; - -export type CaidoSDK = Caido; - -const checkFeatureAvailability = (sdk: CaidoSDK, feature: string): boolean => { - const version = sdk.runtime.version; - const [major, minor] = version.split(".").map(Number); - - // Feature availability based on version - const features: Record
+
+
```
-### Compatibility Check
-
-This example performs a comprehensive version compatibility check with a custom version comparison function. If the version is incompatible, it displays an error toast and prevents plugin initialization, otherwise it logs successful initialization.
-
-```ts
-import type { Caido } from "@caido/sdk-frontend";
-
-export type CaidoSDK = Caido;
-
-const MIN_VERSION = "1.2.0";
-
-const compareVersions = (v1: string, v2: string): number => {
- const parts1 = v1.split(".").map(Number);
- const parts2 = v2.split(".").map(Number);
-
- for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
- const part1 = parts1[i] || 0;
- const part2 = parts2[i] || 0;
-
- if (part1 < part2) return -1;
- if (part1 > part2) return 1;
- }
-
- return 0;
-};
-
-export const init = (sdk: CaidoSDK) => {
- const version = sdk.runtime.version;
-
- if (compareVersions(version, MIN_VERSION) < 0) {
- sdk.window.showToast(
- `This plugin requires Caido ${MIN_VERSION} or higher. Current version: ${version}`,
- { variant: "error", duration: 5000 }
- );
- sdk.log.error(`Version mismatch: ${version} < ${MIN_VERSION}`);
- return;
- }
-
- sdk.log.info(`Plugin initialized on Caido ${version}`);
-};
-```
+::: info
+For information on creating pages and setting up Vue components, see [Create a Page](/guides/page.md).
+:::
::: tip
Use version checks to ensure your plugin works correctly across different Caido versions and to provide helpful error messages when requirements aren't met.
diff --git a/src/guides/scopes.md b/src/guides/scopes.md
index 92b112e..23f14d2 100644
--- a/src/guides/scopes.md
+++ b/src/guides/scopes.md
@@ -129,98 +129,104 @@ const scope = await sdk.scopes.createScope({
This example creates a scope management interface that lists all scopes with their allowlists and denylists. It provides buttons to create new scopes and delete existing ones, with automatic list refreshing.
```ts
-import type { Caido } from "@caido/sdk-frontend";
-
-export type CaidoSDK = Caido;
-
-const createPage = (sdk: CaidoSDK) => {
- const container = document.createElement("div");
- container.style.padding = "20px";
- container.style.display = "flex";
- container.style.flexDirection = "column";
- container.style.gap = "16px";
+import { Classic } from "@caido/primevue";
+import PrimeVue from "primevue/config";
+import { createApp } from "vue";
- // Scope list
- const scopeList = document.createElement("div");
- scopeList.id = "scope-list";
-
- const refreshScopeList = () => {
- scopeList.innerHTML = "";
- const scopes = sdk.scopes.getScopes();
-
- if (scopes.length === 0) {
- scopeList.textContent = "No scopes found";
- return;
- }
-
- scopes.forEach((scope) => {
- const scopeItem = document.createElement("div");
- scopeItem.style.padding = "8px";
- scopeItem.style.border = "1px solid #ccc";
- scopeItem.style.marginBottom = "8px";
+import type { Caido } from "@caido/sdk-frontend";
- const name = document.createElement("h3");
- name.textContent = scope.name;
- scopeItem.appendChild(name);
+import App from "./views/App.vue";
- const allowlist = document.createElement("p");
- allowlist.textContent = `Allowlist: ${scope.allowlist.join(", ")}`;
- scopeItem.appendChild(allowlist);
+export type CaidoSDK = Caido;
- const denylist = document.createElement("p");
- denylist.textContent = `Denylist: ${scope.denylist.join(", ")}`;
- scopeItem.appendChild(denylist);
+export const init = (sdk: CaidoSDK) => {
+ const app = createApp(App);
+
+ app.provide("sdk", sdk);
+
+ app.use(PrimeVue, {
+ unstyled: true,
+ pt: Classic,
+ });
- const deleteButton = sdk.ui.button({
- variant: "secondary",
- label: "Delete",
- size: "small",
- });
- deleteButton.addEventListener("click", async () => {
- await sdk.scopes.deleteScope(scope.id);
- refreshScopeList();
- sdk.window.showToast("Scope deleted", { variant: "success" });
- });
- scopeItem.appendChild(deleteButton);
+ const root = document.createElement("div");
+ Object.assign(root.style, {
+ height: "100%",
+ width: "100%",
+ });
- scopeList.appendChild(scopeItem);
- });
- };
+ app.mount(root);
- // Create scope button
- const createButton = sdk.ui.button({
- variant: "primary",
- label: "Create New Scope",
- });
- createButton.addEventListener("click", async () => {
- const scope = await sdk.scopes.createScope({
- name: `Scope ${Date.now()}`,
- allowlist: ["*example.com"],
- denylist: [],
- });
- if (scope) {
- refreshScopeList();
- sdk.window.showToast("Scope created", { variant: "success" });
- }
+ sdk.navigation.addPage("/scope-manager", {
+ body: root,
});
+};
+```
- container.appendChild(createButton);
- container.appendChild(scopeList);
+```vue
+
+
+
+
+
+ Caido Version
+Version: {{ version }}
+Plugin Compatibility: ✓ Compatible
+
+
+
+
```
### Setting Scope on Page Navigation
diff --git a/src/guides/slots.md b/src/guides/slots.md
index 030dcc9..697949b 100644
--- a/src/guides/slots.md
+++ b/src/guides/slots.md
@@ -124,6 +124,14 @@ import { ReplaySlot } from "@caido/sdk-frontend";
Be mindful of slot space limitations. Too many items in a slot can clutter the interface. Consider grouping related actions or using custom components to organize multiple controls.
:::
+::: tip
+Slots are a powerful way to extend Caido's UI without creating custom pages. Use them to add plugin-specific functionality that integrates seamlessly with the existing interface.
+:::
+
+::: info
+Slot content is rendered when the relevant page is active. For footer slots, content is always visible. For Replay slots, content is only visible on the Replay page.
+:::
+
## Examples
### Footer Actions
@@ -242,11 +250,3 @@ export const init = (sdk: CaidoSDK) => {
});
};
```
-
-::: tip
-Slots are a powerful way to extend Caido's UI without creating custom pages. Use them to add plugin-specific functionality that integrates seamlessly with the existing interface.
-:::
-
-::: info
-Slot content is rendered when the relevant page is active. For footer slots, content is always visible. For Replay slots, content is only visible on the Replay page.
-:::
diff --git a/src/guides/utf.md b/src/guides/utf.md
index 48b886f..2073602 100644
--- a/src/guides/utf.md
+++ b/src/guides/utf.md
@@ -85,60 +85,30 @@ export function init(sdk: SDKNo scopes found
+
+
+
+
+ {{ scope.name }}
+Allowlist: {{ scope.allowlist.join(", ") }}
+Denylist: {{ scope.denylist.join(", ") }}
+ +
-;
+```vue
+
-const createPage = (sdk: CaidoSDK) => {
- const requestButton = sdk.ui.button({
- variant: "primary",
- label: "Send Request",
- });
-
- requestButton.addEventListener("click", async () => {
- await sending(sdk);
- });
-
- const bodyContainer = document.createElement("div");
- bodyContainer.appendChild(requestButton);
-
- const card = sdk.ui.card({
- body: bodyContainer,
-
- });
-
- sdk.navigation.addPage("/my-plugin-page", {
- body: card,
- });
-};
-
-export const init = (sdk: CaidoSDK) => {
- createPage(sdk);
- sdk.sidebar.registerItem("My Plugin", "/my-plugin-page", {
- icon: "fas fa-rocket",
- });
-
- sdk.commands.register(Commands.sending, {
- name: "Send Request",
- run: () => sending(sdk),
- });
-};
+
+
+::: info
+For information on creating pages and setting up Vue components, see [Create a Page](/guides/page.md).
+:::
diff --git a/src/guides/view_modes.md b/src/guides/view_modes.md
index 9149fee..607c6c2 100644
--- a/src/guides/view_modes.md
+++ b/src/guides/view_modes.md
@@ -135,96 +135,6 @@ export const init = (sdk: CaidoSDK) => {
};
```
-### Visual Request Builder
-
-An interactive form view that displays request method, URL, and headers as editable form fields.
-
-```vue
-
-
-
- To view the entire frontend script, expand the following:
+### Calling from Frontend -``` ts -import type { Caido } from "@caido/sdk-frontend"; -import type { API } from "../../backend/src/index"; - -import "./styles/index.css"; +To call the backend function from a Vue component: -export type CaidoSDK = Caido
+
+
+
```
-
-
-
-
-
-
-
-```
-
-```ts
-import type { Caido } from "@caido/sdk-frontend";
-import VisualBuilderView from "./VisualBuilderView.vue";
-
-export type CaidoSDK = Caido;
-
-export const init = (sdk: CaidoSDK) => {
- sdk.httpHistory.addRequestViewMode({
- label: "Visual Builder",
- view: {
- component: VisualBuilderView,
- },
- });
-};
-```
-
### Editable Request View
A view mode for Intercept or Replay that allows editing the request using the `requestDraft` prop.
diff --git a/src/guides/workflows.md b/src/guides/workflows.md
index b2b55d6..670871c 100644
--- a/src/guides/workflows.md
+++ b/src/guides/workflows.md
@@ -14,6 +14,14 @@ const workflows = sdk.workflows.getWorkflows();
You can subscribe to three types of workflow events:
+::: tip
+Use workflow events to keep your plugin's state synchronized with workflow changes, enabling reactive behavior and automation.
+:::
+
+::: info
+Workflow events are fired for all workflow changes, not just those made by your plugin. This allows you to react to user actions and other plugin modifications.
+:::
+
### Workflow Created
To listen for when a workflow is created:
@@ -59,107 +67,6 @@ Be mindful of performance when subscribing to workflow events. Avoid performing
## Examples
-### Workflow Monitor Plugin
-
-This example creates a page that displays all workflows and maintains a real-time event log. It subscribes to workflow creation, update, and deletion events, updating both the workflow list and event log whenever changes occur.
-
-```ts
-import type { Caido } from "@caido/sdk-frontend";
-
-export type CaidoSDK = Caido;
-
-const createPage = (sdk: CaidoSDK) => {
- const container = document.createElement("div");
- container.style.padding = "20px";
- container.style.display = "flex";
- container.style.flexDirection = "column";
- container.style.gap = "16px";
-
- // Workflows list
- const workflowsList = document.createElement("div");
- workflowsList.id = "workflows-list";
-
- const refreshWorkflows = () => {
- workflowsList.innerHTML = "";
- const workflows = sdk.workflows.getWorkflows();
-
- if (workflows.length === 0) {
- workflowsList.textContent = "No workflows found";
- return;
- }
-
- workflows.forEach((workflow) => {
- const workflowItem = document.createElement("div");
- workflowItem.style.padding = "8px";
- workflowItem.style.border = "1px solid #ccc";
- workflowItem.style.marginBottom = "8px";
-
- const name = document.createElement("h3");
- name.textContent = workflow.name || `Workflow ${workflow.id}`;
- workflowItem.appendChild(name);
-
- const id = document.createElement("p");
- id.textContent = `ID: ${workflow.id}`;
- id.style.fontSize = "12px";
- id.style.color = "#666";
- workflowItem.appendChild(id);
-
- workflowsList.appendChild(workflowItem);
- });
- };
-
- // Event log
- const eventLog = document.createElement("div");
- eventLog.id = "event-log";
- eventLog.style.maxHeight = "300px";
- eventLog.style.overflowY = "auto";
- eventLog.style.padding = "8px";
- eventLog.style.backgroundColor = "#f5f5f5";
- eventLog.style.borderRadius = "4px";
-
- const addLogEntry = (message: string) => {
- const entry = document.createElement("div");
- entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
- entry.style.marginBottom = "4px";
- eventLog.appendChild(entry);
- eventLog.scrollTop = eventLog.scrollHeight;
- };
-
- container.appendChild(workflowsList);
- container.appendChild(eventLog);
-
- refreshWorkflows();
-
- const card = sdk.ui.card({
- body: container,
- });
-
- sdk.navigation.addPage("/workflow-monitor", {
- body: card,
- });
-
- // Subscribe to workflow events
- sdk.workflows.onCreatedWorkflow((workflow) => {
- addLogEntry(`Workflow created: ${workflow.name}`);
- refreshWorkflows();
- });
-
- sdk.workflows.onUpdatedWorkflow((workflow) => {
- addLogEntry(`Workflow updated: ${workflow.name}`);
- refreshWorkflows();
- });
-
- sdk.workflows.onDeletedWorkflow((workflowId) => {
- addLogEntry(`Workflow deleted: ${workflowId}`);
- refreshWorkflows();
- });
-};
-
-export const init = (sdk: CaidoSDK) => {
- createPage(sdk);
-};
-```
-
### Workflow Automation
This example demonstrates reactive workflow management by subscribing to workflow lifecycle events. It logs workflow changes and can trigger automation, notifications, or UI updates when workflows are created, updated, or deleted.
@@ -227,11 +134,3 @@ export const init = (sdk: CaidoSDK) => {
});
};
```
-
-::: tip
-Use workflow events to keep your plugin's state synchronized with workflow changes, enabling reactive behavior and automation.
-:::
-
-::: info
-Workflow events are fired for all workflow changes, not just those made by your plugin. This allows you to react to user actions and other plugin modifications.
-:::
Headers
-
-
-
-
-