@skyhook-io/radar-app 0.1.1

package/src/api/config.ts

@@ -0,0 +1,116 @@
+// Runtime configuration for Radar's frontend.
+//
+// When Radar runs as its own binary (standalone or in-cluster), the
+// frontend is same-origin with the Go API server and `apiBase` is `/api`.
+// When Radar's web is embedded as `@skyhook-io/radar-app` in another
+// frontend (e.g. Radar Hub), the host app calls `setApiBase()` to point
+// at a cluster-scoped proxy URL like `/c/{cluster_id}/api` before mounting.
+//
+// This module is deliberately a small mutable singleton rather than a
+// React context so it works in non-React code paths (EventSource,
+// WebSocket URL construction) without threading props through every
+// call site. Multi-instance hosting (mounting two Radar apps for two
+// clusters on the same page) is a V2 concern — it would require
+// replacing this with a context.
+
+let apiBase = '/api';
+let basename = '';
+let authHeadersProvider: () => Record<string, string> = () => ({});
+let credentialsMode: RequestCredentials = 'same-origin';
+
+export function getApiBase(): string {
+  return apiBase;
+}
+
+/**
+ * Sets the base URL used for REST API, SSE, and WebSocket requests.
+ * Call before mounting the Radar app. Trailing slashes are stripped.
+ *
+ * Accepts either:
+ *   - A relative path: `/api`, `/c/abc/api` (URLs derive scheme + host from window.location)
+ *   - An absolute URL: `https://api.radar.skyhook.io/c/abc/api` (URLs use that origin)
+ */
+export function setApiBase(url: string): void {
+  apiBase = url.replace(/\/+$/, '');
+}
+
+/**
+ * Returns the router basename (e.g. `/c/abc` when mounted in Radar Hub),
+ * or `''` for standalone use.
+ */
+export function getBasename(): string {
+  return basename;
+}
+
+/**
+ * Sets the router basename. React Router strips this from location.pathname
+ * inside the app, so all internal paths remain relative to `/`. Used by
+ * full-page navigation helpers (auth redirects, etc.) where we still need
+ * to construct a URL relative to the host app's origin.
+ */
+export function setBasename(value: string): void {
+  basename = value.replace(/\/+$/, '');
+}
+
+/**
+ * Builds an absolute path under the configured basename — used for full
+ * window.location navigation (OIDC login redirect, return-path tracking)
+ * where React Router doesn't apply.
+ */
+export function routePath(path: string): string {
+  const prefix = basename;
+  if (!prefix) return path;
+  if (path.startsWith(prefix + '/') || path === prefix) return path;
+  return prefix + path;
+}
+
+/**
+ * Builds a WebSocket URL for a given API path.
+ *
+ * When apiBase is relative, uses window.location.host + apiBase + path.
+ * When apiBase is absolute, swaps http(s) → ws(s) and appends path.
+ */
+export function getWsUrl(path: string): string {
+  const base = apiBase;
+  if (base.startsWith('http://') || base.startsWith('https://')) {
+    return base.replace(/^http/, 'ws') + path;
+  }
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  return `${protocol}//${window.location.host}${base}${path}`;
+}
+
+/** Convenience: `${apiBase}${path}` for fetch call sites. */
+export function apiUrl(path: string): string {
+  return getApiBase() + path;
+}
+
+/**
+ * Register a function that returns HTTP headers to attach to every Radar
+ * API request. Used by library consumers (e.g. Radar Hub) to inject
+ * Authorization bearer tokens or session tokens. The provider is called
+ * on each request so it can read fresh state.
+ *
+ * Standalone Radar leaves this empty — auth is cookie-based in OIDC or
+ * proxy mode, no explicit headers needed.
+ */
+export function setAuthHeadersProvider(fn: () => Record<string, string>): void {
+  authHeadersProvider = fn;
+}
+
+/** Internal: returns the registered auth headers for fetch() calls. */
+export function getAuthHeaders(): Record<string, string> {
+  return authHeadersProvider();
+}
+
+/**
+ * Sets the `credentials` mode for all Radar fetches. Default 'same-origin'
+ * (standalone Radar binary). Library consumers at a different origin should
+ * set 'include' so browser cookies + CORS preflight cooperate.
+ */
+export function setCredentialsMode(mode: RequestCredentials): void {
+  credentialsMode = mode;
+}
+
+export function getCredentialsMode(): RequestCredentials {
+  return credentialsMode;
+}

package/src/api/traffic.ts

