gui: replace emoji with Lucide SVG icons for sol/terra/luna

- model-display.ts: render inline IconSun/IconGlobe/IconMoon (React
  elements) instead of emoji characters
- ui.tsx: SelectOption.label accepts ReactNode for rich dropdown labels
- icons.tsx: remove duplicate icon declarations

Icons render in all surfaces: Dashboard dropdowns, Models list,
Subagents, Usage tables, Logs. No emoji — SVG stroke icons only.

Author: lidge-jun

gui/src/icons.tsx

@@ -28,6 +28,7 @@ export const IconGithub = (p: P) => (<svg {...S(p)}><path d="M9 19c-5 1.5-5-2.5-
 export const IconPower = (p: P) => (<svg {...S(p)}><path d="M18.4 5.6a9 9 0 1 1-12.8 0"/><path d="M12 2v10"/></svg>);
 export const IconExternal = (p: P) => (<svg {...S(p)}><path d="M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>);
 export const IconKey = (p: P) => (<svg {...S(p)}><circle cx="7.5" cy="15.5" r="4.5"/><path d="m10.7 12.3 9.6-9.6M16 7l3 3M14 9l2 2"/></svg>);
+
 export const IconLock = (p: P) => (<svg {...S(p)}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>);
 export const IconTicket = (p: P) => (<svg {...S(p)}><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/><path d="M13 5v2"/><path d="M13 17v2"/><path d="M13 11v2"/></svg>);
 export const IconLink = (p: P) => (<svg {...S(p)}><path d="M9 17H7A5 5 0 0 1 7 7h2M15 7h2a5 5 0 0 1 0 10h-2M8 12h8"/></svg>);

gui/src/model-display.ts

@@ -1,23 +1,42 @@
 /**
- * Global model display-name mapping: prepends a visual icon for recognized model slugs.
- * Used across all GUI surfaces (dropdowns, tables, badges) so the 5.6 trio is instantly
- * distinguishable.
+ * Global model display-name mapping: renders an inline SVG icon for recognized
+ * model slugs. Used across all GUI surfaces (dropdowns, tables, badges) so the
+ * 5.6 trio is instantly distinguishable. No emoji — Lucide-style SVG only.
  */
+import { createElement, type ReactNode } from "react";
+import { IconSun, IconGlobe, IconMoon } from "./icons";
 
-const MODEL_ICONS: Record<string, string> = {
-  "gpt-5.6-sol": "\u2600\uFE0F",   // ☀️ sun
-  "gpt-5.6-terra": "\uD83C\uDF0D", // 🌍 earth
-  "gpt-5.6-luna": "\uD83C\uDF19",  // 🌙 moon
+type IconComponent = typeof IconSun;
+
+const MODEL_ICON_MAP: Record<string, IconComponent> = {
+  "gpt-5.6-sol": IconSun,
+  "gpt-5.6-terra": IconGlobe,
+  "gpt-5.6-luna": IconMoon,
 };
 
-/** Return a display label with an icon prefix for recognized slugs, else the raw slug. */
-export function modelLabel(slug: string): string {
-  // Check bare slug first, then try the tail after a provider prefix (e.g. "openrouter/openai/gpt-5.6-sol").
-  const icon = MODEL_ICONS[slug] ?? MODEL_ICONS[slug.slice(slug.lastIndexOf("/") + 1)];
-  return icon ? `${icon} ${slug}` : slug;
+const ICON_STYLE = { width: 14, height: 14, flexShrink: 0, verticalAlign: "text-bottom" as const, marginRight: 4 };
+
+/** Resolve the bare slug from a potentially provider-prefixed id. */
+function bareSlug(slug: string): string {
+  return slug.slice(slug.lastIndexOf("/") + 1);
+}
+
+/** Return the icon component for a model slug, or null. */
+function resolveIcon(slug: string): IconComponent | null {
+  return MODEL_ICON_MAP[slug] ?? MODEL_ICON_MAP[bareSlug(slug)] ?? null;
+}
+
+/** Render a model name with an inline SVG icon prefix (ReactNode). Falls back to plain text. */
+export function modelLabel(slug: string): ReactNode {
+  const Icon = resolveIcon(slug);
+  if (!Icon) return slug;
+  return createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 } },
+    createElement(Icon, { style: ICON_STYLE }),
+    slug,
+  );
 }
 
-/** Return just the icon for a slug, or empty string if none. */
-export function modelIcon(slug: string): string {
-  return MODEL_ICONS[slug] ?? MODEL_ICONS[slug.slice(slug.lastIndexOf("/") + 1)] ?? "";
+/** True when this slug has a visual icon. */
+export function hasModelIcon(slug: string): boolean {
+  return resolveIcon(slug) !== null;
 }

gui/src/ui.tsx

@@ -21,7 +21,7 @@ export function Notice({ tone, children }: { tone: "ok" | "err"; children: React
   );
 }
 
-export interface SelectOption { value: string; label: string }
+export interface SelectOption { value: string; label: React.ReactNode }
 
 export function Select({ value, options, onChange, disabled, label, style }: {
   value: string;