@skyhook-io/k8s-ui 1.8.9 → 1.8.11

package/src/components/issues/ResourceIssuesSection.tsx

@@ -1,26 +1,8 @@
-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 { diagnosticRoleLabel, diagnosticFactLabel, confidenceTitle } from './diagnostic'
+import { useMemo, useState } from 'react'
+import { AlertTriangle } from 'lucide-react'
+import { IssueRow } from './IssuesView'
+import { compareIssues, 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 intentionally just 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,
@@ -29,117 +11,35 @@ export function ResourceIssuesSection({
   /** When provided, related resources in a causal link become clickable. */
   onResourceClick?: (ref: IssueResourceRef) => void
 }) {
-  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) => {
+    <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}
-              <CausalContext issue={issue} onResourceClick={onResourceClick} />
-            </div>
+            <IssueRow
+              key={key}
+              issue={issue}
+              open={openId === key}
+              onToggle={() => setOpenId((cur) => (cur === key ? null : key))}
+              onResourceClick={onResourceClick}
+            />
           )
         })}
-      </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
-  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>
-        {ctx.role ? <span className="badge-sm text-[10px] text-theme-text-secondary">{diagnosticRoleLabel(ctx.role)}</span> : null}
-      </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>
-  )
+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,
@@ -16,10 +18,9 @@ export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagno
 export {
   ISSUE_SEVERITY_LABEL,
   ISSUE_SEVERITY_BADGE_CLASS,
-  ISSUE_SEVERITY_FILL_CLASS,
   ISSUE_SEVERITY_TEXT_CLASS,
+  ISSUE_SEVERITY_FILL_CLASS,
   ISSUE_SEVERITY_RAIL_CLASS,
-  groupBadgeClass,
   categoryLabel,
   groupLabel,
 } from './severity';

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

@@ -1,9 +1,10 @@
-import { describe, it, expect } from 'vitest'
+import { afterEach, describe, it, expect, vi } from 'vitest'
 import { createElement } from 'react'
 import { renderToString } from 'react-dom/server'
 import { compareIssues, subjectRef, memberRef, normalizeImagePullMessage, issueMessageParts, type Issue } from './types'
-import { categoryLabel, groupLabel, groupBadgeClass } from './severity'
+import { categoryLabel, groupBadgeClass, groupLabel } from './severity'
 import { IssueRow } from './IssuesView'
+import { issueTiming } from './issue-timing'
 
 const base: Issue = {
   id: 'id-0',
@@ -18,6 +19,10 @@ const base: Issue = {
 }
 const mk = (o: Partial<Issue>): Issue => ({ ...base, ...o })
 
+afterEach(() => {
+  vi.useRealTimers()
+})
+
 describe('compareIssues', () => {
   it('orders critical before warning regardless of observed age', () => {
     const warn = mk({ id: 'w', severity: 'warning', first_seen: '2026-05-01T00:00:00Z' }) // newer
@@ -62,8 +67,145 @@ describe('category/group label fallbacks', () => {
     expect(groupLabel('runtime')).toBe('Runtime')
     expect(groupLabel('some_future_group')).toBe('Some future group')
   })
-  it('groupBadgeClass falls back to a non-empty neutral class for an unknown group', () => {
-    expect(groupBadgeClass('totally_unknown_group')).toBeTruthy()
+  it('keeps ordinary group chips neutral and emphasizes control-plane/unknown groups', () => {
+    expect(groupBadgeClass('runtime')).toContain('text-theme-text-secondary')
+    expect(groupBadgeClass('runtime')).not.toContain('ring-theme-border-light')
+    expect(groupBadgeClass('control_plane')).toContain('text-theme-text-primary')
+    expect(groupBadgeClass('control_plane')).toContain('ring-theme-border-light')
+    expect(groupBadgeClass('unknown')).toContain('ring-theme-border-light')
+    expect(groupBadgeClass('some_future_group')).toContain('text-theme-text-secondary')
+    expect(groupBadgeClass('some_future_group')).not.toContain('ring-theme-border-light')
+  })
+})
+
+describe('IssueRow', () => {
+  it('keeps relative age visible and adds deployment timing as a secondary tag', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-30T12:00:00Z'))
+
+    const html = renderToString(createElement(IssueRow, {
+      issue: mk({
+        id: 'baseline',
+        first_seen: '2026-06-28T12:00:00Z',
+        issue_timing: 'started_at_resource_creation',
+      }),
+      open: false,
+      onToggle: () => undefined,
+    }))
+
+    expect(html).toContain('2d')
+    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' }),
+      open: false,
+      onToggle: () => undefined,
+    }))
+
+    expect(html).toContain('Control plane')
+    expect(html).toContain(groupBadgeClass('control_plane'))
+  })
+})
+
+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()
   })
 })
 

package/src/components/issues/severity.ts

