@decido/shell 1.0.0 → 4.0.1

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

@@ -1,112 +0,0 @@
-{
-    "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

@@ -1,156 +0,0 @@
-/**
- * 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

@@ -1,80 +0,0 @@
-/**
- * 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

@@ -1,245 +0,0 @@
-/**
- * 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>
-  );
-});