### Clone Repository and Install Dependencies

Source: https://github.com/deri-kurniawan/sessify-browser-extension/blob/main/apps/ext/README.md

Use these bash commands to clone the Sessify repository and install its dependencies using Bun.

```bash
git clone https://github.com/Deri-Kurniawan/sessify-browser-extension.git
cd sessify-browser-extension
bun install
```

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

### Run Development Server

Source: https://github.com/deri-kurniawan/sessify-browser-extension/blob/main/apps/ext/README.md

Execute this command to start the development server for the Sessify extension.

```bash
bun dev
```

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

### Storage Helper Class

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

The Storage class simplifies interaction with the browser's local storage API. Use its methods to get, set, remove, or clear data. It handles asynchronous operations for storage management.

```typescript
import { Storage } from "@/lib/helpers/Storage";

// Get a value from storage
const sessions = await Storage.get<AppSession[]>("sessify_sessions_v1");
// Returns: AppSession[] | null

// Set a value in storage
await Storage.set("sessify_sessions_v1", sessions);

// Remove a key from storage
await Storage.remove("sessify_active_session_id_v1");

// Clear all storage
await Storage.clear();

// Storage keys used by Sessify (from CONFIGS)
const CONFIGS = {
  KEYS: {
    EXTENSION_ID: "sessify_extension_id_v1",
    SESSIONS: "sessify_sessions_v1",
    ACTIVE_SESSION_ID: "sessify_active_session_id_v1",
    SETTINGS: "sessify_settings_v1",
  },
};

```

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

### Cookie Helper Class

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

The `Cookie` class offers utility methods for managing browser cookies via the Chrome Extensions API, including getting, setting, and removing cookies.

```APIDOC
## Cookie Helper Class

### Description
The `Cookie` class provides methods for managing browser cookies through the Chrome Extensions API.

### Methods

- **`Cookie.getAll(details: { url: string }): Promise<chrome.cookies.Cookie[]>`**: Retrieves all cookies for a given URL.
  - **Parameters**:
    - `url` (string) - The URL to get cookies for.
  - **Example**: `const cookies = await Cookie.getAll({ url: "https://example.com" });`

- **`Cookie.set(details: chrome.cookies.SetDetails): Promise<chrome.cookies.Cookie>`**: Sets a single cookie.
  - **Parameters**:
    - `details` (chrome.cookies.SetDetails) - An object containing cookie properties like `url`, `name`, `value`, `path`, `secure`, `httpOnly`, `sameSite`.
  - **Example**: `await Cookie.set({
    url: "https://example.com",
    name: "my_cookie",
    value: "cookie_value",
    path: "/",
    secure: true,
    httpOnly: false,
    sameSite: "lax"
  });`

- **`Cookie.setMany(cookies: chrome.cookies.SetDetails[]): Promise<chrome.cookies.Cookie[]>`**: Sets multiple cookies at once.
  - **Parameters**:
    - `cookies` (chrome.cookies.SetDetails[]) - An array of cookie details objects.
  - **Example**: `await Cookie.setMany([
    { name: "cookie1", value: "val1", domain: ".example.com", path: "/", secure: true, httpOnly: false, sameSite: "lax" },
    { name: "cookie2", value: "val2", domain: ".example.com", path: "/", secure: true, httpOnly: true, sameSite: "strict" }
  ]);`

- **`Cookie.remove(url: string, name: string): Promise<void>`**: Removes a single cookie by its URL and name.
  - **Example**: `await Cookie.remove("https://example.com", "my_cookie");`

- **`Cookie.removeMany(url: string, cookies: chrome.cookies.Cookie[]): Promise<void>`**: Removes multiple cookies from a given URL.
  - **Parameters**:
    - `url` (string) - The URL from which to remove cookies.
    - `cookies` (chrome.cookies.Cookie[]) - An array of cookie objects to remove.
  - **Example**: `await Cookie.removeMany("https://example.com", cookies);`
```

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

### Cookie Helper Class

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

The Cookie class provides a streamlined interface for managing browser cookies via the Chrome Extensions API. It supports getting, setting, and removing single or multiple cookies.

