@skyhook-io/k8s-ui 1.1.1 → 1.2.1

package/src/components/logs/LogCore.tsx

@@ -1,9 +1,9 @@
 import { useRef, useCallback, useState, useMemo, useEffect, type ReactNode } from 'react'
 import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso'
-import { Play, Square, Download, Search, X, Terminal, RotateCcw, ChevronUp, ChevronDown, CaseSensitive, Regex, WrapText, Clock, Copy, Trash2, Filter } from 'lucide-react'
+import { Play, Square, Download, Search, X, Terminal, RotateCcw, ChevronUp, ChevronDown, CaseSensitive, Regex, WrapText, Clock, Copy, Trash2, Filter, Braces } from 'lucide-react'
 import type { LogEntry, LogLevel } from './useLogBuffer'
 import { useLogSearch } from './useLogSearch'
-import { JsonLogLine } from './JsonLogLine'
+import { StructuredLogLine } from './StructuredLogLine'
 import { Tooltip } from '../ui/Tooltip'
 import {
   formatLogTimestamp,
@@ -65,6 +65,7 @@ export function LogCore({
     new Set(['error', 'warn', 'info', 'debug'])
   )
   const [showDownloadMenu, setShowDownloadMenu] = useState(false)
+  const [expandAllStructured, setExpandAllStructured] = useState(false)
 
   // Level-filtered entries
   // 'unknown' logs are shown when all 4 known levels are enabled (no active filtering)
@@ -83,6 +84,8 @@ export function LogCore({
     return counts
   }, [entries])
 
+  const hasStructuredEntries = useMemo(() => entries.some(e => e.isJson || e.isLogfmt), [entries])
+
   // Search
   const search = useLogSearch(levelFilteredEntries, virtuosoRef)
 
@@ -225,6 +228,20 @@ export function LogCore({
 
         <div className="flex-1" />
 
+        {/* Expand all structured logs toggle */}
+        {hasStructuredEntries && (
+          <Tooltip content={expandAllStructured ? 'Collapse all structured' : 'Expand all structured'} delay={TIP_DELAY} position="bottom">
+            <button
+              onClick={() => setExpandAllStructured(prev => !prev)}
+              className={`p-1.5 rounded transition-colors ${
+                expandAllStructured ? 'bg-blue-600/50 text-theme-text-primary' : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
+              }`}
+            >
+              <Braces className="w-4 h-4" />
+            </button>
+          </Tooltip>
+        )}
+
         {/* Timestamp toggle */}
         <Tooltip content={showTimestamps ? 'Hide timestamps' : 'Show timestamps'} delay={TIP_DELAY} position="bottom">
           <button
@@ -438,6 +455,7 @@ export function LogCore({
                 showTimestamp={showTimestamps}
                 isCurrentMatch={entry.id === currentHighlightId}
                 wordWrap={wordWrap}
+                defaultExpanded={expandAllStructured}
               />
             )}
             className="h-full font-mono text-xs"
@@ -483,6 +501,7 @@ function LogLine({
   showTimestamp,
   isCurrentMatch,
   wordWrap,
+  defaultExpanded,
 }: {
   entry: LogEntry
   searchQuery: string
@@ -492,6 +511,7 @@ function LogLine({
   showTimestamp: boolean
   isCurrentMatch: boolean
   wordWrap: boolean
+  defaultExpanded: boolean
 }) {
   const levelColor = getLevelColor(entry.level)
 
@@ -506,9 +526,15 @@ function LogLine({
         dangerouslySetInnerHTML={{ __html: highlighted }}
       />
     )
-  } else if (entry.isJson) {
+  } else if (entry.isJson || entry.isLogfmt) {
     contentElement = (
-      <JsonLogLine content={entry.content} level={entry.level} wordWrap={wordWrap} />
+      <StructuredLogLine
+        content={entry.content}
+        level={entry.level}
+        wordWrap={wordWrap}
+        isLogfmt={entry.isLogfmt}
+        defaultExpanded={defaultExpanded}
+      />
     )
   } else {
     const html = ansiToHtml(entry.content)

package/src/components/logs/StructuredLogLine.tsx

@@ -0,0 +1,168 @@
+import { useState, useMemo } from 'react'
+import { ChevronRight, ChevronDown } from 'lucide-react'
+import type { LogLevel } from './useLogBuffer'
+import {
+  getLevelColor,
+  highlightJson,
+  unescapeJsonStrings,
+  parseLogfmt,
+  SYNTAX_COLOR_KEY,
+  SYNTAX_COLOR_STRING,
+} from '../../utils/log-format'
+import { SEVERITY_BADGE_BORDERED } from '../../utils/badge-colors'
+
+interface StructuredLogLineProps {
+  content: string
+  level: LogLevel
+  wordWrap: boolean
+  isLogfmt?: boolean
+  defaultExpanded?: boolean
+}
+
+export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultExpanded }: StructuredLogLineProps) {
+  // null = user hasn't toggled this line; defers to defaultExpanded (global toggle)
+  const [localExpanded, setLocalExpanded] = useState<boolean | null>(null)
+  const expanded = localExpanded ?? defaultExpanded ?? false
+
+  const parsed = useMemo(() => {
+    try {
+      if (isLogfmt) {
+        return parseLogfmt(content)
+      }
+      return JSON.parse(content.trim())
+    } catch {
+      return null
+    }
+  }, [content, isLogfmt])
+
+  if (!parsed) {
+    return (
+      <span className={`${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'} ${getLevelColor(level)}`}>
+        {content}
+      </span>
+    )
+  }
+
+  const fieldCount = Object.keys(parsed).length
+
+  const toggle = () => setLocalExpanded(!expanded)
+  const chevron = expanded
+    ? <ChevronDown className="w-3 h-3 shrink-0 text-theme-text-tertiary" />
+    : <ChevronRight className="w-3 h-3 shrink-0 text-theme-text-tertiary" />
+
+  return (
+    <span>
+      {!expanded ? (
+        // Collapsed: entire summary line is clickable
+        <span
+          onClick={toggle}
+          className={`cursor-pointer hover:bg-theme-surface/50 rounded px-0.5 -ml-0.5 ${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}
+        >
+          <span className="inline-flex items-center align-middle mr-0.5">{chevron}</span>
+          <SummaryLine obj={parsed} />
+          <span className="text-theme-text-tertiary ml-1">{`{${fieldCount} fields}`}</span>
+        </span>
+      ) : (
+        // Expanded: summary header is clickable to collapse, JSON content is selectable
+        <>
+        <span
+          onClick={toggle}
+          className="cursor-pointer hover:bg-theme-surface/50 rounded px-0.5 -ml-0.5"
+        >
+          <span className="inline-flex items-center align-middle mr-0.5">{chevron}</span>
+          <SummaryLine obj={parsed} />
+          <span className="text-theme-text-tertiary ml-1">{`{${fieldCount} fields}`}</span>
+        </span>
+        <span className={`block ml-4 ${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}>
+          {isLogfmt ? (
+            <ExpandedLogfmt obj={parsed} />
+          ) : (
+            <span dangerouslySetInnerHTML={{
+              __html: highlightJson(unescapeJsonStrings(JSON.stringify(parsed, null, 2)))
+            }} />
+          )}
+        </span>
+        </>
+      )}
+    </span>
+  )
+}
+
+function SummaryLine({ obj }: { obj: Record<string, unknown> }) {
+  const lvl = obj.level ?? obj.severity ?? obj.lvl ?? nestedField(obj, 'log', 'level')
+  const msg = obj.msg ?? obj.message
+  const rawErr = obj.error ?? obj.err
+  const err = typeof rawErr === 'string'
+    ? rawErr
+    : nestedField(obj, 'error', 'message') ?? nestedField(obj, 'err', 'message')
+  const caller = obj.caller ?? obj.source
+
+  return (
+    <>
+      {lvl != null && (
+        <span className={`${getLevelBadgeColor(lvl)} text-[10px] font-semibold px-1 py-px rounded mr-1.5 inline-block`}>
+          {formatLevel(lvl)}
+        </span>
+      )}
+      {typeof msg === 'string' && (
+        <span className="text-theme-text-primary">{msg}</span>
+      )}
+      {typeof err === 'string' && (
+        <span className="text-red-400 ml-2">error={err}</span>
+      )}
+      {typeof caller === 'string' && (
+        <span className="text-theme-text-disabled ml-2">{caller}</span>
+      )}
+    </>
+  )
+}
+
+function ExpandedLogfmt({ obj }: { obj: Record<string, unknown> }) {
+  return (
+    <>
+      {Object.entries(obj).map(([key, val]) => (
+        <div key={key}>
+          <span style={{ color: SYNTAX_COLOR_KEY }}>{key}</span>
+          <span className="text-theme-text-tertiary">=</span>
+          <span style={{ color: SYNTAX_COLOR_STRING }}>{String(val)}</span>
+        </div>
+      ))}
+    </>
+  )
+}
+
+function nestedField(obj: Record<string, unknown>, parent: string, child: string): unknown {
+  const p = obj[parent]
+  if (p && typeof p === 'object' && !Array.isArray(p)) {
+    return (p as Record<string, unknown>)[child]
+  }
+  return undefined
+}
+
+function formatLevel(lvl: unknown): string {
+  if (typeof lvl === 'number') {
+    if (lvl >= 50) return 'ERR'
+    if (lvl >= 40) return 'WARN'
+    if (lvl >= 30) return 'INFO'
+    return 'DBG'
+  }
+  return String(lvl).toUpperCase()
+}
+
+function getLevelBadgeColor(lvl: unknown): string {
+  let normalized: string
+  if (typeof lvl === 'number') {
+    // Pino/bunyan numeric levels: 10=trace, 20=debug, 30=info, 40=warn, 50=error, 60=fatal
+    if (lvl >= 50) normalized = 'error'
+    else if (lvl >= 40) normalized = 'warn'
+    else if (lvl >= 30) normalized = 'info'
+    else normalized = 'debug'
+  } else {
+    normalized = String(lvl).toLowerCase()
+  }
+  if (/^(error|err|fatal|panic|critical|crit)$/.test(normalized)) return SEVERITY_BADGE_BORDERED.error
+  if (/^(warn|warning)$/.test(normalized)) return SEVERITY_BADGE_BORDERED.warning
+  if (/^(info|information|notice)$/.test(normalized)) return SEVERITY_BADGE_BORDERED.info
+  if (/^(debug|dbg|trace|verbose)$/.test(normalized)) return SEVERITY_BADGE_BORDERED.debug
+  return SEVERITY_BADGE_BORDERED.neutral
+}

package/src/components/logs/index.ts

@@ -5,7 +5,7 @@ export type { LogLevel, LogEntry } from './useLogBuffer'
 export { useLogSearch } from './useLogSearch'
 export { useLogStream } from './useLogStream'
 export type { LogStreamHandlers } from './useLogStream'
-export { JsonLogLine } from './JsonLogLine'
+export { StructuredLogLine } from './StructuredLogLine'
 export { ContainerSelect, LogRangeSelect } from './LogToolbarSelects'
 export { LogsViewer } from './LogsViewer'
 export type { LogsViewerProps, LogsFetchParams } from './LogsViewer'

package/src/components/logs/useLogBuffer.ts

@@ -1,4 +1,5 @@
 import { useState, useRef, useCallback } from 'react'
+import { isLogfmt } from '../../utils/log-format'
 
 export type LogLevel = 'error' | 'warn' | 'info' | 'debug' | 'unknown'
 
@@ -11,13 +12,14 @@ export interface LogEntry {
   podColor?: string
   level: LogLevel
   isJson: boolean
+  isLogfmt: boolean
 }
 
 const MAX_BUFFER_SIZE = 10_000
 
 /**
  * Detect log level from content using word-boundary matching.
- * For JSON logs, prefer the `level` or `severity` field.
+ * For JSON logs, prefer the `level`, `severity`, or `lvl` field.
  */
 export function detectLogLevel(content: string): LogLevel {
   // Fast path for JSON: check level/severity field
@@ -56,26 +58,30 @@ function isJsonContent(content: string): boolean {
   return trimmed[0] === '{' && trimmed[trimmed.length - 1] === '}'
 }
 
+type RawLogEntry = Omit<LogEntry, 'id' | 'level' | 'isJson' | 'isLogfmt'>
+
 interface UseLogBufferReturn {
   entries: LogEntry[]
-  append: (entry: Omit<LogEntry, 'id' | 'level' | 'isJson'>) => void
-  appendBatch: (entries: Omit<LogEntry, 'id' | 'level' | 'isJson'>[]) => void
-  set: (entries: Omit<LogEntry, 'id' | 'level' | 'isJson'>[]) => void
+  append: (entry: RawLogEntry) => void
+  appendBatch: (entries: RawLogEntry[]) => void
+  set: (entries: RawLogEntry[]) => void
   clear: () => void
 }
 
 export function useLogBuffer(): UseLogBufferReturn {
   const [entries, setEntries] = useState<LogEntry[]>([])
   const idCounter = useRef(0)
-  const pendingRef = useRef<Omit<LogEntry, 'id' | 'level' | 'isJson'>[]>([])
+  const pendingRef = useRef<RawLogEntry[]>([])
   const rafRef = useRef<number | null>(null)
 
-  const enrichEntry = useCallback((raw: Omit<LogEntry, 'id' | 'level' | 'isJson'>): LogEntry => {
+  const enrichEntry = useCallback((raw: RawLogEntry): LogEntry => {
+    const isJ = isJsonContent(raw.content)
     return {
       ...raw,
       id: idCounter.current++,
       level: detectLogLevel(raw.content),
-      isJson: isJsonContent(raw.content),
+      isJson: isJ,
+      isLogfmt: !isJ && isLogfmt(raw.content),
     }
   }, [])
 
@@ -95,21 +101,21 @@ export function useLogBuffer(): UseLogBufferReturn {
     })
   }, [enrichEntry])
 
-  const append = useCallback((entry: Omit<LogEntry, 'id' | 'level' | 'isJson'>) => {
+  const append = useCallback((entry: RawLogEntry) => {
     pendingRef.current.push(entry)
     if (rafRef.current === null) {
       rafRef.current = requestAnimationFrame(flushPending)
     }
   }, [flushPending])
 
-  const appendBatch = useCallback((batch: Omit<LogEntry, 'id' | 'level' | 'isJson'>[]) => {
+  const appendBatch = useCallback((batch: RawLogEntry[]) => {
     pendingRef.current.push(...batch)
     if (rafRef.current === null) {
       rafRef.current = requestAnimationFrame(flushPending)
     }
   }, [flushPending])
 
-  const set = useCallback((rawEntries: Omit<LogEntry, 'id' | 'level' | 'isJson'>[]) => {
+  const set = useCallback((rawEntries: RawLogEntry[]) => {
     // Cancel any pending RAF
     if (rafRef.current !== null) {
       cancelAnimationFrame(rafRef.current)

package/src/components/resources/ResourcesView.tsx

@@ -32,9 +32,9 @@ import type { NavigateToResource } from '../../utils/navigation'
 import { categorizeResources, CORE_RESOURCES } from '../../utils/api-resources'
 import {
   getPodStatus,
-  getPodReadiness,
   getPodRestarts,
   getPodProblems,
+  getContainerSquareStates,
   getWorkloadImages,
   getWorkloadConditions,
   getReplicaSetOwner,
@@ -114,6 +114,7 @@ import {
   getServiceAccountSecretCount,
   getRoleRuleCount,
   formatAge,
+  formatDuration,
   truncate,
   getCellFilterValue,
   parseColumnFilters,
@@ -136,6 +137,7 @@ import { CNPGClusterCell, CNPGBackupCell, CNPGScheduledBackupCell, CNPGPoolerCel
 import { VirtualServiceCell, DestinationRuleCell, IstioGatewayCell, ServiceEntryCell, PeerAuthenticationCell, AuthorizationPolicyCell } from './renderers/istio-cells'
 import { KnativeServiceCell, ConfigurationCell as KnativeConfigurationCell, RevisionCell as KnativeRevisionCell, RouteCell as KnativeRouteCell, BrokerCell, TriggerCell, EventTypeCell, PingSourceCell, ApiServerSourceCell, ContainerSourceCell, SinkBindingCell, ChannelCell, InMemoryChannelCell, SubscriptionCell, SequenceCell, ParallelCell, DomainMappingCell, ServerlessServiceCell, KnativeIngressCell, KnativeCertificateCell } from './renderers/knative-cells'
 import { IngressRouteCell, MiddlewareCell, TraefikServiceCell, ServersTransportCell, TLSOptionCell } from './renderers/traefik-cells'
+import { HTTPProxyCell } from './renderers/contour-cells'
 import { useRegisterShortcut, useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 
 // Pod problem filter options (special multi-select, not a single column value)
@@ -242,7 +244,7 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
   pods: [
     { key: 'name', label: 'Name' },
     { key: 'namespace', label: 'Namespace', width: 'w-48' },
-    { key: 'ready', label: 'Ready', width: 'w-16' },
+    { key: 'containers', label: 'Containers', width: 'w-28' },
     { key: 'status', label: 'Status', width: 'w-40' },
     { key: 'cpu', label: 'CPU', width: 'w-40', tooltip: 'CPU usage / limit (marker = request)' },
     { key: 'memory', label: 'Memory', width: 'w-40', tooltip: 'Memory usage / limit (marker = request)' },
@@ -1318,6 +1320,17 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'namespace', label: 'Namespace', width: 'w-36 shrink-0' },
     { key: 'age', label: 'Age', width: 'w-16 shrink-0' },
   ],
+  // Contour
+  httpproxies: [
+    { key: 'name', label: 'Name', width: 'min-w-40' },
+    { key: 'namespace', label: 'Namespace', width: 'w-36 shrink-0' },
+    { key: 'fqdn', label: 'FQDN', width: 'min-w-44' },
+    { key: 'routes', label: 'Routes', width: 'w-20 shrink-0' },
+    { key: 'includes', label: 'Includes', width: 'w-24 shrink-0' },
+    { key: 'tls', label: 'TLS', width: 'w-14 shrink-0' },
+    { key: 'status', label: 'Status', width: 'w-24 shrink-0' },
+    { key: 'age', label: 'Age', width: 'w-16 shrink-0' },
+  ],
 }
 
 // Map (plural, group) → KNOWN_COLUMNS key for kinds that collide with core K8s
@@ -1344,6 +1357,8 @@ function normalizeKindToPlural(kind: string, group?: string): string {
   if (!lower.endsWith('s') && KNOWN_COLUMNS[lower + 's']) return lower + 's'
   // Try 'es' for kinds ending in s/sh/ch/x/z (e.g., "ingress" → "ingresses")
   if (KNOWN_COLUMNS[lower + 'es']) return lower + 'es'
+  // Try 'ies' for kinds ending in y (e.g., "httpproxy" → "httpproxies")
+  if (lower.endsWith('y') && KNOWN_COLUMNS[lower.slice(0, -1) + 'ies']) return lower.slice(0, -1) + 'ies'
   return lower
 }
 
@@ -2441,13 +2456,15 @@ export function ResourcesView({
         return meta.creationTimestamp ? new Date(meta.creationTimestamp).getTime() : 0
       case 'status':
         return status.phase || ''
-      case 'ready':
-        // For pods, use ready/total ratio
+      case 'containers':
+        // Pod containers column — sort by readiness ratio
         if (status.containerStatuses) {
           const ready = status.containerStatuses.filter((c: any) => c.ready).length
           const total = status.containerStatuses.length
           return total > 0 ? ready / total : 0
         }
+        return 0
+      case 'ready':
         // For DaemonSets, use numberReady/desiredNumberScheduled
         if (kindLower === 'daemonsets') {
           const desired = status.desiredNumberScheduled ?? 0
@@ -2629,13 +2646,13 @@ export function ResourcesView({
       const kindLower = normalizeKindToPlural(selectedKind.name, selectedKind.group)
 
       if (kindLower === 'pods') {
-        // Completed pods at bottom
+        // Completed pods at bottom, then sort by name for stability across refreshes
         result = [...result].sort((a: any, b: any) => {
           const aCompleted = a.status?.phase === 'Succeeded'
           const bCompleted = b.status?.phase === 'Succeeded'
           if (aCompleted && !bCompleted) return 1
           if (!aCompleted && bCompleted) return -1
-          return 0
+          return (a.metadata?.name || '').localeCompare(b.metadata?.name || '')
         })
       } else if (kindLower === 'daemonsets') {
         // DaemonSets with 0 desired (empty/inactive) at bottom, then sort by ready desc
@@ -2659,11 +2676,12 @@ export function ResourcesView({
           return (a.metadata?.name || '').localeCompare(b.metadata?.name || '')
         })
       } else if (kindLower === 'events') {
-        // Events: most recently seen first
+        // Events: most recently seen first, name tiebreaker for same-timestamp stability
         result = [...result].sort((a: any, b: any) => {
           const aTime = new Date(a.lastTimestamp || a.metadata?.creationTimestamp || 0).getTime()
           const bTime = new Date(b.lastTimestamp || b.metadata?.creationTimestamp || 0).getTime()
-          return bTime - aTime
+          if (bTime !== aTime) return bTime - aTime
+          return (a.metadata?.name || '').localeCompare(b.metadata?.name || '')
         })
       } else if (['deployments', 'statefulsets', 'replicasets'].includes(kindLower)) {
         // Workloads: unhealthy first, scaled-to-zero at bottom
@@ -2686,6 +2704,11 @@ export function ResourcesView({
           // Finally sort by name
           return (a.metadata?.name || '').localeCompare(b.metadata?.name || '')
         })
+      } else {
+        // All other kinds: sort by name for stability across refreshes
+        result = [...result].sort((a: any, b: any) =>
+          (a.metadata?.name || '').localeCompare(b.metadata?.name || '')
+        )
       }
     }
 
@@ -4209,6 +4232,9 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion }
       return <ServersTransportCell resource={resource} column={column} />
     case 'tlsoptions':
       return <TLSOptionCell resource={resource} column={column} />
+    // Contour
+    case 'httpproxies':
+      return <HTTPProxyCell resource={resource} column={column} />
     default:
       // Generic cell for CRDs and unknown resources
       return <GenericCell resource={resource} column={column} />
@@ -4277,27 +4303,113 @@ function GenericCell({ resource, column }: { resource: any; column: string }) {
 // ============================================================================
 
 function PodCell({ resource, column }: { resource: any; column: string }) {
-  const phase = resource.status?.phase
-  const isCompleted = phase === 'Succeeded'
   const metrics = useContext(MetricsContext)
   const { onNavigate: navigate } = useContext(ResourcesViewDataContext)
 
   switch (column) {
-    case 'ready': {
-      const { ready, total } = getPodReadiness(resource)
-      const allReady = ready === total && total > 0
-      // Completed pods (Succeeded) show neutral color, not red
-      const color = isCompleted
-        ? 'text-theme-text-secondary'
-        : allReady
-          ? 'text-green-400'
-          : ready > 0
-            ? 'text-yellow-400'
-            : 'text-red-400'
+    case 'containers': {
+      const squares = getContainerSquareStates(resource)
+      const hasInit = squares.some(s => s.isInit)
       return (
-        <span className={clsx('text-sm font-medium', color)}>
-          {ready}/{total}
-        </span>
+        <div className="flex items-center gap-1">
+          {squares.map((sq, i) => {
+            const showSeparator = hasInit && i > 0 && sq.isInit !== squares[i - 1].isInit
+            const bgClass =
+              sq.status === 'ready' ? 'bg-green-500' :
+              sq.status === 'completed' ? 'bg-theme-text-tertiary/30 border border-theme-text-tertiary' :
+              sq.status === 'running' ? 'bg-yellow-500' :
+              sq.status === 'waiting' ? 'bg-red-500' :
+              sq.status === 'terminated' ? 'bg-red-500' :
+              'bg-theme-text-tertiary/30 border border-dashed border-theme-text-tertiary'
+            const ringClass = sq.restarts > 0 ? 'ring-2 ring-orange-400' : ''
+            const dotColor =
+              sq.status === 'ready' ? 'bg-green-500' :
+              sq.status === 'completed' ? 'bg-theme-text-tertiary' :
+              sq.status === 'running' ? 'bg-yellow-500' :
+              sq.status === 'waiting' || sq.status === 'terminated' ? 'bg-red-500' :
+              'bg-theme-text-tertiary'
+            // Relative time helper
+            const timeAgo = (dateStr?: string) => {
+              if (!dateStr) return null
+              const ms = Date.now() - new Date(dateStr).getTime()
+              if (isNaN(ms) || ms < 0) return null
+              if (ms < 60000) return 'just now'
+              return formatDuration(ms) + ' ago'
+            }
+            const runDuration = (start?: string, end?: string) => {
+              if (!start || !end) return null
+              const ms = new Date(end).getTime() - new Date(start).getTime()
+              return ms > 0 ? formatDuration(ms, true) : null
+            }
+            const stateLabel =
+              sq.status === 'ready' ? 'Running' :
+              sq.status === 'completed' ? 'Completed' :
+              sq.status === 'running' ? 'Running (not ready)' :
+              sq.status === 'waiting' ? 'Waiting' :
+              sq.status === 'terminated' ? 'Terminated' : 'Unknown'
+            const uptime = sq.status === 'ready' || sq.status === 'running' ? timeAgo(sq.startedAt) : null
+            const duration = (sq.status === 'completed' || sq.status === 'terminated') ? runDuration(sq.startedAt, sq.finishedAt) : null
+            const lt = sq.lastTermination
+            const restartRecencyMs = lt?.finishedAt ? Date.now() - new Date(lt.finishedAt).getTime() : null
+            const restartColor = restartRecencyMs !== null && restartRecencyMs < 600000 ? 'text-red-400' : restartRecencyMs !== null && restartRecencyMs < 3600000 ? 'text-yellow-400' : 'text-orange-400'
+            const tooltipContent = (
+              <div className="whitespace-normal space-y-1">
+                {/* Header: dot + name + state */}
+                <div className="flex items-center gap-1.5">
+                  <div className={clsx('w-2 h-2 rounded-full shrink-0', dotColor)} />
+                  <span className="font-medium">{sq.isInit ? <span className="text-theme-text-tertiary font-normal">init · </span> : ''}{sq.name}</span>
+                  <span className="text-theme-text-tertiary">·</span>
+                  <span className="text-theme-text-secondary">{stateLabel}</span>
+                </div>
+                {/* Reason (when different from state label) */}
+                {sq.reason && sq.reason !== stateLabel && (
+                  <div className={clsx(
+                    'font-medium',
+                    (sq.status === 'waiting' || sq.status === 'terminated') ? 'text-red-400' : 'text-theme-text-secondary'
+                  )}>{sq.reason}</div>
+                )}
+                {/* Message — truncated for tooltip */}
+                {sq.message && (
+                  <div className="text-theme-text-secondary text-[11px] leading-tight">
+                    {sq.message.length > 120 ? sq.message.slice(0, 120) + '...' : sq.message}
+                  </div>
+                )}
+                {/* Exit code + uptime/duration on same line */}
+                {(sq.exitCode !== undefined && sq.status !== 'ready' && sq.status !== 'running') || uptime || duration ? (
+                  <div className="text-theme-text-tertiary flex items-center gap-1.5">
+                    {sq.exitCode !== undefined && sq.status !== 'ready' && sq.status !== 'running' && (
+                      <span className={sq.exitCode !== 0 ? 'text-red-400' : ''}>exit {sq.exitCode}</span>
+                    )}
+                    {uptime && <span>up {uptime.replace(' ago', '')}</span>}
+                    {duration && <span>ran {duration}</span>}
+                  </div>
+                ) : null}
+                {/* Restarts + last crash info */}
+                {sq.restarts > 0 && (
+                  <div className={clsx('border-t border-theme-border/50 pt-1 space-y-0.5', restartColor)}>
+                    <div className="flex items-center gap-1.5">
+                      <span>{sq.restarts} restart{sq.restarts !== 1 ? 's' : ''}</span>
+                      {lt?.finishedAt && <span className="text-theme-text-tertiary">· last {timeAgo(lt.finishedAt)}</span>}
+                    </div>
+                    {lt?.reason && (
+                      <div className="text-theme-text-tertiary">
+                        {lt.reason}{lt.exitCode !== undefined && lt.exitCode !== 0 ? ` (exit ${lt.exitCode})` : ''}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )
+            return (
+              <React.Fragment key={i}>
+                {showSeparator && <div className="w-px h-3 bg-theme-text-tertiary/40 mx-0.5" />}
+                <Tooltip content={tooltipContent} className="whitespace-normal max-w-xs">
+                  <div className={clsx('w-2.5 h-2.5 rounded-sm', bgClass, ringClass)} />
+                </Tooltip>
+              </React.Fragment>
+            )
+          })}
+        </div>
       )
     }
     case 'status': {