zerg-ztc 0.1.0 → 0.1.1

package/dist/ui/web/frame_render.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { LayoutNode } from '../core/index.js';
+type BadgeInfo = {
+    type: 'paste' | 'file' | 'image';
+    preview: string;
+    full: string;
+    path?: string;
+};
+interface FrameRendererProps {
+    node: LayoutNode;
+    cols: number;
+    rows: number;
+    cellWidth: number;
+    cellHeight: number;
+    debugBorders?: boolean;
+    onBadgeHover?: (badge: BadgeInfo, x: number, y: number) => void;
+    onBadgeLeave?: () => void;
+    onBadgeClick?: (badge: BadgeInfo, x: number, y: number) => void;
+    onBadgeDblClick?: (badge: BadgeInfo, x: number, y: number) => void;
+}
+export declare const WebFrameRenderer: React.FC<FrameRendererProps>;
+export {};
+//# sourceMappingURL=frame_render.d.ts.map

package/dist/ui/web/frame_render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame_render.d.ts","sourceRoot":"","sources":["../../../src/ui/web/frame_render.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,UAAU,EAA8B,MAAM,kBAAkB,CAAC;AAE1E,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,kBAAkB;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpE;AA2GD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmBzD,CAAC"}

package/dist/ui/web/frame_render.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { computeLayout } from '../core/index.js';
+function colorMap(color) {
+    const map = {
+        gray: '#9a9a9a',
+        magenta: '#c084fc',
+        yellow: '#facc15',
+        green: '#34d399',
+        red: '#f87171',
+        cyan: '#67e8f9',
+        blue: '#60a5fa',
+        white: '#e5e7eb'
+    };
+    return map[color || ''] || color || '#e6e6e6';
+}
+function renderFrame(frame, keyPrefix, cellWidth, cellHeight, debugBorders, onBadgeHover, onBadgeLeave, onBadgeClick, onBadgeDblClick, offsetX = 0, offsetY = 0, out = []) {
+    const x = offsetX + frame.x;
+    const y = offsetY + frame.y;
+    const keyBase = `${keyPrefix}-${x}-${y}`;
+    if (frame.node.type === 'text') {
+        const style = frame.node.style || {};
+        if (debugBorders) {
+            out.push(_jsx("div", { style: {
+                    position: 'absolute',
+                    left: x * cellWidth,
+                    top: y * cellHeight,
+                    width: frame.width * cellWidth,
+                    height: frame.height * cellHeight,
+                    borderStyle: 'dashed',
+                    borderWidth: 1,
+                    borderColor: '#3a3a3a',
+                    pointerEvents: 'none'
+                } }, `${keyBase}-debug`));
+        }
+        const badge = style.badge;
+        out.push(_jsx("span", { style: {
+                position: 'absolute',
+                left: x * cellWidth,
+                top: y * cellHeight,
+                color: style.inverse ? '#111' : colorMap(style.color),
+                fontWeight: style.bold ? 600 : undefined,
+                opacity: style.dimColor ? 0.6 : undefined,
+                background: style.inverse ? '#e6e6e6' : undefined,
+                colorScheme: 'only light',
+                cursor: badge ? 'pointer' : undefined
+            }, title: badge?.preview || undefined, onMouseEnter: badge ? (evt) => onBadgeHover?.(badge, evt.clientX, evt.clientY) : undefined, onMouseLeave: badge ? () => onBadgeLeave?.() : undefined, onClick: badge ? (evt) => onBadgeClick?.(badge, evt.clientX, evt.clientY) : undefined, onDoubleClick: badge ? (evt) => onBadgeDblClick?.(badge, evt.clientX, evt.clientY) : undefined, children: frame.node.text }, `${keyBase}-text`));
+        return out;
+    }
+    if (frame.node.type === 'box' && (frame.node.style?.borderStyle || debugBorders)) {
+        out.push(_jsx("div", { style: {
+                position: 'absolute',
+                left: x * cellWidth,
+                top: y * cellHeight,
+                width: frame.width * cellWidth,
+                height: frame.height * cellHeight,
+                borderStyle: frame.node.style?.borderStyle ? 'solid' : 'dashed',
+                borderWidth: 1,
+                borderColor: colorMap(frame.node.style?.borderColor || '#3a3a3a'),
+                pointerEvents: 'none'
+            } }, `${keyBase}-border`));
+    }
+    frame.children.forEach((child, idx) => {
+        renderFrame(child, `${keyBase}-${idx}`, cellWidth, cellHeight, debugBorders, onBadgeHover, onBadgeLeave, onBadgeClick, onBadgeDblClick, x, y, out);
+    });
+    return out;
+}
+export const WebFrameRenderer = ({ node, cols, rows, cellWidth, cellHeight, debugBorders = false, onBadgeHover, onBadgeLeave, onBadgeClick, onBadgeDblClick }) => {
+    const frame = useMemo(() => computeLayout(node, cols, rows), [node, cols, rows]);
+    const elements = useMemo(() => renderFrame(frame, 'root', cellWidth, cellHeight, debugBorders, onBadgeHover, onBadgeLeave, onBadgeClick, onBadgeDblClick), [frame, cellWidth, cellHeight, debugBorders, onBadgeHover, onBadgeLeave, onBadgeClick, onBadgeDblClick]);
+    return _jsx(_Fragment, { children: elements });
+};
+//# sourceMappingURL=frame_render.js.map

