@agentdeck/shared 0.1.0 → 0.2.0

package/dist/state-colors.js

@@ -0,0 +1,46 @@
+/**
+ * Canonical state color palette — single source of truth for all platforms.
+ *
+ * TypeScript consumers import directly.
+ * Native platforms (Android/Apple/ESP32) reference these hex values in comments.
+ */
+import { State } from './states.js';
+// ===== State Colors =====
+export const STATE_COLORS = {
+    [State.IDLE]: '#22c55e', // green
+    [State.PROCESSING]: '#3b82f6', // blue
+    [State.AWAITING_PERMISSION]: '#f59e0b', // amber
+    [State.AWAITING_OPTION]: '#f59e0b', // amber
+    [State.AWAITING_DIFF]: '#f59e0b', // amber
+    [State.DISCONNECTED]: '#6b7280', // gray
+};
+/** Look up state color by string key. No agent-type overrides — purely semantic. */
+export function stateColor(state) {
+    if (!state)
+        return STATE_COLORS[State.DISCONNECTED];
+    return STATE_COLORS[state] ?? STATE_COLORS[State.IDLE];
+}
+// ===== Agent Brand Colors (for icons, not states) =====
+export const AGENT_BRAND_COLORS = {
+    'claude-code': '#C07058', // terracotta
+    'openclaw': '#ff4d4d', // red
+    'codex-cli': '#6366f1', // indigo
+    'opencode': '#F1ECEC', // cream
+    'monitor': '#94a3b8', // slate
+};
+/** Get agent brand color. Falls back to slate for unknown types. */
+export function agentBrandColor(agentType) {
+    return AGENT_BRAND_COLORS[agentType ?? ''] ?? '#94a3b8';
+}
+// ===== Color Utilities =====
+/** Mix a hex color toward black by ratio (0=original, 1=black). */
+export function dimColor(hex, ratio) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    const dr = Math.round(r * (1 - ratio));
+    const dg = Math.round(g * (1 - ratio));
+    const db = Math.round(b * (1 - ratio));
+    return `#${dr.toString(16).padStart(2, '0')}${dg.toString(16).padStart(2, '0')}${db.toString(16).padStart(2, '0')}`;
+}
+//# sourceMappingURL=state-colors.js.map

package/dist/state-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-colors.js","sourceRoot":"","sources":["../src/state-colors.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,2BAA2B;AAE3B,MAAM,CAAC,MAAM,YAAY,GAA0B;IACjD,CAAC,KAAK,CAAC,IAAI,CAAC,EAAiB,SAAS,EAAG,QAAQ;IACjD,CAAC,KAAK,CAAC,UAAU,CAAC,EAAW,SAAS,EAAG,OAAO;IAChD,CAAC,KAAK,CAAC,mBAAmB,CAAC,EAAE,SAAS,EAAG,QAAQ;IACjD,CAAC,KAAK,CAAC,eAAe,CAAC,EAAM,SAAS,EAAG,QAAQ;IACjD,CAAC,KAAK,CAAC,aAAa,CAAC,EAAQ,SAAS,EAAG,QAAQ;IACjD,CAAC,KAAK,CAAC,YAAY,CAAC,EAAS,SAAS,EAAG,OAAO;CACjD,CAAC;AAEF,oFAAoF;AACpF,MAAM,UAAU,UAAU,CAAC,KAAyB;IAClD,IAAI,CAAC,KAAK;QAAE,OAAO,YAAY,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IACpD,OAAQ,YAAuC,CAAC,KAAK,CAAC,IAAI,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;AACrF,CAAC;AAED,yDAAyD;AAEzD,MAAM,CAAC,MAAM,kBAAkB,GAA2B;IACxD,aAAa,EAAE,SAAS,EAAG,aAAa;IACxC,UAAU,EAAK,SAAS,EAAG,MAAM;IACjC,WAAW,EAAI,SAAS,EAAG,SAAS;IACpC,UAAU,EAAK,SAAS,EAAG,QAAQ;IACnC,SAAS,EAAM,SAAS,EAAG,QAAQ;CACpC,CAAC;AAEF,oEAAoE;AACpE,MAAM,UAAU,eAAe,CAAC,SAA6B;IAC3D,OAAO,kBAAkB,CAAC,SAAS,IAAI,EAAE,CAAC,IAAI,SAAS,CAAC;AAC1D,CAAC;AAED,8BAA8B;AAE9B,mEAAmE;AACnE,MAAM,UAAU,QAAQ,CAAC,GAAW,EAAE,KAAa;IACjD,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACxC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACxC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACxC,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;IACvC,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;IACvC,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;IACvC,OAAO,IAAI,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AACtH,CAAC"}

package/dist/states.d.ts

@@ -40,6 +40,7 @@ export interface StateSnapshot {
     cursorIndex: number;
     projectName: string | null;
     modelName: string | null;
+    effortLevel: string | null;
     billingType: import('./protocol.js').BillingType;
     sessionDurationSec: number;
     inputTokens: number;

package/dist/states.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"states.d.ts","sourceRoot":"","sources":["../src/states.ts"],"names":[],"mappings":"AAAA,oBAAY,KAAK;IACf,YAAY,iBAAiB;IAC7B,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,mBAAmB,wBAAwB;IAC3C,eAAe,oBAAoB;IACnC,aAAa,kBAAkB;CAChC;AAED,oBAAY,cAAc;IACxB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,YAAY,gBAAgB;IAC5B,QAAQ,YAAY;IACpB,kBAAkB,sBAAsB;CACzC;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;AAEpE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,KAAK,GAAG,GAAG,CAAC;IAClB,EAAE,EAAE,KAAK,CAAC;IACV,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,EAAE,eAAe,EA4BxC,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,EAAE,OAAO,eAAe,EAAE,WAAW,CAAC;IACjD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B"}
+{"version":3,"file":"states.d.ts","sourceRoot":"","sources":["../src/states.ts"],"names":[],"mappings":"AAAA,oBAAY,KAAK;IACf,YAAY,iBAAiB;IAC7B,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,mBAAmB,wBAAwB;IAC3C,eAAe,oBAAoB;IACnC,aAAa,kBAAkB;CAChC;AAED,oBAAY,cAAc;IACxB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,YAAY,gBAAgB;IAC5B,QAAQ,YAAY;IACpB,kBAAkB,sBAAsB;CACzC;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;AAEpE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,KAAK,GAAG,GAAG,CAAC;IAClB,EAAE,EAAE,KAAK,CAAC;IACV,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,EAAE,eAAe,EA4BxC,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,OAAO,eAAe,EAAE,WAAW,CAAC;IACjD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B"}

