From 9100e15e4e9c9b31bb46dc1348d99ec7c9e1383d Mon Sep 17 00:00:00 2001
From: CaIon <i@caion.me>
Date: Fri, 19 Jun 2026 20:09:18 +0800
Subject: [PATCH] feat: add channel sensitive info toggle

---
 .../components/data-table/toolbar/toolbar.tsx | 42 ++++++++-----
 .../channels/components/channel-card.tsx      | 17 +++++-
 .../channels/components/channels-columns.tsx  | 50 ++++++++++-----
 .../channels/components/channels-provider.tsx |  5 ++
 .../channels/components/channels-table.tsx    | 61 ++++++++++++++-----
 .../components/dialogs/codex-usage-dialog.tsx | 15 ++++-
 6 files changed, 141 insertions(+), 49 deletions(-)

diff --git a/web/default/src/components/data-table/toolbar/toolbar.tsx b/web/default/src/components/data-table/toolbar/toolbar.tsx
index cca09364..636ee94c 100644
--- a/web/default/src/components/data-table/toolbar/toolbar.tsx
+++ b/web/default/src/components/data-table/toolbar/toolbar.tsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import * as React from 'react'
 import { useState, type ReactNode } from 'react'
-import { type Table } from '@tanstack/react-table'
+import type { Table } from '@tanstack/react-table'
 import { useDebounce } from '@/hooks'
 import { ChevronDown, Loader2, X as Cross2Icon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
@@ -76,6 +76,11 @@ export type DataTableToolbarProps<TData> = {
    * search input and filter chips.
    */
   additionalSearch?: ReactNode
+  /**
+   * Extra controls displayed immediately after the filter chips, before the
+   * right-aligned action cluster.
+   */
+  afterFilters?: ReactNode
   /**
    * Whether non-table filters (e.g. `additionalSearch` or `expandable`
    * inputs) are currently active. Controls Reset button visibility
@@ -282,20 +287,25 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
   // Reset: outline text-only for form mode (always visible, disabled when
   // nothing to reset); ghost text + X for filter-as-you-type mode (only
   // visible when active filters exist).
-  const resetButton = hasSearch ? (
-    <Button variant='outline' onClick={handleReset} disabled={!isFiltered}>
-      {t('Reset')}
-    </Button>
-  ) : isFiltered ? (
-    <Button
-      variant='ghost'
-      onClick={handleReset}
-      className='text-muted-foreground hover:text-foreground gap-1 px-2'
-    >
-      {t('Reset')}
-      <Cross2Icon />
-    </Button>
-  ) : null
+  let resetButton: ReactNode = null
+  if (hasSearch) {
+    resetButton = (
+      <Button variant='outline' onClick={handleReset} disabled={!isFiltered}>
+        {t('Reset')}
+      </Button>
+    )
+  } else if (isFiltered) {
+    resetButton = (
+      <Button
+        variant='ghost'
+        onClick={handleReset}
+        className='text-muted-foreground hover:text-foreground gap-1 px-2'
+      >
+        {t('Reset')}
+        <Cross2Icon />
+      </Button>
+    )
+  }
 
   const searchButton = hasSearch ? (
     <Button onClick={props.onSearch} disabled={props.searchLoading}>
@@ -341,6 +351,7 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
           {props.customSearch !== undefined ? props.customSearch : searchInput}
           {props.additionalSearch}
           {filterChips}
+          {props.afterFilters}
           <div className='ms-auto flex shrink-0 items-center gap-1.5 sm:gap-2'>
             {expandToggle}
           </div>
@@ -376,6 +387,7 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
       {props.customSearch !== undefined ? props.customSearch : searchInput}
       {props.additionalSearch}
       {filterChips}
+      {props.afterFilters}
       {expanded && hasExpandable && props.expandable}
 
       <div className='ms-auto flex shrink-0 items-center gap-1.5 sm:gap-2'>
diff --git a/web/default/src/features/channels/components/channel-card.tsx b/web/default/src/features/channels/components/channel-card.tsx
index 3d25d1cb..1663d5dd 100644
--- a/web/default/src/features/channels/components/channel-card.tsx
+++ b/web/default/src/features/channels/components/channel-card.tsx
@@ -24,6 +24,9 @@ import { CHANNEL_STATUS } from '../constants'
 import { isTagAggregateRow, parseGroupsList } from '../lib'
 import type { Channel } from '../types'
 import { ChannelRowActionsLayoutContext } from './channel-row-actions-context'
+import { useChannels } from './channels-provider'
+
+const SENSITIVE_MASK = '••••'
 
 /**
  * Bespoke channel card for the card view. Reuses every column's existing cell
@@ -35,6 +38,7 @@ import { ChannelRowActionsLayoutContext } from './channel-row-actions-context'
  */
 export function ChannelCard({ row }: { row: Row<Channel> }) {
   const { t } = useTranslation()
+  const { sensitiveVisible } = useChannels()
   const isTagRow = isTagAggregateRow(row.original)
   const cells = row.getAllCells()
 
@@ -99,7 +103,11 @@ export function ChannelCard({ row }: { row: Row<Channel> }) {
         {/* Left column */}
         <div className='flex min-w-0 flex-1 flex-col gap-3 overflow-hidden'>
           <div className='min-w-0 text-sm'>
-            {!isTagRow && <div className={labelClass}>#{row.original.id}</div>}
+            {!isTagRow && (
+              <div className={labelClass}>
+                #{sensitiveVisible ? row.original.id : SENSITIVE_MASK}
+              </div>
+            )}
             {nameCell}
           </div>
           <div className='min-w-0'>
@@ -138,7 +146,12 @@ export function ChannelCard({ row }: { row: Row<Channel> }) {
         {groups.length > 0 ? (
           <div className='-ml-1.5 flex flex-wrap gap-1'>
             {groups.map((g) => (
-              <GroupBadge key={g} group={g} size='sm' />
+              <GroupBadge
+                key={g}
+                group={g}
+                label={sensitiveVisible ? undefined : SENSITIVE_MASK}
+                size='sm'
+              />
             ))}
           </div>
         ) : (
diff --git a/web/default/src/features/channels/components/channels-columns.tsx b/web/default/src/features/channels/components/channels-columns.tsx
index 062cd699..f6d6675b 100644
--- a/web/default/src/features/channels/components/channels-columns.tsx
+++ b/web/default/src/features/channels/components/channels-columns.tsx
@@ -285,6 +285,7 @@ function WeightCell({ channel }: { channel: Channel }) {
  * notation (e.g. "$28万"); the precise value stays available in the tooltip.
  */
 const MAX_INLINE_BALANCE_CHARS = 8
+const SENSITIVE_MASK = '••••'
 
 /**
  * Balance cell component with click to update
@@ -292,6 +293,7 @@ const MAX_INLINE_BALANCE_CHARS = 8
 function BalanceCell({ channel }: { channel: Channel }) {
   const { t, i18n } = useTranslation()
   const queryClient = useQueryClient()
+  const { sensitiveVisible } = useChannels()
   const isTagRow = isTagAggregateRow(channel)
   const balance = channel.balance || 0
   const usedQuota = channel.used_quota || 0
@@ -320,6 +322,8 @@ function BalanceCell({ channel }: { channel: Channel }) {
       : remainingFull
   const usedLabel = `${t('Used:')} ${usedFull}`
   const remainingLabel = `${t('Remaining:')} ${remainingFull}`
+  const maskedUsedLabel = `${t('Used:')} ${SENSITIVE_MASK}`
+  const maskedRemainingLabel = `${t('Remaining:')} ${SENSITIVE_MASK}`
 
   // Tag row: only show cumulative used quota
   if (isTagRow) {
@@ -329,7 +333,11 @@ function BalanceCell({ channel }: { channel: Channel }) {
           <TooltipTrigger
             render={
               <StatusBadge
-                label={`${t('Used:')} ${usedDisplay}`}
+                label={
+                  sensitiveVisible
+                    ? `${t('Used:')} ${usedDisplay}`
+                    : maskedUsedLabel
+                }
                 variant='neutral'
                 size='sm'
                 copyable={false}
@@ -339,7 +347,7 @@ function BalanceCell({ channel }: { channel: Channel }) {
             }
           />
           <TooltipContent>
-            <p>{usedLabel}</p>
+            <p>{sensitiveVisible ? usedLabel : maskedUsedLabel}</p>
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
@@ -376,12 +384,20 @@ function BalanceCell({ channel }: { channel: Channel }) {
     await handleUpdateChannelBalance(channel.id, queryClient)
     setIsUpdating(false)
   }
-  let remainingBadgeLabel = remainingDisplay
-  if (isUpdating) {
+  let remainingBadgeLabel = sensitiveVisible
+    ? remainingDisplay
+    : SENSITIVE_MASK
+  if (sensitiveVisible && isUpdating) {
     remainingBadgeLabel = t('Updating...')
-  } else if (channel.type === 57) {
+  } else if (sensitiveVisible && channel.type === 57) {
     remainingBadgeLabel = t('Account Info')
   }
+  let remainingTooltipLabel = remainingLabel
+  if (!sensitiveVisible) {
+    remainingTooltipLabel = maskedRemainingLabel
+  } else if (channel.type === 57) {
+    remainingTooltipLabel = t('Click to view Codex usage')
+  }
   let remainingBadgeVariant: StatusBadgeProps['variant'] = variant
   if (channel.type === 57) {
     remainingBadgeVariant = 'info'
@@ -396,7 +412,7 @@ function BalanceCell({ channel }: { channel: Channel }) {
           <TooltipTrigger
             render={
               <StatusBadge
-                label={usedDisplay}
+                label={sensitiveVisible ? usedDisplay : SENSITIVE_MASK}
                 variant='neutral'
                 size='sm'
                 copyable={false}
@@ -406,7 +422,7 @@ function BalanceCell({ channel }: { channel: Channel }) {
             }
           />
           <TooltipContent>
-            <p>{usedLabel}</p>
+            <p>{sensitiveVisible ? usedLabel : maskedUsedLabel}</p>
           </TooltipContent>
         </Tooltip>
         <Tooltip>
@@ -424,11 +440,7 @@ function BalanceCell({ channel }: { channel: Channel }) {
             }
           />
           <TooltipContent>
-            <p>
-              {channel.type === 57
-                ? t('Click to view Codex usage')
-                : remainingLabel}
-            </p>
+            <p>{remainingTooltipLabel}</p>
             {channel.type !== 57 && <p>{t('Click to update balance')}</p>}
           </TooltipContent>
         </Tooltip>
@@ -439,6 +451,8 @@ function BalanceCell({ channel }: { channel: Channel }) {
         onOpenChange={setCodexUsageOpen}
         channelName={channel.name}
         channelId={channel.id}
+        channelDisplayName={sensitiveVisible ? undefined : SENSITIVE_MASK}
+        channelDisplayId={sensitiveVisible ? undefined : SENSITIVE_MASK}
         response={codexUsageResponse}
         onRefresh={async () => {
           if (isUpdating) {
@@ -472,6 +486,7 @@ function BalanceCell({ channel }: { channel: Channel }) {
  */
 export function useChannelsColumns(): ColumnDef<Channel>[] {
   const { t, i18n } = useTranslation()
+  const { sensitiveVisible } = useChannels()
   const locale = i18n.resolvedLanguage || i18n.language
   return [
     // Checkbox column
@@ -513,7 +528,7 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
       meta: { mobileHidden: true },
       cell: ({ row }) => {
         const id = row.getValue('id') as number
-        return <TableId value={id} />
+        return <TableId value={sensitiveVisible ? id : SENSITIVE_MASK} />
       },
       size: 80,
     },
@@ -570,7 +585,7 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
             <div className='flex flex-col gap-1'>
               <div className='flex items-center gap-1.5'>
                 <TruncatedText
-                  text={name}
+                  text={sensitiveVisible ? name : SENSITIVE_MASK}
                   className='font-medium'
                   maxWidth='max-w-[180px]'
                 />
@@ -929,7 +944,12 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
         return (
           <BadgeListCell
             items={groupArray.map((g) => (
-              <GroupBadge key={g} group={g} size='sm' />
+              <GroupBadge
+                key={g}
+                group={g}
+                label={sensitiveVisible ? undefined : SENSITIVE_MASK}
+                size='sm'
+              />
             ))}
           />
         )
diff --git a/web/default/src/features/channels/components/channels-provider.tsx b/web/default/src/features/channels/components/channels-provider.tsx
index 6fb80954..6f4b9a07 100644
--- a/web/default/src/features/channels/components/channels-provider.tsx
+++ b/web/default/src/features/channels/components/channels-provider.tsx
@@ -53,6 +53,8 @@ type ChannelsContextType = {
   setEnableTagMode: (enabled: boolean) => void
   idSort: boolean
   setIdSort: (enabled: boolean) => void
+  sensitiveVisible: boolean
+  setSensitiveVisible: (visible: boolean) => void
   upstream: UpstreamUpdateState
 }
 
@@ -78,6 +80,7 @@ export function ChannelsProvider({ children }: { children: React.ReactNode }) {
   const [idSort, setIdSort] = useState(() => {
     return localStorage.getItem('channels-id-sort') === 'true'
   })
+  const [sensitiveVisible, setSensitiveVisible] = useState(true)
 
   const queryClient = useQueryClient()
   const refreshChannels = useCallback(async () => {
@@ -98,6 +101,8 @@ export function ChannelsProvider({ children }: { children: React.ReactNode }) {
         setEnableTagMode,
         idSort,
         setIdSort,
+        sensitiveVisible,
+        setSensitiveVisible,
         upstream,
       }}
     >
diff --git a/web/default/src/features/channels/components/channels-table.tsx b/web/default/src/features/channels/components/channels-table.tsx
index df2979e6..1c091422 100644
--- a/web/default/src/features/channels/components/channels-table.tsx
+++ b/web/default/src/features/channels/components/channels-table.tsx
@@ -19,16 +19,19 @@ For commercial licensing, please contact support@quantumnous.com
 import { useState, useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { getRouteApi } from '@tanstack/react-router'
-import {
-  type OnChangeFn,
-  type SortingState,
-  type Row,
-} from '@tanstack/react-table'
+import type { OnChangeFn, SortingState, Row } from '@tanstack/react-table'
+import { Eye, EyeOff } from 'lucide-react'
 import { useMediaQuery } from '@/hooks'
 import { useTranslation } from 'react-i18next'
 import { getLobeIcon } from '@/lib/lobe-icon'
 import { useTableUrlState } from '@/hooks/use-table-url-state'
+import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 import {
   DISABLED_ROW_DESKTOP,
   DISABLED_ROW_MOBILE,
@@ -77,7 +80,12 @@ function isDisabledChannelRow(channel: Channel) {
 
 export function ChannelsTable() {
   const { t } = useTranslation()
-  const { enableTagMode, idSort } = useChannels()
+  const {
+    enableTagMode,
+    idSort,
+    sensitiveVisible,
+    setSensitiveVisible,
+  } = useChannels()
   const isMobile = useMediaQuery('(max-width: 640px)')
 
   // Table state
@@ -343,7 +351,10 @@ export function ChannelsTable() {
 
   const groupFilterOptions = [
     { label: t('All Groups'), value: 'all' },
-    ...groupOptions,
+    ...groupOptions.map((option) => ({
+      ...option,
+      label: sensitiveVisible ? option.label : '••••',
+    })),
   ]
 
   return (
@@ -398,14 +409,36 @@ export function ChannelsTable() {
             singleSelect: true,
           },
         ],
+        afterFilters: (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  variant='ghost'
+                  size='icon'
+                  onClick={() => setSensitiveVisible(!sensitiveVisible)}
+                  aria-label={sensitiveVisible ? t('Hide') : t('Show')}
+                  className='text-muted-foreground hover:text-foreground size-8'
+                />
+              }
+            >
+              {sensitiveVisible ? <Eye /> : <EyeOff />}
+            </TooltipTrigger>
+            <TooltipContent>
+              {sensitiveVisible ? t('Hide') : t('Show')}
+            </TooltipContent>
+          </Tooltip>
+        ),
+      }}
+      getRowClassName={(row, { isMobile }) => {
+        if (!isDisabledChannelRow(row.original)) {
+          return undefined
+        }
+        if (isMobile) {
+          return DISABLED_ROW_MOBILE
+        }
+        return DISABLED_ROW_DESKTOP
       }}
-      getRowClassName={(row, { isMobile }) =>
-        isDisabledChannelRow(row.original)
-          ? isMobile
-            ? DISABLED_ROW_MOBILE
-            : DISABLED_ROW_DESKTOP
-          : undefined
-      }
       bulkActions={<DataTableBulkActions table={table} />}
     />
   )
diff --git a/web/default/src/features/channels/components/dialogs/codex-usage-dialog.tsx b/web/default/src/features/channels/components/dialogs/codex-usage-dialog.tsx
index 064d7d7f..cccf59fb 100644
--- a/web/default/src/features/channels/components/dialogs/codex-usage-dialog.tsx
+++ b/web/default/src/features/channels/components/dialogs/codex-usage-dialog.tsx
@@ -139,6 +139,8 @@ type CodexUsageDialogProps = {
   onOpenChange: (open: boolean) => void
   channelName?: string
   channelId?: number
+  channelDisplayName?: string
+  channelDisplayId?: string
   response: CodexUsageDialogData | null
   onRefresh?: () => void | Promise<void>
   isRefreshing?: boolean
@@ -885,6 +887,8 @@ export function CodexUsageDialog({
   onOpenChange,
   channelName,
   channelId,
+  channelDisplayName,
+  channelDisplayId,
   response,
   onRefresh,
   isRefreshing,
@@ -931,9 +935,14 @@ export function CodexUsageDialog({
     ? String(resetCredits)
     : '-'
   const canResetCodexUsage = Number(resetCredits) > 0
-  const channelLabel = `${channelName || '-'}${
-    channelId ? ` (#${channelId})` : ''
-  }`
+  const channelLabelName = channelDisplayName ?? channelName ?? '-'
+  let channelLabelId = ''
+  if (channelDisplayId != null) {
+    channelLabelId = ` (#${channelDisplayId})`
+  } else if (channelId) {
+    channelLabelId = ` (#${channelId})`
+  }
+  const channelLabel = `${channelLabelName}${channelLabelId}`
   const { fiveHourWindow, weeklyWindow } = resolveRateLimitWindows(payload)
 
   const errorMessage =