@skyhook-io/radar-app 0.1.1

package/src/hooks/useFavorites.ts

@@ -0,0 +1,69 @@
+import { useState, useCallback, useEffect } from 'react'
+import { apiUrl, getAuthHeaders, getCredentialsMode } from '../api/config'
+
+export interface PinnedKind {
+  name: string       // plural name for API calls, e.g. "pods", "deployments"
+  kind: string       // singular display name, e.g. "Pod", "Deployment"
+  group: string      // API group, e.g. "" for core, "source.toolkit.fluxcd.io" for Flux
+}
+
+const STORAGE_KEY = 'radar-pinned-kinds'
+
+function loadPinned(): PinnedKind[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (raw) return JSON.parse(raw)
+  } catch {
+    // ignore parse errors
+  }
+  return []
+}
+
+function savePinned(pinned: PinnedKind[]) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(pinned))
+  } catch {
+    // ignore storage errors
+  }
+  fetch(apiUrl('/settings'), { method: 'PUT', credentials: getCredentialsMode(), headers: { 'Content-Type': 'application/json', ...getAuthHeaders() }, body: JSON.stringify({ pinnedKinds: pinned }) })
+    .then((res) => { if (!res.ok) console.warn('[settings] Failed to persist pinned kinds:', res.status) })
+    .catch((err) => console.warn('[settings] Failed to persist pinned kinds:', err))
+}
+
+function matches(a: PinnedKind, name: string, group: string): boolean {
+  return a.name === name && a.group === group
+}
+
+export function usePinnedKinds() {
+  const [pinned, setPinned] = useState<PinnedKind[]>(loadPinned)
+
+  // Sync from server (persisted settings survive port changes in desktop app)
+  useEffect(() => {
+    fetch(apiUrl('/settings'), { credentials: getCredentialsMode(), headers: getAuthHeaders() })
+      .then((res) => res.ok ? res.json() : null)
+      .then((data) => {
+        if (data?.pinnedKinds?.length && loadPinned().length === 0) {
+          setPinned(data.pinnedKinds)
+          localStorage.setItem(STORAGE_KEY, JSON.stringify(data.pinnedKinds))
+        }
+      })
+      .catch((err) => console.warn('[settings] Failed to load pinned kinds from server:', err))
+  }, [])
+
+  const togglePin = useCallback((item: PinnedKind) => {
+    setPinned((prev) => {
+      const exists = prev.some((p) => matches(p, item.name, item.group))
+      const next = exists
+        ? prev.filter((p) => !matches(p, item.name, item.group))
+        : [...prev, item]
+      savePinned(next)
+      return next
+    })
+  }, [])
+
+  const isPinned = useCallback((name: string, group: string): boolean => {
+    return pinned.some((p) => matches(p, name, group))
+  }, [pinned])
+
+  return { pinned, togglePin, isPinned }
+}

package/src/hooks/useKeyboardShortcuts.tsx

@@ -0,0 +1,7 @@
+export {
+  KeyboardShortcutProvider,
+  useRegisterShortcut,
+  useRegisterShortcuts,
+  useActiveShortcuts,
+} from '@skyhook-io/k8s-ui'
+export type { KeyboardShortcut, ShortcutCategory } from '@skyhook-io/k8s-ui'

package/src/hooks/useRefreshAnimation.ts

@@ -0,0 +1 @@
+export { useRefreshAnimation } from '@skyhook-io/k8s-ui'

package/src/index.css