package/dist/svg-renderers/agent-logos.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Agent logo SVG paths for icon and watermark rendering on session buttons.
+ *
+ * Each logo is a centered path designed for a 144x144 button canvas.
+ * Two rendering modes:
+ *   agentLogoIcon()      — prominent icon at top of button (primary identification)
+ *   agentLogoWatermark()  — low-opacity background mark
+ */
+import type { AgentType } from '../adapter.js';
+/** Claude Code creature asset: assets/logos/claude.svg. viewBox 0 0 24 24. */
+export declare const CLAUDE_LOGO_PATH = "M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z";
+/** Legacy OpenClaw paths kept for the Gateway preset mini-browser icon. */
+export declare const OC_BODY = "M60 10 C30 10 15 35 15 55 C15 75 30 95 45 100 L45 110 L55 110 L55 100 C55 100 60 102 65 100 L65 110 L75 110 L75 100 C90 95 105 75 105 55 C105 35 90 10 60 10Z";
+export declare const OC_CLAW_L = "M20 45 C5 40 0 50 5 60 C10 70 20 65 25 55 C28 48 25 45 20 45Z";
+export declare const OC_CLAW_R = "M100 45 C115 40 120 50 115 60 C110 70 100 65 95 55 C92 48 95 45 100 45Z";
+/** Codex CLI knot/clover — official SVG from codex brand assets. viewBox 0 0 24 24. */
+export declare const CODEX_LOGO_PATH = "M8.086.457a6.105 6.105 0 013.046-.415c1.333.153 2.521.72 3.564 1.7a.117.117 0 00.107.029c1.408-.346 2.762-.224 4.061.366l.063.03.154.076c1.357.703 2.33 1.77 2.918 3.198.278.679.418 1.388.421 2.126a5.655 5.655 0 01-.18 1.631.167.167 0 00.04.155 5.982 5.982 0 011.578 2.891c.385 1.901-.01 3.615-1.183 5.14l-.182.22a6.063 6.063 0 01-2.934 1.851.162.162 0 00-.108.102c-.255.736-.511 1.364-.987 1.992-1.199 1.582-2.962 2.462-4.948 2.451-1.583-.008-2.986-.587-4.21-1.736a.145.145 0 00-.14-.032c-.518.167-1.04.191-1.604.185a5.924 5.924 0 01-2.595-.622 6.058 6.058 0 01-2.146-1.781c-.203-.269-.404-.522-.551-.821a7.74 7.74 0 01-.495-1.283 6.11 6.11 0 01-.017-3.064.166.166 0 00.008-.074.115.115 0 00-.037-.064 5.958 5.958 0 01-1.38-2.202 5.196 5.196 0 01-.333-1.589 6.915 6.915 0 01.188-2.132c.45-1.484 1.309-2.648 2.577-3.493.282-.188.55-.334.802-.438.286-.12.573-.22.861-.304a.129.129 0 00.087-.087A6.016 6.016 0 015.635 2.31C6.315 1.464 7.132.846 8.086.457zm-.804 7.85a.848.848 0 00-1.473.842l1.694 2.965-1.688 2.848a.849.849 0 001.46.864l1.94-3.272a.849.849 0 00.007-.854l-1.94-3.393zm5.446 6.24a.849.849 0 000 1.695h4.848a.849.849 0 000-1.696h-4.848z";
+/** OpenClaw creature asset: assets/logos/openclaw.svg. viewBox 0 0 24 24. */
+export declare const OPENCLAW_LOGO_PATHS: string[];
+/**
+ * Render agent logo as a visible icon at top-center of button.
+ * Uses agent brand color (not state color) for consistent identification.
+ * @param agent Agent type
+ * @param size Target size in px (default 48)
+ * @param opacity Icon opacity (default 0.7)
+ */
+export declare function agentLogoIcon(agent: AgentType, size?: number, opacity?: number, cx?: number, cy?: number): string;
+/**
+ * Render agent logo as a background watermark.
+ * Uses brand color dimmed for subtle identification.
+ */
+export declare function agentLogoWatermark(agent: AgentType, _color?: string, opacity?: number): string;
+//# sourceMappingURL=agent-logos.d.ts.map

package/dist/svg-renderers/agent-logos.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-logos.d.ts","sourceRoot":"","sources":["../../src/svg-renderers/agent-logos.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG/C,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,g+CACk8C,CAAC;AAEh+C,2EAA2E;AAC3E,eAAO,MAAM,OAAO,kKAC6I,CAAC;AAClK,eAAO,MAAM,SAAS,kEAC2C,CAAC;AAClE,eAAO,MAAM,SAAS,4EACqD,CAAC;AAE5E,uFAAuF;AACvF,eAAO,MAAM,eAAe,goCACmmC,CAAC;AAEhoC,6EAA6E;AAC7E,eAAO,MAAM,mBAAmB,UAM/B,CAAC;AAkBF;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,SAAS,EAChB,IAAI,SAAK,EACT,OAAO,SAAM,EACb,EAAE,SAAK,EACP,EAAE,SAAgB,GACjB,MAAM,CAwBR;AAID;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,SAAS,EAChB,MAAM,CAAC,EAAE,MAAM,EACf,OAAO,SAAO,GACb,MAAM,CAyBR"}

package/dist/svg-renderers/agent-logos.js