@@ -1,11 +1,29 @@
 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,
+  TONE_TEXT_CLASS,
+  type SeverityTone,
+} from '../ui/severity-tone';
 
 // Visual language for the 2-tier Issues severity. critical = red, warning =
 // amber. Issues and Checks are different severity axes but must read as one
-// product — both pull from the canonical Badge severity tones
-// (BADGE_SEVERITY_COLORS), so their pills match each other and every status
-// badge elsewhere.
+// product, so the color strings are shared via the tone module; here we only map
+// each tier onto its tone. The pill still pulls from the canonical Badge tones
+// so it matches every status badge elsewhere.
+const ISSUE_SEVERITY_TONE: Record<IssueSeverity, SeverityTone> = {
+  critical: 'red',
+  warning: 'amber',
+};
+
+const byTone = <T,>(toneMap: Record<SeverityTone, T>): Record<IssueSeverity, T> => ({
+  critical: toneMap[ISSUE_SEVERITY_TONE.critical],
+  warning: toneMap[ISSUE_SEVERITY_TONE.warning],
+});
 
 export const ISSUE_SEVERITY_LABEL: Record<IssueSeverity, string> = {
   critical: 'Critical',
@@ -18,39 +36,18 @@ export const ISSUE_SEVERITY_BADGE_CLASS: Record<IssueSeverity, string> = {
   warning: sev.warning,
 };
 
-// Solid fill — dots + the proportional distribution bar segments.
-export const ISSUE_SEVERITY_FILL_CLASS: Record<IssueSeverity, string> = {
-  critical: 'bg-red-500',
-  warning: 'bg-amber-500',
-};
+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);
 
-export const ISSUE_SEVERITY_TEXT_CLASS: Record<IssueSeverity, string> = {
-  critical: 'text-red-600 dark:text-red-400',
-  warning: 'text-amber-600 dark:text-amber-400',
-};
+const GROUP_CHIP_EMPHASIS_CLASS = 'inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-semibold leading-tight bg-theme-elevated text-theme-text-primary ring-1 ring-theme-border-light';
 
-// Left accent rail on a queue row — the scan-down severity cue.
-export const ISSUE_SEVERITY_RAIL_CLASS: Record<IssueSeverity, string> = {
-  critical: 'border-l-red-500 hover:bg-red-50/40 dark:hover:bg-red-950/20',
-  warning: 'border-l-amber-500 hover:bg-amber-50/30 dark:hover:bg-amber-950/15',
-};
-
-// Category-group accent — the quiet classification tag (severity is the loud
-// one). One hue per group; unknown/unmapped falls back to a neutral theme tag.
-const GROUP_BADGE_CLASS: Record<string, string> = {
-  scheduling: 'bg-violet-50 text-violet-700 ring-1 ring-violet-200 dark:bg-violet-950/40 dark:text-violet-300 dark:ring-violet-900',
-  startup: 'bg-sky-50 text-sky-700 ring-1 ring-sky-200 dark:bg-sky-950/40 dark:text-sky-300 dark:ring-sky-900',
-  runtime: 'bg-rose-50 text-rose-700 ring-1 ring-rose-200 dark:bg-rose-950/40 dark:text-rose-300 dark:ring-rose-900',
-  configuration: 'bg-teal-50 text-teal-700 ring-1 ring-teal-200 dark:bg-teal-950/40 dark:text-teal-300 dark:ring-teal-900',
-  networking: 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200 dark:bg-indigo-950/40 dark:text-indigo-300 dark:ring-indigo-900',
-  storage: 'bg-cyan-50 text-cyan-700 ring-1 ring-cyan-200 dark:bg-cyan-950/40 dark:text-cyan-300 dark:ring-cyan-900',
-  scaling: 'bg-fuchsia-50 text-fuchsia-700 ring-1 ring-fuchsia-200 dark:bg-fuchsia-950/40 dark:text-fuchsia-300 dark:ring-fuchsia-900',
-  security: 'bg-amber-50 text-amber-700 ring-1 ring-amber-200 dark:bg-amber-950/40 dark:text-amber-300 dark:ring-amber-900',
-  control_plane: 'bg-slate-100 text-slate-600 ring-1 ring-slate-200 dark:bg-slate-800/60 dark:text-slate-300 dark:ring-slate-700',
-};
+const EMPHASIZED_GROUPS = new Set(['control_plane', 'unknown']);
 
 export function groupBadgeClass(group: string): string {
-  return GROUP_BADGE_CLASS[group] ?? 'bg-theme-elevated text-theme-text-secondary ring-1 ring-theme-border';
+  return EMPHASIZED_GROUPS.has(group) ? GROUP_CHIP_EMPHASIS_CLASS : NEUTRAL_CHIP_CLASS;
 }
 
 // Display labels. The server emits raw snake_case category/group enums (so a

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}
     />