@amir83nasr/10router 0.1.0 → 0.1.3

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@amir83nasr/10router",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Amir83Nasr/10Router.git"
   },
-  "packageManager": "pnpm@12.5.1",
+  "packageManager": "pnpm@12.6.0",
   "description": "10Router dashboard",
   "bin": {
     "10router": "bin/10router.mjs"
@@ -13,7 +13,6 @@
   "files": [
     "bin/",
     "custom-server.js",
-    "scripts/dev-local.mjs",
     "src/",
     "open-sse/",
     "public/",
@@ -29,13 +28,10 @@
   },
   "scripts": {
     "dev": "node scripts/dev-local.mjs",
-    "dev:webpack": "next dev --webpack --port 20127",
+    "dev:update": "node scripts/test-update-notice.mjs",
     "build": "next build --webpack",
-    "start": "node custom-server.js --port 20127",
-    "dev:bun": "bun --bun next dev --webpack --port 20127",
-    "dev:ui": "node scripts/dev-local.mjs --ui",
-    "build:bun": "bun --bun next build --webpack",
-    "start:bun": "bun ./.next/standalone/custom-server.js",
+    "start": "node custom-server.js --port 20128",
+    "pkg:test": "node scripts/test-pkg.mjs",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "lint": "eslint .",
@@ -59,21 +55,10 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@next/third-parties": "^16.2.9",
     "@node-saml/node-saml": "^5.1.0",
-    "@radix-ui/react-avatar": "^1.2.6",
-    "@radix-ui/react-dialog": "^1.1.23",
-    "@radix-ui/react-dropdown-menu": "^2.1.24",
-    "@radix-ui/react-label": "^2.1.15",
-    "@radix-ui/react-select": "^2.3.7",
-    "@radix-ui/react-separator": "^1.1.15",
-    "@radix-ui/react-slot": "^1.3.3",
-    "@radix-ui/react-switch": "^1.3.7",
-    "@radix-ui/react-tabs": "^1.1.21",
-    "@radix-ui/react-tooltip": "^1.2.16",
     "@xyflow/react": "^12.10.1",
     "bcryptjs": "^3.0.3",
     "chalk": "^5.6.2",
     "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
     "cn": "^0.3.0",
     "confbox": "^0.2.4",
     "jose": "^6.1.3",
@@ -83,13 +68,11 @@
     "node-machine-id": "^1.1.12",
     "open": "^11.0.0",
     "ora": "^9.1.0",
-    "prop-types": "^15.8.1",
     "radix-ui": "^1.6.7",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "recharts": "^3.8.0",
     "sql.js": "^1.14.1",
-    "tailwind-merge": "^3.7.0",
     "tw-animate-css": "^1.4.0",
     "undici": "^7.19.2",
     "uuid": "^13.0.0",

package/src/app/(dashboard)/dashboard/console-log/ConsoleLogClient.tsx

@@ -21,12 +21,20 @@ import type { LogCategory, LogEntry, LogLevel } from "@/lib/logLine.js";
 // ── LEVEL META ───────────────────────────────────────────
 
 const LEVEL_BADGE: Record<LogLevel, "default" | "secondary" | "destructive"> = {
-  debug: "default",
-  info: "secondary",
+  debug: "secondary",
+  info: "default",
   warn: "secondary",
   error: "destructive",
 };
 
+// Badge color per level (BADGE variants are limited: default/secondary/destructive).
+const LEVEL_BADGE_CLASS: Record<LogLevel, string> = {
+  debug: "bg-muted text-muted-foreground",
+  info: "bg-sky-500/15 text-sky-700 dark:text-sky-300",
+  warn: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+  error: "",
+};
+
 const LEVEL_LABEL: Record<LogLevel, string> = {
   debug: "DEBUG",
   info: "INFO",
@@ -174,6 +182,7 @@ function LogMessage({ text, isError }: { text: string; isError: boolean }) {
 
 function LogRow({ entry }: { entry: LogEntry }) {
   const isError = entry.level === "error";
+  const isWarn = entry.level === "warn";
   const isDone = entry.category === "done";
 
   return (
@@ -181,15 +190,20 @@ function LogRow({ entry }: { entry: LogEntry }) {
       className={`flex items-start gap-2 px-3 py-1.5 leading-relaxed ${
         isError
           ? "border-l-2 border-red-500 bg-red-500/5"
-          : isDone
-            ? "border-l-2 border-green-500 bg-green-500/5"
-            : "border-l-2 border-transparent hover:bg-muted/50"
+          : isWarn
+            ? "border-l-2 border-amber-500 bg-amber-500/5"
+            : isDone
+              ? "border-l-2 border-green-500 bg-green-500/5"
+              : "border-l-2 border-transparent hover:bg-muted/50"
       }`}
     >
       <span className="shrink-0 pt-0.5 text-[11px] text-muted-foreground tabular-nums">
         {formatClock(entry.ts)}
       </span>
-      <Badge variant={LEVEL_BADGE[entry.level]} className="shrink-0">
+      <Badge
+        variant={LEVEL_BADGE[entry.level]}
+        className={`shrink-0 ${LEVEL_BADGE_CLASS[entry.level]}`}
+      >
         {LEVEL_LABEL[entry.level]}
       </Badge>
       <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground uppercase">

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

@@ -906,7 +906,7 @@ async function testApiKeyConnection(connection, effectiveProxy = null) {
         const res = await fetchWithConnectionProxy(
           "https://opencode.ai/zen/v1/models",
           {
-            headers: { Authorization: "Bearer public", "User-Agent": "opencode/1.18.31" },
+            headers: { Authorization: "Bearer public", "User-Agent": "opencode/1.18.35" },
           },
           effectiveProxy,
         );

package/src/app/api/proxy-pools/[id]/test/route.js

@@ -1,14 +1,13 @@
 import { NextResponse } from "next/server";
 import { getProxyPoolById, updateProxyPool } from "@/models";
 import { testProxyUrl } from "@/lib/network/proxyTest";
-import { fetch as undiciFetch } from "undici";
 
 async function testVercelRelay(relayUrl, timeoutMs = 10000) {
   const controller = new AbortController();
   const startedAt = Date.now();
   const timer = setTimeout(() => controller.abort(), timeoutMs);
   try {
-    const res = await undiciFetch(relayUrl, {
+    const res = await fetch(relayUrl, {
       method: "GET",
       headers: {
         "x-relay-target": "https://httpbin.org",

package/src/lib/consoleLogBuffer.js

@@ -42,7 +42,8 @@ function scheduleFlush() {
   state.flushTimer?.unref?.();
 }
 
-// Strip ANSI escape codes so terminal colors don't bleed into UI
+// Strip ANSI escape codes (colors, bold) so terminal styling doesn't bleed
+// into UI; the viewer applies its own per-level colors.
 const ANSI_RE = /\x1b\[[0-9;]*m/g;
 
 function stripAnsi(str) {

package/src/shared/components/AddCustomEmbeddingModal.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import PropTypes from "prop-types";
 import Modal from "./Modal";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -205,16 +204,3 @@ export default function AddCustomEmbeddingModal({
     </Modal>
   );
 }
-
-AddCustomEmbeddingModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onCreated: PropTypes.func,
-  onSaved: PropTypes.func,
-  node: PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-    prefix: PropTypes.string,
-    baseUrl: PropTypes.string,
-  }),
-};

package/src/shared/components/ChangelogModal.tsx

@@ -2,7 +2,6 @@
 import Icon from "@/shared/components/Icon";
 
 import { useEffect, useState } from "react";
-import PropTypes from "prop-types";
 import { marked } from "marked";
 import { GITHUB_CONFIG } from "@/shared/constants/config";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
@@ -75,8 +74,3 @@ export default function ChangelogModal({ isOpen, onClose }: ChangelogModalProps)
     </Dialog>
   );
 }
-
-ChangelogModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-};

package/src/shared/components/CursorAuthModal.tsx

@@ -2,7 +2,6 @@
 import Icon from "@/shared/components/Icon";
 
 import { useState, useEffect } from "react";
-import PropTypes from "prop-types";
 import Modal from "./Modal";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -205,9 +204,3 @@ export default function CursorAuthModal({ isOpen, onSuccess, onClose }: CursorAu
     </Modal>
   );
 }
-
-CursorAuthModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onSuccess: PropTypes.func,
-  onClose: PropTypes.func.isRequired,
-};

package/src/shared/components/EditConnectionModal.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import PropTypes from "prop-types";
 import Modal from "@/shared/components/Modal";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -346,24 +345,3 @@ export default function EditConnectionModal({
     </Modal>
   );
 }
-
-EditConnectionModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  connection: PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-    email: PropTypes.string,
-    priority: PropTypes.number,
-    authType: PropTypes.string,
-    provider: PropTypes.string,
-    providerSpecificData: PropTypes.object,
-  }),
-  proxyPools: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      name: PropTypes.string,
-    }),
-  ),
-  onSave: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-};

package/src/shared/components/GitLabAuthModal.tsx

@@ -2,7 +2,6 @@
 import Icon from "@/shared/components/Icon";
 
 import { useState } from "react";
-import PropTypes from "prop-types";
 import { Loader2 } from "lucide-react";
 import Modal from "./Modal";
 import OAuthModal from "./OAuthModal";
@@ -285,10 +284,3 @@ export default function GitLabAuthModal({
     </Modal>
   );
 }
-
-GitLabAuthModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  providerInfo: PropTypes.shape({ name: PropTypes.string }),
-  onSuccess: PropTypes.func,
-  onClose: PropTypes.func.isRequired,
-};

package/src/shared/components/Header.tsx

@@ -4,7 +4,6 @@ import Icon from "@/shared/components/Icon";
 import { useEffect, useMemo, useState } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
-import PropTypes from "prop-types";
 import ProviderIcon from "@/shared/components/ProviderIcon";
 import HeaderMenu from "@/shared/components/HeaderMenu";
 import { useHeaderSearchStore } from "@/store/headerSearchStore";
@@ -363,8 +362,3 @@ function HeaderSearch() {
     </div>
   );
 }
-
-Header.propTypes = {
-  onMenuClick: PropTypes.func,
-  showMenuButton: PropTypes.bool,
-};

package/src/shared/components/HeaderMenu.tsx

@@ -2,7 +2,6 @@
 import Icon from "@/shared/components/Icon";
 
 import { useState } from "react";
-import PropTypes from "prop-types";
 import ChangelogModal from "./ChangelogModal";
 import { useShutdown } from "@/shared/hooks/useShutdown";
 import ShutdownModal from "./ShutdownModal";
@@ -69,7 +68,3 @@ export default function HeaderMenu({ onLogout }: HeaderMenuProps) {
     </>
   );
 }