@@ -0,0 +1,243 @@
+@import "tailwindcss";
+@config "../tailwind.config.js";
+@variant dark (&:where(.dark, .dark *));
+@import "@skyhook-io/k8s-ui/theme/variables.css";
+@import "@skyhook-io/k8s-ui/theme/tailwind-theme.css";
+@import "@skyhook-io/k8s-ui/theme/components.css";
+@import "@skyhook-io/k8s-ui/components/topology/topology.css";
+@import "@fontsource-variable/dm-sans";
+@import "@fontsource/dm-mono";
+
+/* Global: pointer cursor for all interactive elements */
+button, [role="button"], a, label, select, summary, [tabindex]:not([tabindex="-1"]) {
+  cursor: pointer;
+}
+
+/* ============================================
+   BASE STYLES
+   ============================================ */
+
+:root {
+  /* Font settings */
+  font-family: 'DM Sans Variable', 'DM Sans', system-ui, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background-color: var(--bg-base);
+  color: var(--text-primary);
+}
+
+#root {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+
+/* ============================================
+   REACT FLOW CUSTOMIZATIONS
+   ============================================ */
+
+.react-flow__pane {
+  cursor: grab;
+}
+
+.react-flow__pane:active {
+  cursor: grabbing;
+}
+
+.react-flow__node {
+  cursor: pointer !important;
+}
+
+.react-flow__node:active {
+  cursor: pointer !important;
+}
+
+/* React Flow Controls */
+.react-flow__controls {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+  box-shadow: var(--shadow-md);
+}
+
+.react-flow__controls-button {
+  background: var(--bg-surface);
+  border: none;
+  border-bottom: 1px solid var(--border-default);
+  color: var(--text-tertiary);
+  width: 28px;
+  height: 28px;
+  padding: 5px;
+}
+
+.react-flow__controls-button:hover {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+}
+
+.react-flow__controls-button:last-child {
+  border-bottom: none;
+}
+
+.react-flow__controls-button svg {
+  fill: currentColor;
+}
+
+/* React Flow MiniMap */
+.react-flow__minimap {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+}
+
+.react-flow__minimap-mask {
+  fill: light-dark(rgba(232, 237, 245, 0.8), rgba(12, 16, 28, 0.8));
+}
+
+/* ============================================
+   CUSTOM SCROLLBAR
+   ============================================ */
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+/* ============================================
+   ANIMATIONS
+   ============================================ */
+
+@keyframes slide-in-from-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Expand animation for timeline swimlane children — GPU-composited (transform + opacity only).
+   Slides down from the parent row with a fade. Collapse is instant (unmount). */
+@keyframes swimlane-expand {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.animate-in {
+  animation: slide-in-from-right 0.2s ease-out;
+}
+
+@keyframes slide-out-to-right {
+  from { transform: translateX(0); opacity: 1; }
+  to { transform: translateX(100%); opacity: 0; }
+}
+
+.animate-out {
+  animation: slide-out-to-right 0.2s ease-in forwards;
+}
+
+/* View Transitions: drawer content cross-fade */
+::view-transition-old(drawer-content),
+::view-transition-old(helm-drawer-content) {
+  animation-duration: 100ms;
+  animation-timing-function: ease-out;
+}
+::view-transition-new(drawer-content),
+::view-transition-new(helm-drawer-content) {
+  animation-duration: 200ms;
+  animation-timing-function: ease-in;
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(24px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.5s ease-out both;
+}
+
+.slide-in-from-right-5 {
+  --tw-enter-translate-x: 1.25rem;
+}
+
+.fade-in {
+  animation: slide-in-from-right 0.2s ease-out;
+}
+
+
+/* ============================================
+   XTERM TERMINAL STYLES
+   ============================================ */
+
+/* Override any potential centering and ensure proper layout */
+.xterm,
+.xterm-viewport,
+.xterm-screen {
+  text-align: left !important;
+  margin: 0 !important;
+}
+
+/* Prevent xterm from growing beyond its container */
+.xterm {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  overflow: hidden !important;
+}
+
+.xterm-screen canvas {
+  margin: 0 !important;
+}
+
+/* Log search highlight */
+mark.log-highlight {
+  background: light-dark(rgba(180, 120, 0, 0.35), rgba(250, 200, 0, 0.55));
+  color: inherit;
+  border-radius: 2px;
+  padding: 0 1px;
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+// @skyhook-io/radar-app — Radar's full web UI as a reusable React component.
+//
+// Source-only package (main points at .ts, no dist/). Consumers need a
+// bundler that transpiles TSX and resolves workspace-style peer deps. The
+// same source is consumed by Radar's binary via main.tsx.
+export { RadarApp, type RadarAppProps } from './RadarApp';
+export {
+  setApiBase,
+  setBasename,
+  setAuthHeadersProvider,
+  setCredentialsMode,
+  getApiBase,
+  getBasename,
+  getAuthHeaders,
+  getCredentialsMode,
+} from './api/config';
+export type { NavCustomization } from './context/NavCustomization';

package/src/main.tsx

@@ -0,0 +1,158 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { RadarApp } from './RadarApp'
+import { openExternal } from './utils/navigation'
+import './index.css'
+
+// Intercept external link clicks in the Wails desktop app.
+// <a target="_blank"> is swallowed by WKWebView/WebView2 — route through openExternal()
+// which calls the backend /api/desktop/open-url endpoint to open in the system browser.
+window.addEventListener('click', (e: MouseEvent) => {
+  const anchor = (e.target as HTMLElement).closest?.('a[href]') as HTMLAnchorElement | null
+  if (!anchor) return
+  const href = anchor.href
+  if (!href || href.startsWith(window.location.origin) || href.startsWith('/') || href.startsWith('#') || href.startsWith('blob:')) return
+  // External URL — open via system browser
+  e.preventDefault()
+  openExternal(href)
+})
+
+// === Wails Desktop Clipboard ===
+//
+// Background: The desktop app uses a RedirectHandler that navigates the Wails
+// webview from wails:// to http://localhost:<port>. After the redirect,
+// window.runtime (Wails JS API) is no longer available. Clipboard operations
+// must use navigator.clipboard and DOM events instead.
+//
+// What works and why:
+//   Cmd+C / Cmd+X: Handled in keydown listener below. The Edit menu registers
+//     these accelerators with nil callbacks (native responder chain), but WKWebView
+//     does NOT dispatch a DOM copy/cut event from the native copy: selector.
+//     The keydown event DOES reach JS, so we intercept it here.
+//   Cmd+V: Handled by menu.go's explicit WindowExecJS callback which reads
+//     navigator.clipboard.readText() and dispatches a synthetic paste event.
+//   Right-click Copy/Cut (Monaco): Monaco calls document.execCommand('copy'/'cut'),
+//     intercepted by the monkey-patch below.
+//   Right-click Paste (Monaco): Not supported — Monaco calls navigator.clipboard
+//     .readText() directly (not execCommand), and WKWebView blocks readText() from
+//     page JS context. Use Cmd+V instead.
+
+// Read selected text from Monaco if it has focus. Monaco uses virtual selection
+// (not DOM selection), so window.getSelection() doesn't work — we access the
+// editor instance exposed by YamlEditor.tsx.
+function getMonacoSelection(): { text: string; editor: any } | null {
+  const editor = (window as any).__radarMonacoEditor
+  if (!editor?.hasTextFocus?.()) return null
+  const sel = editor.getSelection()
+  const model = editor.getModel()
+  if (!sel || !model) return null
+  const text = model.getValueInRange(sel)
+  if (!text) return null
+  return { text, editor }
+}
+
+function getSelectedText(): { text: string; monaco: { text: string; editor: any } | null } {
+  const monaco = getMonacoSelection()
+  if (monaco) return { text: monaco.text, monaco }
+  const sel = window.getSelection()
+  const text = sel ? sel.toString() : ''
+  return { text, monaco: null }
+}
+
+function deleteMonacoSelection(editor: any): void {
+  editor.pushUndoStop()
+  editor.executeEdits('cut', [{ range: editor.getSelection(), text: '' }])
+  editor.pushUndoStop()
+}
+
+function handleCopyOrCut(isCut: boolean): void {
+  const { text, monaco } = getSelectedText()
+  if (!text) return
+  navigator.clipboard.writeText(text).catch((err) => { console.warn('[Radar] Clipboard write failed:', err) })
+  if (isCut) {
+    if (monaco) {
+      deleteMonacoSelection(monaco.editor)
+    } else {
+      _origExecCommand('delete')
+    }
+  }
+}
+
+// Cmd+C/X: the menu's nil callback does NOT dispatch a DOM copy event.
+document.addEventListener('keydown', (e) => {
+  if (!(e.metaKey || e.ctrlKey)) return
+  if (e.key !== 'c' && e.key !== 'x') return
+  handleCopyOrCut(e.key === 'x')
+}, true)
+
+// Intercept copy/cut DOM events to handle Monaco's virtual selection.
+// These fire from right-click -> Copy in some contexts. When a real
+// ClipboardEvent is available, we write directly to e.clipboardData
+// (synchronous, more reliable than the async clipboard API).
+document.addEventListener('copy', (e: ClipboardEvent) => {
+  const result = getMonacoSelection()
+  if (result && e.clipboardData) {
+    e.preventDefault()
+    e.clipboardData.setData('text/plain', result.text)
+  }
+}, true)
+
+document.addEventListener('cut', (e: ClipboardEvent) => {
+  const result = getMonacoSelection()
+  if (result && e.clipboardData) {
+    e.preventDefault()
+    e.clipboardData.setData('text/plain', result.text)
+    deleteMonacoSelection(result.editor)
+  }
+}, true)
+
+// Monkey-patch document.execCommand for Wails WebView compatibility.
+// Handles copy/cut from Monaco's right-click context menu, and paste from
+// any context that calls execCommand('paste').
+const _origExecCommand = document.execCommand.bind(document)
+document.execCommand = function (command: string, showUI?: boolean, value?: string) {
+  if (command === 'copy' || command === 'cut') {
+    handleCopyOrCut(command === 'cut')
+    return true
+  }
+  if (command === 'paste') {
+    navigator.clipboard.readText().then((text) => {
+      if (!text) return
+      const el = document.activeElement || document.body
+      try {
+        const dt = new DataTransfer()
+        dt.setData('text/plain', text)
+        const ev = new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true })
+        if (!el.dispatchEvent(ev)) return
+      } catch (_e) { /* ClipboardEvent dispatch failed, fall back to insertText */ }
+      _origExecCommand('insertText', false, text)
+    }).catch((err) => { console.warn('[Radar] Paste failed:', err) })
+    return true
+  }
+  return _origExecCommand(command, showUI, value)
+} as typeof document.execCommand
+
+// Mouse back/forward button navigation (button 3 = back, button 4 = forward).
+// Uses 'mouseup' in capture phase to intercept before the browser's native handler.
+// This prevents double-navigation in browsers (where auxclick + native both fire)
+// and handles desktop WebView (Windows/Linux) where native handling varies.
+// On macOS WKWebView, mouse events don't reach JS — native NSEvent monitor in
+// mouse_darwin.go handles them via WKWebView.goBack()/goForward() directly.
+window.addEventListener('mouseup', (e: MouseEvent) => {
+  if (e.button === 3) {
+    e.preventDefault()
+    window.history.back()
+  } else if (e.button === 4) {
+    e.preventDefault()
+    window.history.forward()
+  }
+}, true)
+
+
+// Standalone Radar binary: same-origin API, router at root. Library consumers
+// (e.g. radar-hub-web) render <RadarApp apiBase="..." basename="..." /> instead.
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <RadarApp />
+  </React.StrictMode>
+)