```typescript
import { Cookie } from "@/lib/helpers/Cookie";

// Get all cookies for a URL
const cookies = await Cookie.getAll({ url: "https://example.com" });

// Set a single cookie
const cookie = await Cookie.set({
  url: "https://example.com",
  name: "my_cookie",
  value: "cookie_value",
  path: "/",
  secure: true,
  httpOnly: false,
  sameSite: "lax"
});

// Set multiple cookies at once
await Cookie.setMany([
  { name: "cookie1", value: "val1", domain: ".example.com", path: "/", secure: true, httpOnly: false, sameSite: "lax" },
  { name: "cookie2", value: "val2", domain: ".example.com", path: "/", secure: true, httpOnly: true, sameSite: "strict" }
]);

// Remove a single cookie
await Cookie.remove("https://example.com", "my_cookie");

// Remove multiple cookies
await Cookie.removeMany("https://example.com", cookies);

```

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

### Build Commands

Source: https://github.com/deri-kurniawan/sessify-browser-extension/blob/main/README.md

Commands for building the entire project or specific applications.

```bash
bun run build
```

```bash
# Browser extension
bun run build --filter=ext

# Web application
bun run build --filter=web
```

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

### Development Commands

Source: https://github.com/deri-kurniawan/sessify-browser-extension/blob/main/README.md

Commands for running development servers for the entire monorepo or specific applications.

```bash
bun run dev
```

```bash
# Browser extension only
bun run dev --filter=ext

# Web application only
bun run dev --filter=web
```

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

### Build Extension for Chrome

Source: https://github.com/deri-kurniawan/sessify-browser-extension/blob/main/apps/ext/README.md

Run this command to build the Sessify extension specifically for the Chrome browser.

```bash
bun run build
```

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

### Build Extension for Firefox

Source: https://github.com/deri-kurniawan/sessify-browser-extension/blob/main/apps/ext/README.md

Run this command to build the Sessify extension specifically for the Firefox browser.

```bash
bun run build:firefox
```

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

### Linting and Formatting Commands

Source: https://github.com/deri-kurniawan/sessify-browser-extension/blob/main/README.md

Commands for code quality, type checking, and validation.

```bash
# Lint all code
bun run lint

# Format all code
bun run format

# Type checking
bun run check-types

# Validate everything (lint + types + build)
bun run validate
```

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

### Project Directory Structure

Source: https://github.com/deri-kurniawan/sessify-browser-extension/blob/main/README.md

Overview of the monorepo file organization.

```text
├── apps/
│   ├── ext/          # Browser extension (WXT-based)
│   └── web/          # Web application (Next.js)
├── packages/
│   ├── ui/           # Shared UI components library
│   ├── tailwind-config/  # Shared Tailwind CSS configuration
│   └── typescript-config/ # Shared TypeScript configuration
└── turbo.json        # Turborepo configuration
```

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

### Configure WXT Extension

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

Defines the extension's manifest, permissions, and build settings using the WXT framework. Includes Vite plugins and package.json details.

```typescript
// wxt.config.ts
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "wxt";
import pkg from "./package.json";

export default defineConfig({
  modules: ["@wxt-dev/module-react"],
  srcDir: "src",
  outDir: "dist",
  publicDir: "public",

  vite: () => ({
    plugins: [tailwindcss()],
  }),

  manifest: {
    manifest_version: 3,
    name: pkg.launcherName || pkg.name,
    permissions: [
      "sidePanel",
      "cookies",
      "storage",
      "tabs",
      "activeTab",
      "scripting",
      "unlimitedStorage",
      "<all_urls>",
    ],
    host_permissions: ["https://*/*", "http://*/*"],
    commands: {
      "toggle-feature": {
        suggested_key: {
          default: "Alt+Shift+S",
          mac: "Command+Shift+S",
        },
        description: "Toggle feature",
      },
    },
    // Firefox-specific settings
    browser_specific_settings: {
      gecko: {
        id: "{65005012-da8c-4536-9b03-6248965f257d}",
        strict_min_version: "58.0",
      },
    },
  },
});

// Development commands
// bun run dev          - Development mode (Chrome)
// bun run dev:firefox  - Development mode (Firefox)
// bun run build        - Production build (Chrome)
// bun run build:firefox - Production build (Firefox)

```

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

