Merge remote-tracking branch 'upstream/master'

# Conflicts:
#	.gitignore
#	open-sse/handlers/chatCore.js

src/app/(dashboard)/dashboard/providers/[id]/AddApiKeyModal.js

@@ -41,6 +41,10 @@ export default function AddApiKeyModal({ isOpen, provider, providerName, isCompa
   const [validating, setValidating] = useState(false);
   const [validationResult, setValidationResult] = useState(null);
   const [saving, setSaving] = useState(false);
+  const bulkPlaceholder = isCloudflareAi
+    ? `name1|sk-key1|acc123456\nname2|sk-key2|def789012\nsk-key-only-auto-named`
+    : BULK_PLACEHOLDER;
+
   const [mode, setMode] = useState("single"); // "single" | "bulk"
   const [bulkText, setBulkText] = useState("");
   const [bulkResult, setBulkResult] = useState(null); // { success, failed }
@@ -135,14 +139,31 @@ export default function AddApiKeyModal({ isOpen, provider, providerName, isCompa
     let failed = 0;
     for (let i = 0; i < lines.length; i++) {
       const parts = lines[i].split("|");
-      const apiKey = parts.length >= 2 ? parts.slice(1).join("|").trim() : parts[0].trim();
       const baseName = parts.length >= 2 ? parts[0].trim() : "Key";
       const name = `${baseName} ${i + 1}`;
+
+      let apiKey;
+      let providerSpecificData;
+      if (isCloudflareAi && parts.length >= 3) {
+        // Format: name|apiKey|accountId
+        apiKey = parts.slice(1, -1).join("|").trim();
+        providerSpecificData = { accountId: parts[parts.length - 1].trim() };
+      } else {
+        apiKey = parts.length >= 2 ? parts.slice(1).join("|").trim() : parts[0].trim();
+      }
+
       try {
         const res = await fetch("/api/providers", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ provider, apiKey, name, priority: 1, testStatus: "unknown" }),
+          body: JSON.stringify({
+            provider,
+            apiKey,
+            name,
+            priority: 1,
+            testStatus: "unknown",
+            ...(providerSpecificData ? { providerSpecificData } : {}),
+          }),
         });
         if (res.ok) success++;
         else failed++;
@@ -168,10 +189,15 @@ export default function AddApiKeyModal({ isOpen, provider, providerName, isCompa
 
         {mode === "bulk" && (
           <div className="flex flex-col gap-3">
-            <p className="text-xs text-text-muted">One key per line. Format: <code>name|apiKey</code> or just <code>apiKey</code> (auto-named by index).</p>
+            <p className="text-xs text-text-muted">
+              {isCloudflareAi
+                ? <>One key per line. Format: <code>name|apiKey|accountId</code> or just <code>apiKey</code> (auto-named by index).</>
+                : <>One key per line. Format: <code>name|apiKey</code> or just <code>apiKey</code> (auto-named by index).</>
+              }
+            </p>
             <textarea
               className="w-full rounded border border-accent/30 bg-sidebar p-2 text-sm font-mono resize-y min-h-[140px] focus:outline-none focus:ring-1 focus:ring-primary"
-              placeholder={BULK_PLACEHOLDER}
+              placeholder={bulkPlaceholder}
               value={bulkText}
               onChange={(e) => setBulkText(e.target.value)}
             />

src/app/(dashboard)/dashboard/providers/[id]/ModelRow.js

@@ -1,7 +1,8 @@
 import PropTypes from "prop-types";
 import { CapacityBadges } from "@/shared/components";
 
-export default function ModelRow({ model, fullModel, alias, copied, onCopy, testStatus, isCustom, isFree, onDeleteAlias, onTest, isTesting, onDisable, caps }) {
+export default function ModelRow({ model, fullModel, alias, copied, onCopy, testStatus, isCustom, isFree, onDeleteAlias, onTest, isTesting, onDisable, caps, thinkingSuffix }) {
+  const displayModel = thinkingSuffix ? `${fullModel}(${thinkingSuffix})` : fullModel;
   const borderColor = testStatus === "ok"
     ? "border-green-500/40"
     : testStatus === "error"
@@ -24,7 +25,7 @@ export default function ModelRow({ model, fullModel, alias, copied, onCopy, test
           {testStatus === "ok" ? "check_circle" : testStatus === "error" ? "cancel" : "smart_toy"}
         </span>
         <div className="flex min-w-0 flex-1 flex-col gap-1">
-          <code className="max-w-[72vw] truncate rounded bg-sidebar px-1.5 py-0.5 font-mono text-xs text-text-muted sm:max-w-[360px]">{fullModel}</code>
+          <code className="max-w-[72vw] truncate rounded bg-sidebar px-1.5 py-0.5 font-mono text-xs text-text-muted sm:max-w-[360px]">{displayModel}</code>
           <span className="flex min-w-0 items-center text-[9px] gap-1 pl-1">
             {model.name && <span className="truncate text-[9px] italic text-text-muted/70">{model.name}</span>}
             <CapacityBadges caps={caps} colorOverride="text-text-muted/70" size={12} />
@@ -48,7 +49,7 @@ export default function ModelRow({ model, fullModel, alias, copied, onCopy, test
         )}
         <div className="relative shrink-0 group/btn">
           <button
-            onClick={() => onCopy(fullModel, `model-${model.id}`)}
+            onClick={() => onCopy(displayModel, `model-${model.id}`)}
             className="rounded p-0.5 text-text-muted hover:bg-sidebar hover:text-primary"
           >
             <span className="material-symbols-outlined text-sm">
@@ -97,4 +98,5 @@ ModelRow.propTypes = {
   isTesting: PropTypes.bool,
   onDisable: PropTypes.func,
   caps: PropTypes.object,
+  thinkingSuffix: PropTypes.string,
 };

src/app/(dashboard)/dashboard/providers/[id]/page.js

@@ -5,8 +5,9 @@ import { useParams, useRouter } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
 import { Card, Button, Badge, Input, Modal, CardSkeleton, OAuthModal, KiroOAuthWrapper, CursorAuthModal, IFlowCookieModal, GitLabAuthModal, Toggle, Select, EditConnectionModal, NoAuthProxyCard, ConfirmModal } from "@/shared/components";
-import { OAUTH_PROVIDERS, APIKEY_PROVIDERS, FREE_PROVIDERS, FREE_TIER_PROVIDERS, WEB_COOKIE_PROVIDERS, getProviderAlias, isOpenAICompatibleProvider, isAnthropicCompatibleProvider, AI_PROVIDERS, THINKING_CONFIG } from "@/shared/constants/providers";
+import { OAUTH_PROVIDERS, APIKEY_PROVIDERS, FREE_PROVIDERS, FREE_TIER_PROVIDERS, WEB_COOKIE_PROVIDERS, getProviderAlias, isOpenAICompatibleProvider, isAnthropicCompatibleProvider, AI_PROVIDERS } from "@/shared/constants/providers";
 import { getModelsByProviderId, getModelKind } from "@/shared/constants/models";
+import { getThinkingLevels } from "open-sse/providers/thinkingLevels.js";
 import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
 import { useModelCaps } from "@/shared/hooks/useModelCaps";
 import { translate } from "@/i18n/runtime";
@@ -147,11 +148,38 @@ export default function ProviderDetailPage() {
   const isAnthropicCompatible = isAnthropicCompatibleProvider(providerId);
   const isCompatible = isOpenAICompatible || isAnthropicCompatible;
   const hasDualAuthModes = !isCompatible && isOAuth && supportsApiKeyAuth;
-  const oauthConnectionLabel = providerId === "xai" ? "Grok Build OAuth" : "OAuth";
+  const oauthConnectionLabel =
+    providerId === "xai" ? "Grok Build OAuth"
+    : providerId === "grok-cli" ? "Grok CLI Device Login"
+    : "OAuth";
   const apiKeyConnectionLabel = providerId === "xai" ? "xAI API Key" : "API Key";
-  const thinkingConfig = AI_PROVIDERS[providerId]?.thinkingConfig || THINKING_CONFIG.extended;
-  
+  // Resolve suffix "(level)" for a model when a thinking level is picked and the model supports it.
+  const resolveThinkingSuffix = (modelId) => {
+    if (!thinkingMode || thinkingMode === "auto") return null;
+    const levels = getThinkingLevels(providerId, modelId);
+    return levels && levels.includes(thinkingMode) ? thinkingMode : null;
+  };
   const providerStorageAlias = isCompatible ? providerId : providerAlias;
+  // Union of levels across this provider's reasoning models — drives the level picker options.
+  // Include custom models too (e.g. manually added gpt-5.6-sol → max).
+  const providerThinkingLevels = (() => {
+    const set = new Set();
+    const seen = new Set();
+    const addLevels = (modelId) => {
+      if (!modelId || seen.has(modelId)) return;
+      seen.add(modelId);
+      const lv = getThinkingLevels(providerId, modelId);
+      if (lv) lv.forEach((l) => { if (l !== "none") set.add(l); });
+    };
+    for (const m of models) addLevels(m.id);
+    for (const m of kiloFreeModels) addLevels(m.id);
+    for (const entry of customModels) {
+      if (entry.providerAlias !== providerStorageAlias) continue;
+      if ((entry.kind || entry.type || "llm") !== "llm") continue;
+      addLevels(entry.id);
+    }
+    return set.size ? ["auto", ...[...set]] : null;
+  })();
   const providerDisplayAlias = isCompatible
     ? (providerNode?.prefix || providerId)
     : providerAlias;
@@ -1065,6 +1093,7 @@ export default function ProviderDetailPage() {
             isCustom
             isFree={false}
             caps={getCaps(`${providerId}/${model.id}`)}
+            thinkingSuffix={resolveThinkingSuffix(model.id)}
           />
         ))}
 
@@ -1090,6 +1119,7 @@ export default function ProviderDetailPage() {
               isFree={model.isFree}
               onDisable={() => handleDisableModel(model.id)}
               caps={getCaps(`${providerId}/${model.id}`)}
+              thinkingSuffix={resolveThinkingSuffix(model.id)}
             />
           );
         })}
@@ -1395,21 +1425,6 @@ export default function ProviderDetailPage() {
                   )}
                 </>
               )}
-              {/* Thinking config */}
-              {/* {thinkingConfig && (
-                <div className="flex items-center gap-2">
-                  <span className="text-xs text-text-muted font-medium">Thinking</span>
-                  <select
-                    value={thinkingMode}
-                    onChange={(e) => handleThinkingModeChange(e.target.value)}
-                    className="text-xs px-2 py-1 border border-border rounded-md bg-background focus:outline-none focus:border-primary"
-                  >
-                    {thinkingConfig.options.map((opt) => (
-                      <option key={opt} value={opt}>{opt.charAt(0).toUpperCase() + opt.slice(1)}</option>
-                    ))}
-                  </select>
-                </div>
-              )} */}
               {/* Round Robin toggle */}
               <div className="flex flex-wrap items-center gap-2">
                 <span className="text-xs text-text-muted font-medium">Round Robin</span>
@@ -1580,9 +1595,23 @@ export default function ProviderDetailPage() {
       {/* Models */}
       <Card>
         <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-          <h2 className="text-lg font-semibold">
-            {"Available Models"}
-          </h2>
+          <div className="flex items-center gap-3">
+            <h2 className="text-lg font-semibold">
+              {"Available Models"}
+            </h2>
+            {providerThinkingLevels && (
+              <select
+                value={thinkingMode}
+                onChange={(e) => handleThinkingModeChange(e.target.value)}
+                title="Appends (level) suffix to copied model names"
+                className="rounded-md border border-border bg-background px-2 py-1 text-xs focus:border-primary focus:outline-none"
+              >
+                {providerThinkingLevels.map((opt) => (
+                  <option key={opt} value={opt}>{`Thinking: ${opt.charAt(0).toUpperCase() + opt.slice(1)}`}</option>
+                ))}
+              </select>
+            )}
+          </div>
           {!isCompatible && (() => {
             const allIds = [
               ...models,

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>
+  );
+}

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

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

src/app/(dashboard)/dashboard/token-saver/TokenSaverClient.js

@@ -1,7 +1,7 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
-import { Card, Button, Input, Modal, Toggle } from "@/shared/components";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { Card, Button, Input, Modal, Toggle, ConfirmModal } from "@/shared/components";
 import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
 import { getCurrentLocale, onLocaleChange } from "@/i18n/runtime";
 import {
@@ -24,10 +24,39 @@ export default function TokenSaverClient() {
     useState(false);
   const [headroomActionLoading, setHeadroomActionLoading] = useState(false);
   const [headroomActionError, setHeadroomActionError] = useState("");
+  const [headroomExtras, setHeadroomExtras] = useState({
+    version: null,
+    extras: { code: false, ml: false },
+    available: ["code", "ml"],
+    loading: false,
+  });
+  const [pendingExtras, setPendingExtras] = useState([]);
+  const [extrasActionLoading, setExtrasActionLoading] = useState(false);
+  const [extrasActionError, setExtrasActionError] = useState("");
+  const [removingExtra, setRemovingExtra] = useState(null);
+  const [installLog, setInstallLog] = useState("");
+  const [extrasConfirm, setExtrasConfirm] = useState(null);
+  const [codeAware, setCodeAware] = useState(false);
+  const [kompress, setKompress] = useState(true);
+  const [restartingProxy, setRestartingProxy] = useState(false);
+  const logPollRef = useRef(null);
   const [cavemanEnabled, setCavemanEnabled] = useState(false);
   const [cavemanLevel, setCavemanLevel] = useState("full");
   const [ponytailEnabled, setPonytailEnabled] = useState(false);
   const [ponytailLevel, setPonytailLevel] = useState("full");
+  const [pxpipeEnabled, setPxpipeEnabled] = useState(false);
+  const [pxpipeMinChars, setPxpipeMinChars] = useState(25000);
+  const [pxpipeStatus, setPxpipeStatus] = useState({
+    installed: false,
+    installing: false,
+    running: false,
+    version: null,
+    loading: true,
+  });
+  const [pxpipeHealth, setPxpipeHealth] = useState(null);
+  const [showPxpipeModal, setShowPxpipeModal] = useState(false);
+  const [pxpipeActionLoading, setPxpipeActionLoading] = useState(false);
+  const [pxpipeActionError, setPxpipeActionError] = useState("");
   const [locale, setLocale] = useState("en");
 
   const { copied, copy } = useCopyToClipboard();
@@ -102,6 +131,39 @@ export default function TokenSaverClient() {
       });
       const data = await res.json();
       setHeadroomStatus({ ...data, loading: false });
+      if (!data?.installed) {
+        setHeadroomExtras({
+          version: null,
+          extras: { code: false, ml: false },
+          available: ["code", "ml"],
+          loading: false,
+        });
+        setPendingExtras([]);
+        return;
+      }
+      try {
+        const er = await fetch("/api/headroom/extras", {
+          headers: { "Cache-Control": "no-store" },
+        });
+        if (!er.ok) throw new Error("extras status failed");
+        const ed = await er.json();
+        setHeadroomExtras((s) => ({
+          ...s,
+          version: ed.version ?? null,
+          extras: ed.extras || { code: false, ml: false },
+          available: ed.available || ["code", "ml"],
+          loading: false,
+        }));
+        setPendingExtras([]);
+      } catch {
+        setHeadroomExtras({
+          version: null,
+          extras: { code: false, ml: false },
+          available: ["code", "ml"],
+          loading: false,
+        });
+        setPendingExtras([]);
+      }
     } catch {
       setHeadroomStatus({
         installed: false,
@@ -109,6 +171,13 @@ export default function TokenSaverClient() {
         python: null,
         loading: false,
       });
+      setHeadroomExtras({
+        version: null,
+        extras: { code: false, ml: false },
+        available: ["code", "ml"],
+        loading: false,
+      });
+      setPendingExtras([]);
     }
   }, []);
 
@@ -137,6 +206,138 @@ export default function TokenSaverClient() {
     }
   }, [refreshHeadroomStatus]);
 
+  const togglePendingExtra = (extra) => {
+    setPendingExtras((cur) =>
+      cur.includes(extra) ? cur.filter((e) => e !== extra) : [...cur, extra]
+    );
+  };
+
+  // Poll the install log tail while a pip install/uninstall is running.
+  const startLogPolling = useCallback(() => {
+    setInstallLog("");
+    if (logPollRef.current) clearInterval(logPollRef.current);
+    const tick = async () => {
+      try {
+        const r = await fetch("/api/headroom/extras?log=1", {
+          headers: { "Cache-Control": "no-store" },
+        });
+        const d = await r.json().catch(() => ({}));
+        if (typeof d.log === "string") setInstallLog(d.log);
+      } catch { /* ignore transient poll errors */ }
+    };
+    tick();
+    logPollRef.current = setInterval(tick, 1500);
+  }, []);
+
+  const stopLogPolling = useCallback(() => {
+    if (logPollRef.current) {
+      clearInterval(logPollRef.current);
+      logPollRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => () => stopLogPolling(), [stopLogPolling]);
+
+  const installExtrasConfirmed = useCallback(async () => {
+    if (pendingExtras.length === 0) return;
+    setExtrasActionLoading(true);
+    setExtrasActionError("");
+    startLogPolling();
+    try {
+      const res = await fetch("/api/headroom/extras", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ extras: pendingExtras }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(data.error || "Install failed");
+      setHeadroomExtras((s) => ({
+        ...s,
+        version: data.version ?? s.version,
+        extras: data.extras || s.extras,
+      }));
+      setPendingExtras([]);
+    } catch (e) {
+      setExtrasActionError(e.message);
+    } finally {
+      stopLogPolling();
+      setExtrasActionLoading(false);
+    }
+  }, [pendingExtras, startLogPolling, stopLogPolling]);
+
+  const removeExtraConfirmed = useCallback(async (extra) => {
+    setRemovingExtra(extra);
+    setExtrasActionError("");
+    startLogPolling();
+    try {
+      const res = await fetch("/api/headroom/extras", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ extras: [extra] }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(data.error || "Remove failed");
+      setHeadroomExtras((s) => ({
+        ...s,
+        version: data.version ?? s.version,
+        extras: data.extras || s.extras,
+      }));
+    } catch (e) {
+      setExtrasActionError(e.message);
+    } finally {
+      stopLogPolling();
+      setRemovingExtra(null);
+    }
+  }, [startLogPolling, stopLogPolling]);
+
+  const handleInstallExtras = useCallback(() => {
+    if (pendingExtras.length === 0) return;
+    // Warn about the heavy ~1GB torch download before installing [ml].
+    if (pendingExtras.includes("ml")) {
+      setExtrasConfirm({
+        title: "Install [ml]",
+        message: "[ml] downloads ~1 GB (torch + huggingface-hub). Continue?",
+        confirmText: "Install",
+        variant: "primary",
+        onConfirm: installExtrasConfirmed,
+      });
+      return;
+    }
+    installExtrasConfirmed();
+  }, [pendingExtras, installExtrasConfirmed]);
+
+  const handleRemoveExtra = useCallback((extra) => {
+    setExtrasConfirm({
+      title: `Remove [${extra}]`,
+      message: `Remove [${extra}] and its packages?`,
+      confirmText: "Remove",
+      variant: "danger",
+      onConfirm: () => removeExtraConfirmed(extra),
+    });
+  }, [removeExtraConfirmed]);
+
+  // Toggle an extra's active state (persist setting), then restart the proxy so
+  // the new --code-aware / --disable-kompress flags take effect.
+  const toggleExtraActive = useCallback(async (extra, value) => {
+    setExtrasActionError("");
+    if (extra === "code") setCodeAware(value);
+    if (extra === "ml") setKompress(value);
+    const key = extra === "code" ? "headroomCodeAware" : "headroomKompress";
+    await patchSetting({ [key]: value });
+    if (!headroomStatus.running) return;
+    setRestartingProxy(true);
+    try {
+      const res = await fetch("/api/headroom/restart", { method: "POST" });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(data.error || "Restart failed");
+      await refreshHeadroomStatus();
+    } catch (e) {
+      setExtrasActionError(e.message);
+    } finally {
+      setRestartingProxy(false);
+    }
+  }, [headroomStatus.running, refreshHeadroomStatus]);
+
   const handleCavemanLevel = (level) => {
     setCavemanLevel(level);
     patchSetting({ cavemanLevel: level });
@@ -152,6 +353,59 @@ export default function TokenSaverClient() {
     patchSetting({ ponytailLevel: level });
   };
 
+  const refreshPxpipeStatus = useCallback(async () => {
+    setPxpipeStatus((s) => ({ ...s, loading: true }));
+    try {
+      const res = await fetch("/api/pxpipe/status", {
+        headers: { "Cache-Control": "no-store" },
+      });
+      const data = await res.json();
+      setPxpipeStatus({ ...data, loading: false });
+      if (typeof data.minChars === "number") setPxpipeMinChars(data.minChars);
+    } catch {
+      setPxpipeStatus({ installed: false, installing: false, running: false, version: null, loading: false });
+    }
+  }, []);
+
+  const runPxpipeHealth = useCallback(async () => {
+    try {
+      const res = await fetch("/api/pxpipe/health", { method: "POST" });
+      setPxpipeHealth(await res.json());
+    } catch (e) {
+      setPxpipeHealth({ healthy: false, checks: [], error: e.message });
+    }
+  }, []);
+
+  const pxpipeAction = useCallback(
+    async (endpoint) => {
+      setPxpipeActionError("");
+      setPxpipeActionLoading(true);
+      try {
+        const res = await fetch(`/api/pxpipe/${endpoint}`, { method: "POST" });
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok) throw new Error(data.error || `PXPIPE ${endpoint} failed`);
+        await refreshPxpipeStatus();
+        await runPxpipeHealth();
+      } catch (e) {
+        setPxpipeActionError(e.message);
+      } finally {
+        setPxpipeActionLoading(false);
+      }
+    },
+    [refreshPxpipeStatus, runPxpipeHealth]
+  );
+
+  const handlePxpipeEnabled = (value) => {
+    setPxpipeEnabled(value);
+    patchSetting({ pxpipeEnabled: value });
+  };
+
+  const handlePxpipeMinCharsBlur = () => {
+    const next = Math.max(0, Number(pxpipeMinChars) || 25000);
+    setPxpipeMinChars(next);
+    patchSetting({ pxpipeMinChars: next });
+  };
+
   useEffect(() => {
     const loadSettings = async () => {
       try {
@@ -161,16 +415,22 @@ export default function TokenSaverClient() {
           setRtkEnabledState(data.rtkEnabled !== false);
           setHeadroomEnabled(!!data.headroomEnabled);
           setHeadroomUrl(data.headroomUrl || "http://localhost:8787");
+          setCodeAware(data.headroomCodeAware === true);
+          setKompress(data.headroomKompress !== false);
           setCavemanEnabled(!!data.cavemanEnabled);
           setCavemanLevel(data.cavemanLevel || "full");
           setPonytailEnabled(!!data.ponytailEnabled);
           setPonytailLevel(data.ponytailLevel || "full");
+          setPxpipeEnabled(!!data.pxpipeEnabled);
+          if (typeof data.pxpipeMinChars === "number") setPxpipeMinChars(data.pxpipeMinChars);
           refreshHeadroomStatus();
+          // PRD: run the PXPIPE health check automatically when the page opens
+          refreshPxpipeStatus().then(runPxpipeHealth);
         }
       } catch {}
     };
     loadSettings();
-  }, [refreshHeadroomStatus]);
+  }, [refreshHeadroomStatus, refreshPxpipeStatus, runPxpipeHealth]);
 
   const headroomRunning = !!headroomStatus.running;
   const headroomStatusLabel = headroomStatus.loading
@@ -187,6 +447,23 @@ export default function TokenSaverClient() {
   const headroomManaged =
     headroomLocalUrl && !!headroomStatus.managedPid;
 
+  const pxpipeHealthy = pxpipeHealth?.healthy === true;
+  const pxpipeStatusLabel = pxpipeStatus.loading
+    ? "Checking…"
+    : pxpipeStatus.installing
+      ? "Installing…"
+      : !pxpipeStatus.installed
+        ? "Not installed"
+        : pxpipeHealthy
+          ? "Healthy"
+          : pxpipeStatus.running
+            ? "Running"
+            : "Stopped";
+  const pxpipeChipClass =
+    pxpipeHealthy || pxpipeStatus.running
+      ? "bg-success/15 text-success"
+      : "bg-warning/15 text-warning";
+
   return (
     <div className="space-y-6 p-6">
       <Card id="rtk">
@@ -220,7 +497,7 @@ export default function TokenSaverClient() {
             onChange={() => handleRtkEnabled(!rtkEnabled)}
           />
         </div>
-        <div className="flex items-center justify-between py-4 border-b border-border gap-4 flex-wrap">
+        <div className="flex items-center justify-between py-4 gap-4 flex-wrap">
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-3 flex-wrap">
               <p className="font-medium">
@@ -257,7 +534,105 @@ export default function TokenSaverClient() {
             onChange={() => handleHeadroomEnabled(!headroomEnabled)}
           />
         </div>
-        <div className="flex items-center justify-between pt-4 gap-4 flex-wrap">
+        {headroomStatus.installed && (
+          <div className="mb-3 ml-1 pl-3 pb-4 border-l-2 border-border">
+            <div className="flex items-center gap-2 flex-wrap">
+              <span className="text-xs text-text-muted">
+                Compression extras
+                {headroomExtras.version ? ` · v${headroomExtras.version}` : ""}:
+              </span>
+              {headroomExtras.available.map((extra) => {
+                const installed = !!headroomExtras.extras[extra];
+                const pending = pendingExtras.includes(extra);
+                const extraTitle =
+                  extra === "code"
+                    ? "tree-sitter AST compression for code responses"
+                    : "Kompress-v2 HF model for prose/agentic traces (~+1GB)";
+
+                if (installed) {
+                  const active = extra === "code" ? codeAware : kompress;
+                  return (
+                    <div
+                      key={extra}
+                      className="flex items-center gap-1.5 text-xs px-2 py-1 rounded border border-success/40 bg-success/5 text-text"
+                      title={extraTitle}
+                    >
+                      <Toggle
+                        size="sm"
+                        checked={active}
+                        disabled={restartingProxy}
+                        onChange={() => toggleExtraActive(extra, !active)}
+                      />
+                      <span className="font-medium">[{extra}]</span>
+                      <button
+                        type="button"
+                        onClick={() => handleRemoveExtra(extra)}
+                        disabled={removingExtra === extra}
+                        className="ml-1 text-error underline hover:opacity-80 disabled:opacity-50"
+                        title={`Uninstall [${extra}]`}
+                      >
+                        {removingExtra === extra ? "Uninstalling…" : "Uninstall"}
+                      </button>
+                    </div>
+                  );
+                }
+
+                return (
+                  <label
+                    key={extra}
+                    className={`flex items-center gap-1.5 text-xs px-2 py-1 rounded border cursor-pointer transition-colors ${
+                      pending
+                        ? "border-primary bg-primary/10 text-primary"
+                        : "border-border text-text-muted hover:bg-surface-2"
+                    }`}
+                    title={extraTitle}
+                  >
+                    <input
+                      type="checkbox"
+                      className="w-3 h-3"
+                      checked={pending}
+                      onChange={() => togglePendingExtra(extra)}
+                    />
+                    <span className="font-medium">[{extra}]</span>
+                    <span className="opacity-70">not installed</span>
+                  </label>
+                );
+              })}
+              {pendingExtras.length > 0 && (
+                <button
+                  onClick={handleInstallExtras}
+                  disabled={extrasActionLoading}
+                  className="text-xs px-2.5 py-1 rounded bg-primary text-white hover:opacity-90 disabled:opacity-50"
+                >
+                  {extrasActionLoading
+                    ? "Installing…"
+                    : `Install [proxy,${pendingExtras.join(",")}]`}
+                </button>
+              )}
+            </div>
+            {extrasActionError && (
+              <p className="text-xs text-error mt-1">{extrasActionError}</p>
+            )}
+            {restartingProxy && (
+              <p className="text-xs text-text-muted mt-1">Restarting proxy…</p>
+            )}
+            {(extrasActionLoading || removingExtra) && installLog && (
+              <pre className="mt-2 max-h-32 overflow-auto rounded bg-surface-2 p-2 text-[10px] leading-tight text-text-muted whitespace-pre-wrap">
+                {installLog}
+              </pre>
+            )}
+            <p className="text-xs text-text-muted mt-1">
+              Installing adds the package; use <code>on</code>/<code>off</code>{" "}
+              to activate it (restarts the proxy). Default install is{" "}
+              <code>[proxy]</code> only (SmartCrusher for JSON). Adding{" "}
+              <code>[code]</code> enables AST compression
+              (Python/JS/TS/Go/Rust/Java/C/C++/Perl). Adding <code>[ml]</code>{" "}
+              enables the Kompress-v2 HF model for prose/agentic traces but
+              adds ~1 GB (torch + huggingface-hub).
+            </p>
+          </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">
               Compress LLM output{" "}
@@ -358,6 +733,52 @@ export default function TokenSaverClient() {
             />
           </div>
         </div>
+        {/* PXPIPE hidden from UI — experimental, not exposed to users yet */}
+        {false && (
+        <div className="flex items-center justify-between pt-4 mt-4 border-t border-border gap-4 flex-wrap">
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-3 flex-wrap">
+              <p className="font-medium">
+                Compress prompts as images{" "}
+                <a
+                  href="https://github.com/teamchong/pxpipe"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-xs font-normal text-primary underline hover:opacity-80"
+                >
+                  (PXPIPE)
+                </a>
+              </p>
+              <span className={`text-xs px-2 py-0.5 rounded ${pxpipeChipClass}`}>
+                {pxpipeStatusLabel}
+              </span>
+              <button
+                type="button"
+                onClick={() => setShowPxpipeModal(true)}
+                className="text-xs text-primary underline hover:opacity-80"
+              >
+                {pxpipeStatus.installed ? "Manage" : "Setup"}
+              </button>
+              <a
+                href="/dashboard/pxpipe"
+                className="text-xs text-primary underline hover:opacity-80"
+              >
+                Dashboard
+              </a>
+            </div>
+            <p className="text-sm text-text-muted mt-1">
+              Transforms large textual context into optimized images before
+              sending to the LLM. Ideal for huge prompts, tool outputs and long
+              conversations.
+            </p>
+          </div>
+          <Toggle
+            checked={pxpipeEnabled}
+            disabled={!pxpipeStatus.installed}
+            onChange={() => handlePxpipeEnabled(!pxpipeEnabled)}
+          />
+        </div>
+        )}
       </Card>
 
       <Modal
@@ -374,6 +795,16 @@ export default function TokenSaverClient() {
               {headroomStatusLabel}
             </span>
           </div>
+          {headroomRunning && (
+            <a
+              href="/api/headroom/proxy/dashboard"
+              target="_blank"
+              rel="noreferrer"
+              className="w-full rounded border border-border px-4 py-2 text-center text-sm hover:bg-surface-2"
+            >
+              Open Headroom Dashboard
+            </a>
+          )}
           <div className="flex flex-col gap-1">
             <p className="text-sm font-medium">Proxy URL</p>
             <Input
@@ -457,6 +888,128 @@ export default function TokenSaverClient() {
           </div>
         </div>
       </Modal>
+
+      <Modal
+        isOpen={false}
+        title={pxpipeStatus.installed ? "PXPIPE" : "Setup PXPIPE"}
+        onClose={() => setShowPxpipeModal(false)}
+      >
+        <div className="flex flex-col gap-4">
+          <p className="text-sm text-text-muted">
+            Compress prompts using multimodal encoding. Runs in-process — no
+            extra server or environment variables required.
+          </p>
+          <div className="flex items-center justify-between text-sm">
+            <span>Status</span>
+            <span className={pxpipeHealthy || pxpipeStatus.running ? "text-success" : "text-warning"}>
+              {pxpipeStatusLabel}
+              {pxpipeStatus.version ? ` · v${pxpipeStatus.version}` : ""}
+            </span>
+          </div>
+          {pxpipeHealth?.checks?.length > 0 && (
+            <div className="flex flex-col gap-1 rounded border border-border p-3">
+              <p className="text-sm font-medium mb-1">Health check</p>
+              {pxpipeHealth.checks.map((check) => (
+                <div key={check.id} className="flex items-center justify-between text-xs">
+                  <span className={check.ok ? "text-success" : "text-warning"}>
+                    {check.ok ? "●" : "○"} {check.label}
+                  </span>
+                  {check.detail && (
+                    <span className="text-text-muted font-mono truncate max-w-[50%]">{check.detail}</span>
+                  )}
+                </div>
+              ))}
+              {pxpipeHealth.error && (
+                <p className="text-xs text-warning mt-1">{pxpipeHealth.error}</p>
+              )}
+            </div>
+          )}
+          {!pxpipeStatus.installed ? (
+            <div className="flex flex-col gap-2">
+              <p className="text-sm text-warning">PXPIPE is not installed.</p>
+              <Button
+                onClick={() => pxpipeAction("install")}
+                fullWidth
+                disabled={pxpipeActionLoading || pxpipeStatus.installing}
+              >
+                {pxpipeActionLoading || pxpipeStatus.installing ? "Installing…" : "Install"}
+              </Button>
+              <p className="text-xs text-text-muted">
+                Installs the npm package <code className="font-mono">pxpipe-proxy</code> into
+                the 9Router data directory. May take a few minutes.
+              </p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 gap-2">
+              {pxpipeStatus.running ? (
+                <>
+                  <Button onClick={() => pxpipeAction("restart")} variant="ghost" disabled={pxpipeActionLoading}>
+                    Restart
+                  </Button>
+                  <Button onClick={() => pxpipeAction("stop")} variant="ghost" disabled={pxpipeActionLoading}>
+                    Stop
+                  </Button>
+                </>
+              ) : (
+                <Button onClick={() => pxpipeAction("start")} disabled={pxpipeActionLoading}>
+                  {pxpipeActionLoading ? "Starting…" : "Start"}
+                </Button>
+              )}
+              <Button onClick={() => pxpipeAction("install")} variant="ghost" disabled={pxpipeActionLoading}>
+                Repair
+              </Button>
+              <a
+                href="/dashboard/pxpipe#logs"
+                className="col-span-2 rounded border border-border px-4 py-2 text-center text-sm hover:bg-surface-2"
+              >
+                Open Logs
+              </a>
+            </div>
+          )}
+          <div className="flex flex-col gap-1">
+            <p className="text-sm font-medium">Minimum prompt size (chars)</p>
+            <Input
+              value={String(pxpipeMinChars)}
+              onChange={(e) => setPxpipeMinChars(e.target.value)}
+              onBlur={handlePxpipeMinCharsBlur}
+              placeholder="25000"
+              className="font-mono text-sm"
+            />
+            <p className="text-xs text-text-muted">
+              Requests smaller than this bypass PXPIPE and are sent as-is.
+            </p>
+          </div>
+          {pxpipeActionError && (
+            <p className="text-sm text-warning">{pxpipeActionError}</p>
+          )}
+          <div className="flex gap-2">
+            <Button
+              onClick={() => refreshPxpipeStatus().then(runPxpipeHealth)}
+              variant="ghost"
+              fullWidth
+            >
+              Recheck
+            </Button>
+            <Button onClick={() => setShowPxpipeModal(false)} fullWidth>
+              Done
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
+      <ConfirmModal
+        isOpen={!!extrasConfirm}
+        onClose={() => setExtrasConfirm(null)}
+        onConfirm={() => {
+          const fn = extrasConfirm?.onConfirm;
+          setExtrasConfirm(null);
+          fn?.();
+        }}
+        title={extrasConfirm?.title}
+        message={extrasConfirm?.message}
+        confirmText={extrasConfirm?.confirmText}
+        variant={extrasConfirm?.variant}
+      />
     </div>
   );
 }

src/app/(dashboard)/dashboard/usage/components/OverviewCards.js

@@ -8,7 +8,7 @@ const fmtCost = (n) => `$${(n || 0).toFixed(2)}`;
 
 export default function OverviewCards({ stats }) {
   return (
-    <div className="grid min-w-0 grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 sm:gap-4">
+    <div className="grid min-w-0 grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 sm:gap-4">
       <Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
         <span className="text-text-muted text-sm uppercase font-semibold">Total Requests</span>
         <span className="truncate text-2xl font-bold">{fmt(stats.totalRequests)}</span>
@@ -17,12 +17,10 @@ export default function OverviewCards({ stats }) {
         <span className="text-text-muted text-sm uppercase font-semibold">Total Input Tokens</span>
         <span className="truncate text-2xl font-bold text-primary">{fmt(stats.totalPromptTokens)}</span>
       </Card>
-      {/* Temporarily hidden: Cached Tokens card
       <Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
         <span className="text-text-muted text-sm uppercase font-semibold">Cached Tokens</span>
         <span className="truncate text-2xl font-bold text-info">{fmt(stats.totalCachedTokens)}</span>
       </Card>
-      */}
       <Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
         <span className="text-text-muted text-sm uppercase font-semibold">Output Tokens</span>
         <span className="truncate text-2xl font-bold text-success">{fmt(stats.totalCompletionTokens)}</span>

src/app/(dashboard)/dashboard/usage/components/ProviderLimits/utils.js

@@ -475,6 +475,23 @@ export function parseQuotaData(provider, data) {
         }
         break;
 
+      case "grok-cli":
+        // Grok Build credits (on-demand window + prepaid balance).
+        // Do NOT forward absolute `remaining` — getRemainingPercentage treats
+        // it as a 0–100 percentage (same as Qoder). Use remainingPercentage.
+        if (data.quotas) {
+          Object.entries(data.quotas).forEach(([name, quota]) => {
+            normalizedQuotas.push({
+              name,
+              used: quota.used || 0,
+              total: quota.total || 0,
+              resetAt: quota.resetAt || null,
+              remainingPercentage: quota.remainingPercentage,
+            });
+          });
+        }
+        break;
+
       default:
         // Generic fallback for unknown providers
         if (data.quotas) {

src/app/(dashboard)/dashboard/usage/components/RequestDetailsTab.js

@@ -412,7 +412,49 @@ export default function RequestDetailsTab() {
                 </span>
               </div>
             </div>
-            
+
+            {selectedDetail.pxpipe && (
+              <div className="rounded-lg border border-black/5 dark:border-white/5 p-4">
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="material-symbols-outlined text-[18px] text-text-muted">image</span>
+                  <span className="font-semibold text-sm text-text-main">PXPIPE</span>
+                  <span className={cn(
+                    "text-xs px-2 py-0.5 rounded",
+                    selectedDetail.pxpipe.applied
+                      ? "bg-green-500/15 text-green-600"
+                      : "bg-amber-500/15 text-amber-600"
+                  )}>
+                    {selectedDetail.pxpipe.applied ? "Activated" : "Skipped"}
+                  </span>
+                </div>
+                {selectedDetail.pxpipe.applied ? (
+                  <div className="grid grid-cols-2 gap-2 text-sm sm:grid-cols-4">
+                    <div>
+                      <span className="text-text-muted block text-xs">Original (est.)</span>
+                      <span className="font-mono">{(selectedDetail.pxpipe.tokensBeforeEst || 0).toLocaleString()} tokens</span>
+                    </div>
+                    <div>
+                      <span className="text-text-muted block text-xs">Compressed (est.)</span>
+                      <span className="font-mono">{(selectedDetail.pxpipe.tokensAfterEst || 0).toLocaleString()} tokens</span>
+                    </div>
+                    <div>
+                      <span className="text-text-muted block text-xs">Saved</span>
+                      <span className="font-mono text-green-600">{selectedDetail.pxpipe.savedPct || 0}%</span>
+                    </div>
+                    <div>
+                      <span className="text-text-muted block text-xs">Images</span>
+                      <span className="font-mono">{selectedDetail.pxpipe.imageCount || 0} ({selectedDetail.pxpipe.durationMs || 0}ms)</span>
+                    </div>
+                  </div>
+                ) : (
+                  <p className="text-sm text-text-muted">
+                    Reason: <span className="font-mono">{selectedDetail.pxpipe.reason}</span>
+                    {selectedDetail.pxpipe.detail ? ` — ${selectedDetail.pxpipe.detail}` : ""}
+                  </p>
+                )}
+              </div>
+            )}
+
             <div className="space-y-4">
               <CollapsibleSection title="1. Client Request (Input)" defaultOpen={true} icon="input">
                 <pre className="max-h-[300px] max-w-full overflow-auto rounded-lg border border-black/5 bg-black/5 p-3 font-mono text-xs text-text-main dark:border-white/5 dark:bg-white/5 sm:p-4">

src/app/api/headroom/extras/route.js

@@ -0,0 +1,46 @@
+import { NextResponse } from "next/server";
+import { findPython310, getInstalledHeadroomExtras, HEADROOM_COMPRESSION_EXTRAS } from "@/lib/headroom/detect";
+import { installHeadroomExtras, uninstallHeadroomExtras, getInstallLogTail } from "@/lib/headroom/process";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(req) {
+  try {
+    // `?log=1` returns the live install/uninstall log tail for progress polling.
+    if (new URL(req.url).searchParams.get("log") === "1") {
+      return NextResponse.json({ log: getInstallLogTail() });
+    }
+    const python = findPython310();
+    const status = getInstalledHeadroomExtras(python);
+    return NextResponse.json({
+      available: HEADROOM_COMPRESSION_EXTRAS,
+      ...status,
+    });
+  } catch (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+
+export async function POST(req) {
+  try {
+    const body = await req.json().catch(() => ({}));
+    const requested = Array.isArray(body?.extras) ? body.extras : [];
+    const result = await installHeadroomExtras(requested);
+    return NextResponse.json(result);
+  } catch (error) {
+    const status = error.code === "NOT_INSTALLED" || error.code === "NO_PYTHON" ? 400 : 500;
+    return NextResponse.json({ error: error.message, code: error.code || null }, { status });
+  }
+}
+
+export async function DELETE(req) {
+  try {
+    const body = await req.json().catch(() => ({}));
+    const requested = Array.isArray(body?.extras) ? body.extras : [];
+    const result = await uninstallHeadroomExtras(requested);
+    return NextResponse.json(result);
+  } catch (error) {
+    const status = error.code === "NO_PYTHON" || error.code === "INVALID_EXTRAS" ? 400 : 500;
+    return NextResponse.json({ error: error.message, code: error.code || null }, { status });
+  }
+}

src/app/api/headroom/proxy/[...path]/route.js

@@ -0,0 +1,104 @@
+import { NextResponse } from "next/server";
+import { getSettings } from "@/lib/localDb";
+import { DEFAULT_HEADROOM_URL } from "@/lib/headroom/detect";
+
+export const dynamic = "force-dynamic";
+
+const HOP_BY_HOP_HEADERS = new Set([
+  "connection",
+  "keep-alive",
+  "proxy-authenticate",
+  "proxy-authorization",
+  "te",
+  "trailer",
+  "transfer-encoding",
+  "upgrade",
+]);
+
+const DASHBOARD_PREFIX = "/api/headroom/proxy";
+const LOOPBACK_HOSTS = new Set(["localhost", "127.0.0.1", "::1"]);
+
+async function getTargetBase() {
+  const settings = await getSettings();
+  const url = settings.headroomUrl || DEFAULT_HEADROOM_URL;
+  const target = new URL(url);
+  if (!["http:", "https:"].includes(target.protocol)) {
+    throw new Error("Headroom URL must use http or https");
+  }
+  return target;
+}
+
+function buildTargetUrl(base, path, search) {
+  const target = new URL(base);
+  target.pathname = `/${path.join("/")}`;
+  target.search = search;
+  return target;
+}
+
+function forwardedHeaders(request, target) {
+  const headers = new Headers(request.headers);
+  for (const header of headers.keys()) {
+    if (HOP_BY_HOP_HEADERS.has(header.toLowerCase())) headers.delete(header);
+  }
+  headers.delete("host");
+  // Never leak viewer credentials to a non-loopback Headroom host
+  if (!LOOPBACK_HOSTS.has(target.hostname.replace(/^\[|\]$/g, "").toLowerCase())) {
+    headers.delete("cookie");
+    headers.delete("authorization");
+  }
+  return headers;
+}
+
+function rewriteDashboardHtml(html) {
+  return html.replace(
+    /fetch\('(?=\/(?:stats|health|stats-history|transformations\/feed))/g,
+    `fetch('${DASHBOARD_PREFIX}`,
+  );
+}
+
+async function proxy(request, { params }) {
+  try {
+    const base = await getTargetBase();
+    const { search } = new URL(request.url);
+    const path = (await params).path || [];
+    const target = buildTargetUrl(base, path, search);
+    const method = request.method;
+    const hasBody = !["GET", "HEAD"].includes(method);
+
+    const response = await fetch(target, {
+      method,
+      headers: forwardedHeaders(request, target),
+      body: hasBody ? request.body : undefined,
+      duplex: hasBody ? "half" : undefined,
+      redirect: "manual",
+    });
+
+    const headers = new Headers(response.headers);
+    for (const header of headers.keys()) {
+      if (HOP_BY_HOP_HEADERS.has(header.toLowerCase())) headers.delete(header);
+    }
+
+    if (path.join("/") === "dashboard") {
+      const contentType = response.headers.get("content-type") || "";
+      if (contentType.includes("text/html")) {
+        headers.delete("content-length");
+        return new NextResponse(rewriteDashboardHtml(await response.text()), {
+          status: response.status,
+          headers,
+        });
+      }
+    }
+
+    return new NextResponse(response.body, { status: response.status, headers });
+  } catch (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+
+export const GET = proxy;
+export const POST = proxy;
+export const PUT = proxy;
+export const PATCH = proxy;
+export const DELETE = proxy;
+export const HEAD = proxy;
+export const OPTIONS = proxy;

src/app/api/headroom/restart/route.js

@@ -0,0 +1,35 @@
+import { NextResponse } from "next/server";
+import { getSettings } from "@/lib/localDb";
+import { restartHeadroomProxy } from "@/lib/headroom/process";
+import { DEFAULT_HEADROOM_URL, isLoopbackHeadroomUrl } from "@/lib/headroom/detect";
+
+export const dynamic = "force-dynamic";
+
+function parsePortFromUrl(url) {
+  try {
+    const u = new URL(url);
+    const p = parseInt(u.port, 10);
+    if (p > 0 && p < 65536) return p;
+  } catch { /* ignore, fall through to default */ }
+  return null;
+}
+
+export async function POST() {
+  try {
+    const settings = await getSettings();
+    const url = settings.headroomUrl || DEFAULT_HEADROOM_URL;
+    if (!isLoopbackHeadroomUrl(url)) {
+      return NextResponse.json({ error: "External Headroom proxies must be started outside 9Router", code: "EXTERNAL_PROXY" }, { status: 400 });
+    }
+    const port = parsePortFromUrl(url) || 8787;
+    const result = await restartHeadroomProxy({
+      port,
+      codeAware: settings.headroomCodeAware === true,
+      kompress: settings.headroomKompress !== false,
+    });
+    return NextResponse.json({ success: true, ...result });
+  } catch (error) {
+    const status = error.code === "NOT_INSTALLED" ? 400 : 500;
+    return NextResponse.json({ error: error.message, code: error.code || null }, { status });
+  }
+}

src/app/api/headroom/start/route.js

@@ -22,7 +22,11 @@ export async function POST() {
       return NextResponse.json({ error: "External Headroom proxies must be started outside 9Router", code: "EXTERNAL_PROXY" }, { status: 400 });
     }
     const port = parsePortFromUrl(url) || 8787;
-    const result = await startHeadroomProxy({ port });
+    const result = await startHeadroomProxy({
+      port,
+      codeAware: settings.headroomCodeAware === true,
+      kompress: settings.headroomKompress !== false,
+    });
     return NextResponse.json({ success: true, ...result });
   } catch (error) {
     const status = error.code === "NOT_INSTALLED" ? 400 : 500;

src/app/api/oauth/[provider]/[action]/route.js

@@ -150,8 +150,16 @@ export async function GET(request, { params }) {
           }
         : undefined;
       
-      // Providers that don't use PKCE for device code
-      const noPkceDeviceProviders = ["github", "kiro", "kimi-coding", "kilocode", "codebuddy-cn", "qoder"];
+      // Providers that don't use PKCE for device code (Grok CLI HAR: plain device_code, no challenge)
+      const noPkceDeviceProviders = [
+        "github",
+        "kiro",
+        "kimi-coding",
+        "kilocode",
+        "codebuddy-cn",
+        "qoder",
+        "grok-cli",
+      ];
       let deviceData;
       if (noPkceDeviceProviders.includes(provider)) {
         deviceData = await requestDeviceCode(provider, undefined, deviceOptions);

src/app/api/providers/[id]/models/route.js

@@ -236,6 +236,7 @@ const PROVIDER_MODELS_CONFIG = {
   xai: createOpenAIModelsConfig("https://api.x.ai/v1/models"),
   mistral: createOpenAIModelsConfig("https://api.mistral.ai/v1/models"),
   perplexity: createOpenAIModelsConfig("https://api.perplexity.ai/v1/models"),
+  "perplexity-agent": createOpenAIModelsConfig("https://api.perplexity.ai/v1/models"),
   together: createOpenAIModelsConfig("https://api.together.xyz/v1/models"),
   fireworks: createOpenAIModelsConfig("https://api.fireworks.ai/inference/v1/models"),
   cerebras: createOpenAIModelsConfig("https://api.cerebras.ai/v1/models"),

src/app/api/providers/[id]/test/testUtils.js

@@ -103,8 +103,61 @@ const OAUTH_TEST_CONFIG = {
     },
     refreshable: false,
   },
+  // Grok CLI / Grok Build — probe /v1/user (no inference quota). Headers mirror official CLI.
+  "grok-cli": {
+    url: PROVIDERS["grok-cli"]?.userUrl || "https://cli-chat-proxy.grok.com/v1/user",
+    method: "GET",
+    authHeader: "Authorization",
+    authPrefix: "Bearer ",
+    extraHeaders: {
+      Accept: "application/json",
+      ...(PROVIDERS["grok-cli"]?.headers || {
+        "User-Agent": "grok-pager/0.2.93 grok-shell/0.2.93 (linux; x86_64)",
+        "x-xai-token-auth": "xai-grok-cli",
+        "x-grok-client-identifier": "grok-pager",
+        "x-grok-client-version": "0.2.93",
+      }),
+    },
+    refreshable: true,
+    // Subscription spending-limit is not an auth failure — token is fine, credits aren't.
+    // Accept 402 so the connection stays "active" with a warning (same idea as Codex 400).
+    acceptStatuses: [402],
+    softFailMessage: {
+      402: "Connected, but Grok Build credits are exhausted (spending limit). Add credits or upgrade SuperGrok.",
+    },
+  },
 };
 
+/**
+ * Classify an OAuth probe response as success / soft-success / hard-fail.
+ * Soft success (e.g. 402 spending-limit on Grok CLI) means auth works but the
+ * account cannot spend — keep connection active and surface a warning.
+ * Exported for unit tests.
+ */
+export function classifyOAuthProbeResult(res, config, bodyText = "") {
+  if (!res) return { valid: false, error: "No response", soft: false };
+  const status = res.status;
+  const accepted = res.ok || (config?.acceptStatuses && config.acceptStatuses.includes(status));
+  if (!accepted) {
+    if (status === 401) return { valid: false, error: "Token invalid or revoked", soft: false };
+    if (status === 403) return { valid: false, error: "Access denied", soft: false };
+    return { valid: false, error: `API returned ${status}`, soft: false };
+  }
+
+  // Soft success only when the provider configured an explicit message for this
+  // status (e.g. Grok CLI 402 spending-limit). Codex-style acceptStatuses:[400]
+  // stays silent success — 400 there only proves auth, not a user-facing warning.
+  if (!res.ok && config?.acceptStatuses?.includes(status)) {
+    const softMap = config.softFailMessage || {};
+    if (softMap[status]) {
+      return { valid: true, error: softMap[status], soft: true };
+    }
+    return { valid: true, error: null, soft: false };
+  }
+
+  return { valid: true, error: null, soft: false };
+}
+
 async function probeClineAccessToken(accessToken) {
   const res = await fetch("https://api.cline.bot/api/v1/users/me", {
     method: "GET",
@@ -186,7 +239,7 @@ async function refreshOAuthToken(connection) {
       return { accessToken: data.access_token, expiresIn: data.expires_in, refreshToken: data.refresh_token || refreshToken };
     }
 
-    if (provider === "codex") {
+    if (provider === "codex" || provider === "grok-cli" || provider === "xai") {
       return await refreshProviderCredentials(provider, connection, console);
     }
 
@@ -362,9 +415,19 @@ async function testOAuthConnection(connection, effectiveProxy = null) {
     const fetchOpts = { method: config.method, headers };
     if (config.body) fetchOpts.body = config.body;
     const res = await fetchWithConnectionProxy(testUrl, fetchOpts, effectiveProxy);
+    const bodyText = !res.ok ? await res.text().catch(() => "") : "";
 
-    const accepted = res.ok || (config.acceptStatuses && config.acceptStatuses.includes(res.status));
-    if (accepted) return { valid: true, error: null, refreshed, newTokens };
+    const classified = classifyOAuthProbeResult(res, config, bodyText);
+    if (classified.valid) {
+      return {
+        valid: true,
+        // soft success surfaces warning text without marking connection error
+        error: classified.soft ? classified.error : null,
+        warning: classified.soft ? classified.error : null,
+        refreshed,
+        newTokens,
+      };
+    }
 
     if (res.status === 401 && config.refreshable && !refreshed && connection.refreshToken) {
       const tokens = await refreshOAuthToken(connection);
@@ -376,15 +439,22 @@ async function testOAuthConnection(connection, effectiveProxy = null) {
         const retryOpts = { method: config.method, headers: retryHeaders };
         if (config.body) retryOpts.body = config.body;
         const retryRes = await fetchWithConnectionProxy(retryUrl, retryOpts, effectiveProxy);
-        const retryAccepted = retryRes.ok || (config.acceptStatuses && config.acceptStatuses.includes(retryRes.status));
-        if (retryAccepted) return { valid: true, error: null, refreshed: true, newTokens: tokens };
+        const retryBody = !retryRes.ok ? await retryRes.text().catch(() => "") : "";
+        const retryClassified = classifyOAuthProbeResult(retryRes, config, retryBody);
+        if (retryClassified.valid) {
+          return {
+            valid: true,
+            error: retryClassified.soft ? retryClassified.error : null,
+            warning: retryClassified.soft ? retryClassified.error : null,
+            refreshed: true,
+            newTokens: tokens,
+          };
+        }
       }
       return { valid: false, error: "Token invalid or revoked", refreshed: false };
     }
 
-    if (res.status === 401) return { valid: false, error: "Token invalid or revoked", refreshed };
-    if (res.status === 403) return { valid: false, error: "Access denied", refreshed };
-    return { valid: false, error: `API returned ${res.status}`, refreshed };
+    return { valid: false, error: classified.error, refreshed };
   } catch (err) {
     return { valid: false, error: err.message, refreshed };
   }
@@ -752,10 +822,18 @@ export async function testSingleConnection(id) {
 
   const latencyMs = Date.now() - start;
 
+  // Soft success (e.g. Grok CLI 402 spending-limit): credentials are good, account is
+  // out of credits. Keep testStatus active; surface the message as lastError so the
+  // dashboard can show a warning without marking the connection broken.
+  const softWarning = result.valid && (result.warning || result.error);
   const updateData = {
     testStatus: result.valid ? "active" : "error",
-    lastError: result.valid ? null : result.error,
-    lastErrorAt: result.valid ? null : new Date().toISOString(),
+    lastError: result.valid ? (softWarning || null) : result.error,
+    lastErrorAt: result.valid
+      ? softWarning
+        ? new Date().toISOString()
+        : null
+      : new Date().toISOString(),
   };
 
   if (result.refreshed && result.newTokens) {

src/app/api/pxpipe/health/route.js

@@ -0,0 +1,16 @@
+import { NextResponse } from "next/server";
+import { runHealthCheck } from "@/lib/pxpipe/service.js";
+
+export const dynamic = "force-dynamic";
+
+export async function POST() {
+  try {
+    const result = await runHealthCheck();
+    return NextResponse.json(result);
+  } catch (error) {
+    return NextResponse.json({ healthy: false, checks: [], error: error.message }, { status: 500 });
+  }
+}
+
+// GET mirrors POST so the card can probe on page load without a mutation call.
+export const GET = POST;

src/app/api/pxpipe/install/route.js

@@ -0,0 +1,20 @@
+import { NextResponse } from "next/server";
+import { installPxpipe } from "@/lib/pxpipe/install.js";
+import { unloadPxpipe } from "@/lib/pxpipe/loader.js";
+import { runHealthCheck } from "@/lib/pxpipe/service.js";
+
+export const dynamic = "force-dynamic";
+// npm install can legitimately take minutes on a cold cache.
+export const maxDuration = 300;
+
+// Install (or repair — same operation, reinstalls @latest) then re-run the health check.
+export async function POST() {
+  try {
+    const info = await installPxpipe();
+    unloadPxpipe(); // drop any previously-loaded version so health loads the fresh one
+    const health = await runHealthCheck();
+    return NextResponse.json({ ...info, health });
+  } catch (error) {
+    return NextResponse.json({ error: error.message, code: error.code || null }, { status: 500 });
+  }
+}

src/app/api/pxpipe/logs/route.js

@@ -0,0 +1,18 @@
+import { NextResponse } from "next/server";
+import { getInstallLogTail } from "@/lib/pxpipe/install.js";
+import { readPxpipeEvents } from "@/lib/pxpipe/events.js";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const limit = Math.min(Number(searchParams.get("limit")) || 100, 500);
+    return NextResponse.json({
+      installLog: getInstallLogTail(),
+      events: readPxpipeEvents({ limit }).reverse(),
+    });
+  } catch (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}

src/app/api/pxpipe/restart/route.js

@@ -0,0 +1,16 @@
+import { NextResponse } from "next/server";
+import { unloadPxpipe, loadPxpipe } from "@/lib/pxpipe/loader.js";
+import { getPxpipeStatus } from "@/lib/pxpipe/service.js";
+
+export const dynamic = "force-dynamic";
+
+// Reload the in-process module (picks up an upgraded install without a server restart).
+export async function POST() {
+  try {
+    unloadPxpipe();
+    await loadPxpipe();
+    return NextResponse.json(getPxpipeStatus());
+  } catch (error) {
+    return NextResponse.json({ error: error.message, code: error.code || null }, { status: 500 });
+  }
+}

src/app/api/pxpipe/start/route.js

@@ -0,0 +1,26 @@
+import { NextResponse } from "next/server";
+import { getSettings } from "@/lib/localDb";
+import { getInstallInfo, installPxpipe } from "@/lib/pxpipe/install.js";
+import { loadPxpipe } from "@/lib/pxpipe/loader.js";
+import { getPxpipeStatus } from "@/lib/pxpipe/service.js";
+
+export const dynamic = "force-dynamic";
+export const maxDuration = 300;
+
+// "Start" in library mode = warm the in-process transform module.
+// Auto-installs first when the package is missing and pxpipeAutoInstall is on.
+export async function POST() {
+  try {
+    if (!getInstallInfo().installed) {
+      const settings = await getSettings();
+      if (!settings.pxpipeAutoInstall) {
+        return NextResponse.json({ error: "PXPIPE is not installed", code: "NOT_INSTALLED" }, { status: 409 });
+      }
+      await installPxpipe();
+    }
+    await loadPxpipe();
+    return NextResponse.json(getPxpipeStatus());
+  } catch (error) {
+    return NextResponse.json({ error: error.message, code: error.code || null }, { status: 500 });
+  }
+}

src/app/api/pxpipe/stats/route.js

@@ -0,0 +1,14 @@
+import { NextResponse } from "next/server";
+import { getPxpipeStats } from "@/lib/pxpipe/events.js";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const recentLimit = Math.min(Number(searchParams.get("limit")) || 100, 500);
+    return NextResponse.json(getPxpipeStats({ recentLimit }));
+  } catch (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}

src/app/api/pxpipe/status/route.js

@@ -0,0 +1,21 @@
+import { NextResponse } from "next/server";
+import { getSettings } from "@/lib/localDb";
+import { getPxpipeStatus } from "@/lib/pxpipe/service.js";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  try {
+    const settings = await getSettings();
+    const status = getPxpipeStatus();
+    return NextResponse.json({
+      ...status,
+      enabled: !!settings.pxpipeEnabled,
+      autoInstall: !!settings.pxpipeAutoInstall,
+      minChars: settings.pxpipeMinChars,
+      timeoutMs: settings.pxpipeTimeoutMs,
+    });
+  } catch (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}

src/app/api/pxpipe/stop/route.js

@@ -0,0 +1,16 @@
+import { NextResponse } from "next/server";
+import { unloadPxpipe } from "@/lib/pxpipe/loader.js";
+import { getPxpipeStatus } from "@/lib/pxpipe/service.js";
+
+export const dynamic = "force-dynamic";
+
+// "Stop" in library mode = drop the in-process module; requests fail open to
+// uncompressed passthrough until it is started again.
+export async function POST() {
+  try {
+    const wasLoaded = unloadPxpipe();
+    return NextResponse.json({ stopped: wasLoaded, ...getPxpipeStatus() });
+  } catch (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}

src/app/api/tunnel/status/route.js

@@ -1,11 +1,23 @@
 import { NextResponse } from "next/server";
 import { getTunnelStatus, getTailscaleStatus, getDownloadStatus } from "@/lib/tunnel";
 
+const STATUS_CACHE_TTL_MS = 3000; // coalesce rapid polls; underlying probes already cache 10s
+
+// Survive hot reload; one cache per process. Only tunnel/tailscale probes are cached —
+// download progress stays live so the enable/download UI updates smoothly.
+const statusCache = (global.__tunnelStatusCache ??= { value: null, fetchedAt: 0 });
+
 export async function GET() {
   try {
-    const [tunnel, tailscale] = await Promise.all([getTunnelStatus(), getTailscaleStatus()]);
+    let probes = statusCache.value;
+    if (!probes || Date.now() - statusCache.fetchedAt >= STATUS_CACHE_TTL_MS) {
+      const [tunnel, tailscale] = await Promise.all([getTunnelStatus(), getTailscaleStatus()]);
+      probes = { tunnel, tailscale };
+      statusCache.value = probes;
+      statusCache.fetchedAt = Date.now();
+    }
     const download = getDownloadStatus();
-    return NextResponse.json({ tunnel, tailscale, download });
+    return NextResponse.json({ ...probes, download });
   } catch (error) {
     console.error("Tunnel status error:", error);
     return NextResponse.json({ error: error.message }, { status: 500 });

src/app/api/usage/providers/route.js

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { getRequestDetails } from "@/lib/requestDetailsDb";
+import { getDistinctProviders } from "@/lib/requestDetailsDb";
 import { getProviderNodes } from "@/lib/localDb";
 import { AI_PROVIDERS, getProviderByAlias } from "@/shared/constants/providers";
 
@@ -9,10 +9,9 @@ import { AI_PROVIDERS, getProviderByAlias } from "@/shared/constants/providers";
  */
 export async function GET() {
   try {
-    const { details } = await getRequestDetails({ pageSize: 9999 });
-
-    // Extract unique providers
-    const providerIds = [...new Set(details.map(r => r.provider).filter(Boolean))].sort();
+    // Query DISTINCT provider column directly — avoids parsing every row's
+    // full JSON blob (can be hundreds of MB), which previously caused OOM.
+    const providerIds = await getDistinctProviders();
 
     const providerNodes = await getProviderNodes();
     const nodeMap = {};

src/app/api/usage/request-details/route.js

@@ -9,8 +9,10 @@ export async function GET(request) {
   try {
     const { searchParams } = new URL(request.url);
     
-    const page = parseInt(searchParams.get("page")) || 1;
-    const pageSize = parseInt(searchParams.get("pageSize")) || 20;
+    const pageRaw = parseInt(searchParams.get("page"));
+    const page = Number.isNaN(pageRaw) ? 1 : pageRaw;
+    const pageSizeRaw = parseInt(searchParams.get("pageSize"));
+    const pageSize = Number.isNaN(pageSizeRaw) ? 20 : pageSizeRaw;
     const provider = searchParams.get("provider");
     const model = searchParams.get("model");
     const connectionId = searchParams.get("connectionId");

src/app/api/v1/messages/count_tokens/route.js

@@ -11,6 +11,64 @@ export async function OPTIONS() {
   return new Response(null, { headers: CORS_HEADERS });
 }
 
+function countValueChars(value) {
+  if (value == null) return 0;
+  if (typeof value === "string") return value.length;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value).length;
+  }
+  if (Array.isArray(value)) {
+    return value.reduce((total, item) => total + countValueChars(item), 0);
+  }
+  if (typeof value === "object") {
+    return Object.entries(value).reduce((total, [key, item]) => {
+      return total + key.length + countValueChars(item);
+    }, 0);
+  }
+  return 0;
+}
+
+function countContentBlockChars(block) {
+  if (block == null) return 0;
+  if (typeof block === "string") return block.length;
+  if (typeof block !== "object") return countValueChars(block);
+
+  switch (block.type) {
+    case "text":
+      return countValueChars(block.text);
+    case "tool_use":
+      return countValueChars(block.name) + countValueChars(block.input);
+    case "tool_result":
+      return countValueChars(block.content);
+    case "thinking":
+      return countValueChars(block.thinking);
+    default:
+      return countValueChars(block);
+  }
+}
+
+function countMessageChars(message) {
+  if (!message || typeof message !== "object") return 0;
+  const content = message.content;
+
+  if (typeof content === "string") return content.length;
+  if (Array.isArray(content)) {
+    return content.reduce((total, block) => total + countContentBlockChars(block), 0);
+  }
+  return countValueChars(content);
+}
+
+export function estimateAnthropicInputTokens(body = {}) {
+  const messages = Array.isArray(body.messages) ? body.messages : [];
+  let totalChars = countValueChars(body.system) + countValueChars(body.tools);
+
+  for (const msg of messages) {
+    totalChars += countMessageChars(msg);
+  }
+
+  return Math.ceil(totalChars / 4);
+}
+
 /**
  * POST /v1/messages/count_tokens - Mock token count response
  */
@@ -25,23 +83,7 @@ export async function POST(request) {
     });
   }
 
-  // Estimate token count based on content length
-  const messages = body.messages || [];
-  let totalChars = 0;
-  for (const msg of messages) {
-    if (typeof msg.content === "string") {
-      totalChars += msg.content.length;
-    } else if (Array.isArray(msg.content)) {
-      for (const part of msg.content) {
-        if (part.type === "text" && part.text) {
-          totalChars += part.text.length;
-        }
-      }
-    }
-  }
-
-  // Rough estimate: ~4 chars per token
-  const inputTokens = Math.ceil(totalChars / 4);
+  const inputTokens = estimateAnthropicInputTokens(body);
 
   return new Response(JSON.stringify({
     input_tokens: inputTokens

src/app/api/version/route.js

@@ -2,6 +2,10 @@ import https from "https";
 import pkg from "../../../../package.json" with { type: "json" };
 
 const NPM_PACKAGE_NAME = "9router";
+const VERSION_CACHE_TTL_MS = 3600000; // cache npm latest lookup for 1h
+
+// Survive hot reload; one cache per process
+const versionCache = (global.__npmVersionCache ??= { value: null, fetchedAt: 0 });
 
 // Fetch latest version from npm registry
 function fetchLatestVersion() {
@@ -36,8 +40,20 @@ function compareVersions(a, b) {
   return 0;
 }
 
+async function getLatestVersionCached() {
+  if (versionCache.value && Date.now() - versionCache.fetchedAt < VERSION_CACHE_TTL_MS) {
+    return versionCache.value;
+  }
+  const latest = await fetchLatestVersion();
+  if (latest) {
+    versionCache.value = latest;
+    versionCache.fetchedAt = Date.now();
+  }
+  return latest;
+}
+
 export async function GET() {
-  const latestVersion = await fetchLatestVersion();
+  const latestVersion = await getLatestVersionCached();
   const currentVersion = pkg.version;
   const hasUpdate = latestVersion ? compareVersions(latestVersion, currentVersion) > 0 : false;
 

src/app/globals.css

@@ -1,4 +1,5 @@
-@import "tailwindcss";
+/* source() sets scan base to src/ for both webpack + Turbopack; auto-detection still skips binaries + gitignore */
+@import "tailwindcss" source("../../");
 
 @custom-variant dark (&:where(.dark, .dark *));