mawkone
eb198e2d4d
Ships accumulated WIP that was sitting uncommitted: - New (home) dashboard route pages: overview, code, data/tables, hosting, infrastructure, services, domains, integrations, agents, analytics, api, automations, billing, logs, market, marketing(+seo/social), product, security, storage, users, settings(app/auth). - dashboard-sidebar, project-icon-rail, chat-panel updates; mcp + anatomy route changes; package.json/lock dependency bumps. - Coolify log tooling (scripts/fetch-app-logs.mjs + fetch-app-logs-ssh.mjs) and ai-new-thread.md "Fetching Production Logs" section. Excludes throwaway debug scripts and telemetry audit dumps (the latter contain live credentials and must not be committed).
384 lines
10 KiB
TypeScript
384 lines
10 KiB
TypeScript
"use client";
|
||
|
||
import { Bot, Plus, FileText, Wrench, Plug } from "lucide-react";
|
||
|
||
export default function AgentsPage() {
|
||
return (
|
||
<div
|
||
style={{
|
||
padding: "32px 48px",
|
||
fontFamily: '"Outfit", "Inter", sans-serif',
|
||
color: "#18181b",
|
||
maxWidth: 900,
|
||
}}
|
||
>
|
||
<div style={{ marginBottom: 40 }}>
|
||
<h1
|
||
style={{ fontSize: "1.5rem", fontWeight: 600, margin: "0 0 4px 0" }}
|
||
>
|
||
Agents
|
||
</h1>
|
||
<p style={{ fontSize: "0.9rem", color: "#71717a", margin: 0 }}>
|
||
Manage agents and users
|
||
</p>
|
||
</div>
|
||
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "center",
|
||
marginTop: 64,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
width: 48,
|
||
height: 48,
|
||
background: "#fafafa",
|
||
border: "1px solid #e4e4e7",
|
||
borderRadius: 12,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
marginBottom: 24,
|
||
}}
|
||
>
|
||
<Bot size={24} color="#18181b" />
|
||
</div>
|
||
<h2
|
||
style={{ fontSize: "1.25rem", fontWeight: 600, margin: "0 0 8px 0" }}
|
||
>
|
||
Create your first agent
|
||
</h2>
|
||
<p
|
||
style={{
|
||
fontSize: "0.9rem",
|
||
color: "#71717a",
|
||
textAlign: "center",
|
||
maxWidth: 480,
|
||
margin: "0 0 40px 0",
|
||
lineHeight: 1.5,
|
||
}}
|
||
>
|
||
Agents talk to your users, work with your data, and run on schedules –
|
||
all guided by clear instructions you define in your own words.
|
||
</p>
|
||
|
||
<div
|
||
style={{
|
||
width: "100%",
|
||
background: "#f4f4f5",
|
||
borderRadius: 16,
|
||
padding: "24px 32px",
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
marginBottom: 16,
|
||
}}
|
||
>
|
||
<span
|
||
style={{ fontSize: "0.85rem", fontWeight: 500, color: "#71717a" }}
|
||
>
|
||
Suggested for your app
|
||
</span>
|
||
<button
|
||
style={{
|
||
background: "none",
|
||
border: "none",
|
||
cursor: "pointer",
|
||
color: "#a1a1aa",
|
||
}}
|
||
>
|
||
<RefreshIcon />
|
||
</button>
|
||
</div>
|
||
|
||
<div
|
||
style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}
|
||
>
|
||
{/* Blurred out cards */}
|
||
<div
|
||
style={{
|
||
background: "#fff",
|
||
borderRadius: 12,
|
||
padding: 20,
|
||
height: 110,
|
||
border: "1px solid #e4e4e7",
|
||
filter: "blur(2px)",
|
||
opacity: 0.5,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
height: 12,
|
||
background: "#f4f4f5",
|
||
borderRadius: 6,
|
||
width: "60%",
|
||
marginBottom: 12,
|
||
}}
|
||
></div>
|
||
<div
|
||
style={{
|
||
height: 8,
|
||
background: "#f4f4f5",
|
||
borderRadius: 4,
|
||
width: "100%",
|
||
marginBottom: 8,
|
||
}}
|
||
></div>
|
||
<div
|
||
style={{
|
||
height: 8,
|
||
background: "#f4f4f5",
|
||
borderRadius: 4,
|
||
width: "80%",
|
||
}}
|
||
></div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
background: "#fff",
|
||
borderRadius: 12,
|
||
padding: 20,
|
||
height: 110,
|
||
border: "1px solid #e4e4e7",
|
||
filter: "blur(2px)",
|
||
opacity: 0.5,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
height: 12,
|
||
background: "#f4f4f5",
|
||
borderRadius: 6,
|
||
width: "50%",
|
||
marginBottom: 12,
|
||
}}
|
||
></div>
|
||
<div
|
||
style={{
|
||
height: 8,
|
||
background: "#f4f4f5",
|
||
borderRadius: 4,
|
||
width: "90%",
|
||
marginBottom: 8,
|
||
}}
|
||
></div>
|
||
<div
|
||
style={{
|
||
height: 8,
|
||
background: "#f4f4f5",
|
||
borderRadius: 4,
|
||
width: "70%",
|
||
}}
|
||
></div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
background: "#fff",
|
||
borderRadius: 12,
|
||
padding: 20,
|
||
height: 110,
|
||
border: "1px solid #e4e4e7",
|
||
filter: "blur(2px)",
|
||
opacity: 0.5,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
height: 12,
|
||
background: "#f4f4f5",
|
||
borderRadius: 6,
|
||
width: "70%",
|
||
marginBottom: 12,
|
||
}}
|
||
></div>
|
||
<div
|
||
style={{
|
||
height: 8,
|
||
background: "#f4f4f5",
|
||
borderRadius: 4,
|
||
width: "100%",
|
||
marginBottom: 8,
|
||
}}
|
||
></div>
|
||
<div
|
||
style={{
|
||
height: 8,
|
||
background: "#f4f4f5",
|
||
borderRadius: 4,
|
||
width: "60%",
|
||
}}
|
||
></div>
|
||
</div>
|
||
|
||
{/* Create from scratch */}
|
||
<div
|
||
style={{
|
||
background: "#fff",
|
||
borderRadius: 12,
|
||
padding: 20,
|
||
height: 110,
|
||
border: "1px solid #e4e4e7",
|
||
cursor: "pointer",
|
||
transition: "border-color 0.2s",
|
||
}}
|
||
className="hover:border-blue-500"
|
||
>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "flex-start",
|
||
marginBottom: 8,
|
||
}}
|
||
>
|
||
<span style={{ fontWeight: 600, fontSize: "0.95rem" }}>
|
||
Create from scratch
|
||
</span>
|
||
<div
|
||
style={{ background: "#f4f4f5", borderRadius: 6, padding: 4 }}
|
||
>
|
||
<Plus size={14} color="#71717a" />
|
||
</div>
|
||
</div>
|
||
<p
|
||
style={{
|
||
fontSize: "0.8rem",
|
||
color: "#71717a",
|
||
margin: 0,
|
||
lineHeight: 1.4,
|
||
}}
|
||
>
|
||
Create your own agent, defining how it works, responds, and
|
||
integrates with your data.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ width: "100%", marginTop: 48 }}>
|
||
<h3
|
||
style={{
|
||
fontSize: "0.9rem",
|
||
fontWeight: 500,
|
||
color: "#71717a",
|
||
marginBottom: 16,
|
||
}}
|
||
>
|
||
How you can use agents
|
||
</h3>
|
||
<div
|
||
style={{
|
||
display: "grid",
|
||
gridTemplateColumns: "1fr 1fr 1fr",
|
||
gap: 16,
|
||
}}
|
||
>
|
||
<div style={{ padding: "16px 0" }}>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 8,
|
||
marginBottom: 8,
|
||
}}
|
||
>
|
||
<FileText size={16} color="#18181b" />
|
||
<span style={{ fontWeight: 600, fontSize: "0.9rem" }}>
|
||
Guidelines
|
||
</span>
|
||
</div>
|
||
<p
|
||
style={{
|
||
fontSize: "0.8rem",
|
||
color: "#71717a",
|
||
lineHeight: 1.5,
|
||
margin: 0,
|
||
}}
|
||
>
|
||
Define the agent's behavior, knowledge, and AI model.
|
||
</p>
|
||
</div>
|
||
<div style={{ padding: "16px 0" }}>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 8,
|
||
marginBottom: 8,
|
||
}}
|
||
>
|
||
<Wrench size={16} color="#18181b" />
|
||
<span style={{ fontWeight: 600, fontSize: "0.9rem" }}>
|
||
Tools
|
||
</span>
|
||
</div>
|
||
<p
|
||
style={{
|
||
fontSize: "0.8rem",
|
||
color: "#71717a",
|
||
lineHeight: 1.5,
|
||
margin: 0,
|
||
}}
|
||
>
|
||
Configure what tools and data the agent can access.
|
||
</p>
|
||
</div>
|
||
<div style={{ padding: "16px 0" }}>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 8,
|
||
marginBottom: 8,
|
||
}}
|
||
>
|
||
<Plug size={16} color="#18181b" />
|
||
<span style={{ fontWeight: 600, fontSize: "0.9rem" }}>
|
||
Connectors
|
||
</span>
|
||
</div>
|
||
<p
|
||
style={{
|
||
fontSize: "0.8rem",
|
||
color: "#71717a",
|
||
lineHeight: 1.5,
|
||
margin: 0,
|
||
}}
|
||
>
|
||
Connect the agent to Gmail, Calendar & more.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function RefreshIcon() {
|
||
return (
|
||
<svg
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
>
|
||
<path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
|
||
<path d="M3 3v5h5"></path>
|
||
<path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path>
|
||
<path d="M16 21v-5h5"></path>
|
||
</svg>
|
||
);
|
||
}
|