### Storage Helper Class

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

The `Storage` class provides a straightforward API for interacting with the browser's local storage, enabling persistence of extension data.

```APIDOC
## Storage Helper Class

### Description
The `Storage` class provides a simple API for managing extension local storage using the browser's `storage.local` API.

### Methods

- **`Storage.get<T>(key: string): Promise<T | null>`**: Retrieves a value from local storage by its key.
  - **Example**: `const sessions = await Storage.get<AppSession[]>("sessify_sessions_v1");`

- **`Storage.set<T>(key: string, value: T): Promise<void>`**: Sets a value in local storage for a given key.
  - **Example**: `await Storage.set("sessify_sessions_v1", sessions);`

- **`Storage.remove(key: string): Promise<void>`**: Removes a key-value pair from local storage.
  - **Example**: `await Storage.remove("sessify_active_session_id_v1");`

- **`Storage.clear(): Promise<void>`**: Clears all data from local storage.
  - **Example**: `await Storage.clear();`

### Storage Keys

The following keys are used by Sessify (defined in `CONFIGS.KEYS`):

- `sessify_extension_id_v1`
- `sessify_sessions_v1`
- `sessify_active_session_id_v1`
- `sessify_settings_v1`
```

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

### Maintenance Commands

Source: https://github.com/deri-kurniawan/sessify-browser-extension/blob/main/README.md

Commands for cleaning build artifacts and dependencies.

```bash
# Clean build artifacts
bun run clean

# Clean everything including node_modules
bun run clean:all
```

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

### SiteStorage Helper Class

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

The `SiteStorage` class is responsible for capturing and restoring website-specific storage data, including localStorage, sessionStorage, and cookies.

```APIDOC
## SiteStorage Helper Class

### Description
The `SiteStorage` class manages the capture and restoration of website storage data (localStorage, sessionStorage, and cookies) for the current browser tab.

### Methods

- **`SiteStorage.getStorageFromCurrentTab(): Promise<SiteStorageData>`**: Retrieves all storage data (localStorage, sessionStorage, cookies) from the current active tab.
  - **Returns**: `Promise<{
    localStorage: Record<string, string>,
    sessionStorage: Record<string, string>,
    cookies: Browser.cookies.Cookie[]
  }>`

- **`SiteStorage.clearStorageForCurrentTab(): Promise<void>`**: Clears all storage data for the current tab. Useful before switching sessions.

- **`SiteStorage.applyStorageToCurrentTab(storageData: SiteStorageData): Promise<void>`**: Applies provided storage data (localStorage, sessionStorage, cookies) to the current tab.
  - **Example**: `await SiteStorage.applyStorageToCurrentTab({
    localStorage: { "auth_token": "abc123", "user_id": "42" },
    sessionStorage: { "temp_data": "xyz" },
    cookies: [
      {
        name: "session_id",
        value: "sess_abc123",
        domain: ".example.com",
        path: "/",
        secure: true,
        httpOnly: true,
        sameSite: "lax"
      }
    ]
  });`
```

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

### SiteStorage Helper Class

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

SiteStorage manages website-specific storage (localStorage, sessionStorage, cookies) for the current tab. Use it to capture, clear, or apply storage data, essential for session switching.

```typescript
import { SiteStorage } from "@/lib/helpers/SiteStorage";

// Get all storage data from the current active tab
const tabStorage = await SiteStorage.getStorageFromCurrentTab();
// Returns: {
//   localStorage: Record<string, string>,
//   sessionStorage: Record<string, string>,
//   cookies: Browser.cookies.Cookie[]
// }

// Clear all storage for the current tab (before switching sessions)
await SiteStorage.clearStorageForCurrentTab();

// Apply stored session data to the current tab
await SiteStorage.applyStorageToCurrentTab({
  localStorage: { "auth_token": "abc123", "user_id": "42" },
  sessionStorage: { "temp_data": "xyz" },
  cookies: [
    {
      name: "session_id",
      value: "sess_abc123",
      domain: ".example.com",
      path: "/",
      secure: true,
      httpOnly: true,
      sameSite: "lax"
    }
  ]
});

```

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

