Dev console
This commit is contained in:
parent
882ff7696a
commit
130bed1d1f
SSH key fingerprint:
SHA256:GjIjMAC33pzYOe+hWcX5uvgnPrVFAXSrquvt84AOJbU
5 changed files with 4790 additions and 60 deletions
481
app/components/DevConsole.tsx
Normal file
481
app/components/DevConsole.tsx
Normal file
|
|
@ -0,0 +1,481 @@
|
|||
"use client";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { LuX, LuTerminal, LuSend } from "react-icons/lu";
|
||||
|
||||
export interface LogEntry {
|
||||
id: number;
|
||||
method: string;
|
||||
path: string;
|
||||
url: string;
|
||||
status: number | null;
|
||||
duration: number | null;
|
||||
timestamp: string;
|
||||
response: string | null;
|
||||
}
|
||||
|
||||
interface DevConsoleProps {
|
||||
open: boolean;
|
||||
width: number;
|
||||
isMobile: boolean;
|
||||
onClose: () => void;
|
||||
onWidthChange: (w: number) => void;
|
||||
logs: LogEntry[];
|
||||
}
|
||||
|
||||
function tryPretty(text: string): string {
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(text), null, 2);
|
||||
} catch {
|
||||
return text;
|
||||
}
|
||||
}
|
||||
|
||||
function methodBg(method: string): string {
|
||||
switch (method) {
|
||||
case "GET": return "#1d4ed8";
|
||||
case "POST": return "#15803d";
|
||||
case "PUT": return "#b45309";
|
||||
case "PATCH": return "#6d28d9";
|
||||
case "DELETE": return "#b91c1c";
|
||||
default: return "#475569";
|
||||
}
|
||||
}
|
||||
|
||||
export default function DevConsole({
|
||||
open, width, isMobile, onClose, onWidthChange, logs,
|
||||
}: DevConsoleProps) {
|
||||
const [activeTab, setActiveTab] = useState<"logs" | "request">("logs");
|
||||
const [expandedId, setExpandedId] = useState<number | null>(null);
|
||||
const [reqMethod, setReqMethod] = useState("GET");
|
||||
const [reqUrl, setReqUrl] = useState("/api/power");
|
||||
const [reqBody, setReqBody] = useState("");
|
||||
const [reqResponse, setReqResponse] = useState<{ status: number; body: string } | null>(null);
|
||||
const [reqLoading, setReqLoading] = useState(false);
|
||||
|
||||
const dragRef = useRef<{ startX: number; startWidth: number } | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const onMove = (e: MouseEvent) => {
|
||||
if (!dragRef.current) return;
|
||||
const delta = dragRef.current.startX - e.clientX;
|
||||
const next = Math.max(300, Math.min(900, dragRef.current.startWidth + delta));
|
||||
onWidthChange(next);
|
||||
};
|
||||
const onUp = () => {
|
||||
if (!dragRef.current) return;
|
||||
dragRef.current = null;
|
||||
document.body.style.userSelect = "";
|
||||
document.body.style.cursor = "";
|
||||
};
|
||||
document.addEventListener("mousemove", onMove);
|
||||
document.addEventListener("mouseup", onUp);
|
||||
return () => {
|
||||
document.removeEventListener("mousemove", onMove);
|
||||
document.removeEventListener("mouseup", onUp);
|
||||
};
|
||||
}, [onWidthChange]);
|
||||
|
||||
async function sendRequest() {
|
||||
setReqLoading(true);
|
||||
setReqResponse(null);
|
||||
try {
|
||||
const isAbsolute = reqUrl.startsWith("http://") || reqUrl.startsWith("https://");
|
||||
let fetchUrl: string;
|
||||
let fetchInit: RequestInit;
|
||||
|
||||
if (isAbsolute) {
|
||||
fetchUrl = "/api/dev/proxy";
|
||||
fetchInit = {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ method: reqMethod, url: reqUrl, body: reqBody || undefined }),
|
||||
};
|
||||
} else {
|
||||
fetchUrl = reqUrl;
|
||||
fetchInit = {
|
||||
method: reqMethod,
|
||||
headers: reqBody ? { "Content-Type": "application/json" } : {},
|
||||
body: ["POST", "PUT", "PATCH"].includes(reqMethod) && reqBody ? reqBody : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
const res = await fetch(fetchUrl, fetchInit);
|
||||
const text = await res.text();
|
||||
setReqResponse({ status: res.status, body: tryPretty(text) });
|
||||
} catch (e) {
|
||||
setReqResponse({ status: 0, body: String(e) });
|
||||
} finally {
|
||||
setReqLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
const panelWidth = isMobile ? "100%" : `${width}px`;
|
||||
const panelLeft = isMobile ? "0" : "auto";
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: panelLeft,
|
||||
width: panelWidth,
|
||||
zIndex: 50,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
background: "#0f172a",
|
||||
borderLeft: "1px solid #1e293b",
|
||||
transform: open ? "translateX(0)" : "translateX(100%)",
|
||||
transition: "transform 280ms cubic-bezier(0.4,0,0.2,1)",
|
||||
}}
|
||||
>
|
||||
{/* Drag handle — desktop only */}
|
||||
{!isMobile && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: "4px",
|
||||
cursor: "col-resize",
|
||||
zIndex: 10,
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
dragRef.current = { startX: e.clientX, startWidth: width };
|
||||
document.body.style.userSelect = "none";
|
||||
document.body.style.cursor = "col-resize";
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Header */}
|
||||
<div style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
padding: "10px 14px",
|
||||
borderBottom: "1px solid #1e293b",
|
||||
flexShrink: 0,
|
||||
}}>
|
||||
<LuTerminal size={13} style={{ color: "#475569" }} />
|
||||
<span style={{
|
||||
fontSize: "0.65rem",
|
||||
fontWeight: 700,
|
||||
letterSpacing: "0.1em",
|
||||
textTransform: "uppercase",
|
||||
color: "#475569",
|
||||
}}>
|
||||
Dev Console
|
||||
</span>
|
||||
|
||||
<div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: "4px" }}>
|
||||
{(["logs", "request"] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
style={{
|
||||
fontSize: "0.68rem",
|
||||
fontWeight: 500,
|
||||
padding: "3px 9px",
|
||||
borderRadius: "4px",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
background: activeTab === tab ? "#1e293b" : "transparent",
|
||||
color: activeTab === tab ? "#e2e8f0" : "#475569",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
{tab === "logs" ? `Logs${logs.length > 0 ? ` (${logs.length})` : ""}` : "Request"}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
marginLeft: "4px",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
color: "#475569",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "2px",
|
||||
}}
|
||||
>
|
||||
<LuX size={13} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Logs tab */}
|
||||
{activeTab === "logs" && (
|
||||
<div style={{ flex: 1, overflowY: "auto", fontFamily: "ui-monospace, 'Cascadia Code', monospace" }}>
|
||||
{logs.length === 0 ? (
|
||||
<div style={{ padding: "32px 16px", textAlign: "center", color: "#1e293b", fontSize: "0.75rem" }}>
|
||||
No requests captured yet
|
||||
</div>
|
||||
) : (
|
||||
[...logs].reverse().map((entry) => (
|
||||
<LogRow
|
||||
key={entry.id}
|
||||
entry={entry}
|
||||
expanded={expandedId === entry.id}
|
||||
onToggle={() => setExpandedId(expandedId === entry.id ? null : entry.id)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Request tab */}
|
||||
{activeTab === "request" && (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||||
<div style={{ padding: "12px", borderBottom: "1px solid #1e293b", flexShrink: 0 }}>
|
||||
<div style={{ display: "flex", gap: "6px", marginBottom: "8px" }}>
|
||||
<select
|
||||
value={reqMethod}
|
||||
onChange={(e) => setReqMethod(e.target.value)}
|
||||
style={{
|
||||
background: "#1e293b",
|
||||
border: "1px solid #334155",
|
||||
borderRadius: "6px",
|
||||
color: "#e2e8f0",
|
||||
fontSize: "0.68rem",
|
||||
padding: "5px 6px",
|
||||
cursor: "pointer",
|
||||
fontFamily: "ui-monospace, monospace",
|
||||
outline: "none",
|
||||
}}
|
||||
>
|
||||
{["GET", "POST", "PUT", "PATCH", "DELETE"].map((m) => (
|
||||
<option key={m}>{m}</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
value={reqUrl}
|
||||
onChange={(e) => setReqUrl(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && sendRequest()}
|
||||
placeholder="/api/power"
|
||||
style={{
|
||||
flex: 1,
|
||||
background: "#1e293b",
|
||||
border: "1px solid #334155",
|
||||
borderRadius: "6px",
|
||||
color: "#e2e8f0",
|
||||
fontSize: "0.68rem",
|
||||
padding: "5px 8px",
|
||||
fontFamily: "ui-monospace, monospace",
|
||||
outline: "none",
|
||||
minWidth: 0,
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={sendRequest}
|
||||
disabled={reqLoading}
|
||||
style={{
|
||||
background: "#2563eb",
|
||||
border: "none",
|
||||
borderRadius: "6px",
|
||||
color: "white",
|
||||
padding: "5px 11px",
|
||||
cursor: reqLoading ? "default" : "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "4px",
|
||||
fontSize: "0.68rem",
|
||||
fontWeight: 500,
|
||||
opacity: reqLoading ? 0.6 : 1,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<LuSend size={11} />
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{["POST", "PUT", "PATCH"].includes(reqMethod) && (
|
||||
<textarea
|
||||
value={reqBody}
|
||||
onChange={(e) => setReqBody(e.target.value)}
|
||||
placeholder='{"key": "value"}'
|
||||
rows={4}
|
||||
style={{
|
||||
width: "100%",
|
||||
background: "#1e293b",
|
||||
border: "1px solid #334155",
|
||||
borderRadius: "6px",
|
||||
color: "#e2e8f0",
|
||||
fontSize: "0.68rem",
|
||||
padding: "6px 8px",
|
||||
fontFamily: "ui-monospace, monospace",
|
||||
resize: "vertical",
|
||||
outline: "none",
|
||||
boxSizing: "border-box",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div style={{ fontSize: "0.6rem", color: "#334155" }}>
|
||||
Bearer token attached via cookie ·{" "}
|
||||
<span style={{ color: "#3b4a5e" }}>use</span>{" "}
|
||||
<code style={{ color: "#475569" }}>http://localhost:3001/path</code>{" "}
|
||||
<span style={{ color: "#3b4a5e" }}>to bypass Next.js proxy</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
flex: 1,
|
||||
overflow: "auto",
|
||||
padding: "12px",
|
||||
fontFamily: "ui-monospace, 'Cascadia Code', monospace",
|
||||
}}>
|
||||
{reqLoading && (
|
||||
<div style={{ fontSize: "0.7rem", color: "#475569" }}>Sending…</div>
|
||||
)}
|
||||
{!reqLoading && reqResponse && (
|
||||
<>
|
||||
<div style={{
|
||||
fontSize: "0.65rem",
|
||||
fontWeight: 600,
|
||||
marginBottom: "8px",
|
||||
color: reqResponse.status >= 200 && reqResponse.status < 300 ? "#34d399" : "#f87171",
|
||||
}}>
|
||||
HTTP {reqResponse.status}
|
||||
</div>
|
||||
<pre style={{
|
||||
fontSize: "0.65rem",
|
||||
color: "#94a3b8",
|
||||
margin: 0,
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-all",
|
||||
lineHeight: 1.6,
|
||||
}}>
|
||||
{reqResponse.body}
|
||||
</pre>
|
||||
</>
|
||||
)}
|
||||
{!reqLoading && !reqResponse && (
|
||||
<div style={{ fontSize: "0.7rem", color: "#1e293b" }}>
|
||||
Response will appear here
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LogRow({
|
||||
entry,
|
||||
expanded,
|
||||
onToggle,
|
||||
}: {
|
||||
entry: LogEntry;
|
||||
expanded: boolean;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const statusColor =
|
||||
entry.status === null
|
||||
? "#475569"
|
||||
: entry.status >= 200 && entry.status < 300
|
||||
? "#34d399"
|
||||
: "#f87171";
|
||||
|
||||
return (
|
||||
<div style={{ borderBottom: "1px solid #0f1a2a" }}>
|
||||
<div
|
||||
onClick={onToggle}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
padding: "6px 12px",
|
||||
cursor: "pointer",
|
||||
background: hovered ? "#1a2540" : "transparent",
|
||||
}}
|
||||
>
|
||||
<span style={{
|
||||
fontSize: "0.58rem",
|
||||
fontWeight: 700,
|
||||
padding: "1px 5px",
|
||||
borderRadius: "3px",
|
||||
minWidth: "38px",
|
||||
textAlign: "center",
|
||||
background: methodBg(entry.method),
|
||||
color: "white",
|
||||
flexShrink: 0,
|
||||
letterSpacing: "0.02em",
|
||||
}}>
|
||||
{entry.method}
|
||||
</span>
|
||||
<span style={{
|
||||
fontSize: "0.63rem",
|
||||
fontWeight: 600,
|
||||
minWidth: "26px",
|
||||
textAlign: "right",
|
||||
color: statusColor,
|
||||
flexShrink: 0,
|
||||
}}>
|
||||
{entry.status ?? "···"}
|
||||
</span>
|
||||
<span style={{
|
||||
fontSize: "0.68rem",
|
||||
color: "#94a3b8",
|
||||
flex: 1,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}>
|
||||
{entry.path}
|
||||
</span>
|
||||
<span style={{ fontSize: "0.6rem", color: "#334155", flexShrink: 0 }}>
|
||||
{entry.duration !== null ? `${entry.duration}ms` : ""}
|
||||
</span>
|
||||
<span style={{ fontSize: "0.6rem", color: "#1e293b", flexShrink: 0 }}>
|
||||
{entry.timestamp}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{expanded && (
|
||||
<div style={{
|
||||
background: "#080d18",
|
||||
padding: "8px 12px 10px",
|
||||
borderTop: "1px solid #1e293b",
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: "0.6rem",
|
||||
color: "#334155",
|
||||
marginBottom: "6px",
|
||||
wordBreak: "break-all",
|
||||
}}>
|
||||
{entry.url}
|
||||
</div>
|
||||
{entry.response !== null && (
|
||||
<pre style={{
|
||||
fontSize: "0.63rem",
|
||||
color: "#94a3b8",
|
||||
margin: 0,
|
||||
overflow: "auto",
|
||||
maxHeight: "220px",
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-all",
|
||||
lineHeight: 1.5,
|
||||
}}>
|
||||
{(() => {
|
||||
try { return JSON.stringify(JSON.parse(entry.response), null, 2); }
|
||||
catch { return entry.response; }
|
||||
})()}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { LuCode } from "react-icons/lu";
|
||||
|
||||
interface NavBarProps {
|
||||
online: boolean;
|
||||
devConsoleOpen: boolean;
|
||||
onToggleDevConsole: () => void;
|
||||
}
|
||||
|
||||
export default function NavBar({ online }: NavBarProps) {
|
||||
export default function NavBar({ online, devConsoleOpen, onToggleDevConsole }: NavBarProps) {
|
||||
const router = useRouter();
|
||||
const [auth, setAuth] = useState(false);
|
||||
|
||||
|
|
@ -34,21 +37,35 @@ export default function NavBar({ online }: NavBarProps) {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`flex items-center gap-2 text-xs font-medium px-3 py-1.5 rounded-full border ${
|
||||
online
|
||||
? "text-green-700 bg-green-50 border-green-200"
|
||||
: "text-gray-500 bg-gray-50 border-gray-200"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className="w-1.5 h-1.5 rounded-full"
|
||||
style={{
|
||||
background: online ? "#22c55e" : "#d1d5db",
|
||||
animation: online ? "pulse-dot 2s infinite" : "none",
|
||||
}}
|
||||
/>
|
||||
{online ? "Online" : "Connecting..."}
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={onToggleDevConsole}
|
||||
className={`flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-full border cursor-pointer transition-colors ${
|
||||
devConsoleOpen
|
||||
? "text-blue-700 bg-blue-50 border-blue-200"
|
||||
: "text-gray-500 bg-gray-50 border-gray-200 hover:border-gray-300 hover:text-gray-700"
|
||||
}`}
|
||||
>
|
||||
<LuCode size={12} />
|
||||
Dev
|
||||
</button>
|
||||
|
||||
<div
|
||||
className={`flex items-center gap-2 text-xs font-medium px-3 py-1.5 rounded-full border ${
|
||||
online
|
||||
? "text-green-700 bg-green-50 border-green-200"
|
||||
: "text-gray-500 bg-gray-50 border-gray-200"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className="w-1.5 h-1.5 rounded-full"
|
||||
style={{
|
||||
background: online ? "#22c55e" : "#d1d5db",
|
||||
animation: online ? "pulse-dot 2s infinite" : "none",
|
||||
}}
|
||||
/>
|
||||
{online ? "Online" : "Connecting..."}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue