@skyhook-io/radar-app 1.14.2 → 1.14.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.14.2",
+  "version": "1.14.3",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
-    "@skyhook-io/k8s-ui": ">=1.14.7",
+    "@skyhook-io/k8s-ui": ">=1.14.8",
     "@tanstack/react-query": ">=5",
     "@xyflow/react": ">=12.0.0",
     "clsx": ">=2",

package/src/api/client.ts

@@ -2048,6 +2048,36 @@ export function useCloudConnectSelf(enabled: boolean) {
   })
 }
 
+// What the driver-lane dialog learns about the cluster when it opens: the
+// chart's Deployments already carrying Cloud connection settings, so a
+// cluster that is already connected is pointed at rather than re-offered.
+export interface CloudInstallConnectedRadar {
+  namespace: string
+  deployment: string
+  release?: string
+  // The Hub the Deployment names, when it is not the one this Radar uses.
+  hubHost?: string
+  // The cluster's page in Radar Cloud, when its Hub is ours and its id is known.
+  clusterUrl?: string
+}
+
+export interface CloudInstallDiscovered {
+  connected: CloudInstallConnectedRadar[]
+  partialScan: boolean
+}
+
+// Keyed by context: a switch must not describe the previous cluster.
+export function useCloudInstallDiscover(enabled: boolean, contextName: string | undefined) {
+  return useQuery<CloudInstallDiscovered>({
+    queryKey: ['cloud-install-discover', contextName],
+    queryFn: () => fetchJSON('/cloud/install/discover'),
+    enabled,
+    staleTime: 0,
+    gcTime: 0,
+    retry: false,
+  })
+}
+
 export function prepareCloudInstall(): Promise<CloudInstallStatus> {
   return fetchJSON('/cloud/install/prepare', { method: 'POST' })
 }

package/src/components/CloudConnectFlow.tsx

