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
33
app/api/dev/proxy/route.ts
Normal file
33
app/api/dev/proxy/route.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
const token = req.cookies.get("token")?.value;
|
||||||
|
if (!token) {
|
||||||
|
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const { method, url, body } = (await req.json()) as {
|
||||||
|
method: string;
|
||||||
|
url: string;
|
||||||
|
body?: unknown;
|
||||||
|
};
|
||||||
|
|
||||||
|
const targetUrl = url.startsWith("http")
|
||||||
|
? url
|
||||||
|
: `http://localhost:3001${url.startsWith("/") ? url : `/${url}`}`;
|
||||||
|
|
||||||
|
const res = await fetch(targetUrl, {
|
||||||
|
method,
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
...(body !== undefined ? { "Content-Type": "application/json" } : {}),
|
||||||
|
},
|
||||||
|
body: body !== undefined ? JSON.stringify(body) : undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
const text = await res.text();
|
||||||
|
return new NextResponse(text, {
|
||||||
|
status: res.status,
|
||||||
|
headers: { "Content-Type": res.headers.get("Content-Type") ?? "text/plain" },
|
||||||
|
});
|
||||||
|
}
|
||||||
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";
|
"use client";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
|
import { LuCode } from "react-icons/lu";
|
||||||
|
|
||||||
interface NavBarProps {
|
interface NavBarProps {
|
||||||
online: boolean;
|
online: boolean;
|
||||||
|
devConsoleOpen: boolean;
|
||||||
|
onToggleDevConsole: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function NavBar({ online }: NavBarProps) {
|
export default function NavBar({ online, devConsoleOpen, onToggleDevConsole }: NavBarProps) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [auth, setAuth] = useState(false);
|
const [auth, setAuth] = useState(false);
|
||||||
|
|
||||||
|
|
@ -34,6 +37,19 @@ export default function NavBar({ online }: NavBarProps) {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<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
|
<div
|
||||||
className={`flex items-center gap-2 text-xs font-medium px-3 py-1.5 rounded-full border ${
|
className={`flex items-center gap-2 text-xs font-medium px-3 py-1.5 rounded-full border ${
|
||||||
online
|
online
|
||||||
|
|
@ -50,6 +66,7 @@ export default function NavBar({ online }: NavBarProps) {
|
||||||
/>
|
/>
|
||||||
{online ? "Online" : "Connecting..."}
|
{online ? "Online" : "Connecting..."}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
111
app/page.tsx
111
app/page.tsx
|
|
@ -11,6 +11,7 @@ import UptimeCard from "./components/UptimeCard";
|
||||||
import NetworkCard from "./components/NetworkCard";
|
import NetworkCard from "./components/NetworkCard";
|
||||||
import PowerGrid from "./components/PowerGrid";
|
import PowerGrid from "./components/PowerGrid";
|
||||||
import LinksGrid from "./components/LinksGrid";
|
import LinksGrid from "./components/LinksGrid";
|
||||||
|
import DevConsole, { type LogEntry } from "./components/DevConsole";
|
||||||
import { useCheckAuth } from "@/hooks/useCheckAuth";
|
import { useCheckAuth } from "@/hooks/useCheckAuth";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { getPower, type PowerData } from "./lib/getPower";
|
import { getPower, type PowerData } from "./lib/getPower";
|
||||||
|
|
@ -25,10 +26,79 @@ export default function Home() {
|
||||||
Record<string, { rx: number; tx: number }>
|
Record<string, { rx: number; tx: number }>
|
||||||
>({});
|
>({});
|
||||||
|
|
||||||
// We use Refs for these because changing them shouldn't trigger a "refresh"
|
const [panelOpen, setPanelOpen] = useState(false);
|
||||||
// but we need them to calculate the delta (speed) between fetches.
|
const [panelWidth, setPanelWidth] = useState(440);
|
||||||
|
const [isMobile, setIsMobile] = useState(false);
|
||||||
|
const [logs, setLogs] = useState<LogEntry[]>([]);
|
||||||
|
|
||||||
const prevNetRef = useRef<Record<string, NetworkInterface> | null>(null);
|
const prevNetRef = useRef<Record<string, NetworkInterface> | null>(null);
|
||||||
const lastFetchRef = useRef<number>(0);
|
const lastFetchRef = useRef<number>(0);
|
||||||
|
const logIdRef = useRef(0);
|
||||||
|
|
||||||
|
// Mobile detection
|
||||||
|
useEffect(() => {
|
||||||
|
const check = () => setIsMobile(window.innerWidth < 768);
|
||||||
|
check();
|
||||||
|
window.addEventListener("resize", check);
|
||||||
|
return () => window.removeEventListener("resize", check);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Fetch interceptor — captures all /api/* requests
|
||||||
|
useEffect(() => {
|
||||||
|
const original = window.fetch;
|
||||||
|
|
||||||
|
window.fetch = async (input, init) => {
|
||||||
|
const url =
|
||||||
|
typeof input === "string"
|
||||||
|
? input
|
||||||
|
: input instanceof URL
|
||||||
|
? input.href
|
||||||
|
: (input as Request).url;
|
||||||
|
|
||||||
|
const shouldLog =
|
||||||
|
(url.startsWith("/api/") && !url.startsWith("/api/dev/proxy")) ||
|
||||||
|
url.includes("localhost:3001");
|
||||||
|
|
||||||
|
if (!shouldLog) return original(input, init);
|
||||||
|
|
||||||
|
const method = ((init?.method ?? (input instanceof Request ? input.method : "GET")) as string).toUpperCase();
|
||||||
|
const id = ++logIdRef.current;
|
||||||
|
let path = url;
|
||||||
|
try {
|
||||||
|
path = new URL(url, window.location.origin).pathname;
|
||||||
|
} catch {
|
||||||
|
// use raw url
|
||||||
|
}
|
||||||
|
const timestamp = new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
|
||||||
|
const start = Date.now();
|
||||||
|
|
||||||
|
setLogs((prev) => [
|
||||||
|
...prev,
|
||||||
|
{ id, method, path, url, status: null, duration: null, timestamp, response: null },
|
||||||
|
]);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await original(input, init);
|
||||||
|
const clone = res.clone();
|
||||||
|
const text = await clone.text();
|
||||||
|
const duration = Date.now() - start;
|
||||||
|
setLogs((prev) =>
|
||||||
|
prev.map((e) => (e.id === id ? { ...e, status: res.status, duration, response: text } : e))
|
||||||
|
);
|
||||||
|
return res;
|
||||||
|
} catch (err) {
|
||||||
|
const duration = Date.now() - start;
|
||||||
|
setLogs((prev) =>
|
||||||
|
prev.map((e) => (e.id === id ? { ...e, status: 0, duration, response: String(err) } : e))
|
||||||
|
);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.fetch = original;
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
|
|
@ -36,7 +106,6 @@ export default function Home() {
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
const data = await getStats();
|
const data = await getStats();
|
||||||
|
|
||||||
// 1. Calculate speeds if we have previous data
|
|
||||||
if (prevNetRef.current && lastFetchRef.current > 0) {
|
if (prevNetRef.current && lastFetchRef.current > 0) {
|
||||||
const elapsed = (now - lastFetchRef.current) / 1000;
|
const elapsed = (now - lastFetchRef.current) / 1000;
|
||||||
const speeds: Record<string, { rx: number; tx: number }> = {};
|
const speeds: Record<string, { rx: number; tx: number }> = {};
|
||||||
|
|
@ -53,12 +122,8 @@ export default function Home() {
|
||||||
setNetSpeed(speeds);
|
setNetSpeed(speeds);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. Update our "silent" trackers
|
|
||||||
prevNetRef.current = data.network;
|
prevNetRef.current = data.network;
|
||||||
lastFetchRef.current = now;
|
lastFetchRef.current = now;
|
||||||
|
|
||||||
// 3. Update the UI state with new data
|
|
||||||
// React's Virtual DOM will only update the changed text/numbers.
|
|
||||||
setStats(data);
|
setStats(data);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
if (e instanceof Error && e.message === "UNAUTHORIZED") {
|
if (e instanceof Error && e.message === "UNAUTHORIZED") {
|
||||||
|
|
@ -71,13 +136,8 @@ export default function Home() {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Initial fetch
|
|
||||||
fetchData();
|
fetchData();
|
||||||
|
|
||||||
// Start the 4s loop
|
|
||||||
const id = setInterval(fetchData, 4000);
|
const id = setInterval(fetchData, 4000);
|
||||||
|
|
||||||
// Clean up on unmount so we don't have multiple intervals running
|
|
||||||
return () => clearInterval(id);
|
return () => clearInterval(id);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
@ -94,9 +154,8 @@ export default function Home() {
|
||||||
fetchPower();
|
fetchPower();
|
||||||
const id = setInterval(fetchPower, 10000);
|
const id = setInterval(fetchPower, 10000);
|
||||||
return () => clearInterval(id);
|
return () => clearInterval(id);
|
||||||
}, []); // Empty array means this setup only happens ONCE.
|
}, []);
|
||||||
|
|
||||||
// Derived values for the UI
|
|
||||||
const primaryIface = stats
|
const primaryIface = stats
|
||||||
? Object.keys(stats.network).find(
|
? Object.keys(stats.network).find(
|
||||||
(k) =>
|
(k) =>
|
||||||
|
|
@ -109,8 +168,19 @@ export default function Home() {
|
||||||
const primarySpeed = primaryIface ? netSpeed[primaryIface] || null : null;
|
const primarySpeed = primaryIface ? netSpeed[primaryIface] || null : null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
paddingRight: panelOpen && !isMobile ? panelWidth : 0,
|
||||||
|
transition: "padding-right 280ms cubic-bezier(0.4,0,0.2,1)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div className="max-w-5xl mx-auto px-6 pb-20">
|
<div className="max-w-5xl mx-auto px-6 pb-20">
|
||||||
<NavBar online={!!stats} />
|
<NavBar
|
||||||
|
online={!!stats}
|
||||||
|
devConsoleOpen={panelOpen}
|
||||||
|
onToggleDevConsole={() => setPanelOpen((o) => !o)}
|
||||||
|
/>
|
||||||
<Hero lastUpdated={stats?.timestamp ?? null} />
|
<Hero lastUpdated={stats?.timestamp ?? null} />
|
||||||
|
|
||||||
<div className="flex items-baseline justify-between mb-5">
|
<div className="flex items-baseline justify-between mb-5">
|
||||||
|
|
@ -143,5 +213,16 @@ export default function Home() {
|
||||||
|
|
||||||
<LinksGrid />
|
<LinksGrid />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DevConsole
|
||||||
|
open={panelOpen}
|
||||||
|
width={panelWidth}
|
||||||
|
isMobile={isMobile}
|
||||||
|
onClose={() => setPanelOpen(false)}
|
||||||
|
onWidthChange={setPanelWidth}
|
||||||
|
logs={logs}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
4118
pnpm-lock.yaml
generated
Normal file
4118
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue