### Install oackctl CLI Tool

Source: https://oack.io/docs

Installation methods for the official Oack command-line interface using either Homebrew or a shell script.

```bash
# Via Homebrew
brew tap oack-io/tap
brew install oackctl

# Via shell script
curl -sSfL "https://raw.githubusercontent.com/oack-io/oackctl/refs/heads/main/install-oackctl.sh" | bash
```

--------------------------------

### Install Oack Network Checker via Shell Script

Source: https://oack.io/docs

Downloads and executes the official Oack network tester installation script directly from the repository.

```bash
curl -sSfL "https://raw.githubusercontent.com/oack-io/network-tester/refs/heads/main/install-network-tester.sh" | bash
```

--------------------------------

### Install Oack Network Checker via Homebrew

Source: https://oack.io/docs

Installs the Oack network tester binary on macOS or Linux systems using the Homebrew package manager.

```bash
brew tap oack-io/tap
brew install network-tester
```

--------------------------------

### Manage Oack resources via CLI

Source: https://oack.io/docs

Commands to authenticate with the Oack platform, list teams and monitors, create new monitors, and retrieve probe results. These commands require the oackctl CLI tool installed and configured.

```bash
# Authenticate (opens browser for device flow)
oackctl login

# List your teams
oackctl teams list

# List monitors in a team
oackctl monitors list --team <team-id>

# Create a monitor
oackctl monitors create --team <team-id> \
  --name "Production API" \
  --url "https://api.example.com/health" \
  --interval 60

# View probe results
oackctl probes list --team <team-id> --monitor <monitor-id> --limit 10
```

--------------------------------

### Initialize Theme and Language Settings (JavaScript)

Source: https://oack.io/docs

This script initializes the application's theme based on user preferences or system settings and synchronizes the language with the SPA. It checks for a 'theme' in local storage or system preferences to apply a dark theme if applicable. It also sets the 'language' in local storage to the specified 'spaLang'.

```javascript
function(){const spaLang = "en"; (function() { const theme = localStorage.getItem('theme') if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark') } // Sync language with SPA so app.oack.io opens in the same language localStorage.setItem('language', spaLang) })() }()
```

--------------------------------

### Initialize Theme and Language Settings

Source: https://oack.io/demo

Sets the initial theme based on system preferences or local storage and synchronizes the application language. This ensures a consistent user experience across the SPA.

```javascript
(function(){
  const spaLang = "en";
  (function() {
    const theme = localStorage.getItem('theme');
    if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark');
    }
    localStorage.setItem('language', spaLang);
  })();
})();
```

--------------------------------

### Initialize Theme and Language Settings (JavaScript)

Source: https://oack.io/changelog

Initializes the application's theme based on user preference or system settings and synchronizes the language with the SPA. It checks for a 'theme' in localStorage or system preferences to apply a dark theme if applicable. It also sets the application language based on the 'spaLang' variable.

```javascript
function(){
const spaLang = "en";
(function() {
  const theme = localStorage.getItem('theme');
  if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  }
  // Sync language with SPA so app.oack.io opens in the same language
  localStorage.setItem('language', spaLang);
})();
}
```

--------------------------------

### Permissions Summary

Source: https://oack.io/docs

This summary outlines the minimum account and team roles required to perform various actions within the Oack.io platform.

```APIDOC
## Permissions Summary

### Description
This table details the minimum required Account Role and Team Role to perform specific actions within the Oack.io platform.

| Action                      | Min Account Role        | Min Team Role |
| --------------------------- | ----------------------- | ------------- |
| View monitors & probes      | Guest                   | Member        |
| Create share links          | Member                  | Member        |
| Create/update/delete monitors | Member                  | Admin         |
| Manage alert channels       | Member                  | Admin         |
| Invite account members      | Admin                   | -             |
| Manage subscription         | Owner / Billing Admin   | -             |
| Delete account              | Owner                   | -             |
```

--------------------------------

### Deploy Oack Network Checker with Docker

Source: https://oack.io/docs

Runs the Oack network tester as a containerized service. Requires NET_RAW capabilities and a local volume for persistent data storage.

```bash
docker pull oackio/network-tester:latest

mkdir -p $HOME/.net-checker-data
docker run --rm \
    --cap-add NET_RAW \
    -v $HOME/.net-checker-data:/data \
    oackio/network-tester:latest \
    --token-db /data/tokens.db --mode shared
```

--------------------------------

### Initialize and Persist Website Theme

Source: https://self-status.oack.io/

This IIFE detects the preferred theme from URL parameters, local storage, or system settings. It applies the theme to the document root and persists the selection to local storage if provided via URL.