package/src/types/gitops.ts

@@ -0,0 +1,2 @@
+// Re-export all GitOps types from the shared @skyhook-io/k8s-ui package.
+export * from '@skyhook-io/k8s-ui/types/gitops'

package/src/types.ts

@@ -0,0 +1,3 @@
+// Re-export all types from the shared @skyhook-io/k8s-ui package.
+// This file exists for backward compatibility — new code should import from '@skyhook-io/k8s-ui' directly.
+export * from '@skyhook-io/k8s-ui/types/core'

package/src/utils/animation.ts

@@ -0,0 +1,2 @@
+// Re-export all animation utilities from the shared @skyhook-io/k8s-ui package.
+export * from '@skyhook-io/k8s-ui/utils/animation'

package/src/utils/badge-colors.ts

@@ -0,0 +1,2 @@
+// Re-export all badge color utilities from the shared @skyhook-io/k8s-ui package.
+export * from '@skyhook-io/k8s-ui/utils/badge-colors'

package/src/utils/context-name.ts

@@ -0,0 +1,2 @@
+// Re-export from the shared @skyhook-io/k8s-ui package.
+export * from '@skyhook-io/k8s-ui/utils/context-name'

package/src/utils/desktop-download.ts

@@ -0,0 +1,66 @@
+// Desktop file-save utilities.
+// In the desktop app (Wails), blob URL downloads are silently ignored by
+// WKWebView / WebView2. These helpers route downloads through a backend
+// endpoint that shows the native OS save dialog instead.
+
+import { fetchJSON } from '../api/client'
+import { apiUrl, getAuthHeaders, getCredentialsMode } from '../api/config'
+
+let desktopCheck: Promise<boolean> | null = null
+
+/** Returns true when running inside the desktop (Wails) app. Cached after first successful call. */
+export function isDesktopApp(): Promise<boolean> {
+  if (!desktopCheck) {
+    desktopCheck = fetchJSON<{ isDesktop: boolean }>('/config')
+      .then((d) => d.isDesktop ?? false)
+      .catch(() => {
+        desktopCheck = null // allow retry on next call
+        return false
+      })
+  }
+  return desktopCheck
+}
+
+/** Save text content via native save dialog. Returns the chosen file path, or throws with message 'cancelled' if the user dismisses the dialog. */
+export async function desktopSaveFile(content: string, filename: string): Promise<string> {
+  const res = await fetch(apiUrl('/desktop/save-file'), {
+    method: 'POST',
+    credentials: getCredentialsMode(),
+    headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+    body: JSON.stringify({ content, filename }),
+  })
+  if (res.status === 204) throw new Error('cancelled')
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({ error: 'Save failed' }))
+    throw new Error(body.error ?? 'Save failed')
+  }
+  const body = await res.json()
+  return body.path
+}
+
+/** Save a Blob via native save dialog. Returns the chosen file path, or throws with message 'cancelled' if the user dismisses the dialog. */
+export async function desktopSaveBlob(blob: Blob, filename: string): Promise<string> {
+  const contentBase64 = await new Promise<string>((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onloadend = () => {
+      const dataUrl = reader.result as string
+      resolve(dataUrl.split(',')[1]) // strip "data:...;base64,"
+    }
+    reader.onerror = () => reject(new Error('Failed to read file'))
+    reader.readAsDataURL(blob)
+  })
+
+  const res = await fetch(apiUrl('/desktop/save-file'), {
+    method: 'POST',
+    credentials: getCredentialsMode(),
+    headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+    body: JSON.stringify({ contentBase64, filename }),
+  })
+  if (res.status === 204) throw new Error('cancelled')
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({ error: 'Save failed' }))
+    throw new Error(body.error ?? 'Save failed')
+  }
+  const body = await res.json()
+  return body.path
+}

