feat(brand): render Neuron wordmark in TUI via kitty/iTerm2 graphics with ASCII fallback

packages/plugin/package.json

@@ -27,9 +27,9 @@
     "zod": "catalog:"
   },
   "peerDependencies": {
-    "@opentui/core": ">=0.4.5",
-    "@opentui/keymap": ">=0.4.5",
-    "@opentui/solid": ">=0.4.5"
+    "@opentui/core": ">=0.5.6",
+    "@opentui/keymap": ">=0.5.6",
+    "@opentui/solid": ">=0.5.6"
   },
   "peerDependenciesMeta": {
     "@opentui/core": {

packages/tui/src/component/logo.tsx

@@ -1,10 +1,32 @@
+import { useRenderer } from "@opentui/solid"
+import { createSignal, For, onMount, type JSX } from "solid-js"
 import { RGBA, TextAttributes } from "@opentui/core"
-import { For, type JSX } from "solid-js"
 import { tint, useTheme } from "../context/theme"
 import { logo } from "../logo"
+import wordmark from "../assets/neuron-wordmark.png" with { type: "file" }
 
+// The wordmark PNG renders through the Kitty graphics protocol (or iTerm2
+// OSC 1337) when the terminal supports it; otherwise we fall back to the
+// block-letter ASCII logo.
 export function Logo() {
   const { theme } = useTheme()
+  const renderer = useRenderer()
+  const [useImage, setImage] = createSignal(false)
+  const [imageFailed, setImageFailed] = createSignal(false)
+
+  onMount(() => {
+    // capability info lands asynchronously after startup; only trust an
+    // explicit positive detection
+    const caps = (renderer as { capabilities?: { kitty_graphics?: boolean; iterm2?: boolean } }).capabilities
+    if (caps?.kitty_graphics || caps?.iterm2) {
+      setImage(true)
+      return
+    }
+    const onCaps = (next: { kitty_graphics?: boolean; iterm2?: boolean }) => {
+      if (next?.kitty_graphics || next?.iterm2) setImage(true)
+    }
+    renderer.on("capabilities", onCaps)
+  })
 
   const renderLine = (line: string, fg: RGBA, bold: boolean): JSX.Element[] => {
     const shadow = tint(theme.background, fg, 0.25)
@@ -46,6 +68,20 @@ export function Logo() {
     })
   }
 
+  if (useImage() && !imageFailed()) {
+    return (
+      <box height={7}>
+        <image
+          source={wordmark}
+          width={34}
+          height={6}
+          fit="fit"
+          onError={() => setImageFailed(true)}
+        />
+      </box>
+    )
+  }
+
   return (
     <box>
       <For each={logo.left}>

packages/tui/src/types/assets.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const src: string
+  export default src
+}