@skyhook-io/k8s-ui 1.17.0 → 1.18.0

package/src/components/workload/WorkloadView.tsx

@@ -90,6 +90,8 @@ export interface WorkloadExtraTab {
   icon?: ReactNode
   after?: WorkloadTabType
   replaces?: WorkloadTabType
+  /** Trailing adornment after the label, e.g. a status mark. */
+  badge?: ReactNode
   render: () => ReactNode
 }
 
@@ -145,6 +147,23 @@ interface WorkloadViewProps {
    * the Escape shortcut.
    */
   breadcrumb?: ReactNode
+  /** Where the object lives, shown on the title line before its name (e.g. "Workspace / View /"). */
+  titlePrefix?: ReactNode
+  /**
+   * Kind, status and namespace on the title line, wrapping below the name
+   * only when there is no room; other chips (image, owners) keep a second
+   * row. The header actions then wrap below the title as a group rather
+   * than squeezing it.
+   */
+  inlineBadges?: boolean
+  /** A note right after the namespace, e.g. that it is outside the namespace filter. */
+  namespaceNote?: ReactNode
+  /** Replaces the derived status badge on the title line, e.g. with the controller's own reported phase. */
+  renderStatusBadge?: (resource: any) => ReactNode
+  /** A short status right after the controller status on the title line, e.g. a derived health verdict. */
+  statusNote?: ReactNode
+  /** Leave out the kind badge, for a host whose title prefix already names the kind. */
+  hideKindBadge?: boolean
   /** Suppress the standalone back arrow — for embeddings where "back" has no
    *  meaningful target (a single-workload app has no app graph to return to). */
   hideBackButton?: boolean
@@ -319,6 +338,14 @@ interface WorkloadViewProps {
   }) => ReactNode
   /** Extra tabs for the expanded view (e.g. a domain's own sections). */
   extraTabs?: WorkloadExtraTab[]