package/src/utils/desktop-open-folder.ts

@@ -0,0 +1,21 @@
+import { apiUrl, getAuthHeaders, getCredentialsMode } from '../api/config'
+
+/** Reveal a file in the system file manager (Finder on macOS, Explorer on Windows). */
+export function openFolder(path: string): void {
+  fetch(apiUrl('/desktop/open-folder'), {
+    method: 'POST',
+    credentials: getCredentialsMode(),
+    headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+    body: JSON.stringify({ path }),
+  }).catch((err) => console.warn('[desktop] Failed to open folder:', err))
+}
+
+/** Open a file with the system default application. */
+export function openFile(path: string): void {
+  fetch(apiUrl('/desktop/open-file'), {
+    method: 'POST',
+    credentials: getCredentialsMode(),
+    headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+    body: JSON.stringify({ path }),
+  }).catch((err) => console.warn('[desktop] Failed to open file:', err))
+}

package/src/utils/format.ts

@@ -0,0 +1,2 @@
+// Re-export all format utilities from the shared @skyhook-io/k8s-ui package.
+export * from '@skyhook-io/k8s-ui/utils/format'

package/src/utils/log-format.ts

@@ -0,0 +1,12 @@
+export {
+  formatLogTimestamp,
+  getLevelColor,
+  highlightSearchMatches,
+  escapeHtml,
+  stripAnsi,
+  ansiToHtml,
+  escapeRegExp,
+  parseLogLine,
+  parseLogRange,
+  handleSSEError,
+} from '@skyhook-io/k8s-ui'