### Quality Assurance Commands

Source: https://github.com/deri-kurniawan/sessify-browser-extension/blob/main/README.md

Commands for security auditing and fixing vulnerabilities.

```bash
# Security audit
bun run audit

# Fix security issues (if any)
bun run audit:fix
```

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

### SessionProvider and useSessions Hook

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

The SessionProvider React context and useSessions hook facilitate the management of browser sessions within the extension. SessionProvider wraps the application to provide session state and actions, while useSessions allows components to access and manipulate this state.

```APIDOC
## SessionProvider and useSessions Hook

### Description
The `SessionProvider` React context provides session state and actions to all child components. The `useSessions` hook gives access to the session data and management functions.

### Usage

**Wrapping the application:**
```typescript
import { SessionProvider } from "@/features/session/context/SessionContext";

function App() {
  return (
    <SessionProvider watchTabChange={true}>
      <SessionPage />
    </SessionProvider>
  );
}
```

**Using the hook in components:**
```typescript
import { useSessions } from "@/features/session/context/SessionContext";

function SessionList() {
  const {
    sessions,           // AppSession[] - all sessions for current domain
    activeSessionId,    // string - currently active session
    error,              // string | null - error message
    loadSessions,       // () => Promise<MessageResponse<AppSession[]>>
    loadActiveSession,  // () => Promise<MessageResponse<string>>
    createNewSession,   // () => Promise<MessageResponse>
    refreshCurrentTab,  // () => Promise<MessageResponse>
    saveNewSession,     // (data?) => Promise<MessageResponse<AppSession>>
    switchSessionById,  // (id) => Promise<MessageResponse>
    deleteSessionById,  // (id) => Promise<MessageResponse>
    updateSessionById,  // (id, data) => Promise<MessageResponse>
  } = useSessions();

  // ... component logic using these functions and state
}
```

### Available Functions and State from `useSessions`:

- **`sessions`** (AppSession[]): An array of all sessions for the current domain.
- **`activeSessionId`** (string): The ID of the currently active session.
- **`error`** (string | null): An error message if any operation fails.
- **`loadSessions()`**: Loads all sessions for the current domain. Returns `Promise<MessageResponse<AppSession[]>>`.
- **`loadActiveSession()`**: Loads the currently active session. Returns `Promise<MessageResponse<string>>`.
- **`createNewSession()`**: Creates a new session. Returns `Promise<MessageResponse>`.
- **`refreshCurrentTab()`**: Refreshes the current browser tab. Returns `Promise<MessageResponse>`.
- **`saveNewSession(data?)`**: Saves a new session with optional data. Returns `Promise<MessageResponse<AppSession>>`.
- **`switchSessionById(id)`**: Switches to a session by its ID. Returns `Promise<MessageResponse>`.
- **`deleteSessionById(id)`**: Deletes a session by its ID. Returns `Promise<MessageResponse>`.
- **`updateSessionById(id, data)`**: Updates a session by its ID with new data. Returns `Promise<MessageResponse>`.
```

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

### Initialize SessifyExtension Background Script

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

Initialize the SessifyExtension in the background script. This class handles all session management operations and message processing from the UI.

```typescript
import { SessifyExtension } from "@/background/SessifyExtension";

// Initialize in background.ts
export default defineBackground(() => {
  SessifyExtension.prototype.init();
});

// The extension handles these message actions:
// - GET_FILTERED_SESSIONS_BY_ACTIVE_TAB: Get sessions matching current tab's domain
// - SAVE_CURRENT_TAB_STORAGE_TO_EXTENSION_STORAGE: Save current tab as new session
// - SWITCH_SESSION_BY_ID: Switch to a specific session
// - UPDATE_SESSION_BY_ID: Update session metadata
// - DELETE_SESSION_BY_ID: Remove a session
// - CREATE_NEW_SESSION: Create blank session (clears storage)
// - REFRESH_CURRENT_TAB: Reload the current tab
// - GET_ACTIVE_SESSION: Get the active session ID

// Session data structure (AppSession)
interface AppSession {
  id: string;                    // UUID
  appIconUrl: string;            // Favicon URL
  title: string;                 // User-defined title
  domain: {
    domain: string;              // e.g., "example.com"
    subdomain: string;           // e.g., "blog"
    sld: string;                 // e.g., "example"
    tld: string;                 // e.g., "com"
    fqdn: string;                // e.g., "blog.example.com"
    isIp: boolean;               // Is IP address
    isIcann: boolean;            // Valid ICANN TLD
    port: number | null;         // Port number if specified
  };
  createdAt: number;             // Timestamp
  updatedAt: number;             // Timestamp
  state: {
    localStorage: Record<string, string>;
    sessionStorage: Record<string, string>;
    cookies: chrome.cookies.Cookie[];
  };
}
```

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

