From 9b9b19e9d2b42d1ddeaf72ba8b41c692c8d1caab Mon Sep 17 00:00:00 2001
From: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>
Date: Tue, 16 Jun 2026 23:26:42 +0800
Subject: [PATCH] fix(web): prevent usage log details dialog from clipping
 bottom content (#5533)

---
 .../components/dialogs/details-dialog.tsx     | 1147 ++++++++---------
 1 file changed, 569 insertions(+), 578 deletions(-)

diff --git a/web/default/src/features/usage-logs/components/dialogs/details-dialog.tsx b/web/default/src/features/usage-logs/components/dialogs/details-dialog.tsx
index d559ed1f..2904e0ea 100644
--- a/web/default/src/features/usage-logs/components/dialogs/details-dialog.tsx
+++ b/web/default/src/features/usage-logs/components/dialogs/details-dialog.tsx
@@ -38,7 +38,6 @@ import { cn } from '@/lib/utils'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { Button } from '@/components/ui/button'
 import { Label } from '@/components/ui/label'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import { Dialog } from '@/components/dialog'
 import { StatusBadge, type StatusBadgeProps } from '@/components/status-badge'
 import { DynamicPricingBreakdown } from '@/features/pricing/components/dynamic-pricing-breakdown'
@@ -94,7 +93,7 @@ function DetailRow(props: {
       </span>
       <span
         className={cn(
-          'max-w-full min-w-0 text-xs break-all sm:break-words',
+          'max-w-full min-w-0 text-xs break-all sm:wrap-break-word',
           props.mono && 'font-mono',
           props.muted && 'text-muted-foreground'
         )}
@@ -558,600 +557,592 @@ export function DetailsDialog(props: DetailsDialogProps) {
       headerClassName='max-sm:gap-1'
       titleClassName='flex items-center gap-2 text-base'
       descriptionClassName='sr-only'
-      contentHeight='min(72vh, 720px)'
-      bodyClassName='space-y-4'
+      contentHeight='min(72dvh, 720px)'
+      bodyClassName='pr-2 sm:pr-4'
     >
-      <ScrollArea className='max-h-[70vh] min-w-0 overflow-hidden pr-2 max-sm:max-h-[calc(100dvh-7rem)] sm:pr-4'>
-        <div className='w-full max-w-full min-w-0 space-y-2.5 overflow-hidden py-1 sm:space-y-3'>
-          {/* Overview section - key identifiers */}
-          <div className='min-w-0 space-y-1'>
-            {props.log.request_id && (
-              <DetailRow
-                label={t('Request ID')}
-                value={props.log.request_id}
-                mono
-              />
-            )}
-            {props.log.upstream_request_id && (
-              <DetailRow
-                label={t('Upstream Request ID')}
-                value={props.log.upstream_request_id}
-                mono
-              />
-            )}
-
-            {props.isAdmin && props.log.channel > 0 && (
-              <DetailRow
-                label={t('Channel')}
-                value={
-                  <span>
-                    {props.log.channel}
-                    {props.log.channel_name && (
-                      <span className='text-muted-foreground'>
-                        {' '}
-                        ({props.log.channel_name})
-                      </span>
-                    )}
-                  </span>
-                }
-                mono
-              />
-            )}
-
-            {channelChain && props.isAdmin && (
-              <DetailRow label={t('Retry Chain')} value={channelChain} mono />
-            )}
-
-            {props.log.token_name && (
-              <DetailRow label={t('Token')} value={props.log.token_name} mono />
-            )}
-
-            {(props.log.group || other?.group) && (
-              <DetailRow
-                label={t('Group')}
-                value={props.log.group || other?.group || ''}
-                mono
-              />
-            )}
-
-            {showAdminIp && (
-              <DetailRow
-                label={t('IP Address')}
-                value={
-                  <span className='flex items-center gap-1'>
-                    <Globe
-                      className='size-3 text-amber-500'
-                      aria-hidden='true'
-                    />
-                    {props.log.ip}
-                  </span>
-                }
-                mono
-              />
-            )}
-
-            {showTiming && props.log.use_time > 0 && (
-              <DetailRow
-                label={t('Response Time')}
-                value={
-                  <span
-                    className={cn(
-                      'font-medium',
-                      timingTextColorClass(
-                        getResponseTimeColor(
-                          props.log.use_time,
-                          props.log.completion_tokens
-                        )
-                      )
-                    )}
-                  >
-                    {formatUseTime(props.log.use_time)}
-                    {props.log.is_stream &&
-                      other?.frt != null &&
-                      other.frt > 0 && (
-                        <span
-                          className={cn(
-                            'font-normal',
-                            timingTextColorClass(
-                              getFirstResponseTimeColor(other.frt / 1000)
-                            )
-                          )}
-                        >
-                          {' '}
-                          (FRT: {formatUseTime(other.frt / 1000)})
-                        </span>
-                      )}
-                  </span>
-                }
-              />
-            )}
-          </div>
-
-          {/* Request conversion (admin only, not for refund) */}
-          {showConversion && (
-            <DetailSection label={t('Request Conversion')}>
-              <div className='relative min-w-0'>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  className='absolute top-0 right-0 h-5 w-5 p-0'
-                  onClick={() => copyToClipboard(conversionLabel)}
-                  title={t('Copy to clipboard')}
-                  aria-label={t('Copy to clipboard')}
-                >
-                  {copiedText === conversionLabel ? (
-                    <Check className='size-3 text-green-600' />
-                  ) : (
-                    <Copy className='size-3' />
-                  )}
-                </Button>
-                <div className='min-w-0 space-y-1 pr-6'>
-                  {other?.request_path && (
-                    <DetailRow
-                      label={t('Path')}
-                      value={other.request_path}
-                      mono
-                    />
-                  )}
-                  <div className='flex min-w-0 items-center gap-1.5 text-xs'>
-                    <Route
-                      className='text-muted-foreground size-3'
-                      aria-hidden='true'
-                    />
-                    <span className='min-w-0 break-all sm:break-words'>
-                      {conversionLabel}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </DetailSection>
-          )}
-
-          {/* Reject reason (admin only) */}
-          {props.isAdmin && other?.reject_reason && (
-            <DetailSection
-              icon={<AlertTriangle className='size-3.5' aria-hidden='true' />}
-              label={t('Reject Reason')}
-              variant='danger'
-            >
-              <p className='text-xs break-words'>{other.reject_reason}</p>
-            </DetailSection>
-          )}
-
-          {/* Violation fee info */}
-          {isViolation && other && (
-            <DetailSection
-              icon={<AlertTriangle className='size-3.5' aria-hidden='true' />}
-              label={t('Violation Fee')}
-              variant='danger'
-            >
-              {other.violation_fee_code && (
-                <DetailRow
-                  label={t('Violation Code')}
-                  value={other.violation_fee_code}
-                  mono
-                />
-              )}
-              {other.violation_fee_marker && (
-                <DetailRow
-                  label={t('Violation Marker')}
-                  value={other.violation_fee_marker}
-                />
-              )}
-              <DetailRow
-                label={t('Fee Amount')}
-                value={formatLogQuota(other.fee_quota ?? props.log.quota)}
-                mono
-              />
-            </DetailSection>
-          )}
-
-          {/* Refund details (type=6) */}
-          {isRefund && other && (other.task_id || other.reason) && (
-            <DetailSection label={t('Refund Details')}>
-              {other.task_id && (
-                <DetailRow label={t('Task ID')} value={other.task_id} mono />
-              )}
-              {other.reason && (
-                <DetailRow label={t('Reason')} value={other.reason} />
-              )}
-            </DetailSection>
-          )}
-
-          {/* Top-up audit info (type=1, admin only) */}
-          {showTopupAuditSection && (
-            <DetailSection
-              icon={<ShieldCheck className='size-3.5' aria-hidden='true' />}
-              label={t('Top-up Audit Info')}
-            >
-              {topupAuditFields.map((field, idx) => (
-                <DetailRow
-                  key={idx}
-                  label={field.label}
-                  value={field.value}
-                  mono
-                />
-              ))}
-              {showLegacyTopupWarning && (
-                <div className='flex items-start gap-1.5 text-xs text-amber-600 dark:text-amber-400'>
-                  <Info
-                    className='mt-0.5 size-3.5 shrink-0'
-                    aria-hidden='true'
-                  />
-                  <span>
-                    {t(
-                      'This record was written by a pre-upgrade instance and lacks audit info. Upgrade the instance to record server IP, callback IP, payment method and system version.'
-                    )}
-                  </span>
-                </div>
-              )}
-            </DetailSection>
-          )}
-
-          {/* Manage operator (type=3, admin only) */}
-          {manageOperator && (
+      <div className='w-full max-w-full min-w-0 space-y-2.5 overflow-x-hidden py-1 sm:space-y-3'>
+        {/* Overview section - key identifiers */}
+        <div className='min-w-0 space-y-1'>
+          {props.log.request_id && (
             <DetailRow
-              label={
-                <span className='flex items-center gap-1.5'>
-                  <UserCog
-                    className='text-muted-foreground size-3.5'
-                    aria-hidden='true'
-                  />
-                  {t('Operator Admin')}
-                </span>
-              }
-              value={manageOperator}
+              label={t('Request ID')}
+              value={props.log.request_id}
+              mono
+            />
+          )}
+          {props.log.upstream_request_id && (
+            <DetailRow
+              label={t('Upstream Request ID')}
+              value={props.log.upstream_request_id}
               mono
             />
           )}
 
-          {/* Operation audit info (type=3, admin only) */}
-          {showManageAuditSection && (
-            <DetailSection
-              icon={<ShieldCheck className='size-3.5' aria-hidden='true' />}
-              label={t('Operation Audit Info')}
-            >
-              {operationText != null && (
-                <DetailRow label={t('Operation')} value={operationText} />
-              )}
-              {authMethodLabel !== '' && (
-                <DetailRow
-                  label={t('Authentication Method')}
-                  value={authMethodLabel}
-                />
-              )}
-              {changedFieldsText !== '' && (
-                <DetailRow
-                  label={t('Changed Fields')}
-                  value={changedFieldsText}
-                />
-              )}
-              {auditRoute?.method && auditRoute?.route && (
-                <DetailRow
-                  label={t('Request')}
-                  value={`${auditRoute.method} ${auditRoute.route}`}
-                  mono
-                />
-              )}
-              {auditRoute?.status != null && (
-                <DetailRow
-                  label={t('Result')}
-                  value={
-                    auditRoute.success
-                      ? `${t('Success')} (${auditRoute.status})`
-                      : `${t('Failed')} (${auditRoute.status})`
-                  }
-                  mono
-                />
-              )}
-            </DetailSection>
-          )}
-
-          {/* Login audit info (type=7) */}
-          {isLogin && loginAuditFields.length > 0 && (
-            <DetailSection
-              icon={<LogIn className='size-3.5' aria-hidden='true' />}
-              label={t('Login Info')}
-            >
-              {operationText != null && (
-                <DetailRow label={t('Operation')} value={operationText} />
-              )}
-              {loginAuditFields.map((field, idx) => (
-                <DetailRow
-                  key={idx}
-                  label={field.label}
-                  value={field.value}
-                  mono
-                />
-              ))}
-            </DetailSection>
-          )}
-
-          {/* Audio/WebSocket token breakdown */}
-          {hasAudioTokens && other && (
-            <DetailSection
-              icon={<Headphones className='size-3.5' aria-hidden='true' />}
-              label={t('Audio Tokens')}
-            >
-              {other.audio_input != null && other.audio_input > 0 && (
-                <DetailRow
-                  label={t('Audio Input')}
-                  value={formatTokens(other.audio_input)}
-                  mono
-                />
-              )}
-              {other.audio_output != null && other.audio_output > 0 && (
-                <DetailRow
-                  label={t('Audio Output')}
-                  value={formatTokens(other.audio_output)}
-                  mono
-                />
-              )}
-              {other.text_input != null && other.text_input > 0 && (
-                <DetailRow
-                  label={t('Text Input')}
-                  value={formatTokens(other.text_input)}
-                  mono
-                />
-              )}
-              {other.text_output != null && other.text_output > 0 && (
-                <DetailRow
-                  label={t('Text Output')}
-                  value={formatTokens(other.text_output)}
-                  mono
-                />
-              )}
-            </DetailSection>
-          )}
-
-          {/* Reasoning effort */}
-          {other?.reasoning_effort && (
+          {props.isAdmin && props.log.channel > 0 && (
             <DetailRow
-              label={t('Reasoning Effort')}
+              label={t('Channel')}
               value={
-                <StatusBadge
-                  label={other.reasoning_effort}
-                  variant={
-                    other.reasoning_effort === 'high'
-                      ? 'orange'
-                      : other.reasoning_effort === 'medium'
-                        ? 'yellow'
-                        : 'green'
-                  }
-                  size='sm'
-                  copyable={false}
-                />
-              }
-            />
-          )}
-
-          {/* System prompt override */}
-          {other?.is_system_prompt_overwritten && (
-            <DetailRow
-              label={t('System Prompt')}
-              value={
-                <StatusBadge
-                  label={t('Overwritten')}
-                  variant='orange'
-                  size='sm'
-                  copyable={false}
-                />
-              }
-            />
-          )}
-
-          {/* Model mapping */}
-          {other?.is_model_mapped && other?.upstream_model_name && (
-            <DetailSection label={t('Model Mapping')}>
-              <DetailRow
-                label={t('Request Model')}
-                value={props.log.model_name}
-                mono
-              />
-              <DetailRow
-                label={t('Actual Model')}
-                value={other.upstream_model_name}
-                mono
-              />
-            </DetailSection>
-          )}
-
-          {/* Token breakdown (for consume/error types with token data) */}
-          {isDisplayableType(props.log.type) && other && (
-            <TokenBreakdown log={props.log} other={other} />
-          )}
-
-          {/* Billing breakdown (consume type) */}
-          {isConsume && other && !isViolation && (
-            <BillingBreakdown
-              log={props.log}
-              other={other}
-              isAdmin={props.isAdmin}
-            />
-          )}
-
-          {/* Tiered pricing breakdown (when billing_mode is tiered_expr) */}
-          {isTieredBilling && other?.expr_b64 && (
-            <div className='bg-muted/30 min-w-0 overflow-hidden rounded-md border px-3 max-sm:px-2'>
-              <DynamicPricingBreakdown
-                billingExpr={decodeBillingExprB64(other.expr_b64)}
-                matchedTierLabel={other.matched_tier}
-                hideCacheColumns={!hasAnyCacheTokens(other)}
-              />
-            </div>
-          )}
-
-          {/* Admin billing mode indicator for non-consume */}
-          {props.isAdmin &&
-            !isConsume &&
-            props.log.type !== 6 &&
-            other?.admin_info && (
-              <DetailRow
-                label={t('Billing Source')}
-                value={
-                  <span className='flex items-center gap-1'>
-                    {other.admin_info.local_count_tokens ? (
-                      <Monitor className='size-3 text-blue-500' />
-                    ) : (
-                      <Cloud className='size-3 text-emerald-500' />
-                    )}
-                    <span className='text-xs'>
-                      {other.admin_info.local_count_tokens
-                        ? t('Local Billing')
-                        : t('Upstream Response')}
+                <span>
+                  {props.log.channel}
+                  {props.log.channel_name && (
+                    <span className='text-muted-foreground'>
+                      {' '}
+                      ({props.log.channel_name})
                     </span>
-                  </span>
-                }
-              />
-            )}
-
-          {/* Stream status details (admin only) */}
-          {props.isAdmin &&
-            other?.stream_status &&
-            other.stream_status.status !== 'ok' && (
-              <DetailSection label={t('Stream Status')}>
-                <DetailRow
-                  label={t('Status')}
-                  value={
-                    <StatusBadge
-                      label={other.stream_status.status || t('Error')}
-                      variant='red'
-                      size='sm'
-                      copyable={false}
-                    />
-                  }
-                />
-                {other.stream_status.end_reason && (
-                  <DetailRow
-                    label={t('End Reason')}
-                    value={other.stream_status.end_reason}
-                  />
-                )}
-                {(other.stream_status.error_count ?? 0) > 0 && (
-                  <DetailRow
-                    label={t('Soft Errors')}
-                    value={String(other.stream_status.error_count)}
-                  />
-                )}
-                {other.stream_status.end_error && (
-                  <DetailRow
-                    label={t('End Error')}
-                    value={other.stream_status.end_error}
-                  />
-                )}
-                {Array.isArray(other.stream_status.errors) &&
-                  other.stream_status.errors.length > 0 && (
-                    <pre className='bg-background/60 mt-1 max-h-32 overflow-y-auto rounded border p-2 font-mono text-[11px] leading-relaxed break-words whitespace-pre-wrap'>
-                      {other.stream_status.errors.join('\n')}
-                    </pre>
                   )}
-              </DetailSection>
-            )}
+                </span>
+              }
+              mono
+            />
+          )}
 
-          {/* Subscription billing details */}
-          {isSubscription && other && (
-            <DetailSection label={t('Subscription Billing')}>
-              {other.subscription_plan_id && (
-                <DetailRow
-                  label={t('Plan')}
-                  value={`#${other.subscription_plan_id} ${other.subscription_plan_title || ''}`.trim()}
-                />
-              )}
-              {other.subscription_id && (
-                <DetailRow
-                  label={t('Instance')}
-                  value={`#${other.subscription_id}`}
-                  mono
-                />
-              )}
-              {other.subscription_pre_consumed != null && (
-                <DetailRow
-                  label={t('Pre-consumed')}
-                  value={formatLogQuota(other.subscription_pre_consumed)}
-                  mono
-                />
-              )}
-              {other.subscription_post_delta != null &&
-                other.subscription_post_delta !== 0 && (
+          {channelChain && props.isAdmin && (
+            <DetailRow label={t('Retry Chain')} value={channelChain} mono />
+          )}
+
+          {props.log.token_name && (
+            <DetailRow label={t('Token')} value={props.log.token_name} mono />
+          )}
+
+          {(props.log.group || other?.group) && (
+            <DetailRow
+              label={t('Group')}
+              value={props.log.group || other?.group || ''}
+              mono
+            />
+          )}
+
+          {showAdminIp && (
+            <DetailRow
+              label={t('IP Address')}
+              value={
+                <span className='flex items-center gap-1'>
+                  <Globe className='size-3 text-amber-500' aria-hidden='true' />
+                  {props.log.ip}
+                </span>
+              }
+              mono
+            />
+          )}
+
+          {showTiming && props.log.use_time > 0 && (
+            <DetailRow
+              label={t('Response Time')}
+              value={
+                <span
+                  className={cn(
+                    'font-medium',
+                    timingTextColorClass(
+                      getResponseTimeColor(
+                        props.log.use_time,
+                        props.log.completion_tokens
+                      )
+                    )
+                  )}
+                >
+                  {formatUseTime(props.log.use_time)}
+                  {props.log.is_stream &&
+                    other?.frt != null &&
+                    other.frt > 0 && (
+                      <span
+                        className={cn(
+                          'font-normal',
+                          timingTextColorClass(
+                            getFirstResponseTimeColor(other.frt / 1000)
+                          )
+                        )}
+                      >
+                        {' '}
+                        (FRT: {formatUseTime(other.frt / 1000)})
+                      </span>
+                    )}
+                </span>
+              }
+            />
+          )}
+        </div>
+
+        {/* Request conversion (admin only, not for refund) */}
+        {showConversion && (
+          <DetailSection label={t('Request Conversion')}>
+            <div className='relative min-w-0'>
+              <Button
+                variant='ghost'
+                size='sm'
+                className='absolute top-0 right-0 h-5 w-5 p-0'
+                onClick={() => copyToClipboard(conversionLabel)}
+                title={t('Copy to clipboard')}
+                aria-label={t('Copy to clipboard')}
+              >
+                {copiedText === conversionLabel ? (
+                  <Check className='size-3 text-green-600' />
+                ) : (
+                  <Copy className='size-3' />
+                )}
+              </Button>
+              <div className='min-w-0 space-y-1 pr-6'>
+                {other?.request_path && (
                   <DetailRow
-                    label={t('Post Delta')}
-                    value={formatLogQuota(other.subscription_post_delta)}
+                    label={t('Path')}
+                    value={other.request_path}
                     mono
                   />
                 )}
-              {other.subscription_consumed != null && (
-                <DetailRow
-                  label={t('Final Consumed')}
-                  value={formatLogQuota(other.subscription_consumed)}
-                  mono
-                />
-              )}
-              {other.subscription_remain != null && (
-                <DetailRow
-                  label={t('Remaining')}
-                  value={`${formatLogQuota(other.subscription_remain)}${other.subscription_total != null ? ` / ${formatLogQuota(other.subscription_total)}` : ''}`}
-                  mono
-                />
-              )}
-            </DetailSection>
-          )}
-
-          {/* Param override */}
-          {other?.po && Array.isArray(other.po) && other.po.length > 0 && (
-            <DetailSection
-              icon={<Settings2 className='size-3.5' aria-hidden='true' />}
-              label={`${t('Param Override')} (${other.po.length})`}
-            >
-              {other.po.filter(Boolean).map((line, idx) => {
-                const parsed = parseAuditLine(line)
-                if (!parsed) return null
-                return (
-                  <div
-                    key={idx}
-                    className='bg-background/60 flex min-w-0 flex-col gap-1.5 rounded border p-2 sm:flex-row sm:items-start sm:gap-2'
-                  >
-                    <StatusBadge
-                      variant='neutral'
-                      label={getParamOverrideActionLabel(parsed.action, t)}
-                      className='shrink-0 font-medium'
-                      copyable={false}
-                    />
-                    <span className='min-w-0 font-mono text-[11px] leading-relaxed break-all sm:break-words'>
-                      {parsed.content}
-                    </span>
-                  </div>
-                )
-              })}
-            </DetailSection>
-          )}
-
-          {/* Content */}
-          {details && (
-            <div className='space-y-1.5'>
-              <Label className='text-xs font-semibold'>{t('Content')}</Label>
-              <div className='bg-muted/30 relative min-w-0 overflow-hidden rounded-md border p-2.5'>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  className='absolute top-1.5 right-1.5 h-5 w-5 p-0'
-                  onClick={() => copyToClipboard(details)}
-                  title={t('Copy to clipboard')}
-                  aria-label={t('Copy to clipboard')}
-                >
-                  {copiedText === details ? (
-                    <Check className='size-3 text-green-600' />
-                  ) : (
-                    <Copy className='size-3' />
-                  )}
-                </Button>
-                <p className='min-w-0 pr-6 text-xs leading-relaxed break-all whitespace-pre-wrap sm:break-words'>
-                  {details}
-                </p>
+                <div className='flex min-w-0 items-center gap-1.5 text-xs'>
+                  <Route
+                    className='text-muted-foreground size-3'
+                    aria-hidden='true'
+                  />
+                  <span className='min-w-0 break-all sm:wrap-break-word'>
+                    {conversionLabel}
+                  </span>
+                </div>
               </div>
             </div>
+          </DetailSection>
+        )}
+
+        {/* Reject reason (admin only) */}
+        {props.isAdmin && other?.reject_reason && (
+          <DetailSection
+            icon={<AlertTriangle className='size-3.5' aria-hidden='true' />}
+            label={t('Reject Reason')}
+            variant='danger'
+          >
+            <p className='text-xs wrap-break-word'>{other.reject_reason}</p>
+          </DetailSection>
+        )}
+
+        {/* Violation fee info */}
+        {isViolation && other && (
+          <DetailSection
+            icon={<AlertTriangle className='size-3.5' aria-hidden='true' />}
+            label={t('Violation Fee')}
+            variant='danger'
+          >
+            {other.violation_fee_code && (
+              <DetailRow
+                label={t('Violation Code')}
+                value={other.violation_fee_code}
+                mono
+              />
+            )}
+            {other.violation_fee_marker && (
+              <DetailRow
+                label={t('Violation Marker')}
+                value={other.violation_fee_marker}
+              />
+            )}
+            <DetailRow
+              label={t('Fee Amount')}
+              value={formatLogQuota(other.fee_quota ?? props.log.quota)}
+              mono
+            />
+          </DetailSection>
+        )}
+
+        {/* Refund details (type=6) */}
+        {isRefund && other && (other.task_id || other.reason) && (
+          <DetailSection label={t('Refund Details')}>
+            {other.task_id && (
+              <DetailRow label={t('Task ID')} value={other.task_id} mono />
+            )}
+            {other.reason && (
+              <DetailRow label={t('Reason')} value={other.reason} />
+            )}
+          </DetailSection>
+        )}
+
+        {/* Top-up audit info (type=1, admin only) */}
+        {showTopupAuditSection && (
+          <DetailSection
+            icon={<ShieldCheck className='size-3.5' aria-hidden='true' />}
+            label={t('Top-up Audit Info')}
+          >
+            {topupAuditFields.map((field, idx) => (
+              <DetailRow
+                key={idx}
+                label={field.label}
+                value={field.value}
+                mono
+              />
+            ))}
+            {showLegacyTopupWarning && (
+              <div className='flex items-start gap-1.5 text-xs text-amber-600 dark:text-amber-400'>
+                <Info className='mt-0.5 size-3.5 shrink-0' aria-hidden='true' />
+                <span>
+                  {t(
+                    'This record was written by a pre-upgrade instance and lacks audit info. Upgrade the instance to record server IP, callback IP, payment method and system version.'
+                  )}
+                </span>
+              </div>
+            )}
+          </DetailSection>
+        )}
+
+        {/* Manage operator (type=3, admin only) */}
+        {manageOperator && (
+          <DetailRow
+            label={
+              <span className='flex items-center gap-1.5'>
+                <UserCog
+                  className='text-muted-foreground size-3.5'
+                  aria-hidden='true'
+                />
+                {t('Operator Admin')}
+              </span>
+            }
+            value={manageOperator}
+            mono
+          />
+        )}
+
+        {/* Operation audit info (type=3, admin only) */}
+        {showManageAuditSection && (
+          <DetailSection
+            icon={<ShieldCheck className='size-3.5' aria-hidden='true' />}
+            label={t('Operation Audit Info')}
+          >
+            {operationText != null && (
+              <DetailRow label={t('Operation')} value={operationText} />
+            )}
+            {authMethodLabel !== '' && (
+              <DetailRow
+                label={t('Authentication Method')}
+                value={authMethodLabel}
+              />
+            )}
+            {changedFieldsText !== '' && (
+              <DetailRow
+                label={t('Changed Fields')}
+                value={changedFieldsText}
+              />
+            )}
+            {auditRoute?.method && auditRoute?.route && (
+              <DetailRow
+                label={t('Request')}
+                value={`${auditRoute.method} ${auditRoute.route}`}
+                mono
+              />
+            )}
+            {auditRoute?.status != null && (
+              <DetailRow
+                label={t('Result')}
+                value={
+                  auditRoute.success
+                    ? `${t('Success')} (${auditRoute.status})`
+                    : `${t('Failed')} (${auditRoute.status})`
+                }
+                mono
+              />
+            )}
+          </DetailSection>
+        )}
+
+        {/* Login audit info (type=7) */}
+        {isLogin && loginAuditFields.length > 0 && (
+          <DetailSection
+            icon={<LogIn className='size-3.5' aria-hidden='true' />}
+            label={t('Login Info')}
+          >
+            {operationText != null && (
+              <DetailRow label={t('Operation')} value={operationText} />
+            )}
+            {loginAuditFields.map((field, idx) => (
+              <DetailRow
+                key={idx}
+                label={field.label}
+                value={field.value}
+                mono
+              />
+            ))}
+          </DetailSection>
+        )}
+
+        {/* Audio/WebSocket token breakdown */}
+        {hasAudioTokens && other && (
+          <DetailSection
+            icon={<Headphones className='size-3.5' aria-hidden='true' />}
+            label={t('Audio Tokens')}
+          >
+            {other.audio_input != null && other.audio_input > 0 && (
+              <DetailRow
+                label={t('Audio Input')}
+                value={formatTokens(other.audio_input)}
+                mono
+              />
+            )}
+            {other.audio_output != null && other.audio_output > 0 && (
+              <DetailRow
+                label={t('Audio Output')}
+                value={formatTokens(other.audio_output)}
+                mono
+              />
+            )}
+            {other.text_input != null && other.text_input > 0 && (
+              <DetailRow
+                label={t('Text Input')}
+                value={formatTokens(other.text_input)}
+                mono
+              />
+            )}
+            {other.text_output != null && other.text_output > 0 && (
+              <DetailRow
+                label={t('Text Output')}
+                value={formatTokens(other.text_output)}
+                mono
+              />
+            )}
+          </DetailSection>
+        )}
+
+        {/* Reasoning effort */}
+        {other?.reasoning_effort && (
+          <DetailRow
+            label={t('Reasoning Effort')}
+            value={
+              <StatusBadge
+                label={other.reasoning_effort}
+                variant={
+                  other.reasoning_effort === 'high'
+                    ? 'orange'
+                    : other.reasoning_effort === 'medium'
+                      ? 'yellow'
+                      : 'green'
+                }
+                size='sm'
+                copyable={false}
+              />
+            }
+          />
+        )}
+
+        {/* System prompt override */}
+        {other?.is_system_prompt_overwritten && (
+          <DetailRow
+            label={t('System Prompt')}
+            value={
+              <StatusBadge
+                label={t('Overwritten')}
+                variant='orange'
+                size='sm'
+                copyable={false}
+              />
+            }
+          />
+        )}
+
+        {/* Model mapping */}
+        {other?.is_model_mapped && other?.upstream_model_name && (
+          <DetailSection label={t('Model Mapping')}>
+            <DetailRow
+              label={t('Request Model')}
+              value={props.log.model_name}
+              mono
+            />
+            <DetailRow
+              label={t('Actual Model')}
+              value={other.upstream_model_name}
+              mono
+            />
+          </DetailSection>
+        )}
+
+        {/* Token breakdown (for consume/error types with token data) */}
+        {isDisplayableType(props.log.type) && other && (
+          <TokenBreakdown log={props.log} other={other} />
+        )}
+
+        {/* Billing breakdown (consume type) */}
+        {isConsume && other && !isViolation && (
+          <BillingBreakdown
+            log={props.log}
+            other={other}
+            isAdmin={props.isAdmin}
+          />
+        )}
+
+        {/* Tiered pricing breakdown (when billing_mode is tiered_expr) */}
+        {isTieredBilling && other?.expr_b64 && (
+          <div className='bg-muted/30 min-w-0 overflow-hidden rounded-md border px-3 max-sm:px-2'>
+            <DynamicPricingBreakdown
+              billingExpr={decodeBillingExprB64(other.expr_b64)}
+              matchedTierLabel={other.matched_tier}
+              hideCacheColumns={!hasAnyCacheTokens(other)}
+            />
+          </div>
+        )}
+
+        {/* Admin billing mode indicator for non-consume */}
+        {props.isAdmin &&
+          !isConsume &&
+          props.log.type !== 6 &&
+          other?.admin_info && (
+            <DetailRow
+              label={t('Billing Source')}
+              value={
+                <span className='flex items-center gap-1'>
+                  {other.admin_info.local_count_tokens ? (
+                    <Monitor className='size-3 text-blue-500' />
+                  ) : (
+                    <Cloud className='size-3 text-emerald-500' />
+                  )}
+                  <span className='text-xs'>
+                    {other.admin_info.local_count_tokens
+                      ? t('Local Billing')
+                      : t('Upstream Response')}
+                  </span>
+                </span>
+              }
+            />
           )}
-        </div>
-      </ScrollArea>
+
+        {/* Stream status details (admin only) */}
+        {props.isAdmin &&
+          other?.stream_status &&
+          other.stream_status.status !== 'ok' && (
+            <DetailSection label={t('Stream Status')}>
+              <DetailRow
+                label={t('Status')}
+                value={
+                  <StatusBadge
+                    label={other.stream_status.status || t('Error')}
+                    variant='red'
+                    size='sm'
+                    copyable={false}
+                  />
+                }
+              />
+              {other.stream_status.end_reason && (
+                <DetailRow
+                  label={t('End Reason')}
+                  value={other.stream_status.end_reason}
+                />
+              )}
+              {(other.stream_status.error_count ?? 0) > 0 && (
+                <DetailRow
+                  label={t('Soft Errors')}
+                  value={String(other.stream_status.error_count)}
+                />
+              )}
+              {other.stream_status.end_error && (
+                <DetailRow
+                  label={t('End Error')}
+                  value={other.stream_status.end_error}
+                />
+              )}
+              {Array.isArray(other.stream_status.errors) &&
+                other.stream_status.errors.length > 0 && (
+                  <pre className='bg-background/60 mt-1 max-h-32 overflow-y-auto rounded border p-2 font-mono text-[11px] leading-relaxed wrap-break-word whitespace-pre-wrap'>
+                    {other.stream_status.errors.join('\n')}
+                  </pre>
+                )}
+            </DetailSection>
+          )}
+
+        {/* Subscription billing details */}
+        {isSubscription && other && (
+          <DetailSection label={t('Subscription Billing')}>
+            {other.subscription_plan_id && (
+              <DetailRow
+                label={t('Plan')}
+                value={`#${other.subscription_plan_id} ${other.subscription_plan_title || ''}`.trim()}
+              />
+            )}
+            {other.subscription_id && (
+              <DetailRow
+                label={t('Instance')}
+                value={`#${other.subscription_id}`}
+                mono
+              />
+            )}
+            {other.subscription_pre_consumed != null && (
+              <DetailRow
+                label={t('Pre-consumed')}
+                value={formatLogQuota(other.subscription_pre_consumed)}
+                mono
+              />
+            )}
+            {other.subscription_post_delta != null &&
+              other.subscription_post_delta !== 0 && (
+                <DetailRow
+                  label={t('Post Delta')}
+                  value={formatLogQuota(other.subscription_post_delta)}
+                  mono
+                />
+              )}
+            {other.subscription_consumed != null && (
+              <DetailRow
+                label={t('Final Consumed')}
+                value={formatLogQuota(other.subscription_consumed)}
+                mono
+              />
+            )}
+            {other.subscription_remain != null && (
+              <DetailRow
+                label={t('Remaining')}
+                value={`${formatLogQuota(other.subscription_remain)}${other.subscription_total != null ? ` / ${formatLogQuota(other.subscription_total)}` : ''}`}
+                mono
+              />
+            )}
+          </DetailSection>
+        )}
+
+        {/* Param override */}
+        {other?.po && Array.isArray(other.po) && other.po.length > 0 && (
+          <DetailSection
+            icon={<Settings2 className='size-3.5' aria-hidden='true' />}
+            label={`${t('Param Override')} (${other.po.length})`}
+          >
+            {other.po.filter(Boolean).map((line, idx) => {
+              const parsed = parseAuditLine(line)
+              if (!parsed) return null
+              return (
+                <div
+                  key={idx}
+                  className='bg-background/60 flex min-w-0 flex-col gap-1.5 rounded border p-2 sm:flex-row sm:items-start sm:gap-2'
+                >
+                  <StatusBadge
+                    variant='neutral'
+                    label={getParamOverrideActionLabel(parsed.action, t)}
+                    className='shrink-0 font-medium'
+                    copyable={false}
+                  />
+                  <span className='min-w-0 font-mono text-[11px] leading-relaxed break-all sm:wrap-break-word'>
+                    {parsed.content}
+                  </span>
+                </div>
+              )
+            })}
+          </DetailSection>
+        )}
+
+        {/* Content */}
+        {details && (
+          <div className='space-y-1.5'>
+            <Label className='text-xs font-semibold'>{t('Content')}</Label>
+            <div className='bg-muted/30 relative min-w-0 overflow-hidden rounded-md border p-2.5'>
+              <Button
+                variant='ghost'
+                size='sm'
+                className='absolute top-1.5 right-1.5 h-5 w-5 p-0'
+                onClick={() => copyToClipboard(details)}
+                title={t('Copy to clipboard')}
+                aria-label={t('Copy to clipboard')}
+              >
+                {copiedText === details ? (
+                  <Check className='size-3 text-green-600' />
+                ) : (
+                  <Copy className='size-3' />
+                )}
+              </Button>
+              <p className='min-w-0 pr-6 text-xs leading-relaxed break-all whitespace-pre-wrap sm:wrap-break-word'>
+                {details}
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
     </Dialog>
   )
 }