@@ -1,9 +1,10 @@
 import { type ReactNode, useEffect, useRef, useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
 import { AlertTriangle, ArrowUpRight, Check, Copy, ExternalLink, GitBranch, Info, Loader2, ShieldAlert, X } from 'lucide-react'
-import { type AdminNoteContext, type BlockedExit, composeAdminNote, composeFailureNote, needsAdminHandoff } from './cloudConnectHandoff'
+import { type AdminNoteContext, type BlockedExit, composeAdminNote, composeFailureNote, needsAdminHandoff, trimRefusal } from './cloudConnectHandoff'
 import { copyText } from '@skyhook-io/k8s-ui/utils/clipboard'
 import { Collapse, CollapseChevron } from '@skyhook-io/k8s-ui/components/ui/Collapse'
+import { Tooltip } from './ui/Tooltip'
 import {
   ApiError,
   cancelCloudInstall,
@@ -264,15 +265,28 @@ function BlockedSection({ label, children }: { label: string; children: ReactNod
   )
 }
 
+// Each line is a Go error chain; the card shows what was attempted and why
+// it was refused, with the whole chain a hover away.
 function BlockingLines({ lines }: { lines: string[] }) {
   return (
     <ul className="mt-1.5 space-y-1 text-[11.5px] text-theme-text-tertiary">
-      {lines.map((line) => (
-        <li key={line} className="flex items-start gap-1.5">
-          <span className="mt-[6px] w-1 h-1 rounded-full bg-amber-500 shrink-0" />
-          {line}
-        </li>
-      ))}
+      {lines.map((line) => {
+        const shown = trimRefusal(line)
+        return (
+          <li key={line} className="flex items-start gap-1.5">
+            <span className="mt-[6px] w-1 h-1 rounded-full bg-amber-500 shrink-0" />
+            <Tooltip
+              content={line}
+              position="bottom"
+              className="max-w-md whitespace-normal"
+              // Off when the trim only added the period, so the hover never repeats the line.
+              disabled={shown === line.trim().replace(/\.?$/, '.')}
+            >
+              <span>{shown}</span>
+            </Tooltip>
+          </li>
+        )
+      })}
     </ul>
   )
 }

package/src/components/CloudFunnelButton.tsx

@@ -7,6 +7,7 @@ import { Tooltip } from './ui/Tooltip'
 import { CloudConnectFlow } from './CloudConnectFlow'
 import {
   type Handoff,
+  SELF_HOSTED_DOCS_URL,
   exitFor,
   handoffForBlocked,
   handoffForPrepareError,
@@ -18,12 +19,14 @@ import {
   ApiError,
   cloudInstallActive,
   type CloudConnectSelf,
+  type CloudInstallConnectedRadar,
   type CloudInstallBlocked,
   type CloudInstallStatus,
   prepareCloudInstall,
   useCapabilities,
   useCloudConnectInfo,
   useCloudConnectSelf,
+  useCloudInstallDiscover,
   useCloudInstallStatus,
   useClusterInfo,
 } from '../api/client'
@@ -68,7 +71,6 @@ export function openCloudFunnel() {
 }
 const ABOUT_URL = 'https://radarhq.io/about'
 const PRICING_URL = 'https://radarhq.io/pricing'
-const SELF_HOSTED_DOCS_URL = 'https://radarhq.io/docs/cloud/self-hosted/'
 const SEEN_KEY = 'radar.cloudFunnel.seen'
 
 // localStorage access can throw (SecurityError) where storage is denied —
@@ -109,6 +111,7 @@ export function CloudFunnelButton() {
   const prepareFailed = handoff?.retryable ?? false
 
   const capabilities = useCapabilities()
+  const clusterInfo = useClusterInfo()
   const lane = capabilities.data?.cloudConnect?.lane ?? 'wizard'
   const appUrl = capabilities.data?.cloudConnect?.appUrl || FALLBACK_APP_URL
   // utm_content names the link that was clicked. It travels only in the link
@@ -131,6 +134,20 @@ export function CloudFunnelButton() {
   const inCluster = capabilities.data?.deployment?.mode === 'in-cluster'
   const self = useCloudConnectSelf(open && inCluster)
 
+  // Each time the dialog opens, look for a Radar in the cluster that already
+  // carries Cloud settings — installed by a colleague after a handoff, or from
+  // another machine. The plan would refuse to install over it; better to say
+  // "already connected" and point at it than to offer a click that ends blocked.
+  const discovered = useCloudInstallDiscover(open && lane === 'driver', clusterInfo.data?.context)
+  // The server ranks these: one it can link to first. A failed lookup is
+  // not a verdict — the CTA returns and the plan does its own inspection —
+  // and neither is the previous opening's answer: this component outlives
+  // the dialog, so a reopen refetches over cached data, and the gate must
+  // hold for that refetch too (isFetching, not isPending) while a refetch
+  // that fails must not keep showing what it found last time.
+  const alreadyConnected = discovered.isError ? undefined : discovered.data?.connected[0]
+  const discoverPending = lane === 'driver' && discovered.isFetching
+
   // The flow is server-owned: polling here both drives the live progress view
   // and re-attaches to an ongoing flow after a reload or modal close.
   const flowStatus = useCloudInstallStatus(lane === 'driver')
@@ -234,7 +251,6 @@ export function CloudFunnelButton() {
   // relabel the CTA (and the link) for cluster B, and a blocked view left
   // armed would reopen on B with A's refusal, feeding it back into the
   // outcome on Back.
-  const clusterInfo = useClusterInfo()
   const contextName = clusterInfo.data?.context
   useEffect(() => {
     setHandoff(null)
@@ -330,6 +346,11 @@ export function CloudFunnelButton() {
               assurances={connectInfo.data?.assurances}
               notice={connectInfo.data?.notice}
               self={inCluster ? self.data : undefined}
+              clusterName={clusterInfo.data?.context}
+              alreadyConnected={alreadyConnected}
+              connectedCount={alreadyConnected ? (discovered.data?.connected.length ?? 0) : 0}
+              discoverPending={discoverPending}
+              clustersUrl={`${appUrl}/clusters`}
               // Also covers the capabilities query: until it resolves, lane
               // defaults to wizard and Radar does not yet know it is
               // in-cluster, so the CTA would escape before classification.
@@ -385,6 +406,11 @@ function ModalFooter({
   notice,
   self,
   selfLoading,
+  clusterName,
+  alreadyConnected,
+  connectedCount = 0,
+  discoverPending = false,
+  clustersUrl,
   onConnect,
   onLater,
 }: {
@@ -402,6 +428,20 @@ function ModalFooter({
   self?: CloudConnectSelf
   // True while in-cluster self-classification is still in flight.
   selfLoading?: boolean
+  // The kubeconfig context, named under the CTA so the click is about a
+  // specific cluster — kept out of the button, whose width must not depend
+  // on the name.
+  clusterName?: string
+  // Driver lane: a Radar in the cluster that already carries Cloud settings.
+  alreadyConnected?: CloudInstallConnectedRadar
+  connectedCount?: number
+  // True while that lookup is in flight: a click now would start the very
+  // plan the lookup exists to pre-empt, and the flow view would then hide
+  // its answer.
+  discoverPending?: boolean
+  // The configured Hub's clusters list — where to look when an install's
+  // settings say it is connected but not where.
+  clustersUrl?: string
   onConnect: () => void
   onLater: () => void
 }) {
@@ -458,12 +498,48 @@ function ModalFooter({
       {notice && (
         <div className="mb-3.5 card-inner p-3 text-[12px] leading-relaxed text-theme-text-secondary">{notice}</div>
       )}
+      {lane === 'driver' && alreadyConnected && (
+        <div className="mb-3.5 card-inner p-3 text-[12px] leading-relaxed text-theme-text-secondary">
+          <span className="font-semibold text-theme-text-primary">This cluster is already connected to Radar Cloud.</span>{' '}
+          Found release{' '}
+          <code className="font-mono text-[11px] text-theme-text-primary">{alreadyConnected.release || alreadyConnected.deployment}</code>{' '}
+          in namespace <code className="font-mono text-[11px] text-theme-text-primary">{alreadyConnected.namespace}</code>{' '}
+          {alreadyConnected.hubHost ? (
+            <>
+              configured for a Radar Cloud at{' '}
+              <code className="font-mono text-[11px] text-theme-text-primary">{alreadyConnected.hubHost}</code> — open that one to see
+              this cluster.
+            </>
+          ) : alreadyConnected.clusterUrl ? (
+            <>configured to connect. Open Radar Cloud to see it; if it isn’t there, its page shows the recovery options.</>
+          ) : (
+            <>
+              with Cloud settings Radar can’t read from here. Look for it in Radar Cloud; if it isn’t there, an admin can
+              recover the pairing with <code className="font-mono text-[11px] text-theme-text-primary">radar cloud status</code>.
+            </>
+          )}
+          {connectedCount > 1 && <> {connectedCount - 1} more install{connectedCount > 2 ? 's' : ''} carry Cloud settings too.</>}
+        </div>
+      )}
       <div className="flex flex-wrap items-center gap-x-5 gap-y-2.5">
-        {lane === 'driver' ? (
+        {lane === 'driver' && alreadyConnected ? (
+          // Another Hub is named, not linked: the link would open ours.
+          !alreadyConnected.hubHost && (
+            <a
+              href={alreadyConnected.clusterUrl || clustersUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="whitespace-nowrap px-6 py-2.5 rounded-[10px] bg-emerald-500 hover:bg-emerald-400 text-emerald-950 text-[14px] font-bold shadow-[0_0_22px_rgba(16,185,129,0.35)] hover:shadow-[0_0_30px_rgba(16,185,129,0.5)] hover:-translate-y-px transition-all"
+            >
+              {alreadyConnected.clusterUrl ? 'Open in Radar Cloud' : 'Open Radar Cloud'}
+            </a>
+          )
+        ) : lane === 'driver' ? (
           <>
             <button
               onClick={onConnect}
-              className="whitespace-nowrap px-6 py-2.5 rounded-[10px] bg-emerald-500 hover:bg-emerald-400 text-emerald-950 text-[14px] font-bold shadow-[0_0_22px_rgba(16,185,129,0.35)] hover:shadow-[0_0_30px_rgba(16,185,129,0.5)] hover:-translate-y-px transition-all"
+              disabled={discoverPending}
+              className={`whitespace-nowrap px-6 py-2.5 rounded-[10px] bg-emerald-500 hover:bg-emerald-400 text-emerald-950 text-[14px] font-bold shadow-[0_0_22px_rgba(16,185,129,0.35)] hover:shadow-[0_0_30px_rgba(16,185,129,0.5)] hover:-translate-y-px transition-all ${discoverPending ? 'opacity-60 pointer-events-none' : ''}`}
             >
               {/* Trailing ellipsis: further input follows the click — the
                   inspect step and a plan the user approves in the browser. */}
@@ -494,7 +570,7 @@ function ModalFooter({
           </a>
         )}
         <button onClick={onLater} className="ml-auto whitespace-nowrap text-[12px] text-theme-text-tertiary hover:text-theme-text-primary transition-colors">
-          Maybe later
+          {lane === 'driver' && alreadyConnected ? 'Close' : 'Maybe later'}
         </button>
       </div>
       {/* The last attempt's stop, when Radar could not even inspect the
@@ -508,10 +584,11 @@ function ModalFooter({
       )}
       {/* Mechanics, not marketing: a falsifiable claim the plan card then
           fulfills. Sits next to the button whose click it de-risks. */}
-      {lane === 'driver' && (
+      {lane === 'driver' && !alreadyConnected && (
         <p className="mt-2.5 text-[11px] leading-relaxed text-theme-text-tertiary">
-          Nothing installs on click. Radar inspects the cluster and shows you a plan; you approve it in
-          the browser before anything changes.
+          Nothing installs on click. Radar inspects{' '}
+          {clusterName ? <span className="text-theme-text-secondary">{clusterName}</span> : 'the cluster'} and shows
+          you a plan; you approve it in the browser before anything changes.
         </p>
       )}
       {/* A 2-column grid, not flex-wrap: the long data-locality chip cannot

package/src/components/cloudConnectHandoff.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { ApiError, type CloudInstallAttempted } from '../api/client'
-import { composeAdminNote, composeFailureNote, exitFor, needsAdminHandoff, handoffForBlocked, handoffForPrepareError, isHandoffOutcome, signupUrlFor } from './cloudConnectHandoff'
+import { SELF_HOSTED_DOCS_URL, composeAdminNote, composeFailureNote, exitFor, trimRefusal, needsAdminHandoff, handoffForBlocked, handoffForPrepareError, isHandoffOutcome, signupUrlFor } from './cloudConnectHandoff'
 
 const APP = 'https://app.test.example'
 const UTM = 'utm_source=radar-oss&utm_medium=app&utm_campaign=cloud-modal'
@@ -169,6 +169,9 @@ describe('composeAdminNote — an ask, then the link, then the evidence', () =>
     expect(note).toContain("Details: No Radar install was found in the cluster; the check stopped while reading Helm's release records.")
     expect(note).toContain('inspect Helm release "radar" in namespace "radar" — User "system:serviceaccount:default:limited" cannot list resource "secrets" in API group "" in the namespace "radar".')
     expect(note).toContain('Please confirm nothing is already installed before a fresh install.')
+    // The object of the request and the answer to "no SaaS", before the evidence.
+    expect(note.indexOf('What it is: Radar, the open-source Kubernetes tool')).toBeLessThan(note.indexOf('Details:'))
+    expect(note).toContain(`can be self-hosted in-house: ${SELF_HOSTED_DOCS_URL}`)
     // Never the card's second person.
     expect(note).not.toMatch(/\byour\b/i)
   })
@@ -194,6 +197,12 @@ describe('composeAdminNote — an ask, then the link, then the evidence', () =>
     expect(note).toContain('Open Radar Cloud:\n' + `${APP}/signup?via=admin_handoff`)
   })
 
+  it('trims a refusal to what was attempted and why, for the card as for the note', () => {
+    expect(
+      trimRefusal('inspect Helm release "radar" in namespace "radar": failed to inspect existing release: query: failed to query with labels: secrets is forbidden: User "u" cannot list resource "secrets" in API group "" in the namespace "radar"'),
+    ).toBe('inspect Helm release "radar" in namespace "radar" — User "u" cannot list resource "secrets" in API group "" in the namespace "radar".')
+  })
+
   it('keeps the whole line when a refusal has no error chain to trim', () => {
     const blocked = {
       reason: 'preflight' as const,

package/src/components/cloudConnectHandoff.ts

@@ -136,6 +136,17 @@ export interface AdminNoteContext {
   cluster?: string
 }
 
+// A cold reader gets the object of the request and the answer to "no SaaS"
+// in one place: what runs in the cluster, the trust boundary (Radar dials
+// out; what comes back through that session is Radar's own API, bounded by
+// the ServiceAccount it runs as), and that the control plane can be run
+// in-house.
+export const SELF_HOSTED_DOCS_URL = 'https://radarhq.io/docs/cloud/self-hosted/'
+const WHAT_IT_IS = [
+  'What it is: Radar, the open-source Kubernetes tool, installed in the cluster as a Helm chart. It opens an outbound connection to a hosted control plane (nothing listens inbound); Radar Cloud users reach this Radar only through that connection, with the permissions of the ServiceAccount it runs as.',
+  `If a hosted service is not an option, the same control plane can be self-hosted in-house: ${SELF_HOSTED_DOCS_URL}`,
+].join(' ')
+
 export function composeAdminNote(blocked: CloudInstallBlocked, exit: BlockedExit, where: AdminNoteContext = {}): string {
   const a = blocked.attempted
   const name = where.context || where.cluster || 'this cluster'
@@ -206,6 +217,8 @@ export function composeAdminNote(blocked: CloudInstallBlocked, exit: BlockedExit
     '',
     linkLabel,
     plainLink(exit.href),
+    '',
+    WHAT_IT_IS,
     ...(details.length ? ['', `Details: ${details.join(' ')}`] : []),
   ].join('\n')
 }
@@ -237,7 +250,7 @@ function plainLink(href: string): string {
 // A refusal line is a Go error chain — "create Namespace "radar": namespaces
 // "radar" is forbidden: ValidatingAdmissionPolicy … denied request: <reason>".
 // Keep what was attempted and why it was refused; drop the wrapping between.
-function trimRefusal(line: string): string {
+export function trimRefusal(line: string): string {
   const parts = line.split(': ').map((p) => p.trim()).filter(Boolean)
   if (parts.length <= 2) return line.trim().replace(/\.?$/, '.')
   return `${parts[0]} — ${parts[parts.length - 1]}`.replace(/\.?$/, '.')
@@ -267,6 +280,7 @@ export function composeFailureNote(failure: CloudInstallFailure, where: AdminNot
     `Connecting it from Radar got as far as the install: ${stage}. ${failure.message.replace(/\s+/g, ' ').trim()} Could someone with cluster access take it from here?`,
   ]
   if (g?.clusterUrl) lines.push('', 'The cluster in Radar Cloud (its page shows the recovery options):', plainLink(g.clusterUrl))
+  lines.push('', WHAT_IT_IS)
   const details: string[] = []
   if (g?.summary && g.summary !== failure.message) details.push(g.summary)
   for (const l of g?.lines ?? []) details.push(l)

package/src/components/diagnose/AIMarkdown.tsx

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { AlertTriangle, Copy, Check } from "lucide-react";
+import { Markdown } from "../ui/Markdown";
+import { Tooltip } from "../ui/Tooltip";
+
+export function CopyButton({ text, label }: { text: string; label: string }) {
+  const [state, setState] = useState<"idle" | "copied" | "failed">("idle");
+  const copied = state === "copied";
+  return (
+    <Tooltip
+      content={
+        state === "copied"
+          ? "Copied"
+          : state === "failed"
+            ? "Copy failed"
+            : label
+      }
+      delay={100}
+      wrapperClassName="shrink-0"
+    >
+      <button
+        onClick={async () => {
+          // Report what happened, not what was attempted: the write can be
+          // denied or unavailable, and "Copied" over an empty clipboard is worse
+          // than no button.
+          try {
+            if (!navigator.clipboard) throw new Error("clipboard unavailable");
+            await navigator.clipboard.writeText(text);
+            setState("copied");
+          } catch {
+            setState("failed");
+          }
+          setTimeout(() => setState("idle"), 1200);
+        }}
+        className="shrink-0 rounded p-1 text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-primary"
+        aria-label={
+          state === "copied"
+            ? `${label} — copied`
+            : state === "failed"
+              ? `${label} — copy failed`
+              : label
+        }
+        aria-live="polite"
+      >
+        {copied ? (
+          <Check className="h-3.5 w-3.5 text-emerald-400" />
+        ) : state === "failed" ? (
+          <AlertTriangle className="h-3.5 w-3.5 text-amber-500" />
+        ) : (
+          <Copy className="h-3.5 w-3.5" />
+        )}
+      </button>
+    </Tooltip>
+  );
+}
+
+// LLMs occasionally open a ```fence mid-line ("run this: ```bash kubectl …") or
+// put the command on the same line as the ```lang marker. GFM then won't parse
+// it as a fence — it leaks the literal ``` and renders an empty code box. Coerce
+// fence markers onto their own lines and push trailing content off the opener so
+// the block renders. (Well-formed markdown is unaffected.)
+function tidyFences(md: string): string {
+  if (!md || !md.includes("```")) return md;
+  return md
+    .replace(/([^\n])```/g, "$1\n\n```") // opener/closer must start a line
+    .replace(/```([A-Za-z0-9_-]*)[ \t]+(\S)/g, "```$1\n$2"); // content off the opener line
+}
+
+// Diagnosis output is dense with inline `code`; the shared chip's brand tint is
+// too loud at that density, so neutralize it (border/bg only) for this surface.
+const SOFT_INLINE_CODE =
+  "[&_.inline-code]:border-theme-border/60 [&_.inline-code]:bg-theme-base [&_.inline-code]:font-normal";
+
+// Markdown for agent-generated text — normalizes flaky fences + softens code.
+export function AIMarkdown({
+  className,
+  children,
+}: {
+  className?: string;
+  children: string;
+}) {
+  return (
+    <Markdown className={`${SOFT_INLINE_CODE} ${className ?? ""}`}>
+      {tidyFences(children)}
+    </Markdown>
+  );
+}