✨ feat(web): polish themed data views and add task log details

2026-07-11 14:30:06 +08:00
parent b2a890e755
commit 308e3e347a
79 changed files with 1376 additions and 727 deletions
@@ -86,7 +86,7 @@ export function createTimestampColumn<T>(config: {
    cell: ({ row }) => {
      const timestamp = row.getValue(accessorKey) as number
      if (!timestamp) {
-        return <span className='text-muted-foreground/60 text-xs'>-</span>
+        return <span className='text-subtle-foreground text-xs'>-</span>
      }
      return (
        <span className='text-xs tabular-nums'>
@@ -135,7 +135,7 @@ export function createDurationColumn<T>(config: {
      )

      if (!duration) {
-        return <span className='text-muted-foreground/60 text-xs'>-</span>
+        return <span className='text-subtle-foreground text-xs'>-</span>
      }

      const variant =
@@ -173,7 +173,7 @@ export function createChannelColumn<T>(config: {
    cell: ({ row }) => {
      const channelId = row.getValue(accessorKey) as number
      if (!channelId) {
-        return <span className='text-muted-foreground/60 text-xs'>-</span>
+        return <span className='text-subtle-foreground text-xs'>-</span>
      }
      return (
        <CopyableStatusBadge
@@ -215,7 +215,7 @@ export function createFailReasonColumn<T>(config: {
      const [dialogOpen, setDialogOpen] = useState(false)

      if (!failReason) {
-        return <span className='text-muted-foreground/60 text-xs'>-</span>
+        return <span className='text-subtle-foreground text-xs'>-</span>
      }

      return (
@@ -265,7 +265,7 @@ export function createProgressColumn<T>(config: {
    cell: ({ row }) => {
      const progress = row.getValue(accessorKey) as string
      if (!progress) {
-        return <span className='text-muted-foreground/60 text-xs'>-</span>
+        return <span className='text-subtle-foreground text-xs'>-</span>
      }
      return (
        <StatusBadge variant='neutral' className='font-mono'>
@@ -442,7 +442,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                    )}
                  </div>
                  {log.channel_name && (
-                    <span className='text-muted-foreground/70 truncate text-xs'>
+                    <span className='text-subtle-foreground truncate text-xs'>
                      {channelName}
                    </span>
                  )}
@@ -579,25 +579,20 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
      if (groupRatioText) metaParts.push(groupRatioText)

      return (
-        <div className='flex max-w-[200px] flex-col gap-0.5'>
+        <div className='flex w-max flex-col gap-0.5'>
          <TooltipProvider delay={300}>
            <Tooltip>
-              <TooltipTrigger render={<div className='max-w-full' />}>
+              <TooltipTrigger render={<div className='shrink-0' />}>
                {sensitiveVisible ? (
                  <CopyableStatusBadge
                    value={tokenName}
                    variant='neutral'
                    size='sm'
-                    className='max-w-full'
                  >
                    {displayName}
                  </CopyableStatusBadge>
                ) : (
-                  <StatusBadge
-                    variant='neutral'
-                    size='sm'
-                    className='max-w-full'
-                  >
+                  <StatusBadge variant='neutral' size='sm'>
                    {displayName}
                  </StatusBadge>
                )}
@@ -610,7 +605,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
            </Tooltip>
          </TooltipProvider>
          {metaParts.length > 0 && (
-            <span className='text-muted-foreground/60 text-xs [overflow-wrap:anywhere] break-words'>
+            <span className='text-subtle-foreground text-xs [overflow-wrap:anywhere] break-words'>
              {metaParts.join(' · ')}
            </span>
          )}
@@ -700,7 +695,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                ))}
            </div>
            <div className='flex items-center gap-1 text-xs leading-none'>
-              <span className='text-muted-foreground/60 text-xs leading-none'>
+              <span className='text-subtle-foreground text-xs leading-none'>
                {log.is_stream ? t('Stream') : t('Non-stream')}
                {tokensPerSecond != null && (
                  <>
@@ -782,12 +777,12 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
            {(cacheReadTokens > 0 || cacheWriteTokens > 0) && (
              <div className='flex items-center gap-1 text-xs'>
                {cacheReadTokens > 0 && (
-                  <span className='text-muted-foreground/60'>
+                  <span className='text-subtle-foreground'>
                    {t('Cache')}↓ {cacheReadTokens.toLocaleString()}
                  </span>
                )}
                {cacheWriteTokens > 0 && (
-                  <span className='text-muted-foreground/60'>
+                  <span className='text-subtle-foreground'>
                    ↑ {cacheWriteTokens.toLocaleString()}
                  </span>
                )}
@@ -860,7 +855,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
        const segments = buildDetailSegments(log, other, t, isAdmin)
        const primary = segments[0]
        const hasMore = segments.length > 1
-        let detailsContent = <span className='text-muted-foreground/40'>—</span>
+        let detailsContent = <span className='text-faint-foreground'>—</span>

        if (log.content) {
          detailsContent = (
@@ -873,7 +868,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
        if (primary) {
          let primaryClassName = 'text-foreground'
          if (primary.muted) {
-            primaryClassName = 'text-muted-foreground/60'
+            primaryClassName = 'text-subtle-foreground'
          } else if (primary.danger) {
            primaryClassName = 'text-destructive'
          }
@@ -887,7 +882,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
            >
              {primary.text}
              {hasMore && (
-                <span className='text-muted-foreground/40 ml-0.5'>
+                <span className='text-faint-foreground ml-0.5'>
                  +{segments.length - 1}
                </span>
              )}
@@ -905,7 +900,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
            >
              {detailsContent}
              {ip && (
-                <span className='text-muted-foreground/60 max-w-full truncate tabular-nums'>
+                <span className='text-subtle-foreground max-w-full truncate tabular-nums'>
                  {ip}
                </span>
              )}
@@ -149,16 +149,16 @@ export function useDrawingLogsColumns(
      const mjId = row.getValue('mj_id') as string

      if (!mjId) {
-        return <span className='text-muted-foreground/60 text-xs'>-</span>
+        return <span className='text-subtle-foreground text-xs'>-</span>
      }

      return (
-        <div className='flex max-w-[160px] flex-col gap-0.5'>
+        <div className='flex w-max flex-col gap-0.5'>
          <CopyableStatusBadge
            value={mjId}
            variant='neutral'
            size='sm'
-            className='h-auto max-w-full overflow-visible font-mono [overflow-wrap:anywhere] whitespace-normal [&_[data-slot=status-badge-label]]:overflow-visible [&_[data-slot=status-badge-label]]:text-clip [&_[data-slot=status-badge-label]]:whitespace-normal'
+            className='font-mono'
          >
            {mjId}
          </CopyableStatusBadge>
@@ -215,7 +215,7 @@ export function useDrawingLogsColumns(
        const [dialogOpen, setDialogOpen] = useState(false)

        if (!imageUrl) {
-          return <span className='text-muted-foreground/60 text-xs'>-</span>
+          return <span className='text-subtle-foreground text-xs'>-</span>
        }

        return (
@@ -254,7 +254,7 @@ export function useDrawingLogsColumns(
        const [dialogOpen, setDialogOpen] = useState(false)

        if (!prompt) {
-          return <span className='text-muted-foreground/60 text-xs'>-</span>
+          return <span className='text-subtle-foreground text-xs'>-</span>
        }

        return (
@@ -17,9 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import type { ColumnDef } from '@tanstack/react-table'
-import { Music } from 'lucide-react'
 /* eslint-disable react-refresh/only-export-components */
-import { useState, useMemo } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'

 import { CopyableStatusBadge, StatusBadge } from '@/components/status-badge'
@@ -28,14 +27,13 @@ import { getUserAvatarFallback, getUserAvatarStyle } from '@/lib/avatar'
 import { formatTimestampToDate } from '@/lib/format'
 import { cn } from '@/lib/utils'

-import { TASK_ACTIONS, TASK_STATUS } from '../../constants'
-import { taskActionMapper, taskStatusMapper } from '../../lib/mappers'
-import type { TaskLog } from '../../types'
 import {
-  AudioPreviewDialog,
-  type AudioClip,
-} from '../dialogs/audio-preview-dialog'
-import { FailReasonDialog } from '../dialogs/fail-reason-dialog'
+  getTaskPlatformName,
+  taskActionMapper,
+  taskStatusMapper,
+} from '../../lib/mappers'
+import type { TaskLog } from '../../types'
+import { TaskDetailsDialog } from '../dialogs/task-details-dialog'
 import { useUsageLogsContext } from '../usage-logs-provider'
 import {
  createDurationColumn,
@@ -43,53 +41,6 @@ import {
  createProgressColumn,
 } from './column-helpers'

-function parseTaskData(data: unknown): unknown[] {
-  if (Array.isArray(data)) return data
-  if (typeof data === 'string') {
-    try {
-      const parsed = JSON.parse(data)
-      return Array.isArray(parsed) ? parsed : []
-    } catch {
-      return []
-    }
-  }
-  return []
-}
-
-function AudioPreviewCell({ log }: { log: TaskLog }) {
-  const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
-  const clips = useMemo(() => {
-    const data = parseTaskData(log.data)
-    return data.filter(
-      (c) =>
-        c && typeof c === 'object' && (c as Record<string, unknown>).audio_url
-    )
-  }, [log.data])
-
-  if (clips.length === 0) return null
-
-  return (
-    <>
-      <button
-        type='button'
-        className='group flex items-center gap-1 text-left text-xs'
-        onClick={() => setOpen(true)}
-      >
-        <Music className='text-muted-foreground size-3' />
-        <span className='text-foreground leading-snug group-hover:underline'>
-          {t('Click to preview audio')}
-        </span>
-      </button>
-      <AudioPreviewDialog
-        open={open}
-        onOpenChange={setOpen}
-        clips={clips as AudioClip[]}
-      />
-    </>
-  )
-}
-
 export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
  const { t } = useTranslation()
  const columns: ColumnDef<TaskLog>[] = [
@@ -106,11 +57,11 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
              {formatTimestampToDate(submitTime, 'seconds')}
            </span>
            {log.finish_time ? (
-              <span className='text-muted-foreground/60 text-xs tabular-nums'>
+              <span className='text-subtle-foreground text-xs tabular-nums'>
                {formatTimestampToDate(log.finish_time, 'seconds')}
              </span>
            ) : (
-              <span className='text-muted-foreground/50 text-xs'>-</span>
+              <span className='text-subtle-foreground text-xs'>-</span>
            )}
          </div>
        )
@@ -180,20 +131,21 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
        const log = row.original
        const taskId = row.getValue('task_id') as string
        if (!taskId) {
-          return <span className='text-muted-foreground/60 text-xs'>-</span>
+          return <span className='text-subtle-foreground text-xs'>-</span>
        }
        return (
-          <div className='flex max-w-[170px] flex-col gap-0.5'>
+          <div className='flex w-max flex-col gap-0.5'>
            <CopyableStatusBadge
              value={taskId}
              variant='neutral'
              size='sm'
-              className='h-auto max-w-full overflow-visible font-mono [overflow-wrap:anywhere] whitespace-normal [&_[data-slot=status-badge-label]]:overflow-visible [&_[data-slot=status-badge-label]]:text-clip [&_[data-slot=status-badge-label]]:whitespace-normal'
+              className='font-mono'
            >
              {taskId}
            </CopyableStatusBadge>
-            <span className='text-muted-foreground/60 text-xs [overflow-wrap:anywhere] break-words'>
-              {t(log.platform)} · {t(taskActionMapper.getLabel(log.action))}
+            <span className='text-subtle-foreground text-xs [overflow-wrap:anywhere] break-words'>
+              {getTaskPlatformName(log.platform)} ·{' '}
+              {t(taskActionMapper.getLabel(log.action))}
            </span>
          </div>
        )
@@ -229,79 +181,14 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
    },
    createProgressColumn<TaskLog>({ headerLabel: t('Progress') }),
    {
-      accessorKey: 'fail_reason',
+      id: 'details',
      header: t('Details'),
+      enableSorting: false,
      cell: function DetailsCell({ row }) {
-        const log = row.original
-        const failReason = row.getValue('fail_reason') as string
-        const status = log.status
-        const [dialogOpen, setDialogOpen] = useState(false)
-
-        const isSunoSuccess =
-          log.platform === 'suno' && status === TASK_STATUS.SUCCESS
-        if (isSunoSuccess) {
-          const data = parseTaskData(log.data)
-          if (
-            data.some(
-              (c) =>
-                c &&
-                typeof c === 'object' &&
-                (c as Record<string, unknown>).audio_url
-            )
-          ) {
-            return <AudioPreviewCell log={log} />
-          }
-        }
-
-        const isVideoTask =
-          log.action === TASK_ACTIONS.GENERATE ||
-          log.action === TASK_ACTIONS.TEXT_GENERATE ||
-          log.action === TASK_ACTIONS.FIRST_TAIL_GENERATE ||
-          log.action === TASK_ACTIONS.REFERENCE_GENERATE ||
-          log.action === TASK_ACTIONS.REMIX_GENERATE
-        const isSuccess = status === TASK_STATUS.SUCCESS
-        const isUrl = failReason?.startsWith('http')
-
-        if (isSuccess && isVideoTask && isUrl) {
-          const videoUrl = `/v1/videos/${log.task_id}/content`
-          return (
-            <a
-              href={videoUrl}
-              target='_blank'
-              rel='noopener noreferrer'
-              className='text-foreground text-xs hover:underline'
-            >
-              {t('Click to preview video')}
-            </a>
-          )
-        }
-
-        if (!failReason) {
-          return <span className='text-muted-foreground/60 text-xs'>-</span>
-        }
-
-        return (
-          <>
-            <button
-              type='button'
-              className='group flex max-w-[200px] items-center gap-1 text-left text-xs'
-              onClick={() => setDialogOpen(true)}
-              title={t('Click to view full error message')}
-            >
-              <span className='text-destructive truncate leading-snug group-hover:underline'>
-                {failReason}
-              </span>
-            </button>
-            <FailReasonDialog
-              failReason={failReason}
-              open={dialogOpen}
-              onOpenChange={setDialogOpen}
-            />
-          </>
-        )
+        return <TaskDetailsCell log={row.original} isAdmin={isAdmin} />
      },
-      size: 200,
-      maxSize: 220,
+      size: 120,
+      maxSize: 140,
      meta: {
        cardRole: 'secondary',
        cardOrder: 20,
@@ -313,3 +200,34 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {

  return columns
 }
+
+function TaskDetailsCell({ log, isAdmin }: { log: TaskLog; isAdmin: boolean }) {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const isFailed = !!log.fail_reason && log.fail_reason.trim() !== ''
+
+  return (
+    <>
+      <button
+        type='button'
+        className={cn(
+          'text-xs leading-snug hover:underline',
+          isFailed ? 'text-destructive' : 'text-foreground'
+        )}
+        onClick={(e) => {
+          e.stopPropagation()
+          setOpen(true)
+        }}
+        title={t('View the complete details for this task')}
+      >
+        {t('View')}
+      </button>
+      <TaskDetailsDialog
+        log={log}
+        isAdmin={isAdmin}
+        open={open}
+        onOpenChange={setOpen}
+      />
+    </>
+  )
+}
@@ -16,15 +16,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.

 For commercial licensing, please contact support@quantumnous.com
 */
-import { ExternalLink, Copy, Music } from 'lucide-react'
+import { ExternalLink, Copy } from 'lucide-react'
 import { useState, useRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'

 import { Button } from '@/components/design-system/button'
-import { Dialog } from '@/components/dialog'
 import { StatusBadge } from '@/components/status-badge'
-import { ScrollArea } from '@/components/ui/scroll-area'

 export interface AudioClip {
  clip_id?: string
@@ -41,12 +39,6 @@ export interface AudioClip {
  }
 }

-interface AudioPreviewDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  clips: AudioClip[]
-}
-
 function formatDuration(seconds?: number): string {
  if (!seconds || seconds <= 0) return '--:--'
  const m = Math.floor(seconds / 60)
@@ -54,7 +46,7 @@ function formatDuration(seconds?: number): string {
  return `${m}:${s.toString().padStart(2, '0')}`
 }

-function AudioClipCard({ clip }: { clip: AudioClip }) {
+export function AudioClipCard({ clip }: { clip: AudioClip }) {
  const { t } = useTranslation()
  const [hasError, setHasError] = useState(false)
  const audioRef = useRef<HTMLAudioElement>(null)
@@ -135,39 +127,3 @@ function AudioClipCard({ clip }: { clip: AudioClip }) {
    </div>
  )
 }
-
-export function AudioPreviewDialog(props: AudioPreviewDialogProps) {
-  const { t } = useTranslation()
-  const clips = Array.isArray(props.clips) ? props.clips : []
-
-  return (
-    <Dialog
-      open={props.open}
-      onOpenChange={props.onOpenChange}
-      title={
-        <>
-          <Music className='h-5 w-5' />
-          {t('Audio Preview')}
-        </>
-      }
-      contentClassName='sm:max-w-lg'
-      titleClassName='flex items-center gap-2'
-      contentHeight='auto'
-      bodyClassName='space-y-4'
-    >
-      {clips.length === 0 ? (
-        <p className='text-muted-foreground py-4 text-center text-sm'>
-          {t('None')}
-        </p>
-      ) : (
-        <ScrollArea className='max-h-[60vh]'>
-          <div className='space-y-3 pr-2'>
-            {clips.map((clip, idx) => (
-              <AudioClipCard key={clip.clip_id || clip.id || idx} clip={clip} />
-            ))}
-          </div>
-        </ScrollArea>
-      )}
-    </Dialog>
-  )
-}
@@ -55,7 +55,7 @@ export function FailReasonDialog({
            <Label className='text-sm font-semibold'>
              {t('Error Message')}
            </Label>
-            <div className='bg-muted/50 relative rounded-md border border-red-200 p-3'>
+            <div className='border-destructive/25 bg-destructive/8 relative rounded-md border p-3'>
              <Button
                variant='ghost'
                size='icon'
@@ -64,12 +64,12 @@ export function FailReasonDialog({
                title={t('Copy to clipboard')}
              >
                {copiedText === failReason ? (
-                  <Check className='size-4 text-green-600' />
+                  <Check className='text-success size-4' />
                ) : (
                  <Copy className='size-4' />
                )}
              </Button>
-              <p className='overflow-wrap-anywhere pr-10 text-sm leading-relaxed break-all whitespace-pre-wrap text-red-600'>
+              <p className='text-status-destructive overflow-wrap-anywhere pr-10 text-sm leading-relaxed break-all whitespace-pre-wrap'>
                {failReason || '-'}
              </p>
            </div>
@@ -65,7 +65,7 @@ export function PromptDialog({
                title={t('Copy to clipboard')}
              >
                {copiedText === prompt ? (
-                  <Check className='size-4 text-green-600' />
+                  <Check className='text-success size-4' />
                ) : (
                  <Copy className='size-4' />
                )}
@@ -91,7 +91,7 @@ export function PromptDialog({
                  title={t('Copy to clipboard')}
                >
                  {copiedText === promptEn ? (
-                    <Check className='size-4 text-green-600' />
+                    <Check className='text-success size-4' />
                  ) : (
                    <Copy className='size-4' />
                  )}
@@ -0,0 +1,633 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import {
+  AlertTriangle,
+  Check,
+  Copy,
+  ExternalLink,
+  Music,
+  Video,
+} from 'lucide-react'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Button } from '@/components/design-system/button'
+import { Dialog } from '@/components/dialog'
+import { StatusBadge } from '@/components/status-badge'
+import { Label } from '@/components/ui/label'
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
+import { formatLogQuota, formatTimestampToDate } from '@/lib/format'
+import { cn } from '@/lib/utils'
+
+import { TASK_ACTIONS, TASK_PLATFORMS, TASK_STATUS } from '../../constants'
+import { formatDuration } from '../../lib/format'
+import {
+  getTaskPlatformName,
+  taskActionMapper,
+  taskStatusMapper,
+} from '../../lib/mappers'
+import type { TaskLog } from '../../types'
+import { AudioClipCard, type AudioClip } from './audio-preview-dialog'
+
+const VIDEO_ACTIONS = new Set<string>([
+  TASK_ACTIONS.GENERATE,
+  TASK_ACTIONS.TEXT_GENERATE,
+  TASK_ACTIONS.FIRST_TAIL_GENERATE,
+  TASK_ACTIONS.REFERENCE_GENERATE,
+  TASK_ACTIONS.REMIX_GENERATE,
+])
+
+const MAX_VALUE_LENGTH = 800
+
+function parseJson(raw: unknown): unknown {
+  if (raw == null || raw === '') return null
+  if (typeof raw === 'string') {
+    try {
+      return JSON.parse(raw)
+    } catch {
+      return raw
+    }
+  }
+  return raw
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+// snake_case / camelCase -> "Title Case" with common acronym fixes, so any
+// upstream provider payload renders with readable labels.
+function humanizeKey(key: string): string {
+  const spaced = key
+    .replaceAll('_', ' ')
+    .replaceAll(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .trim()
+  return spaced
+    .replaceAll(/\b\w/g, (c) => c.toUpperCase())
+    .replaceAll(/\bUrl\b/g, 'URL')
+    .replaceAll(/\bId\b/g, 'ID')
+    .replaceAll(/\bApi\b/g, 'API')
+    .replaceAll(/\bFps\b/g, 'FPS')
+}
+
+function formatScalar(value: unknown): string {
+  if (value == null) return '-'
+  const str = typeof value === 'string' ? value : String(value)
+  if (str.length > MAX_VALUE_LENGTH) return `${str.slice(0, MAX_VALUE_LENGTH)}…`
+  return str
+}
+
+interface FlatEntry {
+  label: string
+  value: string
+  mono?: boolean
+}
+
+// Flatten a nested upstream payload into readable rows. Nested objects are
+// prefixed with their parent label ("Cost › Currency"); arrays of scalars are
+// joined, arrays of objects are shown as compact JSON.
+function flattenEntries(
+  obj: Record<string, unknown>,
+  parent = ''
+): FlatEntry[] {
+  const entries: FlatEntry[] = []
+  for (const [key, value] of Object.entries(obj)) {
+    const label = parent ? `${parent} › ${humanizeKey(key)}` : humanizeKey(key)
+    if (isPlainObject(value)) {
+      entries.push(...flattenEntries(value, label))
+    } else if (Array.isArray(value)) {
+      const allScalar = value.every((v) => v == null || typeof v !== 'object')
+      if (allScalar) {
+        entries.push({
+          label,
+          value: value.map(formatScalar).join(', ') || '-',
+        })
+      } else {
+        entries.push({
+          label,
+          value: formatScalar(JSON.stringify(value)),
+          mono: true,
+        })
+      }
+    } else {
+      entries.push({
+        label,
+        value: formatScalar(value),
+        mono: typeof value !== 'boolean',
+      })
+    }
+  }
+  return entries
+}
+
+// The DTO's result_url falls back to fail_reason when no dedicated URL is
+// stored, so only treat http(s) links or the internal video proxy path as a
+// playable URL.
+function resolveVideoUrl(log: TaskLog): string {
+  const raw = (log.result_url ?? '').trim()
+  const isHttp = /^https?:\/\//i.test(raw)
+  const isProxy = raw.startsWith('/v1/videos/')
+  if (isHttp || isProxy) return raw
+  if (VIDEO_ACTIONS.has(log.action) && log.status === TASK_STATUS.SUCCESS) {
+    if (log.task_id) return `/v1/videos/${log.task_id}/content`
+  }
+  return ''
+}
+
+function DetailRow(props: {
+  label: React.ReactNode
+  value: React.ReactNode
+  mono?: boolean
+}) {
+  return (
+    <div className='grid min-w-0 grid-cols-[6rem_minmax(0,1fr)] gap-2 text-sm sm:grid-cols-[8rem_minmax(0,1fr)] sm:gap-3'>
+      <span className='text-muted-foreground min-w-0 text-xs'>
+        {props.label}
+      </span>
+      <span
+        className={cn(
+          'max-w-full min-w-0 text-xs break-all sm:wrap-break-word',
+          props.mono && 'font-mono'
+        )}
+      >
+        {props.value}
+      </span>
+    </div>
+  )
+}
+
+function DetailSection(props: {
+  icon?: React.ReactNode
+  label: string
+  variant?: 'default' | 'destructive'
+  action?: React.ReactNode
+  children: React.ReactNode
+}) {
+  const isDestructive = props.variant === 'destructive'
+  return (
+    <div className='min-w-0 space-y-1.5'>
+      <div className='flex items-center justify-between gap-2'>
+        <Label
+          className={cn(
+            'flex items-center gap-1.5 text-xs font-semibold',
+            isDestructive && 'text-destructive'
+          )}
+        >
+          {props.icon}
+          {props.label}
+        </Label>
+        {props.action}
+      </div>
+      <div
+        className={cn(
+          'min-w-0 space-y-1 overflow-hidden rounded-md border p-2.5 max-sm:p-2',
+          isDestructive
+            ? 'border-destructive/25 bg-destructive/10'
+            : 'bg-muted/30'
+        )}
+      >
+        {props.children}
+      </div>
+    </div>
+  )
+}
+
+function CopyButton(props: {
+  text: string
+  copied: boolean
+  onCopy: () => void
+}) {
+  const { t } = useTranslation()
+  return (
+    <Button
+      variant='ghost'
+      size='icon-xs'
+      onClick={props.onCopy}
+      title={t('Copy to clipboard')}
+      aria-label={t('Copy to clipboard')}
+    >
+      {props.copied ? (
+        <Check className='text-success size-3' />
+      ) : (
+        <Copy className='size-3' />
+      )}
+    </Button>
+  )
+}
+
+function VideoPreview({ url }: { url: string }) {
+  const { t } = useTranslation()
+  const [hasError, setHasError] = useState(false)
+
+  if (hasError) {
+    return (
+      <div className='flex flex-wrap items-center gap-2'>
+        <span className='text-muted-foreground text-xs'>
+          {t('Failed to load video')}
+        </span>
+        <Button
+          variant='outline'
+          size='sm'
+          onClick={() => window.open(url, '_blank', 'noopener,noreferrer')}
+        >
+          <ExternalLink className='size-3' />
+          {t('Open in new tab')}
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <video
+      src={url}
+      controls
+      preload='metadata'
+      onError={() => setHasError(true)}
+      className='bg-background max-h-[420px] w-full rounded-md border'
+    />
+  )
+}
+
+function AudioPreview({ clips }: { clips: AudioClip[] }) {
+  return (
+    <div className='space-y-3'>
+      {clips.map((clip, idx) => (
+        <AudioClipCard key={clip.clip_id || clip.id || idx} clip={clip} />
+      ))}
+    </div>
+  )
+}
+
+interface TaskDetailsDialogProps {
+  log: TaskLog
+  isAdmin: boolean
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function TaskDetailsDialog(props: TaskDetailsDialogProps) {
+  const { t } = useTranslation()
+  const { log, isAdmin } = props
+  const { copiedText, copyToClipboard } = useCopyToClipboard({ notify: false })
+
+  const platformName = getTaskPlatformName(log.platform)
+  const duration = formatDuration(log.submit_time, log.finish_time, 'seconds')
+  const videoUrl = resolveVideoUrl(log)
+  const resultUrl = (log.result_url ?? '').trim()
+  const isResultLink =
+    /^https?:\/\//i.test(resultUrl) || resultUrl.startsWith('/v1/videos/')
+
+  const parsedData = useMemo(() => parseJson(log.data), [log.data])
+  const props_ = useMemo(() => {
+    if (isPlainObject(log.properties)) return log.properties
+    const parsed = parseJson(log.properties)
+    return isPlainObject(parsed) ? parsed : null
+  }, [log.properties])
+
+  const asString = (v: unknown): string | undefined =>
+    typeof v === 'string' && v !== '' ? v : undefined
+  const originModel = asString(props_?.origin_model_name)
+  const upstreamModel = asString(props_?.upstream_model_name)
+  const dataModel = isPlainObject(parsedData)
+    ? asString(parsedData.model)
+    : undefined
+  const model = originModel || upstreamModel || dataModel
+
+  const audioClips = useMemo(() => {
+    if (log.platform !== TASK_PLATFORMS.SUNO) return []
+    if (log.status !== TASK_STATUS.SUCCESS) return []
+    if (!Array.isArray(parsedData)) return []
+    return parsedData.filter(
+      (c) =>
+        c && typeof c === 'object' && (c as Record<string, unknown>).audio_url
+    ) as AudioClip[]
+  }, [log.platform, log.status, parsedData])
+
+  const upstreamEntries = useMemo(
+    () => (isPlainObject(parsedData) ? flattenEntries(parsedData) : []),
+    [parsedData]
+  )
+  const upstreamRaw = useMemo(() => {
+    if (isPlainObject(parsedData) || parsedData == null) return ''
+    try {
+      return JSON.stringify(parsedData, null, 2)
+    } catch {
+      return String(parsedData)
+    }
+  }, [parsedData])
+
+  const rawJson = useMemo(() => {
+    try {
+      return JSON.stringify(log, null, 2)
+    } catch {
+      return ''
+    }
+  }, [log])
+
+  const hasFailReason = !!log.fail_reason && log.fail_reason.trim() !== ''
+
+  return (
+    <Dialog
+      open={props.open}
+      onOpenChange={props.onOpenChange}
+      title={
+        <>
+          {t('Task Details')}
+          <StatusBadge
+            variant={taskStatusMapper.getVariant(log.status)}
+            size='sm'
+          >
+            {t(
+              taskStatusMapper.getLabel(log.status, log.status || 'Submitting')
+            )}
+          </StatusBadge>
+        </>
+      }
+      description={t('View the complete details for this task')}
+      contentClassName='min-w-0 overflow-hidden max-sm:max-h-[calc(100dvh-1.5rem)] max-sm:w-[calc(100vw-1.5rem)] max-sm:max-w-[calc(100vw-1.5rem)] max-sm:p-4 sm:max-w-lg'
+      headerClassName='max-sm:gap-1'
+      titleClassName='flex items-center gap-2 text-base'
+      descriptionClassName='sr-only'
+      contentHeight='min(78dvh, 760px)'
+      bodyClassName='pr-2 sm:pr-4'
+    >
+      <div className='w-full max-w-full min-w-0 space-y-3 overflow-x-hidden py-1'>
+        {/* Overview */}
+        <DetailSection label={t('Overview')}>
+          {log.task_id && (
+            <DetailRow
+              label={t('Task ID')}
+              value={
+                <span className='flex items-start gap-1'>
+                  <span className='min-w-0 break-all'>{log.task_id}</span>
+                  <button
+                    type='button'
+                    className='text-muted-foreground hover:text-foreground mt-0.5 shrink-0'
+                    onClick={() => copyToClipboard(log.task_id)}
+                    title={t('Copy to clipboard')}
+                    aria-label={t('Copy to clipboard')}
+                  >
+                    {copiedText === log.task_id ? (
+                      <Check className='text-success size-3' />
+                    ) : (
+                      <Copy className='size-3' />
+                    )}
+                  </button>
+                </span>
+              }
+              mono
+            />
+          )}
+          {log.id > 0 && (
+            <DetailRow label={t('Internal ID')} value={String(log.id)} mono />
+          )}
+          <DetailRow label={t('Platform')} value={platformName} />
+          <DetailRow
+            label={t('Action')}
+            value={t(taskActionMapper.getLabel(log.action, log.action))}
+          />
+          <DetailRow
+            label={t('Status')}
+            value={
+              <StatusBadge
+                variant={taskStatusMapper.getVariant(log.status)}
+                size='sm'
+              >
+                {t(
+                  taskStatusMapper.getLabel(
+                    log.status,
+                    log.status || 'Submitting'
+                  )
+                )}
+              </StatusBadge>
+            }
+          />
+          {log.progress && (
+            <DetailRow
+              label={t('Progress')}
+              value={
+                <StatusBadge variant='neutral' size='sm' className='font-mono'>
+                  {log.progress}
+                </StatusBadge>
+              }
+            />
+          )}
+          {model && <DetailRow label={t('Model')} value={model} mono />}
+        </DetailSection>
+
+        {/* Timing */}
+        <DetailSection label={t('Timing')}>
+          {log.created_at ? (
+            <DetailRow
+              label={t('Created At')}
+              value={formatTimestampToDate(log.created_at, 'seconds')}
+              mono
+            />
+          ) : null}
+          {log.updated_at ? (
+            <DetailRow
+              label={t('Updated At')}
+              value={formatTimestampToDate(log.updated_at, 'seconds')}
+              mono
+            />
+          ) : null}
+          <DetailRow
+            label={t('Submit Time')}
+            value={formatTimestampToDate(log.submit_time, 'seconds')}
+            mono
+          />
+          {log.start_time ? (
+            <DetailRow
+              label={t('Start Time')}
+              value={formatTimestampToDate(log.start_time, 'seconds')}
+              mono
+            />
+          ) : null}
+          {log.finish_time ? (
+            <DetailRow
+              label={t('Finish Time')}
+              value={formatTimestampToDate(log.finish_time, 'seconds')}
+              mono
+            />
+          ) : null}
+          {duration && (
+            <DetailRow
+              label={t('Duration')}
+              value={
+                <StatusBadge
+                  variant={duration.variant}
+                  size='sm'
+                  className='tabular-nums'
+                >
+                  {duration.durationSec.toFixed(1)}s
+                </StatusBadge>
+              }
+            />
+          )}
+        </DetailSection>
+
+        {/* Billing */}
+        <DetailSection label={t('Billing')}>
+          {typeof log.quota === 'number' && (
+            <DetailRow
+              label={t('Cost')}
+              value={formatLogQuota(log.quota)}
+              mono
+            />
+          )}
+          {log.group && <DetailRow label={t('Group')} value={log.group} mono />}
+          {isAdmin && log.channel_id > 0 && (
+            <DetailRow label={t('Channel')} value={`#${log.channel_id}`} mono />
+          )}
+          {isAdmin && log.username && (
+            <DetailRow label={t('User')} value={log.username} />
+          )}
+          {isAdmin && log.user_id > 0 && (
+            <DetailRow label={t('User ID')} value={String(log.user_id)} mono />
+          )}
+        </DetailSection>
+
+        {/* Request properties */}
+        {(originModel || upstreamModel) && (
+          <DetailSection label={t('Request Properties')}>
+            {originModel && (
+              <DetailRow
+                label={t('Original Model Name')}
+                value={originModel}
+                mono
+              />
+            )}
+            {upstreamModel && (
+              <DetailRow
+                label={t('Upstream Model Name')}
+                value={upstreamModel}
+                mono
+              />
+            )}
+          </DetailSection>
+        )}
+
+        {/* Fail reason */}
+        {hasFailReason && (
+          <DetailSection
+            icon={<AlertTriangle className='size-3.5' aria-hidden='true' />}
+            label={t('Fail Reason')}
+            variant='destructive'
+            action={
+              <CopyButton
+                text={log.fail_reason ?? ''}
+                copied={copiedText === log.fail_reason}
+                onCopy={() => copyToClipboard(log.fail_reason ?? '')}
+              />
+            }
+          >
+            <p className='text-destructive text-xs leading-relaxed break-all whitespace-pre-wrap sm:wrap-break-word'>
+              {log.fail_reason}
+            </p>
+          </DetailSection>
+        )}
+
+        {/* Result */}
+        {(videoUrl || isResultLink || audioClips.length > 0) && (
+          <DetailSection
+            icon={<Video className='size-3.5' aria-hidden='true' />}
+            label={t('Result')}
+            action={
+              isResultLink ? (
+                <div className='flex items-center gap-1'>
+                  <Button
+                    variant='ghost'
+                    size='icon-xs'
+                    onClick={() =>
+                      window.open(resultUrl, '_blank', 'noopener,noreferrer')
+                    }
+                    title={t('Open in new tab')}
+                    aria-label={t('Open in new tab')}
+                  >
+                    <ExternalLink className='size-3' />
+                  </Button>
+                  <CopyButton
+                    text={resultUrl}
+                    copied={copiedText === resultUrl}
+                    onCopy={() => copyToClipboard(resultUrl)}
+                  />
+                </div>
+              ) : undefined
+            }
+          >
+            {isResultLink && (
+              <DetailRow label={t('Result URL')} value={resultUrl} mono />
+            )}
+            {videoUrl && <VideoPreview url={videoUrl} />}
+            {audioClips.length > 0 && (
+              <div className='flex items-center gap-1.5 pt-1'>
+                <Music
+                  className='text-muted-foreground size-3.5'
+                  aria-hidden='true'
+                />
+                <span className='text-xs font-medium'>
+                  {t('Audio Preview')}
+                </span>
+              </div>
+            )}
+            {audioClips.length > 0 && <AudioPreview clips={audioClips} />}
+          </DetailSection>
+        )}
+
+        {/* Upstream response (parsed task data) */}
+        {(upstreamEntries.length > 0 || upstreamRaw) && (
+          <DetailSection label={t('Upstream Response')}>
+            {upstreamEntries.length > 0 ? (
+              upstreamEntries.map((entry) => (
+                <DetailRow
+                  key={entry.label}
+                  label={entry.label}
+                  value={entry.value}
+                  mono={entry.mono}
+                />
+              ))
+            ) : (
+              <pre className='bg-background/60 max-h-64 min-w-0 overflow-auto rounded border p-2 font-mono text-xs leading-relaxed whitespace-pre'>
+                {upstreamRaw}
+              </pre>
+            )}
+          </DetailSection>
+        )}
+
+        {/* Raw JSON */}
+        {rawJson && (
+          <DetailSection
+            label={t('Raw Data')}
+            action={
+              <CopyButton
+                text={rawJson}
+                copied={copiedText === rawJson}
+                onCopy={() => copyToClipboard(rawJson)}
+              />
+            }
+          >
+            <pre className='bg-background/60 max-h-72 min-w-0 overflow-auto rounded border p-2 font-mono text-xs leading-relaxed whitespace-pre'>
+              {rawJson}
+            </pre>
+          </DetailSection>
+        )}
+      </div>
+    </Dialog>
+  )
+}
@@ -150,9 +150,10 @@ function ModelBadgeContent(
    return (
      <StatusBadge
        variant='neutral'
+        appearance='soft'
        size='sm'
        className={cn(
-          'h-5! max-w-none shrink-0 whitespace-nowrap! border-current/20 [&_[data-slot=status-badge-label]]:whitespace-nowrap!',
+          'h-5! max-w-none shrink-0 whitespace-nowrap! [&_[data-slot=status-badge-label]]:whitespace-nowrap!',
          colorClassName,
          props.className
        )}
@@ -166,9 +167,10 @@ function ModelBadgeContent(
    <CopyableStatusBadge
      value={props.modelName}
      variant='neutral'
+      appearance='soft'
      size='sm'
      className={cn(
-        'h-5! max-w-none shrink-0 whitespace-nowrap! border-current/20 [&_[data-slot=status-badge-label]]:whitespace-nowrap!',
+        'h-5! max-w-none shrink-0 whitespace-nowrap! [&_[data-slot=status-badge-label]]:whitespace-nowrap!',
        colorClassName,
        props.className
      )}
@@ -97,7 +97,7 @@ function UsageLogCard<TData>(props: { cells: Cell<TData, unknown>[] }) {
      {(titleCell || badgeCell) && (
        <div className='flex min-w-0 items-start justify-between gap-3'>
          {titleCell && (
-            <div className='min-w-0 flex-1 text-[15px] leading-tight font-semibold break-words'>
+            <div className='min-w-0 flex-1 text-base leading-tight font-semibold break-words'>
              {flexRender(
                titleCell.column.columnDef.cell,
                titleCell.getContext()
@@ -115,31 +115,42 @@ function UsageLogCard<TData>(props: { cells: Cell<TData, unknown>[] }) {
        </div>
      )}

-      {rowCells.length > 0 && (
-        <div className='mt-3 space-y-0.5 border-t pt-3'>
-          {rowCells.map((cell) => (
-            <DataTableCardRow
-              key={cell.id}
-              label={getCardLabel(cell)}
-              contentMode={cell.column.columnDef.meta?.contentMode}
-            >
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
-            </DataTableCardRow>
-          ))}
-        </div>
-      )}
+      {bodyCells.length > 0 && (
+        <div
+          className={cn(
+            'flex flex-col gap-3',
+            (titleCell || badgeCell) && 'mt-3'
+          )}
+        >
+          {rowCells.length > 0 && (
+            <div className='flex flex-col gap-0.5'>
+              {rowCells.map((cell) => (
+                <DataTableCardRow
+                  key={cell.id}
+                  label={getCardLabel(cell)}
+                  contentMode={cell.column.columnDef.meta?.contentMode}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </DataTableCardRow>
+              ))}
+            </div>
+          )}

-      {wideCells.length > 0 && (
-        <div className='mt-3 space-y-3 border-t pt-3'>
-          {wideCells.map((cell) => (
-            <DataTableCardField
-              key={cell.id}
-              label={getCardLabel(cell)}
-              contentMode={cell.column.columnDef.meta?.contentMode ?? 'full'}
-            >
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
-            </DataTableCardField>
-          ))}
+          {wideCells.length > 0 && (
+            <div className='bg-muted/30 flex flex-col gap-3 rounded-md px-2.5 py-2'>
+              {wideCells.map((cell) => (
+                <DataTableCardField
+                  key={cell.id}
+                  label={getCardLabel(cell)}
+                  contentMode={
+                    cell.column.columnDef.meta?.contentMode ?? 'full'
+                  }
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </DataTableCardField>
+              ))}
+            </div>
+          )}
        </div>
      )}
    </div>