-
-HeaderMenu.propTypes = {
-  onLogout: PropTypes.func.isRequired,
-};

package/src/shared/components/IFlowCookieModal.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import PropTypes from "prop-types";
 import { Loader2 } from "lucide-react";
 import Modal from "./Modal";
 import { Button } from "@/components/ui/button";
@@ -132,9 +131,3 @@ export default function IFlowCookieModal({ isOpen, onSuccess, onClose }: IFlowCo
     </Modal>
   );
 }
-
-IFlowCookieModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onSuccess: PropTypes.func,
-  onClose: PropTypes.func,
-};

package/src/shared/components/ModelSelectModal.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useMemo, useEffect } from "react";
-import PropTypes from "prop-types";
 import { Check, Info, Layers, PenLine, Search, SearchX } from "lucide-react";
 import {
   Dialog,
@@ -735,21 +734,3 @@ export default function ModelSelectModal({
     </Dialog>
   );
 }
-
-ModelSelectModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  onDeselect: PropTypes.func,
-  selectedModel: PropTypes.string,
-  activeProviders: PropTypes.arrayOf(
-    PropTypes.shape({
-      provider: PropTypes.string.isRequired,
-    }),
-  ),
-  title: PropTypes.string,
-  modelAliases: PropTypes.object,
-  kindFilter: PropTypes.string,
-  addedModelValues: PropTypes.arrayOf(PropTypes.string),
-  closeOnSelect: PropTypes.bool,
-};

