@linxin666/dsh-usage 0.4.7 → 0.4.8

package/lib/index.js

@@ -2025,12 +2025,26 @@ function isLoopbackHostname(hostname) {
 	return isIPv4Loopback(hostname);
 }
 /**
+* Whether a reverse proxy stood between the client and this host: the request
+* carries CF-Connecting-IP or X-Forwarded-For. Either header is stamped by a
+* hop that forwards traffic, so the request did not originate on this machine.
+* @param request - node HTTP request.
+* @returns true when a forwarding header is present.
+*/
+function isProxiedRequest(request) {
+	return request.headers["cf-connecting-ip"] !== void 0 || request.headers["x-forwarded-for"] !== void 0;
+}
+/**
 * Request-level trust fence: a loopback socket address AND a loopback Host
 * header, plus browser same-origin markers. The socket address is
-* authoritative; X-Forwarded-For is never trusted.
+* authoritative for a direct connection; a request that carries a forwarding
+* header is refused outright, because a proxy in front of the host makes both
+* the socket address and the Host header describe the proxy rather than the
+* client. X-Forwarded-For is therefore never evidence *for* loopback.
 */
 function isLoopbackRequest(request) {
 	if (!isLoopbackAddress(request.socket.remoteAddress)) return false;
+	if (isProxiedRequest(request)) return false;
 	const host = request.headers.host;
 	if (typeof host !== "string") return false;
 	let hostUrl;

package/lib/types/client/PeakBadge.d.ts

@@ -0,0 +1,22 @@
+/**
+ * DeepSeek pricing-clock marker, shared by the usage panel's peak line and the
+ * sidebar foot card: a filled dot plus the period word, red while the peak
+ * window bills double and green while off-peak bills half. The word always
+ * rides with the colour (colour alone is not a signal), and the priced
+ * sentence moves to the title so a tight surface stays one short token.
+ * @module @linxin666/dsh-usage/client/PeakBadge
+ */
+import type { ReactNode } from 'react';
+/** Props: where the clock stands and how much copy the surface can hold. */
+export interface PeakBadgeProps {
+    /** Whether the published DeepSeek peak window is in force now. */
+    peak: boolean;
+    /** End of the current period (the peak close), or the next peak open when off-peak. */
+    boundaryMs: number;
+    /** compact: dot plus the period word; full: the whole priced sentence. */
+    variant: 'compact' | 'full';
+}
+/** HH:MM of one instant; an unparsable instant drops the time. */
+export declare function formatClock(ms: number): string;
+/** The peak/off-peak marker itself; nothing renders outside the DeepSeek family. */
+export declare function PeakBadge(props: PeakBadgeProps): ReactNode;

package/lib/types/client/locales.d.ts

@@ -29,6 +29,10 @@ export declare const zh: {
     'usage.day.error': string;
     'usage.peak.on': string;
     'usage.peak.off': string;
+    'usage.peak.tag.on': string;
+    'usage.peak.tag.off': string;
+    'usage.peak.ends': string;
+    'usage.peak.starts': string;
     'usage.calls': string;
     'usage.tokens.total': string;
     'usage.tokens.input': string;

package/lib/types/host/loopback.d.ts

@@ -7,6 +7,14 @@
  * Semantics: RFC 5735 IPv4 127/8, ::1, IPv4-mapped ::ffff:127/8 (matching the
  * remote-web-ui gate), localhost hostnames, plus the browser same-origin
  * markers (sec-fetch-site and Origin) for the request-level fence.
+ *
+ * A reverse proxy in front of the host rewrites the Host header to its own
+ * upstream literal (a Cloudflare tunnel, frp and an nginx reverse proxy all
+ * dial 127.0.0.1:<port>), and the socket the origin sees is the proxy's, which
+ * is loopback by construction. Both halves of the fence then hold for a public
+ * request. Forwarding headers are the signal that a hop stands in between: a
+ * request that carries CF-Connecting-IP or X-Forwarded-For is answered through
+ * a proxy and is never treated as a local one (issue #1906).
  * @module dsh-web-shared/host/loopback
  */
 import type { IncomingMessage } from 'node:http';
@@ -16,9 +24,20 @@ export declare function isIPv4Loopback(v4: string): boolean;
 export declare function isLoopbackAddress(address: string | undefined): boolean;
 /** Whether a normalized URL hostname names the loopback authority (localhost, [::1], 127/8). */
 export declare function isLoopbackHostname(hostname: string): boolean;
+/**
+ * Whether a reverse proxy stood between the client and this host: the request
+ * carries CF-Connecting-IP or X-Forwarded-For. Either header is stamped by a
+ * hop that forwards traffic, so the request did not originate on this machine.
+ * @param request - node HTTP request.
+ * @returns true when a forwarding header is present.
+ */
+export declare function isProxiedRequest(request: IncomingMessage): boolean;
 /**
  * Request-level trust fence: a loopback socket address AND a loopback Host
  * header, plus browser same-origin markers. The socket address is
- * authoritative; X-Forwarded-For is never trusted.
+ * authoritative for a direct connection; a request that carries a forwarding
+ * header is refused outright, because a proxy in front of the host makes both
+ * the socket address and the Host header describe the proxy rather than the
+ * client. X-Forwarded-For is therefore never evidence *for* loopback.
  */
 export declare function isLoopbackRequest(request: IncomingMessage): boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-usage",
   "description": "Usage statistics plugin for the dsh web GUI: per-provider balance and coding-plan quota detection plus a live token usage ledger, with a compact price glance card above the sidebar's Settings row",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "icon": "icon.svg",
   "type": "module",
   "engines": {

package/src/client/PeakBadge.tsx

@@ -0,0 +1,48 @@
+/**
+ * DeepSeek pricing-clock marker, shared by the usage panel's peak line and the
+ * sidebar foot card: a filled dot plus the period word, red while the peak
+ * window bills double and green while off-peak bills half. The word always
+ * rides with the colour (colour alone is not a signal), and the priced
+ * sentence moves to the title so a tight surface stays one short token.
+ * @module @linxin666/dsh-usage/client/PeakBadge
+ */
+
+import type { ReactNode } from 'react'
+import { t } from './locales.ts'
+import styles from './usage.module.css'
+
+/** Props: where the clock stands and how much copy the surface can hold. */
+export interface PeakBadgeProps {
+  /** Whether the published DeepSeek peak window is in force now. */
+  peak: boolean
+  /** End of the current period (the peak close), or the next peak open when off-peak. */
+  boundaryMs: number
+  /** compact: dot plus the period word; full: the whole priced sentence. */
+  variant: 'compact' | 'full'
+}
+
+/** HH:MM of one instant; an unparsable instant drops the time. */
+export function formatClock(ms: number): string {
+  try {
+    return new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+  } catch {
+    return ''
+  }
+}
+
+/** The peak/off-peak marker itself; nothing renders outside the DeepSeek family. */
+export function PeakBadge(props: PeakBadgeProps): ReactNode {
+  const { peak, boundaryMs, variant } = props
+  const sentence = t(peak ? 'usage.peak.on' : 'usage.peak.off', { time: formatClock(boundaryMs) })
+  return (
+    <span
+      className={variant === 'full' ? styles.peakLine : styles.peakBadge}
+      data-peak={peak ? 'on' : 'off'}
+      data-dsh-part="peak-status"
+      title={sentence}
+    >
+      <span className={styles.peakDot} aria-hidden="true" />
+      {variant === 'full' ? sentence : t(peak ? 'usage.peak.tag.on' : 'usage.peak.tag.off')}
+    </span>
+  )
+}

package/src/client/UsageFootCard.tsx

@@ -27,7 +27,10 @@ import { useEffect, useState, useSyncExternalStore, type ReactNode } from 'react
 import type { ConfigForm } from '@deepseek-ai/dsh-client-ui-settings/client'
 import { t } from './locales.ts'
 import styles from './usage.module.css'
+import { formatClock, PeakBadge } from './PeakBadge.tsx'
 import { formatTokens, type UsageSettings } from './UsageSectionCard.tsx'
+import { deepseekPeriodAt } from '../core/pricing.ts'
+import { isDeepSeekProviderRoute } from '../core/adapters.ts'
 import { totalTokens } from '../core/ledger.ts'
 import type { BalanceView, ProviderSnapshotView, UsageOverviewView } from '../core/types.ts'
 import type { UsageStoreInstance } from './usage-store.ts'
@@ -114,27 +117,23 @@ function formatBalance(balance: BalanceView): string {
   return currency + ' ' + balance.totalBalance
 }
 
-function formatClock(ms: number): string {
-  try {
-    return new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-  } catch {
-    return ''
-  }
-}
-
 /**
- * Display name of the provider owning today's priced spend: the day's highest
- * cost row, else the current session route, resolved through the provider
- * snapshot (an older host without the day rows falls back to the current
- * route). Undefined when there is no route to name.
+ * Route key owning today's priced spend: the day's highest cost row, else the
+ * current session route (an older host without the day rows falls back to the
+ * current route). Undefined when neither names one.
  */
-function spendProvider(snapshot: UsageOverviewView): string | undefined {
+function spendRoute(snapshot: UsageOverviewView): string | undefined {
   let top: UsageOverviewView['usage']['today']['providers'][number] | undefined
   for (const row of snapshot.usage.today.providers) {
     if (row.totals.cost <= 0) continue
     if (top === undefined || row.totals.cost > top.totals.cost) top = row
   }
-  const route = top?.provider ?? snapshot.current.provider
+  return top?.provider ?? snapshot.current.provider
+}
+
+/** Display name of the route spendRoute() names, resolved through the snapshot. */
+function spendProvider(snapshot: UsageOverviewView): string | undefined {
+  const route = spendRoute(snapshot)
   if (route === undefined) return undefined
   return snapshot.providers.find((entry) => entry.provider === route)?.displayName
     ?? (route === snapshot.current.provider ? snapshot.current.displayName : undefined)
@@ -266,6 +265,11 @@ export function UsageFootCard(props: UsageFootCardProps): ReactNode {
 
   const head = headline(snapshot)
   const balances = balanceLine(snapshot)
+  // The published peak/off-peak clock prices the official DeepSeek family only,
+  // so the marker follows the route that owns today's spend (else the session
+  // route) and stays away from every other provider's card.
+  const route = spendRoute(snapshot)
+  const period = route !== undefined && isDeepSeekProviderRoute(route) ? deepseekPeriodAt(Date.now()) : undefined
 
   if (collapsed) {
     return (
@@ -274,6 +278,7 @@ export function UsageFootCard(props: UsageFootCardProps): ReactNode {
           <span className={styles.footStrip} data-dsh-part="foot-card-strip">
             <GaugeIcon />
             {head.provider !== undefined && <span className={styles.footStripProvider}>{head.provider}</span>}
+            {period !== undefined && <PeakBadge peak={period.peak} boundaryMs={period.boundaryMs} variant="compact" />}
             <span className={styles.footStripLabel}>{head.label}</span>
             <span className={styles.footStripValue}>{head.value}</span>
           </span>
@@ -292,6 +297,14 @@ export function UsageFootCard(props: UsageFootCardProps): ReactNode {
         </span>
         <span className={styles.footLine} data-dsh-part="foot-card-usage">{usageLine(snapshot, head.tokenFallback)}</span>
         {balances !== undefined && <span className={styles.footLine} data-dsh-part="foot-card-balances">{balances}</span>}
+        {period !== undefined && (
+          <span className={styles.footPeak}>
+            <PeakBadge peak={period.peak} boundaryMs={period.boundaryMs} variant="compact" />
+            <span className={styles.footPeakClock}>
+              {t(period.peak ? 'usage.peak.ends' : 'usage.peak.starts', { time: formatClock(period.boundaryMs) })}
+            </span>
+          </span>
+        )}
         <span className={styles.footMeta}>{t('usage.updated', { time: formatClock(snapshot.updatedAt) })}</span>
       </button>
       {toggle}

package/src/client/UsageSectionCard.tsx

@@ -13,6 +13,7 @@ import type { ConfigForm, ConfigFormSnapshot } from '@deepseek-ai/dsh-client-ui-
 import type { UsageStoreInstance } from './usage-store.ts'
 import { t } from './locales.ts'
 import styles from './usage.module.css'
+import { PeakBadge } from './PeakBadge.tsx'
 import { isDeepSeekProviderRoute } from '../core/adapters.ts'
 import { deepseekPeriodAt } from '../core/pricing.ts'
 import { voucherData, drawVoucher, faceValue, formatDay, formatDenomination, loadVoucherArt } from './voucher.ts'
@@ -77,14 +78,6 @@ function formatTime(ms: number): string {
   }
 }
 
-function formatClock(ms: number): string {
-  try {
-    return new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-  } catch {
-    return ''
-  }
-}
-
 /** Formatted CNY spend estimate (the only priced currency today). */
 function formatCost(cost: number): string {
   return '¥' + cost.toFixed(2)
@@ -389,9 +382,7 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
               onSelect={(date) => { setUsageDay(date === todayDate ? undefined : date) }}
             />
             {deepseekVisible && (
-              <span className={styles.muted} data-dsh-part="peak-status">
-                {t(deepseekPeriod.peak ? 'usage.peak.on' : 'usage.peak.off', { time: formatClock(deepseekPeriod.boundaryMs) })}
-              </span>
+              <PeakBadge peak={deepseekPeriod.peak} boundaryMs={deepseekPeriod.boundaryMs} variant="full" />
             )}
             {usageDayLoad?.status === 'error'
               ? <span className={styles.errorLine}>{t('usage.day.error', { error: usageDayLoad.error ?? '' })}</span>

package/src/client/locales.ts

@@ -31,6 +31,10 @@ export const zh = {
   'usage.day.error': '该日用量加载失败：{error}',
   'usage.peak.on': 'DeepSeek 高峰时段：计价 ×2，{time} 结束',
   'usage.peak.off': 'DeepSeek 空闲时段：计价为高峰一半，{time} 进入高峰',
+  'usage.peak.tag.on': '高峰',
+  'usage.peak.tag.off': '空闲',
+  'usage.peak.ends': '{time} 结束',
+  'usage.peak.starts': '{time} 进入高峰',
   'usage.calls': '{n} 次调用',
   'usage.tokens.total': '总 tokens',
   'usage.tokens.input': '输入',
@@ -98,6 +102,10 @@ export const en: Record<UsageKey, string> = {
   'usage.day.error': 'Failed to load that day: {error}',
   'usage.peak.on': 'DeepSeek peak hours: 2x pricing, ends {time}',
   'usage.peak.off': 'DeepSeek off-peak: half of peak pricing, peak returns {time}',
+  'usage.peak.tag.on': 'Peak',
+  'usage.peak.tag.off': 'Off-peak',
+  'usage.peak.ends': 'ends {time}',
+  'usage.peak.starts': 'peak at {time}',
   'usage.calls': '{n} calls',
   'usage.tokens.total': 'Total tokens',
   'usage.tokens.input': 'Input',

package/src/client/usage.module.css

@@ -594,7 +594,7 @@
 
 .footStripProvider {
   flex: none;
-  max-width: 45%;
+  max-width: 38%;
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
@@ -616,3 +616,61 @@
 :global([data-sidebar-collapsed]) .footCard {
   display: none;
 }
+
+/* ---------------------------------------------------------------------------
+   DeepSeek pricing clock: red while the peak window bills double, green while
+   off-peak bills half. The period word rides with the dot, so colour is never
+   the only signal, and the priced sentence lives in the title attribute.
+   --------------------------------------------------------------------------- */
+
+.peakBadge,
+.peakLine {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.peakBadge {
+  flex: none;
+}
+
+.peakLine {
+  gap: 6px;
+}
+
+.peakBadge[data-peak='on'],
+.peakLine[data-peak='on'] {
+  color: var(--dsw-alias-state-error-primary, #b42318);
+}
+
+.peakBadge[data-peak='off'],
+.peakLine[data-peak='off'] {
+  color: var(--dsw-alias-state-success-primary, #067647);
+}
+
+.peakDot {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+/* Expanded foot card: its own line at full opacity (the meta line below is
+   dimmed) so the red/green reads on every skin. */
+.footPeak {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  overflow: hidden;
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.footPeakClock {
+  opacity: 0.7;
+  font-variant-numeric: tabular-nums;
+}

package/src/host/loopback.ts

@@ -8,6 +8,14 @@
  * Semantics: RFC 5735 IPv4 127/8, ::1, IPv4-mapped ::ffff:127/8 (matching the
  * remote-web-ui gate), localhost hostnames, plus the browser same-origin
  * markers (sec-fetch-site and Origin) for the request-level fence.
+ *
+ * A reverse proxy in front of the host rewrites the Host header to its own
+ * upstream literal (a Cloudflare tunnel, frp and an nginx reverse proxy all
+ * dial 127.0.0.1:<port>), and the socket the origin sees is the proxy's, which
+ * is loopback by construction. Both halves of the fence then hold for a public
+ * request. Forwarding headers are the signal that a hop stands in between: a
+ * request that carries CF-Connecting-IP or X-Forwarded-For is answered through
+ * a proxy and is never treated as a local one (issue #1906).
  * @module dsh-web-shared/host/loopback
  */
 
@@ -36,13 +44,29 @@ export function isLoopbackHostname(hostname: string): boolean {
   return isIPv4Loopback(hostname)
 }
 
+/**
+ * Whether a reverse proxy stood between the client and this host: the request
+ * carries CF-Connecting-IP or X-Forwarded-For. Either header is stamped by a
+ * hop that forwards traffic, so the request did not originate on this machine.
+ * @param request - node HTTP request.
+ * @returns true when a forwarding header is present.
+ */
+export function isProxiedRequest(request: IncomingMessage): boolean {
+  return request.headers['cf-connecting-ip'] !== undefined
+    || request.headers['x-forwarded-for'] !== undefined
+}
+
 /**
  * Request-level trust fence: a loopback socket address AND a loopback Host
  * header, plus browser same-origin markers. The socket address is
- * authoritative; X-Forwarded-For is never trusted.
+ * authoritative for a direct connection; a request that carries a forwarding
+ * header is refused outright, because a proxy in front of the host makes both
+ * the socket address and the Host header describe the proxy rather than the
+ * client. X-Forwarded-For is therefore never evidence *for* loopback.
  */
 export function isLoopbackRequest(request: IncomingMessage): boolean {
   if (!isLoopbackAddress(request.socket.remoteAddress)) return false
+  if (isProxiedRequest(request)) return false
   const host = request.headers.host
   if (typeof host !== 'string') return false
   let hostUrl: URL