@@ -0,0 +1,139 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import type { TrafficSourcesResponse, TrafficFlowsResponse } from '../types'
+import { apiUrl, getAuthHeaders, getCredentialsMode } from './config'
+
+async function fetchJSON<T>(path: string): Promise<T> {
+  const response = await fetch(apiUrl(path), {
+    credentials: getCredentialsMode(),
+    headers: getAuthHeaders(),
+  })
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Unknown error' }))
+    throw new Error(error.error || `HTTP ${response.status}`)
+  }
+  return response.json()
+}
+
+// Connection info returned by connect endpoint
+export interface TrafficConnectionInfo {
+  connected: boolean
+  localPort?: number
+  address?: string
+  namespace?: string
+  serviceName?: string
+  contextName?: string
+  error?: string
+}
+
+// Get available traffic sources and recommendations
+export function useTrafficSources() {
+  return useQuery<TrafficSourcesResponse>({
+    queryKey: ['traffic-sources'],
+    queryFn: () => fetchJSON('/traffic/sources'),
+    staleTime: 30000, // 30 seconds
+    retry: 1,
+  })
+}
+
+// Get traffic flows
+export interface UseTrafficFlowsOptions {
+  namespaces?: string[]
+  since?: string // Duration like "5m", "1h"
+  enabled?: boolean
+}
+
+export function useTrafficFlows(options: UseTrafficFlowsOptions = {}) {
+  const { namespaces = [], since, enabled = true } = options
+
+  const params = new URLSearchParams()
+  // Traffic backend only supports single namespace, use first if provided
+  if (namespaces.length === 1) params.set('namespace', namespaces[0])
+  if (since) params.set('since', since)
+  const queryString = params.toString()
+
+  return useQuery<TrafficFlowsResponse>({
+    queryKey: ['traffic-flows', namespaces, since],
+    queryFn: () => fetchJSON(`/traffic/flows${queryString ? `?${queryString}` : ''}`),
+    staleTime: 5000, // 5 seconds
+    enabled,
+    retry: 1,
+  })
+}
+
+// Get active traffic source
+export function useActiveTrafficSource() {
+  return useQuery<{ active: string }>({
+    queryKey: ['traffic-source-active'],
+    queryFn: () => fetchJSON('/traffic/source'),
+    staleTime: 60000, // 1 minute
+  })
+}
+
+// Set active traffic source
+export function useSetTrafficSource() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (source: string) => {
+      const response = await fetch(apiUrl('/traffic/source'), {
+        method: 'POST',
+        credentials: getCredentialsMode(),
+        headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+        body: JSON.stringify({ source }),
+      })
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ error: 'Unknown error' }))
+        throw new Error(error.error || `HTTP ${response.status}`)
+      }
+      return response.json()
+    },
+    meta: {
+      errorMessage: 'Failed to change traffic source',
+      successMessage: 'Traffic source changed',
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['traffic-source-active'] })
+      queryClient.invalidateQueries({ queryKey: ['traffic-flows'] })
+    },
+  })
+}
+
+// Refetch traffic sources (for polling during wizard)
+export function useRefetchTrafficSources() {
+  const queryClient = useQueryClient()
+  return () => queryClient.invalidateQueries({ queryKey: ['traffic-sources'] })
+}
+
+// Get traffic connection status
+export function useTrafficConnectionStatus() {
+  return useQuery<TrafficConnectionInfo>({
+    queryKey: ['traffic-connection'],
+    queryFn: () => fetchJSON('/traffic/connection'),
+    staleTime: 5000, // 5 seconds
+  })
+}
+
+// Connect to traffic source (starts port-forward if needed)
+export function useTrafficConnect() {
+  const queryClient = useQueryClient()
+
+  return useMutation<TrafficConnectionInfo, Error>({
+    mutationFn: async () => {
+      const response = await fetch(apiUrl('/traffic/connect'), {
+        method: 'POST',
+        credentials: getCredentialsMode(),
+        headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+      })
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ error: 'Unknown error' }))
+        throw new Error(error.error || `HTTP ${response.status}`)
+      }
+      return response.json()
+    },
+    onSuccess: () => {
+      // Invalidate flows to refetch with new connection
+      queryClient.invalidateQueries({ queryKey: ['traffic-flows'] })
+      queryClient.invalidateQueries({ queryKey: ['traffic-connection'] })
+    },
+  })
+}

package/src/components/ConnectionErrorView.tsx

