ship: project dashboard pages + sidebar/chat overhaul + log tooling
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).
This commit is contained in:
@@ -0,0 +1,383 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user