package/src/utils/navigation.ts

@@ -0,0 +1,23 @@
+import { apiUrl, getAuthHeaders, getCredentialsMode } from '../api/config'
+
+// Re-export shared navigation utilities from @skyhook-io/k8s-ui.
+export { kindToPlural, pluralToKind, refToSelectedResource } from '@skyhook-io/k8s-ui/utils/navigation'
+export type { NavigateToResource } from '@skyhook-io/k8s-ui/utils/navigation'
+
+// radar-specific: open URL in system browser (desktop app support)
+export function openExternal(url: string): void {
+  fetch(apiUrl('/desktop/open-url'), {
+    method: 'POST',
+    credentials: getCredentialsMode(),
+    headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+    body: JSON.stringify({ url }),
+  })
+    .then((res) => {
+      if (!res.ok) {
+        window.open(url, '_blank')
+      }
+    })
+    .catch(() => {
+      window.open(url, '_blank')
+    })
+}

package/src/utils/resource-hierarchy.ts

@@ -0,0 +1,2 @@
+// Re-export all resource hierarchy utilities from the shared @skyhook-io/k8s-ui package.
+export * from '@skyhook-io/k8s-ui/utils/resource-hierarchy'

package/src/utils/resource-icons.ts

@@ -0,0 +1,2 @@
+// Re-export all resource icon utilities from the shared @skyhook-io/k8s-ui package.
+export * from '@skyhook-io/k8s-ui/utils/resource-icons'

package/src/utils/skeleton-yaml.ts

@@ -0,0 +1,2 @@
+// Re-export from shared package
+export { getSkeletonYaml, cleanYamlForDuplicate } from '@skyhook-io/k8s-ui'