@decido/shell 1.0.0

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

@@ -0,0 +1,287 @@
+/**
+ * ResourceLibraryPanel — Quick-access library for generated pages and templates.
+ *
+ * Two tabs:
+ *   📁 Mis Creaciones — pages generated via chat (from MorphInstanceStore)
+ *   🎨 Templates     — starter templates for quick use
+ *
+ * Features: category/tag filters, thumbnail preview, one-click load.
+ */
+
+import React, { useState, useMemo, useCallback } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { FolderOpen, Palette, Search, Tag, Clock, Trash2, ExternalLink, X } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+import { useMorphInstanceStore, type MorphInstance } from '../../../store/useMorphInstanceStore';
+import { useLayoutStore } from '../../../store/useLayoutStore';
+
+// ─── Template data (lightweight copies from TemplateLibrary) ──
+
+interface Template {
+  id: string; title: string; category: string; emoji: string;
+  color: string; description: string; html: string;
+}
+
+const TEMPLATES: Template[] = [
+  { id: 'landing-saas', title: 'Landing SaaS', category: 'Marketing', emoji: '🚀', color: '#7c3aed', description: 'Hero, CTA, features' ,
+    html: '<section class="min-h-screen bg-linear-to-br from-violet-950 via-indigo-950 to-black text-white flex items-center justify-center"><h1 class="text-5xl font-bold">Landing SaaS</h1></section>' },
+  { id: 'dashboard', title: 'Dashboard', category: 'App', emoji: '📊', color: '#06b6d4', description: 'Métricas, sidebar, cards',
+    html: '<div class="min-h-screen bg-gray-950 text-white flex items-center justify-center"><h1 class="text-5xl font-bold">Dashboard</h1></div>' },
+  { id: 'portfolio', title: 'Portfolio', category: 'Personal', emoji: '🎨', color: '#ec4899', description: 'Bio, proyectos, contacto',
+    html: '<div class="min-h-screen bg-gray-950 text-white flex items-center justify-center"><h1 class="text-5xl font-bold">Portfolio</h1></div>' },
+  { id: 'pricing', title: 'Pricing', category: 'Marketing', emoji: '💳', color: '#10b981', description: '3 planes, toggle anual',
+    html: '<section class="min-h-screen bg-gray-950 text-white flex items-center justify-center"><h1 class="text-5xl font-bold">Pricing</h1></section>' },
+  { id: 'login', title: 'Login', category: 'Auth', emoji: '🔐', color: '#f59e0b', description: 'Form, social, glassmorphism',
+    html: '<div class="min-h-screen bg-gray-950 text-white flex items-center justify-center"><h1 class="text-5xl font-bold">Login</h1></div>' },
+  { id: 'blog', title: 'Blog', category: 'Content', emoji: '📝', color: '#3b82f6', description: 'Lista de artículos',
+    html: '<div class="min-h-screen bg-gray-950 text-white flex items-center justify-center"><h1 class="text-5xl font-bold">Blog</h1></div>' },
+];
+
+const ALL_CATEGORIES = ['All', 'Marketing', 'App', 'Personal', 'Auth', 'Content', 'Generated'];
+
+// ─── Component ──────────────────────────────────────────────
+
+interface ResourceLibraryPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onLoadTemplate: (html: string) => void;
+  onOpenInstance: (instanceId: string) => void;
+}
+
+export const ResourceLibraryPanel = React.memo(function ResourceLibraryPanel({
+  isOpen, onClose, onLoadTemplate, onOpenInstance,
+}: ResourceLibraryPanelProps) {
+  const [tab, setTab] = useState<'creations' | 'templates'>('creations');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('All');
+
+  // Get generated pages from MorphInstance store (useShallow prevents infinite re-renders)
+  const instances = useMorphInstanceStore(
+    useShallow(s => Array.from(s.instances.values()))
+  );
+
+  const setActiveInstance = useMorphInstanceStore(s => s.setActiveInstance);
+  const removeInstance = useMorphInstanceStore(s => s.removeInstance);
+
+  // Filter instances that have HTML data
+  const htmlInstances = useMemo(() =>
+    instances
+      .filter(inst => inst.data?.html || inst.shellType === 'iframe')
+      .sort((a, b) => b.createdAt - a.createdAt),
+    [instances]
+  );
+
+  // Filter templates by search/category
+  const filteredTemplates = useMemo(() => {
+    return TEMPLATES.filter(t => {
+      const matchSearch = !searchQuery ||
+        t.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        t.description.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchCat = selectedCategory === 'All' || t.category === selectedCategory;
+      return matchSearch && matchCat;
+    });
+  }, [searchQuery, selectedCategory]);
+
+  // Filter creations by search
+  const filteredCreations = useMemo(() => {
+    if (!searchQuery) return htmlInstances;
+    const q = searchQuery.toLowerCase();
+    return htmlInstances.filter(inst =>
+      inst.label.toLowerCase().includes(q) ||
+      inst.shellType.toLowerCase().includes(q)
+    );
+  }, [htmlInstances, searchQuery]);
+
+  const handleLoadInstance = useCallback((inst: MorphInstance) => {
+    setActiveInstance(inst.id);
+    useLayoutStore.getState().setActiveTab(`morph-${inst.id}`);
+    onOpenInstance(inst.id);
+    onClose();
+  }, [setActiveInstance, onOpenInstance, onClose]);
+
+  const handleLoadTemplate = useCallback((t: Template) => {
+    onLoadTemplate(t.html);
+    onClose();
+  }, [onLoadTemplate, onClose]);
+
+  const timeAgo = (ts: number) => {
+    const diff = Date.now() - ts;
+    const mins = Math.floor(diff / 60000);
+    if (mins < 1) return 'ahora';
+    if (mins < 60) return `${mins}m`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h`;
+    return `${Math.floor(hrs / 24)}d`;
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 8 }}
+          className="absolute bottom-full left-0 right-0 z-50 mb-2"
+        >
+          <div className="bg-white/95 dark:bg-[#1a1a2e] border border-black/[0.08] dark:border-border-default
+                          rounded-2xl shadow-xl dark:shadow-2xl overflow-hidden max-h-[420px] flex flex-col backdrop-blur-xl">
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-3 border-b border-black/[0.06] dark:border-border-subtle shrink-0">
+              <div className="flex items-center gap-3">
+                <h3 className="text-sm font-bold text-text-primary">Librería</h3>
+                <div className="flex bg-black/[0.04] dark:bg-surface-glass rounded-lg p-0.5">
+                  <button
+                    onClick={() => setTab('creations')}
+                    className={`px-3 py-1.5 text-[11px] font-semibold rounded-md transition-all flex items-center gap-1.5
+                      ${tab === 'creations' ? 'bg-white dark:bg-surface-tertiary text-text-primary shadow-sm' : 'text-text-muted hover:text-text-secondary'}`}
+                  >
+                    <FolderOpen size={12} /> Mis Creaciones
+                    {htmlInstances.length > 0 && (
+                      <span className="text-[9px] bg-cyan-500/20 text-cyan-600 dark:text-cyan-400 px-1.5 py-0.5 rounded-full font-bold">
+                        {htmlInstances.length}
+                      </span>
+                    )}
+                  </button>
+                  <button
+                    onClick={() => setTab('templates')}
+                    className={`px-3 py-1.5 text-[11px] font-semibold rounded-md transition-all flex items-center gap-1.5
+                      ${tab === 'templates' ? 'bg-white dark:bg-surface-tertiary text-text-primary shadow-sm' : 'text-text-muted hover:text-text-secondary'}`}
+                  >
+                    <Palette size={12} /> Templates
+                  </button>
+                </div>
+              </div>
+              <button onClick={onClose} className="w-7 h-7 rounded-lg text-text-muted hover:text-text-primary hover:bg-black/[0.04] dark:hover:bg-surface-glass flex items-center justify-center transition-colors">
+                <X size={14} />
+              </button>
+            </div>
+
+            {/* Search + Category filter */}
+            <div className="px-4 py-2 border-b border-black/[0.04] dark:border-border-subtle shrink-0 flex items-center gap-2">
+              <div className="flex-1 relative">
+                <Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted" />
+                <input
+                  type="text"
+                  placeholder="Buscar..."
+                  value={searchQuery}
+                  onChange={e => setSearchQuery(e.target.value)}
+                  className="w-full pl-8 pr-3 py-1.5 bg-black/[0.03] dark:bg-surface-glass border border-transparent focus:border-cyan-500/30
+                             rounded-lg text-xs text-text-primary placeholder-text-muted outline-hidden transition"
+                />
+              </div>
+              {tab === 'templates' && (
+                <div className="flex gap-1 overflow-x-auto no-scrollbar">
+                  {ALL_CATEGORIES.filter(c => c !== 'Generated').map(cat => (
+                    <button
+                      key={cat}
+                      onClick={() => setSelectedCategory(cat)}
+                      className={`px-2 py-1 text-[10px] font-semibold rounded-md whitespace-nowrap transition-all
+                        ${selectedCategory === cat
+                          ? 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400'
+                          : 'text-text-muted hover:text-text-secondary hover:bg-black/[0.04] dark:hover:bg-surface-glass'}`}
+                    >
+                      {cat}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 overflow-y-auto px-3 py-3 custom-scrollbar">
+              <AnimatePresence mode="wait">
+                {tab === 'creations' ? (
+                  <motion.div key="creations" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
+                    {filteredCreations.length === 0 ? (
+                      <div className="flex flex-col items-center justify-center py-12 text-center">
+                        <FolderOpen size={32} className="text-text-muted/30 mb-3" />
+                        <p className="text-sm text-text-muted">Sin creaciones aún</p>
+                        <p className="text-[10px] text-text-muted/60 mt-1">Genera una página desde el chat para verla aquí</p>
+                      </div>
+                    ) : (
+                      <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
+                        {filteredCreations.map((inst, i) => (
+                          <motion.button
+                            key={inst.id}
+                            initial={{ opacity: 0, y: 6 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: i * 0.03 }}
+                            onClick={() => handleLoadInstance(inst)}
+                            className="group relative bg-black/[0.02] dark:bg-surface-glass border border-black/[0.06] dark:border-border-subtle
+                                       hover:border-cyan-500/30 rounded-xl p-3 text-left transition-all hover:shadow-md overflow-hidden"
+                          >
+                            {/* Mini thumbnail (HTML preview placeholder) */}
+                            <div className="h-16 rounded-lg bg-gradient-to-br from-cyan-500/10 to-purple-500/10 dark:from-cyan-500/5 dark:to-purple-500/5
+                                           mb-2 flex items-center justify-center overflow-hidden border border-black/[0.04] dark:border-border-subtle">
+                              <span className="text-lg opacity-50">🌐</span>
+                            </div>
+
+                            {/* Info */}
+                            <h4 className="text-[11px] font-semibold text-text-primary truncate">{inst.label}</h4>
+                            <div className="flex items-center gap-1.5 mt-1">
+                              <span className="flex items-center gap-1 text-[9px] text-text-muted">
+                                <Clock size={9} /> {timeAgo(inst.createdAt)}
+                              </span>
+                              <span className="flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 font-semibold">
+                                <Tag size={8} /> {inst.shellType}
+                              </span>
+                            </div>
+
+                            {/* Hover actions */}
+                            <div className="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
+                              <button
+                                onClick={e => { e.stopPropagation(); removeInstance(inst.id); }}
+                                className="w-5 h-5 rounded bg-red-500/10 hover:bg-red-500/20 text-red-400 flex items-center justify-center"
+                                title="Eliminar"
+                              >
+                                <Trash2 size={10} />
+                              </button>
+                            </div>
+                          </motion.button>
+                        ))}
+                      </div>
+                    )}
+                  </motion.div>
+                ) : (
+                  <motion.div key="templates" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
+                    <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
+                      {filteredTemplates.map((t, i) => (
+                        <motion.button
+                          key={t.id}
+                          initial={{ opacity: 0, y: 6 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          transition={{ delay: i * 0.03 }}
+                          onClick={() => handleLoadTemplate(t)}
+                          className="group bg-black/[0.02] dark:bg-surface-glass border border-black/[0.06] dark:border-border-subtle
+                                     hover:border-opacity-50 rounded-xl p-3 text-left transition-all hover:shadow-md overflow-hidden"
+                          style={{ '--hover-color': t.color } as React.CSSProperties}
+                        >
+                          {/* Color preview */}
+                          <div
+                            className="h-14 rounded-lg mb-2 flex items-center justify-center transition-all group-hover:scale-[1.02]"
+                            style={{ background: `linear-gradient(135deg, ${t.color}20, ${t.color}08)` }}
+                          >
+                            <span className="text-2xl">{t.emoji}</span>
+                          </div>
+
+                          <h4 className="text-[11px] font-semibold text-text-primary">{t.title}</h4>
+                          <p className="text-[9px] text-text-muted mt-0.5">{t.description}</p>
+                          <span
+                            className="inline-block mt-1.5 text-[9px] font-semibold px-1.5 py-0.5 rounded"
+                            style={{ background: `${t.color}15`, color: t.color }}
+                          >
+                            {t.category}
+                          </span>
+                        </motion.button>
+                      ))}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+});

package/src/components/playground/sidebarDsdIO.ts

@@ -0,0 +1,82 @@
+import { usePlaygroundStore } from '../../store/usePlaygroundStore';
+
+/**
+ * Exports a sequence in DSD (Decido Standard Document) format.
+ */
+export function downloadSequenceAsDSD(seq: any) {
+    const dsdFormat = {
+        id: seq.id,
+        meta: {
+            version: "1.0",
+            author: "Decido OS Playground",
+            createdAt: Date.now(),
+            updatedAt: Date.now(),
+            title: seq.prompt,
+            description: "Exported Decido Session",
+            tags: ["playground", seq.brand]
+        },
+        config: {
+            defaultVoice: "zephyr",
+            brandTheme: seq.brand,
+            environment: "dark"
+        },
+        actors: [
+            { id: "zephyr", name: "Zephyr", role: "AI Assistant" }
+        ],
+        timeline: seq.keyframes
+    };
+
+    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(dsdFormat, null, 2));
+    const downloadAnchorNode = document.createElement('a');
+    downloadAnchorNode.setAttribute("href", dataStr);
+    downloadAnchorNode.setAttribute("download", `decido-dsd-${seq.id}.json`);
+    document.body.appendChild(downloadAnchorNode);
+    downloadAnchorNode.click();
+    downloadAnchorNode.remove();
+}
+
+/**
+ * Handles file upload — supports DSD format and legacy format.
+ */
+export function handleSequenceUpload(e: React.ChangeEvent<HTMLInputElement>, prototypeBrand: string) {
+    const fileReader = new FileReader();
+    if (e.target.files && e.target.files[0]) {
+        fileReader.readAsText(e.target.files[0], "UTF-8");
+        fileReader.onload = (event) => {
+            if (event.target && event.target.result) {
+                try {
+                    const parsed = JSON.parse(event.target.result as string);
+                    let sequenceToSave = null;
+
+                    // DSD Format
+                    if (parsed.meta && parsed.timeline) {
+                        const brand = parsed.config?.brandTheme || prototypeBrand;
+                        const duration = parsed.timeline.length > 0
+                            ? Math.max(...parsed.timeline.map((k: any) => k.t)) + 2
+                            : 10;
+                        sequenceToSave = {
+                            id: Date.now().toString() + Math.random().toString(36).substr(2, 5),
+                            prompt: parsed.meta.title || "Imported DSD Story",
+                            brand, duration,
+                            keyframes: parsed.timeline
+                        };
+                    }
+                    // Legacy Format
+                    else if (parsed.id && parsed.prompt && parsed.keyframes) {
+                        parsed.id = Date.now().toString() + Math.random().toString(36).substr(2, 5);
+                        sequenceToSave = parsed;
+                    }
+
+                    if (sequenceToSave) {
+                        usePlaygroundStore.getState().addSavedSequence(sequenceToSave);
+                    } else {
+                        console.error("Invalid sequence format");
+                    }
+                } catch (error) {
+                    console.error("Error parsing uploaded sequence", error);
+                }
+            }
+        };
+        e.target.value = ''; // Reset input
+    }
+}

package/src/components/settings/SettingsPanel.tsx

@@ -0,0 +1,267 @@
+/**
+ * SettingsPanel — Sidebar settings panel with Suggestions CRUD + AI generation.
+ */
+import React, { useState, useCallback } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { X, Plus, Trash2, Sparkles, Loader2, Key, Cpu, Box, BrainCircuit } from 'lucide-react';
+import { useSuggestionsStore } from '../../store/useSuggestionsStore';
+
+const AVAILABLE_MODELS = [
+    { id: 'gemini-3-flash-preview', name: 'Gemini 3 Flash', type: 'Ultra-Fast' },
+    { id: 'gemini-3.1-pro-preview', name: 'Gemini 3.1 Pro', type: 'Deep-Reasoning' },
+    { id: 'gemini-3.1-flash-lite-preview', name: 'Gemini 3.1 Flash Lite', type: 'Cutting-Edge' }
+];
+
+interface SettingsPanelProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export const SettingsPanel = React.memo(function SettingsPanel({ isOpen, onClose }: SettingsPanelProps) {
+    const { seeds, generated, addSeed, removeSeed, updateSeed, setGenerated } = useSuggestionsStore();
+    const [newSeed, setNewSeed] = useState('');
+    const [genCount, setGenCount] = useState(5);
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [editingIndex, setEditingIndex] = useState<number | null>(null);
+
+    // API Key state
+    const [apiKey, setApiKey] = useState(() => localStorage.getItem('google_gemini_api_key') || '');
+    const [showKey, setShowKey] = useState(false);
+
+    // AI Model State
+    const [activeModel, setActiveModel] = useState(() => localStorage.getItem('decido_gemini_model') || 'gemini-3-flash-preview');
+
+    const handleModelChange = useCallback((modelId: string) => {
+        setActiveModel(modelId);
+        localStorage.setItem('decido_gemini_model', modelId);
+
+        // Sincronizar con el Orquestador Rust para A/B Testing live
+        fetch('http://localhost:3100/api/models/active', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ model_id: modelId })
+        }).catch(() => console.warn('Orquestador local no expone /api/models/active aún.'));
+    }, []);
+
+    const handleAddSeed = useCallback(() => {
+        if (newSeed.trim()) { addSeed(newSeed.trim()); setNewSeed(''); }
+    }, [newSeed, addSeed]);
+
+    const handleGenerateSuggestions = useCallback(async () => {
+        if (seeds.length === 0) return;
+        setIsGenerating(true);
+        try {
+            const key = localStorage.getItem('google_gemini_api_key')
+                || (window as any).__DECIDO__?._apiKey
+                || '';
+            const model = localStorage.getItem('decido_gemini_model') || 'gemini-3-flash-preview';
+            if (!key) { console.warn('❌ No API key for suggestions'); setIsGenerating(false); return; }
+
+            const prompt = `Basándote en estas frases semilla, genera exactamente ${genCount} sugerencias similares para un chat de IA de productividad. Solo devuelve las sugerencias, una por línea, sin numeración ni bullets:\n\n${seeds.join('\n')}`;
+
+            const res = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${key}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] }),
+            });
+            const data = await res.json();
+            const text = data?.candidates?.[0]?.content?.parts?.[0]?.text || '';
+            const lines = text.split('\n').map((l: string) => l.trim()).filter((l: string) => l.length > 3);
+            setGenerated(lines.slice(0, genCount));
+        } catch (e) {
+            console.error('Error generating suggestions:', e);
+        } finally {
+            setIsGenerating(false);
+        }
+    }, [seeds, genCount, setGenerated]);
+
+    const saveApiKey = useCallback(() => {
+        if (apiKey.trim()) localStorage.setItem('google_gemini_api_key', apiKey.trim());
+        else localStorage.removeItem('google_gemini_api_key');
+    }, [apiKey]);
+
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <>
+                    <motion.div
+                        initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
+                        className="fixed inset-0 bg-surface-overlay backdrop-blur-xs z-200"
+                        style={{ position: 'fixed', inset: 0, zIndex: 200 }}
+                    />
+                    <motion.div
+                        initial={{ x: '-100%' }} animate={{ x: 0 }} exit={{ x: '-100%' }}
+                        transition={{ type: 'spring', damping: 30, stiffness: 300 }}
+                        className="fixed inset-y-0 left-0 w-full sm:w-[360px] bg-surface-secondary border-r border-border-default z-201 flex flex-col shadow-2xl"
+                        style={{ position: 'fixed', top: 0, bottom: 0, left: 0, zIndex: 201 }}
+                    >
+                        {/* Header */}
+                        <div className="flex items-center justify-between px-4 py-3 border-b border-border-subtle">
+                            <h2 className="text-sm font-bold text-text-primary">⚙️ Configuración</h2>
+                            <button onClick={onClose} className="w-7 h-7 rounded-full bg-surface-glass hover:bg-surface-glass flex items-center justify-center text-text-secondary hover:text-text-primary transition-colors">
+                                <X size={14} />
+                            </button>
+                        </div>
+
+                        {/* Scrollable Content */}
+                        <div className="flex-1 overflow-y-auto px-4 py-4 space-y-6" style={{ scrollbarWidth: 'thin', scrollbarColor: 'rgba(255,255,255,0.15) transparent' }}>
+
+                            {/* ── API Key ── */}
+                            <section>
+                                <div className="flex items-center gap-2 mb-3">
+                                    <Key size={14} className="text-amber-400" />
+                                    <h3 className="text-xs font-semibold text-text-secondary uppercase tracking-wider">API Key</h3>
+                                </div>
+                                <div className="flex gap-2">
+                                    <input
+                                        type={showKey ? 'text' : 'password'}
+                                        value={apiKey}
+                                        onChange={e => setApiKey(e.target.value)}
+                                        onBlur={saveApiKey}
+                                        placeholder="AIzaSy..."
+                                        className="flex-1 bg-surface-glass border border-border-default rounded-lg px-3 py-2 text-xs text-text-primary placeholder-zinc-600 outline-hidden focus:border-border-strong font-mono"
+                                    />
+                                    <button onClick={() => setShowKey(!showKey)} className="px-2 rounded-lg text-[10px] text-text-muted hover:text-text-primary bg-surface-glass hover:bg-surface-glass border border-border-default transition-colors">
+                                        {showKey ? '🙈' : '👁️'}
+                                    </button>
+                                </div>
+                            </section>
+
+                            {/* ── BrainRouter (A/B Testing LLMs) ── */}
+                            <section>
+                                <div className="flex items-center gap-2 mb-3">
+                                    <BrainCircuit size={14} className="text-emerald-400" />
+                                    <h3 className="text-xs font-semibold text-text-secondary uppercase tracking-wider">Brain Router (Enjambre)</h3>
+                                </div>
+                                <div className="flex flex-col gap-2">
+                                    {AVAILABLE_MODELS.map(m => (
+                                        <button
+                                            key={m.id}
+                                            onClick={() => handleModelChange(m.id)}
+                                            className={`flex items-center justify-between px-3 py-2 rounded-xl transition-all border ${activeModel === m.id ? 'bg-emerald-500/10 border-emerald-500/30 shadow-[0_0_10px_rgba(16,185,129,0.2)]' : 'bg-surface-glass border-border-default hover:border-border-strong'}`}
+                                        >
+                                            <div className="flex flex-col items-start gap-0.5">
+                                                <span className={`text-xs font-bold ${activeModel === m.id ? 'text-emerald-400' : 'text-text-primary'}`}>{m.name}</span>
+                                                <span className="text-[9px] font-mono text-text-muted uppercase tracking-wider">{m.id}</span>
+                                            </div>
+                                            <span className={`text-[9px] px-2 py-0.5 rounded-full font-bold uppercase tracking-widest ${activeModel === m.id ? 'bg-emerald-500/20 text-emerald-300' : 'bg-surface-tertiary text-text-secondary'}`}>
+                                                {m.type}
+                                            </span>
+                                        </button>
+                                    ))}
+                                </div>
+                            </section>
+
+                            {/* ── Suggestion Seeds CRUD ── */}
+                            <section>
+                                <div className="flex items-center gap-2 mb-3">
+                                    <Sparkles size={14} className="text-cyan-400" />
+                                    <h3 className="text-xs font-semibold text-text-secondary uppercase tracking-wider">Frases Semilla</h3>
+                                    <span className="text-[10px] text-text-muted font-mono ml-auto">{seeds.length}</span>
+                                </div>
+
+                                <div className="space-y-1.5 mb-3">
+                                    {seeds.map((seed, i) => (
+                                        <div key={i} className="flex items-center gap-1.5 group">
+                                            {editingIndex === i ? (
+                                                <input
+                                                    autoFocus
+                                                    value={seed}
+                                                    onChange={e => updateSeed(i, e.target.value)}
+                                                    onBlur={() => setEditingIndex(null)}
+                                                    onKeyDown={e => e.key === 'Enter' && setEditingIndex(null)}
+                                                    className="flex-1 bg-surface-glass border border-cyan-500/30 rounded-lg px-2.5 py-1.5 text-xs text-text-primary outline-hidden font-mono"
+                                                />
+                                            ) : (
+                                                <button
+                                                    onClick={() => setEditingIndex(i)}
+                                                    className="flex-1 text-left px-2.5 py-1.5 rounded-lg text-xs text-text-secondary hover:text-text-primary hover:bg-surface-glass transition-colors font-mono truncate"
+                                                >
+                                                    {seed}
+                                                </button>
+                                            )}
+                                            <button
+                                                onClick={() => removeSeed(i)}
+                                                className="w-6 h-6 rounded-md text-text-muted hover:text-red-400 hover:bg-red-500/10 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all shrink-0"
+                                            >
+                                                <Trash2 size={12} />
+                                            </button>
+                                        </div>
+                                    ))}
+                                </div>
+
+                                {/* Add new seed */}
+                                <div className="flex gap-1.5">
+                                    <input
+                                        value={newSeed}
+                                        onChange={e => setNewSeed(e.target.value)}
+                                        onKeyDown={e => e.key === 'Enter' && handleAddSeed()}
+                                        placeholder="Nueva frase semilla..."
+                                        className="flex-1 bg-surface-glass border border-border-default rounded-lg px-2.5 py-1.5 text-xs text-text-primary placeholder-zinc-600 outline-hidden focus:border-border-strong font-mono"
+                                    />
+                                    <button onClick={handleAddSeed} className="w-8 h-8 rounded-lg bg-cyan-500/10 border border-cyan-500/20 text-cyan-400 hover:bg-cyan-500/20 flex items-center justify-center transition-colors">
+                                        <Plus size={14} />
+                                    </button>
+                                </div>
+                            </section>
+
+                            {/* ── AI Generation ── */}
+                            <section>
+                                <div className="flex items-center gap-2 mb-3">
+                                    <Sparkles size={14} className="text-purple-400" />
+                                    <h3 className="text-xs font-semibold text-text-secondary uppercase tracking-wider">Generar con AI</h3>
+                                </div>
+                                <div className="flex items-center gap-2 mb-3">
+                                    <label className="text-[10px] text-text-muted font-mono">Cantidad:</label>
+                                    <input
+                                        type="number" min={1} max={20} value={genCount}
+                                        onChange={e => setGenCount(Math.max(1, Math.min(20, parseInt(e.target.value) || 5)))}
+                                        className="w-14 bg-surface-glass border border-border-default rounded-lg px-2 py-1 text-xs text-text-primary outline-hidden text-center font-mono"
+                                    />
+                                    <button
+                                        onClick={handleGenerateSuggestions}
+                                        disabled={isGenerating || seeds.length === 0}
+                                        className="flex-1 flex items-center justify-center gap-2 px-3 py-1.5 rounded-lg bg-purple-500/15 border border-purple-500/20 text-purple-300 hover:bg-purple-500/25 disabled:opacity-40 disabled:cursor-not-allowed transition-colors text-xs font-semibold"
+                                    >
+                                        {isGenerating ? <Loader2 size={14} className="animate-spin" /> : <Sparkles size={14} />}
+                                        {isGenerating ? 'Generando...' : 'Generar Sugerencias'}
+                                    </button>
+                                </div>
+
+                                {/* Generated Results */}
+                                {generated.length > 0 && (
+                                    <div className="space-y-1 bg-surface-glass rounded-lg p-2 border border-border-subtle">
+                                        <div className="text-[9px] text-text-muted font-mono uppercase mb-1">Generadas ({generated.length})</div>
+                                        {generated.map((g, i) => (
+                                            <div key={i} className="text-xs text-text-secondary font-mono px-2 py-1 rounded hover:bg-surface-glass transition-colors">
+                                                {g}
+                                            </div>
+                                        ))}
+                                    </div>
+                                )}
+                            </section>
+
+                            {/* ── Plugin Suggestions ── */}
+                            {Object.keys(useSuggestionsStore.getState().pluginSuggestions).length > 0 && (
+                                <section>
+                                    <div className="flex items-center gap-2 mb-3">
+                                        <Box size={14} className="text-emerald-400" />
+                                        <h3 className="text-xs font-semibold text-text-secondary uppercase tracking-wider">Plugins</h3>
+                                    </div>
+                                    {Object.entries(useSuggestionsStore.getState().pluginSuggestions).map(([pluginId, items]) => (
+                                        <div key={pluginId} className="mb-2">
+                                            <div className="text-[10px] text-text-muted font-mono mb-1">{pluginId} ({items.length})</div>
+                                            {items.map((item, i) => (
+                                                <div key={i} className="text-xs text-text-secondary font-mono px-2 py-1">{item}</div>
+                                            ))}
+                                        </div>
+                                    ))}
+                                </section>
+                            )}
+                        </div>
+                    </motion.div>
+                </>
+            )}
+        </AnimatePresence>
+    );
+});

package/src/components/shell/AppHeader.tsx

@@ -0,0 +1,9 @@
+/**
+ * AppHeader — Re-export of PlaygroundHeader with new name.
+ * 
+ * During the transition period, this is a simple re-export.
+ * In future sprints, AppHeader will be simplified and absorb
+ * the T2 TabBar as part of the toolbar area.
+ */
+export { PlaygroundHeader as AppHeader } from '../playground/PlaygroundHeader';
+export type { PlaygroundHeaderProps as AppHeaderProps, HeaderAction } from '../playground/PlaygroundHeader';