fix(settings): every CLI row gets an icon — mascot renders + monogram fallback

Kiro and OpenClaw get real icons rendered from the in-house pixel
mascots (new opt-in MascotRenderHarness/testRenderCliIcons export);
sources without an asset (ZCode, custom CLIs) fall back to a rounded
monogram tile with a deterministic per-source hue, so the settings
hooks list never shows bare rows.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: wxtsky

Sources/CodeIsland/NotchPanelView.swift

@@ -2828,6 +2828,10 @@ private let cliIconFiles: [String: String] = [
     "omp": "pi",
     "opencode": "opencode",
     "cline": "cline",
+    // Rendered from the in-house pixel mascots via
+    // MascotRenderHarness/testRenderCliIcons (MASCOT_ICON_DIR=…).
+    "kiro": "kiro",
+    "openclaw": "openclaw",
 ]
 
 private var cliIconCache: [String: NSImage] = [:]
@@ -2838,12 +2842,48 @@ func cliIcon(source: String, size: CGFloat = 16) -> NSImage? {
     guard let filename = cliIconFiles[source],
           let url = Bundle.appModule.url(forResource: filename, withExtension: "png", subdirectory: "Resources/cli-icons"),
           let image = NSImage(contentsOf: url)
-    else { return nil }
+    else {
+        // No asset (new integrations, custom CLIs): draw a monogram tile so
+        // every row in the settings CLI list still gets an icon.
+        let fallback = monogramIcon(for: source, size: size)
+        cliIconCache[key] = fallback
+        return fallback
+    }
     image.size = NSSize(width: size, height: size)
     cliIconCache[key] = image
     return image
 }
 
