@skyhook-io/k8s-ui 1.17.0 → 1.17.1

package/src/components/dock/DockContext.test.tsx

@@ -0,0 +1,32 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it } from 'vitest'
+import { DockProvider, useDock, useOpenTerminal, type DockContextValue } from './DockContext'
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+it('reuses normal terminals and separates explicit executables and cluster identities', async () => {
+  let dock!: DockContextValue
+  let open!: ReturnType<typeof useOpenTerminal>
+  function Host() { dock = useDock(); open = useOpenTerminal(); return null }
+  const host = document.createElement('div'); document.body.appendChild(host); const root = createRoot(host)
+  await act(async () => root.render(<DockProvider><Host /></DockProvider>))
+  const base = { namespace: 'app', podName: 'worker', containerName: 'app', containers: ['app'], orgId: 'org', clusterId: 'first' }
+  try {
+    await act(async () => open(base)); await act(async () => open(base))
+    expect(dock.tabs).toHaveLength(1); expect(dock.tabs[0].title).toBe('worker/app')
+    await act(async () => open({ ...base, shell: 'psql', title: 'Database', sessionNote: 'Primary' }))
+    expect(dock.tabs).toHaveLength(2)
+    expect(dock.tabs[1]).toMatchObject({ shell: 'psql', title: 'Database', sessionNote: 'Primary' })
+    const commandId = dock.tabs[1].id
+    await act(async () => open({ ...base, shell: 'psql', title: 'Database standby', sessionNote: 'Standby' }))
+    expect(dock.tabs).toHaveLength(2)
+    expect(dock.tabs[1]).toMatchObject({ id: commandId, title: 'Database standby', sessionNote: 'Standby' })
+    const defaultId = dock.tabs[0].id
+    await act(async () => dock.setTabTitle(defaultId, 'My shell'))
+    await act(async () => open(base))
+    expect(dock.tabs[0].title).toBe('My shell')
+    await act(async () => open({ ...base, clusterId: 'second', shell: 'psql' })); expect(dock.tabs).toHaveLength(3)
+    await act(async () => open({ ...base, orgId: 'other' })); expect(dock.tabs).toHaveLength(4)
+  } finally { await act(async () => root.unmount()); host.remove() }
+})

package/src/components/dock/DockContext.tsx

