Feature Guide

Feature Guide

Allislet v1.0.0-alpha is designed as a feature-rich browser overlay framework with runtime control over network traffic, DOM interaction, and UI workflow automation. This guide describes the major feature families and the configuration settings that drive them.

Runtime feature model

The SDK exposes features through config-driven toggles and runtime service registration. The main configuration object is placed in allislet.config.ts and is used to define the app shell, theme, storage, execution behavior, and optional feature toggles.

Example configuration:

import { defineConfig } from "allislet";

export default defineConfig({
  id: "my-sdk-app",
  name: "Dev Tools Suite",
  version: "v1.0.0-alpha",
  meta: {
    owner: "internal",
  },
  theme: {
    mode: "dark",
    accentColor: "#74c7ec",
    defaultDockPosition: "right",
  },
  storage: {
    namespace: "my_sdk_v1",
    crossDomainHubUrl: "http://localhost:5173/public/storage.html",
    encryptLocalStorage: false,
  },
  features: {
    patchFetch: true,
    patchXHR: true,
    interceptSockets: true,
    autoExtractBearer: true,
  },
  activeTabs: [
    "network-logger",
    "websocket-manager",
    "macro-studio",
    "settings",
  ],
  hotkeys: [
    { combo: "Alt+K", action: "ui:do-thing" },
  ],
  libraries: [
    { name: "socket.io-client", url: "https://cdn.example.com/socket.io-client.js" },
  ],
});

The runtime config determines which modules are enabled, how storage is scoped, and which tabs appear in the shell.

Network and socket interception

One of the most powerful parts of Allislet is the ability to inspect and control browser-network traffic without requiring the host page to be rewired or restyled.

fetch and XHR patching

The SDK can patch network request APIs so that calls made from the page are captured and handled by the SDK runtime.

Features include:

• patchFetch for fetch interception
• patchXHR for XMLHttpRequest interception
• request-level logging
• response inspection
• request shape control and testing

This is useful for:

• tracing API payloads
• capturing tokens or auth headers
• simulating delayed or broken requests
• testing edge-case handling in app flows

WebSocket tracking and lock controls

The WebSocket manager provides runtime control over active socket connections and browser-side socket behavior.

Capabilities can include:

• connection tracking
• lockClosed to prevent a connection from remaining open
• forceDisconnect to terminate active network flows
• frame injection and socket sniffing
• bridge logic for socket events into the UI

This is particularly important for debugging and controlling realtime communication in injected tools.

Socket.IO integration

The SDK provides a SocketIoBridge for bridging socket events into the app shell and managing socket-driven updates in-memory.

This supports:

• live connection monitoring
• event stream capture
• data synchronization with other client states
• chat and DM feature integration

Network mocking

The NetworkMock layer lets the SDK simulate common network conditions without adjusting the underlying application code path.

Supported behaviors include:

• silent200 response injection
• drop behaviors for failing requests
• latency injection to simulate slow connections

These modes are useful for product testing, UI behavior validation, and debugging request pipelines safely inside a controlled host runtime.

Bearer token extraction

BearerExtractor understands how to inspect request metadata and recover JWT-like token values. This is useful for:

• devtools style auth inspection
• runtime debugging
• user-session visibility in controlled and authorized testing environments

DOM macro recorder

The macro recorder is one of the major automation features in the SDK. It watches the user’s actions and records DOM interaction patterns so they can be replayed later.

Recorded actions

MacroRecorder can capture:

• clicks
• keyboard input actions
• form element interactions
• scroll events
• page interaction sequences

The recorded interaction stream can then be replayed and used to simulate workflows or automated user sessions.

This is especially useful for:

• onboarding flows
• repeated web automation actions
• markup-guided testing harnesses
• synthetic interaction testing

DOM inspection and highlighting

The DOM toolkit provides direct inspection features:

• DOMObserver for mutation and change tracking
• Highlighter for overlays and target annotations
• ElementPicker for cursor-driven selection
• DOMFinder for XPath and innerText resolution
• FormAutofill for structured form entry

This creates a browser-debugger-like flow for both inspection and automation.

WindowManager and sub-window model

The WindowManager is a central shell layer for opening and managing floating windows inside the root overlay. It supports multi-window or multi-panel experiences and can render sub-sidebars and custom views on a given window surface.

Features

• floating window surfaces inside the host runtime
• sidebars and docked panels
• custom component views per window
• positioning updates and alignment logic
• draggable windows via DragController
• modal overlay flows

Docking model

