strapi-plugin-mcp-chat 0.1.0

package/admin/src/components/FloatingChat.tsx

@@ -0,0 +1,370 @@
+/**
+ * Chat flutuante global do admin: aparece em TODAS as telas (montado no body),
+ * ancorado à direita por padrão e arrastável pela barra de título.
+ * Autossuficiente (HTML/CSS puro, sem providers do admin). Autentica com o
+ * mesmo JWT do admin via getFetchClient.
+ */
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { getFetchClient } from '@strapi/strapi/admin';
+
+type Msg = { role: 'user' | 'assistant'; content: string; image?: string | null };
+type Pos = { x: number; y: number };
+
+type Props = {
+  previewOn: boolean;
+  previewUrl: string;
+  onTogglePreview: () => void;
+  /** chamado após uma resposta; didWrite indica que houve edição no Strapi. */
+  onReply: (didWrite: boolean) => void;
+};
+
+const W = 380;
+
+type Lang = 'pt' | 'en';
+
+const STR: Record<Lang, Record<string, string>> = {
+  pt: {
+    fab: 'Abrir MCP Chat', minimize: 'Minimizar',
+    rec: '🎤 Enviar áudio', recStop: '⏹ Parar áudio', recTitle: 'Gravar áudio e enviar (transcreve e manda)',
+    previewOn: '🖼 Preview: ON', previewOff: '🖼 Preview: OFF', previewTitle: 'Abrir/fechar o preview do site ao lado da Strapi',
+    voiceOn: '🔊 Voz: ON', voiceOff: '🔈 Voz: OFF', voiceTitle: 'Ler as respostas em voz alta (TTS)',
+    shareOn: '🛑 Parar tela', shareOff: '🖥 Compart. tela', shareTitle: 'Compartilhar a tela com a IA',
+    langTitle: 'Idioma do chat e da voz (PT-BR ↔ English)',
+    seeingScreen: '• vendo sua tela ', voiceStatus: '• voz ON',
+    empty: 'Escreva, fale (🎤) ou compartilhe a tela. Ex.: “troque o texto X por Y e publique”.',
+    you: 'Você', ai: 'IA', processing: 'Processando…',
+    placeholder: 'Escreva… (Cmd/Ctrl+Enter)', sendBtn: 'Enviar',
+    errShare: 'Não foi possível iniciar o compartilhamento de tela.',
+    errMic: 'Não foi possível acessar o microfone.',
+    errStt: 'Erro na transcrição.', errAudioEmpty: 'Não consegui entender o áudio.',
+    errChat: 'Erro ao falar com a IA.',
+  },
+  en: {
+    fab: 'Open MCP Chat', minimize: 'Minimize',
+    rec: '🎤 Send audio', recStop: '⏹ Stop audio', recTitle: 'Record audio and send (transcribes and sends)',
+    previewOn: '🖼 Preview: ON', previewOff: '🖼 Preview: OFF', previewTitle: 'Toggle the site preview next to Strapi',
+    voiceOn: '🔊 Voice: ON', voiceOff: '🔈 Voice: OFF', voiceTitle: 'Read replies out loud (TTS)',
+    shareOn: '🛑 Stop screen', shareOff: '🖥 Share screen', shareTitle: 'Share your screen with the AI',
+    langTitle: 'Chat and voice language (PT-BR ↔ English)',
+    seeingScreen: '• seeing your screen ', voiceStatus: '• voice ON',
+    empty: 'Type, speak (🎤) or share your screen. E.g.: “replace text X with Y and publish”.',
+    you: 'You', ai: 'AI', processing: 'Processing…',
+    placeholder: 'Type… (Cmd/Ctrl+Enter)', sendBtn: 'Send',
+    errShare: 'Could not start screen sharing.',
+    errMic: 'Could not access the microphone.',
+    errStt: 'Transcription error.', errAudioEmpty: 'I could not understand the audio.',
+    errChat: 'Error talking to the AI.',
+  },
+};
+
+export const FloatingChat = ({ previewOn, previewUrl, onTogglePreview, onReply }: Props) => {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState<Pos | null>(null); // null = ancorado à direita
+  const [messages, setMessages] = useState<Msg[]>([]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [sharing, setSharing] = useState(false);
+  const [voiceOn, setVoiceOn] = useState(false);
+  const [recording, setRecording] = useState(false);
+  const [lang, setLang] = useState<Lang>(() => {
+    try { return (localStorage.getItem('mcp-chat-lang') as Lang) || 'en'; } catch { return 'en'; }
+  });
+  const t = STR[lang];
+  useEffect(() => { try { localStorage.setItem('mcp-chat-lang', lang); } catch { /* noop */ } }, [lang]);
+  const [error, setError] = useState<string | null>(null);
+
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const recorderRef = useRef<MediaRecorder | null>(null);
+  const chunksRef = useRef<Blob[]>([]);
+  const bodyRef = useRef<HTMLDivElement | null>(null);
+  const dragRef = useRef<{ dx: number; dy: number } | null>(null);
+
+  // ── Drag ────────────────────────────────────────────────────────────────
+  const onHeaderDown = (e: React.MouseEvent) => {
+    const startX = pos?.x ?? window.innerWidth - W - 24;
+    const startY = pos?.y ?? 88;
+    dragRef.current = { dx: e.clientX - startX, dy: e.clientY - startY };
+    e.preventDefault();
+  };
+  useEffect(() => {
+    const move = (e: MouseEvent) => {
+      if (!dragRef.current) return;
+      const x = Math.max(0, Math.min(window.innerWidth - 60, e.clientX - dragRef.current.dx));
+      const y = Math.max(0, Math.min(window.innerHeight - 40, e.clientY - dragRef.current.dy));
+      setPos({ x, y });
+    };
+    const up = () => { dragRef.current = null; };
+    window.addEventListener('mousemove', move);
+    window.addEventListener('mouseup', up);
+    return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); };
+  }, []);
+
+  // ── Auto-scroll ───────────────────────────────────────────────────────────
+  useEffect(() => {
+    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
+  }, [messages, loading]);
+
+  // ── Screenshare ───────────────────────────────────────────────────────────
+  const startShare = async () => {
+    setError(null);
+    try {
+      const stream = await (navigator.mediaDevices as any).getDisplayMedia({ video: true });
+      streamRef.current = stream;
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+        await videoRef.current.play().catch(() => undefined);
+      }
+      stream.getVideoTracks()[0].addEventListener('ended', stopShare);
+      setSharing(true);
+    } catch {
+      setError(t.errShare);
+    }
+  };
+  const stopShare = () => {
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+    if (videoRef.current) videoRef.current.srcObject = null;
+    setSharing(false);
+  };
+  const captureFrame = (): string | null => {
+    const video = videoRef.current;
+    if (!sharing || !video || !video.videoWidth || !video.videoHeight) return null;
+    const canvas = document.createElement('canvas');
+    // Reduz a resolução e usa JPEG comprimido para o payload não estourar o
+    // limite do corpo da requisição (evita o erro 413 "request entity too large").
+    const scale = Math.min(1, 1100 / video.videoWidth);
+    canvas.width = Math.round(video.videoWidth * scale);
+    canvas.height = Math.round(video.videoHeight * scale);
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return null;
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL('image/jpeg', 0.7);
+  };
+
+  // ── TTS ────────────────────────────────────────────────────────────────────
+  const playTTS = async (text: string) => {
+    try {
+      const { post } = getFetchClient();
+      const { data } = await post('/mcp-chat/tts', { text });
+      const audio = new Audio(`data:${data.content_type};base64,${data.audio_base64}`);
+      await audio.play().catch(() => undefined);
+    } catch { /* voz é opcional */ }
+  };
+
+  // ── Enviar ──────────────────────────────────────────────────────────────────
+  const sendMessage = async (text: string) => {
+    if (!text || loading) return;
+    setError(null);
+    const image = captureFrame();
+    const next: Msg[] = [...messages, { role: 'user', content: text, image }];
+    setMessages(next);
+    setLoading(true);
+    try {
+      const { post } = getFetchClient();
+      const { data } = await post('/mcp-chat/message', {
+        messages: next.map((m) => ({ role: m.role, content: m.content })),
+        image,
+        lang,
+        // Página que o usuário está olhando no preview (se aberto). Dá à IA o
+        // contexto do "isso aqui" sem precisar varrer o site inteiro.
+        previewUrl: previewOn ? previewUrl : null,
+      });
+      const reply = data?.reply || '(sem resposta)';
+      setMessages((cur) => [...cur, { role: 'assistant', content: reply }]);
+      onReply(!!data?.didWrite);
+      if (voiceOn) playTTS(reply);
+    } catch (e: any) {
+      setError(e?.response?.data?.error?.message || e?.message || t.errChat);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const send = () => {
+    const text = input.trim();
+    if (!text) return;
+    setInput('');
+    sendMessage(text);
+  };
+
+  // ── STT ──────────────────────────────────────────────────────────────────────
+  const startRecording = async () => {
+    setError(null);
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const mimeType = MediaRecorder.isTypeSupported('audio/webm')
+        ? 'audio/webm'
+        : MediaRecorder.isTypeSupported('audio/mp4') ? 'audio/mp4' : '';
+      const recorder = mimeType ? new MediaRecorder(stream, { mimeType }) : new MediaRecorder(stream);
+      chunksRef.current = [];
+      recorder.ondataavailable = (e) => { if (e.data.size > 0) chunksRef.current.push(e.data); };
+      recorder.onstop = async () => {
+        stream.getTracks().forEach((t) => t.stop());
+        const blob = new Blob(chunksRef.current, { type: recorder.mimeType || 'audio/webm' });
+        await transcribeAndSend(blob);
+      };
+      recorderRef.current = recorder;
+      recorder.start();
+      setRecording(true);
+    } catch {
+      setError(t.errMic);
+    }
+  };
+  const stopRecording = () => { recorderRef.current?.stop(); setRecording(false); };
+  const transcribeAndSend = async (blob: Blob) => {
+    setLoading(true);
+    try {
+      const { post } = getFetchClient();
+      const ext = blob.type.includes('mp4') ? 'mp4' : 'webm';
+      const form = new FormData();
+      form.append('audio', blob, `audio.${ext}`);
+      form.append('language', lang);
+      // Idioma também na query: campos multipart nem sempre chegam em
+      // ctx.request.body, mas a query string nunca se perde. Garante que o
+      // Whisper transcreve no idioma escolhido (PT ou EN), não outro.
+      const { data } = await post(`/mcp-chat/stt?language=${lang}`, form);
+      const text = (data?.text || '').trim();
+      setLoading(false);
+      if (text) sendMessage(text);
+      else setError(t.errAudioEmpty);
+    } catch (e: any) {
+      setLoading(false);
+      setError(e?.response?.data?.error?.message || t.errStt);
+    }
+  };
+
+  // ── Estilos ──────────────────────────────────────────────────────────────────
+  const anchor: React.CSSProperties = pos
+    ? { left: pos.x, top: pos.y }
+    : { right: 24, top: 88 };
+
+  const btn = (active = false): React.CSSProperties => ({
+    border: '1px solid #dcdce4', background: active ? '#4945ff' : '#fff',
+    color: active ? '#fff' : '#32324d', borderRadius: 6, padding: '4px 8px',
+    fontSize: 12, cursor: 'pointer', whiteSpace: 'nowrap',
+  });
+
+  if (!open) {
+    return (
+      <button
+        onClick={() => setOpen(true)}
+        title={t.fab}
+        style={{
+          position: 'fixed', right: 24, bottom: 24, zIndex: 2147483000,
+          width: 56, height: 56, borderRadius: '50%', border: 'none',
+          background: '#4945ff', color: '#fff', fontSize: 24, cursor: 'pointer',
+          boxShadow: '0 4px 16px rgba(0,0,0,0.25)',
+        }}
+      >💬</button>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        position: 'fixed', ...anchor, width: W, zIndex: 2147483000,
+        display: 'flex', flexDirection: 'column',
+        maxHeight: 'calc(100vh - 110px)',
+        background: '#fff', border: '1px solid #dcdce4', borderRadius: 8,
+        boxShadow: '0 8px 30px rgba(0,0,0,0.25)', overflow: 'hidden',
+        fontFamily: 'inherit',
+      }}
+    >
+      <video ref={videoRef} autoPlay muted style={{ display: 'none' }} />
+
+      {/* Header / drag handle */}
+      <div
+        onMouseDown={onHeaderDown}
+        style={{
+          cursor: 'move', background: '#181826', color: '#fff',
+          padding: '8px 10px', display: 'flex', alignItems: 'center',
+          justifyContent: 'space-between', userSelect: 'none',
+        }}
+      >
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <strong style={{ fontSize: 13 }}>MCP Chat</strong>
+          <span style={{ fontSize: 10, opacity: 0.7 }}>
+            {sharing ? t.seeingScreen : ''}{voiceOn ? t.voiceStatus : ''}
+          </span>
+        </div>
+        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+          {/* Seletor de idioma — sempre visível no cabeçalho */}
+          <button
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={() => setLang((l) => (l === 'pt' ? 'en' : 'pt'))}
+            title={t.langTitle}
+            style={{
+              border: '1px solid #4a4a6a', background: '#2a2a45', color: '#fff',
+              borderRadius: 6, padding: '2px 8px', cursor: 'pointer', fontSize: 12, whiteSpace: 'nowrap',
+            }}
+          >
+            {lang === 'pt' ? '🌐 PT-BR' : '🌐 English'}
+          </button>
+          <button onClick={() => setOpen(false)} title={t.minimize}
+            style={{ ...btn(), padding: '2px 8px' }}>—</button>
+        </div>
+      </div>
+
+      {/* Toolbar */}
+      <div style={{ display: 'flex', gap: 6, padding: 8, borderBottom: '1px solid #eaeaef', flexWrap: 'wrap' }}>
+        <button style={btn(recording)} onClick={recording ? stopRecording : startRecording}
+          title={t.recTitle}>
+          {recording ? t.recStop : t.rec}
+        </button>
+        <button style={btn(previewOn)} onClick={onTogglePreview}
+          title={t.previewTitle}>
+          {previewOn ? t.previewOn : t.previewOff}
+        </button>
+        <button style={btn(voiceOn)} onClick={() => setVoiceOn((v) => !v)}
+          title={t.voiceTitle}>
+          {voiceOn ? t.voiceOn : t.voiceOff}
+        </button>
+        <button style={btn(sharing)} onClick={sharing ? stopShare : startShare}
+          title={t.shareTitle}>
+          {sharing ? t.shareOn : t.shareOff}
+        </button>
+      </div>
+
+      {/* Mensagens */}
+      <div ref={bodyRef} style={{ flex: 1, overflowY: 'auto', padding: 10, minHeight: 200, background: '#f6f6f9' }}>
+        {messages.length === 0 && (
+          <p style={{ color: '#8e8ea9', fontSize: 13 }}>{t.empty}</p>
+        )}
+        {messages.map((m, i) => (
+          <div key={i} style={{
+            marginBottom: 8, padding: 8, borderRadius: 6,
+            background: m.role === 'user' ? '#eaf0ff' : '#fff',
+            border: '1px solid #eaeaef',
+          }}>
+            <div style={{ fontSize: 10, fontWeight: 700, color: m.role === 'user' ? '#4945ff' : '#666687', marginBottom: 2 }}>
+              {m.role === 'user' ? t.you : t.ai}
+            </div>
+            <div style={{ fontSize: 13, whiteSpace: 'pre-wrap', color: '#32324d' }}>{m.content}</div>
+            {m.image && <img src={m.image} alt="screen" style={{ maxWidth: '100%', borderRadius: 4, marginTop: 6, border: '1px solid #ddd' }} />}
+          </div>
+        ))}
+        {loading && <p style={{ color: '#8e8ea9', fontSize: 13 }}>{t.processing}</p>}
+      </div>
+
+      {error && (
+        <div style={{ background: '#fcecea', color: '#d02b20', padding: '6px 10px', fontSize: 12 }}>{error}</div>
+      )}
+
+      {/* Input */}
+      <div style={{ display: 'flex', gap: 6, padding: 8, borderTop: '1px solid #eaeaef' }}>
+        <textarea
+          value={input}
+          placeholder={t.placeholder}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) send(); }}
+          rows={2}
+          style={{ flex: 1, resize: 'none', border: '1px solid #dcdce4', borderRadius: 6, padding: 6, fontSize: 13, fontFamily: 'inherit' }}
+        />
+        <button onClick={send} disabled={loading || !input.trim()}
+          style={{ ...btn(true), opacity: loading || !input.trim() ? 0.5 : 1, padding: '0 12px' }}>
+          {loading ? '…' : t.sendBtn}
+        </button>
+      </div>
+    </div>
+  );
+};