```javascript
(function(){
	var p = new URLSearchParams(window.location.search).get('theme');
	var s = localStorage.getItem('sp-theme');
	var t = p || (s || ((window.matchMedia && window.matchMedia('(prefers-color-scheme:dark)').matches) ? 'dark' : 'light'));
	document.documentElement.setAttribute('data-theme', t);
	if (p) localStorage.setItem('sp-theme', p);
})();
```

--------------------------------

### Oack.io REST API Overview

Source: https://oack.io/docs

The Oack.io REST API provides comprehensive access to all platform functionalities. The base URL for the API is `https://api.oack.io/api/v1/`. For detailed endpoint information, refer to the [Swagger documentation](https://api.oack.io/swagger/).

```APIDOC
## Oack.io REST API

### Description
All platform functionality is available through the REST API at `https://api.oack.io/api/v1/`. Browse the full [Swagger documentation](https://api.oack.io/swagger/) for detailed endpoint information.

### Base URL
`https://api.oack.io/api/v1/`

### Authentication
Authentication details are available in the Swagger documentation.
```

--------------------------------

### Implement Documentation Search and Indexing

Source: https://oack.io/docs

Functions to extract documentation content from the DOM, filter results based on user input, and handle keyboard navigation for the search interface. It includes text highlighting and snippet generation for search results.

```javascript
function L() {
  const e = [], t = document.querySelector("article");
  return t && t.querySelectorAll("h2[id], h3[id]").forEach(s => {
    const c = s.id, a = s.textContent?.trim() || "";
    let i = "", r = s.nextElementSibling;
    for (; r && !r.matches("h2, h3");) i += " " + (r.textContent?.trim() || ""), r = r.nextElementSibling;
    e.push({ id: c, heading: a, text: i.trim() });
  }), e;
}

function w(e) {
  const t = e.trim().toLowerCase();
  if (!t) { u.classList.add("hidden"); return; }
  const n = v.filter(s => s.heading.toLowerCase().includes(t) || s.text.toLowerCase().includes(t));
  l.innerHTML = "", d = -1, n.length === 0 ? (m.classList.remove("hidden"), l.classList.add("hidden")) : (m.classList.add("hidden"), l.classList.remove("hidden"), n.forEach((s, c) => {
    const a = document.createElement("li"), i = s.text.toLowerCase().includes(t) ? s.text : s.heading, r = x(i, e);
    a.innerHTML = `<button class="search-result" data-id="${s.id}">${h(s.heading, e)}</button>`, l.appendChild(a);
  })), u.classList.remove("hidden");
}
```

--------------------------------

### Implement Theme Toggle Utility

Source: https://self-status.oack.io/

A JavaScript utility that manages light and dark mode switching. It updates the document theme attribute, persists the preference in localStorage, and toggles the visibility of sun and moon icons.

```javascript
(function(){
	function updateIcon(){
		var t=document.documentElement.getAttribute('data-theme');
		var sun=document.getElementById('theme-icon-sun');
		var moon=document.getElementById('theme-icon-moon');
		if(sun&&moon){
			sun.style.display=t==='dark'?'block':'none';
			moon.style.display=t==='dark'?'none':'block';
		}
	}
	updateIcon();
	var btn=document.getElementById('theme-toggle');
	if(btn)btn.addEventListener('click',function(){
		var cur=document.documentElement.getAttribute('data-theme');
		var next=cur==='dark'?'light':'dark';
		document.documentElement.setAttribute('data-theme',next);
		localStorage.setItem('sp-theme',next);
		updateIcon();
	});
})();
```

--------------------------------

### Configure Oack MCP Server for Claude

Source: https://oack.io/docs

JSON configuration snippet for integrating the Oack Model Context Protocol server into Claude Code settings.

```json
{
  "mcpServers": {
    "oack": {
      "type": "http",
      "url": "https://api.oack.io/mcp/"
    }
  }
}
```

--------------------------------

### Toggle Theme and Mobile Menu (JavaScript)

Source: https://oack.io/docs

This script handles user interactions for theme toggling and mobile menu display. It adds event listeners to a theme toggle button to switch between light and dark modes and store the preference in local storage. It also manages the visibility of a mobile menu and associated icons upon clicking a menu toggle button.

```javascript
document.getElementById("theme-toggle")?.addEventListener("click",()=>{
  const e=document.documentElement.classList.toggle("dark");
  localStorage.setItem("theme",e?"dark":"light")
});

document.getElementById("mobile-menu-toggle")?.addEventListener("click",()=>{
  const e=document.getElementById("mobile-menu"),
  n=document.getElementById("menu-icon"),
  d=document.getElementById("close-icon");
  e?.classList.toggle("hidden"),
  n?.classList.toggle("hidden"),
  d?.classList.toggle("hidden")
});
```

--------------------------------

### Initialize Dark Mode and Language Settings (JavaScript)

Source: https://oack.io/

This snippet initializes dark mode based on user preference or system settings and synchronizes the application's language with the SPA. It reads theme preference from local storage and applies the 'dark' class to the document element if necessary. It also sets the language preference for the SPA.

```javascript
 (function() {
  const spaLang = "en";
  (function() {
    const theme = localStorage.getItem('theme');
    if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark');
    }
    localStorage.setItem('language', spaLang);
  })();
})();
```

--------------------------------

### Manage UI Toggles and Dropdowns

Source: https://oack.io/demo

Handles event listeners for theme toggling, mobile menu visibility, and language dropdown interactions. It uses DOM manipulation to toggle CSS classes for visibility and state management.

```javascript
document.getElementById("theme-toggle")?.addEventListener("click", () => {
  const e = document.documentElement.classList.toggle("dark");
  localStorage.setItem("theme", e ? "dark" : "light");
});