package/src/shared/components/NoAuthProxyCard.tsx

@@ -2,7 +2,6 @@
 import Icon from "@/shared/components/Icon";
 
 import { useCallback, useEffect, useState } from "react";
-import PropTypes from "prop-types";
 import { Card, CardContent } from "@/components/ui/card";
 import {
   Select,
@@ -172,7 +171,3 @@ export default function NoAuthProxyCard({ providerId }: NoAuthProxyCardProps) {
     </Card>
   );
 }
-
-NoAuthProxyCard.propTypes = {
-  providerId: PropTypes.string.isRequired,
-};

package/src/shared/components/OAuthModal.tsx

@@ -2,7 +2,6 @@
 import Icon from "@/shared/components/Icon";
 
 import { useState, useEffect, useRef, useCallback } from "react";
-import PropTypes from "prop-types";
 import Modal from "./Modal";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -1043,13 +1042,3 @@ export default function OAuthModal({
     </Modal>
   );
 }
-
-OAuthModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  provider: PropTypes.string,
-  providerInfo: PropTypes.shape({ name: PropTypes.string }),
-  onSuccess: PropTypes.func,
-  onClose: PropTypes.func.isRequired,
-  /** Extra metadata passed to /authorize and /exchange (e.g. gitlab clientId/baseUrl) */
-  oauthMeta: PropTypes.object,
-};