@@ -0,0 +1,100 @@
+/**
+ * Agent logo SVG paths for icon and watermark rendering on session buttons.
+ *
+ * Each logo is a centered path designed for a 144x144 button canvas.
+ * Two rendering modes:
+ *   agentLogoIcon()      — prominent icon at top of button (primary identification)
+ *   agentLogoWatermark()  — low-opacity background mark
+ */
+import { dimColor, agentBrandColor } from '../state-colors.js';
+/** Claude Code creature asset: assets/logos/claude.svg. viewBox 0 0 24 24. */
+export const CLAUDE_LOGO_PATH = 'M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z';
+/** Legacy OpenClaw paths kept for the Gateway preset mini-browser icon. */
+export const OC_BODY = 'M60 10 C30 10 15 35 15 55 C15 75 30 95 45 100 L45 110 L55 110 L55 100 C55 100 60 102 65 100 L65 110 L75 110 L75 100 C90 95 105 75 105 55 C105 35 90 10 60 10Z';
+export const OC_CLAW_L = 'M20 45 C5 40 0 50 5 60 C10 70 20 65 25 55 C28 48 25 45 20 45Z';
+export const OC_CLAW_R = 'M100 45 C115 40 120 50 115 60 C110 70 100 65 95 55 C92 48 95 45 100 45Z';
+/** Codex CLI knot/clover — official SVG from codex brand assets. viewBox 0 0 24 24. */
+export const CODEX_LOGO_PATH = 'M8.086.457a6.105 6.105 0 013.046-.415c1.333.153 2.521.72 3.564 1.7a.117.117 0 00.107.029c1.408-.346 2.762-.224 4.061.366l.063.03.154.076c1.357.703 2.33 1.77 2.918 3.198.278.679.418 1.388.421 2.126a5.655 5.655 0 01-.18 1.631.167.167 0 00.04.155 5.982 5.982 0 011.578 2.891c.385 1.901-.01 3.615-1.183 5.14l-.182.22a6.063 6.063 0 01-2.934 1.851.162.162 0 00-.108.102c-.255.736-.511 1.364-.987 1.992-1.199 1.582-2.962 2.462-4.948 2.451-1.583-.008-2.986-.587-4.21-1.736a.145.145 0 00-.14-.032c-.518.167-1.04.191-1.604.185a5.924 5.924 0 01-2.595-.622 6.058 6.058 0 01-2.146-1.781c-.203-.269-.404-.522-.551-.821a7.74 7.74 0 01-.495-1.283 6.11 6.11 0 01-.017-3.064.166.166 0 00.008-.074.115.115 0 00-.037-.064 5.958 5.958 0 01-1.38-2.202 5.196 5.196 0 01-.333-1.589 6.915 6.915 0 01.188-2.132c.45-1.484 1.309-2.648 2.577-3.493.282-.188.55-.334.802-.438.286-.12.573-.22.861-.304a.129.129 0 00.087-.087A6.016 6.016 0 015.635 2.31C6.315 1.464 7.132.846 8.086.457zm-.804 7.85a.848.848 0 00-1.473.842l1.694 2.965-1.688 2.848a.849.849 0 001.46.864l1.94-3.272a.849.849 0 00.007-.854l-1.94-3.393zm5.446 6.24a.849.849 0 000 1.695h4.848a.849.849 0 000-1.696h-4.848z';
+/** OpenClaw creature asset: assets/logos/openclaw.svg. viewBox 0 0 24 24. */
+export const OPENCLAW_LOGO_PATHS = [
+    'M9.046 7.104a.527.527 0 110 1.055.527.527 0 010-1.055z',
+    'M15.376 7.104a.528.528 0 110 1.056.528.528 0 010-1.056z',
+    'M16.877 1.912c.58-.27 1.14-.323 1.616-.037a.317.317 0 01-.326.542c-.227-.136-.547-.153-1.022.068-.352.165-.765.45-1.234.866 2.683 1.17 4.4 3.5 5.148 5.921a6.421 6.421 0 00-.704.184c-.578.016-1.174.204-1.502.735-.338.55-.268 1.276.072 2.069l.005.012.007.014c.523 1.045 1.318 1.91 2.2 2.284-.912 3.274-3.44 6.144-5.972 6.988v2.109h-2.11v-2.11c-1.043.417-2.086.01-2.11 0v2.11h-2.11v-2.11c-2.531-.843-5.061-3.713-5.973-6.987.882-.373 1.678-1.238 2.2-2.284l.007-.014.006-.012c.34-.793.41-1.518.071-2.069-.327-.531-.923-.719-1.503-.735a6.409 6.409 0 00-.704-.183c.749-2.421 2.466-4.751 5.149-5.922-.47-.416-.88-.701-1.234-.866-.474-.221-.794-.204-1.021-.068a.318.318 0 01-.435-.109.317.317 0 01.109-.433c.476-.286 1.036-.233 1.615.037.49.229 1.031.628 1.621 1.182A9.924 9.924 0 0112 2.568c1.199 0 2.284.19 3.256.526.59-.554 1.13-.953 1.62-1.182zM8.835 6.577a1.266 1.266 0 100 2.532 1.266 1.266 0 000-2.532zm6.33 0a1.267 1.267 0 100 2.533 1.267 1.267 0 000-2.533z',
+    'M.395 13.118c-.966-1.932-.163-3.863 2.41-3.365v-.001l.05.01c.084.018.17.038.26.06.033.009.067.017.1.027.084.022.168.048.255.076l.09.027c.528 0 .95.158 1.16.501.212.343.212.87-.105 1.61-.085.17-.178.333-.276.489l-.01.017a4.967 4.967 0 01-.62.791l-.019.02c-1.092 1.117-2.496 1.336-3.295-.262z',
+    'M21.193 9.753c2.574-.5 3.378 1.433 2.411 3.365-.58 1.159-1.476 1.361-2.342.96l-.011-.005a2.419 2.419 0 01-.114-.056l-.019-.01a2.751 2.751 0 01-.115-.067l-.023-.014c-.035-.022-.071-.044-.106-.068l-.05-.035c-.55-.388-1.062-1.007-1.44-1.76-.276-.647-.311-1.132-.174-1.472.176-.439.636-.639 1.23-.639.032-.011.066-.02.099-.03.08-.026.16-.05.238-.072l.117-.03a5.502 5.502 0 01.3-.067z',
+];
+function officialPathIcon(path, fill, size, opacity, cx, cy) {
+    const s = size / 24;
+    return `<g transform="translate(${cx},${cy}) scale(${s.toFixed(3)}) translate(-12,-12)" opacity="${opacity}"><path d="${path}" fill="${fill}" fill-rule="evenodd" clip-rule="evenodd"/></g>`;
+}
+function officialMultiPathIcon(paths, fill, size, opacity, cx, cy) {
+    const s = size / 24;
+    return [
+        `<g transform="translate(${cx},${cy}) scale(${s.toFixed(3)}) translate(-12,-12)" opacity="${opacity}" fill="${fill}" fill-rule="evenodd" clip-rule="evenodd">`,
+        ...paths.map((p) => `<path d="${p}"/>`),
+        `</g>`,
+    ].join('');
+}
+// ===== Prominent agent icon (top of button, primary identification) =====
+/**
+ * Render agent logo as a visible icon at top-center of button.
+ * Uses agent brand color (not state color) for consistent identification.
+ * @param agent Agent type
+ * @param size Target size in px (default 48)
+ * @param opacity Icon opacity (default 0.7)
+ */
+export function agentLogoIcon(agent, size = 48, opacity = 0.7, cx = 72, cy = size / 2 + 12) {
+    const brandColor = agentBrandColor(agent);
+    if (agent === 'claude-code') {
+        return officialPathIcon(CLAUDE_LOGO_PATH, brandColor, size, opacity, cx, cy);
+    }
+    if (agent === 'codex-cli') {
+        return officialPathIcon(CODEX_LOGO_PATH, brandColor, size, opacity, cx, cy);
+    }
+    if (agent === 'opencode') {
+        // Smaller icon for OpenCode (geometric squares are visually heavier)
+        const ocSize = Math.round(size * 0.75);
+        const half = ocSize / 2;
+        const ring = ocSize * 0.18;
+        const inner = ocSize * 0.5;
+        return [
+            `<g opacity="${opacity}">`,
+            `<rect x="${cx - half}" y="${cy - half}" width="${ocSize}" height="${ocSize}" rx="4" fill="${dimColor(brandColor, 0.3)}"/>`,
+            `<rect x="${cx - half + ring}" y="${cy - half + ring}" width="${ocSize - ring * 2}" height="${ocSize - ring * 2}" rx="2" fill="${dimColor('#4B4646', 0.2)}"/>`,
+            `<rect x="${cx - inner / 2}" y="${cy - inner / 2}" width="${inner}" height="${inner}" rx="2" fill="${dimColor('#4B4646', 0.2)}"/>`,
+            `</g>`,
+        ].join('');
+    }
+    return officialMultiPathIcon(OPENCLAW_LOGO_PATHS, brandColor, size, opacity, cx, cy);
+}
+// ===== Low-opacity watermark (background mark) =====
+/**
+ * Render agent logo as a background watermark.
+ * Uses brand color dimmed for subtle identification.
+ */
+export function agentLogoWatermark(agent, _color, opacity = 0.12) {
+    const brandColor = agentBrandColor(agent);
+    const markOpacity = Math.min(opacity * 4, 0.9);
+    const fill = dimColor(brandColor, 0.5);
+    if (agent === 'claude-code') {
+        return officialPathIcon(CLAUDE_LOGO_PATH, fill, 72, markOpacity, 72, 72);
+    }
+    if (agent === 'codex-cli') {
+        return officialPathIcon(CODEX_LOGO_PATH, fill, 72, markOpacity, 72, 72);
+    }
+    if (agent === 'opencode') {
+        const s = 72;
+        const half = s / 2;
+        const ring = s * 0.18;
+        const inner = s * 0.5;
+        return [
+            `<g opacity="${markOpacity}">`,
+            `<rect x="${72 - half}" y="${72 - half}" width="${s}" height="${s}" fill="${dimColor('#F1ECEC', 0.6)}"/>`,
+            `<rect x="${72 - half + ring}" y="${72 - half + ring}" width="${s - ring * 2}" height="${s - ring * 2}" fill="${dimColor('#4B4646', 0.5)}"/>`,
+            `<rect x="${72 - inner / 2}" y="${72 - inner / 2}" width="${inner}" height="${inner}" fill="${dimColor('#4B4646', 0.5)}"/>`,
+            `</g>`,
+        ].join('');
+    }
+    return officialMultiPathIcon(OPENCLAW_LOGO_PATHS, fill, 72, markOpacity, 72, 72);
+}
+//# sourceMappingURL=agent-logos.js.map

