hypha-debugger 0.1.0

package/dist/services/screenshot.d.ts

@@ -0,0 +1,51 @@
+export declare function takeScreenshot(options?: {
+    selector?: string;
+    format?: "png" | "jpeg";
+    quality?: number;
+    scale?: number;
+    max_width?: number;
+    max_height?: number;
+}): Promise<{
+    data: string;
+    format: string;
+    width: number;
+    height: number;
+} | {
+    error: string;
+}>;
+export declare namespace takeScreenshot {
+    var __schema__: {
+        name: string;
+        description: string;
+        parameters: {
+            type: string;
+            properties: {
+                selector: {
+                    type: string;
+                    description: string;
+                };
+                format: {
+                    type: string;
+                    enum: string[];
+                    description: string;
+                };
+                quality: {
+                    type: string;
+                    description: string;
+                };
+                scale: {
+                    type: string;
+                    description: string;
+                };
+                max_width: {
+                    type: string;
+                    description: string;
+                };
+                max_height: {
+                    type: string;
+                    description: string;
+                };
+            };
+        };
+    };
+}

package/dist/ui/overlay.d.ts

@@ -0,0 +1,28 @@
+export interface OverlayOptions {
+    position?: {
+        x: number;
+        y: number;
+    };
+}
+export declare class DebugOverlay {
+    private host;
+    private shadow;
+    private icon;
+    private panel;
+    private statusDot;
+    private logContainer;
+    private infoBody;
+    private isOpen;
+    private isDragging;
+    private dragOffset;
+    private maxLogEntries;
+    constructor(options?: OverlayOptions);
+    private setupDrag;
+    toggle(): void;
+    setStatus(status: "connected" | "disconnected" | "error"): void;
+    setInfo(info: Record<string, string>): void;
+    /** Show the service URL with a copy button. */
+    setServiceUrl(url: string, token: string): void;
+    addLog(message: string, type?: "call" | "result" | "error"): void;
+    destroy(): void;
+}

package/dist/ui/styles.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Scoped CSS for the debug overlay, injected into Shadow DOM.
+ */
+export declare const overlayStyles = "\n  :host {\n    all: initial;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  }\n\n  * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  .debugger-icon {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    background: #4a90d9;\n    color: white;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n    transition: transform 0.15s, background 0.15s;\n    user-select: none;\n    font-size: 18px;\n    line-height: 1;\n  }\n\n  .debugger-icon:hover {\n    transform: scale(1.1);\n    background: #357abd;\n  }\n\n  .debugger-icon.connected {\n    background: #27ae60;\n  }\n\n  .debugger-icon.error {\n    background: #e74c3c;\n  }\n\n  .debugger-panel {\n    display: none;\n    width: 320px;\n    max-height: 420px;\n    background: #1e1e2e;\n    color: #cdd6f4;\n    border-radius: 8px;\n    border: 1px solid #45475a;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\n    overflow: hidden;\n    flex-direction: column;\n    position: absolute;\n    bottom: 50px;\n    right: 0;\n    font-size: 13px;\n  }\n\n  .debugger-panel.open {\n    display: flex;\n  }\n\n  .panel-header {\n    background: #313244;\n    padding: 8px 12px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: default;\n    border-bottom: 1px solid #45475a;\n    font-weight: 600;\n    font-size: 12px;\n    letter-spacing: 0.3px;\n    text-transform: uppercase;\n    color: #a6adc8;\n  }\n\n  .panel-header .title {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  .panel-header .close-btn {\n    cursor: pointer;\n    color: #6c7086;\n    font-size: 16px;\n    line-height: 1;\n    padding: 2px 4px;\n    border-radius: 3px;\n  }\n\n  .panel-header .close-btn:hover {\n    color: #cdd6f4;\n    background: #45475a;\n  }\n\n  .status-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    display: inline-block;\n    background: #6c7086;\n  }\n\n  .status-dot.connected {\n    background: #a6e3a1;\n  }\n\n  .status-dot.error {\n    background: #f38ba8;\n  }\n\n  .panel-body {\n    padding: 10px 12px;\n    overflow-y: auto;\n    flex: 1;\n    max-height: 340px;\n  }\n\n  .info-row {\n    display: flex;\n    justify-content: space-between;\n    padding: 4px 0;\n    border-bottom: 1px solid #313244;\n    font-size: 12px;\n  }\n\n  .info-row .label {\n    color: #6c7086;\n  }\n\n  .info-row .value {\n    color: #cdd6f4;\n    text-align: right;\n    word-break: break-all;\n    max-width: 180px;\n    font-family: 'SF Mono', Monaco, Consolas, monospace;\n    font-size: 11px;\n  }\n\n  .url-section {\n    margin-top: 8px;\n    padding-top: 6px;\n    border-top: 1px solid #313244;\n  }\n\n  .url-label {\n    font-size: 11px;\n    color: #6c7086;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-bottom: 3px;\n  }\n\n  .url-row {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    background: #313244;\n    border-radius: 3px;\n    padding: 4px 6px;\n  }\n\n  .url-text {\n    flex: 1;\n    font-family: 'SF Mono', Monaco, Consolas, monospace;\n    font-size: 10px;\n    color: #89b4fa;\n    word-break: break-all;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n  }\n\n  .copy-btn {\n    background: #45475a;\n    color: #cdd6f4;\n    border: none;\n    border-radius: 3px;\n    padding: 2px 8px;\n    font-size: 10px;\n    cursor: pointer;\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n\n  .copy-btn:hover {\n    background: #585b70;\n  }\n\n  .log-section {\n    margin-top: 8px;\n  }\n\n  .log-title {\n    font-size: 11px;\n    color: #6c7086;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-bottom: 4px;\n  }\n\n  .log-entry {\n    font-family: 'SF Mono', Monaco, Consolas, monospace;\n    font-size: 11px;\n    padding: 3px 6px;\n    border-radius: 3px;\n    background: #313244;\n    margin-bottom: 2px;\n    color: #a6adc8;\n    word-break: break-all;\n  }\n\n  .log-entry.call {\n    border-left: 2px solid #89b4fa;\n  }\n\n  .log-entry.result {\n    border-left: 2px solid #a6e3a1;\n  }\n\n  .log-entry.error {\n    border-left: 2px solid #f38ba8;\n    color: #f38ba8;\n  }\n";

