@decido/shell 4.0.2 → 4.0.3

package/dist/chunk-Q64KZXPK.mjs

@@ -0,0 +1,43 @@
+// src/components/playground/PlaygroundTerminal.tsx
+import React from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { Terminal, Trash2, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PlaygroundTerminal = React.memo(function PlaygroundTerminal2({ isOpen, setIsOpen, logs, setLogs, logsEndRef }) {
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 50 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 50 },
+      className: "absolute right-6 bottom-40 w-80 h-64 bg-surface-overlay backdrop-blur-md border border-border-default rounded-xl flex flex-col overflow-hidden z-30 shadow-2xl",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-border-default bg-surface-glass", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Terminal, { size: 14, className: "text-text-secondary" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-text-secondary", children: "System Log" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("button", { onClick: () => setLogs([]), className: "text-text-muted hover:text-red-400 transition-colors", title: "Limpiar logs", children: /* @__PURE__ */ jsx(Trash2, { size: 14 }) }),
+            /* @__PURE__ */ jsx("button", { onClick: () => setIsOpen(false), className: "text-text-muted hover:text-text-primary transition-colors", children: /* @__PURE__ */ jsx(X, { size: 14 }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-3 font-mono text-[10px] space-y-1 custom-scrollbar", children: [
+          logs.map((log, i) => /* @__PURE__ */ jsxs("div", { className: `flex gap-2 ${log.type === "error" ? "text-red-400" : log.type === "success" ? "text-emerald-400" : log.type === "system" ? "text-purple-400" : "text-text-secondary"}`, children: [
+            /* @__PURE__ */ jsxs("span", { className: "opacity-50 shrink-0", children: [
+              "[",
+              log.time,
+              "]"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "wrap-break-word", children: log.msg })
+          ] }, i)),
+          /* @__PURE__ */ jsx("div", { ref: logsEndRef })
+        ] })
+      ]
+    }
+  ) });
+});
+
+export {
+  PlaygroundTerminal
+};

package/dist/chunk-QHQW2HMU.mjs

