@decido/shell 1.0.0

package/src/components/playground/demos/kia_campaign_manifest.json

@@ -0,0 +1,112 @@
+{
+    "id": "kia-campaign-engine",
+    "header": {
+        "title": "CAMPAIGN ENGINE",
+        "subtitle": "Grecco Motors",
+        "icon": "megaphone",
+        "color": "purple"
+    },
+    "layout": "tabs",
+    "metrics": [
+        { "id": "budget", "label": "Budget", "valueKey": "metrics.totalBudget", "format": "currency", "color": "blue" },
+        { "id": "spent", "label": "Spent", "valueKey": "metrics.totalSpent", "format": "currency", "color": "yellow" },
+        { "id": "leads", "label": "Leads", "valueKey": "metrics.totalLeads", "format": "number", "color": "green" },
+        { "id": "conv", "label": "Conv", "valueKey": "metrics.totalConversions", "format": "number", "color": "purple" }
+    ],
+    "tabs": [
+        {
+            "id": "campaigns",
+            "label": "📢 Campañas",
+            "elements": [
+                {
+                    "id": "c1",
+                    "type": "progress-bar",
+                    "title": "EV6 Launch",
+                    "subtitleKey": "campaigns.ev6.channel",
+                    "dataKey": "campaigns.ev6.spent",
+                    "color": "fuchsia",
+                    "props": { "max": 15000000 }
+                },
+                {
+                    "id": "c2",
+                    "type": "progress-bar",
+                    "title": "Sportage HEV Q1",
+                    "subtitleKey": "campaigns.sportage.channel",
+                    "dataKey": "campaigns.sportage.spent",
+                    "color": "blue",
+                    "props": { "max": 12000000 }
+                },
+                {
+                    "id": "c3",
+                    "type": "progress-bar",
+                    "title": "Test Drive Weekend",
+                    "subtitleKey": "campaigns.testdrive.channel",
+                    "dataKey": "campaigns.testdrive.spent",
+                    "color": "green",
+                    "props": { "max": 5000000 }
+                }
+            ]
+        },
+        {
+            "id": "abtesting",
+            "label": "🧪 A/B Tests",
+            "elements": [
+                {
+                    "id": "ab1",
+                    "type": "ab-test-row",
+                    "title": "CTA Color Test",
+                    "dataKey": "ab.cta.winner",
+                    "props": { "variant": "Rojo KIA", "lift": 12.3 }
+                },
+                {
+                    "id": "ab2",
+                    "type": "ab-test-row",
+                    "title": "CTA Color Test",
+                    "dataKey": "ab.cta.winner",
+                    "props": { "variant": "Azul Premium", "lift": 8.7 }
+                },
+                {
+                    "id": "ab3",
+                    "type": "ab-test-row",
+                    "title": "Landing Page Test",
+                    "dataKey": "ab.landing.winner",
+                    "props": { "variant": "Video Hero", "lift": 18.5 }
+                },
+                {
+                    "id": "ab4",
+                    "type": "ab-test-row",
+                    "title": "Landing Page Test",
+                    "dataKey": "ab.landing.winner",
+                    "props": { "variant": "Imagen Estática", "lift": 11.2 }
+                }
+            ]
+        },
+        {
+            "id": "roi",
+            "label": "💰 ROI Canal",
+            "elements": [
+                {
+                    "id": "roi1",
+                    "type": "stat-row",
+                    "title": "WhatsApp Bot",
+                    "dataKey": "roi.whatsapp.percentage",
+                    "color": "#22c55e"
+                },
+                {
+                    "id": "roi2",
+                    "type": "stat-row",
+                    "title": "Instagram",
+                    "dataKey": "roi.instagram.percentage",
+                    "color": "#e040fb"
+                },
+                {
+                    "id": "roi3",
+                    "type": "stat-row",
+                    "title": "Meta Ads",
+                    "dataKey": "roi.meta.percentage",
+                    "color": "#3b82f6"
+                }
+            ]
+        }
+    ]
+}

package/src/components/playground/input-parts/AIModelSelector.tsx

