@skyhook-io/k8s-ui 1.16.3 → 1.17.1

package/src/components/logs/WorkloadLogsViewer.notice.test.tsx

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+import { ToastProvider } from '../ui/Toast'
+import { WorkloadLogsViewer } from './WorkloadLogsViewer'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+class FakeEventSource extends EventTarget {
+  static last: FakeEventSource | undefined
+  constructor(readonly url: string) {
+    super()
+    FakeEventSource.last = this
+  }
+  close() {}
+  emit(type: string, data: unknown) {
+    this.dispatchEvent(new MessageEvent(type, { data: JSON.stringify(data) }))
+  }
+}
+
+let root: Root
+let element: HTMLDivElement
+beforeEach(() => {
+  vi.stubGlobal('EventSource', FakeEventSource)
+  element = document.createElement('div')
+  document.body.appendChild(element)
+  root = createRoot(element)
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+  element.remove()
+  vi.unstubAllGlobals()
+})
+
+it('clears the unreadable-sources notice when the stream ends', async () => {
+  const notice = '1 source could not be read: web-0/app: Kubernetes did not return this container\'s logs'
+  await act(async () =>
+    root.render(
+      <ToastProvider>
+        <WorkloadLogsViewer
+          name="web"
+          fetchAll={async () => ({ pods: [], logs: [] })}
+          createStream={() => new EventSource('/stream')}
+          autoStream
+        />
+      </ToastProvider>,
+    ),
+  )
+  const source = FakeEventSource.last
+  if (!source) throw new Error('stream was not opened')
+
+  await act(async () => source.emit('connected', { pods: [{ name: 'web-0', containers: ['app'] }] }))
+  await act(async () => source.emit('notice', { notice }))
+  expect(element.textContent).toContain(notice)
+
+  await act(async () => source.emit('end', { reason: 'no pods found' }))
+  expect(element.textContent).not.toContain(notice)
+})