package/dist/ui/web/frame_render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame_render.js","sourceRoot":"","sources":["../../../src/ui/web/frame_render.tsx"],"names":[],"mappings":"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"}

package/dist/ui/web/index.d.ts

@@ -0,0 +1,2 @@
+export { WebNode } from './render.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/web/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/web/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/dist/ui/web/index.js

@@ -0,0 +1,2 @@
+export { WebNode } from './render.js';
+//# sourceMappingURL=index.js.map

package/dist/ui/web/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/web/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/dist/ui/web/render.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { LayoutNode } from '../core/types.js';
+export declare function WebNode({ node }: {
+    node: LayoutNode;
+}): React.ReactElement;
+//# sourceMappingURL=render.d.ts.map

package/dist/ui/web/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../src/ui/web/render.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAY,MAAM,kBAAkB,CAAC;AAsBxD,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAiB1E"}

package/dist/ui/web/render.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { toCssStyle } from '../core/style.js';
+const monoStyle = {
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    fontSize: 14,
+    lineHeight: '16px',
+    whiteSpace: 'pre'
+};
+function renderText(node) {
+    const style = {
+        ...monoStyle,
+        color: node.style?.color,
+        fontWeight: node.style?.bold ? 600 : undefined,
+        opacity: node.style?.dimColor ? 0.6 : undefined,
+        background: node.style?.inverse ? '#111' : undefined,
+        colorScheme: 'only light'
+    };
+    return _jsx("span", { style: style, children: node.text });
+}
+export function WebNode({ node }) {
+    if (node.type === 'text') {
+        return renderText(node);
+    }
+    const style = {
+        ...monoStyle,
+        ...toCssStyle(node.style)
+    };
+    return (_jsx("div", { style: style, children: node.children.map((child, index) => (_jsx(WebNode, { node: child }, `${child.type}-${index}`))) }));
+}
+//# sourceMappingURL=render.js.map

package/dist/ui/web/render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../src/ui/web/render.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,SAAS,GAAwB;IACrC,UAAU,EAAE,oGAAoG;IAChH,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,MAAM;IAClB,UAAU,EAAE,KAAK;CAClB,CAAC;AAEF,SAAS,UAAU,CAAC,IAAc;IAChC,MAAM,KAAK,GAAwB;QACjC,GAAG,SAAS;QACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK;QACxB,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS;QAC9C,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS;QAC/C,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QACpD,WAAW,EAAE,YAAY;KAC1B,CAAC;IACF,OAAO,eAAM,KAAK,EAAE,KAAK,YAAG,IAAI,CAAC,IAAI,GAAQ,CAAC;AAChD,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,EAAE,IAAI,EAAwB;IACpD,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QACzB,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,MAAM,KAAK,GAAG;QACZ,GAAG,SAAS;QACZ,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;KACH,CAAC;IAEzB,OAAO,CACL,cAAK,KAAK,EAAE,KAAK,YACd,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,KAAC,OAAO,IAAgC,IAAI,EAAE,KAAK,IAArC,GAAG,KAAK,CAAC,IAAI,IAAI,KAAK,EAAE,CAAiB,CACxD,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/web/mirror_hook.d.ts

