feat(logs): add username to TaskLog interface and implement log avatar styling

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

@@ -1,9 +1,9 @@
 /* eslint-disable react-refresh/only-export-components */
 import { useState } from 'react'
 import type { ColumnDef } from '@tanstack/react-table'
-import { Clock, Zap } from 'lucide-react'
+import { Zap } from 'lucide-react'
 import { formatTimestampToDate, formatTokens } from '@/lib/format'
-import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 import {
   Tooltip,
   TooltipContent,
@@ -50,7 +50,7 @@ export function CacheTooltip({
 // ============================================================================
 
 /**
- * Create a timestamp column
+ * Create a timestamp column - compact mono style matching common logs
  */
 export function createTimestampColumn<T>(config: {
   accessorKey: string
@@ -66,10 +66,13 @@ 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 (
-        <div className='min-w-[140px] font-mono text-sm'>
+        <span className='font-mono text-xs tabular-nums'>
           {formatTimestampToDate(timestamp, unit)}
-        </div>
+        </span>
       )
     },
     meta: { label: title },
@@ -77,19 +80,51 @@ export function createTimestampColumn<T>(config: {
 }
 
 /**
- * Create a duration column
+ * Duration pill colors matching common logs timing column
+ */
+const durationPillBg: Record<string, string> = {
+  green:
+    'border border-emerald-200/60 bg-emerald-50/70 dark:border-emerald-800/50 dark:bg-emerald-950/25',
+  red: 'border border-rose-200/70 bg-rose-50/70 dark:border-rose-800/50 dark:bg-rose-950/25',
+  success:
+    'border border-emerald-200/60 bg-emerald-50/50 dark:border-emerald-800/50 dark:bg-emerald-950/20',
+  info: 'border border-sky-200/60 bg-sky-50/50 dark:border-sky-800/50 dark:bg-sky-950/20',
+  warning:
+    'border border-amber-200/60 bg-amber-50/50 dark:border-amber-800/50 dark:bg-amber-950/20',
+}
+
+const durationTextColor: Record<string, string> = {
+  green: 'text-emerald-700 dark:text-emerald-400',
+  red: 'text-rose-700 dark:text-rose-400',
+  success: 'text-emerald-700 dark:text-emerald-400',
+  info: 'text-sky-700 dark:text-sky-400',
+  warning: 'text-amber-700 dark:text-amber-400',
+}
+
+const durationDotColor: Record<string, string> = {
+  green: 'bg-emerald-500',
+  red: 'bg-rose-500',
+  success: 'bg-emerald-500',
+  info: 'bg-sky-500',
+  warning: 'bg-amber-500',
+}
+
+/**
+ * Create a duration column - pill style matching common logs timing
  */
 export function createDurationColumn<T>(config: {
   submitTimeKey: string
   finishTimeKey: string
   unit?: 'seconds' | 'milliseconds'
   headerLabel: string
+  warningThresholdSec?: number
 }): ColumnDef<T> {
   const {
     submitTimeKey,
     finishTimeKey,
     unit = 'milliseconds',
     headerLabel,
+    warningThresholdSec = 60,
   } = config
 
   return {
@@ -106,17 +141,28 @@ export function createDurationColumn<T>(config: {
       )
 
       if (!duration) {
-        return <div className='text-muted-foreground text-sm'>-</div>
+        return <span className='text-muted-foreground/60 text-xs'>-</span>
       }
 
+      const variant = duration.durationSec > warningThresholdSec ? 'red' : 'green'
+
       return (
-        <StatusBadge
-          label={`${duration.durationSec.toFixed(1)}s`}
-          variant={duration.variant}
-          icon={Clock}
-          size='sm'
-          copyable={false}
-        />
+        <span
+          className={cn(
+            'inline-flex w-fit items-center gap-1 rounded-md px-1.5 py-0.5 font-mono text-xs font-medium',
+            durationPillBg[variant],
+            durationTextColor[variant]
+          )}
+        >
+          <span
+            className={cn(
+              'size-1.5 shrink-0 rounded-full',
+              durationDotColor[variant]
+            )}
+            aria-hidden='true'
+          />
+          {duration.durationSec.toFixed(1)}s
+        </span>
       )
     },
     meta: { label: headerLabel },
@@ -124,7 +170,7 @@ export function createDurationColumn<T>(config: {
 }
 
 /**
- * Create a channel column (admin only)
+ * Create a channel column (admin only) - #id badge matching common logs
  */
 export function createChannelColumn<T>(config: {
   accessorKey?: string
@@ -139,11 +185,16 @@ 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 (
         <StatusBadge
-          label={`${channelId}`}
-          autoColor={`channel-${channelId}`}
+          label={`#${channelId}`}
+          autoColor={String(channelId)}
+          copyText={String(channelId)}
           size='sm'
+          className='font-mono'
         />
       )
     },
@@ -152,7 +203,7 @@ export function createChannelColumn<T>(config: {
 }
 
 /**
- * Create a fail reason column
+ * Create a fail reason column - text-xs truncate, hover underline, dialog
  */
 export function createFailReasonColumn<T>(config: {
   accessorKey?: string
@@ -171,19 +222,21 @@ export function createFailReasonColumn<T>(config: {
       const [dialogOpen, setDialogOpen] = useState(false)
 
       if (!failReason) {
-        return <span className='text-muted-foreground text-sm'>-</span>
+        return <span className='text-muted-foreground/60 text-xs'>-</span>
       }
 
       return (
         <>
-          <Button
-            variant='ghost'
-            className='h-auto max-w-[200px] justify-start overflow-hidden p-0 text-left text-sm font-normal text-red-600 hover:underline'
+          <button
+            type='button'
+            className='group flex max-w-[200px] items-center gap-1 text-left text-xs'
             onClick={() => setDialogOpen(true)}
             title={cellTitle}
           >
-            <span className='truncate'>{failReason}</span>
-          </Button>
+            <span className='truncate leading-snug text-red-600 group-hover:underline dark:text-red-400'>
+              {failReason}
+            </span>
+          </button>
           <FailReasonDialog
             failReason={failReason}
             open={dialogOpen}
@@ -197,7 +250,7 @@ export function createFailReasonColumn<T>(config: {
 }
 
 /**
- * Create a progress column
+ * Create a progress column - compact mono pill
  */
 export function createProgressColumn<T>(config: {
   accessorKey?: string
@@ -213,9 +266,13 @@ export function createProgressColumn<T>(config: {
     cell: ({ row }) => {
       const progress = row.getValue(accessorKey) as string
       if (!progress) {
-        return <span className='text-muted-foreground text-sm'>-</span>
+        return <span className='text-muted-foreground/60 text-xs'>-</span>
       }
-      return <div className='font-mono text-sm'>{progress}</div>
+      return (
+        <span className='inline-flex items-center rounded-md border border-border/60 bg-muted/30 px-1.5 py-0.5 font-mono text-xs'>
+          {progress}
+        </span>
+      )
     },
     meta: { label: headerLabel },
   }