feat(console): split settings page into upstream/records/cors sections with scroll nav

- Settings page now uses sticky section nav (upstream timeouts / records / CORS) with smooth scroll + active highlight.
- Add read-only Records section showing effective DEBUG_DB_MAX_RECORDS.
- Add read-only CORS section showing allow-origin and enabled state.
- Backend timeouts API now returns runtime: { retentionMaxRecords, corsAllowOrigin, corsEnabled }.
- Drop square 'L' logo from NavBar, keep only LRS wordmark.

Author: GoJam11

changelog/2026-06-27.md

@@ -21,3 +21,10 @@
   - 新增 `console_requests.cost_pricing_json` 列（迁移 `drizzle/0009_request_cost_pricing_snapshot.sql`），存请求响应时生效的 `ModelPricing` 快照。
   - 写入：`saveConsoleResponse` 经 `resolveRequestPricing` 解析一次有效定价（route/model override → catalog），写入快照列，并复用同一份定价做 Key 额度扣费（`syncApiKeyQuotaCharge` 不再二次查价）。
   - 读取：新增 `resolveRowPricing(cost_pricing_json, …)`，优先用行内快照、缺失时回退实时定价（兼容历史旧行）。日志列表（`mapListRow`）、详情（`mapRow`）、用量统计（`updateUsageAccumulator`）、时序（timeseries）四处成本计算统一走它，保证日志与用量页一致。
+- 配置页改造为可滚动主从布局：
+  - 左侧 section nav 拆为三项（上游超时 / 记录 / 跨域），点击可平滑滚动并高亮当前 section；
+  - 新增「记录」section：只读展示 `DEBUG_DB_MAX_RECORDS` 生效值（`getMaxDebugRecords()`），带「只读」徽标说明由环境变量控制；
+  - 新增「跨域」section：只读展示 CORS 允许来源 (`*`) 与启用状态（开关样式视觉），说明由内置策略控制；
+  - 后端 `GET/PATCH /__console/api/settings/timeouts` 响应附加 `runtime: { retentionMaxRecords, corsAllowOrigin, corsEnabled }`；前端 `GatewayTimeoutSettingsPayload` 增加可选 `runtime` 字段；
+  - i18n：新增 `settings.navRecords` / `navCors` / `recordsTitle` / `maxRecordsLabel` / `maxRecordsDesc` / `corsTitle` / `corsOriginLabel` / `corsOriginDesc` / `corsEnabledLabel` / `corsEnabledDesc` / `readOnlyBadge` / `readOnlyHint` 等中英文 key。
+- NavBar 顶部 logo 去除方形「L」图标，只保留 `LRS` 文字，避免与左侧菜单图标视觉冲突。

console/ai-proxy-dashboard/src/features/dashboard/components/nav-bar.tsx

@@ -51,11 +51,8 @@ export function NavBar({
         <button
           type="button"
           onClick={() => onNavigate("monitor")}
-          className="flex items-center gap-2.5"
+          className="flex items-center"
         >
-          <span className="flex h-8 w-8 items-center justify-center rounded-[10px] bg-primary text-base font-extrabold text-primary-foreground">
-            L
-          </span>
           <span className="text-[17px] font-extrabold tracking-[0.04em] text-foreground">LRS</span>
         </button>
         <span className="hidden text-[13px] text-muted-foreground sm:inline">

console/ai-proxy-dashboard/src/features/dashboard/components/settings-page.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useState } from "react"
-import { Clock, Loader2, RefreshCw, Save } from "lucide-react"
+import { useEffect, useRef, useState } from "react"
+import { Clock, Database, Globe, Loader2, RefreshCw, Save } from "lucide-react"
 import { useTranslation } from "react-i18next"
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Skeleton } from "@/components/ui/skeleton"
+import { cn } from "@/lib/utils"
 import { fetchGatewayTimeoutSettings, updateGatewayTimeoutSettings } from "@/features/dashboard/api"
 import type { GatewayTimeoutSettingsPayload, TimeoutLimit } from "@/features/dashboard/types"
 
@@ -16,6 +17,8 @@ type TimeoutFormState = {
   responseIdleTimeoutSeconds: string
 }
 