document.getElementById("mobile-menu-toggle")?.addEventListener("click", () => {
  const e = document.getElementById("mobile-menu"),
        n = document.getElementById("menu-icon"),
        d = document.getElementById("close-icon");
  e?.classList.toggle("hidden");
  n?.classList.toggle("hidden");
  d?.classList.toggle("hidden");
});

const l = document.getElementById("lang-toggle"),
      t = document.getElementById("lang-dropdown");
l?.addEventListener("click", () => t?.classList.toggle("hidden"));
document.addEventListener("click", e => {
  e.target.closest("#lang-switcher") || t?.classList.add("hidden");
});
```

--------------------------------

### Grant Permissions to Oack MCP Tools

Source: https://oack.io/docs

CLI command to authorize Claude to access all Oack MCP tools without requiring manual permission prompts.

```bash
/permissions add mcp__oack__* "allow all Oack MCP tools"
```

--------------------------------

### Implement Clipboard Copy Functionality in JavaScript

Source: https://oack.io/docs

This script attaches event listeners to copy buttons to copy data to the clipboard and toggle UI icons. It is used for enhancing user interaction when copying code snippets.

```javascript
document.querySelectorAll(".copy-btn").forEach(e=>{e.addEventListener("click",()=>{const d=e.dataset.code||"";navigator.clipboard.writeText(d).then(()=>{const c=e.querySelector(".copy-icon"),o=e.querySelector(".check-icon");c.classList.add("hidden"),o.classList.remove("hidden"),setTimeout(()=>{c.classList.remove("hidden"),o.classList.add("hidden")},2e3)})})});
```

--------------------------------

### Handle Theme Toggle and Mobile Menu (JavaScript)

Source: https://oack.io/

This JavaScript code handles user interactions for theme toggling and mobile menu display. It adds event listeners to a theme toggle button to switch between light and dark modes and updates local storage accordingly. It also manages the visibility of a mobile menu and associated icons.

```javascript
document.getElementById("theme-toggle")?.addEventListener("click",()=>{
  const e=document.documentElement.classList.toggle("dark");
  localStorage.setItem("theme",e?"dark":"light");
});
document.getElementById("mobile-menu-toggle")?.addEventListener("click",()=>{
  const e=document.getElementById("mobile-menu"),
        n=document.getElementById("menu-icon"),
        d=document.getElementById("close-icon");
  e?.classList.toggle("hidden"),
  n?.classList.toggle("hidden"),
  d?.classList.toggle("hidden");
});
```

--------------------------------

### Account Roles

Source: https://oack.io/docs

Users within an Oack.io account are assigned one of five roles, each with specific permissions for managing the account and its resources.

```APIDOC
## Account Roles

### Description
Every user in an account has one of five roles, each granting different levels of access and control over account-level resources.

### Roles

*   **Owner**: Full control. Manage subscription, transfer ownership, delete account.
*   **Admin**: Create/manage teams, monitors, alert channels. Invite/remove members.
*   **Billing Admin**: View/manage subscription and billing. Read-only access to teams.
*   **Member**: Create teams and monitors, manage alert channels, invite team members.
*   **Guest**: Read-only access. Default role for newly invited users.
```

--------------------------------

### Handle Theme Toggle and Mobile Menu (JavaScript)

Source: https://oack.io/changelog

Adds event listeners for theme toggling and mobile menu interactions. The theme toggle updates localStorage and applies a 'dark' class to the document element. The mobile menu toggle shows/hides the menu and switches between menu and close icons.

```javascript
document.getElementById("theme-toggle")?.addEventListener("click",()=>{
  const e=document.documentElement.classList.toggle("dark");
  localStorage.setItem("theme",e?"dark":"light");
});
document.getElementById("mobile-menu-toggle")?.addEventListener("click",()=>{
  const e=document.getElementById("mobile-menu"),
        n=document.getElementById("menu-icon"),
        d=document.getElementById("close-icon");
  e?.classList.toggle("hidden");
  n?.classList.toggle("hidden");
  d?.classList.toggle("hidden");
});
```

--------------------------------

### Handle Asynchronous Form Submission

Source: https://oack.io/demo

Intercepts the demo request form submission to send data to the backend via Fetch API. It manages UI states such as disabling the submit button and displaying success or error messages.

```javascript
const t = document.getElementById("demo-form"),
      r = document.getElementById("form-success"),
      n = document.getElementById("form-error");