package/dist/svg-renderers/agent-logos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-logos.js","sourceRoot":"","sources":["../../src/svg-renderers/agent-logos.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE/D,8EAA8E;AAC9E,MAAM,CAAC,MAAM,gBAAgB,GAC3B,69CAA69C,CAAC;AAEh+C,2EAA2E;AAC3E,MAAM,CAAC,MAAM,OAAO,GAClB,+JAA+J,CAAC;AAClK,MAAM,CAAC,MAAM,SAAS,GACpB,+DAA+D,CAAC;AAClE,MAAM,CAAC,MAAM,SAAS,GACpB,yEAAyE,CAAC;AAE5E,uFAAuF;AACvF,MAAM,CAAC,MAAM,eAAe,GAC1B,6nCAA6nC,CAAC;AAEhoC,6EAA6E;AAC7E,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,wDAAwD;IACxD,yDAAyD;IACzD,87BAA87B;IAC97B,oSAAoS;IACpS,6XAA6X;CAC9X,CAAC;AAEF,SAAS,gBAAgB,CAAC,IAAY,EAAE,IAAY,EAAE,IAAY,EAAE,OAAe,EAAE,EAAU,EAAE,EAAU;IACzG,MAAM,CAAC,GAAG,IAAI,GAAG,EAAE,CAAC;IACpB,OAAO,2BAA2B,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,kCAAkC,OAAO,cAAc,IAAI,WAAW,IAAI,iDAAiD,CAAC;AAC/L,CAAC;AAED,SAAS,qBAAqB,CAAC,KAAe,EAAE,IAAY,EAAE,IAAY,EAAE,OAAe,EAAE,EAAU,EAAE,EAAU;IACjH,MAAM,CAAC,GAAG,IAAI,GAAG,EAAE,CAAC;IACpB,OAAO;QACL,2BAA2B,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,kCAAkC,OAAO,WAAW,IAAI,4CAA4C;QAC9J,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC;QACvC,MAAM;KACP,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC;AAED,2EAA2E;AAE3E;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAC3B,KAAgB,EAChB,IAAI,GAAG,EAAE,EACT,OAAO,GAAG,GAAG,EACb,EAAE,GAAG,EAAE,EACP,EAAE,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE;IAElB,MAAM,UAAU,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAE1C,IAAI,KAAK,KAAK,aAAa,EAAE,CAAC;QAC5B,OAAO,gBAAgB,CAAC,gBAAgB,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/E,CAAC;IACD,IAAI,KAAK,KAAK,WAAW,EAAE,CAAC;QAC1B,OAAO,gBAAgB,CAAC,eAAe,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9E,CAAC;IACD,IAAI,KAAK,KAAK,UAAU,EAAE,CAAC;QACzB,qEAAqE;QACrE,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;QACvC,MAAM,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC;QACxB,MAAM,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;QAC3B,MAAM,KAAK,GAAG,MAAM,GAAG,GAAG,CAAC;QAC3B,OAAO;YACL,eAAe,OAAO,IAAI;YAC1B,YAAY,EAAE,GAAG,IAAI,QAAQ,EAAE,GAAG,IAAI,YAAY,MAAM,aAAa,MAAM,kBAAkB,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,KAAK;YAC3H,YAAY,EAAE,GAAG,IAAI,GAAG,IAAI,QAAQ,EAAE,GAAG,IAAI,GAAG,IAAI,YAAY,MAAM,GAAG,IAAI,GAAG,CAAC,aAAa,MAAM,GAAG,IAAI,GAAG,CAAC,kBAAkB,QAAQ,CAAC,SAAS,EAAE,GAAG,CAAC,KAAK;YAC9J,YAAY,EAAE,GAAG,KAAK,GAAG,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,CAAC,YAAY,KAAK,aAAa,KAAK,kBAAkB,QAAQ,CAAC,SAAS,EAAE,GAAG,CAAC,KAAK;YAClI,MAAM;SACP,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACb,CAAC;IACD,OAAO,qBAAqB,CAAC,mBAAmB,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AACvF,CAAC;AAED,sDAAsD;AAEtD;;;GAGG;AACH,MAAM,UAAU,kBAAkB,CAChC,KAAgB,EAChB,MAAe,EACf,OAAO,GAAG,IAAI;IAEd,MAAM,UAAU,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;IAC/C,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IAEvC,IAAI,KAAK,KAAK,aAAa,EAAE,CAAC;QAC5B,OAAO,gBAAgB,CAAC,gBAAgB,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3E,CAAC;IACD,IAAI,KAAK,KAAK,WAAW,EAAE,CAAC;QAC1B,OAAO,gBAAgB,CAAC,eAAe,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1E,CAAC;IACD,IAAI,KAAK,KAAK,UAAU,EAAE,CAAC;QACzB,MAAM,CAAC,GAAG,EAAE,CAAC;QACb,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;QACnB,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;QACtB,MAAM,KAAK,GAAG,CAAC,GAAG,GAAG,CAAC;QACtB,OAAO;YACL,eAAe,WAAW,IAAI;YAC9B,YAAY,EAAE,GAAG,IAAI,QAAQ,EAAE,GAAG,IAAI,YAAY,CAAC,aAAa,CAAC,WAAW,QAAQ,CAAC,SAAS,EAAE,GAAG,CAAC,KAAK;YACzG,YAAY,EAAE,GAAG,IAAI,GAAG,IAAI,QAAQ,EAAE,GAAG,IAAI,GAAG,IAAI,YAAY,CAAC,GAAG,IAAI,GAAG,CAAC,aAAa,CAAC,GAAG,IAAI,GAAG,CAAC,WAAW,QAAQ,CAAC,SAAS,EAAE,GAAG,CAAC,KAAK;YAC7I,YAAY,EAAE,GAAG,KAAK,GAAG,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,CAAC,YAAY,KAAK,aAAa,KAAK,WAAW,QAAQ,CAAC,SAAS,EAAE,GAAG,CAAC,KAAK;YAC3H,MAAM;SACP,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACb,CAAC;IACD,OAAO,qBAAqB,CAAC,mBAAmB,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AACnF,CAAC"}