@@ -0,0 +1,155 @@
+// src/hooks/useIntentLens.ts
+import { useMemo } from "react";
+var INTENT_PATTERNS = [
+  {
+    type: "EDIT_GRAPH",
+    pattern: /\b(agrega|suma|añade|conecta|modifica|cambia|elimina|borra|parchea|actualiza|inserta|mueve)\b/gi,
+    label: "Editar Grafo",
+    icon: "\u270F\uFE0F",
+    color: "#f59e0b",
+    examples: [
+      "Agrega un nodo de validaci\xF3n despu\xE9s de login",
+      "Conecta el nodo de pago con el de confirmaci\xF3n",
+      "Elimina el paso de verificaci\xF3n duplicado"
+    ]
+  },
+  {
+    type: "CREATE_GRAPH",
+    pattern: /\b(grafo|flujo|nodos|blueprint|escenario|onboarding|proceso|workflow|pipeline|trigger|subflujo|orquest)\b|\b(crea|diseña|genera|construye)\s+(un|una|el|la|los|las)\b/gi,
+    label: "Crear Grafo",
+    icon: "\u{1F517}",
+    color: "#10b981",
+    examples: [
+      "Crea un flujo de onboarding para nuevos usuarios",
+      "Dise\xF1a un pipeline de procesamiento de datos",
+      "Genera un blueprint con 5 nodos de decisi\xF3n"
+    ]
+  },
+  {
+    type: "UI_ACTION",
+    pattern: /\b(shell|tema|theme|sidebar|panel|activity\s*bar|status\s*bar|top\s*bar|notificaci[oó]n|shortcut|atajo|layout)\b|\b(configura)\s+(el|la|los|las)\b/gi,
+    label: "Acci\xF3n UI",
+    icon: "\u{1F3A8}",
+    color: "#3b82f6",
+    examples: [
+      "Abre el panel de sidebar",
+      "Configura el tema oscuro",
+      "Cambia el layout a pantalla completa"
+    ]
+  },
+  {
+    type: "MCP_ACTION",
+    pattern: /\b(ejecuta|invoca|llama|herramienta|tool|api|endpoint)\b/gi,
+    label: "Acci\xF3n MCP",
+    icon: "\u26A1",
+    color: "#a855f7",
+    examples: [
+      "Ejecuta la herramienta de an\xE1lisis de c\xF3digo",
+      "Invoca el endpoint de validaci\xF3n",
+      "Llama al API de b\xFAsqueda sem\xE1ntica"
+    ]
+  },
+  {
+    type: "NAVIGATE",
+    pattern: /\b(landing|página\s*web|web\s*page|website|diseño\s*web|sitio|homepage|portfolio|dashboard\s*ui|ui\s*design|mockup|prototipo\s*web)\b/gi,
+    label: "Web Preview",
+    icon: "\u{1F310}",
+    color: "#06b6d4",
+    examples: [
+      "Crea una landing page para un SaaS de IA",
+      "Dise\xF1a un portfolio moderno con tema oscuro",
+      "Genera un dashboard UI para m\xE9tricas de ventas",
+      "Crea una p\xE1gina de pricing con 3 planes"
+    ]
+  }
+];
+var _extraPatterns = [];
+function registerIntentPattern(p) {
+  _extraPatterns.push(p);
+}
+function getIntentPatterns() {
+  return [...INTENT_PATTERNS, ..._extraPatterns];
+}
+function tokenizeWithIntents(input) {
+  if (!input.trim()) return [];
+  const matches = [];
+  for (const { type, pattern, color } of INTENT_PATTERNS) {
+    const re = new RegExp(pattern.source, pattern.flags);
+    let match;
+    while ((match = re.exec(input)) !== null) {
+      matches.push({
+        start: match.index,
+        end: match.index + match[0].length,
+        intent: type,
+        color
+      });
+    }
+  }
+  matches.sort((a, b) => a.start - b.start);
+  const tokens = [];
+  let cursor = 0;
+  for (const m of matches) {
+    if (m.start < cursor) continue;
+    if (m.start > cursor) {
+      tokens.push({
+        text: input.slice(cursor, m.start),
+        intent: "NONE",
+        color: null,
+        isMatch: false
+      });
+    }
+    tokens.push({
+      text: input.slice(m.start, m.end),
+      intent: m.intent,
+      color: m.color,
+      isMatch: true
+    });
+    cursor = m.end;
+  }
+  if (cursor < input.length) {
+    tokens.push({
+      text: input.slice(cursor),
+      intent: "NONE",
+      color: null,
+      isMatch: false
+    });
+  }
+  return tokens;
+}
+function useIntentLens(input) {
+  const result = useMemo(() => {
+    const tokens = tokenizeWithIntents(input);
+    const intentMap = /* @__PURE__ */ new Map();
+    for (const token of tokens) {
+      if (token.isMatch && token.intent !== "NONE") {
+        const existing = intentMap.get(token.intent);
+        if (existing) {
+          existing.matchedPhrases.push(token.text);
+        } else {
+          const pattern = INTENT_PATTERNS.find((p) => p.type === token.intent);
+          intentMap.set(token.intent, {
+            type: token.intent,
+            label: pattern.label,
+            color: pattern.color,
+            icon: pattern.icon,
+            matchedPhrases: [token.text]
+          });
+        }
+      }
+    }
+    return {
+      tokens,
+      detectedIntents: Array.from(intentMap.values()),
+      hasIntents: intentMap.size > 0,
+      primaryIntent: intentMap.size > 0 ? Array.from(intentMap.values())[0] : null
+    };
+  }, [input]);
+  return result;
+}
+
+export {
+  INTENT_PATTERNS,
+  registerIntentPattern,
+  getIntentPatterns,
+  useIntentLens
+};

package/dist/chunk-RWZ4BOIN.mjs