@@ -0,0 +1,156 @@
+/**
+ * AIModelSelector — Multi-provider model dropdown
+ *
+ * Shows providers grouped (Local → Cloud), with status dots
+ * and model tags. Uses the Decido Aura token system.
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import { ChevronDown, Cpu } from 'lucide-react';
+import type { AIProviderGroup, AIModel } from '../../../hooks/useAIModelSelector';
+
+interface AIModelSelectorProps {
+  selectedModelId: string;
+  selectedModel: AIModel;
+  providerGroups: AIProviderGroup[];
+  onSelect: (modelId: string) => void;
+}
+
+const TAG_STYLES: Record<string, string> = {
+  fast: 'bg-cyan-500/20 text-cyan-400',
+  smart: 'bg-purple-500/20 text-purple-400',
+  stable: 'bg-emerald-500/20 text-emerald-400',
+  new: 'bg-emerald-500/20 text-emerald-400',
+  code: 'bg-amber-500/20 text-amber-400',
+  local: 'bg-emerald-500/15 text-emerald-400',
+  balanced: 'bg-purple-500/15 text-purple-400',
+  vision: 'bg-pink-500/20 text-pink-400',
+  audio: 'bg-amber-500/20 text-amber-400',
+  lite: 'bg-surface-glass text-text-secondary',
+};
+
+const STATUS_DOT: Record<string, string> = {
+  online: 'bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.5)]',
+  offline: 'bg-red-400/60',
+  unknown: 'bg-surface-tertiary',
+};
+
+export const AIModelSelector = React.memo(function AIModelSelector({
+  selectedModelId, selectedModel, providerGroups, onSelect,
+}: AIModelSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [isOpen]);
+
+  const localGroups = providerGroups.filter(g => g.isLocal);
+  const cloudGroups = providerGroups.filter(g => !g.isLocal);
+
+  return (
+    <div ref={containerRef} className="relative">
+      {/* Trigger */}
+      <button
+        type="button"
+        onClick={(e) => { e.stopPropagation(); setIsOpen(!isOpen); }}
+        className="flex items-center gap-1.5 px-2 py-1.5 rounded-xl text-text-muted
+                   hover:text-text-primary hover:bg-surface-glass transition-all text-[10px] font-mono"
+        title={`Modelo AI: ${selectedModel.label}`}
+      >
+        <Cpu size={14} />
+        <ChevronDown size={10} />
+      </button>
+
+      {/* Dropdown */}
+      {isOpen && (
+        <div
+          className="absolute left-0 w-64 bg-white/90 dark:bg-surface-tertiary border border-black/[0.06] dark:border-border-default
+                     rounded-xl shadow-xl dark:shadow-2xl z-50 max-h-[360px] overflow-y-auto custom-scrollbar"
+          style={{ bottom: '100%', marginBottom: '0.5rem' }}
+        >
+          {/* Local providers */}
+          {localGroups.length > 0 && (
+            <>
+              <div className="px-3 py-1.5 text-[9px] text-text-muted font-mono uppercase tracking-wider
+                              border-b border-border-subtle flex items-center gap-1.5">
+                <span className="text-emerald-400">●</span> Local
+              </div>
+              {localGroups.map(group => (
+                <ProviderSection
+                  key={group.provider}
+                  group={group}
+                  selectedModelId={selectedModelId}
+                  onSelect={(id) => { onSelect(id); setIsOpen(false); }}
+                />
+              ))}
+            </>
+          )}
+
+          {/* Cloud providers */}
+          {cloudGroups.length > 0 && (
+            <>
+              <div className="px-3 py-1.5 text-[9px] text-text-muted font-mono uppercase tracking-wider
+                              border-b border-border-subtle flex items-center gap-1.5">
+                <span className="text-cyan-400">☁</span> Cloud (BYOK)
+              </div>
+              {cloudGroups.map(group => (
+                <ProviderSection
+                  key={group.provider}
+                  group={group}
+                  selectedModelId={selectedModelId}
+                  onSelect={(id) => { onSelect(id); setIsOpen(false); }}
+                />
+              ))}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+function ProviderSection({
+  group, selectedModelId, onSelect,
+}: { group: AIProviderGroup; selectedModelId: string; onSelect: (id: string) => void }) {
+  return (
+    <div>
+      {/* Provider header */}
+      <div className="flex items-center gap-2 px-3 py-1.5 text-[10px] font-semibold text-text-secondary">
+        <span>{group.icon}</span>
+        <span>{group.label}</span>
+        <span className={`w-1.5 h-1.5 rounded-full ml-auto ${STATUS_DOT[group.status]}`} />
+      </div>
+
+      {/* Models */}
+      {group.models.map(m => (
+        <button
+          key={m.id}
+          type="button"
+          onClick={(e) => { e.stopPropagation(); onSelect(m.id); }}
+          className={`w-full text-left px-3 py-2 text-xs flex items-center justify-between transition-colors
+            ${selectedModelId === m.id
+              ? 'text-text-primary'
+              : 'text-text-secondary hover:bg-surface-glass hover:text-text-primary'
+            }`}
+          style={selectedModelId === m.id ? { background: `${group.color}20` } : undefined}
+        >
+          <span className="font-mono truncate">{m.label}</span>
+          {m.tag && (
+            <span className={`text-[9px] px-1.5 py-0.5 rounded-full font-semibold shrink-0 ${TAG_STYLES[m.tag] || 'bg-surface-glass text-text-muted'}`}>
+              {m.tag}
+            </span>
+          )}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/playground/input-parts/InputActions.tsx

@@ -0,0 +1,80 @@
+/**
+ * InputActions — Right-side action buttons for the floating input
+ *
+ * Send, STT microphone, Voice Live activation, and Stop (when generating).
+ */
+
+import React from 'react';
+import { Send, Mic, Square, Sparkles } from 'lucide-react';
+
+interface InputActionsProps {
+  inputHasText: boolean;
+  isGenerating?: boolean;
+  isTranscribing: boolean;
+  onToggleTranscribing: () => void;
+  onSend: () => void;
+  setIsVoiceActive?: (active: boolean) => void;
+}
+
+export const InputActions = React.memo(function InputActions({
+  inputHasText, isGenerating, isTranscribing,
+  onToggleTranscribing, onSend, setIsVoiceActive,
+}: InputActionsProps) {
+  if (isGenerating) {
+    return (
+      <div className="flex items-center gap-2 min-w-[100px] justify-end">
+        <button
+          type="button"
+          onClick={(e) => e.stopPropagation()}
+          className="w-12 h-12 rounded-full text-text-primary bg-red-500/80 hover:bg-red-500 flex items-center justify-center
+                     transition-colors shadow-[0_0_15px_rgba(239,68,68,0.3)]"
+          title="Detener generación"
+        >
+          <Square size={18} />
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-2 min-w-[100px] justify-end">
+      {/* STT microphone */}
+      <button
+        type="button"
+        onClick={(e) => { e.stopPropagation(); onToggleTranscribing(); }}
+        className={`w-10 h-10 rounded-full flex items-center justify-center transition-all
+          ${isTranscribing
+            ? 'text-red-400 bg-red-400/10 animate-pulse'
+            : 'text-text-secondary hover:text-text-primary hover:bg-surface-glass'}`}
+        title="Reconocimiento de voz (STT)"
+      >
+        <Mic size={20} />
+      </button>
+
+      {/* Send or Voice Live */}
+      {inputHasText ? (
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); onSend(); }}
+          className="w-12 h-12 rounded-full text-text-inverse bg-cyan-400 hover:bg-cyan-300 flex items-center justify-center
+                     transition-colors shadow-[0_0_15px_rgba(34,211,238,0.3)]"
+          title="Enviar"
+        >
+          <Send size={20} className="ml-1" />
+        </button>
+      ) : setIsVoiceActive ? (
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); setIsVoiceActive(true); }}
+          className="w-12 h-12 rounded-full text-cyan-400 bg-cyan-500/10 hover:bg-cyan-500/20 flex items-center justify-center
+                     border border-cyan-500/20 transition-all shadow-[0_0_15px_rgba(6,182,212,0.15)]
+                     hover:shadow-[0_0_20px_rgba(6,182,212,0.3)] group relative overflow-hidden"
+          title="Hablar con la IA (Live)"
+        >
+          <Sparkles size={22} className="relative z-10 transition-transform group-hover:scale-110" />
+          <div className="absolute inset-0 bg-linear-to-r from-cyan-400 to-purple-500 rounded-full opacity-0 group-hover:opacity-20 transition-opacity" />
+        </button>
+      ) : null}
+    </div>
+  );
+});

package/src/components/playground/input-parts/InputToolbar.tsx

@@ -0,0 +1,245 @@
+/**
+ * InputToolbar — Central toolbar for the floating input
+ *
+ * Contains: AI Model selector, Shell selector, and a consolidated Options Menu 
+ * for Advanced Agent Settings (Intents, Canvas, Brand).
+ */
+
+import React, { useState, useMemo, useRef, useEffect } from 'react';
+import { MonitorPlay, Code2, ChevronDown, Zap, Brain, Box, Settings2 } from 'lucide-react';
+import { getRegisteredShellTypes, getShellMeta } from '../../../store/useShellRegistry';
+import { AIModelSelector } from './AIModelSelector';
+import type { AIProviderGroup, AIModel } from '../../../hooks/useAIModelSelector';
+
+interface InputToolbarProps {
+  // Model selector
+  selectedModelId: string;
+  selectedModel: AIModel;
+  providerGroups: AIProviderGroup[];
+  onModelSelect: (id: string) => void;
+  // Shell selector
+  selectedShell: string | null;
+  onShellSelect: (shell: string | null) => void;
+  // Canvas
+  showCanvas?: boolean;
+  setShowCanvas?: (show: boolean) => void;
+  // Brand
+  prototypeBrand?: string;
+  setPrototypeBrand?: (brand: string) => void;
+  // Intent
+  intentEnabled: boolean;
+  onIntentToggle: () => void;
+  showIntentPanel: boolean;
+  onIntentPanelToggle: () => void;
+}
+
+export const InputToolbar = React.memo(function InputToolbar({
+  selectedModelId, selectedModel, providerGroups, onModelSelect,
+  selectedShell, onShellSelect,
+  showCanvas, setShowCanvas,
+  prototypeBrand = 'decido', setPrototypeBrand,
+  intentEnabled, onIntentToggle, showIntentPanel, onIntentPanelToggle,
+}: InputToolbarProps) {
+  const [showOptionsMenu, setShowOptionsMenu] = useState(false);
+  const [showShellMenu, setShowShellMenu] = useState(false);
+  const optionsRef = useRef<HTMLDivElement>(null);
+  const shellRef = useRef<HTMLDivElement>(null);
+
+  const shellTypes = useMemo(() => {
+    try { return getRegisteredShellTypes(); } catch { return []; }
+  }, []);
+
+  const cycleBrand = () => {
+    if (!setPrototypeBrand) return;
+    const brands = ['startup_demo', 'enterprise_demo', 'industrial_demo'];
+    setPrototypeBrand(brands[(brands.indexOf(prototypeBrand) + 1) % brands.length]);
+  };
+
+  // Close menus on outside click
+  useEffect(() => {
+    if (!showOptionsMenu) return;
+    const handler = (e: MouseEvent) => {
+      if (optionsRef.current && !optionsRef.current.contains(e.target as Node)) {
+        setShowOptionsMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [showOptionsMenu]);
+
+  useEffect(() => {
+    if (!showShellMenu) return;
+    const handler = (e: MouseEvent) => {
+      if (shellRef.current && !shellRef.current.contains(e.target as Node)) {
+        setShowShellMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [showShellMenu]);
+
+  const shellMeta = selectedShell ? getShellMeta(selectedShell) : null;
+  const hasActiveTool = showCanvas || intentEnabled || showIntentPanel;
+
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-0.5 sm:gap-1 xl:gap-2 relative flex-1 min-w-0">
+      
+      {/* AI Model Selector */}
+      <AIModelSelector
+        selectedModelId={selectedModelId}
+        selectedModel={selectedModel}
+        providerGroups={providerGroups}
+        onSelect={onModelSelect}
+      />
+
+      <div className="w-px h-4 bg-surface-glass/80 mx-1" />
+
+      {/* Shell Selector */}
+      <div ref={shellRef} className="relative">
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); setShowShellMenu(!showShellMenu); setShowOptionsMenu(false); }}
+          className={`flex items-center gap-1 px-2 py-1.5 rounded-xl hover:bg-surface-glass transition-all text-[10px] font-mono
+            ${selectedShell ? '' : 'text-text-muted hover:text-cyan-400'}`}
+          style={selectedShell && shellMeta ? { color: shellMeta.color } : undefined}
+          title={`Destino de salida: ${shellMeta?.label || selectedShell || 'Ninguna (chat)'}`}
+        >
+          <span className="text-sm">{shellMeta?.icon || '💬'}</span>
+          <ChevronDown size={10} />
+        </button>
+
+        {showShellMenu && (
+          <div
+            className="absolute left-1/2 -translate-x-1/2 sm:left-auto sm:translate-x-0 w-[220px] bg-white/95 dark:bg-surface-tertiary border border-black/[0.06] dark:border-border-default
+                       rounded-2xl shadow-xl dark:shadow-2xl z-[100] max-h-[300px] overflow-y-auto custom-scrollbar flex flex-col backdrop-blur-xl"
+            style={{ bottom: '100%', marginBottom: '0.6rem' }}
+          >
+            <div className="px-3 py-2 text-[10px] text-text-muted font-mono uppercase tracking-wider bg-surface-base/50">
+              Destino de Salida
+            </div>
+            <div className="p-1 pb-2">
+              <button
+                type="button"
+                onClick={(e) => { e.stopPropagation(); onShellSelect(null); setShowShellMenu(false); }}
+                className={`w-full text-left px-3 py-2.5 rounded-xl text-xs transition-colors font-mono flex items-center gap-2.5
+                  ${!selectedShell ? 'bg-cyan-500/10 text-cyan-400 font-semibold' : 'text-text-secondary hover:bg-surface-glass hover:text-text-primary'}`}
+              >
+                <span className="text-base leading-none w-4 text-center">💬</span>
+                <span>Ninguna (Chat)</span>
+              </button>
+              <div className="h-px bg-border-subtle my-1 mx-1" />
+              {shellTypes.map(st => {
+                const meta = getShellMeta(st);
+                return (
+                  <button
+                    key={st}
+                    type="button"
+                    onClick={(e) => { e.stopPropagation(); onShellSelect(st); setShowShellMenu(false); }}
+                    className={`w-full text-left px-3 py-2.5 mt-0.5 rounded-xl text-xs transition-colors font-mono flex items-center gap-2.5
+                      ${selectedShell === st ? 'text-text-primary font-semibold' : 'text-text-secondary hover:bg-surface-glass hover:text-text-primary'}`}
+                    style={selectedShell === st ? { background: `${meta.color}20` } : undefined}
+                  >
+                    <span className="text-base leading-none w-4 text-center">{meta.icon}</span>
+                    <span className="flex-1 truncate">{meta.label}</span>
+                    <span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ background: meta.color }} />
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="w-px h-4 bg-surface-glass/80 mx-1" />
+
+      {/* Unified Options Menu */}
+      <div ref={optionsRef} className="relative">
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); setShowOptionsMenu(!showOptionsMenu); setShowShellMenu(false); }}
+          className={`w-8 h-8 rounded-xl flex items-center justify-center transition-all relative
+            ${showOptionsMenu || hasActiveTool ? 'text-text-primary bg-surface-glass' : 'text-text-secondary hover:text-text-primary hover:bg-surface-glass'}`}
+          title="Opciones del Agente"
+        >
+          <Settings2 size={16} />
+          {hasActiveTool && (
+            <div className="absolute top-1.5 right-1.5 w-1.5 h-1.5 rounded-full bg-cyan-400" />
+          )}
+        </button>
+
+        {showOptionsMenu && (
+          <div
+            className="absolute left-1/2 -translate-x-1/2 sm:left-auto sm:translate-x-0 sm:-right-2 w-[240px] sm:w-[260px] bg-white/95 dark:bg-surface-tertiary border border-black/[0.06] dark:border-border-default
+                       rounded-2xl shadow-xl dark:shadow-2xl z-[100] max-h-[380px] overflow-y-auto custom-scrollbar flex flex-col backdrop-blur-xl"
+            style={{ bottom: '100%', marginBottom: '0.6rem' }}
+          >
+            {/* Section: Agente y Contexto */}
+            <div className="px-3 py-2 text-[10px] text-text-muted font-mono uppercase tracking-wider bg-surface-base/50">
+              Agente y Contexto
+            </div>
+            <div className="p-1">
+              <button
+                type="button"
+                onClick={(e) => { e.stopPropagation(); onIntentToggle(); }}
+                className={`w-full text-left px-3 py-2.5 rounded-xl text-xs transition-colors font-mono flex items-center justify-between group
+                  ${intentEnabled ? 'text-emerald-500 bg-emerald-500/10' : 'text-text-secondary hover:bg-surface-glass hover:text-text-primary'}`}
+              >
+                <div className="flex items-center gap-2.5">
+                  <Brain size={15} />
+                  <span>Interpretar intenciones</span>
+                </div>
+                <div className={`w-7 h-4 rounded-full flex items-center p-0.5 transition-colors border ${intentEnabled ? 'bg-emerald-500 border-emerald-500/0' : 'bg-surface-glass border-border-default group-hover:bg-border-subtle'}`}>
+                  <div className={`w-3 h-3 rounded-full bg-white transition-transform ${intentEnabled ? 'translate-x-[12px]' : 'translate-x-0'}`} />
+                </div>
+              </button>
+              <button
+                type="button"
+                onClick={(e) => { e.stopPropagation(); onIntentPanelToggle(); setShowOptionsMenu(false); }}
+                className="w-full text-left px-3 py-2.5 mt-0.5 rounded-xl text-xs text-text-secondary hover:bg-surface-glass hover:text-cyan-500 transition-colors font-mono flex items-center gap-2.5"
+              >
+                <Zap size={15} />
+                <span>Explorar catálogo</span>
+              </button>
+            </div>
+
+            <div className="h-px bg-border-subtle" />
+
+            {/* Section: Entorno */}
+            <div className="px-3 py-2 text-[10px] text-text-muted font-mono uppercase tracking-wider bg-surface-base/50">
+              Entorno Visual
+            </div>
+            <div className="p-1 pb-2">
+              {setShowCanvas && (
+                <button
+                  type="button"
+                  onClick={(e) => { e.stopPropagation(); setShowCanvas(!showCanvas); setShowOptionsMenu(false); }}
+                  className={`w-full text-left px-3 py-2.5 rounded-xl text-xs transition-colors font-mono flex items-center justify-between
+                    ${showCanvas ? 'text-primary bg-primary/10' : 'text-text-secondary hover:bg-surface-glass hover:text-text-primary'}`}
+                >
+                  <div className="flex items-center gap-2.5">
+                    <MonitorPlay size={15} />
+                    <span>Lienzo (Canvas)</span>
+                  </div>
+                  {showCanvas && <div className="w-2 h-2 rounded-full bg-primary" />}
+                </button>
+              )}
+              {setPrototypeBrand && (
+                <button
+                  type="button"
+                  onClick={(e) => { e.stopPropagation(); cycleBrand(); }}
+                  className="w-full mt-0.5 text-left px-3 py-2.5 rounded-xl text-xs text-amber-500 hover:bg-surface-glass transition-colors font-mono flex items-center justify-between"
+                >
+                  <div className="flex items-center gap-2.5">
+                    <Code2 size={15} />
+                    <span>UI: {prototypeBrand}</span>
+                  </div>
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+    </div>
+  );
+});