@volter-ai-dev/supercode-ui 0.1.24 → 0.1.25

package/README.md

@@ -59,7 +59,7 @@ import {
   Conversation,
   SessionList,
 } from '@volter-ai-dev/supercode-ui/preact';
-import { HarnessLogo } from '@volter-ai-dev/supercode-ui/preact/logo';
+import { HarnessLogo, harnessLogoDataUrl } from '@volter-ai-dev/supercode-ui/preact/logo';
 import { groupConversation } from '@volter-ai-dev/supercode-ui/core';
 ```
 
@@ -70,6 +70,8 @@ formatters, and intent constructors live at `supercode-ui/core` and have no DOM
 For genuine partial delivery, the `preact/logo`, `preact/icon`, `preact/conversation`, `preact/sessions`,
 `preact/composer`, and `preact/messenger` subpaths are independently tree-shaken artifacts; taking
 the logo does not pull in Markdown, the messenger, or session-list code.
+`harnessLogoDataUrl(id)` gives non-Preact launchers the same self-contained canonical SVG; it
+returns `null` for an unknown harness rather than inventing a fallback identity.
 
 ## Bind directly to the headless controller
 

package/components.mjs

@@ -1952,6 +1952,27 @@ var LOGOS = {
 function hasHarnessLogo(id) {
   return Object.hasOwn(LOGOS, id);
 }
+var LOGO_CHROME = {
+  codex: { background: "#f7f7f5", color: "#111" },
+  gemini: { background: "#f7f7f5", color: "#6e79dc" },
+  goose: { background: "#f7f7f5", color: "#101010" },
+  pi: { background: "#efefeb", color: "#111" },
+  supercode: { background: "#111923", color: "#f7f7f5" }
+};
+function escapeSvgAttribute(value) {
+  return String(value).replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function harnessLogoDataUrl(id) {
+  const logo = LOGOS[id];
+  if (!logo) return null;
+  const chrome = LOGO_CHROME[id] ?? { background: "#111", color: id === "claude-code" ? "#d97757" : "#f7f7f5" };
+  const glyph = logo.paths.map(([tag, attributes]) => {
+    const serialized = Object.entries(attributes).map(([name, value]) => `${name}="${escapeSvgAttribute(value)}"`).join(" ");
+    return `<${tag} ${serialized}/>`;
+  }).join("");
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="19" fill="${chrome.background}" stroke="#383a42"/><svg x="7" y="7" width="26" height="26" viewBox="${logo.viewBox}" color="${chrome.color}" fill="currentColor" preserveAspectRatio="xMidYMid meet">${glyph}</svg></svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
 function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
   const logo = LOGOS[id];
   useEffect5(() => {
@@ -2535,5 +2556,6 @@ export {
   ToolRow,
   TranscriptEntry,
   UiIcon,
+  harnessLogoDataUrl,
   hasHarnessLogo
 };

package/index.d.ts

@@ -363,6 +363,7 @@ export function HarnessLogo(props: { id: HarnessId; activity?: SessionActivity;
 export type UiIconName = 'attach' | 'back' | 'check' | 'chevron' | 'close' | 'copy' | 'down' | 'menu' | 'plus' | 'search' | 'send' | 'stop';
 export function UiIcon(props: { name: UiIconName; size?: number; class?: string }): VNode | null;
 export function hasHarnessLogo(id: string): boolean;
+export function harnessLogoDataUrl(id: string): string | null;
 export function ImageViewer(props: { items: TranscriptImage[]; index: number; adapter?: Pick<UiAdapter, 'copyText' | 'resolveImage'>; onChange(index: number): void; onClose(): void }): VNode | null;
 export function MessageImages(props: { items?: TranscriptImage[]; adapter?: Pick<UiAdapter, 'copyText' | 'resolveImage'> }): VNode | null;
 export function LoadingStatus(props: { state: SupercodeUiState; compact?: boolean }): VNode;

package/logo.d.ts

@@ -1,2 +1,2 @@
 export type { HarnessId, SessionActivity } from './index.js';
-export { HarnessLogo, hasHarnessLogo } from './index.js';
+export { HarnessLogo, harnessLogoDataUrl, hasHarnessLogo } from './index.js';

package/logo.mjs

@@ -48,6 +48,27 @@ var LOGOS = {
 function hasHarnessLogo(id) {
   return Object.hasOwn(LOGOS, id);
 }
+var LOGO_CHROME = {
+  codex: { background: "#f7f7f5", color: "#111" },
+  gemini: { background: "#f7f7f5", color: "#6e79dc" },
+  goose: { background: "#f7f7f5", color: "#101010" },
+  pi: { background: "#efefeb", color: "#111" },
+  supercode: { background: "#111923", color: "#f7f7f5" }
+};
+function escapeSvgAttribute(value) {
+  return String(value).replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function harnessLogoDataUrl(id) {
+  const logo = LOGOS[id];
+  if (!logo) return null;
+  const chrome = LOGO_CHROME[id] ?? { background: "#111", color: id === "claude-code" ? "#d97757" : "#f7f7f5" };
+  const glyph = logo.paths.map(([tag, attributes]) => {
+    const serialized = Object.entries(attributes).map(([name, value]) => `${name}="${escapeSvgAttribute(value)}"`).join(" ");
+    return `<${tag} ${serialized}/>`;
+  }).join("");
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="19" fill="${chrome.background}" stroke="#383a42"/><svg x="7" y="7" width="26" height="26" viewBox="${logo.viewBox}" color="${chrome.color}" fill="currentColor" preserveAspectRatio="xMidYMid meet">${glyph}</svg></svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
 function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
   const logo = LOGOS[id];
   useEffect(() => {
@@ -61,5 +82,6 @@ function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
 }
 export {
   HarnessLogo,
+  harnessLogoDataUrl,
   hasHarnessLogo
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volter-ai-dev/supercode-ui",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "type": "module",
   "description": "Composable default UI kit for Supercode-powered coding-agent experiences",
   "exports": {