+  /** Expanded view: a line under the title, above the tabs, shown on every tab. */
+  subheader?: ReactNode
+  /** Expanded view: tab ids in display order; tabs not listed follow in their usual order. */
+  tabOrder?: string[]
+  /** Expanded view: relabel, lead, or replace the whole "Spec & status" body. */
+  specTab?: { label?: string; icon?: ReactNode; lead?: ReactNode; render?: () => ReactNode }
+  /** Domain actions rendered in the header (drawer and expanded). */
+  renderHeaderActions?: (props: { resource: any; context: 'drawer' | 'expanded'; onNavigate?: NavigateToResource }) => ReactNode
   /** Render a full replacement for the expanded Overview tab. */
   renderExpandedOverview?: (props: {
     kind: string
@@ -326,6 +353,8 @@ interface WorkloadViewProps {
     namespace: string
     name: string
     resource: any
+    /** Place resource notices within the replacement layout's content area. */
+    leadContent?: ReactNode
   }) => ReactNode
   /** Render the metrics tab content */
   renderMetricsTab?: (props: { kind: string; namespace: string; name: string }) => ReactNode
@@ -371,6 +400,8 @@ interface WorkloadViewProps {
    *  live issues for this resource). Avoids showing the same failure twice.
    *  Also gates the `renderOverviewLead` wrapper (see above). */
   hasOperationalIssues?: boolean
+  /** Also show the lead for neutral context without suppressing renderer problems. */
+  hasOverviewLead?: boolean
   /** True while the live-issues fetch is still pending. Renderers suppress their
    *  banners during this window too — a banner whose failure the pipeline covers
    *  would otherwise flash on first paint before the issues arrive and hide it. */
@@ -409,6 +440,12 @@ export function WorkloadView({
   initialTab,
   group,
   breadcrumb,
+  titlePrefix,
+  inlineBadges = false,
+  namespaceNote,
+  renderStatusBadge,
+  statusNote,
+  hideKindBadge = false,
   hideBackButton,
   scopeControls,
   compactHeader,
@@ -469,6 +506,10 @@ export function WorkloadView({
   renderExpandedOverview,
   renderSummary,
   extraTabs,
+  tabOrder,
+  specTab,
+  subheader,
+  renderHeaderActions,
   renderRelatedYaml,
   renderMetricsTab,
   renderCostTab,
@@ -481,6 +522,7 @@ export function WorkloadView({
   renderOverviewIntro,
   renderOverviewLead,
   hasOperationalIssues,
+  hasOverviewLead,
   operationalIssuesPending,
   // Actions bar
   actionsBarProps,
@@ -794,6 +836,9 @@ export function WorkloadView({
   const renderOverviewLeadForState = resourceGone ? undefined : renderOverviewLead
   const renderOverviewExtraForState = resourceGone ? undefined : renderOverviewExtra
   const renderDiagnoseTabForState = resourceGone ? undefined : renderDiagnoseTab
+  // A host's summary, tabs and subheader can hold actions on the live object.
+  const renderSummaryForState = resourceGone ? undefined : renderSummary
+  const extraTabsForState = resourceGone ? undefined : extraTabs
   // A remount closes any dialog the bar had open: once its actions are gone,
   // a confirm button left on screen would do nothing.
   const actionsBarKey = resourceGone ? 'gone' : 'live'
@@ -830,6 +875,7 @@ export function WorkloadView({
   const renderDiagnose = actionsBarProps?.renderDiagnose as
     | ((ctx: { kind: string; group?: string; namespace: string; name: string; health?: DiagnoseHealthHint }) => ReactNode)
     | undefined
+  const headerActions = resource && !resourceGone && renderHeaderActions?.({ resource, context: expanded ? 'expanded' : 'drawer', onNavigate: onNavigateToResource })
   const diagnoseAction = resourceGone ? null : renderDiagnose?.({
     kind: resource?.kind ?? knownKindForPluralWithGroup(apiKind, group ?? '') ?? apiKind,
     group,
@@ -849,11 +895,11 @@ export function WorkloadView({
   const logsFallbackReady = !renderLogsTab || (!logsTabVisible && !podEvidenceLoading)
   const requestedTab: TabType = activeTab
   const summaryContext = { kind, apiKind, namespace, name, group, resource, onNavigate: onNavigateToResource }
-  const expandedSummary = expanded && resource ? renderSummary?.({ ...summaryContext, context: 'expanded' }) ?? null : null
-  const drawerSummary = !expanded && resource ? renderSummary?.({ ...summaryContext, context: 'drawer' }) ?? null : null
+  const expandedSummary = expanded && resource ? renderSummaryForState?.({ ...summaryContext, context: 'expanded' }) ?? null : null
+  const drawerSummary = !expanded && resource ? renderSummaryForState?.({ ...summaryContext, context: 'drawer' }) ?? null : null
   const tabs: DetailShellTab<TabType>[] = [
     { id: 'overview', label: 'Overview', icon: <Layers className="w-4 h-4" /> },
-    { id: 'spec', label: 'Spec & status', icon: <FileText className="w-4 h-4" />, hidden: !expandedSummary },
+    { id: 'spec', label: specTab?.label ?? 'Spec & status', icon: specTab?.icon ?? <FileText className="w-4 h-4" />, hidden: !expandedSummary },
     { id: 'topology', label: 'Topology', icon: <Network className="w-4 h-4" />, hidden: topologyTabHidden },
     {
       id: 'timeline',
@@ -872,10 +918,10 @@ export function WorkloadView({
     { id: 'cost', label: 'Cost', icon: <Coins className="w-4 h-4" />, hidden: !costTabVisible },
     { id: 'yaml', label: 'YAML', icon: <FileText className="w-4 h-4" /> },
   ]
-  const allTabs = mergeExtraTabs(tabs, expanded ? extraTabs : undefined)
+  const allTabs = orderTabs(mergeExtraTabs(tabs, expanded ? extraTabsForState : undefined), expanded ? tabOrder : undefined)
   const requestedTabAvailable = allTabs.some((tab) => tab.id === requestedTab && !tab.hidden)
   const effectiveTab: TabType = requestedTabAvailable ? requestedTab : 'overview'
-  const activeExtraTab = expanded ? extraTabs?.find((x) => x.id === effectiveTab) : undefined
+  const activeExtraTab = expanded ? extraTabsForState?.find((x) => x.id === effectiveTab) : undefined
   const shouldCommitFallback =
     requestedTab !== 'overview' &&
     !requestedTabAvailable &&
@@ -889,7 +935,12 @@ export function WorkloadView({
   useEffect(() => {
     if (shouldCommitFallback && activeTab !== 'overview') onTabChange?.('overview', { replace: true })
   }, [activeTab, onTabChange, shouldCommitFallback])
-  const expandedOverview = expanded ? renderExpandedOverview?.({ kind, apiKind, namespace, name, resource }) : null
+  const expandedOverview = expanded ? renderExpandedOverview?.({
+    kind, apiKind, namespace, name, resource,
+    leadContent: (hasOverviewLead ?? hasOperationalIssues) && renderOverviewLeadForState
+      ? renderOverviewLeadForState({ kind, namespace, name })
+      : undefined,
+  }) : null
   const overviewIntro = renderOverviewIntro?.({ kind, namespace, name })
 
   // ── Collapsed (drawer) mode ──────────────────────────────────────────────
@@ -904,13 +955,13 @@ export function WorkloadView({
               <span className={clsx('badge', getKindColorOutline(apiKind))}>
                 {displayKindName(apiKind, resource?.kind)}
               </span>
-              {status && (
+              {renderStatusBadge && resource && !resourceGone ? renderStatusBadge(resource) : status && (
                 <span className={clsx('badge', status.color)}>
                   {status.text}
                 </span>
               )}
             </div>
-            <div className="flex items-center gap-1.5">
+            <div className="flex shrink-0 flex-nowrap items-center justify-end gap-1.5">
               {diagnoseAction}
               {onExpand && (
                 <Tooltip content="Open full view" delay={150} position="bottom">
@@ -982,7 +1033,7 @@ export function WorkloadView({
           </div>
 
           {/* Actions bar */}
-          <ResourceActionsBar key={actionsBarKey} resource={selectedResource} data={resource} onClose={onClose} showYaml={showYaml} onToggleYaml={() => switchView(!showYaml)} {...actionsBarPropsForState} />
+          <ResourceActionsBar key={actionsBarKey} resource={selectedResource} data={resource} onClose={onClose} showYaml={showYaml} onToggleYaml={() => switchView(!showYaml)} {...actionsBarPropsForState} leadingActions={headerActions} />
         </div>
 
         {/* Success animation overlay */}
@@ -1049,11 +1100,12 @@ export function WorkloadView({
                 drawerSummary
               ) : (
               <>
-              {renderOverviewLeadForState && hasOperationalIssues && (
+              {renderOverviewLeadForState && (hasOverviewLead ?? hasOperationalIssues) && (
                 <div className="px-4 pt-4">
                   {renderOverviewLeadForState({ kind, namespace, name })}
                 </div>
               )}
+              {overviewIntro && <div className="px-4 pt-4">{overviewIntro}</div>}
               <ResourceRendererDispatch
                 resource={selectedResource}
                 data={resource}
@@ -1091,6 +1143,8 @@ export function WorkloadView({
     <OperationalIssuesShownContext.Provider value={!!hasOperationalIssues || !!operationalIssuesPending}>
     <DetailShell
       breadcrumb={breadcrumb}
+      wrapHeader={inlineBadges}
+      subheader={resourceGone ? undefined : subheader}
       nav={
         breadcrumb || hideBackButton ? undefined : (
           <Tooltip content="Go back (Esc)" delay={150} position="bottom">
@@ -1104,68 +1158,111 @@ export function WorkloadView({
           </Tooltip>
         )
       }
-      identity={
-        <>
-          {showOwnershipHeading && ownershipContext ? (
-            <OwnershipHeading
-              podName={name}
-              context={ownershipContext}
-              copied={copied === 'name'}
-              onCopy={() => copyToClipboard(name, 'name')}
-              onNavigateToResource={onNavigateToResource}
-              onOpenApplication={onOpenApplication}
-            />
-          ) : (
-            <div className="flex items-center gap-3 mb-1">
-              <h1 className="text-lg font-semibold text-theme-text-primary truncate">{name}</h1>
-              <Tooltip content="Copy name" delay={150}>
-                <button
-                  onClick={() => copyToClipboard(name, 'name')}
-                  className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded shrink-0"
-                  aria-label="Copy name"
-                >
-                  {copied === 'name' ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
-                </button>
-              </Tooltip>
-            </div>
-          )}
-          <div className="flex items-center gap-3 text-sm text-theme-text-secondary">
-            <span className={clsx('badge', getKindColorOutline(apiKind))}>
-              {displayKindName(apiKind, resource?.kind)}
-            </span>
-            {status && (
-              <span className={clsx('badge', status.color)}>
+      identity={(() => {
+        const nameAndCopy = (
+          <>
+            <h1 className="text-lg font-semibold text-theme-text-primary truncate">{name}</h1>
+            <Tooltip content="Copy name" delay={150}>
+              <button
+                onClick={() => copyToClipboard(name, 'name')}
+                className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded shrink-0"
+                aria-label="Copy name"
+              >
+                {copied === 'name' ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
+              </button>
+            </Tooltip>
+          </>
+        )
+        const kindAndStatus = (
+          <>
+            {!hideKindBadge && (
+              <span className={clsx('badge whitespace-nowrap', getKindColorOutline(apiKind))}>
+                {displayKindName(apiKind, resource?.kind)}
+              </span>
+            )}
+            {renderStatusBadge && resource && !resourceGone ? renderStatusBadge(resource) : status && (
+              <span className={clsx('badge whitespace-nowrap', status.color)}>
                 {status.text}
               </span>
             )}
+            {!resourceGone && statusNote}
+          </>
+        )
+        const coreBadges = (
+          <>
+            {/* On the title line the kind and status wrap together, never apart. */}
+            {inlineBadges ? <span className="inline-flex items-center gap-x-3">{kindAndStatus}</span> : kindAndStatus}
             {namespace && namespace !== '_' && (
-              <span>Namespace: <span className="text-theme-text-primary">{namespace}</span></span>
-            )}
-            {headerImage && (
-              <Tooltip content={headerImage} delay={300} wrapperClassName="min-w-0 max-w-md">
-                <span className="truncate font-mono text-xs">
-                  {midTruncate(headerImage, 72)}
-                </span>
-              </Tooltip>
-            )}
-            {gitopsOwner && (
-              <ManagedByChip owner={gitopsOwner} status={gitOpsOwnerStatus} verified={gitOpsOwnerVerified} pending={gitOpsOwnerPending} source={gitOpsOwnerSource} onOpen={onOpenGitOpsResource} variant="block" />
-            )}
-            {helmOwner && (
-              <HelmManagedByChip owner={helmOwner} source={helmOwnerSource} onOpen={onOpenHelmRelease} variant="block" />
+              <span className="whitespace-nowrap">Namespace: <span className="text-theme-text-primary">{namespace}</span></span>
             )}
-            {gitOpsResourcePath && onNavigateGitOpsPath && (
-              <OpenInGitOpsChip onClick={() => onNavigateGitOpsPath(gitOpsResourcePath)} />
-            )}
-            {onOpenLiveTraffic && <LiveTrafficChip onClick={onOpenLiveTraffic} />}
-            {relationships?.owner && !showOwnershipHeading && (
-              <span>Owner: <button onClick={() => onNavigateToResource?.(refToSelectedResource(relationships.owner!))} className="text-blue-500 hover:underline">{relationships.owner.name}</button></span>
+            {namespace && namespace !== '_' && namespaceNote}
+          </>
+        )
+        const extraChips = [
+          headerImage && (
+            <Tooltip key="image" content={headerImage} delay={300} wrapperClassName="min-w-0 max-w-md">
+              <span className="truncate font-mono text-xs">
+                {midTruncate(headerImage, 72)}
+              </span>
+            </Tooltip>
+          ),
+          gitopsOwner && (
+            <ManagedByChip key="gitops" owner={gitopsOwner} status={gitOpsOwnerStatus} verified={gitOpsOwnerVerified} pending={gitOpsOwnerPending} source={gitOpsOwnerSource} onOpen={onOpenGitOpsResource} variant="block" />
+          ),
+          helmOwner && (
+            <HelmManagedByChip key="helm" owner={helmOwner} source={helmOwnerSource} onOpen={onOpenHelmRelease} variant="block" />
+          ),
+          gitOpsResourcePath && onNavigateGitOpsPath && (
+            <OpenInGitOpsChip key="open-gitops" onClick={() => onNavigateGitOpsPath(gitOpsResourcePath)} />
+          ),
+          onOpenLiveTraffic && <LiveTrafficChip key="live-traffic" onClick={onOpenLiveTraffic} />,
+          relationships?.owner && !showOwnershipHeading && (
+            <span key="owner">Owner: <button onClick={() => onNavigateToResource?.(refToSelectedResource(relationships.owner!))} className="text-blue-500 hover:underline">{relationships.owner.name}</button></span>
+          ),
+        ].filter(Boolean)
+        if (inlineBadges && !(showOwnershipHeading && ownershipContext)) {
+          // The name and its copy button stay together and truncate only when
+          // the line holds nothing else; the badges wrap below before that.
+          return (
+            <>
+              <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-theme-text-secondary">
+                {titlePrefix}
+                <div className="flex min-w-0 max-w-full items-center gap-2">{nameAndCopy}</div>
+                {coreBadges}
+              </div>
+              {extraChips.length > 0 && (
+                <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-theme-text-secondary">{extraChips}</div>
+              )}
+            </>
+          )
+        }
+        return (
+          <>
+            {showOwnershipHeading && ownershipContext ? (
+              <OwnershipHeading
+                podName={name}
+                context={ownershipContext}
+                copied={copied === 'name'}
+                onCopy={() => copyToClipboard(name, 'name')}
+                onNavigateToResource={onNavigateToResource}
+                onOpenApplication={onOpenApplication}
+              />
+            ) : (
+              <div className="flex items-center gap-3 mb-1">
+                {titlePrefix}
+                {nameAndCopy}
+              </div>
             )}
-          </div>
-        </>
-      }
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-theme-text-secondary">
+              {coreBadges}
+              {extraChips}
+            </div>
+          </>
+        )
+      })()}
       headerActions={
         <>
+          {headerActions}
           {diagnoseAction}
           <Tooltip content="Refresh" delay={150} position="bottom">
             <button
@@ -1217,13 +1314,10 @@ export function WorkloadView({
           <div className="h-full min-h-0 overflow-y-auto">{expandedSummary}</div>
         ) : effectiveTab === 'overview' && expandedOverview ? (
           <div className="h-full min-h-0">
-            {hasOperationalIssues && renderOverviewLeadForState && (
-              <div className="px-4 pt-4">
-                {renderOverviewLeadForState({ kind, namespace, name })}
-              </div>
-            )}
             {expandedOverview}
           </div>
+        ) : effectiveTab === 'spec' && specTab?.render && !resourceGone ? (
+          <div className="h-full min-h-0 overflow-y-auto">{specTab.render()}</div>
         ) : (effectiveTab === 'overview' || effectiveTab === 'spec') && (
             <InfoTab
               resource={resource}
@@ -1258,7 +1352,14 @@ export function WorkloadView({
               updatesError={resourceFocusedUpdatesError}
               extraContent={renderOverviewExtraForState && renderOverviewExtraForState({ kind, namespace, name, group, context: 'expanded' })}
               introContent={overviewIntro}
-              leadContent={hasOperationalIssues && renderOverviewLeadForState ? renderOverviewLeadForState({ kind, namespace, name }) : undefined}
+              leadContent={
+                // A host's spec lead replaces the operational issues there: its Overview already leads with them.
+                effectiveTab === 'spec' && specTab?.lead
+                  ? specTab.lead
+                  : (hasOverviewLead ?? hasOperationalIssues) && renderOverviewLeadForState
+                    ? renderOverviewLeadForState({ kind, namespace, name })
+                    : undefined
+              }
               onEvaluateCapacity={onEvaluateCapacity}
               recentImageSave={recentImageSave}
             />
@@ -2110,6 +2211,7 @@ function WorkloadOverviewTab({
   const relationshipGroups = buildRelationshipGroups(relationships)
   const servingRelationshipGroups = buildServingRelationshipGroups(relationships)
   const dependencyRelationshipGroups = buildDependencyRelationshipGroups(relationships)
+  const observationGroups = dependencyRelationshipGroups.filter((group) => group.label === 'Monitored By' || group.label === 'Staged Policies')
   const showServingPath = servingRelationshipGroups.length > 0 && overviewShape !== 'job' && overviewShape !== 'cronjob'
   const secondaryRelationshipGroups = showServingPath ? dependencyRelationshipGroups : relationshipGroups
   const relationshipCardTitle =
@@ -2188,6 +2290,14 @@ function WorkloadOverviewTab({
                     onNavigate={onNavigate}
                     onSwitchToTopology={onSwitchToTopology}
                   />
+                  {observationGroups.length > 0 && (
+                    <ServingDependenciesCard
+                      title="Related resources"
+                      groups={observationGroups}
+                      onNavigate={onNavigate}
+                      onSwitchToTopology={onSwitchToTopology}
+                    />
+                  )}
                   {extraContent}
                 </div>
               </div>
@@ -3877,6 +3987,7 @@ function buildServingRelationshipGroups(relationships: Relationships | undefined
     ...(relationships.ingresses ?? []),
     ...(relationships.gateways ?? []),
     ...(relationships.routes ?? []),
+    ...(relationships.routedFrom ?? []),
   ])
   return [
     { label: 'Services', refs: dedupeResourceRefs(relationships.services ?? []) },
@@ -3891,6 +4002,8 @@ function buildDependencyRelationshipGroups(relationships: Relationships | undefi
     { label: 'Autoscalers', refs: dedupeResourceRefs(relationships.scalers ?? []) },
     { label: 'Disruption budgets', refs: dedupeResourceRefs(relationships.pdbs ?? []) },
     { label: 'Network policies', refs: dedupeResourceRefs(relationships.networkPolicies ?? []) },
+    { label: 'Staged Policies', refs: dedupeResourceRefs(relationships.stagedPolicies ?? []) },
+    { label: 'Monitored By', refs: dedupeResourceRefs(relationships.monitors ?? []) },
     { label: 'Storage claims', refs: dedupeResourceRefs(relationships.resourceClaims ?? []) },
   ].filter((group) => group.refs.length > 0)
 }
@@ -3990,12 +4103,21 @@ function mergeAndRankEvents(events: TimelineEvent[], updates: TimelineEvent[]):
     })
 }
 
+function orderTabs(tabs: DetailShellTab<TabType>[], order: string[] | undefined): DetailShellTab<TabType>[] {
+  if (!order || order.length === 0) return tabs
+  const rank = (id: string) => {
+    const i = order.indexOf(id)
+    return i < 0 ? order.length : i
+  }
+  return tabs.map((t, i) => ({ t, i })).sort((a, b) => rank(a.t.id) - rank(b.t.id) || a.i - b.i).map((x) => x.t)
+}
+
 function mergeExtraTabs(tabs: DetailShellTab<TabType>[], extra: WorkloadExtraTab[] | undefined): DetailShellTab<TabType>[] {
   if (!extra || extra.length === 0) return tabs
   const replaced = new Set(extra.map((x) => x.replaces).filter(Boolean))
   const out = tabs.map((t) => (replaced.has(t.id) ? { ...t, hidden: true } : t))
   for (const x of extra) {
-    const tab: DetailShellTab<TabType> = { id: x.id as TabType, label: x.label, icon: x.icon }
+    const tab: DetailShellTab<TabType> = { id: x.id as TabType, label: x.label, icon: x.icon, badge: x.badge }
     const anchor = x.after ?? x.replaces
     const idx = anchor ? out.findIndex((t) => t.id === anchor) : -1
     if (idx >= 0) out.splice(idx + 1, 0, tab)

package/src/index.ts

@@ -55,7 +55,7 @@ export * from './components/checks'
 // queue)
 export * from './components/issues'
 
-// CloudNativePG workspace model (fleet derivation over /api/cnpg/workspace)
+// CloudNativePG workspace model (fleet derivation over /api/cnpg/workspace) and summaries
 export * from './components/cnpg'
 
 // Cluster switcher (shared trigger+dropdown for OSS Radar and Radar Hub)
@@ -82,3 +82,16 @@ export * from './components/compare'
 
 // Perf instrumentation (ELK + structureKey timers, surfaced in diagnostics overlay)
 export * from './perf'
+
+export { CertaintyGlyph, certaintyGlyph, certaintyValueLabel, type Certainty } from './components/facts/certainty'
+
+export * from './components/facts'
+export {
+  WorkspaceProblemCallout,
+  ProblemList,
+  ProblemMeta,
+  OpenIssueContext,
+  problemOriginLabel,
+  type WorkspaceProblem,
+  type ProblemOrigin,
+} from './components/problems'

package/src/monaco-deep.d.ts

@@ -1,15 +1,22 @@
+// @monaco-editor/react and @monaco-editor/loader type monaco through this path,
+// which monaco-editor's exports map does not serve.
 declare module 'monaco-editor/esm/vs/editor/editor.api' {
-  export * from 'monaco-editor'
+  export * from 'monaco-editor/editor/editor.api'
 }
 
-declare module 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'
-declare module 'monaco-editor/esm/vs/basic-languages/xml/xml.contribution'
-declare module 'monaco-editor/esm/vs/basic-languages/html/html.contribution'
-declare module 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
-declare module 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
-declare module 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
-declare module 'monaco-editor/esm/vs/basic-languages/python/python.contribution'
-declare module 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution'
-declare module 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution'
-declare module 'monaco-editor/esm/vs/basic-languages/ini/ini.contribution'
-declare module 'monaco-editor/esm/vs/basic-languages/dockerfile/dockerfile.contribution'
+declare module 'monaco-editor/languages/definitions/yaml/register'
+declare module 'monaco-editor/languages/definitions/xml/register'
+declare module 'monaco-editor/languages/definitions/html/register'
+declare module 'monaco-editor/languages/definitions/css/register'
+declare module 'monaco-editor/languages/definitions/javascript/register'
+declare module 'monaco-editor/languages/definitions/typescript/register'
+declare module 'monaco-editor/languages/definitions/python/register'
+declare module 'monaco-editor/languages/definitions/shell/register'
+declare module 'monaco-editor/languages/definitions/markdown/register'
+declare module 'monaco-editor/languages/definitions/ini/register'
+declare module 'monaco-editor/languages/definitions/dockerfile/register'
+declare module 'monaco-editor/editor/contrib/*'
+declare module 'monaco-editor/editor/standalone/*'
+declare module 'monaco-editor/editor/browser/*'
+declare module 'monaco-editor/editor/common/*'
+declare module 'monaco-editor/features/*'

package/src/theme/components.css

@@ -35,6 +35,19 @@
     opacity: 0.5;
   }
 
+  .btn-secondary {
+    border: 1px solid var(--border-default);
+    background-color: var(--bg-surface);
+    color: var(--text-primary);
+    border-radius: 0.625rem;
+  }
+  .btn-secondary:hover {
+    background-color: var(--bg-hover);
+  }
+  .btn-secondary:disabled {
+    opacity: 0.5;
+  }
+
   .btn-brand-toggle {
     background-color: color-mix(in srgb, var(--color-brand) 50%, transparent);
     color: var(--text-primary);

package/src/types/capacity.ts

@@ -1,4 +1,5 @@
 import type { Issue } from "../components/issues/types";
+import type { Certainty } from "../components/facts/certainty";
 import type { NodeLifecycleObservation } from "../utils/node-lifecycle";
 
 export const CAPACITY_SCHEMA_VERSION = "v1alpha1" as const;
@@ -16,8 +17,7 @@ export interface CapacityResourceIdentity {
   uid?: string;
 }
 
-export type CapacityCertainty =
-  "exact" | "lower_bound" | "upper_bound" | "unknown";
+export type CapacityCertainty = Certainty;
 export type CapacityGranularity =
   "aggregate" | "aggregate_not_binpacked" | "per_node";
 export type CapacityResourceVector = Record<string, string>;
@@ -418,6 +418,14 @@ export interface CapacityScalingFact {
   summary: string;
 }
 
+/** Published scale-down observations; candidates do not imply a removal ETA. */
+export interface CapacityAutoscalerScaleDown {
+  status?: string;
+  candidates?: number;
+  lastTransitionTime?: string;
+  asOf?: string;
+}
+
 export interface CapacityAutoscalerBackoff {
   errorClass?: string;
   errorCode?: string;
@@ -440,6 +448,7 @@ export interface CapacityAutoscalerChildObservation {
   readyNodes?: number;
   totalNodes?: number;
   backoff?: CapacityAutoscalerBackoff;
+  scaleDown?: CapacityAutoscalerScaleDown;
   asOf?: string;
 }