conectese 0.1.14 → 0.2.0

package/dashboard/package-lock.json

@@ -15,10 +15,12 @@
         "zustand": "^5.0.3"
       },
       "devDependencies": {
+        "@types/busboy": "^1.5.4",
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.2",
         "@types/ws": "^8.18.1",
         "@vitejs/plugin-react": "^4.5.2",
+        "busboy": "^1.6.0",
         "chokidar": "^4.0.3",
         "typescript": "^5.8.3",
         "vite": "^6.3.5",
@@ -56,7 +58,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -1202,6 +1203,16 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/busboy": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/busboy/-/busboy-1.5.4.tgz",
+      "integrity": "sha512-kG7WrUuAKK0NoyxfQHsVE6j1m01s6kMma64E+OZenQABMQyTJop1DumUWcLwAQ2JzpefU7PDYoRDKl8uZosFjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1225,7 +1236,6 @@
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1304,7 +1314,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -1319,6 +1328,18 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dev": true,
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001774",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001774.tgz",
@@ -1594,7 +1615,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -1636,7 +1656,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1748,6 +1767,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -1823,7 +1851,6 @@
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -1927,7 +1954,6 @@
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
       "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
       "license": "ISC",
-      "peer": true,
       "bin": {
         "yaml": "bin.mjs"
       },

package/dashboard/package.json

@@ -16,10 +16,12 @@
     "zustand": "^5.0.3"
   },
   "devDependencies": {
+    "@types/busboy": "^1.5.4",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@types/ws": "^8.18.1",
     "@vitejs/plugin-react": "^4.5.2",
+    "busboy": "^1.6.0",
     "chokidar": "^4.0.3",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",

package/dashboard/src/App.tsx

@@ -1,10 +1,14 @@
-import { useSquadSocket } from "@/hooks/useSquadSocket";
-import { SquadSelector } from "@/components/SquadSelector";
+import { useTeamSocket } from "@/hooks/useTeamSocket";
+import { TeamSelector } from "@/components/TeamSelector";
 import { PhaserGame } from "@/office/PhaserGame";
 import { StatusBar } from "@/components/StatusBar";
+import { IngestionModal } from "@/components/IngestionModal";
+import { CheckpointModal } from "@/components/CheckpointModal";
+import { useState } from "react";
 
 export function App() {
-  useSquadSocket();
+  useTeamSocket();
+  const [showIngestion, setShowIngestion] = useState(false);
 
   return (
     <div
@@ -28,19 +32,59 @@ export function App() {
           fontSize: 13,
           fontWeight: 600,
           letterSpacing: 0.5,
+          justifyContent: "space-between",
         }}
       >
-        conectese Dashboard
+        <div>conectese Dashboard</div>
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+          <div style={{ 
+            display: "flex", 
+            alignItems: "center", 
+            gap: 6, 
+            background: "rgba(34, 197, 94, 0.15)", 
+            color: "rgb(34, 197, 94)", 
+            padding: "4px 8px", 
+            borderRadius: 4,
+            fontSize: 11,
+            fontWeight: 700,
+            textTransform: "uppercase"
+          }}>
+            <span style={{ fontSize: 13 }}>🛡️</span>
+            Anti-Hallucination: STRICT
+          </div>
+          <button 
+            onClick={() => setShowIngestion(true)}
+            style={{
+              padding: "4px 12px",
+              background: "var(--accent, #3b82f6)",
+              color: "white",
+              border: "none",
+              borderRadius: 4,
+              fontSize: 12,
+              fontWeight: 600,
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              gap: 6
+            }}
+          >
+            <span>📁</span> Novo Caso
+          </button>
+        </div>
       </header>
 
       {/* Main content */}
       <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
-        <SquadSelector />
+        <TeamSelector />
         <PhaserGame />
       </div>
 
       {/* Footer */}
       <StatusBar />
+
+      {/* Overlays */}
+      {showIngestion && <IngestionModal onClose={() => setShowIngestion(false)} />}
+      <CheckpointModal />
     </div>
   );
 }

package/dashboard/src/components/CheckpointModal.tsx