The SDK supports dynamic docking positions:

• left
• right
• top
• bottom

This lets a host overlay behave like a floating tool palette, a console, or a docked dev surface while staying isolated from the underlying page.

Dragging and motion system

The DragController integrates with the window manager to provide a configurable dragging system. This makes the SDK feel like a desktop/toolbar hybrid rather than a static overlay.

Chat and admin system

Allislet includes built-in togglable tabs for realtime communication and operational control.

Realtime chat

The chat system supports:

• username persistence
• public rooms
• direct message flows
• socket-driven message updates

This makes the overlay useful for internal messaging, shared session commentary, and multi-user debugging scenarios.

Remote execution admin tab

The admin system uses an AdminStore and an admin toggle such as AdminStore.isAdmin.

This layer can support:

• remote JS payload execution across connected clients
• user mute controls
• user kick controls
• operator actions against connected runtime peers

This is intended for controlled, multi-user tool environments and operational shell experiences.

Theme and feedback systems

The SDK includes a theme engine and app feedback primitives designed to work consistently in both light and dark page contexts.

Theme engine

Features include:

• dark mode and light mode support
• accent color configuration
• global runtime styling consistency
• dock position configuration

Toast notifications

The toast system mirrors a Swal2-style experience with animated feedback indicators.

Supported patterns include:

• message success state
• warning state
• info state
• error state
• custom icon support

These provide human-readable feedback without polluting the host page’s native UI.

Command palette and keyboard control

The SDK includes a command registry and command palette mechanism that supports keyboard-first navigation.

This includes:

• Ctrl+K command palette patterns
• hotkey registration
• action routing
• command-driven UI flow

Examples include:

hotkeys: [
  { combo: "Alt+K", action: "ui:do-thing" },
];

This lets the overlay be driven with minimal friction and high discoverability.

URL state, tab sync, and page routing

The SDK includes a few utilities that help the app feel like a real runtime rather than a static injection layer.

• URLState binds state to URL parameters
• TabBroadcast syncs state across tabs using BroadcastChannel
• PageRouter handles route transitions of the injected app
• DeepLink enables direct navigation linking

These utilities are helpful when the SDK is used as a control console, internal admin dashboard, or debugging suite.

Data extraction and browser utilities

The SDK also includes tools for structured extraction and browser introspection.

• TableScraper turns HTML tables into JSON
• CSVExporter and JSONExporter handle export flow
• ScreenCapture captures a visible node or canvas area
• FileSystemAccess supports file-based access where allowed
• IndexedDBExplorer inspects IndexedDB state
• CookieManager manages cookie boundaries and session usage
• PerfProfiler measures runtime behavior
• ConsoleRedirector captures console output into the app shell
• AsyncQueue manages asynchronous orchestration
• CronTask schedules timed operations
• WorkerOffloader moves heavier work off the main thread
• SpeechEngine enables voice-related features
• Clipboard exposes copy/paste utilities
• MediaSniffer inspects canvas and video media capture streams
• DiffViewer visualizes state or markup changes

These features make Allislet suitable for advanced browser tooling and instrumentation.

Configuration-first feature design

Allislet is intentionally built around configuration-first design.

The app shell, feature set, and runtime state are all shaped by allislet.config.ts. This makes the SDK easy to customize without rewriting the bootstrap layer.

Core configuration categories include:

• identity values: id, name, version
• storage: namespace and cross-domain hub configuration
• theme: dark/light and accent styling
• features: network and socket behavior flags
• activeTabs: which built-in tabs are exposed
• hotkeys: keyboard action registration
• libraries: remote dependency bootstrapping
• lifecycle hooks: onMount and onCleanup

This design keeps the system modular, composable, and controlled by explicit runtime configuration.

Recommended use patterns

Allislet is best used in scenarios where you want:

• a browser-side overlay without host CSS pollution
• low-friction scripting and execution around the current page
• a UI shell for debugging, admin operations, or automation
• feature-rich runtime tooling with isolated mount behavior

Use it for:

• bookmarklet-based tooling
• injected dev consoles
• browser review and automation shells
• testing and debugging overlays
• admin and session-ops interfaces

Summary

Allislet v1.0.0-alpha provides a layered runtime model that combines:

• shadow-isolated bootstrap
• event-driven service architecture
• network and socket interception
• DOM automation and inspection
• window and theme controls
• data extraction utilities
• built-in chat and admin experiences

Together, these features make the SDK a comprehensive browser overlay and injected application platform designed for performance, control, and isolation.