### SessifyExtension Class

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

The `SessifyExtension` class is the core background script that handles all session management operations. It registers event listeners, processes messages from the UI, and manages browser storage.

```APIDOC
## SessifyExtension Class

### Description
The core background script responsible for session management. It initializes event listeners, processes messages from UI components, and interacts with browser storage APIs.

### Initialization

This class should be initialized in the extension's background script (e.g., `background.ts`).

```typescript
import { SessifyExtension } from "@/background/SessifyExtension";

export default defineBackground(() => {
  SessifyExtension.prototype.init();
});
```

### Handled Message Actions

The extension listens for and processes the following message actions from UI components:

- **GET_FILTERED_SESSIONS_BY_ACTIVE_TAB**: Retrieves sessions matching the current tab's domain.
- **SAVE_CURRENT_TAB_STORAGE_TO_EXTENSION_STORAGE**: Saves the current tab's storage (cookies, localStorage, sessionStorage) as a new session.
- **SWITCH_SESSION_BY_ID**: Switches the active session to a specific session identified by its ID.
- **UPDATE_SESSION_BY_ID**: Updates metadata for a given session.
- **DELETE_SESSION_BY_ID**: Removes a session from storage.
- **CREATE_NEW_SESSION**: Creates a new, blank session, clearing the current tab's storage.
- **REFRESH_CURRENT_TAB**: Reloads the current browser tab.
- **GET_ACTIVE_SESSION**: Retrieves the ID of the currently active session.
```

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

### Implement UI Buttons

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

Customizable button component supporting various variants, sizes, and the asChild prop for polymorphic rendering.

```tsx
import { Button } from "@/components/ui/button";

// Default button
<Button>Click me</Button>

// Button variants
<Button variant="default">Primary</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Cancel</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link Style</Button>

// Button sizes
<Button size="default">Default</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon"><SaveIcon /></Button>
<Button size="icon-sm"><TrashIcon /></Button>

// As child (render as different element)
<Button asChild>
  <a href="/settings">Settings</a>
</Button>

// With icons
<Button className="gap-2">
  <SaveIcon className="size-4" />
  Save Session
</Button>
```

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

### Interact with Background Service API

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

Use the backgroundService to perform session management operations from UI components. Ensure the service is initialized before use.

```typescript
import { backgroundService } from "@/services/backgroundService";

// Get all sessions filtered by the current active tab's domain
const response = await backgroundService.getFilteredSessionByActiveTab();
if (response.success) {
  console.log("Sessions:", response.data); // AppSession[]
}

// Get the currently active session ID
const activeResponse = await backgroundService.getActiveSession();
if (activeResponse.success && activeResponse.data) {
  console.log("Active session ID:", activeResponse.data);
}

// Save the current tab's storage as a new session
const saveResponse = await backgroundService.saveNewSession({
  title: "My Work Account"
});
if (saveResponse.success) {
  console.log("Saved session:", saveResponse.data); // AppSession
}

// Switch to a different session by ID
const switchResponse = await backgroundService.switchSessionById("session-uuid-here");
if (switchResponse.success) {
  console.log("Switched successfully");
  // Tab will be reloaded with new session data
}

// Update a session's title
const updateResponse = await backgroundService.updateSessionById(
  "session-uuid-here",
  { title: "Updated Title" }
);

// Delete a session
const deleteResponse = await backgroundService.deleteSessionById("session-uuid-here");

// Create a new blank session (clears current storage)
const newResponse = await backgroundService.createNewSession();

// Refresh the current tab
const refreshResponse = await backgroundService.refreshCurrentTab();
```

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