@@ -0,0 +1,150 @@
+import { useState, useEffect } from "react";
+import { useTeamStore } from "@/store/useTeamStore";
+
+export function CheckpointModal() {
+  const selectedTeam = useTeamStore((s) => s.selectedTeam);
+  const state = useTeamStore((s) =>
+    s.selectedTeam ? s.activeStates.get(s.selectedTeam) : undefined
+  );
+  
+  const [formData, setFormData] = useState<Record<string, string>>({});
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState("");
+
+  const isActive = state?.status === "checkpoint" && state.handoff?.missingData && state.handoff.missingData.length > 0;
+  const missingFields = state?.handoff?.missingData || [];
+
+  // Reset form when checkpoint fields change
+  useEffect(() => {
+    if (isActive) {
+      const initial: Record<string, string> = {};
+      missingFields.forEach(f => initial[f] = "");
+      setFormData(initial);
+      setError("");
+    }
+  }, [isActive, missingFields.join(",")]);
+
+  if (!isActive) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedTeam) return;
+
+    // Build payload ensuring numbers where appropriate
+    const payload: Record<string, string | number> = {};
+    for (const [key, val] of Object.entries(formData)) {
+      if (val.trim() === "") continue; // or might throw an error
+      const num = Number(val);
+      payload[key] = isNaN(num) ? val : num;
+    }
+
+    setSubmitting(true);
+    setError("");
+
+    try {
+      const res = await fetch(`/api/team/${selectedTeam}/checkpoint`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "Failed to submit checkpoint data");
+      }
+      
+      // Successfully submitted.
+      // The watcher plugin will reset the team status to "running"
+      // avoiding the need to manually close the modal.
+    } catch (err: any) {
+      setError(err.message || "Erro desconhecido ao submeter dados financeiros.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div style={{
+      position: "fixed",
+      top: 0, left: 0, right: 0, bottom: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.7)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 9999,
+      backdropFilter: "blur(2px)"
+    }}>
+      <div style={{
+        backgroundColor: "var(--bg-main, #1e1e1e)",
+        borderRadius: 8,
+        width: 400,
+        maxWidth: "90%",
+        padding: 24,
+        boxShadow: "0 10px 25px rgba(0,0,0,0.5)",
+        border: "1px solid var(--border, #333)",
+        display: "flex",
+        flexDirection: "column",
+        gap: 16
+      }}>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <h2 style={{ margin: 0, fontSize: 18, color: "var(--accent, #3b82f6)" }}>Atenção Necessária</h2>
+        </div>
+
+        <p style={{ margin: 0, fontSize: 13, color: "var(--text-muted, #ccc)" }}>
+          O agente encontrou dados faltantes (Halt & Catch protocol). 
+          Por favor, preencha os valores abaixo para que o cálculo possa continuar com segurança.
+        </p>
+
+        <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+          {missingFields.map((field) => (
+            <div key={field}>
+              <label style={{ display: "block", fontSize: 12, marginBottom: 4, fontWeight: "bold" }}>
+                {field}
+              </label>
+              <input 
+                type="text" 
+                required
+                value={formData[field] || ""}
+                onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
+                style={{
+                  width: "100%",
+                  padding: "8px 12px",
+                  borderRadius: 4,
+                  border: "1px solid var(--border, #444)",
+                  background: "var(--bg-sidebar, #121212)",
+                  color: "inherit",
+                  boxSizing: "border-box"
+                }}
+              />
+            </div>
+          ))}
+
+          {error && (
+            <div style={{ color: "#ef4444", fontSize: 13, background: "rgba(239,68,68,0.1)", padding: 8, borderRadius: 4, textAlign: "center" }}>
+              {error}
+            </div>
+          )}
+
+          <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 8 }}>
+            <button 
+              type="submit"
+              disabled={submitting}
+              style={{
+                padding: "8px 16px",
+                background: "var(--accent, #3b82f6)",
+                border: "none",
+                color: "white",
+                borderRadius: 4,
+                cursor: submitting ? "not-allowed" : "pointer",
+                opacity: submitting ? 0.6 : 1,
+                fontWeight: 500
+              }}
+            >
+              {submitting ? "Enviando..." : "Enviar e Prosseguir"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/dashboard/src/components/IngestionModal.tsx

@@ -0,0 +1,252 @@
+import { useState, useRef } from "react";
+
+interface IngestionModalProps {
+  onClose: () => void;
+}
+
+export function IngestionModal({ onClose }: IngestionModalProps) {
+  const [caseId, setCaseId] = useState("");
+  const [files, setFiles] = useState<File[]>([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      setFiles((prev) => [...prev, ...Array.from(e.dataTransfer.files)]);
+    }
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      setFiles((prev) => [...prev, ...Array.from(e.target.files!)]);
+    }
+  };
+
+  const removeFile = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleUpload = async () => {
+    if (files.length === 0) return;
+    
+    setUploading(true);
+    setStatus("idle");
+
+    const formData = new FormData();
+    // Use the provided case ID, or generate one if empty
+    const finalCaseId = caseId.trim() || `CASE_${Date.now()}`;
+    formData.append("caseId", finalCaseId);
+    
+    files.forEach((file) => {
+      formData.append("file", file);
+    });
+
+    try {
+      const res = await fetch("/api/upload", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (res.ok) {
+        setStatus("success");
+        setFiles([]);
+        setCaseId("");
+        setTimeout(() => {
+          onClose();
+        }, 2000);
+      } else {
+        setStatus("error");
+      }
+    } catch (err) {
+      console.error("Upload failed", err);
+      setStatus("error");
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <div style={{
+      position: "fixed",
+      top: 0, left: 0, right: 0, bottom: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.7)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 9999,
+      backdropFilter: "blur(2px)"
+    }}>
+      <div style={{
+        backgroundColor: "var(--bg-main, #1e1e1e)",
+        borderRadius: 8,
+        width: 500,
+        maxWidth: "90%",
+        padding: 24,
+        boxShadow: "0 10px 25px rgba(0,0,0,0.5)",
+        border: "1px solid var(--border, #333)",
+        display: "flex",
+        flexDirection: "column",
+        gap: 16
+      }}>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <h2 style={{ margin: 0, fontSize: 18 }}>Novo Caso (Ingestão)</h2>
+          <button 
+            onClick={onClose}
+            style={{ 
+              background: "transparent", 
+              border: "none", 
+              color: "inherit", 
+              cursor: "pointer",
+              fontSize: 18
+            }}
+          >
+            ✕
+          </button>
+        </div>
+
+        <p style={{ margin: 0, fontSize: 13, color: "var(--text-muted, #999)" }}>
+          Faça o upload dos arquivos iniciais para abrir um novo caso e criar a pasta segura no PROCESSOS.
+        </p>
+
+        <div>
+          <label style={{ display: "block", fontSize: 12, marginBottom: 4, fontWeight: "bold" }}>
+            ID do Caso (Opcional)
+          </label>
+          <input 
+            type="text" 
+            placeholder="Ex: 05_04_2026_0001 (Automático se vazio)"
+            value={caseId}
+            onChange={(e) => setCaseId(e.target.value)}
+            style={{
+              width: "100%",
+              padding: "8px 12px",
+              borderRadius: 4,
+              border: "1px solid var(--border, #444)",
+              background: "var(--bg-sidebar, #121212)",
+              color: "inherit",
+              boxSizing: "border-box"
+            }}
+          />
+        </div>
+
+        <div 
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          style={{
+            border: `2px dashed ${isDragging ? "var(--accent, #3b82f6)" : "var(--border, #444)"}`,
+            borderRadius: 8,
+            padding: 32,
+            textAlign: "center",
+            backgroundColor: isDragging ? "rgba(59, 130, 246, 0.1)" : "transparent",
+            cursor: "pointer",
+            transition: "all 0.2s ease"
+          }}
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <input 
+            type="file" 
+            multiple 
+            ref={fileInputRef} 
+            onChange={handleFileSelect}
+            style={{ display: "none" }} 
+          />
+          <div style={{ fontSize: 24, marginBottom: 8 }}>📄</div>
+          <div style={{ fontSize: 14, fontWeight: 500 }}>
+            {isDragging ? "Solte os arquivos aqui..." : "Arraste e solte arquivos aqui"}
+          </div>
+          <div style={{ fontSize: 12, color: "var(--text-muted, #888)", marginTop: 4 }}>
+            Ou clique para selecionar (PDFs, Docs, Imagens)
+          </div>
+        </div>
+
+        {files.length > 0 && (
+          <div style={{ maxHeight: 150, overflowY: "auto", border: "1px solid var(--border, #333)", borderRadius: 4 }}>
+            {files.map((f, i) => (
+              <div key={i} style={{ 
+                display: "flex", 
+                justifyContent: "space-between", 
+                padding: "6px 10px",
+                borderBottom: i < files.length - 1 ? "1px solid var(--border, #333)" : "none",
+                fontSize: 12,
+                alignItems: "center"
+              }}>
+                <span style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap", flex: 1 }}>
+                  {f.name}
+                </span>
+                <span style={{ color: "var(--text-muted, #888)", fontSize: 10, marginRight: 8, minWidth: 50, textAlign: "right" }}>
+                  {(f.size / 1024).toFixed(1)} KB
+                </span>
+                <button 
+                  onClick={(e) => { e.stopPropagation(); removeFile(i); }}
+                  style={{ background: "transparent", border: "none", color: "#ef4444", cursor: "pointer", padding: 4 }}
+                >
+                  ✕
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {status === "success" && (
+          <div style={{ color: "#22c55e", fontSize: 13, background: "rgba(34,197,94,0.1)", padding: 8, borderRadius: 4, textAlign: "center" }}>
+            Arquivos salvos com sucesso na área segura (PROCESSOS/)!
+          </div>
+        )}
+
+        {status === "error" && (
+          <div style={{ color: "#ef4444", fontSize: 13, background: "rgba(239,68,68,0.1)", padding: 8, borderRadius: 4, textAlign: "center" }}>
+            Erro ao fazer o upload dos arquivos. Verifique o servidor.
+          </div>
+        )}
+
+        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 8 }}>
+          <button 
+            onClick={onClose}
+            disabled={uploading}
+            style={{
+              padding: "8px 16px",
+              background: "transparent",
+              border: "1px solid var(--border, #444)",
+              color: "inherit",
+              borderRadius: 4,
+              cursor: uploading ? "not-allowed" : "pointer"
+            }}
+          >
+            Cancelar
+          </button>
+          <button 
+            onClick={handleUpload}
+            disabled={files.length === 0 || uploading}
+            style={{
+              padding: "8px 16px",
+              background: "var(--accent, #3b82f6)",
+              border: "none",
+              color: "white",
+              borderRadius: 4,
+              cursor: files.length === 0 || uploading ? "not-allowed" : "pointer",
+              opacity: files.length === 0 || uploading ? 0.6 : 1,
+              fontWeight: 500
+            }}
+          >
+            {uploading ? "Salvando..." : "Ingerir Arquivos"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dashboard/src/components/StatusBadge.tsx

@@ -1,6 +1,6 @@
-import type { SquadStatus } from "@/types/state";
+import type { TeamStatus } from "@/types/state";
 
-const STATUS_COLORS: Record<SquadStatus | "inactive", string> = {
+const STATUS_COLORS: Record<TeamStatus | "inactive", string> = {
   idle: "#888",
   running: "var(--accent-cyan)",
   completed: "var(--accent-green)",
@@ -9,7 +9,7 @@ const STATUS_COLORS: Record<SquadStatus | "inactive", string> = {
 };
 
 interface StatusBadgeProps {
-  status: SquadStatus | "inactive";
+  status: TeamStatus | "inactive";
 }
 
 export function StatusBadge({ status }: StatusBadgeProps) {

package/dashboard/src/components/StatusBar.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useState } from "react";
-import { useSquadStore } from "@/store/useSquadStore";
+import { useTeamStore } from "@/store/useTeamStore";
 import { formatElapsed } from "@/lib/formatTime";
 
 export function StatusBar() {
-  const selectedSquad = useSquadStore((s) => s.selectedSquad);
-  const state = useSquadStore((s) =>
-    s.selectedSquad ? s.activeStates.get(s.selectedSquad) : undefined
+  const selectedTeam = useTeamStore((s) => s.selectedTeam);
+  const state = useTeamStore((s) =>
+    s.selectedTeam ? s.activeStates.get(s.selectedTeam) : undefined
   );
-  const isConnected = useSquadStore((s) => s.isConnected);
+  const isConnected = useTeamStore((s) => s.isConnected);
 
   // Elapsed timer
   const [elapsed, setElapsed] = useState(0);
@@ -25,11 +25,11 @@ export function StatusBar() {
     return () => clearInterval(interval);
   }, [state?.startedAt]);
 
-  if (!selectedSquad || !state) {
+  if (!selectedTeam || !state) {
     return (
       <footer style={footerStyle}>
         <span style={{ color: "var(--text-secondary)" }}>
-          Select an active squad to monitor
+          Select an active team to monitor
         </span>
         <ConnectionDot connected={isConnected} />
       </footer>