@skyhook-io/k8s-ui 1.8.10 → 1.8.12

package/src/components/issues/ResourceIssuesSection.tsx

@@ -1,163 +1,65 @@
-import { AlertTriangle, ExternalLink } from 'lucide-react'
-import { Section } from '../ui/drawer-components'
-import { Badge } from '../ui/Badge'
-import type { Issue, IssueResourceRef } from './types'
-import { categoryLabel } from './severity'
-import { diagnosticFactLabel, confidenceTitle, incidentParentLabel } from './diagnostic'
+import { useMemo, useState } from 'react'
+import { AlertTriangle } from 'lucide-react'
+import { kindToPlural } from '../../utils/navigation'
+import { IssueRow } from './IssuesView'
+import { compareIssues, subjectRef, type Issue, type IssueResourceRef } from './types'
 
-/**
- * ResourceIssuesSection — the compact "Operational Issues" block for the resource
- * detail. Renders the live, diagnosed Issues that touch one resource (its own +,
- * for a workload, its owned pods' issues, server-rolled-up via RelatedIssues).
- * The diagnosis sibling of IssuesView's queue row — same Cause/Action vocabulary,
- * stripped of the queue chrome (accordion, scope copy, fan-out expansion).
- *
- * Header mirrors the queue: the plain `categoryLabel` is the operator-facing
- * headline and the raw `reason` rides alongside as a muted signal (so the K8s
- * jargon is available but not the lead). Body is primarily the plain
- * `cause` (which names the offending object) + the `Next step` — the diagnosis
- * and the fix. The raw `message`/evidence stays in the queue + MCP where the
- * locator detail is wanted; inline it mostly restated the cause or the category,
- * so it's omitted to keep the card scannable. (`message` is the body fallback
- * only for categories that don't yet emit a `cause`.)
- */
 export function ResourceIssuesSection({
   issues,
   onResourceClick,
+  subjectResource,
 }: {
   issues: Issue[] | undefined
   /** When provided, related resources in a causal link become clickable. */
   onResourceClick?: (ref: IssueResourceRef) => void
+  /** The resource this section is embedded under. When an issue's subject IS
+   *  this resource, its redundant "Subject" deep-link is suppressed — the drawer
+   *  header already names it. Omit (e.g. the standalone fleet queue) to always
+   *  show the subject. */
+  subjectResource?: IssueResourceRef
 }) {
-  if (!issues || issues.length === 0) return null
+  const sorted = useMemo(() => [...(issues ?? [])].sort(compareIssues), [issues])
+  const [openId, setOpenId] = useState<string | null>(null)
+
+  if (sorted.length === 0) return null
+
   return (
-    <Section title={`Operational Issues (${issues.length})`} icon={AlertTriangle} defaultExpanded>
-      <div className="space-y-3">
-        {issues.map((issue) => {
-          const parent = issue.incident_parent
+    <section className="space-y-2">
+      <div className="flex items-center gap-2 px-1 text-xs font-semibold uppercase tracking-wide text-theme-text-secondary">
+        <AlertTriangle className="h-4 w-4 text-theme-text-tertiary" aria-hidden />
+        <span>Operational issues ({sorted.length})</span>
+      </div>
+      <ol className="flex flex-col gap-1.5">
+        {sorted.map((issue) => {
+          const key = issueKey(issue)
           return (
-            <div key={issue.id} className="card-inner">
-              <div className="mb-1 flex min-w-0 items-baseline gap-2">
-                <Badge severity={issue.severity === 'critical' ? 'error' : 'warning'} size="sm">
-                  {issue.severity}
-                </Badge>
-                <span className="shrink-0 text-sm font-medium text-theme-text-primary">{categoryLabel(issue.category)}</span>
-                {issue.reason ? (
-                  <span className="min-w-0 flex-1 truncate text-xs text-theme-text-tertiary">{issue.reason}</span>
-                ) : null}
-                {issue.count ? (
-                  <span className="shrink-0 text-xs text-theme-text-tertiary tabular-nums">· {issue.count} affected</span>
-                ) : null}
-              </div>
-              {issue.cause ? (
-                <p className="text-sm leading-relaxed text-theme-text-secondary">{issue.cause}</p>
-              ) : issue.message ? (
-                <p className="text-sm leading-relaxed text-theme-text-secondary">{issue.message}</p>
-              ) : null}
-              {issue.action ? (
-                <p className="mt-1 text-sm leading-relaxed text-theme-text-secondary">
-                  <span className="font-medium text-theme-text-primary">Next step: </span>
-                  {issue.action}
-                </p>
-              ) : null}
-              {issue.remediation_kind === 'create-namespace' && issue.remediation_target ? (
-                <p className="mt-1 text-xs text-theme-text-tertiary">
-                  Suggested fix: create namespace{' '}
-                  <code className="rounded bg-theme-elevated px-1 font-mono">{issue.remediation_target}</code> — apply it from the GitOps detail page.
-                </p>
-              ) : null}
-              {parent ? (
-                <p className="mt-1 text-xs text-theme-text-tertiary">
-                  {incidentParentLabel(parent.fact_type, parent.confidence)}:{' '}
-                  {onResourceClick ? (
-                    <button
-                      type="button"
-                      onClick={() => onResourceClick(parent.ref)}
-                      className="group inline-flex items-center gap-1 text-left font-mono hover:text-theme-text-secondary"
-                      title={confidenceTitle(parent.confidence ?? '')}
-                    >
-                      {parent.ref.kind} / {parent.ref.name}
-                      <ExternalLink className="h-3 w-3 opacity-0 group-hover:opacity-100" />
-                    </button>
-                  ) : (
-                    <span className="font-mono">{parent.ref.kind} / {parent.ref.name}</span>
-                  )}
-                </p>
-              ) : null}
-              <CausalContext issue={issue} onResourceClick={onResourceClick} />
-            </div>
+            <IssueRow
+              key={key}
+              issue={issue}
+              open={openId === key}
+              onToggle={() => setOpenId((cur) => (cur === key ? null : key))}
+              onResourceClick={onResourceClick}
+              hideSubject={subjectResource ? sameResource(subjectRef(issue), subjectResource) : false}
+            />
           )
         })}
-      </div>
-    </Section>
+      </ol>
+    </section>
   )
 }
 
-/**
- * CausalContext — the compact, drawer-density rendering of an issue's
- * cross-subject causal links (DiagnosticContext). Shows only the linking facts
- * (those carrying a confidence tier or related issues) — the queue's IssuesView
- * renders the fuller context with clickable resource navigation; here the related
- * resources are shown as plain identifiers to keep the resource panel scannable.
- */
-function CausalContext({ issue, onResourceClick }: { issue: Issue; onResourceClick?: (ref: IssueResourceRef) => void }) {
-  const ctx = issue.diagnostic_context
-  const links = ctx?.facts?.filter((f) => f.confidence || (f.related_issues && f.related_issues.length > 0)) ?? []
-  if (!ctx || links.length === 0) return null
+// Identity match tolerant of singular/plural + casing on kind (the subject ref
+// carries the wire kind, the host typically passes the plural API name) — group
+// is deliberately ignored: a per-resource issue feed is already scoped to one
+// resource, and kind+namespace+name uniquely identifies it there.
+export function sameResource(a: IssueResourceRef, b: IssueResourceRef): boolean {
   return (
-    <div className="mt-2 border-t border-theme-border/60 pt-2">
-      <div className="mb-1 flex items-center gap-2">
-        <span className="text-[10px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Context</span>
-      </div>
-      <ul className="space-y-1.5">
-        {links.map((fact, idx) => (
-          <li key={`${fact.type}-${idx}`} className="text-xs">
-            <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
-              <span className="font-medium text-theme-text-secondary">{diagnosticFactLabel(fact.type)}</span>
-              {fact.confidence ? (
-                <span className="badge-sm text-[10px] text-theme-text-tertiary" title={confidenceTitle(fact.confidence)}>
-                  {fact.confidence} confidence
-                </span>
-              ) : null}
-              {fact.message ? <span className="text-theme-text-tertiary">{fact.message}</span> : null}
-            </div>
-            {fact.related_issues && fact.related_issues.length > 0 ? (
-              <ul className="mt-0.5 space-y-0.5 pl-3">
-                {fact.related_issues.map((rel, ri) => {
-                  const label = (
-                    <>
-                      <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary">{rel.ref.kind}</span>{' '}
-                      <span className="font-mono">
-                        {rel.ref.namespace ? `${rel.ref.namespace} / ` : ''}
-                        {rel.ref.name}
-                      </span>
-                      {rel.count && rel.count > 1 ? (
-                        <span className="ml-1 tabular-nums" title={`${rel.count} affected resources grouped under this issue`}>· {rel.count} affected</span>
-                      ) : null}
-                    </>
-                  )
-                  return (
-                    <li key={ri} className="text-theme-text-tertiary">
-                      {onResourceClick ? (
-                        <button
-                          type="button"
-                          onClick={() => onResourceClick(rel.ref)}
-                          className="group inline-flex items-center gap-1 text-left hover:text-theme-text-secondary"
-                        >
-                          {label}
-                          <ExternalLink className="h-3 w-3 opacity-0 group-hover:opacity-100" />
-                        </button>
-                      ) : (
-                        label
-                      )}
-                    </li>
-                  )
-                })}
-              </ul>
-            ) : null}
-          </li>
-        ))}
-      </ul>
-    </div>
+    a.name === b.name &&
+    (a.namespace ?? '') === (b.namespace ?? '') &&
+    kindToPlural(a.kind).toLowerCase() === kindToPlural(b.kind).toLowerCase()
   )
 }
+
+function issueKey(issue: Issue): string {
+  return `${issue.cluster_id ?? ''}:${issue.id}`
+}

package/src/components/issues/index.ts

@@ -5,6 +5,8 @@
 export { IssueRow, IssuesView } from './IssuesView';
 export type { IssueRowProps, IssueRowSlotContext, IssuesViewProps } from './IssuesView';
 export { ResourceIssuesSection } from './ResourceIssuesSection';
+export { issueTiming } from './issue-timing';
+export type { IssueTimingDisplay, IssueTimingDisplayKind } from './issue-timing';
 export {
   ISSUE_SEVERITIES,
   ISSUE_SEVERITY_RANK,
@@ -17,6 +19,7 @@ export {
   ISSUE_SEVERITY_LABEL,
   ISSUE_SEVERITY_BADGE_CLASS,
   ISSUE_SEVERITY_TEXT_CLASS,
+  ISSUE_SEVERITY_FILL_CLASS,
   ISSUE_SEVERITY_RAIL_CLASS,
   categoryLabel,
   groupLabel,

package/src/components/issues/issue-timing.ts

@@ -0,0 +1,53 @@
+import { formatRelativeAgeTime } from '../../utils/format';
+import { isDeploymentLikeWorkloadKind } from '../../types';
+import type { Issue } from './types';
+
+export type IssueTimingDisplayKind = 'creation' | 'regression';
+
+export interface IssueTimingDisplay {
+  kind: IssueTimingDisplayKind;
+  chip: string;
+  meta: string;
+  tooltip: string;
+}
+
+function isDeploymentLikeCreation(issue: Issue): boolean {
+  const group = issue.group ?? '';
+  if (issue.kind === 'Pod') {
+    return issue.issue_timing_basis === 'pod_creation'
+      || issue.issue_timing_basis === 'owner_condition';
+  }
+  return isDeploymentLikeWorkloadKind(issue.kind, group);
+}
+
+export function issueTiming(issue: Issue): IssueTimingDisplay | null {
+  switch (issue.issue_timing) {
+    case 'started_after_resource_was_healthy': {
+      const started = issue.first_seen ? `started ${formatRelativeAgeTime(issue.first_seen)} after being healthy` : 'started after being healthy';
+      return {
+        kind: 'regression',
+        chip: 'after healthy',
+        meta: started,
+        tooltip: 'Previously healthy before this failing signal.',
+      };
+    }
+    case 'started_at_resource_creation': {
+      if (isDeploymentLikeCreation(issue)) {
+        return {
+          kind: 'creation',
+          chip: 'since deploy',
+          meta: 'present since deployment or first reconciliation',
+          tooltip: 'Failing signal began during deployment or first reconciliation.',
+        };
+      }
+      return {
+        kind: 'creation',
+        chip: 'since creation',
+        meta: 'present since creation or first reconciliation',
+        tooltip: 'Failing signal began during resource creation or first reconciliation.',
+      };
+    }
+    default:
+      return null;
+  }
+}

package/src/components/issues/issues.test.ts

@@ -4,6 +4,7 @@ import { renderToString } from 'react-dom/server'
 import { compareIssues, subjectRef, memberRef, normalizeImagePullMessage, issueMessageParts, type Issue } from './types'
 import { categoryLabel, groupBadgeClass, groupLabel } from './severity'
 import { IssueRow } from './IssuesView'
+import { issueTiming } from './issue-timing'
 
 const base: Issue = {
   id: 'id-0',
@@ -78,7 +79,7 @@ describe('category/group label fallbacks', () => {
 })
 
 describe('IssueRow', () => {
-  it('keeps relative age visible and adds since-deploy as a secondary tag', () => {
+  it('keeps relative age visible and adds deployment timing as a secondary tag', () => {
     vi.useFakeTimers()
     vi.setSystemTime(new Date('2026-06-30T12:00:00Z'))
 
@@ -96,6 +97,25 @@ describe('IssueRow', () => {
     expect(html).toContain('since deploy')
   })
 
+  it('promotes after-healthy timing in the collapsed row', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-30T12:00:00Z'))
+
+    const html = renderToString(createElement(IssueRow, {
+      issue: mk({
+        id: 'regression',
+        first_seen: '2026-06-30T10:00:00Z',
+        issue_timing: 'started_after_resource_was_healthy',
+        issue_timing_basis: 'condition',
+      }),
+      open: false,
+      onToggle: () => undefined,
+    }))
+
+    expect(html).toContain('2h')
+    expect(html).toContain('after healthy')
+  })
+
   it('uses the category-group chip class in the queue row', () => {
     const html = renderToString(createElement(IssueRow, {
       issue: mk({ category_group: 'control_plane' }),
@@ -108,6 +128,87 @@ describe('IssueRow', () => {
   })
 })
 
+describe('issueTiming', () => {
+  it('keeps deployment wording for deployment-like creation failures', () => {
+    expect(issueTiming(mk({
+      kind: 'Deployment',
+      group: 'apps',
+      issue_timing: 'started_at_resource_creation',
+      issue_timing_basis: 'condition',
+    }))).toMatchObject({
+      kind: 'creation',
+      chip: 'since deploy',
+      meta: 'present since deployment or first reconciliation',
+    })
+
+    expect(issueTiming(mk({
+      kind: 'Rollout',
+      group: 'argoproj.io',
+      issue_timing: 'started_at_resource_creation',
+      issue_timing_basis: 'condition',
+    }))).toMatchObject({
+      kind: 'creation',
+      chip: 'since deploy',
+      meta: 'present since deployment or first reconciliation',
+    })
+  })
+
+  it('uses deployment wording for pod issues only when workload timing evidence is present', () => {
+    expect(issueTiming(mk({
+      kind: 'Pod',
+      issue_timing: 'started_at_resource_creation',
+      issue_timing_basis: 'pod_creation',
+    }))).toMatchObject({
+      kind: 'creation',
+      chip: 'since deploy',
+    })
+
+    expect(issueTiming(mk({
+      kind: 'Pod',
+      issue_timing: 'started_at_resource_creation',
+      issue_timing_basis: 'phase',
+    }))).toMatchObject({
+      kind: 'creation',
+      chip: 'since creation',
+    })
+  })
+
+  it('uses resource creation wording for non-deployment creation failures', () => {
+    expect(issueTiming(mk({
+      kind: 'PersistentVolumeClaim',
+      issue_timing: 'started_at_resource_creation',
+      issue_timing_basis: 'phase',
+    }))).toMatchObject({
+      kind: 'creation',
+      chip: 'since creation',
+      meta: 'present since creation or first reconciliation',
+    })
+  })
+
+  it('describes after-healthy timing without implying root cause or safety', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-30T12:00:00Z'))
+
+    const display = issueTiming(mk({
+      first_seen: '2026-06-30T10:00:00Z',
+      issue_timing: 'started_after_resource_was_healthy',
+      issue_timing_basis: 'condition',
+    }))
+
+    expect(display).toMatchObject({
+      kind: 'regression',
+      chip: 'after healthy',
+      meta: 'started 2h ago after being healthy',
+      tooltip: 'Previously healthy before this failing signal.',
+    })
+    expect(`${display?.chip} ${display?.meta} ${display?.tooltip}`).not.toMatch(/baseline|safe|ignore/i)
+  })
+
+  it('returns null when there is no confident timing signal', () => {
+    expect(issueTiming(mk({ issue_timing: undefined, issue_timing_basis: undefined }))).toBeNull()
+  })
+})
+
 describe('subjectRef / memberRef', () => {
   it('subjectRef defaults empty group/namespace and threads cluster_id', () => {
     const issue = mk({ cluster_id: 'cl_1', kind: 'Deployment', name: 'web' }) // no group/namespace

package/src/components/issues/severity.ts

@@ -2,6 +2,7 @@ import type { IssueSeverity } from './types';
 import { BADGE_SEVERITY_COLORS as sev } from '../ui/Badge';
 import { NEUTRAL_CHIP_CLASS } from '../ui/CardSection';
 import {
+  TONE_FILL_CLASS,
   TONE_HEADER_BAND_CLASS,
   TONE_RAIL_CLASS,
   TONE_SOLID_CLASS,
@@ -36,6 +37,7 @@ export const ISSUE_SEVERITY_BADGE_CLASS: Record<IssueSeverity, string> = {
 };
 
 export const ISSUE_SEVERITY_TEXT_CLASS = byTone(TONE_TEXT_CLASS);
+export const ISSUE_SEVERITY_FILL_CLASS = byTone(TONE_FILL_CLASS);
 export const ISSUE_SEVERITY_RAIL_CLASS = byTone(TONE_RAIL_CLASS);
 export const ISSUE_SEVERITY_SOLID_CLASS = byTone(TONE_SOLID_CLASS);
 export const ISSUE_SEVERITY_HEADER_BAND_CLASS = byTone(TONE_HEADER_BAND_CLASS);
@@ -99,6 +101,7 @@ const CATEGORY_LABEL: Record<string, string> = {
   gitops_operation_failed: 'GitOps operation failed',
   gitops_out_of_sync: 'GitOps out of sync',
   gitops_health_degraded: 'GitOps health degraded',
+  gitops_stale: 'GitOps comparisons stale',
   helm_release_failed: 'Helm release failed',
   webhook_backend_down: 'Webhook backend down',
   control_plane_not_ready: 'Control plane not ready',

package/src/components/logs/LogCore.tsx

@@ -5,6 +5,7 @@ import type { LogEntry, LogLevel } from './useLogBuffer'
 import { useLogSearch } from './useLogSearch'
 import { StructuredLogLine } from './StructuredLogLine'
 import { Tooltip } from '../ui/Tooltip'
+import { Input } from '../ui/Input'
 import {
   formatLogTimestamp,
   highlightSearchMatches,
@@ -37,6 +38,7 @@ interface LogCoreProps {
   toolbarExtra?: ToolbarExtraRenderer
   showPodName?: boolean
   emptyMessage?: string
+  emptyCommand?: string | null
   errorMessage?: string | null
   /**
    * Hard override for the viewer palette. When set, the viewer stays pinned to
@@ -88,6 +90,8 @@ const STRUCTURED_MODE_DESCRIPTIONS: Record<StructuredMode, string> = {
   raw: 'Original log line, unparsed',
 }
 
+const EMPTY_STATE_CLASS = 'flex-1 flex flex-col items-center justify-center gap-2 px-4 text-center'
+
 const TIMESTAMP_FORMAT_SHORT_LABELS: Record<TimestampFormat, string> = {
   'time-local': 'Local time',
   'time-utc': 'UTC time',
@@ -124,6 +128,7 @@ export function LogCore({
   toolbarExtra,
   showPodName = false,
   emptyMessage = 'No logs available',
+  emptyCommand,
   errorMessage,
   forceDark,
 }: LogCoreProps) {
@@ -694,8 +699,7 @@ export function LogCore({
       {search.isOpen && (
         <div className={`flex items-center gap-2 px-3 py-2 border-b ${palette.border} ${palette.toolbarBgMuted}`}>
           <Search className={`w-4 h-4 ${palette.textSecondary} shrink-0`} />
-          <input
-            type="text"
+          <Input
             value={search.query}
             onChange={(e) => search.setQuery(e.target.value)}
             onKeyDown={(e) => {
@@ -800,14 +804,20 @@ export function LogCore({
           </div>
         </div>
       ) : errorMessage ? (
-        <div className={`flex-1 flex flex-col items-center justify-center gap-2 ${palette.textError}`}>
+        <div className={`${EMPTY_STATE_CLASS} ${palette.textError}`}>
           <Terminal className="w-8 h-8" />
           <span>{errorMessage}</span>
         </div>
       ) : groupedEntries.length === 0 ? (
-        <div className={`flex-1 flex flex-col items-center justify-center gap-2 ${palette.textTertiary}`}>
+        <div className={`${EMPTY_STATE_CLASS} ${palette.textTertiary}`}>
           <Terminal className="w-8 h-8" />
           <span>{emptyMessage}</span>
+          {emptyCommand && (
+            <button type="button" onClick={() => navigator.clipboard.writeText(emptyCommand).catch(() => {})} className={`mt-2 inline-flex max-w-[80%] items-center gap-2 rounded border px-3 py-2 font-mono text-xs ${palette.border} ${palette.toolbarBg}`} title="Copy recovery command">
+              <code className="truncate">{emptyCommand}</code>
+              <Copy className="h-3.5 w-3.5 shrink-0" />
+            </button>
+          )}
         </div>
       ) : (
         <div className="flex-1 relative">

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -27,6 +27,9 @@ export interface WorkloadLogsFetchParams {
 export interface WorkloadLogsResult {
   pods: WorkloadPodInfo[]
   logs: WorkloadRawLog[]
+  emptyReason?: string
+  emptyMessage?: string
+  command?: string
 }
 
 export interface WorkloadLogsViewerProps {
@@ -61,6 +64,8 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
   const [selectedPods, setSelectedPods] = useState<Set<string>>(new Set())
   const [isLoading, setIsLoading] = useState(false)
   const [fetchError, setFetchError] = useState<string | null>(null)
+  const [emptyMessage, setEmptyMessage] = useState<string | null>(null)
+  const [emptyCommand, setEmptyCommand] = useState<string | null>(null)
   const [showPodFilter, setShowPodFilter] = useState(false)
   const [logRange, setLogRange] = useState('100')
   const { showError, showSuccess } = useToast()
@@ -95,9 +100,10 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
     setFetchError(null)
     try {
       const result = await fetchAll({ container: selectedContainer || undefined, tailLines, sinceSeconds })
-      // Older backends marshal empty results as null rather than [].
       const resultPods = result.pods ?? []
       const resultLogs = result.logs ?? []
+      setEmptyMessage(result.emptyMessage || null)
+      setEmptyCommand(result.command || null)
 
       podColorIndexRef.current = new Map(resultPods.map((pod, i) => [pod.name, i]))
       setPods(resultPods)
@@ -157,6 +163,8 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
             const nextPods = data.pods as WorkloadPodInfo[]
             podColorIndexRef.current = new Map(nextPods.map((pod, i) => [pod.name, i]))
             setPods(nextPods)
+            setEmptyMessage(data.emptyMessage || null)
+            setEmptyCommand(data.command || null)
             setSelectedPods(prev => (
               prev.size === 0 ? new Set(nextPods.map((p: WorkloadPodInfo) => p.name)) : prev
             ))
@@ -180,8 +188,12 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
               const existing = new Set(prev.map(p => p.name))
               const toAdd = newPods.filter(p => !existing.has(p.name))
               if (toAdd.length === 0) return prev
-              return [...prev, ...toAdd]
+              const next = [...prev, ...toAdd]
+              podColorIndexRef.current = new Map(next.map((pod, i) => [pod.name, i]))
+              return next
             })
+            setEmptyMessage(null)
+            setEmptyCommand(null)
             setSelectedPods(prev => {
               const next = new Set(prev)
               newPods.forEach(p => next.add(p.name))
@@ -197,6 +209,10 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
             // while new pod logs start flowing in
           }
         },
+        onEnd: (data: any) => {
+          if (data?.emptyMessage) setEmptyMessage(data.emptyMessage)
+          if (data?.command) setEmptyCommand(data.command)
+        },
       },
       'Workload log stream connection failed',
     )
@@ -299,8 +315,13 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
             </div>
             {pods.map(pod => {
               const dotBg = palette.podColors[(podColorIndex.get(pod.name) ?? 0) % palette.podColors.length].bg
+              const primaryLabel = pod.stepName || pod.name
+              const secondaryLabel = pod.stepName ? pod.name : ''
+              const stateLabel = pod.stepPhase || pod.phase || (pod.ready ? 'Ready' : 'Not Ready')
               let readyColor: string
-              if (pod.ready) {
+              if (stateLabel === 'Failed' || stateLabel === 'Error') {
+                readyColor = isDark ? 'text-red-400' : 'text-red-700'
+              } else if (pod.ready || stateLabel === 'Succeeded') {
                 readyColor = isDark ? 'text-emerald-400' : 'text-emerald-700'
               } else {
                 readyColor = isDark ? 'text-amber-400' : 'text-amber-700'
@@ -314,9 +335,12 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
                     className={`w-3 h-3 rounded ${palette.borderLight} ${palette.elevatedBg} text-blue-500 focus:ring-blue-500 focus:ring-offset-0`}
                   />
                   <span className={`w-2 h-2 rounded-full ${dotBg}`} />
-                  <span className={`text-xs ${palette.textPrimary} truncate flex-1`}>{pod.name}</span>
+                  <span className="min-w-0 flex-1">
+                    <span className={`block truncate text-xs ${palette.textPrimary}`}>{primaryLabel}</span>
+                    {secondaryLabel && <span className={`block truncate text-[10px] ${palette.textTertiary}`}>{secondaryLabel}</span>}
+                  </span>
                   <span className={`text-xs ${readyColor}`}>
-                    {pod.ready ? 'Ready' : 'Not Ready'}
+                    {stateLabel}
                   </span>
                 </label>
               )
@@ -360,7 +384,8 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
       onClear={clear}
       toolbarExtra={renderToolbarExtra}
       showPodName
-      emptyMessage={pods.length === 0 ? 'No pods found' : 'No logs available'}
+      emptyMessage={emptyMessage || (pods.length === 0 ? 'No pods found' : 'No logs available')}
+      emptyCommand={emptyCommand}
       errorMessage={fetchError || (entries.length === 0 ? streamError : null)}
       forceDark={forceDark}
     />

package/src/components/logs/useLogStream.ts

@@ -10,6 +10,8 @@ export interface LogStreamHandlers {
   onPodAdded?: (data: unknown) => void
   /** Called when pods are terminated during streaming (workload logs only) */
   onPodRemoved?: (data: unknown) => void
+  /** Called when the server ends the stream cleanly */
+  onEnd?: (data: unknown) => void
 }
 
 /**
@@ -90,11 +92,16 @@ export function useLogStream() {
       }
     })
 
-    es.addEventListener('end', () => {
+    es.addEventListener('end', (event) => {
       if (!isCurrent()) return
       endedRef.current = true
       setIsStreaming(false)
       setConnecting(false)
+      if (handlers.onEnd) {
+        try { handlers.onEnd(JSON.parse((event as MessageEvent).data)) } catch (e) {
+          console.error('Failed to parse end event:', e)
+        }
+      }
     })
 
     es.addEventListener('error', (event) => {