cli-jaw 1.5.0 → 1.6.2

package/public/js/features/settings-types.ts

@@ -2,7 +2,7 @@
 
 export interface PerCliConfig { model?: string; effort?: string; fastMode?: boolean; contextWindow?: boolean; contextWindowSize?: number; contextCompactLimit?: number; }
 export interface TelegramConfig { enabled?: boolean; token?: string; allowedChatIds?: number[]; forwardAll?: boolean; }
-export interface DiscordConfig { enabled?: boolean; token?: string; guildId?: string; channelIds?: string[]; forwardAll?: boolean; allowBots?: boolean; }
+export interface DiscordConfig { enabled?: boolean; token?: string; guildId?: string; channelIds?: string[]; forwardAll?: boolean; allowBots?: boolean; mentionOnly?: boolean; }
 export interface QuotaWindow { label: string; percent: number; resetsAt?: string | number | null; }
 export interface QuotaEntry {
     account?: { email?: string; type?: string; plan?: string; tier?: string };

package/public/js/features/settings.ts

@@ -1,7 +1,7 @@
 // settings.ts — barrel re-export (preserves all import paths)
 export { loadSettings, updateSettings, setPerm, getModelValue, handleModelSelect, applyCustomModel, onCliChange, saveActiveCliSettings, savePerCli } from './settings-core.js';
 export { setTelegram, setForwardAll, saveTelegramSettings } from './settings-telegram.js';
-export { setDiscord, setDiscordForwardAll, setDiscordAllowBots, saveDiscordSettings } from './settings-discord.js';
+export { setDiscord, setDiscordForwardAll, setDiscordAllowBots, setDiscordMentionOnly, saveDiscordSettings } from './settings-discord.js';
 export { setActiveChannel, loadFallbackOrder, saveFallbackOrder } from './settings-channel.js';
 export { loadMcpServers, syncMcpServers, installMcpGlobal } from './settings-mcp.js';
 export { loadCliStatus } from './settings-cli-status.js';

package/public/js/features/sidebar.ts

@@ -1,7 +1,9 @@
 // ── Sidebar Collapse ──
 // Toggle left/right sidebars. Responsive-aware:
-// - Wide viewport (>900px): toggle *-collapsed classes
-// - Narrow viewport (≤900px): CSS auto-collapses, toggle *-expanded to override
+// - Wide viewport (>900px): persist *-collapsed classes
+// - Narrow viewport (≤900px): CSS auto-collapses, expanded panels are transient
+
+import { ICONS } from '../icons.js';
 
 interface SidebarState {
     left?: boolean;
@@ -10,32 +12,60 @@ interface SidebarState {
 
 const STORAGE_KEY = 'sidebarState';
 const BREAKPOINT = 900;
+const OVERLAY_BREAKPOINT = 768;
+
+function isOverlayMode(): boolean {
+    return window.innerWidth <= OVERLAY_BREAKPOINT;
+}
+
+function clearExpandedPanels(): void {
+    document.body.classList.remove('left-expanded', 'right-expanded');
+}
+
+function toggleExpandedPanel(side: 'left' | 'right'): void {
+    const ownClass = `${side}-expanded`;
+    const otherClass = side === 'left' ? 'right-expanded' : 'left-expanded';
+    const willOpen = !document.body.classList.contains(ownClass);
+    document.body.classList.remove(otherClass);
+    document.body.classList.toggle(ownClass, willOpen);
+}
 
 export function initSidebar(): void {
     let saved: SidebarState = {};
     try { saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}'); } catch { /* corrupted */ }
     if (saved.left) document.body.classList.add('left-collapsed');
     if (saved.right) document.body.classList.add('right-collapsed');
+    let wasOverlayMode = isOverlayMode();
 
     document.getElementById('toggleLeft')?.addEventListener('click', toggleLeft);
     document.getElementById('toggleRight')?.addEventListener('click', toggleRight);
 
     // On resize: sync classes with viewport mode
     window.addEventListener('resize', () => {
+        const overlayMode = isOverlayMode();
+
         if (window.innerWidth > BREAKPOINT) {
-            document.body.classList.remove('left-expanded', 'right-expanded');
+            clearExpandedPanels();
             let s: SidebarState = {};
             try { s = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}'); } catch { /* corrupted */ }
             document.body.classList.toggle('left-collapsed', !!s.left);
             document.body.classList.toggle('right-collapsed', !!s.right);
         } else {
             document.body.classList.remove('left-collapsed', 'right-collapsed');
+            if (overlayMode !== wasOverlayMode) {
+                clearExpandedPanels();
+            }
         }
+
+        wasOverlayMode = overlayMode;
         syncIcons();
     });
 
     if (window.innerWidth <= BREAKPOINT) {
         document.body.classList.remove('left-collapsed', 'right-collapsed');
+        if (isOverlayMode()) {
+            clearExpandedPanels();
+        }
     }
     syncIcons();
 }
@@ -46,7 +76,7 @@ function isNarrow(): boolean {
 
 export function toggleLeft(): void {
     if (isNarrow()) {
-        document.body.classList.toggle('left-expanded');
+        toggleExpandedPanel('left');
     } else {
         document.body.classList.toggle('left-collapsed');
     }
@@ -56,7 +86,7 @@ export function toggleLeft(): void {
 
 export function toggleRight(): void {
     if (isNarrow()) {
-        document.body.classList.toggle('right-expanded');
+        toggleExpandedPanel('right');
     } else {
         document.body.classList.toggle('right-collapsed');
     }
@@ -77,8 +107,8 @@ function isRightOpen(): boolean {
 function syncIcons(): void {
     const leftBtn = document.getElementById('toggleLeft');
     const rightBtn = document.getElementById('toggleRight');
-    if (leftBtn) leftBtn.textContent = isLeftOpen() ? '◀' : '▶';
-    if (rightBtn) rightBtn.textContent = isRightOpen() ? '▶' : '◀';
+    if (leftBtn) leftBtn.innerHTML = isLeftOpen() ? ICONS.chevronLeft : ICONS.chevronRight;
+    if (rightBtn) rightBtn.innerHTML = isRightOpen() ? ICONS.chevronRight : ICONS.chevronLeft;
 }
 
 function save(): void {

package/public/js/features/skills.ts

@@ -3,6 +3,7 @@ import { state } from '../state.js';
 import { t, fetchWithLocale } from './i18n.js';
 import { apiJson } from '../api.js';
 import { escapeHtml } from '../render.js';
+import { ICONS, emojiToIcon } from '../icons.js';
 
 interface SkillItem {
     id: string;
@@ -46,13 +47,13 @@ export function renderSkills(): void {
 
     list.innerHTML = filtered.map(s => {
         const reqParts: string[] = [];
-        if (s.requires?.env) reqParts.push('🔑 ' + s.requires.env.map(e => escapeHtml(e)).join(', '));
-        if (s.requires?.bins) reqParts.push('⚙️ ' + s.requires.bins.map(b => escapeHtml(b)).join(', '));
+        if (s.requires?.env) reqParts.push(`${ICONS.key} ` + s.requires.env.map(e => escapeHtml(e)).join(', '));
+        if (s.requires?.bins) reqParts.push(`${ICONS.settings} ` + s.requires.bins.map(b => escapeHtml(b)).join(', '));
         if (s.install) reqParts.push(escapeHtml(s.install));
         return `
         <div class="skill-card ${s.enabled ? 'enabled' : ''}">
             <div class="skill-card-header">
-                <span class="skill-emoji">${escapeHtml(s.emoji || '🔧')}</span>
+                <span class="skill-emoji">${s.emoji ? emojiToIcon(s.emoji) : ICONS.tool}</span>
                 <span class="skill-name">${escapeHtml(s.name || s.id)}</span>
                 <button class="skill-toggle ${s.enabled ? 'on' : 'off'}"
                         data-skill-id="${escapeHtml(s.id)}" data-skill-enabled="${s.enabled}"

package/public/js/features/theme.ts

@@ -4,6 +4,8 @@
 
 import githubDark from 'highlight.js/styles/github-dark.css?inline';
 import githubLight from 'highlight.js/styles/github.css?inline';
+import { broadcastThemeToIframes } from '../diagram/iframe-renderer.js';
+import { rerenderMermaidDiagrams } from '../render.js';
 
 const STORAGE_KEY = 'theme';
 let hljsStyleEl: HTMLStyleElement | null = null;
@@ -43,4 +45,6 @@ function applyTheme(theme: string): void {
     }
 
     applyHljsTheme(theme);
+    broadcastThemeToIframes();
+    rerenderMermaidDiagrams();
 }

package/public/js/features/tool-ui.ts

@@ -3,6 +3,7 @@
 // Extracted from ui.ts for modularity.
 
 import { escapeHtml } from '../render.js';
+import { ICONS } from '../icons.js';
 
 export interface ToolLogEntry {
     icon: string;
@@ -42,7 +43,7 @@ function renderToolItem(tl: ToolLogEntry, idx: number): string {
                     <span class="tool-item-label">${label}</span>
                     ${snippetHtml}
                 </span>
-                <span class="tool-item-chevron">▸</span>
+                <span class="tool-item-chevron">${ICONS.chevronRight}</span>
             </button>
             <div class="tool-item-details collapsed" id="${detailId}">
                 <pre class="tool-item-full">${escapeHtml(detail)}</pre>
@@ -63,14 +64,14 @@ export function buildToolGroupHtml(toolLog: ToolLogEntry[]): string {
     });
 
     const summaryParts = Object.entries(counts)
-        .map(([icon, n]) => `${escapeHtml(icon)}×${n}`)
+        .map(([icon, n]) => `${escapeHtml(icon)}&times;${n}`)
         .join(' ');
 
     const toolId = `td-${Date.now()}`;
 
     const logLines = toolLog.map((tl, i) => renderToolItem(tl, i)).join('');
 
-    return `<div class="tool-group"><button class="tool-group-summary" aria-expanded="false" aria-controls="${toolId}"><span class="tool-status-dot done"></span><span class="tool-group-summary-text">${summaryParts}</span><span class="tool-group-chevron">▾</span></button><div class="tool-details collapsed" id="${toolId}">${logLines}</div></div>`;
+    return `<div class="tool-group"><button class="tool-group-summary" aria-expanded="false" aria-controls="${toolId}"><span class="tool-status-dot done"></span><span class="tool-group-summary-text">${summaryParts}</span><span class="tool-group-chevron">${ICONS.chevronDown}</span></button><div class="tool-details collapsed" id="${toolId}">${logLines}</div></div>`;
 }
 
 /** Bind expand/collapse click handlers for tool items within a container */
@@ -89,7 +90,7 @@ export function bindToolItemInteractions(root: HTMLElement): void {
         details.classList.toggle('collapsed', !expanding);
         wrapper.classList.toggle('expanded', expanding);
         toggle.setAttribute('aria-expanded', expanding ? 'true' : 'false');
-        if (chevron) chevron.textContent = expanding ? '▾' : '▸';
+        if (chevron) chevron.innerHTML = expanding ? ICONS.chevronDown : ICONS.chevronRight;
     });
     root.dataset.toolItemBound = '1';
 }
@@ -103,7 +104,7 @@ export function renderLiveToolActivity(msgDiv: HTMLElement, label: string): void
         const content = msgDiv.querySelector('.msg-content');
         if (content) content.before(liveEl);
     }
-    liveEl.innerHTML = `<span class="tool-status-dot running"></span><span>${escapeHtml(label)}</span>`;
+    liveEl.innerHTML = `<span class="tool-status-dot running"></span><span>${label}</span>`;
 }
 
 /** Clean up all live tool activity indicators */

package/public/js/features/voice-recorder.ts

@@ -3,6 +3,7 @@
 import { state } from '../state.js';
 import { addSystemMsg } from '../ui.js';
 import { t } from './i18n.js';
+import { ICONS } from '../icons.js';
 import { sendVoiceToServer } from './chat.js';
 
 let cancelled = false;
@@ -165,7 +166,7 @@ function updateRecordingUI(recording: boolean): void {
     const cancelBtn = document.getElementById('btnVoiceCancel');
     if (btn) {
         btn.classList.toggle('recording', recording);
-        btn.textContent = recording ? '⏹' : '🎤';
+        btn.innerHTML = recording ? ICONS.stop : ICONS.mic;
         btn.title = recording ? t('voice.stop') : t('voice.start');
     }
     if (cancelBtn) {

package/public/js/icons.ts

@@ -0,0 +1,257 @@
+// ── Icon System ──
+// Central module for all UI icons. Replaces hardcoded emoji strings with
+// Lucide SVG icons and custom SVGs. Every file that needs an icon imports
+// from here — never use emoji literals in UI code.
+
+import { buildLucideSvg } from '@lucide/icons/build';
+import {
+    CircleCheck,
+    CircleX,
+    Wrench,
+    SkipForward,
+    Brain,
+    HeartPulse,
+    Lock,
+    LockOpen,
+    KeyRound,
+    Settings,
+    FileText,
+    Trash2,
+    TriangleAlert,
+    Lightbulb,
+    Search,
+    Globe,
+    Zap,
+    MessageSquare,
+    NotebookPen,
+    RefreshCw,
+    Mic,
+    Package,
+    ClipboardList,
+    Bot,
+    Palette,
+    Link,
+    HandMetal,
+    Paperclip,
+    Save,
+    Gamepad2,
+    House,
+    Radio,
+    FolderOpen,
+    Pencil,
+    ChartBar,
+    Hourglass,
+    Square,
+    X,
+    Send,
+    Check,
+    ChevronLeft,
+    ChevronRight,
+    ChevronDown,
+    ArrowLeft,
+    ArrowRight,
+    Copy,
+    Download,
+} from '@lucide/icons';
+
+// ── Size presets ──
+const S = 14;  // inline / small
+const M = 16;  // default UI
+
+function luc(data: Parameters<typeof buildLucideSvg>[0], size = M): string {
+    return buildLucideSvg(data, { size });
+}
+
+// ── Shark mascot (🦈 emoji — brand identity) ──
+const SHARK_SVG = '🦈';
+
+// ── Icon registry ──
+// Keys match the semantic role, NOT the old emoji codepoint.
+export const ICONS = {
+    // Status
+    check:       luc(CircleCheck),
+    error:       luc(CircleX),
+    warning:     luc(TriangleAlert),
+    skip:        luc(SkipForward),
+
+    // Tool activity
+    tool:        luc(Wrench),
+    thinking:    luc(MessageSquare),
+    search:      luc(Search),
+    web:         luc(Globe),
+    exec:        luc(Zap),
+    compacting:  luc(Package),
+    plan:        luc(NotebookPen),
+
+    // App features
+    brain:       luc(Brain),
+    heartPulse:  luc(HeartPulse),
+    lock:        luc(Lock),
+    lockOpen:    luc(LockOpen),
+    key:         luc(KeyRound),
+    settings:    luc(Settings),
+    file:        luc(FileText),
+    trash:       luc(Trash2),
+    lightbulb:   luc(Lightbulb),
+    refresh:     luc(RefreshCw),
+    mic:         luc(Mic),
+    clipboard:   luc(ClipboardList),
+    robot:       luc(Bot),
+    palette:     luc(Palette),
+    link:        luc(Link),
+    salute:      luc(HandMetal),
+
+    // Mascot
+    shark:       SHARK_SVG,
+
+    // HTML template icons
+    paperclip:   luc(Paperclip),
+    save:        luc(Save),
+    gamepad:     luc(Gamepad2),
+    house:       luc(House),
+    radio:       luc(Radio),
+    folder:      luc(FolderOpen),
+    pencil:      luc(Pencil),
+    chart:       luc(ChartBar),
+    hourglass:   luc(Hourglass),
+    stop:        luc(Square),
+    close:       luc(X, S),
+    send:        luc(Send),
+    copy:        luc(Copy, S),
+    download:    luc(Download, S),
+    checkSimple: luc(Check, S),
+    chevronLeft: luc(ChevronLeft, S),
+    chevronRight:luc(ChevronRight, S),
+    chevronDown: luc(ChevronDown, S),
+    arrowLeft:   luc(ArrowLeft, S),
+    arrowRight:  luc(ArrowRight, S),
+} as const;
+
+export type IconName = keyof typeof ICONS;
+
+/** Get an icon SVG string by name, with optional size override. */
+export function icon(name: IconName, size?: number): string {
+    if (!size || size === M) return ICONS[name];
+    // Regenerate at requested size
+    return iconMap[name]?.(size) ?? ICONS[name];
+}
+
+// ── Size-override helpers (only for icons that support it) ──
+const iconMap: Partial<Record<IconName, (s: number) => string>> = {
+    check:      (s) => luc(CircleCheck, s),
+    error:      (s) => luc(CircleX, s),
+    warning:    (s) => luc(TriangleAlert, s),
+    skip:       (s) => luc(SkipForward, s),
+    tool:       (s) => luc(Wrench, s),
+    thinking:   (s) => luc(MessageSquare, s),
+    search:     (s) => luc(Search, s),
+    web:        (s) => luc(Globe, s),
+    exec:       (s) => luc(Zap, s),
+    compacting: (s) => luc(Package, s),
+    plan:       (s) => luc(NotebookPen, s),
+    brain:      (s) => luc(Brain, s),
+    heartPulse: (s) => luc(HeartPulse, s),
+    lock:       (s) => luc(Lock, s),
+    lockOpen:   (s) => luc(LockOpen, s),
+    key:        (s) => luc(KeyRound, s),
+    settings:   (s) => luc(Settings, s),
+    file:       (s) => luc(FileText, s),
+    trash:      (s) => luc(Trash2, s),
+    lightbulb:  (s) => luc(Lightbulb, s),
+    refresh:    (s) => luc(RefreshCw, s),
+    mic:        (s) => luc(Mic, s),
+    clipboard:  (s) => luc(ClipboardList, s),
+    robot:      (s) => luc(Bot, s),
+    palette:    (s) => luc(Palette, s),
+    link:       (s) => luc(Link, s),
+    salute:     (s) => luc(HandMetal, s),
+    paperclip:  (s) => luc(Paperclip, s),
+    save:       (s) => luc(Save, s),
+    gamepad:    (s) => luc(Gamepad2, s),
+    house:      (s) => luc(House, s),
+    radio:      (s) => luc(Radio, s),
+    folder:     (s) => luc(FolderOpen, s),
+    pencil:     (s) => luc(Pencil, s),
+    chart:      (s) => luc(ChartBar, s),
+    copy:       (s) => luc(Copy, s),
+    download:   (s) => luc(Download, s),
+};
+
+// ── Emoji → Icon name mapping (for server protocol backward compat) ──
+const EMOJI_TO_ICON: Record<string, IconName> = {
+    '✅': 'check',
+    '❌': 'error',
+    '🔧': 'tool',
+    '⏭': 'skip',
+    '🧠': 'brain',
+    '💓': 'heartPulse',
+    '🔒': 'lock',
+    '🔓': 'lockOpen',
+    '🔑': 'key',
+    '⚙': 'settings',
+    '⚙️': 'settings',
+    '📄': 'file',
+    '🗑': 'trash',
+    '🗑️': 'trash',
+    '⚠': 'warning',
+    '⚠️': 'warning',
+    '💡': 'lightbulb',
+    '🦈': 'shark',
+    '💭': 'thinking',
+    '🔍': 'search',
+    '🌐': 'web',
+    '⚡': 'exec',
+    '🗜': 'compacting',
+    '🗜️': 'compacting',
+    '📝': 'plan',
+    '📑': 'clipboard',
+    '🤖': 'robot',
+    '📋': 'clipboard',
+    '🔄': 'refresh',
+    '🎨': 'palette',
+    '🎤': 'mic',
+    '🔗': 'link',
+    '🫡': 'salute',
+    '📎': 'paperclip',
+    '💾': 'save',
+    '🎮': 'gamepad',
+    '🏠': 'house',
+    '📡': 'radio',
+    '📂': 'folder',
+    '✏️': 'pencil',
+    '📊': 'chart',
+    '🎙️': 'mic',
+};
+
+/** Convert an emoji string to its icon SVG. Falls back to the emoji if unknown. */
+export function emojiToIcon(emoji: string): string {
+    const name = EMOJI_TO_ICON[emoji];
+    return name ? ICONS[name] : emoji;
+}
+
+/** Check if a string is a known status emoji. */
+export function isCompletionEmoji(emoji: string): boolean {
+    return emoji === '✅' || emoji === '❌';
+}
+
+/** Get semantic status from an emoji. */
+export function emojiToStatus(emoji: string): 'done' | 'error' | null {
+    if (emoji === '✅') return 'done';
+    if (emoji === '❌') return 'error';
+    return null;
+}
+
+/**
+ * Hydrate all `<span data-icon="NAME">` elements in a container (default: document.body).
+ * Call once after DOMContentLoaded to replace HTML icon placeholders with SVGs.
+ */
+export function hydrateIcons(root: Element = document.body): void {
+    const els = root.querySelectorAll<HTMLElement>('[data-icon]');
+    for (const el of els) {
+        const name = el.dataset.icon as IconName;
+        if (name && ICONS[name]) {
+            el.innerHTML = ICONS[name];
+            el.classList.add('icon-hydrated');
+        }
+    }
+}

package/public/js/main.ts

@@ -26,7 +26,7 @@ import {
     saveActiveCliSettings, savePerCli, openPromptModal,
     closePromptModal, savePromptFromModal, syncMcpServers, installMcpGlobal,
     loadCliStatus, setTelegram, setForwardAll, saveTelegramSettings,
-    setDiscord, setDiscordForwardAll, setDiscordAllowBots, saveDiscordSettings, setActiveChannel,
+    setDiscord, setDiscordForwardAll, setDiscordAllowBots, setDiscordMentionOnly, saveDiscordSettings, setActiveChannel,
     saveFallbackOrder,
     openTemplateModal, saveTemplateFromModal, closeTemplateModal, templateGoBack, toggleDevMode
 } from './features/settings.js';
@@ -53,6 +53,8 @@ import { initTheme } from './features/theme.js';
 import { initGestures } from './features/gesture.js';
 import { initI18n, setLang, getLang, t } from './features/i18n.js';
 import { toggleRecording, cancelRecording } from './features/voice-recorder.js';
+import { ICONS, hydrateIcons } from './icons.js';
+import { hydrateProviderIcons } from './provider-icons.js';
 
 // ── Chat Actions ──
 document.getElementById('btnSend')?.addEventListener('click', sendMessage);
@@ -96,7 +98,7 @@ document.getElementById('langToggle')?.addEventListener('click', async () => {
     const next = getLang() === 'ko' ? 'en' : 'ko';
     await setLang(next);
     const btn = document.getElementById('langToggle');
-    if (btn) btn.textContent = `🌐 ${t('lang.' + next)}`;
+    if (btn) btn.innerHTML = `${ICONS.web} ${t('lang.' + next)}`;
     // Reconnect WS with new locale
     if (state.ws) { state.ws.close(); }
 });
@@ -185,6 +187,8 @@ document.getElementById('dcForwardOff')?.addEventListener('click', () => setDisc
 document.getElementById('dcForwardOn')?.addEventListener('click', () => setDiscordForwardAll(true));
 document.getElementById('dcAllowBotsOff')?.addEventListener('click', () => setDiscordAllowBots(false));
 document.getElementById('dcAllowBotsOn')?.addEventListener('click', () => setDiscordAllowBots(true));
+document.getElementById('dcMentionOff')?.addEventListener('click', () => setDiscordMentionOnly(false));
+document.getElementById('dcMentionOn')?.addEventListener('click', () => setDiscordMentionOnly(true));
 document.getElementById('dcToken')?.addEventListener('change', saveDiscordSettings);
 document.getElementById('dcGuildId')?.addEventListener('change', saveDiscordSettings);
 document.getElementById('dcChannelIds')?.addEventListener('change', saveDiscordSettings);
@@ -400,9 +404,11 @@ document.getElementById('basicMemoryFiles')?.addEventListener('click', (e) => {
 
 // ── Init ──
 async function bootstrap(): Promise<void> {
+    hydrateIcons();
+    hydrateProviderIcons();
     await initI18n();
     const langBtn = document.getElementById('langToggle');
-    if (langBtn) langBtn.textContent = `🌐 ${t('lang.' + getLang())}`;
+    if (langBtn) langBtn.innerHTML = `${ICONS.web} ${t('lang.' + getLang())}`;
     await loadCliRegistry();
     bindPerCliControlEvents();
     connect();

package/public/js/provider-icons.ts

@@ -0,0 +1,88 @@
+// ── Provider Icons ──
+// AI provider brand icons from lobehub/icons-static-svg.
+// SVGs are downloaded locally for offline support and bundled via Vite ?raw.
+
+import claudeSvg from '../assets/providers/claude-color.svg?raw';
+import openaiSvg from '../assets/providers/openai.svg?raw';
+import geminiSvg from '../assets/providers/gemini-color.svg?raw';
+import copilotSvg from '../assets/providers/copilot-color.svg?raw';
+
+// Mono variants for dark/light mode flexibility
+import claudeMonoSvg from '../assets/providers/claude.svg?raw';
+import geminiMonoSvg from '../assets/providers/gemini.svg?raw';
+import copilotMonoSvg from '../assets/providers/copilot.svg?raw';
+
+// Service icons (Discord, Telegram)
+import discordSvg from '../assets/providers/discord.svg?raw';
+import telegramSvg from '../assets/providers/telegram.svg?raw';
+import opencodeSvg from '../assets/providers/opencode.svg?raw';
+
+export type ProviderSlug = 'claude' | 'openai' | 'gemini' | 'copilot' | 'codex' | 'opencode' | 'discord' | 'telegram';
+
+interface ProviderIcon {
+    color: string;
+    mono: string;
+    label: string;
+}
+
+const PROVIDER_ICONS: Record<ProviderSlug, ProviderIcon> = {
+    claude:   { color: claudeSvg,  mono: claudeMonoSvg,  label: 'Claude' },
+    openai:   { color: openaiSvg,  mono: openaiSvg,      label: 'OpenAI' },
+    gemini:   { color: geminiSvg,  mono: geminiMonoSvg,   label: 'Gemini' },
+    copilot:  { color: copilotSvg, mono: copilotMonoSvg,  label: 'GitHub Copilot' },
+    codex:    { color: openaiSvg,  mono: openaiSvg,      label: 'Codex (OpenAI)' },
+    opencode: { color: opencodeSvg, mono: opencodeSvg,   label: 'OpenCode' },
+    discord:  { color: discordSvg,  mono: discordSvg,    label: 'Discord' },
+    telegram: { color: telegramSvg, mono: telegramSvg,   label: 'Telegram' },
+};
+
+/** Get a provider icon SVG string. Returns color variant by default. */
+export function providerIcon(slug: string, variant: 'color' | 'mono' = 'color'): string {
+    const normalized = slug.toLowerCase().replace(/[-_\s]/g, '');
+    // Handle aliases
+    let key: ProviderSlug;
+    if (normalized === 'claude' || normalized.startsWith('claude')) key = 'claude';
+    else if (normalized === 'gemini' || normalized.startsWith('gemini')) key = 'gemini';
+    else if (normalized.startsWith('copilot') || normalized === 'githubcopilot') key = 'copilot';
+    else if (normalized === 'codex') key = 'codex';
+    else if (normalized === 'opencode') key = 'opencode';
+    else if (normalized === 'openai' || normalized.startsWith('gpt') || normalized.startsWith('o1') || normalized.startsWith('o3') || normalized.startsWith('o4')) key = 'openai';
+    else if (normalized === 'discord') key = 'discord';
+    else if (normalized === 'telegram') key = 'telegram';
+    else return '';
+
+    const entry = PROVIDER_ICONS[key];
+    return variant === 'mono' ? entry.mono : entry.color;
+}
+
+/**
+ * Hydrate all `<span data-provider="SLUG">` elements with provider SVG icons.
+ * Call once after DOMContentLoaded.
+ */
+export function hydrateProviderIcons(root: Element = document.body): void {
+    const els = root.querySelectorAll<HTMLElement>('[data-provider]');
+    for (const el of els) {
+        const slug = el.dataset.provider || '';
+        const svg = providerIcon(slug);
+        if (svg) {
+            el.innerHTML = svg;
+            el.classList.add('cli-provider-icon');
+        }
+    }
+}
+
+/** Get a provider's display label. */
+export function providerLabel(slug: string): string {
+    const normalized = slug.toLowerCase().replace(/[-_\s]/g, '');
+    let key: ProviderSlug;
+    if (normalized === 'claude' || normalized.startsWith('claude')) key = 'claude';
+    else if (normalized === 'gemini' || normalized.startsWith('gemini')) key = 'gemini';
+    else if (normalized.startsWith('copilot') || normalized === 'githubcopilot') key = 'copilot';
+    else if (normalized === 'codex') key = 'codex';
+    else if (normalized === 'opencode') key = 'opencode';
+    else if (normalized === 'openai' || normalized.startsWith('gpt') || normalized.startsWith('o1') || normalized.startsWith('o3') || normalized.startsWith('o4')) key = 'openai';
+    else if (normalized === 'discord') key = 'discord';
+    else if (normalized === 'telegram') key = 'telegram';
+    else return slug;
+    return PROVIDER_ICONS[key].label;
+}