package/src/shared/components/ProviderIcon.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import PropTypes from "prop-types";
 import { getProviderIconSrc, markProviderIconMissing } from "@/shared/utils/providerIcon";
 
 function resolveSrc(src: any, providerId: any) {
@@ -68,13 +67,3 @@ export default function ProviderIcon({
     />
   );
 }
-
-ProviderIcon.propTypes = {
-  src: PropTypes.string,
-  providerId: PropTypes.string,
-  alt: PropTypes.string,
-  size: PropTypes.number,
-  className: PropTypes.string,
-  fallbackText: PropTypes.string,
-  fallbackColor: PropTypes.string,
-};

package/src/shared/components/XiaomiMimoAuthModal.tsx

@@ -2,7 +2,6 @@
 import Icon from "@/shared/components/Icon";
 
 import { useState, useEffect } from "react";
-import PropTypes from "prop-types";
 import Modal from "./Modal";
 import { Button } from "@/components/ui/button";
 
@@ -269,9 +268,3 @@ export default function XiaomiMimoAuthModal({
     </Modal>
   );
 }
-
-XiaomiMimoAuthModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onSuccess: PropTypes.func,
-  onClose: PropTypes.func.isRequired,
-};

package/src/shared/utils/cn.ts

@@ -1,7 +1,6 @@
-// Utility: merge class names (clsx + tailwind-merge).
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+// Utility: merge class names (cn package = clsx + tailwind-merge).
+import { cn as cnMerge, type ClassValue } from "cn";
 
 export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(...inputs));
+  return cnMerge(...inputs);
 }

package/src/sse/utils/logger.ts

@@ -1,14 +1,45 @@
 // Terminal logger for the request/runtime core.
 //
-// One line per event, plain ASCII (no emoji, no ANSI colors) so output stays
-// greppable and pipe-safe. Two shapes:
+// One line per event, ANSI-colored (NO_COLOR-aware) for terminal readability.
+// Two shapes:
 //
 //   [HH:MM:SS] LEVEL [scope] message          debug/info/warn/error
 //   [HH:MM:SS] [reqid] EVENT message          correlated request lines
 //
 // Correlated lines share a short hex id per client session, so all lines of
