Add more missing guides

Author: Corb3nik

src/guides/ai.md

@@ -12,6 +12,34 @@ const provider = sdk.ai.createProvider();
 
 This returns an `AIProvider` instance that can be used with the `ai` library.
 
+## Getting Upstream Providers
+
+To get information about available AI upstream providers and their configuration status:
+
+```ts
+const providers = sdk.ai.getUpstreamProviders();
+```
+
+This returns an array of `AIUpstreamProvider` objects, each containing:
+
+- `id` - The provider ID (`"openai"`, `"anthropic"`, `"google"`, or `"openrouter"`)
+- `status` - The configuration status (`"Ready"` or `"Missing"`)
+
+This is useful for checking which AI providers are configured before attempting to use them:
+
+```ts
+const providers = sdk.ai.getUpstreamProviders();
+const openaiProvider = providers.find((p) => p.id === "openai");
+
+if (openaiProvider?.status === "Ready") {
+  // OpenAI is configured and ready to use
+  const provider = sdk.ai.createProvider();
+  // Use the provider...
+} else {
+  sdk.window.showToast("OpenAI is not configured", { variant: "warning" });
+}
+```
+
 ::: tip
 The AI provider is compatible with all features of the `ai` library, including text generation, streaming, tool calling, and more. Refer to the [ai SDK documentation](https://ai-sdk.dev/) for advanced usage.
 :::

src/guides/files.md

@@ -179,3 +179,72 @@ export const init = async (sdk: FrontendSDK) => {
 ## The Result
 
 <img alt="Event output." src="/_images/view_file_frontend.png" center/>
+
+## Listening to File Events
+
+You can listen for events when hosted files are uploaded, updated, or deleted:
+
+### Listening for File Uploads
+
+```ts
+const handle = sdk.files.onUploadedHostedFile((file) => {
+  sdk.log.info(`File uploaded: ${file.name} (${file.size} bytes)`);
+  sdk.window.showToast(`File "${file.name}" uploaded`, { variant: "success" });
+});
+
+// Later, stop listening
+handle.stop();
+```
+
+### Listening for File Updates
+
+```ts
+const handle = sdk.files.onUpdatedHostedFile((file) => {
+  sdk.log.info(`File updated: ${file.name}`);
+  sdk.window.showToast(`File "${file.name}" updated`, { variant: "info" });
+});
+
+// Later, stop listening
+handle.stop();
+```
+
+### Listening for File Deletions
+
+```ts
+const handle = sdk.files.onDeletedHostedFile((fileId) => {
+  sdk.log.info(`File deleted: ${fileId}`);
+  sdk.window.showToast("File deleted", { variant: "info" });
+});
+
+// Later, stop listening
+handle.stop();
+```
+
+## Example: File Monitor Plugin
+
+This example creates a plugin that monitors all file operations and logs them:
+
+```ts
+import type { Caido } from "@caido/sdk-frontend";
+
+export type CaidoSDK = Caido;
+
+export const init = (sdk: CaidoSDK) => {
+  // Monitor file uploads
+  sdk.files.onUploadedHostedFile((file) => {
+    sdk.log.info(`[File Monitor] Uploaded: ${file.name} (${file.path})`);
+  });
+
+  // Monitor file updates
+  sdk.files.onUpdatedHostedFile((file) => {
+    sdk.log.info(`[File Monitor] Updated: ${file.name} (${file.path})`);
+  });
+
+  // Monitor file deletions
+  sdk.files.onDeletedHostedFile((fileId) => {
+    sdk.log.info(`[File Monitor] Deleted: ${fileId}`);
+  });
+
+  sdk.log.info("File monitor plugin initialized");
+};
+```

src/guides/match_replace.md

@@ -295,6 +295,69 @@ export const init = (sdk: CaidoSDK) => {
 };
 ```
 
+## Adding Indicators to Rules
+
+Indicators are visual badges displayed next to rule names in the collections tree. They're useful for highlighting important rules or showing status information.
+
+### Adding a Rule Indicator
+
+```ts
+const indicator = sdk.matchReplace.addRuleIndicator(ruleId, {
+  icon: "fas fa-exclamation-triangle",
+  description: "Security warning",
+});
+```
+
+The `addRuleIndicator` method returns a handle object with a `remove` method to remove the indicator later:
+
+```ts
+// Later, remove the indicator
+indicator.remove();
+```
+
+### Indicator Options
+
+- `icon` - Font Awesome icon class (e.g., `"fas fa-check"`, `"fas fa-warning"`)
+- `description` - Tooltip text shown on hover
+
+### Example: Rule Status Indicators
+
+This example adds indicators to rules based on their enabled status:
+
+```ts
+import type { Caido } from "@caido/sdk-frontend";
+
+export type CaidoSDK = Caido;
+
+export const init = (sdk: CaidoSDK) => {
+  const updateRuleIndicators = () => {
+    const rules = sdk.matchReplace.getRules();
+    
+    rules.forEach((rule) => {
+      if (rule.isEnabled) {
+        sdk.matchReplace.addRuleIndicator(rule.id, {
+          icon: "fas fa-check-circle",
+          description: "Rule is enabled",
+        });
+      } else {
+        sdk.matchReplace.addRuleIndicator(rule.id, {
+          icon: "fas fa-circle",
+          description: "Rule is disabled",
+        });
+      }
+    });
+  };
+
+  // Update indicators when rules change
+  sdk.matchReplace.onCurrentRuleChange(() => {
+    updateRuleIndicators();
+  });
+
+  // Initial update
+  updateRuleIndicators();
+};
+```
+
 ### Adding Custom Actions to Match and Replace Slots
 
 This example adds a custom button to the rule update header that duplicates the current rule when clicked.

src/guides/page.md

@@ -190,6 +190,74 @@ The `init` function creates the Vue app, mounts it to a root element, and regist
 
 <img alt="Add page SKD." src="/_images/add_page_sdk.png" center/>
 
+## Getting and Monitoring Context
+
+The Window SDK provides methods to get and monitor the global application context, including the current page context.
+
+### Getting Current Context
+
+To get the current global context:
+
+```ts
+const context = sdk.window.getContext();
+```
+
+The context includes:
+- `page` - The current page context (if on a specific page), which varies by page type
+
+### Monitoring Context Changes
+
+To listen for changes to the global context:
+
+```ts
+const handle = sdk.window.onContextChange((context) => {
+  if (context.page) {
+    console.log("Current page:", context.page.kind);
+    
+    // Access page-specific context
+    if (context.page.kind === "Replay") {
+      const replayContext = context.page;
+      console.log("Replay selection:", replayContext.selection);
+    }
+  }
+});
+
+// Later, stop listening
+handle.stop();
+```
+
+### Example: Context-Aware Plugin
+
+This example creates a plugin that reacts to context changes:
+
+```ts
+import type { Caido } from "@caido/sdk-frontend";
+
+export type CaidoSDK = Caido;
+
+export const init = (sdk: CaidoSDK) => {
+  sdk.window.onContextChange((context) => {
+    if (context.page) {
+      switch (context.page.kind) {
+        case "Replay":
+          sdk.log.info("User is on the Replay page");
+          break;
+        case "HTTPHistory":
+          sdk.log.info("User is on the HTTP History page");
+          break;
+        case "Sitemap":
+          sdk.log.info("User is on the Sitemap page");
+          break;
+        default:
+          sdk.log.info(`User is on the ${context.page.kind} page`);
+      }
+    } else {
+      sdk.log.info("User is not on a specific page");
+    }
+  });
+};
+```
+
 ## Interacting with Windows and Editors
 
 Used to interact with text within the application environment, allowing text selection, replacement, read permission designations, focusing and editor related messaging.

src/guides/replay.md

@@ -133,6 +133,46 @@ const handler = sdk.replay.onCurrentSessionChange((event) => {
 handler.stop();
 ```
 
+## Adding Indicators to Sessions
+
+Indicators are visual badges displayed next to session names in the collections tree. They're useful for highlighting important sessions or showing status information.
+
+### Adding a Session Indicator
+
+```ts
+const indicator = sdk.replay.addSessionIndicator(sessionId, {
+  icon: "fas fa-exclamation-triangle",
+  description: "Security warning",
+});
+```
+
+The `addSessionIndicator` method returns a handle object with a `remove` method to remove the indicator later:
+
+```ts
+// Later, remove the indicator
+indicator.remove();
+```
+
+### Indicator Options
+
+- `icon` - Font Awesome icon class (e.g., `"fas fa-check"`, `"fas fa-warning"`)
+- `description` - Tooltip text shown on hover
+
+## Adding Response View Modes
+
+You can add custom response view modes to the Replay page:
+
+```ts
+sdk.replay.addResponseViewMode({
+  label: "My Custom Response View",
+  view: {
+    component: MyResponseComponent,
+  },
+});
+```
+
+For more information on creating response view modes, see the [Add View Modes](/guides/view_modes.md) guide.
+
 ::: info
 Sessions and collections are persisted across Caido restarts, so programmatically created items will remain available.
 :::