@@ -0,0 +1,4 @@
+import { InputBus } from '../ui/core/input.js';
+import { LayoutNode } from '../ui/core/index.js';
+export declare function useMirror(layout: LayoutNode | null, inputBus?: InputBus): void;
+//# sourceMappingURL=mirror_hook.d.ts.map

package/dist/web/mirror_hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mirror_hook.d.ts","sourceRoot":"","sources":["../../src/web/mirror_hook.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAYjD,wBAAgB,SAAS,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAU9E"}

package/dist/web/mirror_hook.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { MirrorServer } from './mirror_server.js';
+let server = null;
+function getPort() {
+    const raw = process.env.ZTC_WEB_PORT;
+    if (!raw)
+        return 3939;
+    const parsed = Number(raw);
+    return Number.isFinite(parsed) ? parsed : 3939;
+}
+export function useMirror(layout, inputBus) {
+    useEffect(() => {
+        if (process.env.ZTC_WEB_MIRROR !== '1' || !layout)
+            return;
+        if (!server) {
+            server = new MirrorServer(getPort(), inputBus);
+            server.start();
+        }
+        server.publish(layout);
+    }, [inputBus, layout]);
+}
+//# sourceMappingURL=mirror_hook.js.map

package/dist/web/mirror_hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mirror_hook.js","sourceRoot":"","sources":["../../src/web/mirror_hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,IAAI,MAAM,GAAwB,IAAI,CAAC;AAEvC,SAAS,OAAO;IACd,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC;IACrC,IAAI,CAAC,GAAG;QAAE,OAAO,IAAI,CAAC;IACtB,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3B,OAAO,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;AACjD,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,MAAyB,EAAE,QAAmB;IACtE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,KAAK,GAAG,IAAI,CAAC,MAAM;YAAE,OAAO;QAE1D,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,GAAG,IAAI,YAAY,CAAC,OAAO,EAAE,EAAE,QAAQ,CAAC,CAAC;YAC/C,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC;QACD,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;AACzB,CAAC"}

package/dist/web/mirror_server.d.ts

@@ -0,0 +1,16 @@
+import { InputBus } from '../ui/core/input.js';
+import { LayoutNode } from '../ui/core/index.js';
+export declare class MirrorServer {
+    private clients;
+    private port;
+    private server;
+    private lastTree;
+    private inputBus?;
+    constructor(port: number, inputBus?: InputBus);
+    start(): void;
+    stop(): void;
+    publish(tree: LayoutNode): void;
+    private handleRequest;
+    private sendLayout;
+}
+//# sourceMappingURL=mirror_server.d.ts.map

package/dist/web/mirror_server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mirror_server.d.ts","sourceRoot":"","sources":["../../src/web/mirror_server.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAc,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAA8B,MAAM,qBAAqB,CAAC;AAS7E,qBAAa,YAAY;IACvB,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,MAAM,CAA+C;IAC7D,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,QAAQ,CAAC,CAAW;gBAEhB,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,QAAQ;IAK7C,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;YAOjB,aAAa;IA4J3B,OAAO,CAAC,UAAU;CAKnB"}

package/dist/web/mirror_server.js