package/src/components/logs/WorkloadLogsViewer.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+import { WorkloadLogsViewer, type WorkloadLogsResult } from './WorkloadLogsViewer'
+vi.mock('../ui/Toast', () => ({ useToast: () => ({ showError: vi.fn(), showSuccess: vi.fn() }) }))
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+it('uses a host empty state and disables source controls until a source is read', async () => {
+  const host = document.createElement('div'); const root = createRoot(host)
+  let result: WorkloadLogsResult = { pods: [], logs: [], emptyMessage: 'No instance Pods yet' }
+  const stream = vi.fn()
+  const fetchAll = vi.fn(async () => result)
+  await act(async () => root.render(<WorkloadLogsViewer name="analytics" fetchAll={fetchAll} createStream={stream} disableSourceControlsWithoutSource emptySourceState={<><p>The first instance cannot start.</p><a href="?tab=overview">Overview’s problem</a></>} />))
+  expect(host.textContent).toContain('The first instance cannot start')
+  expect(host.querySelector('a')?.getAttribute('href')).toBe('?tab=overview')
+  expect(host.querySelector('fieldset')?.disabled).toBe(true)
+  expect([...host.querySelectorAll('select')].every((el) => el.matches(':disabled'))).toBe(true)
+  const streamButton = [...host.querySelectorAll<HTMLButtonElement>('button')].find((el) => el.textContent === 'Stream')!
+  expect(streamButton.disabled).toBe(true)
+  act(() => streamButton.click())
+  expect(stream).not.toHaveBeenCalled()
+  result = { pods: [{ name: 'analytics-1', containers: ['postgres'], ready: true }], logs: [] }
+  await act(async () => [...host.querySelectorAll<HTMLButtonElement>('button')].find((el) => el.querySelector('.lucide-rotate-ccw'))!.click())
+  expect(host.querySelector('fieldset')?.disabled).toBe(false)
+  expect(streamButton.disabled).toBe(false)
+  expect(host.textContent).not.toContain('The first instance cannot start')
+  await act(async () => root.unmount())
+})
+
+it('keeps streaming available for hosts that wait for Pods to appear', async () => {
+  const host = document.createElement('div'); const root = createRoot(host)
+  await act(async () => root.render(<WorkloadLogsViewer name="pending-job" fetchAll={async () => ({ pods: [], logs: [] })} createStream={vi.fn()} />))
+  expect([...host.querySelectorAll<HTMLButtonElement>('button')].find((el) => el.textContent === 'Stream')?.disabled).toBe(false)
+  expect(host.querySelector('fieldset')?.disabled).toBe(false)
+  await act(async () => root.unmount())
+})
+
+
+it('keeps the all-container choice available by default', async () => {
+  const host = document.createElement('div'); const root = createRoot(host)
+  const fetchAll = vi.fn(async () => ({ pods: [{ name: 'analytics-1', containers: ['postgres', 'plugin-barman-cloud'], ready: true }], logs: [] }))
+  await act(async () => root.render(<WorkloadLogsViewer name="analytics" fetchAll={fetchAll} />))
+  const select = host.querySelector<HTMLSelectElement>('select')!
+  expect([...select.options].map((option) => option.value)).toEqual(['', 'postgres', 'plugin-barman-cloud'])
+  expect(select.options[0].text).toBe('All containers')
+  expect(fetchAll).toHaveBeenCalledWith(expect.objectContaining({ container: undefined }))
+  await act(async () => root.unmount())
+})
+
+it('offers only named containers when the backend cannot read all containers', async () => {
+  const host = document.createElement('div'); const root = createRoot(host)
+  const fetchAll = vi.fn(async (_params: unknown) => ({ pods: [{ name: 'analytics-1', containers: ['postgres', 'plugin-barman-cloud'], ready: true }], logs: [] }))
+  await act(async () => root.render(<WorkloadLogsViewer name="analytics" fetchAll={fetchAll} initialContainer="postgres" allowAllContainers={false} />))
+  const select = host.querySelector<HTMLSelectElement>('select')!
+  expect([...select.options].map((option) => option.value)).toEqual(['postgres', 'plugin-barman-cloud'])
+  expect(host.textContent).not.toContain('All containers')
+  expect(select.value).toBe('postgres')
+  expect(fetchAll).toHaveBeenCalledWith(expect.objectContaining({ container: 'postgres' }))
+  await act(async () => {
+    select.value = 'plugin-barman-cloud'
+    select.dispatchEvent(new Event('change', { bubbles: true }))
+  })
+  expect(fetchAll).toHaveBeenLastCalledWith(expect.objectContaining({ container: 'plugin-barman-cloud' }))
+  await act(async () => root.unmount())
+})

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { Filter, ChevronDown } from 'lucide-react'
+import { useState, useEffect, useCallback, useMemo, useRef, type ReactNode } from 'react'
+import { Filter, ChevronDown, AlertTriangle } from 'lucide-react'
 import { parseLogRange } from '../../utils/log-format'
 import { triggerDownload } from '../../utils/download'
 import { useLogBuffer } from './useLogBuffer'
@@ -10,6 +10,7 @@ import type { LogExportPayload } from '../../utils/log-export'
 import type { LogPalette } from './log-palette'
 import type { WorkloadPodInfo } from '../../types'
 import { useToast } from '../ui/Toast'
+import { toneTextClass } from '../ui/status-tone'
 
 export interface WorkloadRawLog {
   pod: string
@@ -38,6 +39,8 @@ export interface WorkloadLogsResult {
 }
 
 export interface WorkloadLogsViewerProps {
+  /** Disable streaming and the source filters while no log source exists. Off by default: streams can wait for Pods to appear. */
+  disableSourceControlsWithoutSource?: boolean
   /** Workload name — used for the download filename */
   name: string
   /**
@@ -65,14 +68,20 @@ export interface WorkloadLogsViewerProps {
   autoStream?: boolean
   /** Pods selected when the pod list first loads; all pods when empty or none match. */
   initialPods?: string[]
+  /** Container selected on mount; all containers when unset. */
+  initialContainer?: string
+  /** Whether the backend supports reading all containers. Defaults to true; set initialContainer when false. */
+  allowAllContainers?: boolean
+  /** Rendered only when the loaded source list is empty. */
+  emptySourceState?: ReactNode
 }
 
-export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark, defaultDark, autoStream = false, initialPods }: WorkloadLogsViewerProps) {
+export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark, defaultDark, autoStream = false, initialPods, initialContainer, allowAllContainers = true, emptySourceState, disableSourceControlsWithoutSource = false }: WorkloadLogsViewerProps) {
   const initialSelection = (names: string[]) => {
     const wanted = names.filter((n) => initialPods?.includes(n))
     return new Set(wanted.length > 0 ? wanted : names)
   }
-  const [selectedContainer, setSelectedContainer] = useState<string>('')
+  const [selectedContainer, setSelectedContainer] = useState<string>(initialContainer ?? '')
   const [pods, setPods] = useState<WorkloadPodInfo[]>([])
   const [selectedPods, setSelectedPods] = useState<Set<string>>(new Set())
   const [isLoading, setIsLoading] = useState(false)
@@ -92,6 +101,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
   const { isStreaming, streamError, connecting, startStreaming, stopStreaming } = useLogStream()
 
   const willAutoStream = autoStream && !!createStream
+  const sourceUnavailable = disableSourceControlsWithoutSource && pods.length === 0
   // null sentinel so the initial selectedContainer ('' = all) still arms once.
   const autoStartedForRef = useRef<string | null>(null)
   const userStoppedRef = useRef(false)
@@ -246,7 +256,12 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
             // while new pod logs start flowing in
           }
         },