@@ -16,6 +16,10 @@ export interface DockTab {
   podName?: string
   containerName?: string
   containers?: string[]
+  /** Terminal: run this command instead of a shell (one argv element, e.g. "psql"). */
+  shell?: string
+  /** Terminal: a short line shown in the toolbar, e.g. what the session is connected to. */
+  sessionNote?: string
   // Workload logs props
   workloadKind?: string
   workloadName?: string
@@ -87,10 +91,14 @@ export function DockProvider({ children }: { children: ReactNode }) {
       }
       return t.namespace === tabData.namespace &&
              t.podName === tabData.podName &&
-             t.containerName === tabData.containerName
+             t.containerName === tabData.containerName &&
+             t.shell === tabData.shell
     })
 
     if (existingTab) {
+      if (tabData.type === 'terminal' && tabData.sessionNote !== undefined) {
+        setTabs(prev => prev.map(tab => tab.id === existingTab.id ? { ...tab, sessionNote: tabData.sessionNote } : tab))
+      }
       setActiveTabId(existingTab.id)
       setIsExpanded(true)
       return existingTab.id
@@ -197,7 +205,7 @@ export function useDockReservedHeight(): number {
 // Convenience hooks for adding specific tab types
 
 export function useOpenTerminal() {
-  const { addTab } = useDock()
+  const { addTab, setTabTitle } = useDock()
 
   return (opts: {
     namespace: string
@@ -207,18 +215,24 @@ export function useOpenTerminal() {
     orgId?: string
     clusterId?: string
     clusterName?: string
+    shell?: string
+    sessionNote?: string
+    title?: string
   }) => {
-    addTab({
+    const id = addTab({
       type: 'terminal',
-      title: `${opts.podName}/${opts.containerName}`,
+      title: opts.title ?? `${opts.podName}/${opts.containerName}`,
       namespace: opts.namespace,
       podName: opts.podName,
       containerName: opts.containerName,
       containers: opts.containers,
+      shell: opts.shell,
+      sessionNote: opts.sessionNote,
       orgId: opts.orgId,
       clusterId: opts.clusterId,
       clusterName: opts.clusterName,
     })
+    if (opts.title !== undefined) setTabTitle(id, opts.title)
   }
 }
 

package/src/components/dock/LocalTerminalTab.test.tsx

@@ -4,6 +4,7 @@ import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, expect, it, vi } from 'vitest'
 import { LocalTerminalTab, type LocalTerminalTabProps } from './LocalTerminalTab'
 import { TerminalTab } from './TerminalTab'
+import { DockProvider, useDock, useOpenTerminal } from './DockContext'
 
 vi.mock('@xterm/xterm', () => ({
   Terminal: class {
@@ -187,3 +188,42 @@ it.each(['local', 'pod'])('allows Retry after a %s terminal creation error', asy
   await act(async () => Socket.instances[0].onopen?.())
   expect(element.textContent).not.toContain('creation failed')
 })
+
+
+it.each([undefined, 'psql'])('keeps shell defaults and command-specific unavailable guidance (%s)', async command => {
+  const createSession = vi.fn(async () => ({ wsUrl: 'ws://localhost' }))
+  const createDebugContainer = vi.fn()
+  await act(async () => root.render(<TerminalTab namespace="app" podName="worker" containerName="app" containers={['app', 'sidecar']} createSession={createSession} createDebugContainer={createDebugContainer} command={command} note={command ? 'Database session' : undefined} />))
+  expect(createSession).toHaveBeenCalledWith('app')
+  expect(element.querySelector('select') !== null).toBe(!command)
+  if (command) expect(element.textContent).toContain('Database session')
+  await act(async () => Socket.instances[0].onmessage?.({ data: JSON.stringify({ type: 'error', errorType: 'shell_not_found', data: 'executable file not found' }) }))
+  if (command) {
+    expect(element.textContent).toContain('Command not available')
+    expect(element.textContent).toContain('psql')
+    expect(element.textContent).not.toContain('debug container')
+    expect(element.textContent).not.toContain('/bin/sh')
+  } else {
+    expect(element.textContent).toContain('Shell not available')
+    expect(element.textContent).toContain('/bin/sh')
+    expect(element.textContent).toContain('Start debug container')
+  }
+})
+
+
+it('refreshes command session context when reusing its tab without reconnecting', async () => {
+  let open!: ReturnType<typeof useOpenTerminal>
+  const createSession = vi.fn(async () => ({ wsUrl: 'ws://localhost' }))
+  function Host() {
+    open = useOpenTerminal()
+    const { tabs } = useDock()
+    return <>{tabs.map(tab => <TerminalTab key={tab.id} namespace={tab.namespace!} podName={tab.podName!} containerName={tab.containerName!} containers={tab.containers!} command={tab.shell} note={tab.sessionNote} createSession={createSession} />)}</>
+  }
+  await act(async () => root.render(<DockProvider><Host /></DockProvider>))
+  const base = { namespace: 'app', podName: 'worker', containerName: 'app', containers: ['app'], shell: 'psql', title: 'Primary', sessionNote: 'Read-write' }
+  await act(async () => open(base))
+  await act(async () => Socket.instances[0].onopen?.())
+  await act(async () => open({ ...base, title: 'Standby', sessionNote: 'Read-only' }))
+  expect(element.textContent).toContain('Read-only'); expect(element.textContent).not.toContain('Read-write')
+  expect(Socket.instances).toHaveLength(1); expect(createSession).toHaveBeenCalledOnce()
+})

package/src/components/dock/LocalTerminalTab.tsx

@@ -8,6 +8,7 @@ import { clsx } from 'clsx'
 import { setupTerminalClipboard, copyTerminalSelection } from './terminalClipboard'
 import { TerminalClipboardToolbar } from './TerminalClipboardToolbar'
 import { useMultilinePasteConfirm } from './useMultilinePasteConfirm'
+import { toneTextClass } from '../ui/status-tone'
 
 export interface LocalTerminalSessionInfo {
   context: string
@@ -292,9 +293,9 @@ export function LocalTerminalTab({
       {/* Terminal or error */}
       <div ref={terminalRef} className="absolute top-8 left-0 right-0 bottom-0 bg-[#0f172a] [&_.xterm-viewport]:!bg-[#0f172a]" />
       {error && (
-        <div key="error" className="absolute top-8 left-0 right-0 bottom-0 flex flex-col items-center justify-center p-4 text-center bg-slate-900">
-          <div className="text-red-400 mb-2 text-sm">Failed to connect</div>
-          <div className="text-xs text-theme-text-disabled mb-3">{error}</div>
+        <div key="error" className="absolute top-8 left-0 right-0 bottom-0 flex flex-col items-center justify-center p-4 text-center bg-theme-base">
+          <div className={clsx(toneTextClass('unhealthy'), 'mb-2 text-sm')}>Failed to connect</div>
+          <div className="text-xs text-theme-text-secondary mb-3">{error}</div>
           <button
             onClick={connect}
             disabled={!connectAllowed}

package/src/components/dock/TerminalTab.tsx

@@ -8,6 +8,7 @@ import { clsx } from 'clsx'
 import { setupTerminalClipboard, copyTerminalSelection } from './terminalClipboard'
 import { TerminalClipboardToolbar } from './TerminalClipboardToolbar'
 import { useMultilinePasteConfirm } from './useMultilinePasteConfirm'
+import { toneTextClass } from '../ui/status-tone'
 
 export interface TerminalTabProps {
   namespace: string
@@ -19,6 +20,10 @@ export interface TerminalTabProps {
   createSession: (containerName: string) => Promise<{ wsUrl: string }>
   /** Optional: creates a debug (ephemeral) container. If omitted, the debug button is hidden. */
   createDebugContainer?: (targetContainer: string) => Promise<{ containerName: string }>
+  /** Optional: a short line in the toolbar describing the session. */
+  note?: string
+  /** Executable supplied by the host session callback; pins its target container. */
+  command?: string
 }
 
 export function TerminalTab({
@@ -29,6 +34,8 @@ export function TerminalTab({
   isActive = true,
   createSession,
   createDebugContainer,
+  note,
+  command,
 }: TerminalTabProps) {
   const terminalRef = useRef<HTMLDivElement>(null)
   const xtermRef = useRef<XTerm | null>(null)
@@ -269,8 +276,9 @@ export function TerminalTab({
           )}
         />
         <span className="text-xs text-theme-text-tertiary">{podName}</span>
+        {note && <span className="truncate text-xs text-theme-text-secondary">{note}</span>}
 
-        {containers.length > 1 && (
+        {!command && containers.length > 1 && (
           <div className="relative">
             <select
               value={selectedContainer}
@@ -300,18 +308,22 @@ export function TerminalTab({
 
       <div ref={terminalRef} className="absolute top-8 left-0 right-0 bottom-0 bg-[#0f172a] [&_.xterm-viewport]:!bg-[#0f172a]" />
       {error && (
-        <div key="error" className="absolute top-8 left-0 right-0 bottom-0 flex flex-col items-center justify-center p-4 text-center bg-slate-900">
+        <div key="error" className="absolute top-8 left-0 right-0 bottom-0 flex flex-col items-center justify-center p-4 text-center bg-theme-base">
           {errorType === 'shell_not_found' ? (
             <>
-              <div className="text-amber-400 mb-2 text-sm">Shell not available</div>
-              <div className="text-xs text-theme-text-tertiary mb-4 max-w-md">
+              <div className="text-warning-text mb-2 text-sm">{command ? 'Command not available' : 'Shell not available'}</div>
+              {command ? (
+                <div className="text-xs text-theme-text-tertiary mb-4 max-w-md">
+                  Container <span className="font-mono text-theme-text-secondary">{selectedContainer}</span> could not start <span className="font-mono text-theme-text-secondary">{command}</span>. Check that the executable is installed in this container.
+                </div>
+              ) : <div className="text-xs text-theme-text-tertiary mb-4 max-w-md">
                 Container <span className="font-mono text-theme-text-secondary">{selectedContainer}</span> doesn&apos;t
                 have a shell (/bin/sh). This is common with distroless or minimal container images
                 {containers.length > 1 ? ' — try another container above, or' : '. You can'} create a
                 debug container to troubleshoot.
-              </div>
+              </div>}
               <div className="flex gap-2">
-                {createDebugContainerRef.current && (
+                {!command && createDebugContainerRef.current && (
                   <button
                     onClick={handleCreateDebugContainer}
                     disabled={isCreatingDebug}
@@ -335,8 +347,8 @@ export function TerminalTab({
             </>
           ) : (
             <>
-              <div className="text-red-400 mb-2 text-sm">Failed to connect</div>
-              <div className="text-xs text-theme-text-disabled mb-3">{error}</div>
+              <div className={clsx(toneTextClass('unhealthy'), 'mb-2 text-sm')}>Failed to connect</div>
+              <div className="text-xs text-theme-text-secondary mb-3">{error}</div>
               <button
                 onClick={connect}
                 className="flex items-center gap-2 px-3 py-1.5 btn-brand text-xs rounded"

package/src/components/facts/certainty.tsx

@@ -0,0 +1,36 @@
+import { WithTooltip } from '../ui/Tooltip'
+
+/**
+ * How exactly a value is known. A value read only in part is a lower bound,
+ * never shown as if exact.
+ */
+export type Certainty = 'exact' | 'lower_bound' | 'upper_bound' | 'unknown'
+
+export function certaintyGlyph(certainty: Certainty): string {
+  if (certainty === 'exact') return '='
+  if (certainty === 'lower_bound') return '≥'
+  if (certainty === 'upper_bound') return '≤'
+  return '?'
+}
+
+export function certaintyValueLabel(certainty: Certainty): string {
+  if (certainty === 'exact') return 'Exact'
+  if (certainty === 'lower_bound') return 'Lower bound'
+  if (certainty === 'upper_bound') return 'Upper bound'
+  return 'Unknown certainty'
+}
+
+export function CertaintyGlyph({ certainty, title }: { certainty: Certainty; title?: string }) {
+  return (
+    <WithTooltip tip={title ?? certaintyValueLabel(certainty)}>
+      <span
+        tabIndex={0}
+        role="note"
+        aria-label={title ?? certaintyValueLabel(certainty)}
+        className="cursor-help rounded border border-theme-border-light px-1 font-mono text-[10px] leading-tight text-theme-text-tertiary focus-visible:outline focus-visible:outline-2 focus-visible:outline-skyhook-500"
+      >
+        {certaintyGlyph(certainty)}
+      </span>
+    </WithTooltip>
+  )
+}

package/src/components/facts/facts.test.tsx

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { FactValue } from './facts'
+import { worseTone } from '../ui/status-tone'
+
+describe('FactValue', () => {
+  const twoDaysAgo = new Date(Date.now() - 2 * 24 * 3600 * 1000 - 60_000).toISOString()
+  it('reads a still-current state as lasting since its timestamp', () => {
+    const html = renderToStaticMarkup(<FactValue fact={{ text: 'Failing', tone: 'unhealthy', at: twoDaysAgo, atMeaning: 'since' }} />)
+    expect(html).toContain('Failing<span class="text-theme-text-secondary"> for 2d</span>')
+    expect(html).not.toContain('ago')
+  })
+  it('reads a past event as an age', () => {
+    const html = renderToStaticMarkup(<FactValue fact={{ text: 'Completed', tone: 'healthy', at: twoDaysAgo }} />)
+    expect(html).toContain('2d ago')
+  })
+})
+
+it('combines informational and unread readings independently of argument order', () => {
+  expect(worseTone('healthy', 'neutral')).toBe('neutral')
+  expect(worseTone('neutral', 'healthy')).toBe('neutral')
+  expect(worseTone('neutral', 'unknown')).toBe('unknown')
+  expect(worseTone('unknown', 'neutral')).toBe('unknown')
+})

package/src/components/facts/facts.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react'
+import { clsx } from 'clsx'
+import type { HealthLevel } from '../resources/resource-utils'
+import { formatAge } from '../resources/resource-utils'
+import { formatRelativeAgeTime } from '../../utils/format'
+import { toneTextClass } from '../ui/status-tone'
+import { Tooltip } from '../ui/Tooltip'
+
+/**
+ * One observed value and where it came from. A value the cluster does not
+ * report is a fact too: its text says so and its tone is `unknown`, never a
+ * zero or a calm default.
+ */
+export interface Fact {
+  text: string
+  tone: HealthLevel
+  /** Where the value comes from, shown next to it so claims carry their source. */
+  source?: string
+  /** A timestamp the text refers to; the UI renders it as an age. */
+  at?: string
+  /** `since`: `at` is when a still-current state began, rendered "Failing for 2d" rather than "· 2d ago". */
+  atMeaning?: 'since'
+  /** The full explanation behind a short `source`, shown on hover only. */
+  detail?: string
+}
+
+export function FactValue({ fact, className }: { fact: Fact; className?: string }) {
+  const age = fact.at && fact.atMeaning === 'since' ? formatAge(fact.at) : null
+  const when = fact.at && fact.atMeaning !== 'since' ? formatRelativeAgeTime(fact.at) : null
+  const body = (
+    <span className={clsx(toneTextClass(fact.tone), className)}>
+      {fact.text}
+      {age && <span className="text-theme-text-secondary"> for {age}</span>}
+      {when && <span className="text-theme-text-secondary">{fact.text ? ' · ' : ''}{when}</span>}
+    </span>
+  )
+  if (!fact.source && !fact.at && !fact.detail) return body
+  return (
+    <Tooltip content={[fact.at ? `${fact.atMeaning === 'since' ? 'since ' : ''}${new Date(fact.at).toUTCString()}` : null, fact.source, fact.detail].filter(Boolean).join(' · ')} position="top">
+      {body}
+    </Tooltip>
+  )
+}
+
+export function FactSource({ fact }: { fact: Fact }) {
+  if (!fact.source) return null
+  return <div className="mt-0.5 text-[11.5px] text-theme-text-tertiary">{fact.source}</div>
+}
+
+/** Label/value rows. Empty values stay visible: an unread value is shown as unread, not hidden. */
+export function FactGrid({ children }: { children: ReactNode }) {
+  return <dl className="grid grid-cols-[9.5rem_minmax(0,1fr)] items-baseline gap-x-4 gap-y-2 text-sm">{children}</dl>
+}
+
+export function FactRow({ label, children }: { label: ReactNode; children: ReactNode }) {
+  return (
+    <>
+      <dt className="text-theme-text-tertiary">{label}</dt>
+      <dd className="min-w-0 break-words text-theme-text-primary">{children}</dd>
+    </>
+  )
+}

package/src/components/facts/index.ts

@@ -0,0 +1,6 @@
+// How a surface shows what the cluster reported: each value with its source,
+// partial and unread values marked as such (see DESIGN.md, "Unknown, partial
+// and denied values"). For any renderer, summary or workspace screen.
+export * from './facts'
+export * from './certainty'
+export * from './managed-by'

package/src/components/facts/managed-by.test.tsx

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { ManagedByText, managedByLabel } from './managed-by'
+
+describe('ManagedByText', () => {
+  it('names the GitOps manager and links it when its namespace is recorded', () => {
+    const app = { kind: 'Application', group: 'argoproj.io', namespace: 'argocd', name: 'payments' }
+    const html = renderToStaticMarkup(<ManagedByText refTo={app} onNavigate={() => {}} />)
+    expect(html).toContain('Argo CD application')
+    expect(html).toMatch(/<button[^>]*>argocd\/payments<\/button>/)
+    expect(renderToStaticMarkup(<ManagedByText refTo={{ ...app, namespace: '' }} onNavigate={() => {}} />)).not.toContain('<button')
+  })
+  it('says nothing for a manager that is not a GitOps controller', () => {
+    expect(renderToStaticMarkup(<ManagedByText refTo={{ kind: 'HelmRelease', namespace: 'db', name: 'pg' }} />)).toBe('')
+    expect(managedByLabel({ kind: 'Kustomization', group: 'kustomize.toolkit.fluxcd.io', namespace: 'flux-system', name: 'apps' })).toBe('Flux Kustomization flux-system/apps')
+  })
+})

package/src/components/facts/managed-by.tsx

@@ -0,0 +1,36 @@
+import type { ResourceRef } from '../../types/core'
+import { gitOpsOwnerFromRef, type GitOpsOwnerRef } from '../../utils/gitops-owner'
+import { RefLink, type NavigateToRef } from '../ui/RefLink'
+
+function managerLabel(owner: GitOpsOwnerRef): string {
+  if (owner.tool === 'argocd') return 'Argo CD application'
+  return owner.kind === 'helmreleases' ? 'Flux HelmRelease' : 'Flux Kustomization'
+}
+
+/**
+ * The GitOps object that manages a resource, from the server's manager
+ * detection. Renders nothing for a manager that is not a GitOps controller,
+ * and plain text when the manager's namespace is not recorded.
+ */
+export function ManagedByText({ refTo, onNavigate }: { refTo: ResourceRef; onNavigate?: NavigateToRef }) {
+  const owner = gitOpsOwnerFromRef(refTo)
+  if (!owner) return null
+  return (
+    <span>
+      {managerLabel(owner)}{' '}
+      {refTo.namespace ? (
+        <RefLink refTo={refTo} onNavigate={onNavigate} mono>
+          {`${refTo.namespace}/${refTo.name}`}
+        </RefLink>
+      ) : (
+        <span className="font-mono">{refTo.name}</span>
+      )}
+    </span>
+  )
+}
+
+/** The manager's label and name as text, for a table cell. */
+export function managedByLabel(refTo: ResourceRef | undefined): string | undefined {
+  const owner = refTo && gitOpsOwnerFromRef(refTo)
+  return owner ? `${managerLabel(owner)} ${refTo!.namespace ? `${refTo!.namespace}/` : ''}${refTo!.name}` : undefined
+}

package/src/components/facts/public-exports.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import {
+  FactValue, FactGrid, FactRow, FactSource, RefLink, SummaryHeading,
+  WorkspaceProblemCallout, ProblemCallout, ToneDot, toneTextClass,
+  type CNPGFact, type CNPGNavigate, type CNPGRef,
+} from '../../index'
+import { FactValue as SharedFactValue } from './facts'
+import { FactValue as CNPGFactValue } from '../cnpg/primitives'
+
+describe('public presentation compatibility', () => {
+  it('routes existing root and CNPG fact exports to one implementation', () => {
+    expect(FactValue).toBe(SharedFactValue)
+    expect(CNPGFactValue).toBe(SharedFactValue)
+    const fact: CNPGFact = { text: 'Not read — access denied', tone: 'unknown', source: 'Kubernetes API' }
+    const html = renderToStaticMarkup(<FactGrid><FactRow label="Instances"><FactValue fact={fact} /><FactSource fact={fact} /></FactRow></FactGrid>)
+    expect(html).toContain('Not read — access denied')
+    expect(html).toContain('Kubernetes API')
+    expect(html).not.toContain('healthy')
+  })
+  it('keeps the existing optional-group reference and navigation signatures', () => {
+    const ref: CNPGRef = { kind: 'Pod', namespace: 'jobs', name: 'worker' }
+    const navigate: CNPGNavigate = () => {}
+    expect(renderToStaticMarkup(<RefLink refTo={ref} onNavigate={navigate} />)).toContain('<button')
+    expect(renderToStaticMarkup(<RefLink refTo={ref} />)).not.toContain('<button')
+  })
+  it('preserves the existing heading, tone and CNPG problem callout interfaces', () => {
+    expect(renderToStaticMarkup(<SummaryHeading>State</SummaryHeading>)).toContain('State')
+    expect(renderToStaticMarkup(<ToneDot tone="unhealthy" />)).toContain('bg-rose-500')
+    expect(toneTextClass('unknown')).toBe('text-theme-text-tertiary')
+    const problem = { id: 'p', category: 'availability' as const, severity: 'warning' as const, title: 'Needs attention', source: 'issue' as const, subject: { kind: 'Pod', group: '', namespace: 'jobs', name: 'worker' } }
+    expect(renderToStaticMarkup(<ProblemCallout problem={problem} />)).toContain('worker')
+    expect(renderToStaticMarkup(<WorkspaceProblemCallout problem={{ ...problem, tone: 'degraded' }} rootKind="Deployment" />)).toContain('worker')
+  })
+})

package/src/components/gitops/GitOpsGraphFilterRail.tsx

@@ -4,6 +4,7 @@ import { GitOpsFacetButton, GitOpsFilterSection } from './GitOpsTableView'
 import { Input } from '../ui/Input'
 import type { GitOpsResourceTree } from '../../types/gitops-tree'
 import type { GitOpsTreePreset } from './tree'
+import { treeNodeFilterRole } from './tree/tree-helpers'
 
 // =============================================================================
 // GitOpsGraphFilterRail — the left-side filter sidebar that pairs with
@@ -33,10 +34,12 @@ export function buildTreeFacets(tree: GitOpsResourceTree | null | undefined): Gi
     kinds: countValues(
       nodes.filter((n) => n.role !== 'group').map((n) => n.ref.kind).filter(Boolean),
     ),
-    sync: countValues(nodes.map((n) => n.sync || 'Unknown')),
+    // Dependencies have no sync state of their own; counting them as Unknown
+    // would read as a problem.
+    sync: countValues(nodes.filter((n) => !n.dependency || n.sync).map((n) => n.sync || 'Unknown')),
     health: countValues(nodes.map((n) => n.health || 'Unknown')),
     namespaces: countValues(nodes.map((n) => n.ref.namespace || '(cluster)')),
-    roles: countValues(nodes.map((n) => n.role)),
+    roles: countValues(nodes.map(treeNodeFilterRole)),
   }
 }
 
@@ -211,6 +214,7 @@ function roleLabel(value: string): string {
       root: 'Root',
       declared: 'Declared',
       generated: 'Generated',
+      dependency: 'Dependency',
       group: 'Groups',
     } as Record<string, string>
   )[value] ?? value

package/src/components/gitops/GitOpsHealthSourceNotice.test.tsx

@@ -0,0 +1,38 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, test } from 'vitest'
+
+import { APP_TREE_API_ERROR_NOTICE, APP_TREE_API_PENDING_NOTICE, GitOpsHealthSourceNotice, hasHealthSettingsHint, type HealthSourceNoticeSummary } from './GitOpsHealthSourceNotice'
+
+const summary = (extra: Partial<HealthSourceNoticeSummary>): HealthSourceNoticeSummary => ({
+  tool: 'argocd',
+  health: 'Degraded',
+  resourceHealthMode: 'appTree',
+  resourceHealthApiError: 'the connection is still being set up',
+  ...extra,
+})
+
+describe('GitOpsHealthSourceNotice while Radar connects to Argo CD', () => {
+  test('says it is connecting, without sending the user to Settings', () => {
+    const s = summary({ resourceHealthApiPending: true })
+    const html = renderToStaticMarkup(<GitOpsHealthSourceNotice summary={s} onOpenSettings={() => {}} />)
+    expect(html).toContain(APP_TREE_API_PENDING_NOTICE.replaceAll("'", '&#x27;'))
+    expect(html).not.toContain(APP_TREE_API_ERROR_NOTICE.replaceAll("'", '&#x27;'))
+    expect(html).not.toContain('Settings')
+    expect(hasHealthSettingsHint(s, [])).toBe(false)
+  })
+
+  test('with nothing configured, discovery running keeps the connect link', () => {
+    const s = summary({ resourceHealthApiError: undefined, resourceHealthApiPending: true })
+    expect(hasHealthSettingsHint(s, [])).toBe(true)
+    const html = renderToStaticMarkup(<GitOpsHealthSourceNotice summary={s} onOpenSettings={() => {}} />)
+    expect(html).toContain('connect Radar to your Argo CD server')
+  })
+
+  test('a real failure still reads as one and offers Settings', () => {
+    const s = summary({ resourceHealthApiError: 'the request timed out' })
+    const html = renderToStaticMarkup(<GitOpsHealthSourceNotice summary={s} onOpenSettings={() => {}} />)
+    expect(html).toContain('the request timed out')
+    expect(html).toContain('Check Argo CD in Settings')
+    expect(hasHealthSettingsHint(s, [])).toBe(true)
+  })
+})

package/src/components/gitops/GitOpsHealthSourceNotice.tsx

@@ -31,6 +31,9 @@ export const APP_TREE_PERSIST_REMEDY =
 // why — the user who configured it doesn't need the Argo CD 3 history
 // first — then say what the rows below are meanwhile.
 export const APP_TREE_API_ERROR_NOTICE = "Radar couldn't read Argo's per-resource health from your Argo CD server"
+// The host is still connecting to argocd-server and will ask again; there
+// is nothing to fix, so no Settings link.
+export const APP_TREE_API_PENDING_NOTICE = "Radar is still connecting to your Argo CD server to read Argo's per-resource health."
 export const APP_TREE_API_ERROR_FINDINGS = 'Meanwhile, rows marked "Found by Radar" are problems Radar detected by looking at the resources itself.'
 export const APP_TREE_API_ERROR_NO_FINDINGS = "Radar didn't find a problem on its own."
 
@@ -39,7 +42,7 @@ export const REMOTE_DESTINATION_NOTICE =
 export const REMOTE_FLUX_TARGET_NOTICE =
   "This applies its resources to a different cluster, so they aren't visible from here."
 
-export type HealthSourceNoticeSummary = Pick<GitOpsInsightSummary, 'tool' | 'health' | 'resourceHealthMode' | 'remoteDestination' | 'resourceHealthFromApi' | 'resourceHealthApiError'>
+export type HealthSourceNoticeSummary = Pick<GitOpsInsightSummary, 'tool' | 'health' | 'resourceHealthMode' | 'remoteDestination' | 'resourceHealthFromApi' | 'resourceHealthApiError' | 'resourceHealthApiPending'>
 
 // The appTree notice explains problems Radar found on its own; on an app
 // Argo calls Healthy nothing is derived (the host doesn't run the overlay
@@ -63,6 +66,7 @@ export function hasRadarFinding(changes: GitOpsChange[] | undefined): boolean {
 
 export function hasHealthSettingsHint(summary: HealthSourceNoticeSummary | undefined, changes: GitOpsChange[] | undefined): boolean {
   return healthSourceNoticeKind(summary) === 'appTree'
+    && !(summary?.resourceHealthApiPending && summary.resourceHealthApiError)
     && (!!summary?.resourceHealthApiError || (!hasRadarFinding(changes) && summary?.health === 'Degraded'))
 }
 
@@ -101,7 +105,8 @@ export function GitOpsHealthSourceNotice({
   // app with no Radar finding has nothing here to attribute.
   const radarFinding = hasRadarFinding(changes)
   const apiError = summary?.resourceHealthApiError
-  if (kind === 'appTree' && !radarFinding && !hasHealthSettingsHint(summary, changes)) return null
+  const pending = !!summary?.resourceHealthApiPending && !!apiError
+  if (kind === 'appTree' && !radarFinding && !pending && !hasHealthSettingsHint(summary, changes)) return null
   const settingsLink = (label: string) =>
     onOpenSettings ? (
       <button type="button" onClick={onOpenSettings} className="underline decoration-theme-border underline-offset-2 hover:text-theme-text-primary">
@@ -123,7 +128,12 @@ export function GitOpsHealthSourceNotice({
           )
         ) : (
           <>
-            {apiError ? (
+            {pending ? (
+              <>
+                {APP_TREE_API_PENDING_NOTICE}{' '}
+                {radarFinding ? APP_TREE_API_ERROR_FINDINGS : APP_TREE_API_ERROR_NO_FINDINGS}
+              </>
+            ) : apiError ? (
               <>
                 {APP_TREE_API_ERROR_NOTICE}: {apiError}.
                 {onOpenSettings && <> {settingsNote} {settingsLink('Check Argo CD in Settings')}.</>}