@skyhook-io/radar-app 1.14.0 → 1.14.2

package/src/components/ui/Disclosure.tsx

@@ -0,0 +1,47 @@
+import { useState, type ReactNode } from 'react'
+import { clsx } from 'clsx'
+import { Collapse, CollapseChevron, useDisclosure } from '@skyhook-io/k8s-ui/components/ui/Collapse'
+
+// In-flow disclosure with the app-standard motion — the replacement for native
+// <details>/<summary> on primary paths. Native details snaps open with no
+// transition and its marker ignores the caret language; this pairs a button
+// header (aria-expanded / aria-controls via useDisclosure) with CollapseChevron
+// and an animated Collapse panel. Content stays mounted while closed, exactly
+// like native details, so server-rendered markup and in-page search still see
+// the collapsed copy.
+export function Disclosure({
+  summary,
+  children,
+  className,
+  summaryClassName,
+  chevronClassName = 'h-3.5 w-3.5',
+  defaultOpen = false,
+}: {
+  summary: ReactNode
+  children: ReactNode
+  /** Wrapper (what the old <details> carried). */
+  className?: string
+  /** Header button (what the old <summary> carried). */
+  summaryClassName?: string
+  chevronClassName?: string
+  defaultOpen?: boolean
+}) {
+  const [open, setOpen] = useState(defaultOpen)
+  const disclosure = useDisclosure(open)
+  return (
+    <div className={className}>
+      <button
+        type="button"
+        {...disclosure.buttonProps}
+        onClick={() => setOpen((value) => !value)}
+        className={clsx('flex w-full cursor-pointer items-center gap-1.5 text-left', summaryClassName)}
+      >
+        <CollapseChevron open={open} className={chevronClassName} />
+        {summary}
+      </button>
+      <Collapse open={open} id={disclosure.panelId}>
+        {children}
+      </Collapse>
+    </div>
+  )
+}

package/src/components/ui/Markdown.tsx

@@ -2,12 +2,20 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { clsx } from 'clsx'
 
+import type { ReactNode } from 'react'
+
 interface MarkdownProps {
   children: string
   className?: string
+  /**
+   * Intercepts links before the default anchor renders. Return null to fall
+   * through. Lets a caller turn a reserved href (an in-page evidence
+   * reference, say) into a control instead of an external link.
+   */
+  linkRenderer?: (href: string | undefined, children: ReactNode) => ReactNode | null
 }
 