+        onNotice: (data: unknown) => {
+          const notice = typeof data === 'object' && data !== null && 'notice' in data ? data.notice : ''
+          setNotice(typeof notice === 'string' ? notice : '')
+        },
         onEnd: (data: any) => {
+          setNotice('')
           if (data?.emptyMessage) setEmptyMessage(data.emptyMessage)
           if (data?.command) setEmptyCommand(data.command)
         },
@@ -312,10 +327,11 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
   const renderToolbarExtra = ({ isDark, palette }: { isDark: boolean; palette: LogPalette }) => (
     <>
       {/* Pod filter */}
+      <fieldset disabled={sourceUnavailable} className="flex items-center gap-2 disabled:opacity-50">
       <div className="relative">
         <button
           onClick={() => setShowPodFilter(v => !v)}
-          className={`flex items-center gap-1.5 px-2 py-1.5 text-xs rounded transition-colors ${
+          className={`flex items-center gap-1.5 px-2 py-1.5 text-xs rounded whitespace-nowrap transition-colors ${
             showPodFilter ? palette.toolbarActive : `${palette.elevatedBg} ${palette.textSecondary} ${palette.hoverBg}`
           }`}
         >
@@ -371,7 +387,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
         containers={allContainers}
         value={selectedContainer}
         onChange={setSelectedContainer}
-        includeAll
+        includeAll={allowAllContainers}
         isDark={isDark}
       />
 
@@ -381,8 +397,10 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
         lineOptions={[50, 100, 500, 1000]}
         tooltip="How many logs to load per pod — by line count or time range"
         isDark={isDark}
-        disabled={isStreaming}
+        disabled={isStreaming || sourceUnavailable}
+        disabledReason={sourceUnavailable ? 'No log source is available yet' : undefined}
       />
+      </fieldset>
     </>
   )
 
@@ -392,8 +410,23 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-    {notice && <div role="status" className="shrink-0 border-b border-theme-border bg-theme-elevated px-3 py-2 text-xs text-theme-text-secondary">{notice}</div>}
-    {capturedAt && <div className="shrink-0 border-b border-theme-border px-3 py-1 text-xs text-theme-text-secondary">Snapshot captured {new Date(capturedAt).toLocaleTimeString()}</div>}
+    {/* One status line. A notice says what the snapshot could not show, so it
+        stays marked; the capture time alone is quiet. */}
+    {(notice || capturedAt) && (
+      <div
+        role="status"
+        className={`flex shrink-0 flex-wrap items-baseline gap-x-2 border-b border-theme-border px-3 py-1 text-xs ${notice ? 'bg-theme-elevated text-theme-text-secondary' : 'text-theme-text-tertiary'}`}
+      >
+        {capturedAt && <span className="whitespace-nowrap">Snapshot {new Date(capturedAt).toLocaleTimeString()}</span>}
+        {capturedAt && notice && <span aria-hidden>·</span>}
+        {notice && (
+          <span className="inline-flex min-w-0 items-baseline gap-1.5">
+            <AlertTriangle className={`h-3 w-3 shrink-0 self-center ${toneTextClass('degraded')}`} aria-hidden />
+            <span>{notice}</span>
+          </span>
+        )}
+      </div>
+    )}
     {(fetchError || streamError) && entries.length > 0 && <div role="alert" className="shrink-0 border-b border-theme-border bg-theme-surface px-3 py-2 text-xs text-theme-text-secondary">{fetchError || streamError} · Previously loaded logs remain below.</div>}
     <div className="min-h-0 flex-1"><LogCore
       entries={filteredEntries}
@@ -401,13 +434,14 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
       isLoading={isLoading || isConnecting}
       isStreaming={isStreaming}
       onStartStream={createStream ? handleStartStreaming : undefined}
+      sourceUnavailable={sourceUnavailable}
       onStopStream={handleStopStreaming}
       onRefresh={loadLogs}
       onDownload={downloadLogs}
       onClear={clear}
       toolbarExtra={renderToolbarExtra}
       showPodName
-      emptyMessage={emptyMessage || (pods.length === 0 ? 'No pods found' : 'No logs available')}
+      emptyMessage={pods.length === 0 && emptySourceState ? emptySourceState : emptyMessage || (pods.length === 0 ? 'No pods found' : 'No logs available')}
       emptyCommand={emptyCommand}
       errorMessage={entries.length === 0 ? fetchError || streamError : null}
       forceDark={forceDark}

package/src/components/logs/useLogBuffer.test.ts

@@ -14,4 +14,12 @@ describe('detectLogLevel with CloudNativePG records', () => {
     expect(detectLogLevel(JSON.stringify({ level: 'error', msg: 'request failed', record: { error_severity: 20 } }))).toBe('error')
     expect(detectLogLevel(JSON.stringify({ level: 'error', msg: 'x', record: { error_severity: 'minor' } }))).toBe('error')
   })
+
+  it.each([
+    { msg: 'record' },
+    { logger: 'worker', msg: 'record' },
+    { logger: 'postgres', msg: 'wrapper message' },
+  ])('does not override an unrelated workload severity: %j', (fields) => {
+    expect(detectLogLevel(JSON.stringify({ level: 'info', ...fields, record: { error_severity: 'FATAL', message: 'unrelated nested text' } }))).toBe('info')
+  })
 })

package/src/components/logs/useLogStream.ts

@@ -10,10 +10,23 @@ export interface LogStreamHandlers {
   onPodAdded?: (data: unknown) => void
   /** Called when pods are terminated during streaming (workload logs only) */
   onPodRemoved?: (data: unknown) => void
+  /** Called when the set of sources the stream cannot read changes (workload logs only) */
+  onNotice?: (data: unknown) => void
   /** Called when the server ends the stream cleanly */
   onEnd?: (data: unknown) => void
 }
 
+function errorCodeOf(event: Event): string | null {
+  if (!(event instanceof MessageEvent) || typeof event.data !== 'string') return null
+  try {
+    const data: unknown = JSON.parse(event.data)
+    if (typeof data === 'object' && data !== null && 'error_code' in data && typeof data.error_code === 'string') return data.error_code
+  } catch {
+    // Not JSON: no code.
+  }
+  return null
+}
+
 /**
  * Manages an SSE log stream: EventSource lifecycle, isStreaming state, cleanup.
  * Callers provide a factory function that creates the EventSource with current params.
@@ -22,6 +35,8 @@ export function useLogStream() {
   const [isStreaming, setIsStreaming] = useState(false)
   // Set when the connection fails (and not on a clean end — see endedRef).
   const [streamError, setStreamError] = useState<string | null>(null)
+  // The server's error_code for that failure, when it sent one.
+  const [streamErrorCode, setStreamErrorCode] = useState<string | null>(null)
   // True from a start attempt until the stream first settles (connected / end /
   // error / stop). Lets callers show a connecting spinner that won't reappear
   // after a clean end. Starts true so an auto-stream viewer paints the spinner
@@ -38,6 +53,7 @@ export function useLogStream() {
     setIsStreaming(false)
     setConnecting(false)
     setStreamError(null)
+    setStreamErrorCode(null)
   }, [])
 
   const startStreaming = useCallback((
@@ -48,6 +64,7 @@ export function useLogStream() {
     eventSourceRef.current?.close()
     endedRef.current = false
     setStreamError(null)
+    setStreamErrorCode(null)
     setConnecting(true)
     const es = create()
     // Ignore events from a superseded source: closing/replacing an EventSource
@@ -92,6 +109,15 @@ export function useLogStream() {
       }
     })
 
+    es.addEventListener('notice', (event) => {
+      if (!isCurrent()) return
+      if (handlers.onNotice) {
+        try { handlers.onNotice(JSON.parse((event as MessageEvent).data)) } catch (e) {
+          console.error('Failed to parse notice event:', e)
+        }
+      }
+    })
+
     es.addEventListener('end', (event) => {
       if (!isCurrent()) return
       endedRef.current = true
@@ -113,6 +139,7 @@ export function useLogStream() {
       // 'end'; that's not a failure, so don't log it or surface it.
       if (endedRef.current) return
       setStreamError(handleSSEError(event, errorContext, () => {}))
+      setStreamErrorCode(errorCodeOf(event))
     })
 
     eventSourceRef.current = es
@@ -121,5 +148,5 @@ export function useLogStream() {
   // Cleanup on unmount
   useEffect(() => () => { eventSourceRef.current?.close() }, [])
 
-  return { isStreaming, streamError, connecting, startStreaming, stopStreaming }
+  return { isStreaming, streamError, streamErrorCode, connecting, startStreaming, stopStreaming }
 }

package/src/components/problems/index.ts

@@ -0,0 +1 @@
+export * from './problems'

package/src/components/problems/problems.test.tsx

@@ -0,0 +1,63 @@
+import { describe, expect, expectTypeOf, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { ProblemMeta, WorkspaceProblemCallout, ProblemList, problemOriginLabel, type WorkspaceProblem } from './problems'
+
+const details = (kind: string) => ({
+  id: 'p',
+  tone: 'degraded' as const,
+  category: 'availability',
+  title: 'Something needs a look',
+  subject: { kind, group: 'example.io', namespace: 'ns', name: 'child-1' },
+})
+const problem = (kind: string): Extract<WorkspaceProblem, { source: 'issue' }> => ({ ...details(kind), source: 'issue' })
+
+describe('ProblemMeta', () => {
+  it('names the subject only when it is not the workspace root kind', () => {
+    expect(renderToStaticMarkup(<ProblemMeta problem={problem('Backup')} rootKind="Cluster" />)).toContain('Backup')
+    expect(renderToStaticMarkup(<ProblemMeta problem={problem('Cluster')} rootKind="Cluster" />)).not.toContain('child-1')
+  })
+})
+
+describe('problemOriginLabel', () => {
+  it('says who measured a measurement, and never calls an issue generic', () => {
+    expect(problemOriginLabel({ ...details('Cluster'), source: 'measurement', measuredBy: 'Prometheus' }).label).toBe('Measured by Prometheus')
+    expect(problemOriginLabel(problem('Cluster')).label).toBe('Detected by Radar')
+  })
+})
+
+it('keeps original scheduler evidence behind a closed disclosure in callouts and lists', () => {
+  const p = { ...problem('Pod'), detail: 'both nodes have reached their Pod limit', rawDetailLabel: 'Scheduler message', rawDetail: '0/2 nodes are available: 2 Too many pods.' }
+  for (const node of [<WorkspaceProblemCallout problem={p} rootKind="Cluster" />, <ProblemList problems={[p]} rootKind="Cluster" />]) {
+    const html = renderToStaticMarkup(node)
+    expect(html).toContain(p.detail)
+    expect(html).toContain(p.rawDetail)
+    expect(html).toContain('Scheduler message')
+    expect(html).toContain('aria-expanded="false"')
+  }
+  expect(renderToStaticMarkup(<WorkspaceProblemCallout problem={problem('Pod')} rootKind="Cluster" />)).not.toContain('Scheduler message')
+})
+
+it('uses a generic label for raw evidence from another controller', () => {
+  const p = { ...problem('Deployment'), rawDetail: 'Progress deadline exceeded.' }
+  expect(renderToStaticMarkup(<WorkspaceProblemCallout problem={p} rootKind="Application" />)).toContain('Original evidence')
+})
+
+it('keeps source-specific provenance fields exclusive in the public type', () => {
+  type Details = ReturnType<typeof details>
+  expectTypeOf<Details & { source: 'issue'; measuredBy: string }>().not.toMatchTypeOf<WorkspaceProblem>()
+  expectTypeOf<Details & { source: 'measurement'; origin: { label: string } }>().not.toMatchTypeOf<WorkspaceProblem>()
+  expectTypeOf<Details & { source: 'audit'; origin: { label: string } }>().not.toMatchTypeOf<WorkspaceProblem>()
+})
+
+it('preserves alert and unknown tones in callouts and compact lists', () => {
+  for (const tone of ['alert', 'unknown'] as const) {
+    const p = { ...problem('Pod'), tone }
+    const callout = renderToStaticMarkup(<WorkspaceProblemCallout problem={p} rootKind="Cluster" />)
+    expect(callout).toContain(`status-${tone}`)
+    const list = renderToStaticMarkup(<ProblemList problems={[p]} rootKind="Cluster" />)
+    expect(list).toContain(tone === 'alert' ? 'bg-orange-500' : 'bg-slate-400')
+    expect(list).toContain(tone === 'alert' ? 'text-orange-600' : 'text-theme-text-tertiary')
+  }
+  type HealthyProblem = Omit<ReturnType<typeof details>, 'tone'> & { source: 'issue'; tone: 'healthy' }
+  expectTypeOf<HealthyProblem>().not.toMatchTypeOf<WorkspaceProblem>()
+})

package/src/components/problems/problems.tsx

@@ -0,0 +1,165 @@
+import { createContext, useContext, type ReactNode } from 'react'
+import { clsx } from 'clsx'
+import type { HealthLevel } from '../resources/resource-utils'
+import type { ResourceRef } from '../../types/core'
+import { healthToSeverity } from '../../utils/badge-colors'
+import { StatusDot, toneTextClass } from '../ui/status-tone'
+import { Tooltip } from '../ui/Tooltip'
+import { AlertBanner } from '../ui/drawer-components'
+import { FoldSection } from '../ui/FoldSection'
+import { RefLink, type NavigateToRef } from '../ui/RefLink'
+
+/** Where a problem's evidence comes from, in user terms. */
+export interface ProblemOrigin {
+  label: string
+  /** The exact field or condition, shown on hover. */
+  detail?: string
+}
+
+/**
+ * Something about a workspace object that needs a look. `C` is the
+ * integration's own category set.
+ */
+export interface ProblemDetails<C extends string = string> {
+  /** Stable identity for keys. */
+  id: string
+  category: C
+  title: string
+  detail?: string
+  rawDetail?: string
+  rawDetailLabel?: string
+  /** The object the evidence is about: the workspace's root object or one of its children. */
+  subject: ResourceRef & { group: string }
+  /** A shorter headline for tight places (a fleet cell); `title` stays the precise one. */
+  shortTitle?: string
+  /** Other objects the same problem is about, e.g. earlier runs that failed the same way. */
+  alsoAbout?: Pick<ResourceRef, 'kind' | 'name'>[]
+}
+
+export type ProblemProvenance =
+  | { source: 'issue'; origin?: ProblemOrigin; measuredBy?: never; sourceDetail?: never }
+  | { source: 'audit'; sourceDetail?: string; origin?: never; measuredBy?: never }
+  | { source: 'measurement'; measuredBy?: string; sourceDetail?: string; origin?: never }
+
+export type WorkspaceProblem<C extends string = string> = ProblemDetails<C> & ProblemProvenance & { tone: Exclude<HealthLevel, 'healthy'> }
+
+/** A problem's provenance label: where its evidence comes from, never a generic "Radar issue". */
+export function problemOriginLabel(problem: WorkspaceProblem): ProblemOrigin {
+  switch (problem.source) {
+    case 'audit':
+      return { label: 'Best-practice check', detail: problem.sourceDetail }
+    case 'measurement':
+      return { label: problem.measuredBy ? `Measured by ${problem.measuredBy}` : 'Measured', detail: problem.sourceDetail }
+  }
+  return problem.origin ?? { label: 'Detected by Radar' }
+}
+
+/**
+ * How a host opens a problem on its Issues page. Supplied by context so every
+ * summary and drawer gets the link without threading a prop through each.
+ */
+export const OpenIssueContext = createContext<((problem: WorkspaceProblem) => void) | undefined>(undefined)
+
+export function ProblemMeta({
+  problem,
+  rootKind,
+  onNavigate,
+  subjectIsSelf,
+  children,
+}: {
+  problem: WorkspaceProblem
+  /** The workspace's root kind: a problem about another kind names its subject. */
+  rootKind: string
+  onNavigate?: NavigateToRef
+  subjectIsSelf?: boolean
+  children?: ReactNode
+}) {
+  const openIssue = useContext(OpenIssueContext)
+  const origin = problemOriginLabel(problem)
+  const aboutChild = !subjectIsSelf && problem.subject.kind !== rootKind
+  return (
+    <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-theme-text-tertiary">
+      {aboutChild && (
+        <span>
+          {problem.subject.kind}{' '}
+          <RefLink refTo={problem.subject} onNavigate={onNavigate} mono />
+          {problem.alsoAbout && problem.alsoAbout.length > 0 && ' '}
+          {problem.alsoAbout && problem.alsoAbout.length > 0 && (
+            <Tooltip
+              content={
+                <ul>
+                  {problem.alsoAbout.map((o) => (
+                    <li key={`${o.kind}/${o.name}`} className="font-mono">
+                      {o.kind} {o.name}
+                    </li>
+                  ))}
+                </ul>
+              }
+            >
+              <span>and {problem.alsoAbout.length} more</span>
+            </Tooltip>
+          )}
+        </span>
+      )}
+      <Tooltip content={origin.detail} disabled={!origin.detail}>
+        <span>{origin.label}</span>
+      </Tooltip>
+      {openIssue && problem.source === 'issue' && (
+        <button type="button" onClick={() => openIssue(problem)} className="whitespace-nowrap text-accent-text hover:underline">
+          See in Issues →
+        </button>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export function WorkspaceProblemCallout({
+  problem,
+  rootKind,
+  more,
+  onNavigate,
+  action,
+  subjectIsSelf,
+}: {
+  problem: WorkspaceProblem
+  rootKind: string
+  more?: ReactNode
+  onNavigate?: NavigateToRef
+  action?: ReactNode
+  /** The callout sits on the subject's own page, so linking to it would loop. */
+  subjectIsSelf?: boolean
+}) {
+  const severity = healthToSeverity(problem.tone)
+  const variant = severity === 'neutral' ? 'unknown' : severity
+  return (
+    <AlertBanner variant={variant} title={problem.title} message={problem.detail}>
+      {problem.rawDetail && <FoldSection title={problem.rawDetailLabel ?? "Original evidence"} summary="" attention={false}><div className="break-words text-xs text-theme-text-secondary">{problem.rawDetail}</div></FoldSection>}
+      <ProblemMeta problem={problem} rootKind={rootKind} onNavigate={onNavigate} subjectIsSelf={subjectIsSelf}>
+        {action}
+        {more}
+      </ProblemMeta>
+    </AlertBanner>
+  )
+}
+
+/** The problems a callout does not show, as a compact list with the callout's tone, title and source. */
+export function ProblemList({ problems, rootKind, onNavigate }: { problems: WorkspaceProblem[]; rootKind: string; onNavigate?: NavigateToRef }) {
+  return (
+    <ul className="space-y-2">
+      {problems.map((p) => (
+        <li key={p.id} className="flex items-start gap-2 text-sm">
+          <span className="mt-1.5 shrink-0">
+            <StatusDot tone={p.tone} size="sm" />
+          </span>
+          <div className="min-w-0">
+            <div className={clsx('font-medium break-words', toneTextClass(p.tone))}>{p.title}</div>
+            {p.detail && <div className="text-xs text-theme-text-secondary break-words">{p.detail}</div>}
+            {p.rawDetail && <FoldSection title={p.rawDetailLabel ?? "Original evidence"} summary="" attention={false}><div className="break-words text-xs text-theme-text-secondary">{p.rawDetail}</div></FoldSection>}
+            <ProblemMeta problem={p} rootKind={rootKind} onNavigate={onNavigate} />
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}