### Manage Browser Tabs with BrowserTabs Helper

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

Provides methods to interact with browser tabs, including fetching active tab details, reloading, closing, and creating new tabs.

```typescript
import { BrowserTabs } from "@/lib/helpers/BrowserTabs";

// Get the currently active tab
const activeTab = await BrowserTabs.getCurrentActive();
if (activeTab) {
  console.log("Tab ID:", activeTab.id);
  console.log("Tab URL:", activeTab.url);
  console.log("Tab title:", activeTab.title);
  console.log("Favicon:", activeTab.favIconUrl);
}

// Reload a specific tab
await BrowserTabs.reload(activeTab.id);

// Close a tab
await BrowserTabs.close(tabId);

// Create a new tab
const newTab = await BrowserTabs.create("https://example.com");
```

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

### SessionProvider and useSessions Hook

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

Use SessionProvider to wrap your application and useSessions hook to access session data and management functions within components. Ensure SessionProvider is rendered to provide context.

```typescript
import { SessionProvider, useSessions } from "@/features/session/context/SessionContext";

// Wrap your app with SessionProvider
function App() {
  return (
    <SessionProvider watchTabChange={true}>
      <SessionPage />
    </SessionProvider>
  );
}

// Use the hook in components
function SessionList() {
  const {
    sessions,           // AppSession[] - all sessions for current domain
    activeSessionId,    // string - currently active session
    error,              // string | null - error message
    loadSessions,       // () => Promise<MessageResponse<AppSession[]>>
    loadActiveSession,  // () => Promise<MessageResponse<string>>
    createNewSession,   // () => Promise<MessageResponse>
    refreshCurrentTab,  // () => Promise<MessageResponse>
    saveNewSession,     // (data?) => Promise<MessageResponse<AppSession>>
    switchSessionById,  // (id) => Promise<MessageResponse>
    deleteSessionById,  // (id) => Promise<MessageResponse>
    updateSessionById,  // (id, data) => Promise<MessageResponse>
  } = useSessions();

  const handleSave = async () => {
    const result = await saveNewSession({ title: "New Session" });
    if (result.success) {
      toast.success("Session saved!");
    } else {
      toast.error(result.message);
    }
  };

  const handleSwitch = async (sessionId: string) => {
    const result = await switchSessionById(sessionId);
    if (result.success) {
      await refreshCurrentTab(); // Reload to apply session
    }
  };

  return (
    <ul>
      {sessions.map(session => (
        <li
          key={session.id}
          onClick={() => handleSwitch(session.id)}
          className={session.id === activeSessionId ? "active" : ""}
        >
          {session.title} - {session.domain.fqdn}
        </li>
      ))}
    </ul>
  );
}

```

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

### Background Service API

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

The `backgroundService` provides a high-level API for communicating with the extension's background script from UI components. It handles all session management operations through Chrome's messaging system.