+type SectionId = "upstream" | "records" | "cors"
+
 function secondsText(ms: number): string {
   const seconds = ms / 1000
   return Number.isInteger(seconds) ? String(seconds) : String(Number(seconds.toFixed(3)))
@@ -91,6 +94,79 @@ function SettingRow({
   )
 }
 
+function ReadOnlyRow({
+  label,
+  desc,
+  children,
+}: {
+  label: string
+  desc: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className="flex items-center justify-between gap-4 rounded-xl border border-border p-4">
+      <div className="min-w-0">
+        <div className="text-[13.5px] font-semibold text-foreground">{label}</div>
+        <div className="mt-0.5 text-[11.5px] text-muted-foreground">{desc}</div>
+      </div>
+      <div className="shrink-0">{children}</div>
+    </div>
+  )
+}
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="text-[12px] font-bold uppercase tracking-[0.04em] text-primary">{children}</div>
+  )
+}
+
+function SectionNavItem({
+  icon,
+  label,
+  count,
+  active,
+  onClick,
+}: {
+  icon: React.ReactNode
+  label: string
+  count: string
+  active: boolean
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "flex items-center gap-3 rounded-xl px-3.5 py-3 text-left transition-colors",
+        active
+          ? "border border-[color:var(--accent-foreground)]/20 bg-accent"
+          : "border border-transparent hover:bg-muted/50",
+      )}
+    >
+      <span
+        className={cn(
+          "flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-lg",
+          active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground",
+        )}
+      >
+        {icon}
+      </span>
+      <div>
+        <div
+          className={cn(
+            "text-[13.5px]",
+            active ? "font-bold text-accent-foreground" : "font-semibold text-foreground",
+          )}
+        >
+          {label}
+        </div>
+        <div className="text-[11px] text-muted-foreground">{count}</div>
+      </div>
+    </button>
+  )
+}
+
 export function SettingsPage({ onUnauthorized }: { onUnauthorized: () => void }) {
   const { t } = useTranslation()
   const [settings, setSettings] = useState<GatewayTimeoutSettingsPayload | null>(null)
@@ -104,6 +180,19 @@ export function SettingsPage({ onUnauthorized }: { onUnauthorized: () => void })
   const [feedback, setFeedback] = useState("")
   const [loading, setLoading] = useState(false)
   const [saving, setSaving] = useState(false)
+  const [activeSection, setActiveSection] = useState<SectionId>("upstream")
+
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const sectionRefs = useRef<Record<SectionId, HTMLDivElement | null>>({
+    upstream: null,
+    records: null,
+    cors: null,
+  })
+
+  const goToSection = (id: SectionId) => {
+    setActiveSection(id)
+    sectionRefs.current[id]?.scrollIntoView({ behavior: "smooth", block: "start" })
+  }
 
   const handleUnauthorized = (message: string) => {
     if (message === "unauthorized") {
@@ -173,6 +262,8 @@ export function SettingsPage({ onUnauthorized }: { onUnauthorized: () => void })
   const fieldDesc = (defaultMs: number, limit: TimeoutLimit) =>
     `${t("settings.defaultValue", { value: secondsText(defaultMs) })} · ${t("settings.rangeHint", { min: secondsText(limit.minMs), max: secondsText(limit.maxMs) })}`
 
+  const runtime = settings?.runtime
+
   return (
     <div className="flex flex-col gap-6">
       {/* Toolbar — actions */}
@@ -208,16 +299,28 @@ export function SettingsPage({ onUnauthorized }: { onUnauthorized: () => void })
       ) : (
         <div className="grid grid-cols-1 gap-6 lg:grid-cols-[280px_1fr]">
           {/* Section nav */}
-          <div className="flex flex-col gap-3">
-            <div className="flex items-center gap-3 rounded-xl border border-[color:var(--accent-foreground)]/20 bg-accent px-3.5 py-3">
-              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-                <Clock className="h-4 w-4" />
-              </span>
-              <div>
-                <div className="text-[13.5px] font-bold text-accent-foreground">{t("settings.navUpstream")}</div>
-                <div className="text-[11px] text-muted-foreground">{t("settings.itemCount", { count: 4 })}</div>
-              </div>
-            </div>
+          <div className="flex flex-col gap-1.5">
+            <SectionNavItem
+              icon={<Clock className="h-4 w-4" />}
+              label={t("settings.navUpstream")}
+              count={t("settings.itemCount", { count: 4 })}
+              active={activeSection === "upstream"}
+              onClick={() => goToSection("upstream")}
+            />
+            <SectionNavItem
+              icon={<Database className="h-4 w-4" />}
+              label={t("settings.navRecords")}
+              count={t("settings.itemCount", { count: 1 })}
+              active={activeSection === "records"}
+              onClick={() => goToSection("records")}
+            />
+            <SectionNavItem
+              icon={<Globe className="h-4 w-4" />}
+              label={t("settings.navCors")}
+              count={t("settings.itemCount", { count: 2 })}
+              active={activeSection === "cors"}
+              onClick={() => goToSection("cors")}
+            />
             <div className="mt-auto rounded-xl border border-border bg-muted/40 p-4">
               <div className="text-[11.5px] font-bold text-foreground">{t("settings.applyTitle")}</div>
               <p className="mt-1.5 text-[11.5px] leading-relaxed text-muted-foreground">{t("settings.applyNote")}</p>
@@ -226,41 +329,112 @@ export function SettingsPage({ onUnauthorized }: { onUnauthorized: () => void })
 
           {/* Content */}
           <div className="flex flex-col">
-            <div className="text-[12px] font-bold uppercase tracking-[0.04em] text-primary">
-              {t("settings.firstByteTitle")}
-            </div>
-            <div className="mt-4 grid gap-3.5 md:grid-cols-2">
-              <SettingRow
-                label={t("settings.defaultFirstByteLabel")}
-                desc={fieldDesc(settings.defaults.defaultFirstByteTimeoutMs, settings.limits.firstByte)}
-                value={form.defaultFirstByteTimeoutSeconds}
-                onChange={(value) => setForm((c) => ({ ...c, defaultFirstByteTimeoutSeconds: value }))}
-                limit={settings.limits.firstByte}
-              />
-              <SettingRow
-                label={t("settings.streamFirstByteLabel")}
-                desc={fieldDesc(settings.defaults.streamFirstByteTimeoutMs, settings.limits.firstByte)}
-                value={form.streamFirstByteTimeoutSeconds}
-                onChange={(value) => setForm((c) => ({ ...c, streamFirstByteTimeoutSeconds: value }))}
-                limit={settings.limits.firstByte}
-              />
-              <SettingRow
-                label={t("settings.imageFirstByteLabel")}
-                desc={fieldDesc(settings.defaults.imageFirstByteTimeoutMs, settings.limits.firstByte)}
-                value={form.imageFirstByteTimeoutSeconds}
-                onChange={(value) => setForm((c) => ({ ...c, imageFirstByteTimeoutSeconds: value }))}
-                limit={settings.limits.firstByte}
-              />
-              <SettingRow
-                label={t("settings.responseIdleLabel")}
-                desc={fieldDesc(settings.defaults.responseIdleTimeoutMs, settings.limits.responseIdle)}
-                value={form.responseIdleTimeoutSeconds}
-                onChange={(value) => setForm((c) => ({ ...c, responseIdleTimeoutSeconds: value }))}
-                limit={settings.limits.responseIdle}
-              />
+            <div ref={scrollRef} className="flex flex-col gap-7">
+              {/* Upstream timeouts */}
+              <div
+                ref={(el) => {
+                  sectionRefs.current.upstream = el
+                }}
+                className="scroll-mt-4"
+              >
+                <SectionTitle>{t("settings.firstByteTitle")}</SectionTitle>
+                <div className="mt-4 grid gap-3.5 md:grid-cols-2">
+                  <SettingRow
+                    label={t("settings.defaultFirstByteLabel")}
+                    desc={fieldDesc(settings.defaults.defaultFirstByteTimeoutMs, settings.limits.firstByte)}
+                    value={form.defaultFirstByteTimeoutSeconds}
+                    onChange={(value) => setForm((c) => ({ ...c, defaultFirstByteTimeoutSeconds: value }))}
+                    limit={settings.limits.firstByte}
+                  />
+                  <SettingRow
+                    label={t("settings.streamFirstByteLabel")}
+                    desc={fieldDesc(settings.defaults.streamFirstByteTimeoutMs, settings.limits.firstByte)}
+                    value={form.streamFirstByteTimeoutSeconds}
+                    onChange={(value) => setForm((c) => ({ ...c, streamFirstByteTimeoutSeconds: value }))}
+                    limit={settings.limits.firstByte}
+                  />
+                  <SettingRow
+                    label={t("settings.imageFirstByteLabel")}
+                    desc={fieldDesc(settings.defaults.imageFirstByteTimeoutMs, settings.limits.firstByte)}
+                    value={form.imageFirstByteTimeoutSeconds}
+                    onChange={(value) => setForm((c) => ({ ...c, imageFirstByteTimeoutSeconds: value }))}
+                    limit={settings.limits.firstByte}
+                  />
+                  <SettingRow
+                    label={t("settings.responseIdleLabel")}
+                    desc={fieldDesc(settings.defaults.responseIdleTimeoutMs, settings.limits.responseIdle)}
+                    value={form.responseIdleTimeoutSeconds}
+                    onChange={(value) => setForm((c) => ({ ...c, responseIdleTimeoutSeconds: value }))}
+                    limit={settings.limits.responseIdle}
+                  />
+                </div>
+              </div>
+
+              {/* Records (read-only) */}
+              <div
+                ref={(el) => {
+                  sectionRefs.current.records = el
+                }}
+                className="scroll-mt-4"
+              >
+                <div className="flex items-center gap-2">
+                  <SectionTitle>{t("settings.recordsTitle")}</SectionTitle>
+                  <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    {t("settings.readOnlyBadge")}
+                  </span>
+                </div>
+                <div className="mt-4">
+                  <ReadOnlyRow label={t("settings.maxRecordsLabel")} desc={t("settings.maxRecordsDesc")}>
+                    <span className="rounded-lg border border-border px-3.5 py-2 font-mono text-[13px] tabular-nums text-foreground">
+                      {runtime ? String(runtime.retentionMaxRecords) : "—"}
+                    </span>
+                  </ReadOnlyRow>
+                </div>
+              </div>
+
+              {/* CORS (read-only) */}
+              <div
+                ref={(el) => {
+                  sectionRefs.current.cors = el
+                }}
+                className="scroll-mt-4"
+              >
+                <div className="flex items-center gap-2">
+                  <SectionTitle>{t("settings.corsTitle")}</SectionTitle>
+                  <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                    {t("settings.readOnlyBadge")}
+                  </span>
+                </div>
+                <div className="mt-4 grid gap-3.5 md:grid-cols-2">
+                  <ReadOnlyRow label={t("settings.corsOriginLabel")} desc={t("settings.corsOriginDesc")}>
+                    <span className="rounded-lg border border-border px-3.5 py-2 font-mono text-[13px] text-foreground">
+                      {runtime?.corsAllowOrigin ?? "*"}
+                    </span>
+                  </ReadOnlyRow>
+                  <ReadOnlyRow label={t("settings.corsEnabledLabel")} desc={t("settings.corsEnabledDesc")}>
+                    <span
+                      role="img"
+                      aria-label={runtime?.corsEnabled !== false ? "on" : "off"}
+                      className={cn(
+                        "relative inline-block h-6 w-[42px] rounded-full",
+                        runtime?.corsEnabled !== false ? "bg-primary" : "bg-muted",
+                      )}
+                    >
+                      <span
+                        className={cn(
+                          "absolute top-[3px] h-[18px] w-[18px] rounded-full bg-white transition-all",
+                          runtime?.corsEnabled !== false ? "right-[3px]" : "left-[3px]",
+                        )}
+                      />
+                    </span>
+                  </ReadOnlyRow>
+                </div>
+                <p className="mt-2 text-[11.5px] text-muted-foreground">{t("settings.readOnlyHint")}</p>
+              </div>
             </div>
 
-            <div className="mt-6 flex items-center gap-3 border-t border-border pt-5">
+            {/* Footer save bar */}
+            <div className="mt-7 flex items-center gap-3 border-t border-border pt-5">
               <span className="text-[11.5px] text-muted-foreground">{t("settings.applyNote")}</span>
               <Button type="button" variant="outline" size="sm" className="ml-auto" onClick={restoreDefaults}>
                 {t("settings.restoreDefaults")}

console/ai-proxy-dashboard/src/features/dashboard/types.ts

@@ -357,6 +357,12 @@ export type GatewayTimeoutSettings = {
   responseIdleTimeoutMs: number
 }
 
+export type GatewaySettingsRuntimeInfo = {
+  retentionMaxRecords: number
+  corsAllowOrigin: string
+  corsEnabled: boolean
+}
+
 export type GatewayTimeoutSettingsPayload = GatewayTimeoutSettings & {
   ok: boolean
   defaults: GatewayTimeoutSettings
@@ -365,6 +371,7 @@ export type GatewayTimeoutSettingsPayload = GatewayTimeoutSettings & {
     responseIdle: TimeoutLimit
   }
   updatedAt: number | null
+  runtime?: GatewaySettingsRuntimeInfo
 }
 
 export type ModelFallbackMode = "disabled" | "same_model" | "any_model"

console/ai-proxy-dashboard/src/i18n/locales/en.ts

@@ -185,7 +185,19 @@ export default {
     responseIdleLabel: "Body idle timeout",
     secondsSuffix: "seconds",
     navUpstream: "Upstream timeouts",
+    navRecords: "Records",
+    navCors: "CORS",
     itemCount: "{{count}} items",
+    recordsTitle: "Records",
+    maxRecordsLabel: "Max retained request records",
+    maxRecordsDesc: "Oldest records are pruned once exceeded",
+    corsTitle: "CORS",
+    corsOriginLabel: "CORS allowed origin",
+    corsOriginDesc: "Built-in cross-origin handling",
+    corsEnabledLabel: "Enable CORS",
+    corsEnabledDesc: "Allow browsers to call the gateway cross-origin",
+    readOnlyBadge: "Read-only",
+    readOnlyHint: "Controlled by env vars / built-in policy — not editable in the console",
     applyTitle: "Takes effect",
     applyNote: "Persisted immediately when changed in the console, overriding env-var defaults — no gateway restart needed.",
     restoreDefaults: "Restore defaults",