@@ -0,0 +1,177 @@
+import { createServer } from 'http';
+import { readFile, mkdir, writeFile } from 'fs/promises';
+import { resolve, join, basename } from 'path';
+import { homedir } from 'os';
+import { randomUUID } from 'crypto';
+import { computeLayout } from '../ui/core/index.js';
+export class MirrorServer {
+    clients = new Map();
+    port;
+    server = createServer(this.handleRequest.bind(this));
+    lastTree = null;
+    inputBus;
+    constructor(port, inputBus) {
+        this.port = port;
+        this.inputBus = inputBus;
+    }
+    start() {
+        this.server.listen(this.port);
+    }
+    stop() {
+        this.server.close();
+    }
+    publish(tree) {
+        this.lastTree = tree;
+        for (const client of this.clients.values()) {
+            this.sendLayout(client, tree);
+        }
+    }
+    async handleRequest(req, res) {
+        const url = new URL(req.url || '/', `http://${req.headers.host || 'localhost'}`);
+        if (url.pathname === '/') {
+            const htmlPath = new URL('./mirror.html', import.meta.url);
+            const html = await readFile(htmlPath, 'utf-8').catch(async () => {
+                const fallback = resolve(process.cwd(), 'src/web/mirror.html');
+                return readFile(fallback, 'utf-8');
+            });
+            res.writeHead(200, { 'Content-Type': 'text/html' });
+            res.end(html);
+            return;
+        }
+        if (url.pathname === '/mirror-favicon.svg' || url.pathname === '/favicon.svg' || url.pathname === '/favicon.ico') {
+            const iconPath = new URL('./mirror-favicon.svg', import.meta.url);
+            const icon = await readFile(iconPath, 'utf-8').catch(async () => {
+                const fallback = resolve(process.cwd(), 'src/web/mirror-favicon.svg');
+                return readFile(fallback, 'utf-8');
+            });
+            const contentType = url.pathname === '/favicon.ico' ? 'image/x-icon' : 'image/svg+xml';
+            res.writeHead(200, { 'Content-Type': contentType, 'Cache-Control': 'no-cache' });
+            res.end(icon);
+            return;
+        }
+        if (url.pathname === '/events') {
+            const id = url.searchParams.get('id') || `client_${Date.now()}`;
+            res.writeHead(200, {
+                'Content-Type': 'text/event-stream',
+                'Cache-Control': 'no-cache',
+                Connection: 'keep-alive'
+            });
+            res.write('\n');
+            const client = {
+                id,
+                res,
+                cols: 80,
+                rows: 24
+            };
+            this.clients.set(id, client);
+            if (this.lastTree) {
+                this.sendLayout(client, this.lastTree);
+            }
+            req.on('close', () => {
+                this.clients.delete(id);
+            });
+            return;
+        }
+        if (url.pathname === '/size' && req.method === 'POST') {
+            const id = url.searchParams.get('id');
+            if (!id || !this.clients.has(id)) {
+                res.writeHead(400);
+                res.end();
+                return;
+            }
+            const body = await new Promise(resolve => {
+                let data = '';
+                req.on('data', chunk => { data += chunk; });
+                req.on('end', () => resolve(data));
+            });
+            try {
+                const parsed = JSON.parse(body);
+                const client = this.clients.get(id);
+                if (client) {
+                    client.cols = parsed.cols;
+                    client.rows = parsed.rows;
+                    if (this.lastTree) {
+                        this.sendLayout(client, this.lastTree);
+                    }
+                }
+            }
+            catch {
+                // Ignore invalid payloads
+            }
+            res.writeHead(204);
+            res.end();
+            return;
+        }
+        if (url.pathname === '/input' && req.method === 'POST') {
+            const body = await new Promise(resolve => {
+                let data = '';
+                req.on('data', chunk => { data += chunk; });
+                req.on('end', () => resolve(data));
+            });
+            try {
+                const parsed = JSON.parse(body);
+                this.inputBus?.emit(parsed);
+            }
+            catch {
+                // Ignore invalid payloads
+            }
+            res.writeHead(204);
+            res.end();
+            return;
+        }
+        if (url.pathname === '/upload' && req.method === 'POST') {
+            const buffer = await new Promise(resolve => {
+                const chunks = [];
+                req.on('data', chunk => { chunks.push(Buffer.from(chunk)); });
+                req.on('end', () => resolve(Buffer.concat(chunks)));
+            });
+            const headerName = req.headers['x-filename'];
+            const rawName = typeof headerName === 'string' && headerName.trim().length > 0 ? headerName : 'upload.bin';
+            const safeName = basename(rawName).replace(/[^a-zA-Z0-9._-]/g, '_');
+            const dir = join(homedir(), '.ztc', 'uploads');
+            await mkdir(dir, { recursive: true });
+            const filePath = join(dir, `${Date.now()}-${randomUUID().slice(0, 8)}-${safeName}`);
+            await writeFile(filePath, buffer);
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ path: filePath }));
+            return;
+        }
+        if (url.pathname === '/file' && req.method === 'GET') {
+            const rawPath = url.searchParams.get('path');
+            if (!rawPath) {
+                res.writeHead(400);
+                res.end();
+                return;
+            }
+            const allowedRoots = [
+                join(homedir(), '.ztc', 'uploads'),
+                join(homedir(), '.ztc', 'clipboard')
+            ];
+            const resolvedPath = resolve(rawPath);
+            const allowed = allowedRoots.some(root => resolvedPath.startsWith(resolve(root)));
+            if (!allowed) {
+                res.writeHead(403);
+                res.end();
+                return;
+            }
+            try {
+                const data = await readFile(resolvedPath);
+                res.writeHead(200, { 'Content-Type': 'application/octet-stream' });
+                res.end(data);
+            }
+            catch {
+                res.writeHead(404);
+                res.end();
+            }
+            return;
+        }
+        res.writeHead(404);
+        res.end();
+    }
+    sendLayout(client, tree) {
+        const frame = computeLayout(tree, client.cols, client.rows);
+        const payload = JSON.stringify(frame);
+        client.res.write(`data: ${payload}\n\n`);
+    }
+}
+//# sourceMappingURL=mirror_server.js.map