@@ -0,0 +1,385 @@
+import {
+  useSuggestionsStore
+} from "./chunk-F3OTFHNO.mjs";
+import {
+  usePlaygroundStore
+} from "./chunk-XMSU6UWD.mjs";
+
+// src/components/playground/PlaygroundAppSidebar.tsx
+import React2, { useState as useState2 } from "react";
+import { motion as motion2, AnimatePresence as AnimatePresence2 } from "motion/react";
+import { Search, Plus as Plus2, X as X2, Settings, ChevronDown, Plug, Wrench, Network, PackageOpen, Paintbrush } from "lucide-react";
+import { ChatHistoryList } from "@decido/chat";
+
+// src/components/settings/SettingsPanel.tsx
+import React, { useState, useCallback } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { X, Plus, Trash2, Sparkles, Loader2, Key, Box, BrainCircuit } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var 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" }
+];
+var SettingsPanel = React.memo(function SettingsPanel2({ isOpen, onClose }) {
+  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(null);
+  const [apiKey, setApiKey] = useState(() => localStorage.getItem("google_gemini_api_key") || "");
+  const [showKey, setShowKey] = useState(false);
+  const [activeModel, setActiveModel] = useState(() => localStorage.getItem("decido_gemini_model") || "gemini-3-flash-preview");
+  const handleModelChange = useCallback((modelId) => {
+    setActiveModel(modelId);
+    localStorage.setItem("decido_gemini_model", modelId);
+    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\xFAn."));
+  }, []);
+  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.__DECIDO__?._apiKey || "";
+      const model = localStorage.getItem("decido_gemini_model") || "gemini-3-flash-preview";
+      if (!key) {
+        console.warn("\u274C No API key for suggestions");
+        setIsGenerating(false);
+        return;
+      }
+      const prompt = `Bas\xE1ndote en estas frases semilla, genera exactamente ${genCount} sugerencias similares para un chat de IA de productividad. Solo devuelve las sugerencias, una por l\xEDnea, sin numeraci\xF3n ni bullets:
+
+${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) => l.trim()).filter((l) => 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 /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      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 }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      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 },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border-subtle", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-sm font-bold text-text-primary", children: "\u2699\uFE0F Configuraci\xF3n" }),
+            /* @__PURE__ */ jsx("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", children: /* @__PURE__ */ jsx(X, { size: 14 }) })
+          ] }),
+          /* @__PURE__ */ jsxs("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" }, children: [
+            /* @__PURE__ */ jsxs("section", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+                /* @__PURE__ */ jsx(Key, { size: 14, className: "text-amber-400" }),
+                /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-text-secondary uppercase tracking-wider", children: "API Key" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "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"
+                  }
+                ),
+                /* @__PURE__ */ jsx("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", children: showKey ? "\u{1F648}" : "\u{1F441}\uFE0F" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("section", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+                /* @__PURE__ */ jsx(BrainCircuit, { size: 14, className: "text-emerald-400" }),
+                /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-text-secondary uppercase tracking-wider", children: "Brain Router (Enjambre)" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: AVAILABLE_MODELS.map((m) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  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"}`,
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-0.5", children: [
+                      /* @__PURE__ */ jsx("span", { className: `text-xs font-bold ${activeModel === m.id ? "text-emerald-400" : "text-text-primary"}`, children: m.name }),
+                      /* @__PURE__ */ jsx("span", { className: "text-[9px] font-mono text-text-muted uppercase tracking-wider", children: m.id })
+                    ] }),
+                    /* @__PURE__ */ jsx("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"}`, children: m.type })
+                  ]
+                },
+                m.id
+              )) })
+            ] }),
+            /* @__PURE__ */ jsxs("section", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+                /* @__PURE__ */ jsx(Sparkles, { size: 14, className: "text-cyan-400" }),
+                /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-text-secondary uppercase tracking-wider", children: "Frases Semilla" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-muted font-mono ml-auto", children: seeds.length })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-1.5 mb-3", children: seeds.map((seed, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 group", children: [
+                editingIndex === i ? /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    autoFocus: true,
+                    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"
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "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",
+                    children: seed
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "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",
+                    children: /* @__PURE__ */ jsx(Trash2, { size: 12 })
+                  }
+                )
+              ] }, i)) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+                /* @__PURE__ */ jsx(
+                  "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"
+                  }
+                ),
+                /* @__PURE__ */ jsx("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", children: /* @__PURE__ */ jsx(Plus, { size: 14 }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("section", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+                /* @__PURE__ */ jsx(Sparkles, { size: 14, className: "text-purple-400" }),
+                /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-text-secondary uppercase tracking-wider", children: "Generar con AI" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+                /* @__PURE__ */ jsx("label", { className: "text-[10px] text-text-muted font-mono", children: "Cantidad:" }),
+                /* @__PURE__ */ jsx(
+                  "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"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "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",
+                    children: [
+                      isGenerating ? /* @__PURE__ */ jsx(Loader2, { size: 14, className: "animate-spin" }) : /* @__PURE__ */ jsx(Sparkles, { size: 14 }),
+                      isGenerating ? "Generando..." : "Generar Sugerencias"
+                    ]
+                  }
+                )
+              ] }),
+              generated.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-1 bg-surface-glass rounded-lg p-2 border border-border-subtle", children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-[9px] text-text-muted font-mono uppercase mb-1", children: [
+                  "Generadas (",
+                  generated.length,
+                  ")"
+                ] }),
+                generated.map((g, i) => /* @__PURE__ */ jsx("div", { className: "text-xs text-text-secondary font-mono px-2 py-1 rounded hover:bg-surface-glass transition-colors", children: g }, i))
+              ] })
+            ] }),
+            Object.keys(useSuggestionsStore.getState().pluginSuggestions).length > 0 && /* @__PURE__ */ jsxs("section", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+                /* @__PURE__ */ jsx(Box, { size: 14, className: "text-emerald-400" }),
+                /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold text-text-secondary uppercase tracking-wider", children: "Plugins" })
+              ] }),
+              Object.entries(useSuggestionsStore.getState().pluginSuggestions).map(([pluginId, items]) => /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-text-muted font-mono mb-1", children: [
+                  pluginId,
+                  " (",
+                  items.length,
+                  ")"
+                ] }),
+                items.map((item, i) => /* @__PURE__ */ jsx("div", { className: "text-xs text-text-secondary font-mono px-2 py-1", children: item }, i))
+              ] }, pluginId))
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+});
+
+// src/components/playground/PlaygroundAppSidebar.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DevToolsFAB = () => {
+  const [expanded, setExpanded] = useState2(false);
+  return /* @__PURE__ */ jsxs2("div", { className: "relative", onMouseLeave: () => setExpanded(false), children: [
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        onClick: () => setExpanded(!expanded),
+        className: `w-8 h-8 rounded-lg flex items-center justify-center transition-colors shrink-0 ${expanded ? "bg-surface-elevated text-text-primary" : "text-text-muted hover:text-text-primary hover:bg-surface-glass"}`,
+        title: "Herramientas de Desarrollador",
+        children: /* @__PURE__ */ jsx2(Wrench, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx2(AnimatePresence2, { children: expanded && /* @__PURE__ */ jsxs2(
+      motion2.div,
+      {
+        initial: { opacity: 0, scale: 0.9, y: 10 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 0.9, y: 10 },
+        transition: { type: "spring", stiffness: 400, damping: 25 },
+        className: "absolute bottom-full right-0 mb-2 flex flex-col gap-2 p-2 rounded-2xl bg-surface-elevated border border-border-default shadow-2xl origin-bottom z-50",
+        children: [
+          /* @__PURE__ */ jsx2("button", { onClick: () => window.dispatchEvent(new CustomEvent("DECIDO_OPEN_SWARM_WIZARD")), className: "w-10 h-10 rounded-full bg-surface-secondary border border-border-default hover:border-cyan-400/50 flex items-center justify-center text-text-secondary hover:text-cyan-400 transition-all hover:shadow-[0_0_15px_rgba(6,182,212,0.3)]", title: "Configuraci\xF3n del Enjambre", children: /* @__PURE__ */ jsx2("i", { className: "fas fa-cog text-sm" }) }),
+          /* @__PURE__ */ jsx2("button", { onClick: () => window.dispatchEvent(new CustomEvent("DECIDO_TOGGLE_TOPOLOGY")), className: "w-10 h-10 rounded-full bg-surface-secondary border border-border-default hover:border-emerald-400/50 flex items-center justify-center text-text-secondary hover:text-emerald-400 transition-all hover:shadow-[0_0_15px_rgba(16,185,129,0.3)]", title: "Live Topology", children: /* @__PURE__ */ jsx2(Network, { size: 16 }) }),
+          /* @__PURE__ */ jsx2("button", { onClick: () => window.dispatchEvent(new CustomEvent("DECIDO_OPEN_MARKETPLACE")), className: "w-10 h-10 rounded-full bg-surface-secondary border border-border-default hover:border-indigo-400/50 flex items-center justify-center text-text-secondary hover:text-indigo-400 transition-all hover:shadow-[0_0_15px_rgba(99,102,241,0.3)]", title: "Plugin Marketplace", children: /* @__PURE__ */ jsx2(PackageOpen, { size: 16 }) }),
+          /* @__PURE__ */ jsx2("button", { onClick: () => window.dispatchEvent(new CustomEvent("DECIDO_TOGGLE_TW_EDITOR")), className: "w-10 h-10 rounded-full bg-surface-secondary border border-border-default hover:border-purple-400/50 flex items-center justify-center text-text-secondary hover:text-purple-400 transition-all hover:shadow-[0_0_15px_rgba(139,92,246,0.3)]", title: "Tailwind Editor", children: /* @__PURE__ */ jsx2(Paintbrush, { size: 16 }) })
+        ]
+      }
+    ) })
+  ] });
+};
+var PlaygroundAppSidebar = React2.memo(function PlaygroundAppSidebar2({
+  isOpen,
+  onClose,
+  menuSections = [],
+  onSettings,
+  onProfile,
+  profileName = "Usuario",
+  profileAvatar
+}) {
+  const [searchQuery, setSearchQuery] = useState2("");
+  const [collapsedSections, setCollapsedSections] = useState2(/* @__PURE__ */ new Set());
+  const [showSettings, setShowSettings] = useState2(false);
+  const chatInstances = usePlaygroundStore((s) => s.chatInstances);
+  const activeChatId = usePlaygroundStore((s) => s.activeChatId);
+  const addChatInstance = usePlaygroundStore((s) => s.addChatInstance);
+  const removeChatInstance = usePlaygroundStore((s) => s.removeChatInstance);
+  const renameChatInstance = usePlaygroundStore((s) => s.renameChatInstance);
+  const setActiveChatId = usePlaygroundStore((s) => s.setActiveChatId);
+  const toggleSection = (id) => {
+    setCollapsedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const sidebarContent = (showClose = false) => /* @__PURE__ */ jsxs2("div", { className: "flex flex-col h-full bg-surface-secondary text-text-primary", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex-none p-3 pt-4 space-y-2", children: [
+      showClose && /* @__PURE__ */ jsx2("div", { className: "flex justify-end mb-1", children: /* @__PURE__ */ jsx2("button", { onClick: onClose, className: "w-7 h-7 rounded-full bg-surface-glass hover:bg-surface-elevated flex items-center justify-center text-text-secondary hover:text-text-primary transition-colors", children: /* @__PURE__ */ jsx2(X2, { size: 14 }) }) }),
+      /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx2(Search, { size: 14, className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            placeholder: "Buscar conversaciones...",
+            className: "w-full bg-surface-glass border border-border-subtle rounded-lg pl-8 pr-3 py-2 text-sm text-text-primary placeholder-text-muted outline-hidden focus:border-border-strong focus:bg-surface-glass transition-colors"
+          }
+        ),
+        searchQuery && /* @__PURE__ */ jsx2("button", { onClick: () => setSearchQuery(""), className: "absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-primary", children: /* @__PURE__ */ jsx2(X2, { size: 12 }) })
+      ] }),
+      /* @__PURE__ */ jsxs2("button", { onClick: () => addChatInstance(), className: "w-full flex items-center gap-2 px-3 py-2 rounded-lg bg-surface-glass border border-border-subtle hover:bg-surface-glass hover:border-border-default transition-colors text-sm text-text-primary hover:text-text-primary", children: [
+        /* @__PURE__ */ jsx2(Plus2, { size: 16 }),
+        /* @__PURE__ */ jsx2("span", { children: "Nueva conversaci\xF3n" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex-1 overflow-y-auto px-3 pb-2 space-y-1", style: { scrollbarWidth: "thin", scrollbarColor: "rgba(255,255,255,0.15) transparent" }, children: [
+      /* @__PURE__ */ jsx2(
+        ChatHistoryList,
+        {
+          chatInstances,
+          activeChatId: activeChatId || "",
+          searchQuery,
+          setActiveChatId,
+          renameChatInstance,
+          removeChatInstance
+        }
+      ),
+      menuSections.length > 0 && /* @__PURE__ */ jsx2("div", { className: "mt-4 pt-3 border-t border-border-subtle", children: menuSections.map((section) => /* @__PURE__ */ jsxs2("div", { className: "mb-3", children: [
+        /* @__PURE__ */ jsxs2("button", { onClick: () => section.collapsible && toggleSection(section.id), className: "flex items-center gap-1.5 px-2 py-1.5 text-[11px] font-semibold text-text-muted uppercase tracking-wider w-full hover:text-text-primary transition-colors", children: [
+          section.icon,
+          /* @__PURE__ */ jsx2("span", { className: "flex-1 text-left", children: section.title }),
+          section.collapsible && /* @__PURE__ */ jsx2(ChevronDown, { size: 12, className: `transition-transform ${collapsedSections.has(section.id) ? "-rotate-90" : ""}` })
+        ] }),
+        /* @__PURE__ */ jsx2(AnimatePresence2, { children: !collapsedSections.has(section.id) && /* @__PURE__ */ jsx2(motion2.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, className: "overflow-hidden", children: section.items.map((item) => /* @__PURE__ */ jsxs2("button", { onClick: item.onClick, className: `w-full flex items-center gap-2 px-2 py-2 rounded-lg text-sm transition-colors ${item.active ? "bg-surface-glass text-text-primary" : "text-text-secondary hover:bg-surface-glass hover:text-text-primary"}`, children: [
+          item.icon,
+          /* @__PURE__ */ jsx2("span", { className: "flex-1 text-left truncate", children: item.label }),
+          item.badge !== void 0 && /* @__PURE__ */ jsx2("span", { className: "px-1.5 py-0.5 rounded-full bg-cyan-500/15 text-cyan-400 text-[10px] font-bold", children: item.badge })
+        ] }, item.id)) }) })
+      ] }, section.id)) })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "flex-none border-t border-border-subtle px-3 py-2", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs2("button", { onClick: onProfile, className: "flex-1 flex items-center gap-2 px-2 py-2 rounded-lg hover:bg-surface-glass transition-colors group", children: [
+        /* @__PURE__ */ jsx2("div", { className: "w-7 h-7 rounded-full bg-linear-to-br from-cyan-500 to-purple-600 flex items-center justify-center text-text-primary text-xs font-bold shrink-0", children: profileAvatar || profileName.charAt(0).toUpperCase() }),
+        /* @__PURE__ */ jsx2("span", { className: "text-sm text-text-primary group-hover:text-text-primary truncate", children: profileName })
+      ] }),
+      /* @__PURE__ */ jsx2(DevToolsFAB, {}),
+      /* @__PURE__ */ jsx2("button", { onClick: () => window.dispatchEvent(new CustomEvent("DECIDO_OPEN_MCP_MODAL")), className: "w-8 h-8 rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-glass flex items-center justify-center transition-colors shrink-0", title: "Configuraci\xF3n MCP", children: /* @__PURE__ */ jsx2(Plug, { size: 16 }) }),
+      /* @__PURE__ */ jsx2("button", { onClick: () => setShowSettings(true), className: "w-8 h-8 rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-glass flex items-center justify-center transition-colors shrink-0", title: "Configuraci\xF3n", children: /* @__PURE__ */ jsx2(Settings, { size: 16 }) })
+    ] }) }),
+    /* @__PURE__ */ jsx2(SettingsPanel, { isOpen: showSettings, onClose: () => setShowSettings(false) })
+  ] });
+  const mobileDrawer = /* @__PURE__ */ jsx2(AnimatePresence2, { children: isOpen && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(motion2.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: onClose, className: "md:hidden fixed inset-0 bg-surface-overlay backdrop-blur-xs z-40" }),
+    /* @__PURE__ */ jsx2(motion2.div, { initial: { x: "-100%" }, animate: { x: 0 }, exit: { x: "-100%" }, transition: { type: "spring", damping: 30, stiffness: 300 }, className: "md:hidden fixed inset-y-0 left-0 w-[380px] z-50 shadow-2xl", children: sidebarContent(true) })
+  ] }) });
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    mobileDrawer,
+    isOpen && /* @__PURE__ */ jsx2("div", { className: "hidden md:flex h-full w-full min-h-0", children: sidebarContent(false) })
+  ] });
+});
+
+export {
+  PlaygroundAppSidebar
+};