eoka-agent 0.1.4

AI agent interaction layer for browser automation — MCP server, observe/act loop
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

(() => {
    const data = /*ELEM_DATA*/;
    const container = document.createElement('div');
    container.id = '__eoka_overlay';

    const style = document.createElement('style');
    style.textContent = `
        .__eoka_label {
            position: fixed;
            z-index: 2147483647;
            background: rgba(220, 38, 38, 0.9);
            color: white;
            font: bold 10px/12px monospace;
            padding: 1px 3px;
            border-radius: 2px;
            pointer-events: none;
            white-space: nowrap;
        }
        .__eoka_box {
            position: fixed;
            z-index: 2147483646;
            border: 1.5px solid rgba(220, 38, 38, 0.7);
            pointer-events: none;
            border-radius: 1px;
        }
    `;
    container.appendChild(style);

    // Track label positions to avoid overlaps
    const placed = [];

    for (const el of data) {
        // Border
        const box = document.createElement('div');
        box.className = '__eoka_box';
        box.style.cssText = 'left:' + el.x + 'px;top:' + el.y + 'px;width:' + el.w + 'px;height:' + el.h + 'px';
        container.appendChild(box);

        // Label — try top-left, top-right, bottom-left, inside top-left
        const labelW = String(el.i).length * 7 + 8;
        const labelH = 14;
        const vw = window.innerWidth, vh = window.innerHeight;
        const clampX = v => Math.max(0, Math.min(v, vw - labelW));
        const clampY = v => Math.max(0, Math.min(v, vh - labelH));
        const candidates = [
            [clampX(el.x), clampY(el.y - labelH - 1)],
            [clampX(el.x + el.w - labelW), clampY(el.y - labelH - 1)],
            [clampX(el.x), clampY(el.y + el.h + 1)],
            [clampX(el.x + 2), clampY(el.y + 2)],
        ];

        let bestX = candidates[0][0], bestY = candidates[0][1];
        for (const [cx, cy] of candidates) {
            let overlaps = false;
            for (const p of placed) {
                if (cx < p[0] + p[2] && cx + labelW > p[0] && cy < p[1] + p[3] && cy + labelH > p[1]) {
                    overlaps = true;
                    break;
                }
            }
            if (!overlaps) {
                bestX = cx;
                bestY = cy;
                break;
            }
        }

        placed.push([bestX, bestY, labelW, labelH]);

        const label = document.createElement('div');
        label.className = '__eoka_label';
        label.style.cssText = 'left:' + bestX + 'px;top:' + bestY + 'px;text-shadow:0 0 2px rgba(0,0,0,0.8)';
        label.textContent = String(el.i);
        container.appendChild(label);
    }

    document.body.appendChild(container);
})()