-// one conversation can be followed with grep. Errors go to stderr; everything
-// else goes to stdout.
+// one conversation can be followed with grep. Colors wrap tokens only, so
+// grep still matches; the dashboard strips ANSI on ingest. Errors go to
+// stderr; everything else goes to stdout.
+
+// ANSI colors, emitted unconditionally (except NO_COLOR) so background log
+// files keep colors for `10router logs` tailing.
+const NO_COLOR = typeof process !== "undefined" && "NO_COLOR" in (process.env ?? {});
+const ansi = (code: string): string => (NO_COLOR ? "" : `\x1b[${code}m`);
+const RESET = ansi("0");
+const BOLD = ansi("1");
+const DIM = ansi("2");
+const RED = ansi("31");
+const GREEN = ansi("32");
+const YELLOW = ansi("33");
+const CYAN = ansi("36");
+const GRAY = ansi("90");
+
+const LEVEL_COLORS: Record<string, string> = {
+  DEBUG: GRAY,
+  INFO: CYAN,
+  WARN: YELLOW,
+  ERROR: RED,
+};
+
+const EVENT_COLORS: Record<string, string> = {
+  REQ: CYAN,
+  DONE: GREEN,
+  REFRESH: YELLOW,
+  SAVERS: GRAY,
+  BLOCKED: RED,
+  ABORT: RED,
+  ERROR: RED,
+};
 
 const LOG_LEVELS: Record<string, number> = {
   DEBUG: 0,
@@ -48,12 +79,17 @@ type ThinkIntent = { mode?: string; budget?: number; level?: string };
 // Print one correlated line: [time] [reqid] EVENT message
 export function line(tag: string, event: string, message: string): void {
   if (LEVEL > LOG_LEVELS.INFO) return;
-  console.log(`[${formatTime()}] [${tag}] ${event} ${message}`);
+  const color = EVENT_COLORS[event] ?? "";
+  console.log(
+    `${DIM}[${formatTime()}]${RESET} [${tag}] ${color}${BOLD}${event}${RESET} ${message}`,
+  );
 }
 
 // Like line() but always printed regardless of LOG_LEVEL (errors must never be hidden)
 export function errorLine(tag: string, event: string, message: string): void {
-  console.error(`[${formatTime()}] [${tag}] ${event} ${message}`);
+  console.error(
+    `${DIM}[${formatTime()}]${RESET} [${tag}] ${RED}${BOLD}${event}${RESET} ${message}`,
+  );
 }
 
 // Format thinking intent for the request line ("high(10k)" / "off" / "auto")
@@ -92,45 +128,58 @@ function formatData(data: unknown): string {
 export function debug(tag: string, message: string, data?: unknown): void {
   if (LEVEL <= LOG_LEVELS.DEBUG) {
     const dataStr = data ? ` ${formatData(data)}` : "";
-    console.log(`[${formatTime()}] DEBUG [${tag}] ${message}${dataStr}`);
+    console.log(
+      `${DIM}[${formatTime()}]${RESET} ${GRAY}DEBUG${RESET} ${DIM}[${tag}]${RESET} ${message}${dataStr}`,
+    );
   }
 }
 
 export function info(tag: string, message: string, data?: unknown): void {
   if (LEVEL <= LOG_LEVELS.INFO) {
     const dataStr = data ? ` ${formatData(data)}` : "";
-    console.log(`[${formatTime()}] INFO [${tag}] ${message}${dataStr}`);
+    console.log(
+      `${DIM}[${formatTime()}]${RESET} ${CYAN}INFO${RESET} ${DIM}[${tag}]${RESET} ${message}${dataStr}`,
+    );
   }
 }
 
 export function warn(tag: string, message: string, data?: unknown): void {
   if (LEVEL <= LOG_LEVELS.WARN) {
     const dataStr = data ? ` ${formatData(data)}` : "";
-    console.warn(`[${formatTime()}] WARN [${tag}] ${message}${dataStr}`);
+    console.warn(
+      `${DIM}[${formatTime()}]${RESET} ${YELLOW}WARN${RESET} ${DIM}[${tag}]${RESET} ${message}${dataStr}`,
+    );
   }
 }
 
 export function error(tag: string, message: string, data?: unknown): void {
   if (LEVEL <= LOG_LEVELS.ERROR) {
     const dataStr = data ? ` ${formatData(data)}` : "";
-    console.error(`[${formatTime()}] ERROR [${tag}] ${message}${dataStr}`);
+    console.error(
+      `${DIM}[${formatTime()}]${RESET} ${RED}ERROR${RESET} ${DIM}[${tag}]${RESET} ${message}${dataStr}`,
+    );
   }
 }
 
 export function request(method: string, path: string, extra?: unknown): void {
   const dataStr = extra ? ` ${formatData(extra)}` : "";
-  console.log(`[${formatTime()}] [http] --> ${method} ${path}${dataStr}`);
+  console.log(
+    `${DIM}[${formatTime()}]${RESET} ${DIM}[http]${RESET} ${CYAN}-->${RESET} ${BOLD}${method}${RESET} ${path}${dataStr}`,
+  );
 }
 
 export function response(status: number, duration: number, extra?: unknown): void {
   const dataStr = extra ? ` ${formatData(extra)}` : "";
   const emit = status < 400 ? console.log : console.error;
-  emit(`[${formatTime()}] [http] <-- ${status} ${duration}ms${dataStr}`);
+  const color = status < 400 ? GREEN : RED;
+  emit(
+    `${DIM}[${formatTime()}]${RESET} ${DIM}[http]${RESET} ${color}<--${RESET} ${color}${BOLD}${status}${RESET} ${duration}ms${dataStr}`,
+  );
 }
 
 export function stream(event: string, data?: unknown): void {
   const dataStr = data ? ` ${formatData(data)}` : "";
-  console.log(`[${formatTime()}] [stream] ${event}${dataStr}`);
+  console.log(`${DIM}[${formatTime()}]${RESET} ${DIM}[stream]${RESET} ${event}${dataStr}`);
 }
 
 // Mask sensitive data