@skyhook-io/k8s-ui 1.10.2 → 1.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.10.2",
+  "version": "1.10.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/issues/IssuesView.tsx

@@ -122,6 +122,43 @@ export interface IssueRowSlotContext {
   open: boolean;
 }
 
+/** Substitutes the SOURCE of the diagnosis prose in the expanded body.
+ *
+ *  For hosts that can diagnose an issue better than the detectors can — today
+ *  that means an AI investigation that actually read the logs and cross-checked
+ *  the resource, where `issue.action` is a static template keyed off the reason
+ *  code ("Open the resource drawer for events, logs, and YAML."). Showing both
+ *  makes the reader arbitrate between navigation and an answer.
+ *
+ *  Only the PROSE is the host's. The meta line (restarts, timing, change
+ *  context), the raw detector text, the reason-code eyebrow, tone and spacing
+ *  stay here — a host that rebuilt those would have to re-implement
+ *  `issueTiming` and `changeContextText` and would drift from this file.
+ *
+ *  Raw error is deliberately not overridable: it is the verbatim
+ *  kubelet/containerd string operators grep for, and a summary is not a
+ *  substitute for it.
+ *
+ *  Pass a field as undefined to leave that section alone — an override with
+ *  nothing to say is not an improvement over the detector's own text. */
+export interface IssueDiagnosisSource {
+  /** Replaces the prose under "What's wrong". The meta line still follows it. */
+  cause?: ReactNode;
+  /** Replaces the body of "Next step", and makes the section render even when
+   *  the detector supplied no `action` of its own. */
+  nextStep?: ReactNode;
+  /** Provenance — who is talking and how stale they are. Rendered once, in the
+   *  header of the first overridden section, because it is a fact about the
+   *  source rather than about either section. Name the source in words a reader
+   *  already knows from elsewhere in the product; an initialism sitting beside a
+   *  reason code reads as one more terse token, not as a claim about authorship. */
+  attribution?: ReactNode;
+  /** Section icon for the overridden sections. Usually leave unset: the stock
+   *  icons carry the section's TONE (warn / fix), which the source doesn't
+   *  change, and `attribution` is the better place to say who wrote the prose. */
+  icon?: ComponentType<{ className?: string }>;
+}
+
 export interface IssueRowProps {
   issue: Issue;
   clusterLabel?: (issue: Issue) => string | undefined;
@@ -139,6 +176,13 @@ export interface IssueRowProps {
   renderBadges?: (ctx: IssueRowSlotContext) => ReactNode;
   renderMeta?: (ctx: IssueRowSlotContext) => ReactNode;
   renderActions?: (ctx: IssueRowSlotContext) => ReactNode;
+  /** See IssueDiagnosisSource — replaces the diagnosis prose, not its framing. */
+  diagnosisSource?: IssueDiagnosisSource;
+  /** Appends a section to the end of the expanded body's stack. Unlike
+   *  `diagnosisSource` this only adds: it lands after Affected resources and
+   *  inherits the stack's dividers and rhythm, so the host section needs no
+   *  chrome of its own. */
+  renderDetailSection?: (ctx: IssueRowSlotContext) => ReactNode;
   ResourceLinkIcon?: ComponentType<{ className?: string }>;
 }
 
@@ -156,6 +200,8 @@ export function IssueRow({
   renderBadges,
   renderMeta,
   renderActions,
+  diagnosisSource,
+  renderDetailSection,
   ResourceLinkIcon = ExternalLink,
 }: IssueRowProps) {
   const cluster = clusterLabel?.(issue);
@@ -329,7 +375,7 @@ export function IssueRow({
                 text keeps enough contrast. */}
             <div className="border-t border-theme-border bg-theme-surface py-4 pl-6 pr-4">
               <div className="flex flex-col divide-y divide-theme-border/70 [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">
-                <Diagnosis issue={issue} />
+                <Diagnosis issue={issue} source={diagnosisSource} />
                 {issue.incident_parent ? (
                   <section className="flex flex-col gap-1">
                     <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">
@@ -349,6 +395,7 @@ export function IssueRow({
                 ) : null}
                 <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
                 <AffectedResources issue={issue} hideSubject={hideSubject} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
+                {renderDetailSection?.(slotCtx)}
               </div>
             </div>
           </div>
@@ -361,7 +408,12 @@ export function IssueRow({
 // Diagnosis: WHAT'S WRONG (amber) → NEXT STEP (emerald) → RAW ERROR (monochrome
 // terminal block). Status/timing facts share one muted meta line under the
 // diagnosis so the body reads as three beats rather than a stack of one-liners.
-function Diagnosis({ issue }: { issue: Issue }) {
+//
+// `source` lets a host supply the prose of the first two beats (see
+// IssueDiagnosisSource). It is a swap of WORDS ONLY: the meta line, the raw
+// error, the reason-code eyebrow and the tones are computed here either way, so
+// an overridden card loses none of the facts an un-overridden one shows.
+function Diagnosis({ issue, source }: { issue: Issue; source?: IssueDiagnosisSource }) {
   const crash =
     issue.restart_count || issue.last_terminated_reason
       ? [issue.restart_count ? `${issue.restart_count} restart${issue.restart_count === 1 ? '' : 's'}` : null, issue.last_terminated_reason ? `last exit: ${issue.last_terminated_reason}` : null]
@@ -405,7 +457,36 @@ function Diagnosis({ issue }: { issue: Issue }) {
   }
   if (issue.change_context) meta.push(changeContextText(issue.change_context));
 
-  const hasNextStep = !!issue.action || (issue.remediation_kind === 'create-namespace' && !!issue.remediation_target);
+  // A host's prose, when it has better. Each section falls back independently:
+  // supplying a cause and no next step leaves the detector's own action standing,
+  // which is the honest outcome when the host found a cause but no fix.
+  const sourceCause = source?.cause;
+  const sourceNextStep = source?.nextStep;
+  const SourceIcon = source?.icon;
+
+  // Stated once, on whichever overridden section comes first. Marking every
+  // overridden section reads as repetition rather than emphasis, and hosts tend
+  // to hang a control off the attribution — one that appeared twice in a single
+  // card would be a choice the reader has to make between identical options.
+  const attributionOn = sourceCause ? 'cause' : sourceNextStep ? 'nextStep' : null;
+  const causeAttribution = attributionOn === 'cause' ? source?.attribution : null;
+  const nextStepAttribution = attributionOn === 'nextStep' ? source?.attribution : null;
+
+  // The reason code rides the eyebrow whenever the prose above it isn't the
+  // detector's own — true for a parsed cause and for a host's alike, since in
+  // both cases the greppable token is otherwise nowhere on an open row.
+  const reasonEyebrow = (issue.cause || sourceCause) && issue.reason ? `· ${issue.reason}` : null;
+  const causeLabelExtra =
+    reasonEyebrow || causeAttribution ? (
+      <>
+        {reasonEyebrow}
+        {reasonEyebrow && causeAttribution ? ' ' : null}
+        {causeAttribution}
+      </>
+    ) : undefined;
+
+  const hasNextStep =
+    !!issue.action || !!sourceNextStep || (issue.remediation_kind === 'create-namespace' && !!issue.remediation_target);
 
   return (
     <div className="flex flex-col divide-y divide-theme-border/70 [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">
@@ -414,12 +495,14 @@ function Diagnosis({ issue }: { issue: Issue }) {
           identifier operators anchor on, and the collapsed header drops it while
           open. The non-cause branch already leads with it in the prose. */}
       <CardSection
-        icon={AlertTriangle}
+        icon={sourceCause && SourceIcon ? SourceIcon : AlertTriangle}
         label="What's wrong"
         tone="warn"
-        labelExtra={issue.cause && issue.reason ? `· ${issue.reason}` : undefined}
+        labelExtra={causeLabelExtra}
       >
-        {issue.cause ? (
+        {sourceCause ? (
+          <div className="text-sm leading-relaxed text-theme-text-primary">{sourceCause}</div>
+        ) : issue.cause ? (
           <p className="text-sm leading-relaxed text-theme-text-primary">{issue.cause}</p>
         ) : (
           <p className="text-sm leading-relaxed text-theme-text-primary">
@@ -427,12 +510,22 @@ function Diagnosis({ issue }: { issue: Issue }) {
             {headline ? <span className="text-theme-text-secondary"> — {headline}</span> : null}
           </p>
         )}
+        {/* Always the detector's, never the host's: restarts, timing and change
+            context are measurements, and a narrative account of the issue is not
+            a substitute for them. */}
         {meta.length > 0 ? <p className="text-xs leading-relaxed text-theme-text-tertiary tabular-nums">{meta.join(' · ')}</p> : null}
       </CardSection>
 
       {hasNextStep ? (
-        <CardSection icon={ArrowRight} label="Next step" tone="fix">
-          {issue.action ? <CardBody>{issue.action}</CardBody> : null}
+        <CardSection
+          icon={sourceNextStep && SourceIcon ? SourceIcon : ArrowRight}
+          label="Next step"
+          tone="fix"
+          labelExtra={nextStepAttribution ?? undefined}
+        >
+          {sourceNextStep ?? (issue.action ? <CardBody>{issue.action}</CardBody> : null)}
+          {/* Survives an override: this is a structured one-click fix with an
+              apply path, not advice competing with the host's. */}
           {issue.remediation_kind === 'create-namespace' && issue.remediation_target ? (
             <p className="text-xs text-theme-text-tertiary">
               Suggested fix: create namespace <code className="inline-code">{issue.remediation_target}</code> — apply it from the GitOps detail page.

package/src/components/issues/index.ts

@@ -3,7 +3,7 @@
 // queue's identically-named helpers when both land. Issue-prefixed public
 // names are safe to surface.
 export { IssueRow, IssuesView } from './IssuesView';
-export type { IssueRowProps, IssueRowSlotContext, IssuesViewProps } from './IssuesView';
+export type { IssueDiagnosisSource, IssueRowProps, IssueRowSlotContext, IssuesViewProps } from './IssuesView';
 export { ResourceIssuesSection } from './ResourceIssuesSection';
 export { issueTiming } from './issue-timing';
 export type { IssueTimingDisplay, IssueTimingDisplayKind } from './issue-timing';

package/src/components/topology/layout.worker.ts

@@ -7,10 +7,11 @@
  */
 import ELK from 'elkjs/lib/elk-api.js'
 import elkWorkerAlgorithm from 'elkjs/lib/elk-worker.min.js?url'
+import { assetUrl } from '../../utils/asset-url'
 
 // Create ELK with explicit worker URL (runs the algorithm in our worker context)
 const elk = new ELK({
-  workerUrl: elkWorkerAlgorithm,
+  workerUrl: assetUrl(elkWorkerAlgorithm),
 })
 
 // ELK options for laying out nodes within a single group

package/src/types/core.ts

@@ -92,6 +92,21 @@ export interface Capabilities {
   resources?: ResourcePermissions // Per-resource-type permissions
   authEnabled?: boolean   // Auth is enabled on the backend
   username?: string       // Authenticated user's username (when auth enabled)
+  // Which Cloud-connect lane this deployment gets. Optional on the wire:
+  // older backends don't advertise it — consumers fall back to wizard links.
+  cloudConnect?: CloudConnectCapability
+}
+
+// CloudConnectCapability picks the Cloud funnel's connect lane: 'driver'
+// means the in-product connect flow can run on this server (local, no auth,
+// no existing tunnel); 'wizard' routes to the Hub's connect wizard at appUrl.
+export interface CloudConnectCapability {
+  lane: 'driver' | 'wizard'
+  appUrl: string
+  // Hub API origin the connect dialog reads its live copy from. Absent means
+  // the server decided this deployment must not fetch — consumers render their
+  // compiled-in copy instead.
+  apiUrl?: string
 }
 
 export interface FeatureCapabilities {

package/src/utils/asset-url.test.ts

@@ -0,0 +1,113 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { assetUrl } from './asset-url'
+
+type RuntimeGlobal = typeof globalThis & {
+  __RADAR_RUNTIME_CONFIG__?: { assetBase?: string }
+}
+
+function setAssetBase(assetBase: string) {
+  ;(globalThis as RuntimeGlobal).__RADAR_RUNTIME_CONFIG__ = { assetBase }
+}
+
+/**
+ * Simulates a Worker scope, where `window` is absent and `location` is the
+ * worker script's own URL. jsdom defines `window`, so it has to be removed.
+ */
+function asWorkerAt(pathname: string, run: () => void) {
+  const realWindow = globalThis.window
+  // @ts-expect-error — deliberately emulating a scope without `window`
+  delete globalThis.window
+  const realLocation = globalThis.location
+  Object.defineProperty(globalThis, 'location', {
+    value: { pathname },
+    configurable: true,
+    writable: true,
+  })
+  try {
+    run()
+  } finally {
+    Object.defineProperty(globalThis, 'location', {
+      value: realLocation,
+      configurable: true,
+      writable: true,
+    })
+    globalThis.window = realWindow
+  }
+}
+
+afterEach(() => {
+  delete (globalThis as RuntimeGlobal).__RADAR_RUNTIME_CONFIG__
+})
+
+describe('assetUrl at the root (no base path)', () => {
+  it('leaves absolute paths untouched', () => {
+    expect(assetUrl('/images/radar/radar-icon.svg')).toBe('/images/radar/radar-icon.svg')
+  })
+
+  it('makes Vite-relative asset paths absolute', () => {
+    expect(assetUrl('./assets/index-abc.js')).toBe('/assets/index-abc.js')
+    expect(assetUrl('assets/index-abc.js')).toBe('/assets/index-abc.js')
+  })
+
+  it('unwraps the webpack/Next StaticImageData shape', () => {
+    expect(assetUrl({ src: '/_next/static/x.png' })).toBe('/_next/static/x.png')
+  })
+
+  // An app route may contain an "/assets/" segment (e.g. a namespace named
+  // "assets"). That must not be mistaken for a base path.
+  it('ignores an /assets/ segment in the current app route', () => {
+    expect(assetUrl('/images/radar/radar-icon.svg')).toBe('/images/radar/radar-icon.svg')
+  })
+})
+
+describe('assetUrl under a base path', () => {
+  it('prefixes absolute and relative asset paths', () => {
+    setAssetBase('/radar')
+    expect(assetUrl('/images/radar/radar-icon.svg')).toBe('/radar/images/radar/radar-icon.svg')
+    expect(assetUrl('./assets/index-abc.js')).toBe('/radar/assets/index-abc.js')
+    expect(assetUrl('assets/index-abc.js')).toBe('/radar/assets/index-abc.js')
+  })
+
+  it('is idempotent for already-prefixed paths', () => {
+    setAssetBase('/radar')
+    expect(assetUrl('/radar/assets/index-abc.js')).toBe('/radar/assets/index-abc.js')
+  })
+
+  it('leaves protocol-relative URLs alone', () => {
+    setAssetBase('/radar')
+    expect(assetUrl('//cdn.example.com/x.png')).toBe('//cdn.example.com/x.png')
+  })
+
+  it('handles a nested base path', () => {
+    setAssetBase('/tools/radar')
+    expect(assetUrl('/favicon.svg')).toBe('/tools/radar/favicon.svg')
+  })
+})
+
+describe('assetUrl inside a Worker', () => {
+  it('recovers the base path from the worker script URL', () => {
+    asWorkerAt('/radar/assets/layout.worker-abc.js', () => {
+      expect(assetUrl('/images/x.svg')).toBe('/radar/images/x.svg')
+    })
+  })
+
+  it('resolves to the root when the worker is served from the root', () => {
+    asWorkerAt('/assets/layout.worker-abc.js', () => {
+      expect(assetUrl('/images/x.svg')).toBe('/images/x.svg')
+    })
+  })
+
+  // The base path may itself contain "/assets/" — split on the last one.
+  it('splits on the last /assets/ segment', () => {
+    asWorkerAt('/host/assets/radar/assets/layout.worker-abc.js', () => {
+      expect(assetUrl('/images/x.svg')).toBe('/host/assets/radar/images/x.svg')
+    })
+  })
+
+  it('prefers the injected config over the URL heuristic', () => {
+    setAssetBase('/radar')
+    asWorkerAt('/somewhere/assets/worker.js', () => {
+      expect(assetUrl('/images/x.svg')).toBe('/radar/images/x.svg')
+    })
+  })
+})

package/src/utils/asset-url.ts

@@ -9,5 +9,37 @@
 export type AssetImport = string | { src: string }
 
 export function assetUrl(asset: AssetImport): string {
-  return typeof asset === 'string' ? asset : asset.src
+  const url = typeof asset === 'string' ? asset : asset.src
+  const assetBase = getRuntimeAssetBase()
+  if (!assetBase || url.startsWith('//') || url === assetBase || url.startsWith(`${assetBase}/`)) {
+    if (url.startsWith('./assets/')) return `/assets/${url.slice('./assets/'.length)}`
+    if (url.startsWith('assets/')) return `/${url}`
+    return url
+  }
+  if (url.startsWith('./')) return `${assetBase}/${url.slice(2)}`
+  if (!url.startsWith('/') && url.startsWith('assets/')) return `${assetBase}/${url}`
+  if (!url.startsWith('/')) return url
+  return `${assetBase}${url}`
+}
+
+function getRuntimeAssetBase(): string {
+  if (typeof globalThis === 'undefined') return ''
+  const runtime = (globalThis as typeof globalThis & {
+    __RADAR_RUNTIME_CONFIG__?: { assetBase?: string }
+  }).__RADAR_RUNTIME_CONFIG__
+  const configured = runtime?.assetBase?.replace(/\/+$/, '')
+  if (configured) return configured
+
+  // A Worker has its own global scope, so it never sees the runtime config the
+  // server injects into index.html — but its own script URL sits at
+  // `<base>/assets/<chunk>.js`, so the base can be recovered from it. Restricted
+  // to worker scopes on purpose: on the main thread `pathname` is an app route,
+  // which may legitimately contain an "/assets/" segment (a namespace or
+  // resource named "assets") and would yield a bogus prefix for every asset.
+  if (typeof window !== 'undefined') return ''
+  const pathname = globalThis.location?.pathname ?? ''
+  // lastIndexOf, not indexOf: the base path itself may contain "/assets/".
+  const assetsIndex = pathname.lastIndexOf('/assets/')
+  if (assetsIndex > 0) return pathname.slice(0, assetsIndex)
+  return ''
 }

package/src/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './format'
 export * from './pluralize'
+export * from './asset-url'
 export * from './badge-colors'
 export * from './resource-icons'
 export * from './navigation'