package/dist/svg-renderers/index.d.ts

@@ -0,0 +1,4 @@
+export * from './text-utils.js';
+export * from './agent-logos.js';
+export * from './session-slot-renderer.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/svg-renderers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svg-renderers/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC"}

package/dist/svg-renderers/index.js

@@ -0,0 +1,4 @@
+export * from './text-utils.js';
+export * from './agent-logos.js';
+export * from './session-slot-renderer.js';
+//# sourceMappingURL=index.js.map

package/dist/svg-renderers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/svg-renderers/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC"}

package/dist/svg-renderers/session-slot-renderer.d.ts

@@ -0,0 +1,25 @@
+import type { SessionInfo } from '../protocol.js';
+import type { PromptOption } from '../states.js';
+import { State } from '../states.js';
+/**
+ * Format "Model · effort" suffix for session tile / detail view.
+ * Skips neutral efforts ("medium" legacy, "default" is Claude Code 2.1+
+ * per-model default) so they don't clutter the tile. Truncates the model
+ * name preferentially so the effort label survives in tight pixel budgets.
+ */
+export declare function formatModelEffort(modelName?: string, effortLevel?: string, maxLen?: number): string;
+export declare function renderSessionSlot(session: SessionInfo, isActive: boolean, animFrame: number, displayName?: string, options?: {
+    animated?: boolean;
+}): string;
+export declare function renderEmptySlot(): string;
+export declare function renderNoDaemonSlot(slot: number): string;
+export declare function renderBackButton(): string;
+export declare function renderNextPageButton(pageLabel: string): string;
+export declare function renderEscButton(active?: boolean): string;
+export declare function renderStopButton(active?: boolean): string;
+export declare function renderDetailInfo(session: SessionInfo | undefined, state: State, tool?: string, modelName?: string, mode?: string, displayName?: string, effortLevel?: string): string;
+export declare function renderOptionButton(option: PromptOption, index: number): string;
+export declare function renderPresetButton(label: string, iconSvg: string, color: string, textColor: string, subtitle?: string, loading?: boolean): string;
+export declare function renderInfoSlot(label: string, subtitle?: string): string;
+export declare function svgFrame(bgColor: string, innerElements: string): string;
+//# sourceMappingURL=session-slot-renderer.d.ts.map

package/dist/svg-renderers/session-slot-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"session-slot-renderer.d.ts","sourceRoot":"","sources":["../../src/svg-renderers/session-slot-renderer.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAwCrC;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,EAAE,MAAM,SAAK,GAAG,MAAM,CAS/F;AAID,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,MAAM,EACjB,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAC/B,MAAM,CA8HR;AAID,wBAAgB,eAAe,IAAI,MAAM,CAGxC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAUvD;AAID,wBAAgB,gBAAgB,IAAI,MAAM,CAIzC;AAED,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAK9D;AAED,wBAAgB,eAAe,CAAC,MAAM,UAAO,GAAG,MAAM,CASrD;AAED,wBAAgB,gBAAgB,CAAC,MAAM,UAAO,GAAG,MAAM,CAStD;AAID,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAiDrL;AAID,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAkB9E;AAID,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CASjJ;AAID,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAMvE;AAID,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAG,MAAM,CAkBvE"}

package/dist/svg-renderers/session-slot-renderer.js