package/dist/utils/env.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Environment detection and page metadata collection.
+ */
+export interface PageInfo {
+    url: string;
+    title: string;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    document_size: {
+        width: number;
+        height: number;
+    };
+    user_agent: string;
+    timestamp: string;
+    cookies_enabled: boolean;
+    language: string;
+    platform: string;
+    online: boolean;
+    performance: {
+        load_time_ms: number | null;
+        dom_content_loaded_ms: number | null;
+    };
+    frameworks: string[];
+}
+export declare function detectFrameworks(): string[];
+export declare function collectPageInfo(): PageInfo;

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "hypha-debugger",
+  "version": "0.1.0",
+  "description": "Injectable debugger for web pages and AI agents, powered by Hypha RPC",
+  "type": "module",
+  "main": "dist/hypha-debugger.js",
+  "module": "dist/hypha-debugger.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/hypha-debugger.mjs",
+      "require": "./dist/hypha-debugger.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c && tsc --declaration --emitDeclarationOnly --outDir dist",
+    "dev": "rollup -c -w",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "tsc --noEmit"
+  },
+  "keywords": [
+    "debugger",
+    "hypha",
+    "rpc",
+    "dom",
+    "inspector",
+    "ai-agent",
+    "remote-debugging",
+    "web-automation"
+  ],
+  "author": "Amun AI AB",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/amun-ai/hypha-debugger.git"
+  },
+  "homepage": "https://github.com/amun-ai/hypha-debugger",
+  "peerDependencies": {
+    "hypha-rpc": ">=0.20.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-typescript": "^12.0.0",
+    "@rollup/plugin-terser": "^0.4.0",
+    "rollup": "^4.0.0",
+    "typescript": "^5.5.0",
+    "tslib": "^2.7.0",
+    "vitest": "^2.0.0",
+    "happy-dom": "^15.0.0"
+  },
+  "dependencies": {
+    "html-to-image": "^1.11.0",
+    "hypha-rpc": "^0.20.97"
+  }
+}