+
๐พ
+
No cache events recorded yet.
+
+ Use "use cache" in your server components to see cache
+ hits and misses here.
+
+
+
+ {events.length > 0 && (
+
+
+
+ {hitCount} hit{hitCount !== 1 ? "s" : ""}
+
+
+ {missCount} miss{missCount !== 1 ? "es" : ""}
+
+ {revalidateCount > 0 && (
+
+ {revalidateCount} revalidat
+ {revalidateCount !== 1 ? "ions" : "e"}
+
+ )}
+
+
+ {["all", "hit", "miss", "revalidate"].map((f) => (
+
+ ))}
+
+
+ )}
+ {events.length > 0 && (
+
+ {filtered
+ .slice()
+ .toReversed()
+ .map((event, i) => (
+
+
+ {formatTime(event.timestamp)}
+
+
+ {event.type}
+
+
+ {event.provider}
+
+
+
+ {event.fn || "anonymous"}
+ {" "}
+ {event.args && event.args.length > 0 && (
+
+ {formatArgs(event.args)}
+
+ )}
+
+ {event.file && (
+
+ {event.file}:{event.line}
+
+ )}
+ {event.ttl != null && event.type !== "hit" && (
+
+ TTL: {formatTTL(event.ttl)}
+
+ )}
+ {event.provider !== "request" && event._keys && (
+
+ )}
+
+ ))}
+
+ )}
+
+
Component Routes ({routes.length})
+
+
+ Route
+ Type
+ Flags
+
+ {routes.map((route, i) => {
+ const colorClass = TYPE_CLASSES[route.type] ?? "gray";
+ const params = activeMap.get(i);
+ const active = !!params;
+ const paramEntries = params
+ ? Object.entries(params).filter(([, v]) => v !== undefined)
+ : [];
+ return (
+
+
+ {route.path || "/"}
+ {paramEntries.length > 0 && (
+
+ {`{ ${paramEntries.map(([k, v]) => `${k}: ${JSON.stringify(Array.isArray(v) ? v.join("/") : v)}`).join(", ")} }`}
+
+ )}
+
+
{route.type}
+
+ {route.remote && remote}
+ {route.exact && exact}
+ {route.hasLoading && loading}
+
+
+ );
+ })}
+
+
+ {liveOutlets.map((outlet, i) => {
+ const server = serverState[outlet.name];
+ const state = server?.state ?? "connected";
+ const displayName = server?.displayName ?? null;
+ const specifier = server?.specifier ?? null;
+ const yields = server?.yields ?? null;
+ const lastYieldAt = server?.lastYieldAt ?? null;
+ const startedAt = server?.startedAt ?? null;
+ const streaming = server?.streaming ?? false;
+ const error = server?.error ?? null;
+ const isRemote = outlet.remote;
+
+ const stateClass = STATE_CLASSES[state] ?? "gray";
+ const stateIcon = STATE_ICONS[state] ?? "";
+
+ return (
+
+
+
{stateIcon}
+
+ {displayName || "LiveComponent"}
+
+
{state}
+ {streaming &&
streaming}
+ {isRemote &&
remote}
+
+
+ {specifier && (
+
+ {specifier}
+
+ )}
+
+ {outlet.url && (
+
+ {isRemote ? outlet.url : `outlet: ${outlet.name}`}
+
+ )}
+
+
+ {typeof yields === "number" && (
+
+ yields: {yields}
+
+ )}
+ {lastYieldAt && last yield: {timeAgo(lastYieldAt)}}
+ {startedAt && started: {timeAgo(startedAt)}}
+
+
+ {error &&
{error}
}
+
+ );
+ })}
+
+
+
+ {[
+ { id: "all", label: `All (${entries.length})` },
+ { id: "stdout", label: `stdout (${stdoutCount})` },
+ { id: "stderr", label: `stderr (${stderrCount})` },
+ ].map((f) => (
+
+ ))}
+
+
+ setSearch(e.target.value)}
+ />
+
+
+
+
+ {!autoScroll && (
+
+ )}
+
+
๐ฒ
+
No outlet data received yet.
+
+ Waiting for outlet data from the host page...
+
+
+
+ Host URL: {hostUrl || "โ"}
+
+
+
+ {outlets.map((outlet, i) => (
+
{
+ onHighlight?.(
+ `[data-devtools-outlet="${outlet.name}"]`,
+ colors[i],
+ outlet.name
+ );
+ }}
+ onMouseLeave={() => {
+ onClearHighlight?.();
+ }}
+ >
+
+
{outlet.name || "PAGE_ROOT"}
+ {outlet.url &&
{outlet.url}
}
+
+
+
+ {outlet._fileRouter && (
+ router
+ )}
+ {outlet.remote && (
+ remote
+ )}
+ {outlet.live && (
+ live
+ )}
+ {outlet.defer && (
+ defer
+ )}
+ {!outlet._fileRouter &&
+ !outlet.remote &&
+ !outlet.live &&
+ !outlet.defer && (
+ static
+ )}
+
+ {outlet.name && outlet.name !== "PAGE_ROOT" && (
+
+ )}
+ {!outlet._fileRouter && (
+
+ )}
+
+
+ ))}
+
+
{truncated};
+}
+
+function ChunkRow({ chunk, highlighted, onHighlight, onClearHighlight }) {
+ const tagClass = TAG_CLASSES[chunk.tag] ?? "gray";
+
+ return (
+ {
+ if (chunk.tag === "I") {
+ const moduleId = Array.isArray(chunk.data)
+ ? chunk.data[0]
+ : chunk.data?.id;
+ if (moduleId) {
+ onHighlight?.(
+ `[data-devtools-client="${moduleId}"]`,
+ "rgba(34, 197, 94, 0.3)",
+ moduleId
+ );
+ }
+ }
+ }}
+ onMouseLeave={() => onClearHighlight?.()}
+ >
+ #{chunk.id}
+ {TAG_LABELS[chunk.tag] ?? chunk.tag}
+ {formatBytes(chunk.size)}
+
+
+ );
+}
+
+function displayModuleId(moduleId, reactServerRoot) {
+ if (!reactServerRoot || !moduleId) return moduleId;
+ // Match absolute path prefix
+ if (moduleId.startsWith(reactServerRoot)) {
+ return "@lazarv/react-server" + moduleId.slice(reactServerRoot.length);
+ }
+ // Match relative paths containing the package directory (e.g. ../../packages/react-server/...)
+ const dirName = reactServerRoot.split("/").slice(-2).join("/");
+ const idx = moduleId.indexOf(dirName + "/");
+ if (idx !== -1) {
+ return "@lazarv/react-server/" + moduleId.slice(idx + dirName.length + 1);
+ }
+ return moduleId;
+}
+
+const SIZE_SEGMENTS = [
+ { key: "rsc", label: "RSC Payload", color: "#22c55e" },
+ { key: "hydration", label: "Hydration", color: "#8b5cf6" },
+ { key: "html", label: "HTML", color: "#0ea5e9" },
+];
+
+function PageSizeBar({ stats }) {
+ const total = stats.htmlSize;
+ const rsc = stats.flightSize || 0;
+ const hydration = stats.hydrationSize || 0;
+ const html = Math.max(0, total - rsc - hydration);
+
+ const segments = [
+ { ...SIZE_SEGMENTS[0], value: rsc },
+ { ...SIZE_SEGMENTS[1], value: hydration },
+ { ...SIZE_SEGMENTS[2], value: html },
+ ].filter((s) => s.value > 0);
+
+ const transferred = stats.htmlTransferSize;
+ const hasCompression = transferred > 0 && transferred < total;
+
+ return (
+
+ {/* Bar */}
+
+ {segments.map((seg) => (
+
+ ))}
+
+ {/* Legend */}
+
+ {segments.map((seg) => (
+
+
+ {seg.label}
+ {formatBytes(seg.value)}
+
+ ))}
+
+ Total
+ {formatBytes(total)}
+
+ {hasCompression && (
+
+
+ Transferred
+
+
+ {formatBytes(transferred)}
+
+
+ )}
+
+
+
๐ฆ
+
No RSC payloads captured yet.
+
+ Navigate in the host app to capture flight data.
+
+
+ {/* Page-level size bar (iOS-style) */}
+ {pageStats && pageStats.htmlSize > 0 &&
}
+
+ {/* Payload selector */}
+
+
+
+ setFilter(e.target.value)}
+ className="dt-input"
+ />
+
+
+ {/* Summary badges */}
+ {selected && (
+
+ {formatBytes(selected.totalSize)}
+ {selected.chunkCount} chunks
+ {selected.clientRefs.length} client refs
+ {selected.serverRefs.length} server refs
+ {selected.promises.length} promises
+ {selected.errors.length > 0 && (
+ {selected.errors.length} errors
+ )}
+ {selected.duration}ms
+
+ )}
+
+ {/* Client references */}
+ {selected?.clientRefs.length > 0 && (
+
+ Client References ({selected.clientRefs.length})
+
+ {selected.clientRefs.map((ref, i) => (
+
+ ))}
+
+
+ )}
+
+ {/* Chunk list */}
+
+
+ ID
+ Type
+ Size
+ Data
+
+
+ {filteredChunks.map((chunk, i) => (
+
+ ))}
+
+
+
๐
+
No remote components tracked.
+
+ Use <RemoteComponent> to load
+ remote RSC components.
+
+
+ {components.map((comp, i) => (
+
{
+ if (comp.name) {
+ onHighlight?.(
+ `[data-devtools-outlet="${comp.name}"]`,
+ colors[i],
+ comp.name
+ );
+ }
+ }}
+ onMouseLeave={() => {
+ onClearHighlight?.();
+ }}
+ >
+
+
+ {comp.url}
+
+
+ {comp.url && (
+
e.stopPropagation()}
+ >
+
+
+ )}
+ {comp.name && (
+
+ )}
+ {comp.name && (
+
+ )}
+
+
+ {comp.name && (
+
+ outlet: {comp.name}
+
+ )}
+
+ {comp.ttl != null && (
+
+ TTL: {comp.ttl === Infinity ? "\u221e" : `${comp.ttl}ms`}
+
+ )}
+ {comp.isolate && isolate}
+ {comp.defer && defer}
+ {comp.live && live}
+
+
+ ))}
+
+
{entry.path || "/"}
+
+
+ {entry.type === "outlet" ? `@${entry.outlet}` : entry.type}
+
+ {entry.method && {entry.method}}
+
+
+ {entry.src ? (
+
+ {rel}
+
+ ) : (
+
+ )}
+
+
+
setFilter(e.target.value)}
+ className="dt-input"
+ />
+
+
+
+ {types.map((t) => (
+
+ ))}
+
+
+ {filtered.length} of {allRoutes.length} routes
+
+
+
+
+
+ Route
+ Type
+
+ Source
+
+ {filtered.map((entry, i) => (
+
+ ))}
+
+
+
+ {label}
+
+ {format(value)}
+ {max > 0 && (
+ / {format(max)}
+ )}
+
+
+
+
+
{title}
+ {children}
+
+ );
+}
+
+function KeyValue({ label, value }) {
+ return (
+
+ {label}
+ {value}
+
+ );
+}
+
+export default function StatusDisplay({ data }) {
+ if (!data) return null;
+
+ const { process: proc, cpu, memory } = data;
+
+ return (
+
+ {/* Process Info */}
+
+
+
+
+
+
+
+ {/* CPU */}
+
+ `${v.toFixed(1)}%`}
+ color={
+ cpu.percent > 80
+ ? "#ef4444"
+ : cpu.percent > 50
+ ? "#f59e0b"
+ : "#22c55e"
+ }
+ />
+
+ v.toFixed(2)).join(", ")}
+ />
+
+
+ {/* Memory */}
+
+
+
+
+
+
+
+
+
+
+
⚙️
+
No workers detected.
+
+ Use "use worker" in your modules to offload work to
+ server or client workers.
+
+
+
+
+
+ {allWorkers.length} worker{allWorkers.length !== 1 ? "s" : ""}
+
+ {serverCount > 0 && (
+
+ {serverCount} server
+
+ )}
+ {clientCount > 0 && (
+
+ {clientCount} client
+
+ )}
+
+
+ {["all", "server", "client"].map((f) => (
+
+ ))}
+
+
+
+ {filtered.map((w) => {
+ const stateInfo = STATE_LABELS[w.state] || {
+ label: w.state,
+ tagColor: "gray",
+ };
+ return (
+
+
+
+ {w.type}
+
+
+ {stateInfo.label}
+
+
+ {shortId(w.id)}
+
+
+
+
+ Calls:{" "}
+ {w.invocations ?? 0}
+ {(w.activeInvocations ?? 0) > 0 && (
+
+ {" "}
+ ({w.activeInvocations} active)
+
+ )}
+
+ {(w.errors ?? 0) > 0 && (
+
+ Errors:{" "}
+ {w.errors}
+
+ )}
+ {(w.restarts ?? 0) > 0 && (
+
+ Restarts:{" "}
+ {w.restarts}
+
+ )}
+ {w.lastFn && (
+
+ Last fn:{" "}
+ {w.lastFn}
+
+ )}
+
+ Spawned:{" "}
+ {formatTime(w.spawnedAt)}
+
+ {w.lastInvokedAt && (
+
+ Last call:{" "}
+ {formatTime(w.lastInvokedAt)}
+
+ )}
+
+
+ );
+ })}
+
+