🎨 fix(logs): restore timing background badges and optimize model/token spacing

- Re-introduce the custom translucent background color and thin border scheme
  for timing and duration badges in common, drawing, and task logs.
- Remove strict max-width constraints on model badges to ensure complete
  names (with version suffixes) are always visible and wrap gracefully.
- Adjust spacing on model and token badges (h-6 height, larger gaps, and
  proper padding) to prevent crowded elements and restore a balanced,
  high-quality look in the log tables.

web/default/src/features/usage-logs/components/columns/column-helpers.tsx

@@ -21,6 +21,7 @@ import { useState } from 'react'
 import type { ColumnDef } from '@tanstack/react-table'
 import { Zap } from 'lucide-react'
 import { formatTimestampToDate, formatTokens } from '@/lib/format'
+import { cn } from '@/lib/utils'
 import {
   Tooltip,
   TooltipContent,
@@ -134,13 +135,22 @@ export function createDurationColumn<T>(config: {
       const variant =
         duration.durationSec > warningThresholdSec ? 'danger' : 'success'
 
+      const durationBgMap: Record<string, string> = {
+        success:
+          'border border-emerald-200/40 bg-emerald-50/35 dark:border-emerald-900/40 dark:bg-emerald-950/15',
+        warning:
+          'border border-amber-200/45 bg-amber-50/35 dark:border-amber-900/40 dark:bg-amber-950/15',
+        danger:
+          'border border-rose-200/50 bg-rose-50/35 dark:border-rose-900/40 dark:bg-rose-950/15',
+      }
+
       return (
         <StatusBadge
           label={`${duration.durationSec.toFixed(1)}s`}
           variant={variant}
           size='sm'
           copyable={false}
-          className='font-mono'
+          className={cn('font-mono', durationBgMap[variant])}
         />
       )
     },