t?.addEventListener("submit", async o => {
  o.preventDefault();
  const e = t.querySelector('button[type="submit"]');
  e.disabled = !0;
  e.textContent = "Sending...";
  n.classList.add("hidden");
  const s = new FormData(t);
  try {
    if (!(await fetch("/api/demo", {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify(Object.fromEntries(s))
    })).ok) throw new Error("Failed");
    t.classList.add("hidden");
    r.classList.remove("hidden");
  } catch {
    n.textContent = "Something went wrong. Please try again or reach out via Discord/Telegram.";
    n.classList.remove("hidden");
    e.disabled = !1;
    e.textContent = "Request Demo";
  }
});
```

--------------------------------

### Team Roles

Source: https://oack.io/docs

Within each team, users are assigned specific roles that define their permissions for managing team resources like monitors and members.

```APIDOC
## Team Roles

### Description
Users within a team have specific roles that determine their permissions for managing team-specific resources.

### Roles

*   **Owner**: Full control. Delete team, transfer ownership.
*   **Admin**: Create/manage monitors and alert channels. Manage members.
*   **Member**: View monitors/probes/metrics. Create share links. Cannot modify monitors.
```

--------------------------------

### Manage UI Toggles and Dropdowns

Source: https://oack.io/privacy

Handles interactive UI elements including the theme toggle button, mobile navigation menu visibility, and the language selection dropdown. It uses event listeners to update DOM classes and local storage states.

```JavaScript
document.getElementById("theme-toggle")?.addEventListener("click",()=>{
  const e = document.documentElement.classList.toggle("dark");
  localStorage.setItem("theme", e ? "dark" : "light");
});

document.getElementById("mobile-menu-toggle")?.addEventListener("click",()=>{
  const e = document.getElementById("mobile-menu"),
        n = document.getElementById("menu-icon"),
        d = document.getElementById("close-icon");
  e?.classList.toggle("hidden");
  n?.classList.toggle("hidden");
  d?.classList.toggle("hidden");
});

const l = document.getElementById("lang-toggle"),
      t = document.getElementById("lang-dropdown");
l?.addEventListener("click", () => t?.classList.toggle("hidden"));
document.addEventListener("click", e => {
  e.target.closest("#lang-switcher") || t?.classList.add("hidden");
});
```

--------------------------------

### Language Switcher Functionality (JavaScript)

Source: https://oack.io/docs

This script implements a language switcher dropdown. It toggles the visibility of a language dropdown menu when a language toggle element is clicked. It also ensures the dropdown is hidden when a click occurs outside the language switcher component.

```javascript
const l=document.getElementById("lang-toggle"),t=document.getElementById("lang-dropdown");
l?.addEventListener("click",()=>t?.classList.toggle("hidden"));
document.addEventListener("click",e=>{
  e.target.closest("#lang-switcher")||t?.classList.add("hidden")
});
```

--------------------------------

### Manage Language Dropdown and Click Outside (JavaScript)

Source: https://oack.io/

This JavaScript snippet manages the visibility of a language selection dropdown. It toggles the dropdown when a language toggle element is clicked and hides it when a click occurs outside the language switcher component. This enhances user experience for language selection.

```javascript
const l=document.getElementById("lang-toggle"),
      t=document.getElementById("lang-dropdown");
l?.addEventListener("click", ()=>t?.classList.toggle("hidden"));
document.addEventListener("click", e=>{
  e.target.closest("#lang-switcher")||t?.classList.add("hidden");
});
```

--------------------------------

### Manage Language Dropdown (JavaScript)

Source: https://oack.io/changelog

Handles the visibility of a language selection dropdown. It toggles the dropdown when the language toggle button is clicked and hides it when a click occurs outside the language switcher element.

```javascript
const l=document.getElementById("lang-toggle"),
      t=document.getElementById("lang-dropdown");
l?.addEventListener("click",()=>t?.classList.toggle("hidden"));
document.addEventListener("click",e=>{
  e.target.closest("#lang-switcher")||t?.classList.add("hidden");
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.