@@ -0,0 +1,317 @@
+import { stateColor } from '../state-colors.js';
+import { agentLogoIcon } from './agent-logos.js';
+import { wrapTextByWidth } from './text-utils.js';
+const SIZE = 144;
+const MAX_TEXT_PX = 124; // 144 - 10px padding each side
+function stateLabel(state, agentType) {
+    if (!state)
+        return 'OFFLINE';
+    // OpenClaw-specific labels
+    if (agentType === 'openclaw') {
+        if (state === 'idle')
+            return 'STANDBY';
+        if (state === 'processing')
+            return 'ROUTING';
+    }
+    switch (state) {
+        case 'idle': return 'IDLE';
+        case 'processing': return 'WORKING';
+        case 'awaiting_option':
+        case 'awaiting_permission':
+        case 'awaiting_diff':
+            return 'AWAITING';
+        default: return state.toUpperCase();
+    }
+}
+function escXml(s) {
+    return s
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;');
+}
+function truncate(s, max) {
+    if (s.length <= max)
+        return s;
+    return s.slice(0, max - 1) + '\u2026';
+}
+/**
+ * Format "Model · effort" suffix for session tile / detail view.
+ * Skips neutral efforts ("medium" legacy, "default" is Claude Code 2.1+
+ * per-model default) so they don't clutter the tile. Truncates the model
+ * name preferentially so the effort label survives in tight pixel budgets.
+ */
+export function formatModelEffort(modelName, effortLevel, maxLen = 14) {
+    if (!modelName)
+        return '';
+    const showEffort = effortLevel && effortLevel !== 'medium' && effortLevel !== 'default';
+    if (!showEffort)
+        return truncate(modelName, maxLen);
+    const combined = `${modelName} · ${effortLevel}`;
+    if (combined.length <= maxLen)
+        return combined;
+    const effortSuffix = ` · ${effortLevel}`;
+    const modelBudget = Math.max(4, maxLen - effortSuffix.length);
+    return truncate(modelName, modelBudget) + effortSuffix;
+}
+// ---- Session List Button ----
+export function renderSessionSlot(session, isActive, animFrame, displayName, options) {
+    const isWorking = session.state === 'processing';
+    const isAsking = session.state?.startsWith('awaiting') ?? false;
+    const isIdle = !isWorking && !isAsking;
+    // Stream Deck / SD+ run a 150ms tick — animated. D200H's TypeScript image
+    // pipeline (bridge/src/d200h/image-renderer.ts) has no such loop: passing
+    // animFrame=0 every time freezes dashed strokes and leaves the sin-based
+    // pulse at a dim phase. Callers without a loop should pass animated:false
+    // so we emit a motion-free visual (solid borders + badges) that still
+    // clearly distinguishes working vs awaiting vs idle.
+    const animated = options?.animated ?? true;
+    const agent = session.agentType || 'claude-code';
+    const nameForDisplay = displayName ?? session.projectName;
+    // Bottom line budget: tile width ~124px at 14px font ≈ 16 chars. Leave a
+    // little headroom so "Opus 4.7 · max" fits without running into the
+    // watermark on the right.
+    const modelText = formatModelEffort(session.modelName, session.effortLevel, 15);
+    // Custom palette mimicking the premium demo
+    const p1 = agent === 'claude-code' ? '#D97757' : agent === 'codex-cli' ? '#8BA4FF' : agent === 'openclaw' ? '#FF6B6B' : '#F1ECEC';
+    const p2 = agent === 'claude-code' ? '#BE6D52' : agent === 'codex-cli' ? '#5981FF' : agent === 'openclaw' ? '#CC3333' : '#AFAFAF';
+    const sColor = stateColor(session.state);
+    const fontFam = 'Inter, -apple-system, system-ui, Helvetica Neue, sans-serif';
+    const stateLbl = isWorking ? 'RUNNING' : isAsking ? 'PERMIT?' : 'IDLE';
+    const colorText = isWorking ? '#FDE68A' : isAsking ? '#FECACA' : p1;
+    const gradId = `sd-bg-${agent}-${session.state || 'idle'}`;
+    let defs = `
+    <linearGradient id="${gradId}" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#1C1C1E"/>
+      <stop offset="100%" stop-color="#0C0C0E"/>
+    </linearGradient>
+  `;
+    let glowBorder = '';
+    let askDot = '';
+    let runBadge = '';
+    const filterId = `pg-${animFrame}`;
+    const blurDef = `
+      <filter id="${filterId}" x="-10%" y="-10%" width="120%" height="120%">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="2.4"/>
+      </filter>
+    `;
+    if (isAsking) {
+        // Animated callers pulse the opacity (0.55…1.0 over a sin wave). Static
+        // callers (D200H) pin to a near-peak value so the frozen snapshot reads
+        // as bright and attention-grabbing instead of dim.
+        const pulseOpacity = animated
+            ? 0.55 + 0.45 * Math.abs(Math.sin(animFrame * 0.15))
+            : 0.95;
+        defs += blurDef;
+        // Thick outer glow + crisp inner ring — distinct "breathing" solid border.
+        glowBorder =
+            `<rect x="8" y="8" width="128" height="128" rx="12" fill="none" stroke="${sColor}" stroke-width="4.5" opacity="${pulseOpacity.toFixed(2)}" filter="url(#${filterId})"/>` +
+                `<rect x="8" y="8" width="128" height="128" rx="12" fill="none" stroke="${sColor}" stroke-width="1.5" opacity="${(pulseOpacity * 0.9).toFixed(2)}"/>`;
+        askDot = `
+      <circle cx="114" cy="24" r="5" fill="#F5B942" filter="url(#${filterId})"/>
+      <circle cx="114" cy="24" r="3" fill="#ffffff" />
+    `;
+    }
+    else if (isWorking) {
+        if (animated) {
+            // Flowing-light dashed border — SD/SD+ 150ms tick advances animFrame
+            // → dashoffset drifts → chasing light.
+            const perimeter = 128 * 4;
+            const dashOffset = ((animFrame * 4) % perimeter).toFixed(0);
+            defs += blurDef;
+            glowBorder =
+                `<rect x="8" y="8" width="128" height="128" rx="12" fill="none" stroke="${sColor}" stroke-width="4.5" stroke-dasharray="22 14" stroke-dashoffset="-${dashOffset}" opacity="0.85" filter="url(#${filterId})"/>` +
+                    `<rect x="8" y="8" width="128" height="128" rx="12" fill="none" stroke="${sColor}" stroke-width="1.5" stroke-dasharray="22 14" stroke-dashoffset="-${dashOffset}" opacity="0.95"/>`;
+        }
+        else {
+            // Non-animated callers (D200H still-image pipeline): render a solid
+            // glowing border + a play-chevron badge so WORKING is obvious without
+            // motion. The amber border is still the primary signal; the ▶ badge
+            // distinguishes this from the red awaiting state at a glance.
+            defs += blurDef;
+            glowBorder =
+                `<rect x="8" y="8" width="128" height="128" rx="12" fill="none" stroke="${sColor}" stroke-width="4.5" opacity="0.9" filter="url(#${filterId})"/>` +
+                    `<rect x="8" y="8" width="128" height="128" rx="12" fill="none" stroke="${sColor}" stroke-width="1.5" opacity="0.95"/>`;
+            runBadge = `
+        <rect x="100" y="14" width="28" height="16" rx="8" fill="${sColor}" opacity="0.9" />
+        <text x="114" y="26" font-size="11" font-weight="800" text-anchor="middle" fill="#0C0C0E" font-family="${fontFam}">▶ RUN</text>
+      `;
+        }
+    }
+    // Simplified Agent watermark at bottom-right
+    // agentLogoIcon renders at x,y with given width/height
+    const watermark = `<g transform="translate(90, 86)" opacity="${isIdle ? '0.46' : '0.34'}">
+    ${agentLogoIcon(agent, 40, 1, 0, 0)}
+  </g>`;
+    // Left Edge Color Strip
+    const leftStrip = `<rect x="8" y="8" width="4" height="128" rx="2" fill="${isWorking ? '#F5B942' : isAsking ? '#F87171' : p1}"/>`;
+    // Border is now the primary working/awaiting signal — no tiny spinner glyph.
+    const spinner = '';
+    // ACT badge only on IDLE — WORKING has the flowing border, AWAITING has the pulse.
+    const badgeObj = isIdle ? `
+    <rect x="100" y="14" width="28" height="16" rx="8" fill="#ffffff" opacity="0.1" />
+    <text x="114" y="25" font-size="10" font-weight="700" text-anchor="middle" fill="#A1A1AA" font-family="${fontFam}">ACT</text>
+  ` : '';
+    const toolStr = isWorking ? 'Running task' : modelText;
+    const elements = [
+        `<defs>${defs}</defs>`,
+        `<rect width="${SIZE}" height="${SIZE}" rx="16" fill="url(#${gradId})"/>`,
+        `<rect x="8" y="8" width="128" height="128" rx="12" fill="#2C2C2E" opacity="0.8"/>`,
+        glowBorder,
+        leftStrip,
+        watermark,
+        spinner,
+        askDot,
+        runBadge,
+        badgeObj,
+        `<text x="20" y="32" font-size="17" font-weight="800" text-anchor="start" fill="${colorText}" font-family="${fontFam}">${escXml(stateLbl)}</text>`,
+        `<text x="20" y="52" font-size="13" font-weight="600" text-anchor="start" fill="#E2E8F0" font-family="${fontFam}">${escXml(truncate(nameForDisplay, 13))}</text>`,
+        `<text x="20" y="120" font-size="${isWorking ? '13' : '14'}" font-weight="500" text-anchor="start" fill="${colorText}" opacity="0.8" font-family="${fontFam}">${escXml(toolStr)}</text>`
+    ].join('');
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${SIZE}" height="${SIZE}" viewBox="0 0 ${SIZE} ${SIZE}">${elements}</svg>`;
+}
+// ---- Empty Slot ----
+export function renderEmptySlot() {
+    const label = `<text x="72" y="76" text-anchor="middle" font-family="Arial,sans-serif" font-size="12" fill="#333333">Empty</text>`;
+    return svgFrame('#111111', label);
+}
+export function renderNoDaemonSlot(slot) {
+    if (slot === 0) {
+        // START button — launches macOS app
+        const elements = [
+            `<text x="72" y="56" text-anchor="middle" font-family="Arial,sans-serif" font-size="14" fill="#94a3b8">AgentDeck</text>`,
+            `<text x="72" y="96" text-anchor="middle" font-family="Arial,sans-serif" font-size="28" font-weight="bold" fill="#22c55e">\u25B6 START</text>`,
+        ].join('');
+        return svgFrame('#0f1a0f', elements);
+    }
+    return svgFrame('#111111', '');
+}
+// ---- Navigation Buttons ----
+export function renderBackButton() {
+    const arrow = `<text x="72" y="76" text-anchor="middle" font-family="Arial,sans-serif" font-size="32" fill="#94a3b8">\u2190</text>`;
+    const label = `<text x="72" y="108" text-anchor="middle" font-family="Arial,sans-serif" font-size="16" font-weight="600" fill="#94a3b8">BACK</text>`;
+    return svgFrame('#1a1a1a', arrow + label);
+}
+export function renderNextPageButton(pageLabel) {
+    const arrow = `<text x="72" y="64" text-anchor="middle" font-family="Arial,sans-serif" font-size="28" fill="#60a5fa">\u25B6</text>`;
+    const label = `<text x="72" y="92" text-anchor="middle" font-family="Arial,sans-serif" font-size="14" font-weight="600" fill="#60a5fa">NEXT</text>`;
+    const page = `<text x="72" y="114" text-anchor="middle" font-family="Arial,sans-serif" font-size="11" fill="#64748b">${escXml(pageLabel)}</text>`;
+    return svgFrame('#1a1a2e', arrow + label + page);
+}
+export function renderEscButton(active = true) {
+    const c = active ? '#f97316' : '#a0855a';
+    const bg = active ? '#2d1810' : '#1a1308';
+    const op = active ? '' : ' opacity="0.45"';
+    const elements = [
+        `<text x="72" y="62" text-anchor="middle" font-family="Arial,sans-serif" font-size="32" fill="${c}"${op}>\u2716</text>`,
+        `<text x="72" y="100" text-anchor="middle" font-family="Arial,sans-serif" font-size="28" font-weight="bold" fill="${c}"${op}>ESC</text>`,
+    ].join('');
+    return svgFrame(bg, elements);
+}
+export function renderStopButton(active = true) {
+    const c = active ? '#ef4444' : '#666666';
+    const bg = active ? '#2d1010' : '#1a0a0a';
+    const op = active ? '' : ' opacity="0.4"';
+    const elements = [
+        `<text x="72" y="62" text-anchor="middle" font-family="Arial,sans-serif" font-size="32" fill="${c}"${op}>\u25A0</text>`,
+        `<text x="72" y="100" text-anchor="middle" font-family="Arial,sans-serif" font-size="28" font-weight="bold" fill="${c}"${op}>STOP</text>`,
+    ].join('');
+    return svgFrame(bg, elements);
+}
+// ---- Detail View: Session Info ----
+export function renderDetailInfo(session, state, tool, modelName, mode, displayName, effortLevel) {
+    if (!session)
+        return renderEmptySlot();
+    const agent = session.agentType || 'claude-code';
+    const nameForDisplay = displayName ?? session.projectName;
+    const fontFam = 'Inter, -apple-system, system-ui, Helvetica Neue, sans-serif';
+    const sColor = stateColor(session.state);
+    const stateLbl = stateLabel(session.state, agent);
+    const gradId = `sd-bg-detail-${agent}`;
+    const defs = `
+    <linearGradient id="${gradId}" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#151720"/>
+      <stop offset="100%" stop-color="#0A0B10"/>
+    </linearGradient>
+  `;
+    const watermark = `<g transform="translate(90, 86)" opacity="0.36">
+    ${agentLogoIcon(agent, 40, 1, 0, 0)}
+  </g>`;
+    const leftStrip = `<rect x="8" y="8" width="4" height="128" rx="2" fill="${sColor}"/>`;
+    const badgeObj = `
+    <rect x="100" y="14" width="28" height="16" rx="8" fill="#ffffff" opacity="0.1" />
+    <text x="114" y="25" font-size="10" font-weight="700" text-anchor="middle" fill="#A1A1AA" font-family="${fontFam}">INFO</text>
+  `;
+    const toolDisplay = tool ? `\u25B6 ${truncate(tool, 18)}` : stateLbl;
+    const elements = [
+        `<defs>${defs}</defs>`,
+        `<rect width="${SIZE}" height="${SIZE}" rx="16" fill="url(#${gradId})"/>`,
+        `<rect x="8" y="8" width="128" height="128" rx="12" fill="#1C1F2E" opacity="0.8"/>`,
+        leftStrip,
+        watermark,
+        badgeObj,
+        // Title
+        `<text x="20" y="34" font-size="18" font-weight="800" text-anchor="start" fill="#ffffff" font-family="${fontFam}">${escXml(truncate(nameForDisplay, 10))}</text>`,
+        // Model/Mode — effort renders inline with model (e.g. "Opus 4.7 · max")
+        // so the permission-mode chip below keeps its y=74 slot.
+        (modelName && agent !== 'openclaw') ? `<text x="20" y="56" font-size="12" font-weight="600" text-anchor="start" fill="#94a3b8" font-family="${fontFam}">${escXml(formatModelEffort(modelName, effortLevel, 17))}</text>` : '',
+        (mode && mode !== 'default' && agent !== 'openclaw') ? `<text x="20" y="74" font-size="11" font-weight="700" text-anchor="start" fill="#a78bfa" font-family="${fontFam}">${escXml(mode.toUpperCase())}</text>` : '',
+        // Tool/State
+        `<text x="20" y="120" font-size="12" font-weight="700" text-anchor="start" fill="${tool ? '#fbbf24' : sColor}" font-family="${fontFam}">${escXml(toolDisplay)}</text>`,
+    ].join('');
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${SIZE}" height="${SIZE}" viewBox="0 0 ${SIZE} ${SIZE}">${elements}</svg>`;
+}
+// ---- Detail View: Option Button ----
+export function renderOptionButton(option, index) {
+    const label = option.label || `Option ${index + 1}`;
+    const lines = wrapTextByWidth(label, MAX_TEXT_PX, 16);
+    const lineHeight = 20;
+    const startY = lines.length === 1 ? 76 : 76 - ((lines.length - 1) * lineHeight) / 2;
+    // Slot number (top-right)
+    const slotNum = `<text x="${SIZE - 10}" y="18" text-anchor="end" font-family="Arial,sans-serif" font-size="13" fill="#ffffff" opacity="0.25">${index + 1}</text>`;
+    const textEls = lines.slice(0, 3).map((line, i) => `<text x="72" y="${startY + i * lineHeight}" text-anchor="middle" font-family="Arial,sans-serif" font-size="16" font-weight="bold" fill="#ffffff">${escXml(line)}</text>`).join('');
+    // Use different bg colors for visual distinction
+    const colors = ['#1e3a5f', '#1e3a4a', '#2a1e4a', '#1e4a3a', '#3a1e2a'];
+    const bgColor = colors[index % colors.length];
+    return svgFrame(bgColor, slotNum + textEls);
+}
+// ---- Detail View: Preset Action Button ----
+export function renderPresetButton(label, iconSvg, color, textColor, subtitle, loading) {
+    if (loading) {
+        return svgFrame(color, iconSvg);
+    }
+    const labelEl = `<text x="72" y="100" text-anchor="middle" font-family="Arial,sans-serif" font-size="16" font-weight="bold" fill="${textColor}">${escXml(label)}</text>`;
+    const subEl = subtitle
+        ? `<text x="72" y="118" text-anchor="middle" font-family="Arial,sans-serif" font-size="12" fill="${textColor}" opacity="0.7">${escXml(truncate(subtitle, 14))}</text>`
+        : '';
+    return svgFrame(color, iconSvg + labelEl + subEl);
+}
+// ---- Detail View: Info slot (tool, model/mode) ----
+export function renderInfoSlot(label, subtitle) {
+    const mainEl = `<text x="72" y="${subtitle ? 68 : 76}" text-anchor="middle" font-family="Arial,sans-serif" font-size="16" font-weight="bold" fill="#94a3b8">${escXml(truncate(label, 18))}</text>`;
+    const subEl = subtitle
+        ? `<text x="72" y="92" text-anchor="middle" font-family="Arial,sans-serif" font-size="12" fill="#64748b">${escXml(truncate(subtitle, 22))}</text>`
+        : '';
+    return svgFrame('#1a1a1a', mainEl + subEl);
+}
+// ---- SVG Frame ----
+export function svgFrame(bgColor, innerElements) {
+    // Use a random ID to prevent SVG constraint clashes
+    const gradId = 'frame-bg-' + Math.floor(Math.random() * 1000000);
+    const defs = `
+    <linearGradient id="${gradId}" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="${bgColor}"/>
+      <stop offset="100%" stop-color="#0A0A0E"/>
+    </linearGradient>
+  `;
+    return [
+        `<svg xmlns="http://www.w3.org/2000/svg" width="${SIZE}" height="${SIZE}" viewBox="0 0 ${SIZE} ${SIZE}">`,
+        `<defs>${defs}</defs>`,
+        `<rect width="${SIZE}" height="${SIZE}" rx="16" fill="url(#${gradId})"/>`,
+        `<rect x="8" y="8" width="128" height="128" rx="12" fill="#2C2C2E" opacity="0.6"/>`,
+        innerElements,
+        `</svg>`,
+    ].join('');
+}
+//# sourceMappingURL=session-slot-renderer.js.map