```APIDOC
## Background Service API

### Description
Provides a high-level API for communicating with the extension's background script from UI components. It handles all session management operations through Chrome's messaging system.

### Methods

#### `getFilteredSessionByActiveTab()`

**Description:** Retrieves all sessions filtered by the current active tab's domain.

**Returns:** `Promise<Response<AppSession[]>>`

#### `getActiveSession()`

**Description:** Retrieves the currently active session ID.

**Returns:** `Promise<Response<string | null>>`

#### `saveNewSession(options: { title: string })`

**Description:** Saves the current tab's storage (cookies, localStorage, sessionStorage) as a new session with a specified title.

**Parameters:**
- **options** (object) - Required - Options for saving the session.
  - **title** (string) - Required - The user-defined title for the new session.

**Returns:** `Promise<Response<AppSession>>`

#### `switchSessionById(sessionId: string)`

**Description:** Switches to a different session identified by its ID. The tab will be reloaded with the new session data.

**Parameters:**
- **sessionId** (string) - Required - The ID of the session to switch to.

**Returns:** `Promise<Response<void>>`

#### `updateSessionById(sessionId: string, data: { title: string })`

**Description:** Updates the metadata (e.g., title) of an existing session.

**Parameters:**
- **sessionId** (string) - Required - The ID of the session to update.
- **data** (object) - Required - The data to update.
  - **title** (string) - Required - The new title for the session.

**Returns:** `Promise<Response<void>>`

#### `deleteSessionById(sessionId: string)`

**Description:** Deletes a session identified by its ID.

**Parameters:**
- **sessionId** (string) - Required - The ID of the session to delete.

**Returns:** `Promise<Response<void>>`

#### `createNewSession()`

**Description:** Creates a new blank session, effectively clearing the current tab's storage.

**Returns:** `Promise<Response<void>>`

#### `refreshCurrentTab()`

**Description:** Refreshes the current browser tab.

**Returns:** `Promise<Response<void>>`

### Data Structures

#### `AppSession`

- **id** (string) - Unique identifier (UUID) of the session.
- **appIconUrl** (string) - URL of the application's favicon.
- **title** (string) - User-defined title for the session.
- **domain** (object) - Information about the domain.
  - **domain** (string) - The main domain name (e.g., "example.com").
  - **subdomain** (string) - The subdomain (e.g., "blog").
  - **sld** (string) - Second-level domain (e.g., "example").
  - **tld** (string) - Top-level domain (e.g., "com").
  - **fqdn** (string) - Fully qualified domain name (e.g., "blog.example.com").
  - **isIp** (boolean) - Indicates if the domain is an IP address.
  - **isIcann** (boolean) - Indicates if the domain uses a valid ICANN TLD.
  - **port** (number | null) - The port number, if specified.
- **createdAt** (number) - Timestamp when the session was created.
- **updatedAt** (number) - Timestamp when the session was last updated.
- **state** (object) - The stored state of the session.
  - **localStorage** (Record<string, string>) - Key-value pairs for localStorage.
  - **sessionStorage** (Record<string, string>) - Key-value pairs for sessionStorage.
  - **cookies** (chrome.cookies.Cookie[]) - Array of cookies associated with the session.
```

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

### Communicate with Background Scripts via sendToBackground

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

Sends messages to the background script with support for typed responses and payloads. Requires the EnumBackgroundAction constant for action definitions.

```typescript
import { sendToBackground } from "@/lib/utils";
import { EnumBackgroundAction } from "@/constants";

// Send a message with typed response
const response = await sendToBackground<AppSession[]>({
  action: EnumBackgroundAction.enum.GET_FILTERED_SESSIONS_BY_ACTIVE_TAB,
});

// Send a message with payload
const saveResponse = await sendToBackground<AppSession>({
  action: EnumBackgroundAction.enum.SAVE_CURRENT_TAB_STORAGE_TO_EXTENSION_STORAGE,
  payload: { title: "My Session" },
});

// Message response structure
interface MessageResponse<T = unknown> {
  success: boolean;
  message: string;
  data?: T;
}

// Available background actions
type EnumBackgroundAction = 
  | "GET_FILTERED_SESSIONS_BY_ACTIVE_TAB"
  | "SAVE_CURRENT_TAB_STORAGE_TO_EXTENSION_STORAGE"
  | "UPDATE_SESSION_BY_ID"
  | "DELETE_SESSION_BY_ID"
  | "CREATE_NEW_SESSION"
  | "REFRESH_CURRENT_TAB"
  | "SWITCH_SESSION_BY_ID"
  | "GET_ACTIVE_SESSION";
```

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

### Create Accessible Dialog Modals

Source: https://context7.com/deri-kurniawan/sessify-browser-extension/llms.txt

Dialog component for modal interactions, featuring structured header, content, and footer sections. Supports disabling the close button via props.

```tsx
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from "@/components/ui/dialog";

function ConfirmDeleteDialog({ onConfirm }) {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="destructive">Delete Session</Button>
      </DialogTrigger>
      <DialogContent className="max-h-screen overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Are you sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete the session.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <DialogClose asChild>
            <Button variant="destructive" onClick={onConfirm}>
              Delete
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// Dialog without close button
<DialogContent showCloseButton={false}>
  {/* content */}
</DialogContent>
```

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