-export function Markdown({ children, className }: MarkdownProps) {
+export function Markdown({ children, className, linkRenderer }: MarkdownProps) {
   return (
     <div className={clsx('markdown-content', className)}>
       <ReactMarkdown
@@ -28,16 +36,20 @@ export function Markdown({ children, className }: MarkdownProps) {
         p: ({ children }) => (
           <p className="text-theme-text-secondary my-2 leading-relaxed">{children}</p>
         ),
-        a: ({ href, children }) => (
-          <a
-            href={href}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-400 hover:text-blue-300 underline underline-offset-2"
-          >
-            {children}
-          </a>
-        ),
+        a: ({ href, children }) => {
+          const custom = linkRenderer?.(href, children)
+          if (custom !== null && custom !== undefined) return <>{custom}</>
+          return (
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-400 hover:text-blue-300 underline underline-offset-2"
+            >
+              {children}
+            </a>
+          )
+        },
         ul: ({ children }) => (
           <ul className="list-disc list-outside pl-4 my-2 space-y-1 text-theme-text-secondary">{children}</ul>
         ),

package/src/components/ui/ShortcutHelpOverlay.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { X } from 'lucide-react'
 import { clsx } from 'clsx'
-import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+import { TRANSITION_BACKDROP, TRANSITION_PANEL, overlayTransitionStyle } from '../../utils/animation'
 import { useActiveShortcuts, type ShortcutCategory } from '../../hooks/useKeyboardShortcuts'
 
 interface ShortcutHelpOverlayProps {
@@ -232,6 +232,7 @@ export function ShortcutHelpOverlay({ onClose, currentView, isOpen = true }: Sho
           TRANSITION_BACKDROP,
           isOpen ? 'opacity-100' : 'opacity-0'
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
         onClick={onClose}
       />
 
@@ -243,6 +244,7 @@ export function ShortcutHelpOverlay({ onClose, currentView, isOpen = true }: Sho
           TRANSITION_PANEL,
           isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-[0.97]'
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
       >
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-3.5 border-b border-theme-border">

package/src/components/ui/UpdateNotification.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react'
+import { clsx } from 'clsx'
 import { Download, X, Copy, Check, RotateCw, ArrowDownToLine, Loader2 } from 'lucide-react'
 import { useQueryClient } from '@tanstack/react-query'
 import {
@@ -10,6 +11,8 @@ import {
 } from '../../api/client'
 import type { DesktopUpdateState } from '../../api/client'
 import { WithTooltip } from './Tooltip'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
 
 const DISMISSED_KEY = 'radar-update-dismissed'
 
@@ -103,7 +106,11 @@ export function UpdateNotification() {
 
   // Shared in-cluster viewers get a persistent Home notice instead of a
   // floating action prompt they may not be able to act on.
-  if (!versionInfo?.updateAvailable || dismissed || deploymentMode === undefined || deploymentMode === 'in-cluster' || deploymentMode === 'cloud') {
+  const show = !!versionInfo?.updateAvailable && !dismissed && deploymentMode !== undefined && deploymentMode !== 'in-cluster' && deploymentMode !== 'cloud'
+  // Presence outlives `show` by the menu exit so a dismiss fades the chip out
+  // instead of snapping it away; the enter runs the same transition in reverse.
+  const { shouldRender, isOpen } = useAnimatedUnmount(show, overlayExitMs('menu'))
+  if (!shouldRender || !versionInfo) {
     return null
   }
 
@@ -111,7 +118,16 @@ export function UpdateNotification() {
   const effectiveState: DesktopUpdateState = updateStatus?.state ?? 'idle'
 
   return (
-    <div className="fixed bottom-4 right-4 z-50 max-w-sm bg-theme-surface border border-accent/50 rounded-lg shadow-xl p-4 animate-in slide-in-from-right">
+    <div
+      inert={!show || undefined}
+      className={clsx(
+        'fixed bottom-4 right-4 z-50 max-w-sm bg-theme-surface border border-accent/50 rounded-lg shadow-xl p-4 origin-bottom-right',
+        TRANSITION_MENU,
+        isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-1 scale-[0.97]',
+        !show && 'pointer-events-none',
+      )}
+      style={overlayTransitionStyle(isOpen, 'menu')}
+    >
       <div className="flex items-start gap-3">
         <div className="flex items-center justify-center w-8 h-8 bg-accent-muted rounded-full shrink-0">
           <UpdateIcon state={effectiveState} />

package/src/index.css

@@ -344,10 +344,26 @@ body {
   animation: status-enter 140ms ease-out both;
 }
 
+/* Reduced motion is an app-level policy, not a per-class list. Durations and
+   delays go to ~0 (a delay left in place would hold a fill-mode:both element
+   invisible), every loop runs once (an infinite animation at 0.01ms is still an
+   active animation — pulse, ping, Monaco's progress bit), and status spinners
+   keep turning because they convey state, not motion. Components that coordinate motion in
+   JS (presence hooks, drawer morph) check prefersReducedMotion() themselves and
+   dispose at logical close. */
 @media (prefers-reduced-motion: reduce) {
-  .animate-transcript-enter,
-  .animate-status-enter {
-    animation: none;
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0ms !important;
+    scroll-behavior: auto !important;
+  }
+  /* The one exception: a spinner that stops reads as "done", not "calm". */
+  .animate-spin {
+    animation-duration: 1s !important;
+    animation-iteration-count: infinite !important;
   }
 }
 
@@ -403,9 +419,6 @@ body {
     -webkit-text-fill-color: currentColor;
     color: var(--text-secondary);
   }
-  .animate-result-in {
-    animation: none;
-  }
 }
 
 /* Gentle colorize when syntax-highlighted code swaps in over plain text — opacity