@@ -0,0 +1,272 @@
+import { XCircle, RefreshCw, Loader2, Copy, Check, TerminalSquare } from 'lucide-react'
+import { useState } from 'react'
+import type { ConnectionState } from '../context/ConnectionContext'
+import { ContextSwitcher } from './ContextSwitcher'
+import { parseContextName } from '../utils/context-name'
+import { useOpenLocalTerminal } from '@skyhook-io/k8s-ui'
+
+interface ConnectionErrorViewProps {
+  connection: ConnectionState
+  onRetry: () => void
+  isRetrying: boolean
+}
+
+interface AuthHints {
+  title: string
+  hints: string[]
+  /** Primary auth command — usually sufficient on its own */
+  authCommand?: { label: string; command: string }
+  /** Secondary command shown as fallback if primary doesn't resolve the issue */
+  fallbackCommand?: { label: string; command: string }
+}
+
+function getAuthHints(context: string): AuthHints {
+  const parsed = parseContextName(context)
+
+  switch (parsed.provider) {
+    case 'GKE': {
+      const result: AuthHints = {
+        title: 'GKE Authentication Failed',
+        hints: ['Your Google Cloud credentials have expired.'],
+        authCommand: { label: 'Re-authenticate with Google Cloud:', command: 'gcloud auth login' },
+      }
+      if (parsed.region && parsed.account) {
+        const isZone = /^[a-z]+-[a-z]+\d+-[a-z]$/.test(parsed.region)
+        const flag = isZone ? '--zone' : '--region'
+        result.fallbackCommand = {
+          label: 'If that doesn\'t work, refresh cluster credentials:',
+          command: `gcloud container clusters get-credentials ${parsed.clusterName} ${flag} ${parsed.region} --project ${parsed.account}`,
+        }
+      }
+      return result
+    }
+    case 'EKS': {
+      const result: AuthHints = {
+        title: 'EKS Authentication Failed',
+        hints: ['Your AWS credentials have expired.'],
+        authCommand: { label: 'Re-authenticate with AWS:', command: 'aws sso login' },
+      }
+      if (parsed.region) {
+        result.fallbackCommand = {
+          label: 'If that doesn\'t work, refresh cluster credentials:',
+          command: `aws eks update-kubeconfig --name ${parsed.clusterName} --region ${parsed.region}`,
+        }
+      }
+      return result
+    }
+    case 'AKS':
+      return {
+        title: 'AKS Authentication Failed',
+        hints: ['Your Azure credentials have expired.'],
+        authCommand: { label: 'Re-authenticate with Azure:', command: 'az login' },
+        fallbackCommand: { label: 'If that doesn\'t work, refresh cluster credentials:', command: 'az aks get-credentials --name <cluster> --resource-group <rg>' },
+      }
+    default:
+      return {
+        title: 'Authentication Failed',
+        hints: [
+          'Your credentials may have expired',
+          'Re-authenticate with your cloud provider and try again',
+        ],
+      }
+  }
+}
+
+const errorHints: Record<string, { title: string; hints: string[] }> = {
+  config: {
+    title: 'No Kubeconfig Found',
+    hints: [
+      'Radar could not find a kubeconfig file at ~/.kube/config',
+      'If your kubeconfig is at a custom path, set the KUBECONFIG environment variable in your shell profile (~/.zshrc or ~/.bashrc)',
+      'You can also pass --kubeconfig <path> when launching from the terminal',
+    ],
+  },
+  rbac: {
+    title: 'Insufficient Permissions',
+    hints: [
+      'Your user account can connect but lacks required RBAC permissions',
+      'Ask your cluster admin for a ClusterRole with list/watch access',
+      'For read-only access, the built-in "view" ClusterRole is usually sufficient',
+      'You can also try: kubectl auth can-i --list',
+    ],
+  },
+  network: {
+    title: 'Network Unreachable',
+    hints: [
+      'The cluster may be unreachable from your network',
+      'Check if VPN connection is required',
+      'Verify firewall rules allow access',
+      'Confirm the cluster is running',
+    ],
+  },
+  timeout: {
+    title: 'Connection Timed Out',
+    hints: [
+      'The cluster is taking too long to respond',
+      'The cluster may be under heavy load',
+      'Network latency may be too high',
+      'Try again or check cluster health',
+    ],
+  },
+  unknown: {
+    title: 'Connection Failed',
+    hints: [
+      'Check your kubeconfig is valid',
+      'Verify the cluster endpoint is correct',
+      'Try switching to a different context',
+    ],
+  },
+}
+
+function CopyableCommand({ command, onRunInTerminal }: { command: string; onRunInTerminal?: (command: string) => void }) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(command).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }).catch(() => {
+      // Clipboard API may be unavailable (e.g., non-HTTPS context)
+    })
+  }
+
+  return (
+    <div className="mt-2 flex items-center gap-2 bg-theme-elevated border border-theme-border rounded-md px-3 py-2 group">
+      <code className="text-xs font-mono text-theme-text-primary flex-1 select-all break-all">
+        {command}
+      </code>
+      {onRunInTerminal && (
+        <button
+          onClick={() => onRunInTerminal(command)}
+          className="shrink-0 text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
+          title="Run in terminal"
+        >
+          <TerminalSquare className="w-3.5 h-3.5" />
+        </button>
+      )}
+      <button
+        onClick={handleCopy}
+        className="shrink-0 text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
+        title="Copy to clipboard"
+      >
+        {copied ? (
+          <Check className="w-3.5 h-3.5 text-green-400" />
+        ) : (
+          <Copy className="w-3.5 h-3.5" />
+        )}
+      </button>
+    </div>
+  )
+}
+
+export function ConnectionErrorView({ connection, onRetry, isRetrying }: ConnectionErrorViewProps) {
+  // For auth errors, generate context-aware hints with a specific re-auth command
+  const isAuth = connection.errorType === 'auth'
+  const authInfo = isAuth ? getAuthHints(connection.context || '') : null
+  const errorInfo = authInfo || errorHints[connection.errorType || 'unknown'] || errorHints.unknown
+  const openLocalTerminal = useOpenLocalTerminal()
+
+  // Build a command that auto-retries connection after successful auth
+  const retryCmd = `curl -s -X POST http://${window.location.host}/api/connection/retry > /dev/null`
+
+  const handleAuthInTerminal = () => {
+    if (!authInfo?.authCommand) return
+    openLocalTerminal({
+      initialCommand: `${authInfo.authCommand.command} && ${retryCmd}`,
+      title: 'Auth',
+    })
+  }
+
+  const handleRunInTerminal = (command: string) => {
+    openLocalTerminal({ initialCommand: command, title: 'Auth' })
+  }
+
+  return (
+    <div className="flex-1 flex items-start justify-center pt-16 px-8">
+      <div className="max-w-lg w-full">
+        <div className="flex flex-col items-center text-center">
+          <div className="w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center mb-6">
+            <XCircle className="w-10 h-10 text-red-400" />
+          </div>
+
+          <h2 className="text-xl font-semibold text-theme-text-primary mb-2">
+            {connection.errorType === 'config' ? 'No Cluster Configuration' : 'Cannot Connect to Cluster'}
+          </h2>
+
+          <p className="text-sm text-theme-text-secondary mb-1">
+            Context: <span className="font-mono text-theme-text-primary">{connection.context || '(none)'}</span>
+          </p>
+
+          {connection.clusterName && (
+            <p className="text-sm text-theme-text-secondary mb-4">
+              Cluster: <span className="font-mono text-theme-text-primary">{connection.clusterName}</span>
+            </p>
+          )}
+
+          <div className="w-full bg-theme-surface border border-theme-border rounded-lg p-4 mb-6 text-left">
+            <h3 className="text-sm font-medium text-theme-text-primary mb-2">
+              {errorInfo.title}
+            </h3>
+            <ul className="text-sm text-theme-text-secondary space-y-1">
+              {errorInfo.hints.map((hint, i) => (
+                <li key={i} className="flex items-start gap-2">
+                  <span className="text-theme-text-tertiary mt-0.5">-</span>
+                  <span>{hint}</span>
+                </li>
+              ))}
+            </ul>
+            {authInfo?.authCommand && (
+              <div className="mt-3">
+                <p className="text-xs text-theme-text-tertiary">{authInfo.authCommand.label}</p>
+                <CopyableCommand command={authInfo.authCommand.command} onRunInTerminal={handleRunInTerminal} />
+                <button
+                  onClick={handleAuthInTerminal}
+                  className="mt-3 w-full inline-flex items-center justify-center gap-2 px-3 py-2 text-xs font-medium btn-brand rounded-md"
+                >
+                  <TerminalSquare className="w-3.5 h-3.5" />
+                  Authenticate in terminal
+                </button>
+              </div>
+            )}
+            {authInfo?.fallbackCommand && (
+              <div className="mt-4 pt-3 border-t border-theme-border/50">
+                <p className="text-xs text-theme-text-tertiary">{authInfo.fallbackCommand.label}</p>
+                <CopyableCommand command={authInfo.fallbackCommand.command} onRunInTerminal={handleRunInTerminal} />
+              </div>
+            )}
+          </div>
+
+          {connection.error && (
+            <div className="w-full bg-theme-elevated border border-theme-border rounded-lg p-3 mb-6 overflow-auto max-h-32">
+              <code className="text-xs text-red-400 font-mono whitespace-pre-wrap break-all">
+                {connection.error}
+              </code>
+            </div>
+          )}
+
+          <div className="flex items-center gap-5">
+            <button
+              onClick={onRetry}
+              disabled={isRetrying}
+              className="inline-flex items-center gap-2 px-4 py-2 btn-brand rounded-lg"
+            >
+              {isRetrying ? (
+                <>
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                  Connecting...
+                </>
+              ) : (
+                <>
+                  <RefreshCw className="w-4 h-4" />
+                  Retry Connection
+                </>
+              )}
+            </button>
+
+            {connection.errorType !== 'config' && <ContextSwitcher />}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}