+/// Rounded tile with the source's first letter; hue derived from the source
+/// name so distinct CLIs get stable, distinct colors.
+private func monogramIcon(for source: String, size: CGFloat) -> NSImage {
+    let letter = String(source.trimmingCharacters(in: CharacterSet(charactersIn: ".")).prefix(1)).uppercased()
+    // Deterministic hash — Swift's hashValue is seeded per launch and would
+    // repaint the tile a different color every run.
+    let stableHash = source.unicodeScalars.reduce(0) { ($0 &* 31 &+ Int($1.value)) & 0x7FFF_FFFF }
+    let hue = Double(stableHash % 360) / 360.0
+    let scale: CGFloat = 4  // draw at 4x so small sizes stay crisp
+    let px = size * scale
+    let image = NSImage(size: NSSize(width: px, height: px), flipped: false) { rect in
+        let bg = NSColor(hue: hue, saturation: 0.55, brightness: 0.72, alpha: 1)
+        NSBezierPath(roundedRect: rect.insetBy(dx: px * 0.02, dy: px * 0.02),
+                     xRadius: px * 0.22, yRadius: px * 0.22).addClip()
+        bg.setFill()
+        rect.fill()
+        let font = NSFont.systemFont(ofSize: px * 0.58, weight: .bold)
+        let attrs: [NSAttributedString.Key: Any] = [
+            .font: font,
+            .foregroundColor: NSColor.white,
+        ]
+        let text = NSAttributedString(string: letter, attributes: attrs)
+        let textSize = text.size()
+        text.draw(at: NSPoint(x: (px - textSize.width) / 2, y: (px - textSize.height) / 2))
+        return true
+    }
+    image.size = NSSize(width: size, height: size)
+    return image
+}
+
 private struct SessionTag: View {
     let text: String
     var color: Color = .white.opacity(0.7)

Sources/CodeIsland/Resources/cli-icons/kiro.png

@@ -12,6 +12,37 @@ import SwiftUI
 @MainActor
 final class MascotRenderHarness: XCTestCase {
 
+    /// One-frame icon export for cli-icons assets: renders each source's
+    /// mascot at a fixed instant on a transparent background. Opt-in like the
+    /// contact sheets (`MASCOT_ICON_DIR` + `MASCOT_ICON_SOURCES=kiro,openclaw`).
+    func testRenderCliIcons() throws {
+        guard let outDir = ProcessInfo.processInfo.environment["MASCOT_ICON_DIR"] else {
+            throw XCTSkip("MASCOT_ICON_DIR not set — harness is opt-in")
+        }
+        let sources = (ProcessInfo.processInfo.environment["MASCOT_ICON_SOURCES"] ?? "kiro,openclaw")
+            .split(separator: ",").map(String.init)
+        let status: MascotAgentStatus = switch ProcessInfo.processInfo.environment["MASCOT_ICON_STATUS"] {
+        case "idle": .idle
+        case "waitingApproval": .waitingApproval
+        case "waitingQuestion": .waitingQuestion
+        default: .processing
+        }
+        let time = Double(ProcessInfo.processInfo.environment["MASCOT_ICON_TIME"] ?? "") ?? 0.0
+
+        try FileManager.default.createDirectory(atPath: outDir, withIntermediateDirectories: true)
+        for source in sources {
+            let icon = MascotIconFrame(source: source, status: status, time: time)
+            let renderer = ImageRenderer(content: icon)
+            renderer.scale = 2  // 64pt frame → 128px asset
+            guard let cgImage = renderer.cgImage,
+                  let png = NSBitmapImageRep(cgImage: cgImage).representation(using: .png, properties: [:])
+            else {
+                XCTFail("icon render failed for \(source)"); continue
+            }
+            try png.write(to: URL(fileURLWithPath: "\(outDir)/\(source).png"))
+        }
+    }
+
     func testRenderContactSheets() throws {
         guard let outDir = ProcessInfo.processInfo.environment["MASCOT_SHEET_DIR"] else {
             throw XCTSkip("MASCOT_SHEET_DIR not set — harness is opt-in")
@@ -48,6 +79,20 @@ final class MascotRenderHarness: XCTestCase {
     }
 }
 
+/// Single transparent-background frame sized for a cli-icons asset.
+private struct MascotIconFrame: View {
+    let source: String
+    let status: MascotAgentStatus
+    let time: Double
+
+    var body: some View {
+        MascotContactSheet.routedMascot(source: source, status: status, size: 58)
+            .environment(\.mascotAnimationsActive, false)
+            .environment(\.mascotStaticTime, time)
+            .frame(width: 64, height: 64)
+    }
+}
+
 /// One row of frames for a (source, status) pair, each frame rendered at a
 /// fixed timeline instant via the static-frame path of MascotTimeline
 /// (mascotAnimationsActive=false renders content(mascotStaticTime) once).
@@ -76,29 +121,33 @@ private struct MascotContactSheet: View {
     }
 
     /// Direct routing (bypasses MascotView, which re-injects the live gate).
-    @ViewBuilder
     private var mascot: some View {
+        Self.routedMascot(source: source, status: status, size: 54)
+    }
+
+    @ViewBuilder
+    static func routedMascot(source: String, status: MascotAgentStatus, size: CGFloat) -> some View {
         switch source {
-        case "codex": DexView(status: status, size: 54)
-        case "gemini": GeminiView(status: status, size: 54)
-        case "cursor": CursorView(status: status, size: 54)
-        case "trae": TraeView(status: status, size: 54)
-        case "copilot": CopilotView(status: status, size: 54)
-        case "qoder": QoderView(status: status, size: 54)
-        case "droid": DroidView(status: status, size: 54)
-        case "codebuddy": BuddyView(status: status, size: 54)
-        case "stepfun": StepFunView(status: status, size: 54)
-        case "opencode": OpenCodeView(status: status, size: 54)
-        case "qwen": QwenView(status: status, size: 54)
-        case "antigravity": AntiGravityView(status: status, size: 54)
-        case "workbuddy": WorkBuddyView(status: status, size: 54)
-        case "hermes": HermesView(status: status, size: 54)
-        case "openclaw": OpenClawView(status: status, size: 54)
-        case "kiro": KiroView(status: status, size: 54)
-        case "kimi": KimiView(status: status, size: 54)
-        case "pi": PiView(status: status, size: 54)
-        case "cline": ClineView(status: status, size: 54)
-        default: ClawdView(status: status, size: 54)
+        case "codex": DexView(status: status, size: size)
+        case "gemini": GeminiView(status: status, size: size)
+        case "cursor": CursorView(status: status, size: size)
+        case "trae": TraeView(status: status, size: size)
+        case "copilot": CopilotView(status: status, size: size)
+        case "qoder": QoderView(status: status, size: size)
+        case "droid": DroidView(status: status, size: size)
+        case "codebuddy": BuddyView(status: status, size: size)
+        case "stepfun": StepFunView(status: status, size: size)
+        case "opencode": OpenCodeView(status: status, size: size)
+        case "qwen": QwenView(status: status, size: size)
+        case "antigravity": AntiGravityView(status: status, size: size)
+        case "workbuddy": WorkBuddyView(status: status, size: size)
+        case "hermes": HermesView(status: status, size: size)
+        case "openclaw": OpenClawView(status: status, size: size)
+        case "kiro": KiroView(status: status, size: size)
+        case "kimi": KimiView(status: status, size: size)
+        case "pi": PiView(status: status, size: size)
+        case "cline": ClineView(status: status, size: size)
+        default: ClawdView(status: status, size: size)
         }
     }
 }