package/dist/web/mirror_server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mirror_server.js","sourceRoot":"","sources":["../../src/web/mirror_server.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zerg-ztc",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Zerg Terminal Client - CLI agent for continual AI systems",
   "type": "module",
   "bin": {

package/src/ui/web/frame_render.tsx

@@ -0,0 +1,148 @@
+import React, { useMemo } from 'react';
+import { LayoutNode, LayoutFrame, computeLayout } from '../core/index.js';
+
+type BadgeInfo = {
+  type: 'paste' | 'file' | 'image';
+  preview: string;
+  full: string;
+  path?: string;
+};
+
+interface FrameRendererProps {
+  node: LayoutNode;
+  cols: number;
+  rows: number;
+  cellWidth: number;
+  cellHeight: number;
+  debugBorders?: boolean;
+  onBadgeHover?: (badge: BadgeInfo, x: number, y: number) => void;
+  onBadgeLeave?: () => void;
+  onBadgeClick?: (badge: BadgeInfo, x: number, y: number) => void;
+  onBadgeDblClick?: (badge: BadgeInfo, x: number, y: number) => void;
+}
+
+function colorMap(color?: string): string {
+  const map: Record<string, string> = {
+    gray: '#9a9a9a',
+    magenta: '#c084fc',
+    yellow: '#facc15',
+    green: '#34d399',
+    red: '#f87171',
+    cyan: '#67e8f9',
+    blue: '#60a5fa',
+    white: '#e5e7eb'
+  };
+  return map[color || ''] || color || '#e6e6e6';
+}
+
+function renderFrame(
+  frame: LayoutFrame,
+  keyPrefix: string,
+  cellWidth: number,
+  cellHeight: number,
+  debugBorders: boolean,
+  onBadgeHover?: (badge: BadgeInfo, x: number, y: number) => void,
+  onBadgeLeave?: () => void,
+  onBadgeClick?: (badge: BadgeInfo, x: number, y: number) => void,
+  onBadgeDblClick?: (badge: BadgeInfo, x: number, y: number) => void,
+  offsetX = 0,
+  offsetY = 0,
+  out: React.ReactElement[] = []
+): React.ReactElement[] {
+  const x = offsetX + frame.x;
+  const y = offsetY + frame.y;
+  const keyBase = `${keyPrefix}-${x}-${y}`;
+
+  if (frame.node.type === 'text') {
+    const style = frame.node.style || {};
+    if (debugBorders) {
+      out.push(
+        <div
+          key={`${keyBase}-debug`}
+          style={{
+            position: 'absolute',
+            left: x * cellWidth,
+            top: y * cellHeight,
+            width: frame.width * cellWidth,
+            height: frame.height * cellHeight,
+            borderStyle: 'dashed',
+            borderWidth: 1,
+            borderColor: '#3a3a3a',
+            pointerEvents: 'none'
+          }}
+        />
+      );
+    }
+    const badge = style.badge;
+    out.push(
+      <span
+        key={`${keyBase}-text`}
+        style={{
+          position: 'absolute',
+          left: x * cellWidth,
+          top: y * cellHeight,
+          color: style.inverse ? '#111' : colorMap(style.color),
+          fontWeight: style.bold ? 600 : undefined,
+          opacity: style.dimColor ? 0.6 : undefined,
+          background: style.inverse ? '#e6e6e6' : undefined,
+          colorScheme: 'only light',
+          cursor: badge ? 'pointer' : undefined
+        }}
+        title={badge?.preview || undefined}
+        onMouseEnter={badge ? (evt) => onBadgeHover?.(badge, evt.clientX, evt.clientY) : undefined}
+        onMouseLeave={badge ? () => onBadgeLeave?.() : undefined}
+        onClick={badge ? (evt) => onBadgeClick?.(badge, evt.clientX, evt.clientY) : undefined}
+        onDoubleClick={badge ? (evt) => onBadgeDblClick?.(badge, evt.clientX, evt.clientY) : undefined}
+      >
+        {frame.node.text}
+      </span>
+    );
+    return out;
+  }
+
+  if (frame.node.type === 'box' && (frame.node.style?.borderStyle || debugBorders)) {
+    out.push(
+      <div
+        key={`${keyBase}-border`}
+        style={{
+          position: 'absolute',
+          left: x * cellWidth,
+          top: y * cellHeight,
+          width: frame.width * cellWidth,
+          height: frame.height * cellHeight,
+          borderStyle: frame.node.style?.borderStyle ? 'solid' : 'dashed',
+          borderWidth: 1,
+          borderColor: colorMap(frame.node.style?.borderColor || '#3a3a3a'),
+          pointerEvents: 'none'
+        }}
+      />
+    );
+  }
+
+  frame.children.forEach((child, idx) => {
+    renderFrame(child, `${keyBase}-${idx}`, cellWidth, cellHeight, debugBorders, onBadgeHover, onBadgeLeave, onBadgeClick, onBadgeDblClick, x, y, out);
+  });
+
+  return out;
+}
+
+export const WebFrameRenderer: React.FC<FrameRendererProps> = ({
+  node,
+  cols,
+  rows,
+  cellWidth,
+  cellHeight,
+  debugBorders = false,
+  onBadgeHover,
+  onBadgeLeave,
+  onBadgeClick,
+  onBadgeDblClick
+}) => {
+  const frame = useMemo(() => computeLayout(node, cols, rows), [node, cols, rows]);
+  const elements = useMemo(
+    () => renderFrame(frame, 'root', cellWidth, cellHeight, debugBorders, onBadgeHover, onBadgeLeave, onBadgeClick, onBadgeDblClick),
+    [frame, cellWidth, cellHeight, debugBorders, onBadgeHover, onBadgeLeave, onBadgeClick, onBadgeDblClick]
+  );
+
+  return <>{elements}</>;
+};

package/src/ui/web/index.tsx

@@ -0,0 +1 @@
+export { WebNode } from './render.js';

package/src/ui/web/render.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { LayoutNode, TextNode } from '../core/types.js';
+import { toCssStyle } from '../core/style.js';
+
+const monoStyle: React.CSSProperties = {
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  fontSize: 14,
+  lineHeight: '16px',
+  whiteSpace: 'pre'
+};
+
+function renderText(node: TextNode): React.ReactElement {
+  const style: React.CSSProperties = {
+    ...monoStyle,
+    color: node.style?.color,
+    fontWeight: node.style?.bold ? 600 : undefined,
+    opacity: node.style?.dimColor ? 0.6 : undefined,
+    background: node.style?.inverse ? '#111' : undefined,
+    colorScheme: 'only light'
+  };
+  return <span style={style}>{node.text}</span>;
+}
+
+export function WebNode({ node }: { node: LayoutNode }): React.ReactElement {
+  if (node.type === 'text') {
+    return renderText(node);
+  }
+
+  const style = {
+    ...monoStyle,
+    ...toCssStyle(node.style)
+  } as React.CSSProperties;
+
+  return (
+    <div style={style}>
+      {node.children.map((child, index) => (
+        <WebNode key={`${child.type}-${index}`} node={child} />
+      ))}
+    </div>
+  );
+}