mirror of
https://github.com/domfelipe/mika-agent-assist.git
synced 2026-08-07 13:56:51 +00:00
721 lines
26 KiB
TypeScript
721 lines
26 KiB
TypeScript
"use client";
|
|
|
|
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { toast } from "sonner";
|
|
import {
|
|
ArrowLeft,
|
|
ExternalLink,
|
|
Loader2,
|
|
Rocket,
|
|
Save,
|
|
ShieldAlert,
|
|
Sparkles,
|
|
} from "lucide-react";
|
|
import { supabase } from "@/integrations/supabase/client";
|
|
import { useAuth } from "@/hooks/use-auth";
|
|
import { invokeFunction } from "@/lib/invoke-function";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
|
|
export const Route = createFileRoute("/admin/agente/$id")({
|
|
component: AgentDetailPage,
|
|
});
|
|
|
|
const MODEL_OPTIONS = [
|
|
{
|
|
value: "openrouter/google/gemma-4-27b-a4b-it",
|
|
label: "Gemma 4 27B — Rápido e gratuito (Basic/Starter)",
|
|
plans: ["basic", "starter"],
|
|
},
|
|
{
|
|
value: "openrouter/google/gemma-4-31b-it",
|
|
label: "Gemma 4 31B — Mais capaz (Professional)",
|
|
plans: ["professional", "enterprise"],
|
|
},
|
|
];
|
|
|
|
interface AgentDetail {
|
|
id: string;
|
|
user_id: string;
|
|
uuid_tenant: string;
|
|
status: string;
|
|
telegram_bot_username: string | null;
|
|
telegram_user_chat_id: number | null;
|
|
railway_service_id: string | null;
|
|
vps_pool_id: string | null;
|
|
provisioned_at: string | null;
|
|
created_at: string;
|
|
model_config: Record<string, unknown> | null;
|
|
agent_name: string | null;
|
|
vps_pool: {
|
|
railway_project_id: string | null;
|
|
railway_environment_id: string | null;
|
|
} | null;
|
|
profile: {
|
|
full_name: string | null;
|
|
phone: string | null;
|
|
onboarding_completed: boolean;
|
|
} | null;
|
|
user_email: string | null;
|
|
subscription: { plans: { slug: string; name: string } | null } | null;
|
|
}
|
|
|
|
function AgentDetailPage() {
|
|
const { id } = Route.useParams();
|
|
const { user, loading: authLoading } = useAuth();
|
|
const navigate = useNavigate();
|
|
const queryClient = useQueryClient();
|
|
|
|
const { data: isAdmin, isLoading: roleLoading } = useQuery({
|
|
queryKey: ["is-admin", user?.id],
|
|
enabled: !authLoading && !!user,
|
|
queryFn: async () => {
|
|
const { data, error } = await supabase.rpc("has_role", {
|
|
_user_id: user!.id,
|
|
_role: "admin",
|
|
});
|
|
if (error) throw error;
|
|
return data === true;
|
|
},
|
|
});
|
|
|
|
const { data: agent, isLoading: agentLoading, error: agentError } = useQuery({
|
|
queryKey: ["agent-detail", id],
|
|
enabled: !authLoading && !!user && isAdmin === true,
|
|
refetchInterval: 10_000,
|
|
queryFn: async () => {
|
|
console.log("[admin.agente] fetching agent detail", { id });
|
|
const { data, error } = await supabase
|
|
.from("agent_instances")
|
|
.select(
|
|
"id, user_id, uuid_tenant, status, telegram_bot_username, telegram_user_chat_id, railway_service_id, vps_pool_id, provisioned_at, created_at, model_config, agent_name",
|
|
)
|
|
.eq("id", id)
|
|
.maybeSingle();
|
|
if (error) {
|
|
console.error("[admin.agente] agent query error", error);
|
|
throw error;
|
|
}
|
|
if (!data) {
|
|
console.warn("[admin.agente] agent not found", { id });
|
|
return null;
|
|
}
|
|
|
|
// Buscar profile separadamente (evita join com possíveis problemas de FK)
|
|
const { data: profileData } = await supabase
|
|
.from("profiles")
|
|
.select("full_name, phone, onboarding_completed")
|
|
.eq("id", data.user_id)
|
|
.maybeSingle();
|
|
|
|
// Buscar vps_pool separadamente se houver
|
|
let vpsPool: { railway_project_id: string | null; railway_environment_id: string | null } | null = null;
|
|
if (data.vps_pool_id) {
|
|
const { data: poolData } = await supabase
|
|
.from("vps_pool")
|
|
.select("railway_project_id, railway_environment_id")
|
|
.eq("id", data.vps_pool_id)
|
|
.maybeSingle();
|
|
vpsPool = poolData ?? null;
|
|
}
|
|
|
|
const { data: subscriptionData, error: subscriptionError } = await supabase
|
|
.from("subscriptions")
|
|
.select("status, plans(slug, name)")
|
|
.eq("user_id", data.user_id)
|
|
.order("created_at", { ascending: false })
|
|
.limit(1)
|
|
.maybeSingle();
|
|
if (subscriptionError) throw subscriptionError;
|
|
|
|
const subscription = subscriptionData
|
|
? {
|
|
...subscriptionData,
|
|
plans: Array.isArray(subscriptionData.plans)
|
|
? subscriptionData.plans[0] ?? null
|
|
: subscriptionData.plans,
|
|
}
|
|
: null;
|
|
|
|
const result = {
|
|
...data,
|
|
vps_pool: vpsPool,
|
|
profile: profileData ?? null,
|
|
subscription,
|
|
user_email: null as string | null,
|
|
} as AgentDetail;
|
|
console.log("[admin.agente] agent loaded", { id: result.id, status: result.status });
|
|
return result;
|
|
},
|
|
});
|
|
|
|
const { data: jobs } = useQuery({
|
|
queryKey: ["provisioning-jobs", id],
|
|
enabled: !!isAdmin,
|
|
refetchInterval: 10_000,
|
|
queryFn: async () => {
|
|
const { data, error } = await supabase
|
|
.from("provisioning_jobs")
|
|
.select("id, status, created_at, error_message, attempt")
|
|
.eq("agent_instance_id", id)
|
|
.order("created_at", { ascending: false })
|
|
.limit(5);
|
|
if (error) throw error;
|
|
return data;
|
|
},
|
|
});
|
|
|
|
// Backfill: se o agente não tem telegram_user_chat_id mas já recebeu mensagens,
|
|
// pega a primeira mensagem incoming e popula automaticamente.
|
|
useEffect(() => {
|
|
if (!agent || !isAdmin) return;
|
|
if (agent.telegram_user_chat_id) return;
|
|
let cancelled = false;
|
|
(async () => {
|
|
const { data: msg } = await supabase
|
|
.from("telegram_messages_log")
|
|
.select("telegram_chat_id")
|
|
.eq("agent_instance_id", id)
|
|
.eq("direction", "incoming")
|
|
.order("created_at", { ascending: true })
|
|
.limit(1)
|
|
.maybeSingle();
|
|
if (cancelled || !msg?.telegram_chat_id) return;
|
|
const { error: updErr } = await supabase
|
|
.from("agent_instances")
|
|
.update({ telegram_user_chat_id: msg.telegram_chat_id })
|
|
.eq("id", id);
|
|
if (!updErr) {
|
|
queryClient.invalidateQueries({ queryKey: ["agent-detail", id] });
|
|
}
|
|
})();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [agent, isAdmin, id, queryClient]);
|
|
|
|
// ===== Estado do formulário =====
|
|
const fullName = agent?.profile?.full_name?.trim() || "Usuário";
|
|
const firstName = fullName.split(" ")[0] || "Usuário";
|
|
const planSlug = agent?.subscription?.plans?.slug ?? "basic";
|
|
const isPro = ["professional", "enterprise"].includes(planSlug);
|
|
const defaultModel = isPro
|
|
? "openrouter/google/gemma-4-31b-it"
|
|
: "openrouter/google/gemma-4-27b-a4b-it";
|
|
|
|
const cfg = (agent?.model_config ?? {}) as Record<string, string | undefined>;
|
|
const defaultAgentName = agent?.agent_name?.trim() || cfg.agent_name || `Mika de ${firstName}`;
|
|
const defaultSoul = useMemo(
|
|
() =>
|
|
`Você se chama ${defaultAgentName}. Você é um assistente pessoal de IA criado pela DOMCO para ${fullName}. Você é proativo, direto e fala sempre em português brasileiro. Você ajuda ${firstName} a ser mais produtivo — gerenciando emails, agenda, tarefas e automatizando o que puder. Seja conciso nas respostas via Telegram. Nunca se identifique como Hermes ou como produto da Nous Research — você é Mika.`,
|
|
[defaultAgentName, fullName, firstName],
|
|
);
|
|
|
|
const [agentName, setAgentName] = useState("");
|
|
const [soul, setSoul] = useState("");
|
|
const [model, setModel] = useState("");
|
|
const [stt, setStt] = useState("local");
|
|
const [tts, setTts] = useState("disabled");
|
|
const [busy, setBusy] = useState(false);
|
|
const [initialized, setInitialized] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!agent || initialized) return;
|
|
setAgentName(defaultAgentName);
|
|
setSoul(defaultSoul);
|
|
setModel(cfg.provider || defaultModel);
|
|
setStt(cfg.stt || "local");
|
|
setTts(cfg.tts || "disabled");
|
|
setInitialized(true);
|
|
}, [agent, initialized, defaultAgentName, defaultSoul, cfg.provider, cfg.stt, cfg.tts, defaultModel]);
|
|
|
|
// ===== Auth guard =====
|
|
useEffect(() => {
|
|
if (!authLoading && !user) {
|
|
navigate({ to: "/login", search: { redirect: `/admin/agente/${id}` } });
|
|
}
|
|
}, [authLoading, user, navigate, id]);
|
|
|
|
useEffect(() => {
|
|
if (!roleLoading && isAdmin === false) {
|
|
navigate({ to: "/painel" });
|
|
}
|
|
}, [roleLoading, isAdmin, navigate]);
|
|
|
|
console.log("[admin.agente] render", {
|
|
id, authLoading, roleLoading, agentLoading,
|
|
isAdmin, hasUser: !!user, hasAgent: !!agent, agentError,
|
|
});
|
|
|
|
if (authLoading || (user && roleLoading) || (isAdmin === true && agentLoading)) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-background">
|
|
<Loader2 className="h-6 w-6 animate-spin text-primary" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
if (isAdmin === false) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-background px-4">
|
|
<div className="max-w-md text-center space-y-4">
|
|
<div className="mx-auto h-16 w-16 rounded-full bg-destructive/10 flex items-center justify-center">
|
|
<ShieldAlert className="h-8 w-8 text-destructive" />
|
|
</div>
|
|
<h1 className="text-2xl font-bold">Acesso negado</h1>
|
|
<Button asChild variant="outline">
|
|
<Link to="/painel">
|
|
<ArrowLeft className="h-4 w-4 mr-2" /> Voltar ao painel
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (agentError) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-background px-4">
|
|
<div className="max-w-md text-center space-y-4">
|
|
<h1 className="text-2xl font-bold">Erro ao carregar agente</h1>
|
|
<p className="text-sm text-muted-foreground">{agentError.message}</p>
|
|
<Button asChild variant="outline">
|
|
<Link to="/admin">
|
|
<ArrowLeft className="h-4 w-4 mr-2" /> Voltar ao admin
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!agent) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-background px-4">
|
|
<div className="max-w-md text-center space-y-4">
|
|
<h1 className="text-2xl font-bold">Agente não encontrado</h1>
|
|
<Button asChild variant="outline">
|
|
<Link to="/admin">
|
|
<ArrowLeft className="h-4 w-4 mr-2" /> Voltar ao admin
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const needsProvision = !agent.railway_service_id && agent.status !== "active";
|
|
|
|
async function handleProvision() {
|
|
if (soul.length < 100) {
|
|
toast.error("A personalidade precisa ter pelo menos 100 caracteres.");
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
const { data, error } = await invokeFunction<{ success?: boolean; error?: string }>(
|
|
"provision-agent",
|
|
{
|
|
agent_instance_id: id,
|
|
agent_name: agentName,
|
|
soul_content: soul,
|
|
model,
|
|
stt_provider: stt,
|
|
tts_provider: tts,
|
|
},
|
|
);
|
|
setBusy(false);
|
|
if (error || data?.error) {
|
|
toast.error(`Falha ao provisionar: ${error?.message || data?.error}`);
|
|
return;
|
|
}
|
|
toast.success("Agente provisionado com sucesso! O cliente será notificado.");
|
|
queryClient.invalidateQueries({ queryKey: ["agent-detail", id] });
|
|
queryClient.invalidateQueries({ queryKey: ["agents-admin"] });
|
|
queryClient.invalidateQueries({ queryKey: ["provisioning-jobs", id] });
|
|
}
|
|
|
|
async function handleUpdate() {
|
|
if (soul.length < 100) {
|
|
toast.error("A personalidade precisa ter pelo menos 100 caracteres.");
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
const { data, error } = await invokeFunction<{ success?: boolean; error?: string }>(
|
|
"update-agent-config",
|
|
{
|
|
agent_instance_id: id,
|
|
agent_name: agentName,
|
|
soul_content: soul,
|
|
model,
|
|
stt_provider: stt,
|
|
tts_provider: tts,
|
|
},
|
|
);
|
|
setBusy(false);
|
|
if (error || data?.error) {
|
|
toast.error(`Falha ao atualizar: ${error?.message || data?.error}`);
|
|
return;
|
|
}
|
|
toast.success("Configuração atualizada! Redeploy disparado no Railway.");
|
|
queryClient.invalidateQueries({ queryKey: ["agent-detail", id] });
|
|
queryClient.invalidateQueries({ queryKey: ["agents-admin"] });
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background px-4 sm:px-8 py-8">
|
|
<div className="mx-auto max-w-7xl space-y-6">
|
|
<header className="flex items-start justify-between gap-4 flex-wrap">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
|
|
<Sparkles className="h-7 w-7 text-primary" /> Configurar agente
|
|
</h1>
|
|
<p className="mt-1 text-sm text-muted-foreground font-mono">
|
|
{agent.uuid_tenant.slice(0, 8)} · {agent.profile?.full_name || "Sem nome"}
|
|
</p>
|
|
</div>
|
|
<Button asChild variant="outline" size="sm">
|
|
<Link to="/admin">
|
|
<ArrowLeft className="h-4 w-4 mr-2" /> Voltar ao admin
|
|
</Link>
|
|
</Button>
|
|
</header>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-[1fr_380px] gap-6">
|
|
{/* ===== Coluna esquerda — Formulário ===== */}
|
|
<div className="space-y-6">
|
|
{/* Cliente */}
|
|
<section className="rounded-xl border border-border bg-card p-6 shadow-soft space-y-3">
|
|
<h2 className="font-semibold text-lg">Informações do cliente</h2>
|
|
<dl className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
|
|
<Field label="Nome" value={agent.profile?.full_name || "—"} />
|
|
<Field
|
|
label="Nome do agente (escolhido pelo cliente)"
|
|
value={agent.agent_name || "—"}
|
|
/>
|
|
<Field label="Email" value={agent.user_email || "—"} />
|
|
<Field label="Telefone" value={agent.profile?.phone || "—"} />
|
|
<div>
|
|
<dt className="text-xs uppercase tracking-wide text-muted-foreground mb-1">Plano</dt>
|
|
<dd>
|
|
<PlanBadge slug={agent.subscription?.plans?.slug ?? null} />
|
|
</dd>
|
|
</div>
|
|
<Field
|
|
label="Cadastro"
|
|
value={new Date(agent.created_at).toLocaleDateString("pt-BR")}
|
|
/>
|
|
<div>
|
|
<dt className="text-xs uppercase tracking-wide text-muted-foreground mb-1">Bot Telegram</dt>
|
|
<dd>
|
|
{agent.telegram_bot_username ? (
|
|
<a
|
|
href={`https://t.me/${agent.telegram_bot_username}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary hover:underline inline-flex items-center gap-1 font-mono text-sm"
|
|
>
|
|
@{agent.telegram_bot_username}
|
|
<ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
) : (
|
|
<span className="text-muted-foreground text-sm">Não conectado</span>
|
|
)}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</section>
|
|
|
|
{/* Configuração */}
|
|
<section className="rounded-xl border border-border bg-card p-6 shadow-soft space-y-4">
|
|
<h2 className="font-semibold text-lg">Configuração do agente</h2>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="agent-name">Nome do agente</Label>
|
|
<Input
|
|
id="agent-name"
|
|
value={agentName}
|
|
onChange={(e) => setAgentName(e.target.value.slice(0, 50))}
|
|
maxLength={50}
|
|
placeholder={`Mika de ${firstName}`}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">{agentName.length}/50</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="soul">Personalidade (SOUL.md)</Label>
|
|
<Textarea
|
|
id="soul"
|
|
value={soul}
|
|
onChange={(e) => setSoul(e.target.value)}
|
|
rows={10}
|
|
className="font-mono text-sm"
|
|
/>
|
|
<p className={`text-xs ${soul.length < 100 ? "text-destructive" : "text-muted-foreground"}`}>
|
|
{soul.length} caracteres (mínimo 100)
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="model">Modelo de IA</Label>
|
|
<Select value={model} onValueChange={setModel}>
|
|
<SelectTrigger id="model">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{MODEL_OPTIONS.map((m) => (
|
|
<SelectItem key={m.value} value={m.value}>
|
|
{m.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="stt">STT (transcrição de áudio)</Label>
|
|
<Select value={stt} onValueChange={setStt}>
|
|
<SelectTrigger id="stt">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="local">Local — Gratuito (faster-whisper)</SelectItem>
|
|
<SelectItem value="disabled">Desativado</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="tts">TTS (resposta em áudio)</Label>
|
|
<Select value={tts} onValueChange={setTts}>
|
|
<SelectTrigger id="tts">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="disabled">Desativado</SelectItem>
|
|
<SelectItem value="edge">Edge TTS — Gratuito</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Ações */}
|
|
<section className="rounded-xl border border-border bg-card p-6 shadow-soft space-y-3">
|
|
<h2 className="font-semibold text-lg">Ações</h2>
|
|
{needsProvision ? (
|
|
<Button
|
|
size="lg"
|
|
className="w-full"
|
|
disabled={busy}
|
|
onClick={handleProvision}
|
|
>
|
|
{busy ? (
|
|
<Loader2 className="h-5 w-5 mr-2 animate-spin" />
|
|
) : (
|
|
<Rocket className="h-5 w-5 mr-2" />
|
|
)}
|
|
Provisionar agente
|
|
</Button>
|
|
) : (
|
|
<Button size="lg" className="w-full" disabled={busy} onClick={handleUpdate}>
|
|
{busy ? (
|
|
<Loader2 className="h-5 w-5 mr-2 animate-spin" />
|
|
) : (
|
|
<Save className="h-5 w-5 mr-2" />
|
|
)}
|
|
Salvar e atualizar agente
|
|
</Button>
|
|
)}
|
|
<Button asChild variant="outline" size="sm" className="w-full">
|
|
<Link to="/admin">
|
|
<ArrowLeft className="h-4 w-4 mr-2" /> Voltar ao admin
|
|
</Link>
|
|
</Button>
|
|
</section>
|
|
</div>
|
|
|
|
{/* ===== Coluna direita — Status ===== */}
|
|
<aside className="space-y-4">
|
|
<StatusCard agent={agent} />
|
|
<TelegramCard agent={agent} />
|
|
<RailwayCard agent={agent} />
|
|
<HistoryCard jobs={jobs ?? []} />
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ============== Subcomponents ==============
|
|
|
|
function Field({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div>
|
|
<dt className="text-xs uppercase tracking-wide text-muted-foreground mb-1">{label}</dt>
|
|
<dd className="text-sm break-words">{value}</dd>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatusBadge({ status }: { status: string }) {
|
|
if (status === "active") return <Badge variant="success">Ativo</Badge>;
|
|
if (status === "provisioning") return <Badge variant="secondary">Provisionando</Badge>;
|
|
if (status === "suspended") return <Badge variant="destructive">Suspenso</Badge>;
|
|
if (status === "error") return <Badge variant="destructive">Erro</Badge>;
|
|
return <Badge variant="secondary">{status}</Badge>;
|
|
}
|
|
|
|
function PlanBadge({ slug }: { slug: string | null }) {
|
|
if (!slug) return <Badge variant="outline">Sem plano</Badge>;
|
|
if (slug === "professional" || slug === "enterprise")
|
|
return <Badge variant="success" className="capitalize">{slug}</Badge>;
|
|
if (slug === "starter") return <Badge variant="secondary" className="capitalize">{slug}</Badge>;
|
|
return <Badge variant="outline" className="capitalize">{slug}</Badge>;
|
|
}
|
|
|
|
function StatusCard({ agent }: { agent: AgentDetail }) {
|
|
return (
|
|
<div className="rounded-xl border border-border bg-card p-5 shadow-soft space-y-2">
|
|
<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Status</h3>
|
|
<StatusBadge status={agent.status} />
|
|
<p className="text-xs text-muted-foreground">
|
|
Atualiza automaticamente a cada 10s
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TelegramCard({ agent }: { agent: AgentDetail }) {
|
|
return (
|
|
<div className="rounded-xl border border-border bg-card p-5 shadow-soft space-y-3">
|
|
<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Telegram</h3>
|
|
<div className="space-y-1 text-sm">
|
|
<p>
|
|
<span className="text-muted-foreground">Bot:</span>{" "}
|
|
<span className="font-mono">@{agent.telegram_bot_username || "—"}</span>
|
|
</p>
|
|
{agent.telegram_user_chat_id && (
|
|
<p>
|
|
<span className="text-muted-foreground">Chat ID:</span>{" "}
|
|
<span className="font-mono">{agent.telegram_user_chat_id}</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
{agent.telegram_bot_username && (
|
|
<Button asChild variant="outline" size="sm" className="w-full">
|
|
<a
|
|
href={`https://t.me/${agent.telegram_bot_username}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Testar bot <ExternalLink className="h-3.5 w-3.5 ml-1.5" />
|
|
</a>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function RailwayCard({ agent }: { agent: AgentDetail }) {
|
|
const projectId = agent.vps_pool?.railway_project_id;
|
|
const serviceId = agent.railway_service_id;
|
|
return (
|
|
<div className="rounded-xl border border-border bg-card p-5 shadow-soft space-y-3">
|
|
<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Railway</h3>
|
|
{serviceId ? (
|
|
<>
|
|
<p className="text-sm">
|
|
<span className="text-muted-foreground">Service ID:</span>{" "}
|
|
<span className="font-mono">{serviceId.slice(0, 8)}…</span>
|
|
</p>
|
|
{agent.provisioned_at && (
|
|
<p className="text-sm">
|
|
<span className="text-muted-foreground">Último deploy:</span>{" "}
|
|
{new Date(agent.provisioned_at).toLocaleString("pt-BR")}
|
|
</p>
|
|
)}
|
|
{projectId && (
|
|
<Button asChild variant="outline" size="sm" className="w-full">
|
|
<a
|
|
href={`https://railway.com/project/${projectId}/service/${serviceId}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Abrir no Railway <ExternalLink className="h-3.5 w-3.5 ml-1.5" />
|
|
</a>
|
|
</Button>
|
|
)}
|
|
</>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">Não provisionado</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function HistoryCard({
|
|
jobs,
|
|
}: {
|
|
jobs: Array<{ id: string; status: string; created_at: string; error_message: string | null; attempt: number }>;
|
|
}) {
|
|
return (
|
|
<div className="rounded-xl border border-border bg-card p-5 shadow-soft space-y-3">
|
|
<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Histórico</h3>
|
|
{jobs.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">Sem jobs ainda</p>
|
|
) : (
|
|
<ul className="space-y-2">
|
|
{jobs.map((j) => (
|
|
<li key={j.id} className="text-xs space-y-0.5 border-l-2 border-border pl-2">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<Badge
|
|
variant={
|
|
j.status === "completed"
|
|
? "success"
|
|
: j.status === "failed"
|
|
? "destructive"
|
|
: "secondary"
|
|
}
|
|
className="text-[10px]"
|
|
>
|
|
{j.status}
|
|
</Badge>
|
|
<span className="text-muted-foreground">
|
|
{new Date(j.created_at).toLocaleString("pt-BR", {
|
|
day: "2-digit",
|
|
month: "2-digit",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</span>
|
|
</div>
|
|
{j.error_message && (
|
|
<p className="text-destructive truncate" title={j.error_message}>
|
|
{j.error_message}
|
|
</p>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|