@agentdeck/bridge 0.1.0 → 0.2.1

package/dist/d200h/hid-protocol.js

@@ -0,0 +1,124 @@
+/**
+ * D200H HID Protocol — D200-compatible 1024-byte packet protocol
+ *
+ * Packet structure:
+ *   [0-1]  Header: 0x7C 0x7C
+ *   [2-3]  Command: big-endian uint16
+ *   [4-7]  Length:  little-endian uint32
+ *   [8-1023] Payload (zero-padded)
+ *
+ * Image delivery: ZIP(manifest.json + icons/*.png) sent in chunked 1024-byte packets.
+ * ZIP quirk: bytes at offset 1016, 2040, 3064... must NOT be 0x00 or 0x7C.
+ */
+import { randomBytes } from 'crypto';
+const TAG = 'd200h-hid';
+const PACKET_SIZE = 1024;
+const HEADER = Buffer.from([0x7c, 0x7c]);
+const INVALID_BOUNDARY_BYTES = [0x00, 0x7c];
+// --- Commands ---
+export const CMD = {
+    SET_BUTTONS: 0x0001,
+    PARTIAL_UPDATE: 0x000d,
+    SET_SMALL_WINDOW: 0x0006,
+    SET_BRIGHTNESS: 0x000a,
+    SET_LABEL_STYLE: 0x000b,
+    IN_BUTTON: 0x0101,
+    IN_DEVICE_INFO: 0x0303,
+};
+// --- Packet building ---
+export function buildPacket(command, payload, totalLength) {
+    const pkt = Buffer.alloc(PACKET_SIZE, 0);
+    // Header
+    pkt[0] = 0x7c;
+    pkt[1] = 0x7c;
+    // Command (big-endian uint16)
+    pkt.writeUInt16BE(command, 2);
+    // Length (little-endian uint32) — total file size for multi-packet, else payload length
+    pkt.writeUInt32LE(totalLength ?? payload.length, 4);
+    // Payload
+    payload.copy(pkt, 8, 0, Math.min(payload.length, PACKET_SIZE - 8));
+    return pkt;
+}
+/**
+ * Build all packets for a ZIP file transfer (SET_BUTTONS or PARTIAL_UPDATE).
+ * First packet has the header; subsequent packets are raw 1024-byte chunks.
+ */
+export function buildZipPackets(zipData, command = CMD.SET_BUTTONS) {
+    const packets = [];
+    const fileSize = zipData.length;
+    // First packet: header(8) + first chunk
+    const firstChunkSize = PACKET_SIZE - 8;
+    const firstChunk = zipData.subarray(0, firstChunkSize);
+    packets.push(buildPacket(command, firstChunk, fileSize));
+    // Remaining chunks (raw, no header)
+    for (let offset = firstChunkSize; offset < fileSize; offset += PACKET_SIZE) {
+        const chunk = Buffer.alloc(PACKET_SIZE, 0);
+        zipData.copy(chunk, 0, offset, Math.min(offset + PACKET_SIZE, fileSize));
+        packets.push(chunk);
+    }
+    return packets;
+}
+export function buildBrightnessPacket(brightness) {
+    const val = Math.max(0, Math.min(100, Math.round(brightness)));
+    return buildPacket(CMD.SET_BRIGHTNESS, Buffer.from(String(val), 'utf-8'));
+}
+export function buildSmallWindowPacket(mode, cpu, mem, time, gpu) {
+    const data = `${mode}|${cpu}|${mem}|${time}|${gpu}`;
+    return buildPacket(CMD.SET_SMALL_WINDOW, Buffer.from(data, 'utf-8'));
+}
+export function parseIncoming(data) {
+    if (data.length < 8)
+        return null;
+    if (data[0] !== 0x7c || data[1] !== 0x7c)
+        return null;
+    const command = data.readUInt16BE(2);
+    if (command === CMD.IN_BUTTON && data.length >= 12) {
+        return {
+            type: 'button',
+            data: {
+                state: data[8],
+                index: data[9],
+                pressed: data[11] === 0x01,
+            },
+        };
+    }
+    if (command === CMD.IN_DEVICE_INFO) {
+        try {
+            const jsonStr = data.subarray(8).toString('ascii').split('\0')[0];
+            const info = JSON.parse(jsonStr);
+            return {
+                type: 'device_info',
+                data: {
+                    serialNumber: info.SerialNumber ?? '',
+                    firmwareVersion: info.Dversion ?? '',
+                    deviceType: info.DeviceType ?? '',
+                    hardwareVersion: info.HardwareVersion ?? '',
+                },
+            };
+        }
+        catch {
+            return { type: 'unknown', command, raw: data };
+        }
+    }
+    return { type: 'unknown', command, raw: data };
+}
+// --- ZIP validation (boundary byte workaround) ---
+/**
+ * Check if a ZIP has invalid bytes at 1024-byte chunk boundaries.
+ * At offset 1016, 2040, 3064... the byte must not be 0x00 or 0x7C.
+ */
+export function validateZipBoundaries(zipData) {
+    for (let i = 1016; i < zipData.length; i += PACKET_SIZE) {
+        if (INVALID_BOUNDARY_BYTES.includes(zipData[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Generate a random dummy string to pad the ZIP until boundaries are valid.
+ */
+export function generateDummyPadding(attempt) {
+    return 'AgentDeck ' + randomBytes(8 * (attempt + 1)).toString('hex');
+}
+//# sourceMappingURL=hid-protocol.js.map

package/dist/d200h/hid-protocol.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hid-protocol.js","sourceRoot":"","sources":["../../src/d200h/hid-protocol.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAGrC,MAAM,GAAG,GAAG,WAAW,CAAC;AACxB,MAAM,WAAW,GAAG,IAAI,CAAC;AACzB,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;AACzC,MAAM,sBAAsB,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAE5C,mBAAmB;AAEnB,MAAM,CAAC,MAAM,GAAG,GAAG;IACjB,WAAW,EAAE,MAAM;IACnB,cAAc,EAAE,MAAM;IACtB,gBAAgB,EAAE,MAAM;IACxB,cAAc,EAAE,MAAM;IACtB,eAAe,EAAE,MAAM;IACvB,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,MAAM;CACd,CAAC;AAEX,0BAA0B;AAE1B,MAAM,UAAU,WAAW,CAAC,OAAe,EAAE,OAAe,EAAE,WAAoB;IAChF,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;IACzC,SAAS;IACT,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACd,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACd,8BAA8B;IAC9B,GAAG,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IAC9B,wFAAwF;IACxF,GAAG,CAAC,aAAa,CAAC,WAAW,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACpD,UAAU;IACV,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;IACnE,OAAO,GAAG,CAAC;AACb,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,OAAe,EAAE,UAAkB,GAAG,CAAC,WAAW;IAChF,MAAM,OAAO,GAAa,EAAE,CAAC;IAC7B,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC;IAEhC,wCAAwC;IACxC,MAAM,cAAc,GAAG,WAAW,GAAG,CAAC,CAAC;IACvC,MAAM,UAAU,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;IACvD,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzD,oCAAoC;IACpC,KAAK,IAAI,MAAM,GAAG,cAAc,EAAE,MAAM,GAAG,QAAQ,EAAE,MAAM,IAAI,WAAW,EAAE,CAAC;QAC3E,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;QAC3C,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;QACzE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,UAAkB;IACtD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAC/D,OAAO,WAAW,CAAC,GAAG,CAAC,cAAc,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;AAC5E,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,IAAY,EAAE,GAAW,EAAE,GAAW,EAAE,IAAY,EAAE,GAAW;IACtG,MAAM,IAAI,GAAG,GAAG,IAAI,IAAI,GAAG,IAAI,GAAG,IAAI,IAAI,IAAI,GAAG,EAAE,CAAC;IACpD,OAAO,WAAW,CAAC,GAAG,CAAC,gBAAgB,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;AACvE,CAAC;AAsBD,MAAM,UAAU,aAAa,CAAC,IAAY;IACxC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC;IACjC,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAEtD,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAErC,IAAI,OAAO,KAAK,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,EAAE,EAAE,CAAC;QACnD,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE;gBACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;gBACd,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;gBACd,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI;aAC3B;SACF,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,KAAK,GAAG,CAAC,cAAc,EAAE,CAAC;QACnC,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YAClE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YACjC,OAAO;gBACL,IAAI,EAAE,aAAa;gBACnB,IAAI,EAAE;oBACJ,YAAY,EAAE,IAAI,CAAC,YAAY,IAAI,EAAE;oBACrC,eAAe,EAAE,IAAI,CAAC,QAAQ,IAAI,EAAE;oBACpC,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,EAAE;oBACjC,eAAe,EAAE,IAAI,CAAC,eAAe,IAAI,EAAE;iBAC5C;aACF,CAAC;QACJ,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;QACjD,CAAC;IACH,CAAC;IAED,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;AACjD,CAAC;AAED,oDAAoD;AAEpD;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CAAC,OAAe;IACnD,KAAK,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,IAAI,WAAW,EAAE,CAAC;QACxD,IAAI,sBAAsB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAChD,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,OAAe;IAClD,OAAO,YAAY,GAAG,WAAW,CAAC,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACvE,CAAC"}

package/dist/d200h/image-renderer.d.ts

@@ -0,0 +1,36 @@
+/**
+ * D200H Image Renderer — Renders AgentDeck state as 196×196 PNG key icons
+ * using the shared SVG renderers (same visual output as Stream Deck plugin).
+ *
+ * Pipeline: state → shared SVG generators (144×144) → resvg rasterize (196×196 PNG) → ZIP
+ *
+ * Falls back to solid-color PNGs if resvg-js is not available.
+ */
+import type { SessionInfo, PromptOption } from '@agentdeck/shared';
+/** Initialize the renderer (call once at module start). */
+export declare function initRenderer(): Promise<void>;
+export interface DashState {
+    state: string;
+    projectName: string;
+    modelName: string;
+    mode: string;
+    agentType: string;
+    fiveHourPercent: number;
+    sevenDayPercent: number;
+    totalTokens: number;
+    totalCost: number;
+    options: PromptOption[];
+    currentTool: string;
+    allSessions: SessionInfo[];
+}
+export declare function parseState(evt: any): DashState;
+/**
+ * Render the full AgentDeck dashboard as a ZIP ready for SET_BUTTONS.
+ * Uses shared SVG renderers → resvg rasterization for SD+-quality output.
+ */
+export declare function renderDashboardZip(stateEvt: any): Buffer;
+/**
+ * Create a simple hash of the visual state for change detection.
+ */
+export declare function stateHash(stateEvt: any): string;
+//# sourceMappingURL=image-renderer.d.ts.map

package/dist/d200h/image-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-renderer.d.ts","sourceRoot":"","sources":["../../src/d200h/image-renderer.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAcH,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA6BnE,2DAA2D;AAC3D,wBAAsB,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC,CAElD;AAqDD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,WAAW,EAAE,CAAC;CAC5B;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,GAAG,GAAG,SAAS,CAiB9C;AA+WD;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,GAAG,GAAG,MAAM,CAmExD;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,GAAG,GAAG,MAAM,CAI/C"}

package/dist/d200h/image-renderer.js

@@ -0,0 +1,487 @@
+/**
+ * D200H Image Renderer — Renders AgentDeck state as 196×196 PNG key icons
+ * using the shared SVG renderers (same visual output as Stream Deck plugin).
+ *
+ * Pipeline: state → shared SVG generators (144×144) → resvg rasterize (196×196 PNG) → ZIP
+ *
+ * Falls back to solid-color PNGs if resvg-js is not available.
+ */
+import { deflateSync } from 'zlib';
+import { renderSessionSlot, renderEmptySlot, renderEscButton, renderStopButton, renderOptionButton, renderDetailInfo, svgFrame, } from '@agentdeck/shared';
+import { debug } from '../logger.js';
+import { validateZipBoundaries } from './hid-protocol.js';
+const TAG = 'd200h-render';
+const ICON_SIZE = 196;
+let Resvg = null;
+let resvgLoaded = false;
+async function loadResvg() {
+    if (resvgLoaded)
+        return Resvg;
+    resvgLoaded = true;
+    try {
+        const mod = await import('@resvg/resvg-js');
+        Resvg = mod.Resvg ?? mod.default?.Resvg;
+        debug(TAG, 'resvg-js loaded — SVG rendering enabled');
+        return Resvg;
+    }
+    catch {
+        debug(TAG, 'resvg-js not available — falling back to solid-color PNGs');
+        return null;
+    }
+}
+/** Initialize the renderer (call once at module start). */
+export async function initRenderer() {
+    await loadResvg();
+}
+// --- SVG → 196×196 PNG rasterization ---
+function svgToPng(svg144) {
+    if (!Resvg)
+        return fallbackSolidPng(20, 20, 25); // dark fallback
+    // Wrap 144×144 SVG content into 196×196 viewport with auto-scaling
+    const inner = svg144.replace(/<\/?svg[^>]*>/g, '');
+    const wrapped = `<svg xmlns="http://www.w3.org/2000/svg" width="${ICON_SIZE}" height="${ICON_SIZE}" viewBox="0 0 144 144">${inner}</svg>`;
+    try {
+        const resvg = new Resvg(wrapped, {
+            fitTo: { mode: 'width', value: ICON_SIZE },
+            font: { loadSystemFonts: false },
+        });
+        return Buffer.from(resvg.render().asPng());
+    }
+    catch (err) {
+        debug(TAG, `SVG rasterization failed: ${err}`);
+        return fallbackSolidPng(20, 20, 25);
+    }
+}
+/** Rasterize custom-sized SVG (e.g. 288×144 → 392×196 for merged slot). */
+function svgToPngWide(svg, width, height) {
+    if (!Resvg)
+        return fallbackSolidPng(20, 20, 25);
+    try {
+        const resvg = new Resvg(svg, {
+            fitTo: { mode: 'width', value: width },
+            font: { loadSystemFonts: false },
+        });
+        return Buffer.from(resvg.render().asPng());
+    }
+    catch (err) {
+        debug(TAG, `Wide SVG rasterization failed: ${err}`);
+        return fallbackSolidPng(20, 20, 25);
+    }
+}
+export function parseState(evt) {
+    return {
+        state: evt?.state ?? 'DISCONNECTED',
+        projectName: evt?.projectName ?? '',
+        modelName: evt?.modelName ?? '',
+        mode: evt?.mode ?? 'default',
+        agentType: evt?.agentType ?? 'claude-code',
+        fiveHourPercent: evt?.fiveHourPercent ?? 0,
+        sevenDayPercent: evt?.sevenDayPercent ?? 0,
+        totalTokens: evt?.totalTokens ?? 0,
+        totalCost: evt?.totalCost ?? 0,
+        options: (evt?.options ?? []).map((o) => typeof o === 'string' ? { label: o } : { label: o?.label ?? '', shortcut: o?.shortcut ?? '' }),
+        currentTool: evt?.currentTool ?? '',
+        allSessions: Array.isArray(evt?.allSessions) ? evt.allSessions : [],
+    };
+}
+// --- SVG helpers for info/usage buttons ---
+function escXml(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+function gaugeBar(pct, width = 8) {
+    const filled = Math.round(Math.min(pct, 100) / 100 * width);
+    return '\u2588'.repeat(filled) + '\u2591'.repeat(width - filled);
+}
+function gaugeColor(pct) {
+    return pct > 80 ? '#ef4444' : pct > 50 ? '#eab308' : '#22c55e';
+}
+function renderUsageButton(label, percent, color) {
+    const pctColor = gaugeColor(percent);
+    const gBar = gaugeBar(percent, 8);
+    const elements = [
+        // Header label
+        `<text x="72" y="36" text-anchor="middle" font-family="Arial,sans-serif" font-size="12" fill="#94a3b8">${escXml(label)}</text>`,
+        // Unicode gauge bar
+        `<text x="72" y="60" text-anchor="middle" font-family="monospace" font-size="14" fill="${color}">${escXml(gBar)}</text>`,
+        // Percentage (larger, 28px bold)
+        `<text x="72" y="90" text-anchor="middle" font-family="Arial,sans-serif" font-size="28" font-weight="bold" fill="#ffffff">${Math.round(percent)}%</text>`,
+        // Bottom accent bar (2px)
+        `<rect x="16" y="110" width="112" height="2" rx="1" fill="#1e293b"/>`,
+        `<rect x="16" y="110" width="${Math.round(112 * Math.min(percent, 100) / 100)}" height="2" rx="1" fill="${color}"/>`,
+    ].join('');
+    return svgFrame('#0f172a', elements);
+}
+/** Wide merged slot (3_2) — 288×144 SVG. Two columns: 5H | 7D with gauges and %. */
+function renderUsageWideSlot(fiveHourPct, sevenDayPct) {
+    const c5 = gaugeColor(fiveHourPct);
+    const c7 = gaugeColor(sevenDayPct);
+    const pct5 = Math.round(fiveHourPct);
+    const pct7 = Math.round(sevenDayPct);
+    // Build SVG with simple structure (safer for resvg)
+    const elements = [
+        // Background: split left/right
+        `<rect x="0" y="0" width="144" height="144" fill="#0f172a"/>`,
+        `<rect x="144" y="0" width="144" height="144" fill="#0f172a"/>`,
+        // Panel backgrounds
+        `<rect x="8" y="8" width="128" height="128" rx="8" fill="#1e293b" opacity="0.3"/>`,
+        `<rect x="152" y="8" width="128" height="128" rx="8" fill="#1e293b" opacity="0.3"/>`,
+        // Header
+        `<text x="72" y="26" text-anchor="middle" font-family="Arial,sans-serif" font-size="12" font-weight="bold" fill="#94a3b8">5H</text>`,
+        `<text x="216" y="26" text-anchor="middle" font-family="Arial,sans-serif" font-size="12" font-weight="bold" fill="#94a3b8">7D</text>`,
+        // Percentage (large)
+        `<text x="72" y="70" text-anchor="middle" font-family="Arial,sans-serif" font-size="32" font-weight="bold" fill="#ffffff">${pct5}%</text>`,
+        `<text x="216" y="70" text-anchor="middle" font-family="Arial,sans-serif" font-size="32" font-weight="bold" fill="#ffffff">${pct7}%</text>`,
+        // Accent bars at bottom
+        `<rect x="12" y="132" width="120" height="2" rx="1" fill="#1e293b"/>`,
+        `<rect x="156" y="132" width="120" height="2" rx="1" fill="#1e293b"/>`,
+        `<rect x="12" y="132" width="${Math.round(120 * Math.min(fiveHourPct, 100) / 100)}" height="2" rx="1" fill="${c5}"/>`,
+        `<rect x="156" y="132" width="${Math.round(120 * Math.min(sevenDayPct, 100) / 100)}" height="2" rx="1" fill="${c7}"/>`,
+    ].join('');
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="288" height="144" viewBox="0 0 288 144">${elements}</svg>`;
+}
+function renderInfoButton(title, value, titleColor = '#94a3b8', valueColor = '#ffffff') {
+    const valueFontSize = value.length > 8 ? 16 : value.length > 5 ? 20 : 24;
+    const elements = [
+        `<text x="72" y="52" text-anchor="middle" font-family="Arial,sans-serif" font-size="14" font-weight="bold" fill="${titleColor}">${escXml(title)}</text>`,
+        `<text x="72" y="${86 + (valueFontSize < 20 ? 2 : 0)}" text-anchor="middle" font-family="Arial,sans-serif" font-size="${valueFontSize}" font-weight="bold" fill="${valueColor}">${escXml(value)}</text>`,
+    ].join('');
+    return svgFrame('#1C1C1E', elements);
+}
+function renderModeButton(mode) {
+    const elements = [
+        `<text x="72" y="52" text-anchor="middle" font-family="Arial,sans-serif" font-size="14" font-weight="bold" fill="#94a3b8">MODE</text>`,
+        `<text x="72" y="88" text-anchor="middle" font-family="Arial,sans-serif" font-size="18" font-weight="bold" fill="#a78bfa">${escXml(mode.toUpperCase())}</text>`,
+    ].join('');
+    return svgFrame('#1C1C1E', elements);
+}
+/** Renders a uniform "dimmed" offline placeholder for a single key slot. */
+function renderOfflineSlot(hero = false) {
+    if (hero) {
+        // Central hero card: large OFFLINE + DAEMON STOPPED
+        const elements = [
+            `<text x="72" y="54" text-anchor="middle" font-family="Arial,sans-serif" font-size="28" font-weight="bold" fill="#4b5563">OFFLINE</text>`,
+            `<text x="72" y="82" text-anchor="middle" font-family="Arial,sans-serif" font-size="11" fill="#374151">DAEMON STOPPED</text>`,
+        ].join('');
+        return svgFrame('#0f0f0f', elements);
+    }
+    // Regular key: uniform dark dim
+    return svgFrame('#0a0a0a', `<text x="72" y="80" text-anchor="middle" font-family="Arial,sans-serif" font-size="11" fill="#1f2937">--</text>`);
+}
+// --- Main layout computation ---
+function computeLayout(state) {
+    // ============================
+    // DISCONNECTED (daemon stopped) — all keys dimmed, hero shows OFFLINE
+    // ============================
+    const isDisconnected = state.state === 'DISCONNECTED' || state.state === 'disconnected';
+    if (isDisconnected) {
+        const slots = [];
+        // 5×3 grid: position the hero card at col1+col2, row0+row1 (wide center)
+        const heroCol = 2, heroRow = 1; // center of the grid
+        for (let row = 0; row < 3; row++) {
+            for (let col = 0; col < 5; col++) {
+                const isHero = col === heroCol && row === heroRow;
+                slots.push({ col, row, svg: renderOfflineSlot(isHero), label: '' });
+            }
+        }
+        return slots;
+    }
+    const slots = [];
+    const isAwaiting = state.state.startsWith('AWAITING') || state.state.startsWith('awaiting');
+    const isProcessing = state.state === 'PROCESSING' || state.state === 'processing';
+    // Build a SessionInfo-like object for the active (focused) state
+    const activeSession = {
+        id: 'local',
+        agentType: state.agentType,
+        projectName: state.projectName,
+        modelName: state.modelName,
+        state: state.state.toLowerCase(),
+        alive: true,
+        port: 0,
+    };
+    const sessionsToDisplay = state.allSessions.length > 0 ? state.allSessions.slice(0, 4) : [activeSession];
+    const isMultiSession = sessionsToDisplay.length > 1;
+    if (isMultiSession) {
+        // ============================
+        // MULTI-SESSION OVERVIEW LAYOUT
+        // ============================
+        // Row 0: Mode, Session 1..4
+        slots.push({ col: 0, row: 0, svg: renderModeButton(state.mode), label: '' });
+        for (let i = 0; i < 4; i++) {
+            const col = i + 1;
+            const sess = sessionsToDisplay[i];
+            if (sess) {
+                const isActive = sess.projectName === activeSession.projectName && sess.agentType === activeSession.agentType;
+                slots.push({ col, row: 0, svg: renderSessionSlot(sess, isActive, 0, undefined, { animated: false }), label: '' });
+            }
+            else {
+                slots.push({ col, row: 0, svg: renderEmptySlot(), label: '' });
+            }
+        }
+        // Row 1: Options 1..4, Model Info
+        for (let i = 0; i < 4; i++) {
+            const col = i;
+            const opt = state.options[i];
+            if (opt && isAwaiting) {
+                slots.push({ col, row: 1, svg: renderOptionButton(opt, i), label: '' });
+            }
+            else {
+                slots.push({ col, row: 1, svg: renderEmptySlot(), label: '' });
+            }
+        }
+        slots.push({ col: 4, row: 1, svg: renderInfoButton('MODEL', state.modelName.slice(0, 12) || 'N/A'), label: '' });
+    }
+    else {
+        // ============================
+        // SINGLE-SESSION DETAIL LAYOUT
+        // ============================
+        // Row 0: Mode, Hero Session, Extended Detail
+        slots.push({ col: 0, row: 0, svg: renderModeButton(state.mode), label: '' });
+        slots.push({ col: 1, row: 0, svg: renderSessionSlot(sessionsToDisplay[0], true, 0, undefined, { animated: false }), label: '' });
+        slots.push({ col: 2, row: 0, svg: renderDetailInfo(sessionsToDisplay[0], state.state.toLowerCase(), state.currentTool, state.modelName, state.mode), label: '' });
+        // Options mapping identically to old 13-slot original design
+        // Slots 3_0, 4_0, 0_1, 1_1
+        for (let i = 0; i < 4; i++) {
+            const col = (i + 3) % 5;
+            const row = Math.floor((i + 3) / 5);
+            const opt = state.options[i];
+            if (opt && isAwaiting) {
+                slots.push({ col, row, svg: renderOptionButton(opt, i), label: '' });
+            }
+            else {
+                slots.push({ col, row, svg: renderEmptySlot(), label: '' });
+            }
+        }
+        // Row 1 remaining stats: 2_1, 3_1, 4_1
+        slots.push({ col: 2, row: 1, svg: renderInfoButton('MODEL', state.modelName.slice(0, 12) || 'N/A'), label: '' });
+        slots.push({ col: 3, row: 1, svg: renderUsageButton('5H', state.fiveHourPercent, '#28a0b4'), label: '' });
+        slots.push({ col: 4, row: 1, svg: renderUsageButton('7D', state.sevenDayPercent, '#2850a0'), label: '' });
+    }
+    // ============================
+    // ROW 2: SHARED ACTIONS (STOP, TOKENS, COST)
+    // ============================
+    // Slot 0_2: STOP/ESC
+    if (isProcessing) {
+        slots.push({ col: 0, row: 2, svg: renderStopButton(true), label: '' });
+    }
+    else if (isAwaiting) {
+        slots.push({ col: 0, row: 2, svg: renderEscButton(true), label: '' });
+    }
+    else {
+        slots.push({ col: 0, row: 2, svg: renderStopButton(false), label: '' });
+    }
+    // Slot 1_2: Tokens
+    const tk = state.totalTokens > 1000 ? `${(state.totalTokens / 1000).toFixed(0)}K` : `${state.totalTokens}`;
+    slots.push({ col: 1, row: 2, svg: renderInfoButton('TOKENS', tk), label: '' });
+    // Slot 2_2: Cost
+    slots.push({ col: 2, row: 2, svg: renderInfoButton('COST', `$${state.totalCost.toFixed(2)}`), label: '' });
+    return slots;
+}
+// --- ZIP creation (reused from original, with boundary validation) ---
+function crc32(buf) {
+    let crc = 0xffffffff;
+    for (let i = 0; i < buf.length; i++) {
+        crc = crcTable[(crc ^ buf[i]) & 0xff] ^ (crc >>> 8);
+    }
+    return (crc ^ 0xffffffff) >>> 0;
+}
+const crcTable = new Uint32Array(256);
+for (let n = 0; n < 256; n++) {
+    let c = n;
+    for (let k = 0; k < 8; k++) {
+        c = (c & 1) ? (0xedb88320 ^ (c >>> 1)) : (c >>> 1);
+    }
+    crcTable[n] = c;
+}
+function normalizeExtraLength(length) {
+    if (length <= 0)
+        return 0;
+    return Math.max(4, length);
+}
+function makeZipExtraField(length) {
+    const normalized = normalizeExtraLength(length);
+    if (normalized === 0)
+        return Buffer.alloc(0);
+    const extra = Buffer.alloc(normalized, 0x41);
+    extra.writeUInt16LE(0x4141, 0);
+    extra.writeUInt16LE(Math.max(0, normalized - 4), 2);
+    return extra;
+}
+function firstInvalidZipBoundaryOffset(zipData) {
+    for (let i = 1016; i < zipData.length; i += 1024) {
+        if (zipData[i] === 0x00 || zipData[i] === 0x7c)
+            return i;
+    }
+    return null;
+}
+function createZipInMemory(files, extraLengths = []) {
+    const centralDir = [];
+    const localParts = [];
+    const layouts = [];
+    let offset = 0;
+    let index = 0;
+    for (const [name, data] of files) {
+        const nameBytes = Buffer.from(name, 'utf-8');
+        const crc = crc32(data);
+        const extraLen = normalizeExtraLength(extraLengths[index] ?? 0);
+        const extra = makeZipExtraField(extraLen);
+        const localExtraOffset = offset + 30 + nameBytes.length;
+        const local = Buffer.alloc(30 + nameBytes.length + extra.length);
+        local.writeUInt32LE(0x04034b50, 0);
+        local.writeUInt16LE(20, 4);
+        local.writeUInt16LE(0, 6);
+        local.writeUInt16LE(0, 8);
+        local.writeUInt16LE(0, 10);
+        local.writeUInt16LE(0, 12);
+        local.writeUInt32LE(crc, 14);
+        local.writeUInt32LE(data.length, 18);
+        local.writeUInt32LE(data.length, 22);
+        local.writeUInt16LE(nameBytes.length, 26);
+        local.writeUInt16LE(extra.length, 28);
+        nameBytes.copy(local, 30);
+        extra.copy(local, 30 + nameBytes.length);
+        const central = Buffer.alloc(46 + nameBytes.length + extra.length);
+        central.writeUInt32LE(0x02014b50, 0);
+        central.writeUInt16LE(20, 4);
+        central.writeUInt16LE(20, 6);
+        central.writeUInt16LE(0, 8);
+        central.writeUInt16LE(0, 10);
+        central.writeUInt16LE(0, 12);
+        central.writeUInt16LE(0, 14);
+        central.writeUInt32LE(crc, 16);
+        central.writeUInt32LE(data.length, 20);
+        central.writeUInt32LE(data.length, 24);
+        central.writeUInt16LE(nameBytes.length, 28);
+        central.writeUInt16LE(extra.length, 30);
+        central.writeUInt16LE(0, 32);
+        central.writeUInt16LE(0, 34);
+        central.writeUInt16LE(0, 36);
+        central.writeUInt32LE(0, 38);
+        central.writeUInt32LE(offset, 42);
+        nameBytes.copy(central, 46);
+        extra.copy(central, 46 + nameBytes.length);
+        localParts.push(local, data);
+        centralDir.push(central);
+        layouts.push({ extraInsertOffset: localExtraOffset });
+        offset += local.length + data.length;
+        index += 1;
+    }
+    const centralDirData = Buffer.concat(centralDir);
+    const eocd = Buffer.alloc(22);
+    eocd.writeUInt32LE(0x06054b50, 0);
+    eocd.writeUInt16LE(0, 4);
+    eocd.writeUInt16LE(0, 6);
+    eocd.writeUInt16LE(files.size, 8);
+    eocd.writeUInt16LE(files.size, 10);
+    eocd.writeUInt32LE(centralDirData.length, 12);
+    eocd.writeUInt32LE(offset, 16);
+    eocd.writeUInt16LE(0, 20);
+    return { zip: Buffer.concat([...localParts, centralDirData, eocd]), layouts };
+}
+// --- Fallback solid-color PNG (when resvg-js unavailable) ---
+function fallbackSolidPng(r, g, b) {
+    const w = ICON_SIZE, h = ICON_SIZE;
+    const ihdr = Buffer.alloc(13);
+    ihdr.writeUInt32BE(w, 0);
+    ihdr.writeUInt32BE(h, 4);
+    ihdr[8] = 8;
+    ihdr[9] = 2; // 8-bit RGB
+    const rowLen = 1 + w * 3;
+    const raw = Buffer.alloc(rowLen * h);
+    for (let y = 0; y < h; y++) {
+        const off = y * rowLen;
+        raw[off] = 0;
+        for (let x = 0; x < w; x++) {
+            const px = off + 1 + x * 3;
+            raw[px] = r;
+            raw[px + 1] = g;
+            raw[px + 2] = b;
+        }
+    }
+    const compressed = deflateSync(raw);
+    const sig = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
+    function pngChunk(type, data) {
+        const typeBytes = Buffer.from(type, 'ascii');
+        const len = Buffer.alloc(4);
+        len.writeUInt32BE(data.length, 0);
+        const crcData = Buffer.concat([typeBytes, data]);
+        const crc = Buffer.alloc(4);
+        crc.writeUInt32BE(crc32(crcData), 0);
+        return Buffer.concat([len, typeBytes, data, crc]);
+    }
+    return Buffer.concat([sig, pngChunk('IHDR', ihdr), pngChunk('IDAT', compressed), pngChunk('IEND', Buffer.alloc(0))]);
+}
+// --- Public API ---
+/**
+ * Render the full AgentDeck dashboard as a ZIP ready for SET_BUTTONS.
+ * Uses shared SVG renderers → resvg rasterization for SD+-quality output.
+ */
+export function renderDashboardZip(stateEvt) {
+    const state = parseState(stateEvt);
+    const layout = computeLayout(state);
+    const manifest = {};
+    const files = new Map();
+    for (let i = 0; i < layout.length; i++) {
+        const slot = layout[i];
+        const iconPath = `icons/btn${i}.png`;
+        const colRow = `${slot.col}_${slot.row}`;
+        const png = svgToPng(slot.svg);
+        files.set(iconPath, png);
+        manifest[colRow] = {
+            State: 0,
+            ViewParam: [{ Text: slot.label, Icon: iconPath }],
+        };
+    }
+    // Merged hardware slot (3_2) — 392×196 PNG with StreamDeck-style usage display
+    // No Action = device firmware clock overlay suppressed (solves clock overlap)
+    const wideUsageSvg = renderUsageWideSlot(state.fiveHourPercent, state.sevenDayPercent);
+    const wideUsagePng = svgToPngWide(wideUsageSvg, 392, 196);
+    files.set('icons/usage-wide.png', wideUsagePng);
+    manifest['3_2'] = {
+        State: 0,
+        ViewParam: [{ Icon: 'icons/usage-wide.png', Text: '' }],
+    };
+    files.set('manifest.json', Buffer.from(JSON.stringify(manifest), 'utf-8'));
+    // Build ZIP with boundary validation
+    const orderedEntries = [...files.entries()];
+    const extraLengths = new Array(orderedEntries.length).fill(0);
+    for (let attempt = 0; attempt < 256; attempt++) {
+        const artifact = createZipInMemory(new Map(orderedEntries), extraLengths);
+        const invalidOffset = firstInvalidZipBoundaryOffset(artifact.zip);
+        if (invalidOffset == null)
+            return artifact.zip;
+        let targetIndex = -1;
+        for (let i = artifact.layouts.length - 1; i >= 0; i--) {
+            if (artifact.layouts[i].extraInsertOffset <= invalidOffset) {
+                targetIndex = i;
+                break;
+            }
+        }
+        if (targetIndex < 0)
+            return artifact.zip;
+        const currentExtra = extraLengths[targetIndex];
+        const extraInsertOffset = artifact.layouts[targetIndex].extraInsertOffset;
+        let shift = 1;
+        while (shift <= 512) {
+            if (invalidOffset < extraInsertOffset + currentExtra + shift)
+                break;
+            const candidate = artifact.zip[invalidOffset - shift];
+            if (candidate !== 0x00 && candidate !== 0x7c)
+                break;
+            shift += 1;
+        }
+        extraLengths[targetIndex] = normalizeExtraLength(extraLengths[targetIndex] + shift);
+        debug(TAG, `ZIP boundary invalid at ${invalidOffset}, shifting entry ${targetIndex} by ${shift} byte(s)`);
+    }
+    const fallback = createZipInMemory(new Map(orderedEntries), extraLengths).zip;
+    debug(TAG, `WARNING: ZIP boundary validation failed after search; stillValid=${validateZipBoundaries(fallback)}`);
+    return fallback;
+}
+/**
+ * Create a simple hash of the visual state for change detection.
+ */
+export function stateHash(stateEvt) {
+    const s = parseState(stateEvt);
+    const sessIds = s.allSessions.map(sess => sess.id).join(',');
+    return `${s.state}|${s.mode}|${s.projectName}|${s.modelName}|${s.fiveHourPercent}|${s.sevenDayPercent}|${s.totalTokens}|${s.totalCost}|${s.options.map(o => o.label).join(',')}|${s.currentTool}|${sessIds}`;
+}
+//# sourceMappingURL=image-renderer.js.map