zevairouter 1.0.39 → 1.0.41

package/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.js

@@ -2,12 +2,9 @@
 
 import { useState, useEffect, useRef, useCallback } from "react";
 import PropTypes from "prop-types";
+import Link from "next/link";
 import { Card, Button, Input, Modal, CardSkeleton, Toggle, ConfirmModal } from "@/shared/components";
 import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
-import { getCurrentLocale, onLocaleChange } from "@/i18n/runtime";
-
-// Locales that unlock wenyan (classical Chinese) caveman levels
-const WENYAN_LOCALES = ["zh-CN", "zh-TW"];
 
 const TUNNEL_BENEFITS = [
   { icon: "public", title: "Access Anywhere", desc: "Use your API from any network" },
@@ -53,20 +50,6 @@ async function clientPingAny(...urls) {
   });
 }
 
-const CAVEMAN_LEVELS = [
-  { id: "lite", label: "Lite", desc: "Drop filler, keep grammar" },
-  { id: "full", label: "Full", desc: "Drop articles, fragments OK" },
-  { id: "ultra", label: "Ultra", desc: "Telegraphic, max compression" },
-  { id: "wenyan-lite", label: "文 Lite", desc: "Classical Chinese, light compression", wenyan: true },
-  { id: "wenyan", label: "文 Full", desc: "Maximum 文言文, 80-90% reduction", wenyan: true },
-  { id: "wenyan-ultra", label: "文 Ultra", desc: "Extreme classical compression", wenyan: true },
-];
-
-const PONYTAIL_LEVELS = [
-  { id: "lite", label: "Lite", desc: "Suggest lazier alternative" },
-  { id: "full", label: "Full", desc: "Enforce the ladder, shortest diff" },
-  { id: "ultra", label: "Ultra", desc: "YAGNI extremist, one-liner or bust" },
-];
 export default function APIPageClient({ machineId }) {
   const [keys, setKeys] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -79,12 +62,6 @@ export default function APIPageClient({ machineId }) {
   const [requireLogin, setRequireLogin] = useState(true);
   const [hasPassword, setHasPassword] = useState(true);
   const [tunnelDashboardAccess, setTunnelDashboardAccess] = useState(false);
-  const [rtkEnabled, setRtkEnabledState] = useState(true);
-  const [cavemanEnabled, setCavemanEnabled] = useState(false);
-  const [cavemanLevel, setCavemanLevel] = useState("full");
-  const [ponytailEnabled, setPonytailEnabled] = useState(false);
-  const [ponytailLevel, setPonytailLevel] = useState("full");
-  const [locale, setLocale] = useState("en");
 
   // Cloudflare Tunnel state
   const [tunnelChecking, setTunnelChecking] = useState(true);
@@ -140,26 +117,6 @@ export default function APIPageClient({ machineId }) {
       setIsRemoteHost(!["localhost", "127.0.0.1", "::1"].includes(window.location.hostname));
   }, []);
 
-  // Track app UI locale to gate wenyan caveman levels
-  useEffect(() => {
-    setLocale(getCurrentLocale());
-    return onLocaleChange(() => setLocale(getCurrentLocale()));
-  }, []);
-
-  const isWenyanLocale = WENYAN_LOCALES.includes(locale);
-  const visibleCavemanLevels = isWenyanLocale
-    ? CAVEMAN_LEVELS
-    : CAVEMAN_LEVELS.filter((lvl) => !lvl.wenyan);
-
-  // Reset wenyan level to "ultra" when leaving a Chinese locale
-  useEffect(() => {
-    const current = CAVEMAN_LEVELS.find((lvl) => lvl.id === cavemanLevel);
-    if (current?.wenyan && !isWenyanLocale) {
-      setCavemanLevel("ultra");
-      patchSetting({ cavemanLevel: "ultra" });
-    }
-  }, [isWenyanLocale, cavemanLevel]);
-
   const { copied, copy } = useCopyToClipboard();
 
   // Security gate: block remote exposure while dashboard uses default password or login is off.
@@ -280,11 +237,6 @@ export default function APIPageClient({ machineId }) {
         setRequireLogin(data.requireLogin !== false);
         setHasPassword(data.hasPassword || false);
         setTunnelDashboardAccess(data.tunnelDashboardAccess || false);
-        setRtkEnabledState(data.rtkEnabled !== false);
-        setCavemanEnabled(!!data.cavemanEnabled);
-        setCavemanLevel(data.cavemanLevel || "full");
-        setPonytailEnabled(!!data.ponytailEnabled);
-        setPonytailLevel(data.ponytailLevel || "full");
       }
       if (statusRes.ok) {
         const data = await statusRes.json();
@@ -334,51 +286,6 @@ export default function APIPageClient({ machineId }) {
     }
   };
 
-  const handleRtkEnabled = async (value) => {
-    try {
-      const res = await fetch("/api/settings", {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ rtkEnabled: value }),
-      });
-      if (res.ok) setRtkEnabledState(value);
-    } catch (error) {
-      console.log("Error updating rtkEnabled:", error);
-    }
-  };
-
-  const patchSetting = async (patch) => {
-    try {
-      await fetch("/api/settings", {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(patch),
-      });
-    } catch (error) {
-      console.log("Error updating setting:", error);
-    }
-  };
-
-  const handleCavemanEnabled = (value) => {
-    setCavemanEnabled(value);
-    patchSetting({ cavemanEnabled: value });
-  };
-
-  const handleCavemanLevel = (level) => {
-    setCavemanLevel(level);
-    patchSetting({ cavemanLevel: level });
-  };
-
-  const handlePonytailEnabled = (value) => {
-    setPonytailEnabled(value);
-    patchSetting({ ponytailEnabled: value });
-  };
-
-  const handlePonytailLevel = (level) => {
-    setPonytailLevel(level);
-    patchSetting({ ponytailLevel: level });
-  };
-
   const fetchData = async () => {
     try {
       const keysRes = await fetch("/api/keys");
@@ -1074,129 +981,25 @@ export default function APIPageClient({ machineId }) {
         )}
       </Card>
 
-      {/* Token Saver (RTK + Caveman) */}
+      {/* Token Saver moved to its own page */}
       <Card id="rtk">
-        <div className="flex items-center justify-between mb-2">
-          <h2 className="text-lg font-semibold flex items-center gap-2">
-            <span className="material-symbols-outlined text-primary">bolt</span>
-            Token Saver
-          </h2>
-        </div>
-        <div className="flex items-center justify-between pt-2 pb-4 border-b border-border gap-4">
-          <div className="min-w-0 flex-1">
-            <p className="font-medium">
-              Compress tool output{" "}
-              <a
-                href="https://github.com/rtk-ai/rtk"
-                target="_blank"
-                rel="noreferrer"
-                className="text-xs font-normal text-primary underline hover:opacity-80"
-              >
-                (RTK)
-              </a>
-            </p>
-            <p className="text-sm text-text-muted">
-              git/grep/ls/tree/logs → 60-90% fewer input tokens
-            </p>
-          </div>
-          <Toggle
-            checked={rtkEnabled}
-            onChange={() => handleRtkEnabled(!rtkEnabled)}
-          />
-        </div>
-        <div className="flex items-center justify-between pt-4 gap-4 flex-wrap">
-          <div className="min-w-0 flex-1">
-            <p className="font-medium">
-              Compress LLM output{" "}
-              <a
-                href="https://github.com/JuliusBrussee/caveman"
-                target="_blank"
-                rel="noreferrer"
-                className="text-xs font-normal text-primary underline hover:opacity-80"
-              >
-                (Caveman)
-              </a>
-            </p>
-            <p className="text-sm text-text-muted">
-              Terse-style system prompt → ~65% fewer output tokens (up to 87%)
+        <div className="flex items-center justify-between gap-4">
+          <div className="min-w-0">
+            <h2 className="text-lg font-semibold flex items-center gap-2">
+              <span className="material-symbols-outlined text-primary">bolt</span>
+              Token Saver
+            </h2>
+            <p className="text-sm text-text-muted mt-1">
+              RTK, Caveman, Ponytail, Headroom, and PXPIPE live on the Token Saver page.
             </p>
           </div>
-          <div className="flex items-center gap-3 shrink-0">
-            {cavemanEnabled && (
-              <div className="flex flex-col items-end gap-1">
-                <div className="flex items-center gap-1.5">
-                  {visibleCavemanLevels.map((lvl) => (
-                    <button
-                      key={lvl.id}
-                      onClick={() => handleCavemanLevel(lvl.id)}
-                      className={`px-3 py-1.5 rounded text-xs font-medium border transition-colors ${
-                        cavemanLevel === lvl.id
-                          ? "bg-primary text-white border-primary"
-                          : "bg-transparent border-border text-text-muted hover:bg-surface-2"
-                      }`}
-                      title={lvl.desc}
-                    >
-                      {lvl.label}
-                    </button>
-                  ))}
-                </div>
-                <p className="text-xs text-primary">
-                  {CAVEMAN_LEVELS.find((lvl) => lvl.id === cavemanLevel)?.desc}
-                </p>
-              </div>
-            )}
-            <Toggle
-              checked={cavemanEnabled}
-              onChange={() => handleCavemanEnabled(!cavemanEnabled)}
-            />
-          </div>
-        </div>
-        <div className="flex items-center justify-between pt-4 border-t border-border gap-4 flex-wrap">
-          <div className="min-w-0 flex-1">
-            <p className="font-medium">
-              Lazy code style{" "}
-              <a
-                href="https://github.com/DietrichGebert/ponytail"
-                target="_blank"
-                rel="noreferrer"
-                className="text-xs font-normal text-primary underline hover:opacity-80"
-              >
-                (Ponytail)
-              </a>
-            </p>
-            <p className="text-sm text-text-muted">
-              YAGNI ladder → shortest diff, minimal code
-            </p>
-          </div>
-          <div className="flex items-center gap-3 shrink-0">
-            {ponytailEnabled && (
-              <div className="flex flex-col items-end gap-1">
-                <div className="flex items-center gap-1.5">
-                  {PONYTAIL_LEVELS.map((lvl) => (
-                    <button
-                      key={lvl.id}
-                      onClick={() => handlePonytailLevel(lvl.id)}
-                      className={`px-3 py-1.5 rounded text-xs font-medium border transition-colors ${
-                        ponytailLevel === lvl.id
-                          ? "bg-primary text-white border-primary"
-                          : "bg-transparent border-border text-text-muted hover:bg-surface-2"
-                      }`}
-                      title={lvl.desc}
-                    >
-                      {lvl.label}
-                    </button>
-                  ))}
-                </div>
-                <p className="text-xs text-primary">
-                  {PONYTAIL_LEVELS.find((lvl) => lvl.id === ponytailLevel)?.desc}
-                </p>
-              </div>
-            )}
-            <Toggle
-              checked={ponytailEnabled}
-              onChange={() => handlePonytailEnabled(!ponytailEnabled)}
-            />
-          </div>
+          <Link
+            href="/dashboard/token-saver"
+            className="shrink-0 inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-sm font-medium text-text-main hover:border-primary/40 hover:text-primary transition-colors"
+          >
+            Open
+            <span className="material-symbols-outlined text-[16px]">arrow_forward</span>
+          </Link>
         </div>
       </Card>
 

package/src/app/(dashboard)/dashboard/endpoint/endpointConstants.js

@@ -0,0 +1,32 @@
+export const WENYAN_LOCALES = ["zh-CN", "zh-TW"];
+
+export const TUNNEL_BENEFITS = [
+  { icon: "public", title: "Access Anywhere", desc: "Use your API from any network" },
+  { icon: "group", title: "Share Endpoint", desc: "Share URL with team members" },
+  { icon: "code", title: "Use in Cursor/Cline", desc: "Connect AI tools remotely" },
+  { icon: "lock", title: "Encrypted", desc: "End-to-end TLS via Cloudflare" },
+];
+
+export const TUNNEL_PING_INTERVAL_MS = 2000;
+export const TUNNEL_PING_MAX_MS = 300000;
+export const STATUS_POLL_FAST_MS = 5000;
+export const STATUS_POLL_SLOW_MS = 30000;
+export const REACHABLE_MISS_THRESHOLD = 5;
+export const CLIENT_PING_FAST_MS = 10000;
+export const CLIENT_PING_SLOW_MS = 60000;
+export const CLIENT_PING_TIMEOUT_MS = 5000;
+
+export const CAVEMAN_LEVELS = [
+  { id: "lite", label: "Lite", desc: "Drop filler, keep grammar" },
+  { id: "full", label: "Full", desc: "Drop articles, fragments OK" },
+  { id: "ultra", label: "Ultra", desc: "Telegraphic, max compression" },
+  { id: "wenyan-lite", label: "文 Lite", desc: "Classical Chinese, light compression", wenyan: true },
+  { id: "wenyan", label: "文 Full", desc: "Maximum 文言文, 80-90% reduction", wenyan: true },
+  { id: "wenyan-ultra", label: "文 Ultra", desc: "Extreme classical compression", wenyan: true },
+];
+
+export const PONYTAIL_LEVELS = [
+  { id: "lite", label: "Lite", desc: "Build asked, name lazier option" },
+  { id: "full", label: "Full", desc: "Ladder enforced: stdlib/native first" },
+  { id: "ultra", label: "Ultra", desc: "YAGNI extremist, deletion first" },
+];

package/src/app/(dashboard)/dashboard/pxpipe/PxpipeClient.js

@@ -0,0 +1,283 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import { Card, Button } from "@/shared/components";
+
+const fmtTokens = (n) => {
+  if (n >= 1000000) return `${(n / 1000000).toFixed(2)}M`;
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
+  return String(n || 0);
+};
+
+const fmtUptime = (ms) => {
+  if (!ms || ms <= 0) return "—";
+  const m = Math.floor(ms / 60000);
+  const h = Math.floor(m / 60);
+  return h > 0 ? `${h}h${String(m % 60).padStart(2, "0")}m` : `${m}m`;
+};
+
+const WINDOW_TABS = [
+  { id: "today", label: "Today" },
+  { id: "yesterday", label: "Yesterday" },
+  { id: "last7d", label: "7 days" },
+  { id: "last30d", label: "30 days" },
+  { id: "all", label: "All time" },
+];
+
+const REASON_LABELS = {
+  applied: "Prompt exceeded threshold",
+  below_threshold: "Below size threshold",
+  not_profitable: "Compression not profitable",
+  below_min_chars: "Below minimum chars",
+  below_min_tokens: "Below minimum tokens",
+  unsupported_model: "Model not in allowlist",
+  unsupported_format: "Non-Claude request format",
+  timeout: "Compression timed out",
+  transform_error: "Transform error",
+  passthrough: "Passthrough",
+  disabled: "Disabled",
+  not_installed: "Not installed",
+};
+
+function SummaryCard({ label, value, sub, tone }) {
+  return (
+    <Card className="p-4">
+      <p className="text-xs text-text-muted uppercase tracking-wide">{label}</p>
+      <p className={`text-xl font-semibold mt-1 ${tone || ""}`}>{value}</p>
+      {sub && <p className="text-xs text-text-muted mt-0.5">{sub}</p>}
+    </Card>
+  );
+}
+
+export default function PxpipeClient() {
+  const [status, setStatus] = useState(null);
+  const [health, setHealth] = useState(null);
+  const [stats, setStats] = useState(null);
+  const [logs, setLogs] = useState(null);
+  const [windowId, setWindowId] = useState("last7d");
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [statusRes, statsRes, logsRes] = await Promise.all([
+        fetch("/api/pxpipe/status", { headers: { "Cache-Control": "no-store" } }),
+        fetch("/api/pxpipe/stats"),
+        fetch("/api/pxpipe/logs?limit=50"),
+      ]);
+      setStatus(await statusRes.json());
+      setStats(await statsRes.json());
+      setLogs(await logsRes.json());
+      const healthRes = await fetch("/api/pxpipe/health", { method: "POST" });
+      setHealth(await healthRes.json());
+    } catch {
+      /* sections render placeholders */
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const w = stats?.windows?.[windowId];
+  const statusLabel = !status
+    ? "—"
+    : !status.installed
+      ? "Not installed"
+      : health?.healthy
+        ? "Healthy"
+        : status.running
+          ? "Running"
+          : "Stopped";
+
+  return (
+    <div className="space-y-6 p-6">
+      <div className="flex items-center justify-between flex-wrap gap-3">
+        <h2 className="text-lg font-semibold flex items-center gap-2">
+          <span className="material-symbols-outlined text-primary">image</span>
+          PXPIPE Dashboard
+        </h2>
+        <div className="flex items-center gap-2">
+          <a href="/dashboard/token-saver" className="text-xs text-primary underline hover:opacity-80">
+            Token Saver settings
+          </a>
+          <Button size="sm" variant="ghost" onClick={refresh} disabled={loading}>
+            {loading ? "Refreshing…" : "Refresh"}
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
+        <SummaryCard
+          label="Status"
+          value={statusLabel}
+          tone={health?.healthy ? "text-success" : status?.installed ? "text-warning" : "text-text-muted"}
+          sub={status?.enabled ? "Enabled in pipeline" : "Disabled in pipeline"}
+        />
+        <SummaryCard label="Version" value={status?.version ? `v${status.version}` : "—"} sub="pxpipe-proxy" />
+        <SummaryCard label="Uptime" value={fmtUptime(status?.uptimeMs)} sub="module loaded" />
+        <SummaryCard label="Requests" value={w ? w.requests.toLocaleString() : "—"} />
+        <SummaryCard label="Compressed" value={w ? w.compressed.toLocaleString() : "—"} tone="text-success" />
+        <SummaryCard label="Bypassed" value={w ? w.bypassed.toLocaleString() : "—"} />
+      </div>
+
+      <Card className="p-4">
+        <div className="flex items-center justify-between flex-wrap gap-3 mb-4">
+          <h3 className="font-medium">Token savings (estimated)</h3>
+          <div className="flex items-center gap-1 rounded-lg border border-border bg-bg-subtle p-1">
+            {WINDOW_TABS.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setWindowId(tab.id)}
+                className={`px-3 py-1 rounded-md text-xs font-medium transition-colors ${
+                  windowId === tab.id
+                    ? "bg-primary text-white shadow-sm"
+                    : "text-text-muted hover:text-text hover:bg-bg-hover"
+                }`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
+          <div>
+            <p className="text-xs text-text-muted">Original tokens</p>
+            <p className="text-lg font-semibold">{w ? fmtTokens(w.tokensBeforeEst) : "—"}</p>
+          </div>
+          <div>
+            <p className="text-xs text-text-muted">After PXPIPE</p>
+            <p className="text-lg font-semibold">{w ? fmtTokens(w.tokensAfterEst) : "—"}</p>
+          </div>
+          <div>
+            <p className="text-xs text-text-muted">Saved</p>
+            <p className="text-lg font-semibold text-success">{w ? fmtTokens(w.tokensSavedEst) : "—"}</p>
+          </div>
+          <div>
+            <p className="text-xs text-text-muted">Reduction</p>
+            <p className="text-lg font-semibold text-success">{w ? `${w.savedPct}%` : "—"}</p>
+          </div>
+        </div>
+        <p className="text-xs text-text-muted mt-3">
+          Estimates from body size before/after imaging; billed usage per request
+          (recorded on the Usage page) remains the ground truth. Images generated:{" "}
+          {w ? w.imagesGenerated.toLocaleString() : "—"} · avg compression time:{" "}
+          {w ? `${w.avgCompressionMs}ms` : "—"} · errors: {w ? w.errors : "—"}
+        </p>
+      </Card>
+
+      <Card className="p-4">
+        <h3 className="font-medium mb-3">Tokens saved — last 30 days</h3>
+        {stats?.timeline?.some((d) => d.tokensSavedEst > 0) ? (
+          <ResponsiveContainer width="100%" height={220}>
+            <AreaChart data={stats.timeline} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
+              <defs>
+                <linearGradient id="gradPxpipe" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#10b981" stopOpacity={0.25} />
+                  <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" strokeOpacity={0.2} />
+              <XAxis dataKey="date" tick={{ fontSize: 11 }} tickFormatter={(d) => d.slice(5)} />
+              <YAxis tick={{ fontSize: 11 }} tickFormatter={fmtTokens} width={48} />
+              <Tooltip formatter={(v) => [fmtTokens(v), "Tokens saved"]} labelFormatter={(d) => d} />
+              <Area type="monotone" dataKey="tokensSavedEst" stroke="#10b981" fill="url(#gradPxpipe)" strokeWidth={2} />
+            </AreaChart>
+          </ResponsiveContainer>
+        ) : (
+          <div className="h-32 flex items-center justify-center text-text-muted text-sm">
+            No savings recorded yet — enable PXPIPE in the Token Saver and route a large Claude-format request.
+          </div>
+        )}
+      </Card>
+
+      <Card className="p-4">
+        <h3 className="font-medium mb-3">History</h3>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="text-left text-xs text-text-muted border-b border-border">
+                <th className="py-2 pr-3">Time</th>
+                <th className="py-2 pr-3">Model</th>
+                <th className="py-2 pr-3 text-right">Original</th>
+                <th className="py-2 pr-3 text-right">Compressed</th>
+                <th className="py-2 pr-3 text-right">Saved</th>
+                <th className="py-2 pr-3 text-right">%</th>
+                <th className="py-2 pr-3 text-right">Duration</th>
+                <th className="py-2">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {(stats?.recent || []).slice(0, 50).map((ev, i) => (
+                <tr key={`${ev.ts}-${i}`} className="border-b border-border/50">
+                  <td className="py-1.5 pr-3 whitespace-nowrap text-text-muted">
+                    {new Date(ev.ts).toLocaleString()}
+                  </td>
+                  <td className="py-1.5 pr-3 font-mono text-xs">{ev.provider ? `${ev.provider}/${ev.model}` : ev.model || "—"}</td>
+                  <td className="py-1.5 pr-3 text-right font-mono text-xs">
+                    {ev.applied ? fmtTokens(ev.tokensBeforeEst) : "—"}
+                  </td>
+                  <td className="py-1.5 pr-3 text-right font-mono text-xs">
+                    {ev.applied ? fmtTokens(ev.tokensAfterEst) : "—"}
+                  </td>
+                  <td className="py-1.5 pr-3 text-right font-mono text-xs text-success">
+                    {ev.applied ? fmtTokens(ev.tokensSavedEst) : "—"}
+                  </td>
+                  <td className="py-1.5 pr-3 text-right font-mono text-xs">
+                    {ev.applied ? `${ev.savedPct}%` : "—"}
+                  </td>
+                  <td className="py-1.5 pr-3 text-right font-mono text-xs">
+                    {ev.durationMs != null ? `${ev.durationMs}ms` : "—"}
+                  </td>
+                  <td className="py-1.5">
+                    <span
+                      className={`text-xs px-2 py-0.5 rounded ${
+                        ev.applied
+                          ? "bg-success/15 text-success"
+                          : ev.reason === "transform_error" || ev.reason === "timeout"
+                            ? "bg-danger/15 text-danger"
+                            : "bg-warning/15 text-warning"
+                      }`}
+                      title={ev.detail || ""}
+                    >
+                      {ev.applied ? "Compressed" : REASON_LABELS[ev.reason] || ev.reason}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+              {(!stats?.recent || stats.recent.length === 0) && (
+                <tr>
+                  <td colSpan={8} className="py-6 text-center text-text-muted text-sm">
+                    No PXPIPE activity yet
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+
+      <Card className="p-4" id="logs">
+        <h3 className="font-medium mb-3">PXPIPE Logs</h3>
+        {logs?.installLog ? (
+          <pre className="rounded bg-black/5 dark:bg-white/5 p-3 text-xs font-mono overflow-x-auto max-h-64 overflow-y-auto whitespace-pre-wrap">
+            {logs.installLog}
+          </pre>
+        ) : (
+          <p className="text-sm text-text-muted">No install log yet.</p>
+        )}
+      </Card>
+    </div>
+  );
+}

package/src/app/(dashboard)/dashboard/pxpipe/page.js

@@ -0,0 +1,5 @@
+import PxpipeClient from "./PxpipeClient";
+
+export default function PxpipePage() {
+  return <PxpipeClient />;
+}