package/admin/src/components/PreviewPanel.tsx

@@ -0,0 +1,188 @@
+/**
+ * Painel de live preview DOCADO (side-by-side) com a UI da Strapi.
+ *
+ * Em vez de flutuar por cima, ele ENCOLHE o app do admin (#strapi) para a
+ * esquerda e ocupa toda a coluna da direita, em altura cheia. Assim o
+ * Content Manager (incluindo Salvar/Publicar) continua 100% visível e usável.
+ *
+ * O truque para encolher tudo — inclusive o menu lateral fixo da Strapi — é
+ * aplicar `transform` no #strapi: isso o torna o bloco-contêiner dos filhos
+ * `position: fixed`, então eles passam a respeitar a largura reduzida.
+ *
+ * A largura é ajustável arrastando a divisória na borda esquerda do painel.
+ */
+import { useEffect, useRef, useState } from 'react';
+
+type Props = {
+  open: boolean;
+  /** src do iframe — muda só em navegação manual ou reload. */
+  src: string;
+  /** URL exibida na barra — acompanha a navegação dentro do iframe. */
+  displayUrl: string;
+  onUrl: (v: string) => void;
+  iframeKey: number;
+  onReload: () => void;
+  onClose: () => void;
+  /** mostra um overlay de carregamento sobre o iframe (ex.: subindo o dev server). */
+  loading?: boolean;
+  loadingText?: string;
+  loadingError?: boolean;
+};
+
+const MIN_W = 320;
+const clampW = (w: number) => Math.max(MIN_W, Math.min(window.innerWidth - 360, w));
+
+export const PreviewPanel = ({ open, src, displayUrl, onUrl, iframeKey, onReload, onClose, loading, loadingText, loadingError }: Props) => {
+  const [width, setWidth] = useState(() => Math.round(window.innerWidth * 0.42));
+  const [draftUrl, setDraftUrl] = useState(displayUrl);
+  const [resizing, setResizing] = useState(false);
+  const dragging = useRef(false);
+
+  useEffect(() => setDraftUrl(displayUrl), [displayUrl]);
+
+  // Encolhe / restaura o app do admin enquanto o painel está aberto.
+  useEffect(() => {
+    const root = document.getElementById('strapi') as HTMLElement | null;
+    if (!root) return;
+    if (open) {
+      root.style.width = `calc(100vw - ${width}px)`;
+      root.style.maxWidth = `calc(100vw - ${width}px)`;
+      root.style.transform = 'translateZ(0)';
+      root.style.overflow = 'hidden';
+    } else {
+      root.style.width = '';
+      root.style.maxWidth = '';
+      root.style.transform = '';
+      root.style.overflow = '';
+    }
+    return () => {
+      root.style.width = '';
+      root.style.maxWidth = '';
+      root.style.transform = '';
+      root.style.overflow = '';
+    };
+  }, [open, width]);
+
+  // Arrastar a divisória para redimensionar.
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      if (!dragging.current) return;
+      setWidth(clampW(window.innerWidth - e.clientX));
+    };
+    const onUp = () => {
+      if (!dragging.current) return;
+      dragging.current = false;
+      setResizing(false);
+      document.body.style.userSelect = '';
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, []);
+
+  if (!open) return null;
+
+  const hdrBtn: React.CSSProperties = {
+    border: '1px solid #4a4a6a', background: '#2a2a45', color: '#fff',
+    borderRadius: 6, padding: '4px 9px', cursor: 'pointer', fontSize: 12,
+  };
+
+  return (
+    <div
+      style={{
+        position: 'fixed', top: 0, right: 0, bottom: 0, width,
+        zIndex: 2147482000, background: '#fff',
+        borderLeft: '1px solid #dcdce4', boxShadow: '-6px 0 24px rgba(0,0,0,0.14)',
+        display: 'flex', flexDirection: 'column',
+      }}
+    >
+      {/* Divisória de redimensionamento (borda esquerda) */}
+      <div
+        onMouseDown={(e) => {
+          dragging.current = true;
+          setResizing(true);
+          document.body.style.userSelect = 'none';
+          e.preventDefault();
+        }}
+        title="Arraste para ajustar a largura"
+        style={{
+          position: 'absolute', left: -4, top: 0, bottom: 0, width: 8,
+          cursor: 'col-resize', zIndex: 2,
+        }}
+      />
+
+      {/* Header */}
+      <div
+        style={{
+          display: 'flex', gap: 8, alignItems: 'center', padding: '8px 10px',
+          background: '#181826', color: '#fff', userSelect: 'none',
+        }}
+      >
+        <strong style={{ fontSize: 13, whiteSpace: 'nowrap' }}>🖼 Preview</strong>
+        <input
+          value={draftUrl}
+          onChange={(e) => setDraftUrl(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter') onUrl(draftUrl); }}
+          onBlur={() => onUrl(draftUrl)}
+          style={{
+            flex: 1, fontSize: 12, padding: '4px 8px', borderRadius: 6,
+            border: '1px solid #4a4a6a', background: '#0f0f1a', color: '#fff',
+          }}
+        />
+        <button onClick={onReload} title="Recarregar" style={hdrBtn}>↻</button>
+        <button onClick={onClose} title="Fechar" style={hdrBtn}>✕</button>
+      </div>
+
+      {/* Iframe */}
+      <div style={{ flex: 1, position: 'relative' }}>
+        <iframe
+          key={iframeKey}
+          src={src}
+          title="Live Preview do site"
+          allow="clipboard-read; clipboard-write"
+          style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
+        />
+        {/* máscara durante o resize p/ o iframe não engolir o mouse */}
+        {resizing && <div style={{ position: 'absolute', inset: 0 }} />}
+
+        {/* overlay de carregamento (subindo o dev server do frontend) */}
+        {loading && (
+          <div
+            style={{
+              position: 'absolute', inset: 0, background: '#0f0f1a',
+              color: '#fff', display: 'flex', flexDirection: 'column',
+              alignItems: 'center', justifyContent: 'center', gap: 16, padding: 24,
+            }}
+          >
+            {loadingError ? (
+              <div style={{ fontSize: 40 }}>⚠️</div>
+            ) : (
+              <>
+                <div
+                  style={{
+                    width: 40, height: 40, borderRadius: '50%',
+                    border: '4px solid #3a3a55', borderTopColor: '#7b79ff',
+                    animation: 'mcpspin 0.9s linear infinite',
+                  }}
+                />
+                <style>{'@keyframes mcpspin{to{transform:rotate(360deg)}}'}</style>
+              </>
+            )}
+            <div style={{ fontSize: 14, fontWeight: 600, textAlign: 'center' }}>
+              {loadingText || 'Iniciando o frontend…'}
+            </div>
+            {!loadingError && (
+              <div style={{ fontSize: 12, color: '#9a9ab5', textAlign: 'center', maxWidth: 360 }}>
+                Instalando dependências e subindo o dev server. Na primeira vez pode
+                levar um pouco mais.
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/admin/src/index.tsx

@@ -0,0 +1,49 @@
+import { createRoot } from 'react-dom/client';
+import { PLUGIN_ID } from './pluginId';
+import { AdminOverlays } from './components/AdminOverlays';
+
+const PluginIcon = () => (
+  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H9l-5 4V5a1 1 0 0 1 1-1Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default {
+  register(app: any) {
+    app.addMenuLink({
+      to: `plugins/${PLUGIN_ID}`,
+      icon: PluginIcon,
+      intlLabel: { id: `${PLUGIN_ID}.plugin.name`, defaultMessage: 'MCP Chat' },
+      Component: async () => {
+        const { App } = await import('./pages/App');
+        return App;
+      },
+    });
+
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      name: PLUGIN_ID,
+    });
+  },
+
+  bootstrap() {
+    // Chat flutuante GLOBAL (presente em todas as telas do admin).
+    //
+    // Nota de conformidade: as injection zones documentadas do Strapi 5 são
+    // específicas do Content Manager (ex.: editView/right-links) — não há uma
+    // zona oficial para um overlay global em todo o admin. Portanto montamos um
+    // React root próprio, de forma isolada e idempotente (guardado por id, sem
+    // tocar na árvore do admin). É o único desvio das APIs documentadas e está
+    // contido a este único ponto. `register()` acima usa só APIs oficiais
+    // (addMenuLink + registerPlugin).
+    const ID = 'mcp-chat-fab-root';
+    if (document.getElementById(ID)) return;
+    const el = document.createElement('div');
+    el.id = ID;
+    document.body.appendChild(el);
+    createRoot(el).render(<AdminOverlays />);
+  },
+};

package/admin/src/pages/App.tsx

@@ -0,0 +1,14 @@
+import { Routes, Route } from 'react-router-dom';
+import { HomePage } from './HomePage';
+import { ProvisionPage } from './ProvisionPage';
+
+const App = () => {
+  return (
+    <Routes>
+      <Route index element={<HomePage />} />
+      <Route path="provision" element={<ProvisionPage />} />
+    </Routes>
+  );
+};
+
+export { App };