jackmechem/server-dash
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dev console

Browse source
This commit is contained in:
Jack Mechem 2026-05-21 19:18:44 -07:00
parent 876da0c384
commit 0d75cb5913
1 changed files with 54 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

105
app/components/DevConsole.tsx
View file

@ -32,12 +32,12 @@ function tryPretty(text: string): string {
function methodBg(method: string): string { function methodBg(method: string): string {
switch (method) { switch (method) {
case "GET": return "#1d4ed8"; case "GET": return "#2563eb";
case "POST": return "#15803d"; case "POST": return "#16a34a";
case "PUT": return "#b45309"; case "PUT": return "#d97706";
case "PATCH": return "#6d28d9"; case "PATCH": return "#7c3aed";
case "DELETE": return "#b91c1c"; case "DELETE": return "#dc2626";
default: return "#475569"; default: return "#6b7280";
} }
} }
@ -124,8 +124,9 @@ export default function DevConsole({
zIndex: 50, zIndex: 50,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
background: "#0f172a", background: "#ffffff",
borderLeft: "1px solid #1e293b", borderLeft: "1px solid #e5e7eb",
boxShadow: "-4px 0 24px rgba(0,0,0,0.06)",
transform: open ? "translateX(0)" : "translateX(100%)", transform: open ? "translateX(0)" : "translateX(100%)",
transition: "transform 280ms cubic-bezier(0.4,0,0.2,1)", transition: "transform 280ms cubic-bezier(0.4,0,0.2,1)",
}} }}
@ -157,16 +158,17 @@ export default function DevConsole({
alignItems: "center", alignItems: "center",
gap: "8px", gap: "8px",
padding: "10px 14px", padding: "10px 14px",
borderBottom: "1px solid #1e293b", borderBottom: "1px solid #e5e7eb",
flexShrink: 0, flexShrink: 0,
background: "#ffffff",
}}> }}>
<LuTerminal size={13} style={{ color: "#475569" }} /> <LuTerminal size={13} style={{ color: "#9ca3af" }} />
<span style={{ <span style={{
fontSize: "0.65rem", fontSize: "0.65rem",
fontWeight: 700, fontWeight: 700,
letterSpacing: "0.1em", letterSpacing: "0.1em",
textTransform: "uppercase", textTransform: "uppercase",
color: "#475569", color: "#9ca3af",
}}> }}>
Dev Console Dev Console
</span> </span>
@ -180,11 +182,11 @@ export default function DevConsole({
fontSize: "0.68rem", fontSize: "0.68rem",
fontWeight: 500, fontWeight: 500,
padding: "3px 9px", padding: "3px 9px",
borderRadius: "4px", borderRadius: "6px",
border: "none", border: "none",
cursor: "pointer", cursor: "pointer",
background: activeTab === tab ? "#1e293b" : "transparent", background: activeTab === tab ? "#f3f4f6" : "transparent",
color: activeTab === tab ? "#e2e8f0" : "#475569", color: activeTab === tab ? "#111827" : "#9ca3af",
textTransform: "capitalize", textTransform: "capitalize",
}} }}
> >
@ -198,7 +200,7 @@ export default function DevConsole({
background: "transparent", background: "transparent",
border: "none", border: "none",
cursor: "pointer", cursor: "pointer",
color: "#475569", color: "#9ca3af",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
padding: "2px", padding: "2px",
@ -213,7 +215,7 @@ export default function DevConsole({
{activeTab === "logs" && ( {activeTab === "logs" && (
<div style={{ flex: 1, overflowY: "auto", fontFamily: "ui-monospace, 'Cascadia Code', monospace" }}> <div style={{ flex: 1, overflowY: "auto", fontFamily: "ui-monospace, 'Cascadia Code', monospace" }}>
{logs.length === 0 ? ( {logs.length === 0 ? (
<div style={{ padding: "32px 16px", textAlign: "center", color: "#1e293b", fontSize: "0.75rem" }}> <div style={{ padding: "32px 16px", textAlign: "center", color: "#d1d5db", fontSize: "0.75rem" }}>
No requests captured yet No requests captured yet
</div> </div>
) : ( ) : (
@ -232,16 +234,16 @@ export default function DevConsole({
{/* Request tab */} {/* Request tab */}
{activeTab === "request" && ( {activeTab === "request" && (
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}> <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
<div style={{ padding: "12px", borderBottom: "1px solid #1e293b", flexShrink: 0 }}> <div style={{ padding: "12px", borderBottom: "1px solid #e5e7eb", flexShrink: 0 }}>
<div style={{ display: "flex", gap: "6px", marginBottom: "8px" }}> <div style={{ display: "flex", gap: "6px", marginBottom: "8px" }}>
<select <select
value={reqMethod} value={reqMethod}
onChange={(e) => setReqMethod(e.target.value)} onChange={(e) => setReqMethod(e.target.value)}
style={{ style={{
background: "#1e293b", background: "#f9fafb",
border: "1px solid #334155", border: "1px solid #e5e7eb",
borderRadius: "6px", borderRadius: "8px",
color: "#e2e8f0", color: "#111827",
fontSize: "0.68rem", fontSize: "0.68rem",
padding: "5px 6px", padding: "5px 6px",
cursor: "pointer", cursor: "pointer",
@ -260,10 +262,10 @@ export default function DevConsole({
placeholder="/api/power" placeholder="/api/power"
style={{ style={{
flex: 1, flex: 1,
background: "#1e293b", background: "#f9fafb",
border: "1px solid #334155", border: "1px solid #e5e7eb",
borderRadius: "6px", borderRadius: "8px",
color: "#e2e8f0", color: "#111827",
fontSize: "0.68rem", fontSize: "0.68rem",
padding: "5px 8px", padding: "5px 8px",
fontFamily: "ui-monospace, monospace", fontFamily: "ui-monospace, monospace",
@ -277,7 +279,7 @@ export default function DevConsole({
style={{ style={{
background: "#2563eb", background: "#2563eb",
border: "none", border: "none",
borderRadius: "6px", borderRadius: "8px",
color: "white", color: "white",
padding: "5px 11px", padding: "5px 11px",
cursor: reqLoading ? "default" : "pointer", cursor: reqLoading ? "default" : "pointer",
@ -303,10 +305,10 @@ export default function DevConsole({
rows={4} rows={4}
style={{ style={{
width: "100%", width: "100%",
background: "#1e293b", background: "#f9fafb",
border: "1px solid #334155", border: "1px solid #e5e7eb",
borderRadius: "6px", borderRadius: "8px",
color: "#e2e8f0", color: "#111827",
fontSize: "0.68rem", fontSize: "0.68rem",
padding: "6px 8px", padding: "6px 8px",
fontFamily: "ui-monospace, monospace", fontFamily: "ui-monospace, monospace",
@ -318,11 +320,11 @@ export default function DevConsole({
/> />
)} )}
<div style={{ fontSize: "0.6rem", color: "#334155" }}> <div style={{ fontSize: "0.6rem", color: "#d1d5db" }}>
Bearer token attached via cookie ·{" "} Bearer token attached via cookie ·{" "}
<span style={{ color: "#3b4a5e" }}>use</span>{" "} <span style={{ color: "#9ca3af" }}>use</span>{" "}
<code style={{ color: "#475569" }}>http://localhost:3001/path</code>{" "} <code style={{ color: "#6b7280" }}>http://localhost:3001/path</code>{" "}
<span style={{ color: "#3b4a5e" }}>to bypass Next.js proxy</span> <span style={{ color: "#9ca3af" }}>to bypass Next.js proxy</span>
</div> </div>
</div> </div>
@ -331,9 +333,10 @@ export default function DevConsole({
overflow: "auto", overflow: "auto",
padding: "12px", padding: "12px",
fontFamily: "ui-monospace, 'Cascadia Code', monospace", fontFamily: "ui-monospace, 'Cascadia Code', monospace",
background: "#f9fafb",
}}> }}>
{reqLoading && ( {reqLoading && (
<div style={{ fontSize: "0.7rem", color: "#475569" }}>Sending…</div> <div style={{ fontSize: "0.7rem", color: "#9ca3af" }}>Sending…</div>
)} )}
{!reqLoading && reqResponse && ( {!reqLoading && reqResponse && (
<> <>
@ -341,13 +344,13 @@ export default function DevConsole({
fontSize: "0.65rem", fontSize: "0.65rem",
fontWeight: 600, fontWeight: 600,
marginBottom: "8px", marginBottom: "8px",
color: reqResponse.status >= 200 && reqResponse.status < 300 ? "#34d399" : "#f87171", color: reqResponse.status >= 200 && reqResponse.status < 300 ? "#16a34a" : "#dc2626",
}}> }}>
HTTP {reqResponse.status} HTTP {reqResponse.status}
</div> </div>
<pre style={{ <pre style={{
fontSize: "0.65rem", fontSize: "0.65rem",
color: "#94a3b8", color: "#6b7280",
margin: 0, margin: 0,
whiteSpace: "pre-wrap", whiteSpace: "pre-wrap",
wordBreak: "break-all", wordBreak: "break-all",
@ -358,7 +361,7 @@ export default function DevConsole({
</> </>
)} )}
{!reqLoading && !reqResponse && ( {!reqLoading && !reqResponse && (
<div style={{ fontSize: "0.7rem", color: "#1e293b" }}> <div style={{ fontSize: "0.7rem", color: "#d1d5db" }}>
Response will appear here Response will appear here
</div> </div>
)} )}
@ -381,13 +384,13 @@ function LogRow({
const [hovered, setHovered] = useState(false); const [hovered, setHovered] = useState(false);
const statusColor = const statusColor =
entry.status === null entry.status === null
? "#475569" ? "#9ca3af"
: entry.status >= 200 && entry.status < 300 : entry.status >= 200 && entry.status < 300
? "#34d399" ? "#16a34a"
: "#f87171"; : "#dc2626";
return ( return (
<div style={{ borderBottom: "1px solid #0f1a2a" }}> <div style={{ borderBottom: "1px solid #f3f4f6" }}>
<div <div
onClick={onToggle} onClick={onToggle}
onMouseEnter={() => setHovered(true)} onMouseEnter={() => setHovered(true)}
@ -398,14 +401,14 @@ function LogRow({
gap: "8px", gap: "8px",
padding: "6px 12px", padding: "6px 12px",
cursor: "pointer", cursor: "pointer",
background: hovered ? "#1a2540" : "transparent", background: hovered ? "#f9fafb" : "transparent",
}} }}
> >
<span style={{ <span style={{
fontSize: "0.58rem", fontSize: "0.58rem",
fontWeight: 700, fontWeight: 700,
padding: "1px 5px", padding: "1px 5px",
borderRadius: "3px", borderRadius: "4px",
minWidth: "38px", minWidth: "38px",
textAlign: "center", textAlign: "center",
background: methodBg(entry.method), background: methodBg(entry.method),
@ -427,7 +430,7 @@ function LogRow({
</span> </span>
<span style={{ <span style={{
fontSize: "0.68rem", fontSize: "0.68rem",
color: "#94a3b8", color: "#6b7280",
flex: 1, flex: 1,
overflow: "hidden", overflow: "hidden",
textOverflow: "ellipsis", textOverflow: "ellipsis",
@ -435,23 +438,23 @@ function LogRow({
}}> }}>
{entry.path} {entry.path}
</span> </span>
<span style={{ fontSize: "0.6rem", color: "#334155", flexShrink: 0 }}> <span style={{ fontSize: "0.6rem", color: "#9ca3af", flexShrink: 0 }}>
{entry.duration !== null ? `${entry.duration}ms` : ""} {entry.duration !== null ? `${entry.duration}ms` : ""}
</span> </span>
<span style={{ fontSize: "0.6rem", color: "#1e293b", flexShrink: 0 }}> <span style={{ fontSize: "0.6rem", color: "#d1d5db", flexShrink: 0 }}>
{entry.timestamp} {entry.timestamp}
</span> </span>
</div> </div>
{expanded && ( {expanded && (
<div style={{ <div style={{
background: "#080d18", background: "#f9fafb",
padding: "8px 12px 10px", padding: "8px 12px 10px",
borderTop: "1px solid #1e293b", borderTop: "1px solid #e5e7eb",
}}> }}>
<div style={{ <div style={{
fontSize: "0.6rem", fontSize: "0.6rem",
color: "#334155", color: "#9ca3af",
marginBottom: "6px", marginBottom: "6px",
wordBreak: "break-all", wordBreak: "break-all",
}}> }}>
@ -460,7 +463,7 @@ function LogRow({
{entry.response !== null && ( {entry.response !== null && (
<pre style={{ <pre style={{
fontSize: "0.63rem", fontSize: "0.63rem",
color: "#94a3b8", color: "#6b7280",
margin: 0, margin: 0,
overflow: "auto", overflow: "auto",
maxHeight: "220px", maxHeight: "220px",