@amir83nasr/10router 0.1.0

package/src/app/(dashboard)/dashboard/usage/components/UsageTable.tsx

@@ -0,0 +1,249 @@
+"use client";
+import Icon from "@/shared/components/Icon";
+
+import { useState, useEffect, useCallback, useMemo, Fragment } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+
+const fmt = (n: any) => new Intl.NumberFormat().format(n || 0);
+const fmtCost = (n: any) => `$${(n || 0).toFixed(2)}`;
+
+function fmtTime(iso: any) {
+  if (!iso) return "Never";
+  const diffMins = Math.floor(((Date.now() as any) - (new Date(iso) as any)) / 60000);
+  if (diffMins < 1) return "Just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffMins < 1440) return `${Math.floor(diffMins / 60)}h ago`;
+  return new Date(iso).toLocaleDateString();
+}
+
+function SortIcon({ field, currentSort, currentOrder }: any) {
+  if (currentSort !== field) return <span className="ml-1 opacity-20">↕</span>;
+  return <span className="ml-1">{currentOrder === "asc" ? "↑" : "↓"}</span>;
+}
+
+/**
+ * Render 3 token or cost cells based on viewMode
+ */
+function ValueCells({ item, viewMode, isSummary = false }: any) {
+  if (viewMode === "tokens") {
+    return (
+      <>
+        <td className="px-4 py-2.5 text-right tabular-nums">
+          <span className="inline-flex min-w-16 items-center justify-center rounded-md bg-primary/10 px-1.5 py-1 text-center text-[11px] font-medium text-primary">
+            {isSummary && item.promptTokens === undefined ? "—" : fmt(item.promptTokens)}
+          </span>
+        </td>
+        <td className="px-4 py-2.5 text-right tabular-nums">
+          <span className="inline-flex min-w-16 items-center justify-center rounded-md bg-muted px-1.5 py-1 text-center text-[11px] font-medium text-muted-foreground">
+            {item.cachedTokens ? fmt(item.cachedTokens) : "—"}
+          </span>
+        </td>
+        <td className="px-4 py-2.5 text-right tabular-nums">
+          <span className="inline-flex min-w-16 items-center justify-center rounded-md bg-emerald-500/10 px-1.5 py-1 text-center text-[11px] font-medium text-emerald-600">
+            {isSummary && item.completionTokens === undefined ? "—" : fmt(item.completionTokens)}
+          </span>
+        </td>
+        <td className="px-4 py-2.5 text-right font-medium tabular-nums text-xs">
+          {fmt(item.totalTokens)}
+        </td>
+      </>
+    );
+  }
+  return (
+    <>
+      <td className="px-4 py-2.5 text-right tabular-nums">
+        <span className="inline-flex min-w-16 items-center justify-center rounded-md bg-primary/10 px-1.5 py-1 text-center text-[11px] font-medium text-primary">
+          {isSummary && item.inputCost === undefined ? "—" : fmtCost(item.inputCost)}
+        </span>
+      </td>
+      <td className="px-4 py-2.5 text-right tabular-nums">
+        <span className="inline-flex min-w-16 items-center justify-center rounded-md bg-muted px-1.5 py-1 text-center text-[11px] font-medium text-muted-foreground">
+          {item.cachedCost ? fmtCost(item.cachedCost) : "—"}
+        </span>
+      </td>
+      <td className="px-4 py-2.5 text-right tabular-nums">
+        <span className="inline-flex min-w-16 items-center justify-center rounded-md bg-emerald-500/10 px-1.5 py-1 text-center text-[11px] font-medium text-emerald-600">
+          {isSummary && item.outputCost === undefined ? "—" : fmtCost(item.outputCost)}
+        </span>
+      </td>
+      <td className="px-4 py-2.5 text-right">
+        <span className="inline-flex min-w-16 items-center justify-center rounded-md bg-amber-500/10 px-1.5 py-1 text-center text-[11px] font-medium text-amber-600">
+          {fmtCost(item.totalCost || item.cost)}
+        </span>
+      </td>
+    </>
+  );
+}
+
+/**
+ * Reusable sortable usage table with expandable group rows.
+ *
+ * @param {object} props
+ * @param {string} props.title - Table title
+ * @param {Array} props.columns - Column definitions [{field, label}]
+ * @param {Array} props.groupedData - Grouped data from groupDataByKey
+ * @param {string} props.tableType - Table type key for sort URL params
+ * @param {string} props.sortBy - Current sort field
+ * @param {string} props.sortOrder - Current sort order
+ * @param {function} props.onToggleSort - Sort toggle handler
+ * @param {string} props.viewMode - "tokens" or "costs"
+ * @param {string} props.storageKey - localStorage key for expanded state
+ * @param {function} props.renderGroupLabel - Render group summary first cell content
+ * @param {function} props.renderDetailCells - Render detail row custom cells (before value cells)
+ * @param {function} props.renderSummaryCells - Render summary row cells after group label (placeholder cols)
+ * @param {string} props.emptyMessage - Empty state message
+ */
+export default function UsageTable({
+  title,
+  columns,
+  groupedData,
+  tableType,
+  sortBy,
+  sortOrder,
+  onToggleSort,
+  viewMode,
+  storageKey,
+  renderDetailCells,
+  renderSummaryCells,
+  emptyMessage,
+}: any) {
+  const [expanded, setExpanded] = useState(new Set());
+
+  // Load expanded state from localStorage
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem(storageKey);
+      if (saved) setExpanded(new Set(JSON.parse(saved)));
+    } catch (e) {
+      console.error(`Failed to load ${storageKey}:`, e);
+    }
+  }, [storageKey]);
+
+  // Save expanded state to localStorage
+  useEffect(() => {
+    try {
+      localStorage.setItem(storageKey, JSON.stringify([...expanded]));
+    } catch (e) {
+      console.error(`Failed to save ${storageKey}:`, e);
+    }
+  }, [expanded, storageKey]);
+
+  const toggleGroup = useCallback((groupKey) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      next.has(groupKey) ? next.delete(groupKey) : next.add(groupKey);
+      return next;
+    });
+  }, []);
+
+  const valueColumns = useMemo(() => {
+    if (viewMode === "tokens") {
+      return [
+        { field: "promptTokens", label: "Input Tokens" },
+        { field: "cachedTokens", label: "Cached" },
+        { field: "completionTokens", label: "Output Tokens" },
+        { field: "totalTokens", label: "Total Tokens" },
+      ];
+    }
+    return [
+      { field: "promptTokens", label: "Input Cost" },
+      { field: "cachedCost", label: "Cached Cost" },
+      { field: "completionTokens", label: "Output Cost" },
+      { field: "cost", label: "Total Cost" },
+    ];
+  }, [viewMode]);
+
+  const totalColSpan = columns.length + valueColumns.length;
+
+  return (
+    <Card className="flex min-w-0 flex-col overflow-hidden" style={{ paddingBlock: 0, gap: 0 }}>
+      <div className="flex shrink-0 items-center gap-2 border-b border-border bg-card/80 px-4 py-3 backdrop-blur">
+        <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          {title}
+        </span>
+        <span className="ml-auto text-xs text-muted-foreground">{groupedData.length} groups</span>
+      </div>
+      <CardContent className="flex min-h-0 flex-1 flex-col p-0">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm text-left">
+            <thead className="border-b border-border/60 text-muted-foreground">
+              <tr>
+                {columns.map((col) => (
+                  <th
+                    key={col.field}
+                    className={`px-4 py-2 text-[11px] font-semibold uppercase tracking-wide cursor-pointer hover:bg-accent/60 ${col.align === "right" ? "text-right" : ""}`}
+                    onClick={() => onToggleSort(tableType, col.field)}
+                  >
+                    {col.label}{" "}
+                    <SortIcon field={col.field} currentSort={sortBy} currentOrder={sortOrder} />
+                  </th>
+                ))}
+                {valueColumns.map((col) => (
+                  <th
+                    key={col.field}
+                    className="px-4 py-2 text-right text-[11px] font-semibold uppercase tracking-wide cursor-pointer hover:bg-accent/60"
+                    onClick={() => onToggleSort(tableType, col.field)}
+                  >
+                    {col.label}{" "}
+                    <SortIcon field={col.field} currentSort={sortBy} currentOrder={sortOrder} />
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border/40">
+              {groupedData.map((group) => (
+                <Fragment key={group.groupKey}>
+                  {/* Group summary row */}
+                  <tr
+                    className="group-summary cursor-pointer transition-colors last:border-b-0 hover:bg-accent/60"
+                    onClick={() => toggleGroup(group.groupKey)}
+                  >
+                    <td className="px-4 py-2.5">
+                      <div className="flex items-center gap-2">
+                        <Icon
+                          name="chevron_right"
+                          className={`text-[18px] text-muted-foreground transition-transform ${expanded.has(group.groupKey) ? "rotate-90" : ""}`}
+                        />
+                        <span
+                          className={`truncate font-mono text-xs font-medium transition-colors ${group.summary.pending > 0 ? "text-primary" : ""}`}
+                        >
+                          {group.groupKey}
+                        </span>
+                      </div>
+                    </td>
+                    {renderSummaryCells(group)}
+                    <ValueCells item={group.summary} viewMode={viewMode} isSummary />
+                  </tr>
+                  {/* Detail rows */}
+                  {expanded.has(group.groupKey) &&
+                    group.items.map((item) => (
+                      <tr
+                        key={`detail-${item.key}`}
+                        className="group-detail bg-muted/20 transition-colors last:border-b-0 hover:bg-accent/60"
+                      >
+                        {renderDetailCells(item)}
+                        <ValueCells item={item} viewMode={viewMode} />
+                      </tr>
+                    ))}
+                </Fragment>
+              ))}
+              {groupedData.length === 0 && (
+                <tr>
+                  <td colSpan={totalColSpan} className="px-4 py-2.5">
+                    <div className="flex flex-col items-center justify-center gap-2 py-8 text-muted-foreground">
+                      <Icon name="history" className="text-2xl opacity-50" />
+                      <p className="text-xs">{emptyMessage}</p>
+                    </div>
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Re-export utilities for use in UsageStats orchestrator
+export { fmt, fmtCost, fmtTime };

package/src/app/(dashboard)/dashboard/usage/page.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { Suspense, useState } from "react";
+import {
+  UsageStats,
+  SegmentedControl,
+  Page,
+  StatCardSkeleton,
+  CardGrid,
+} from "@/shared/components";
+
+const PERIODS = [
+  { value: "today", label: "Today" },
+  { value: "24h", label: "24h" },
+  { value: "7d", label: "7D" },
+  { value: "30d", label: "30D" },
+  { value: "60d", label: "60D" },
+];
+
+export default function UsagePage() {
+  return (
+    <Suspense
+      fallback={
+        <Page>
+          <CardGrid variant="stat">
+            <StatCardSkeleton />
+            <StatCardSkeleton />
+            <StatCardSkeleton />
+            <StatCardSkeleton />
+            <StatCardSkeleton />
+          </CardGrid>
+        </Page>
+      }
+    >
+      <UsageContent />
+    </Suspense>
+  );
+}
+
+function UsageContent() {
+  const [period, setPeriod] = useState("today");
+
+  return (
+    <Page>
+      <div className="flex justify-start">
+        <SegmentedControl
+          options={PERIODS}
+          value={period}
+          onChange={setPeriod}
+          size="sm"
+          className="w-full sm:w-auto"
+        />
+      </div>
+
+      <Suspense
+        fallback={
+          <CardGrid variant="stat">
+            <StatCardSkeleton />
+            <StatCardSkeleton />
+            <StatCardSkeleton />
+            <StatCardSkeleton />
+            <StatCardSkeleton />
+          </CardGrid>
+        }
+      >
+        <UsageStats period={period} setPeriod={setPeriod} hidePeriodSelector />
+      </Suspense>
+    </Page>
+  );
+}

package/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,5 @@
+import { DashboardLayout } from "@/shared/components";
+
+export default function DashboardRootLayout({ children }: { children: React.ReactNode }) {
+  return <DashboardLayout>{children}</DashboardLayout>;
+}

package/src/app/api/auth/login/route.js

@@ -0,0 +1,146 @@
+import { NextResponse } from "next/server";
+import { getSettings } from "@/lib/localDb";
+import bcrypt from "bcryptjs";
+import { cookies } from "next/headers";
+import { setDashboardAuthCookie } from "@/lib/auth/dashboardSession";
+import { isOidcConfigured } from "@/lib/auth/oidc";
+import { isSamlConfigured } from "@/lib/auth/saml.js";
+import { checkLock, recordFail, recordSuccess, getClientIp } from "@/lib/auth/loginLimiter";
+import { isLocalRequest } from "@/dashboardGuard";
+
+const RESET_HINT =
+  "Forgot password? Reset to default via 10Router CLI → Settings → Reset Password to Default.";
+const NO_STORE_HEADERS = { "Cache-Control": "no-store" };
+
+function isTunnelRequest(request, settings) {
+  const host = (request.headers.get("host") || "").split(":")[0].toLowerCase();
+  const tunnelHost = settings.tunnelUrl ? new URL(settings.tunnelUrl).hostname.toLowerCase() : "";
+  const tailscaleHost = settings.tailscaleUrl
+    ? new URL(settings.tailscaleUrl).hostname.toLowerCase()
+    : "";
+  return (tunnelHost && host === tunnelHost) || (tailscaleHost && host === tailscaleHost);
+}
+
+export async function POST(request) {
+  try {
+    const ip = getClientIp(request);
+    const lock = checkLock(ip);
+    if (lock.locked) {
+      return NextResponse.json(
+        {
+          error: `Too many failed attempts. Try again in ${lock.retryAfter}s. ${RESET_HINT}`,
+          retryAfter: lock.retryAfter,
+          resetHint: RESET_HINT,
+        },
+        { status: 429, headers: { "Retry-After": String(lock.retryAfter) } },
+      );
+    }
+
+    const { password } = await request.json();
+    const settings = await getSettings();
+
+    // Block login via tunnel/tailscale if dashboard access is disabled
+    if (isTunnelRequest(request, settings) && settings.tunnelDashboardAccess !== true) {
+      return NextResponse.json(
+        { error: "Dashboard access via tunnel is disabled" },
+        { status: 403 },
+      );
+    }
+
+    // Default password is '123456' if not set
+    const storedHash = settings.password;
+
+    if (
+      settings.authMode === "sso" ||
+      settings.authMode === "saml" ||
+      settings.authMode === "oidc"
+    ) {
+      const ssoType = settings.ssoType || (settings.authMode === "saml" ? "saml" : "oidc");
+      if (ssoType === "saml" && isSamlConfigured(settings)) {
+        return NextResponse.json(
+          { error: "Password login is disabled. Use SAML SSO sign in." },
+          { status: 403 },
+        );
+      }
+      if (ssoType === "oidc" && isOidcConfigured(settings)) {
+        return NextResponse.json(
+          { error: "Password login is disabled. Use OIDC sign in." },
+          { status: 403 },
+        );
+      }
+    }
+
+    let isValid = false;
+    if (storedHash) {
+      isValid = await bcrypt.compare(password, storedHash);
+    } else {
+      // Use env var or default
+      const initialPassword = process.env.INITIAL_PASSWORD || "123456";
+      isValid = password === initialPassword;
+    }
+
+    if (isValid) {
+      recordSuccess(ip);
+
+      // Default password still in use on a remote client → force a password
+      // change before the dashboard is exposed remotely (keeps local UX intact).
+      const mustChangePassword =
+        !storedHash && !process.env.INITIAL_PASSWORD && !isLocalRequest(request);
+
+      if (mustChangePassword) {
+        // Do NOT issue a session token: a fresh install's default password is
+        // public knowledge ("123456"), so handing out a valid JWT would let any
+        // remote attacker authenticate and (e.g.) PATCH /api/settings to disable
+        // authentication entirely (CVE-2026-56679 class). Require the password
+        // to be changed first.
+        //
+        // NOTE: this intentionally leaves no remote self-service password-change
+        // path — the change-password flow (PATCH /api/settings) requires a JWT,
+        // which we deliberately withhold. A remote fresh-install user must either
+        // change the password from the local machine or set INITIAL_PASSWORD
+        // before first launch. This is a deliberate security trade-off, not an
+        // oversight: issuing any credential before the default password is
+        // rotated re-opens the exact attack chain this branch closes.
+        return NextResponse.json(
+          {
+            success: false,
+            error:
+              "Default password must be changed before remote access. Change it from the local machine (or set INITIAL_PASSWORD).",
+            mustChangePassword,
+          },
+          { status: 403, headers: NO_STORE_HEADERS },
+        );
+      }
+
+      const cookieStore = await cookies();
+      await setDashboardAuthCookie(cookieStore, request);
+
+      return NextResponse.json(
+        { success: true, mustChangePassword: false },
+        { headers: NO_STORE_HEADERS },
+      );
+    }
+
+    const { remainingBeforeLock } = recordFail(ip);
+    const postLock = checkLock(ip);
+    if (postLock.locked) {
+      return NextResponse.json(
+        {
+          error: `Too many failed attempts. Try again in ${postLock.retryAfter}s. ${RESET_HINT}`,
+          retryAfter: postLock.retryAfter,
+          resetHint: RESET_HINT,
+        },
+        { status: 429, headers: { "Retry-After": String(postLock.retryAfter) } },
+      );
+    }
+    return NextResponse.json(
+      {
+        error: `Invalid password. ${remainingBeforeLock} attempt(s) left before lockout.`,
+        remainingBeforeLock,
+      },
+      { status: 401 },
+    );
+  } catch (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}

package/src/app/api/auth/logout/route.js

@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server";
+import { cookies } from "next/headers";
+import { clearDashboardAuthCookie } from "@/lib/auth/dashboardSession";
+
+export async function POST() {
+  const cookieStore = await cookies();
+  clearDashboardAuthCookie(cookieStore);
+  cookieStore.delete("oidc_state");
+  cookieStore.delete("oidc_nonce");
+  cookieStore.delete("oidc_code_verifier");
+  return NextResponse.json({ success: true }, { headers: { "Cache-Control": "no-store" } });
+}

package/src/app/api/auth/oidc/callback/route.js

@@ -0,0 +1,100 @@
+import { NextResponse } from "next/server";
+import { cookies } from "next/headers";
+import {
+  exchangeOidcCode,
+  fetchOidcDiscovery,
+  getOidcRuntimeConfig,
+  getPublicOrigin,
+  pickOidcDisplayName,
+  pickOidcEmail,
+  verifyOidcIdToken,
+} from "@/lib/auth/oidc";
+import { setDashboardAuthCookie } from "@/lib/auth/dashboardSession";
+
+function clearOidcCookies(cookieStore) {
+  cookieStore.delete("oidc_state");
+  cookieStore.delete("oidc_nonce");
+  cookieStore.delete("oidc_code_verifier");
+}
+
+export async function GET(request) {
+  const url = new URL(request.url);
+  const error = url.searchParams.get("error");
+  if (error) {
+    return NextResponse.redirect(
+      new URL(`/login?error=${encodeURIComponent(error)}`, getPublicOrigin(request)),
+    );
+  }
+
+  const code = url.searchParams.get("code");
+  const state = url.searchParams.get("state");
+  if (!code || !state) {
+    return NextResponse.redirect(
+      new URL("/login?error=oidc_missing_code", getPublicOrigin(request)),
+    );
+  }
+
+  const cookieStore = await cookies();
+  const storedState = cookieStore.get("oidc_state")?.value;
+  const storedNonce = cookieStore.get("oidc_nonce")?.value;
+  const codeVerifier = cookieStore.get("oidc_code_verifier")?.value;
+
+  if (!storedState || !storedNonce || !codeVerifier || storedState !== state) {
+    clearOidcCookies(cookieStore);
+    return NextResponse.redirect(
+      new URL("/login?error=oidc_invalid_state", getPublicOrigin(request)),
+    );
+  }
+
+  try {
+    const config = await getOidcRuntimeConfig();
+    if (!config) {
+      clearOidcCookies(cookieStore);
+      return NextResponse.redirect(
+        new URL("/login?error=oidc_not_configured", getPublicOrigin(request)),
+      );
+    }
+
+    const discovery = await fetchOidcDiscovery(config.issuerUrl);
+    const discoveredIssuer = discovery.issuer || config.issuerUrl;
+    const redirectUri = `${getPublicOrigin(request)}/api/auth/oidc/callback`;
+    const tokenData = await exchangeOidcCode({
+      tokenEndpoint: discovery.token_endpoint,
+      clientId: config.clientId,
+      clientSecret: config.clientSecret,
+      code,
+      redirectUri,
+      codeVerifier,
+    });
+
+    if (!tokenData.id_token) {
+      throw new Error("OIDC provider did not return an id_token");
+    }
+
+    const payload = await verifyOidcIdToken({
+      idToken: tokenData.id_token,
+      issuer: discoveredIssuer,
+      audience: config.clientId,
+      jwksUri: discovery.jwks_uri,
+      nonce: storedNonce,
+    });
+
+    clearOidcCookies(cookieStore);
+    await setDashboardAuthCookie(cookieStore, request, {
+      oidc: true,
+      oidcSub: payload.sub || null,
+      oidcEmail: pickOidcEmail(payload) || null,
+      oidcName: pickOidcDisplayName(payload),
+    });
+
+    return NextResponse.redirect(new URL("/dashboard", getPublicOrigin(request)));
+  } catch (error) {
+    clearOidcCookies(cookieStore);
+    return NextResponse.redirect(
+      new URL(
+        `/login?error=${encodeURIComponent(error.message || "oidc_callback_failed")}`,
+        getPublicOrigin(request),
+      ),
+    );
+  }
+}

package/src/app/api/auth/oidc/start/route.js

@@ -0,0 +1,59 @@
+import { NextResponse } from "next/server";
+import { cookies } from "next/headers";
+import {
+  buildOidcAuthorizationUrl,
+  createOidcNonce,
+  createOidcState,
+  createPkcePair,
+  fetchOidcDiscovery,
+  getOidcRuntimeConfig,
+  getPublicOrigin,
+} from "@/lib/auth/oidc";
+import { shouldUseSecureCookie } from "@/lib/auth/dashboardSession";
+
+export async function GET(request) {
+  try {
+    const config = await getOidcRuntimeConfig();
+    if (!config) {
+      return NextResponse.redirect(
+        new URL("/login?error=oidc_not_configured", getPublicOrigin(request)),
+      );
+    }
+
+    const discovery = await fetchOidcDiscovery(config.issuerUrl);
+    const state = createOidcState();
+    const nonce = createOidcNonce();
+    const { verifier, challenge } = createPkcePair();
+    const redirectUri = `${getPublicOrigin(request)}/api/auth/oidc/callback`;
+    const authUrl = buildOidcAuthorizationUrl({
+      authorizationEndpoint: discovery.authorization_endpoint,
+      clientId: config.clientId,
+      redirectUri,
+      scopes: config.scopes,
+      state,
+      nonce,
+      codeChallenge: challenge,
+    });
+
+    const cookieStore = await cookies();
+    const baseOptions = {
+      httpOnly: true,
+      secure: shouldUseSecureCookie(request),
+      sameSite: "lax",
+      path: "/",
+      maxAge: 10 * 60,
+    };
+    cookieStore.set("oidc_state", state, baseOptions);
+    cookieStore.set("oidc_nonce", nonce, baseOptions);
+    cookieStore.set("oidc_code_verifier", verifier, baseOptions);
+
+    return NextResponse.redirect(authUrl);
+  } catch (error) {
+    return NextResponse.redirect(
+      new URL(
+        `/login?error=${encodeURIComponent(error.message || "oidc_start_failed")}`,
+        getPublicOrigin(request),
+      ),
+    );
+  }
+}