@skyhook-io/radar-app 1.13.4 → 1.13.5

package/src/components/resources/PodFilesystemModal.tsx

@@ -1,6 +1,6 @@
 import { createElement, useState, useRef, useEffect, useMemo, useCallback } from 'react'
 import { createPortal } from 'react-dom'
-import { X, File, Link2, ChevronRight, AlertTriangle, Loader2, Search, Download, FolderOpen } from 'lucide-react'
+import { X, File, Link2, ChevronRight, ArrowLeft, AlertTriangle, Loader2, Search, Download, FolderOpen } from 'lucide-react'
 import { PaneLoader, Input } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
 import type { FileNode } from '../../types'
@@ -11,6 +11,7 @@ import { isDesktopApp } from '../../utils/desktop-download'
 import { openFile, openFolder } from '../../utils/desktop-open-folder'
 import { useToast } from '../ui/Toast'
 import { Tooltip } from '../ui/Tooltip'
+import { PodFilePreview, PREVIEW_BYTE_CAP } from './PodFilePreview'
 
 interface PodFilesystem {
   root: FileNode
@@ -68,6 +69,56 @@ async function savePodFileToDisk(
   return body.path
 }
 
+type PodFileToast = Pick<ReturnType<typeof useToast>, 'showSuccess' | 'showError'>
+
+// One download path for the listing row and the preview header. Desktop saves
+// straight from the backend; the browser gets a blob.
+async function downloadPodFile(
+  namespace: string,
+  podName: string,
+  container: string,
+  node: Pick<FileNode, 'path' | 'name'>,
+  { showSuccess, showError }: PodFileToast,
+) {
+  try {
+    if (await isDesktopApp()) {
+      const savedPath = await savePodFileToDisk(namespace, podName, container, node.path)
+      showSuccess(
+        'File saved',
+        savedPath,
+        {
+          label: 'Show in Finder',
+          icon: createElement(FolderOpen, { className: 'w-3.5 h-3.5' }),
+          onClick: () => openFolder(savedPath),
+        },
+        () => openFile(savedPath),
+      )
+      return
+    }
+
+    const params = new URLSearchParams()
+    params.set('container', container)
+    params.set('path', node.path)
+
+    const response = await fetch(apiUrl(`/pods/${namespace}/${podName}/files/download?${params.toString()}`), {
+      credentials: getCredentialsMode(),
+      headers: getAuthHeaders(),
+    })
+    if (!response.ok) {
+      const err = await response.json().catch(() => ({ error: 'Download failed' }))
+      throw new Error(err.error || `HTTP ${response.status}`)
+    }
+
+    const blob = await response.blob()
+    await downloadBlob(blob, node.name)
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err)
+    if (message !== 'cancelled') {
+      showError(`Could not download ${node.name}`, message)
+    }
+  }
+}
+
 interface PodFilesystemModalProps {
   open: boolean
   onClose: () => void
@@ -94,8 +145,12 @@ export function PodFilesystemModal({
   const [filesystem, setFilesystem] = useState<PodFilesystem | null>(null)
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  // The file being viewed in place of the listing; null shows the directory.
+  const [previewFile, setPreviewFile] = useState<FileNode | null>(null)
+  const toast = useToast()
 
   const loadDirectory = useCallback(async (dirPath: string) => {
+    setPreviewFile(null)
     setIsLoading(true)
     setError(null)
     try {
@@ -124,19 +179,24 @@ export function PodFilesystemModal({
       setError(null)
       setIsLoading(false)
       setCurrentPath('/')
+      setPreviewFile(null)
       setSelectedContainer(initialContainer || containers[0] || '')
     }
   }, [open, initialContainer, containers])
 
-  // Handle ESC key
+  // ESC steps back one level: out of a file to its listing, then out of the
+  // dialog. One listener owns both so the two can never race.
   useEffect(() => {
     if (!open) return
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') { e.stopPropagation(); onClose() }
+      if (e.key !== 'Escape') return
+      e.stopPropagation()
+      if (previewFile) setPreviewFile(null)
+      else onClose()
     }
     document.addEventListener('keydown', handleKeyDown, true)
     return () => document.removeEventListener('keydown', handleKeyDown, true)
-  }, [open, onClose])
+  }, [open, onClose, previewFile])
 
   // Focus trap
   useEffect(() => {
@@ -149,10 +209,19 @@ export function PodFilesystemModal({
 
   const showFilesystem = filesystem && filesystem.root
 
-  // Build breadcrumb segments
-  const pathSegments = currentPath === '/'
+  // Breadcrumb: the directory path, plus the file when one is open. Clicking
+  // the current directory while viewing a file just returns to its listing.
+  const breadcrumbPath = previewFile ? previewFile.path : currentPath
+  const pathSegments = breadcrumbPath === '/'
     ? ['/']
-    : ['/', ...currentPath.split('/').filter(Boolean)]
+    : ['/', ...breadcrumbPath.split('/').filter(Boolean)]
+  const goToDirectory = (dirPath: string) => {
+    if (dirPath === currentPath) setPreviewFile(null)
+    else loadDirectory(dirPath)
+  }
+  const downloadPreviewFile = () => {
+    if (previewFile) downloadPodFile(namespace, podName, selectedContainer, previewFile, toast)
+  }
 
   return createPortal(
     <div className="fixed inset-0 z-[100] flex items-center justify-center">
@@ -163,19 +232,47 @@ export function PodFilesystemModal({
       <div
         ref={dialogRef}
         tabIndex={-1}
-        className="relative dialog w-full max-w-4xl mx-4 max-h-[85vh] flex flex-col outline-none"
+        className="relative dialog w-full max-w-4xl mx-4 h-[85vh] flex flex-col outline-none"
       >
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b border-theme-border shrink-0">
-          <div className="flex-1 min-w-0">
-            <h3 className="text-lg font-semibold text-theme-text-primary">Pod Files</h3>
-            <p className="text-sm text-theme-text-secondary truncate mt-0.5">
-              {namespace}/{podName}
-            </p>
-          </div>
+          {previewFile ? (
+            <>
+              <Tooltip content="Back to files">
+                <button
+                  onClick={() => setPreviewFile(null)}
+                  className="p-2 mr-2 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+                >
+                  <ArrowLeft className="w-5 h-5" />
+                </button>
+              </Tooltip>
+              <div className="flex-1 min-w-0">
+                <h3 className="text-lg font-semibold text-theme-text-primary truncate">{previewFile.name}</h3>
+                <p className="text-sm text-theme-text-secondary truncate mt-0.5">
+                  {namespace}/{podName} · {selectedContainer}
+                  {previewFile.size !== undefined ? ` · ${formatBytes(previewFile.size)}` : null}
+                </p>
+              </div>
+              <Tooltip content="Download file">
+                <button
+                  onClick={downloadPreviewFile}
+                  className="p-2 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+                >
+                  <Download className="w-5 h-5" />
+                </button>
+              </Tooltip>
+            </>
+          ) : (
+            <div className="flex-1 min-w-0">
+              <h3 className="text-lg font-semibold text-theme-text-primary">Pod Files</h3>
+              <p className="text-sm text-theme-text-secondary truncate mt-0.5">
+                {namespace}/{podName}
+              </p>
+            </div>
+          )}
 
           {/* Container selector */}
-          {containers.length > 1 && (
+          {!previewFile && containers.length > 1 && (
             <select
               value={selectedContainer}
               onChange={(e) => setSelectedContainer(e.target.value)}
@@ -206,7 +303,7 @@ export function PodFilesystemModal({
                 <span key={segmentPath} className="flex items-center gap-1">
                   {i > 0 && <ChevronRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />}
                   <button
-                    onClick={() => !isLast && loadDirectory(segmentPath)}
+                    onClick={() => !isLast && goToDirectory(segmentPath)}
                     className={clsx(
                       'truncate',
                       isLast
@@ -222,7 +319,7 @@ export function PodFilesystemModal({
           </div>
 
           {/* Search */}
-          {showFilesystem && (
+          {showFilesystem && !previewFile && (
             <div className="relative flex-1 min-w-[200px]">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
               <Input
@@ -236,9 +333,22 @@ export function PodFilesystemModal({
         </div>
 
         {/* Content */}
-        <div className="flex-1 overflow-y-auto p-4">
+        {previewFile ? (
+          <div className="flex-1 min-h-0 flex flex-col">
+            <PodFilePreview
+              key={previewFile.path}
+              namespace={namespace}
+              podName={podName}
+              container={selectedContainer}
+              filePath={previewFile.path}
+              fileName={previewFile.name}
+              onDownload={downloadPreviewFile}
+            />
+          </div>
+        ) : (
+        <div className="flex-1 min-h-0 overflow-y-auto p-4">
           {/* Loading */}
-          {isLoading && <PaneLoader label="Loading files…" className="h-64" />}
+          {isLoading && <PaneLoader label="Loading files…" className="h-full" />}
 
           {/* Error */}
           {error && !isLoading && (
@@ -262,9 +372,11 @@ export function PodFilesystemModal({
               podName={podName}
               container={selectedContainer}
               onNavigate={loadDirectory}
+              onOpenFile={setPreviewFile}
             />
           )}
         </div>
+        )}
 
         {/* Footer with stats */}
         <div className="p-3 border-t border-theme-border text-xs text-theme-text-tertiary flex items-center gap-4 shrink-0">
@@ -300,9 +412,10 @@ interface PodFileTreeViewProps {
   podName: string
   container: string
   onNavigate: (path: string) => void
+  onOpenFile: (node: FileNode) => void
 }
 
-function PodFileTreeView({ root, searchQuery, namespace, podName, container, onNavigate }: PodFileTreeViewProps) {
+function PodFileTreeView({ root, searchQuery, namespace, podName, container, onNavigate, onOpenFile }: PodFileTreeViewProps) {
   const filteredRoot = useMemo(() => {
     if (!searchQuery.trim()) return root
     return filterTree(root, searchQuery.toLowerCase())
@@ -326,6 +439,7 @@ function PodFileTreeView({ root, searchQuery, namespace, podName, container, onN
           podName={podName}
           container={container}
           onNavigate={onNavigate}
+          onOpenFile={onOpenFile}
         />
       ))}
     </div>
@@ -338,72 +452,48 @@ interface PodFileTreeNodeProps {
   podName: string
   container: string
   onNavigate: (path: string) => void
+  onOpenFile: (node: FileNode) => void
 }
 
-function PodFileTreeNode({ node, namespace, podName, container, onNavigate }: PodFileTreeNodeProps) {
+function PodFileTreeNode({ node, namespace, podName, container, onNavigate, onOpenFile }: PodFileTreeNodeProps) {
   const [downloading, setDownloading] = useState(false)
-  const { showSuccess, showError } = useToast()
+  const toast = useToast()
   const isDir = node.type === 'dir'
   const isSymlink = node.type === 'symlink'
-  const isDownloadable = !isDir // files and symlinks can be downloaded
+  // Size is the one preview rejection the listing can see coming. Whether a
+  // file is binary or readable is only known once its bytes are read.
+  const tooLarge = !isDir && (node.size ?? 0) > PREVIEW_BYTE_CAP
 
   const handleDownload = async (e: React.MouseEvent) => {
     e.stopPropagation()
     if (downloading) return
-
     setDownloading(true)
     try {
-      if (await isDesktopApp()) {
-        const savedPath = await savePodFileToDisk(namespace, podName, container, node.path)
-        showSuccess(
-          'File saved',
-          savedPath,
-          {
-            label: 'Show in Finder',
-            icon: createElement(FolderOpen, { className: 'w-3.5 h-3.5' }),
-            onClick: () => openFolder(savedPath),
-          },
-          () => openFile(savedPath),
-        )
-        return
-      }
-
-      const params = new URLSearchParams()
-      params.set('container', container)
-      params.set('path', node.path)
-
-      const response = await fetch(apiUrl(`/pods/${namespace}/${podName}/files/download?${params.toString()}`), {
-        credentials: getCredentialsMode(),
-        headers: getAuthHeaders(),
-      })
-      if (!response.ok) {
-        const err = await response.json().catch(() => ({ error: 'Download failed' }))
-        throw new Error(err.error || `HTTP ${response.status}`)
-      }
-
-      const blob = await response.blob()
-      await downloadBlob(blob, node.name)
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err)
-      if (message !== 'cancelled') {
-        showError(`Could not download ${node.name}`, message)
-      }
+      await downloadPodFile(namespace, podName, container, node, toast)
     } finally {
       setDownloading(false)
     }
   }
 
+  // Directories open in place; anything else opens in the viewer, which
+  // reports a symlink to a directory as "not a regular file" itself.
   const handleClick = () => {
-    if (isDir) {
-      onNavigate(node.path)
-    }
+    if (isDir) onNavigate(node.path)
+    else if (!tooLarge) onOpenFile(node)
   }
 
   return (
+    <Tooltip
+      content={`Too large to preview (${formatBytes(node.size ?? 0)}) — download instead`}
+      disabled={!tooLarge}
+      wrapperClassName="flex w-full"
+      position="bottom"
+    >
     <div
       className={clsx(
-        'flex items-center gap-1 py-0.5 px-1 rounded hover:bg-theme-elevated',
-        isDir && 'font-medium cursor-pointer'
+        'flex flex-1 min-w-0 items-center gap-1 py-0.5 px-1 rounded hover:bg-theme-elevated',
+        isDir && 'font-medium',
+        tooLarge ? 'cursor-default' : 'cursor-pointer'
       )}
       onClick={handleClick}
     >
@@ -415,7 +505,7 @@ function PodFileTreeNode({ node, namespace, podName, container, onNavigate }: Po
         <File className="w-4 h-4 text-theme-text-tertiary shrink-0" />
       )}
 
-      <span className="text-theme-text-primary truncate flex-1">{node.name}</span>
+      <span className={clsx('truncate flex-1', tooLarge ? 'text-theme-text-secondary' : 'text-theme-text-primary')}>{node.name}</span>
 
       {isSymlink && node.linkTarget && (
         <span className="text-xs text-cyan-400 truncate max-w-48">
@@ -435,7 +525,7 @@ function PodFileTreeNode({ node, namespace, podName, container, onNavigate }: Po
         </span>
       )}
 
-      {isDownloadable && (
+      {!isDir && (
         <Tooltip content="Download file" wrapperClassName="ml-1">
         <button
           onClick={handleDownload}
@@ -451,6 +541,6 @@ function PodFileTreeNode({ node, namespace, podName, container, onNavigate }: Po
         </Tooltip>
       )}
     </div>
+    </Tooltip>
   )
 }
-

package/src/context/DiagnoseCustomization.test.tsx

@@ -0,0 +1,26 @@
+import { describe, expect, it, vi } from 'vitest';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { DiagnoseCustomizationProvider, useDiagnoseCustomization } from './DiagnoseCustomization';
+import type { RunSummary } from '../api/diagnose';
+
+const run = { id: 'r1' } as RunSummary;
+const onRunUpdated = vi.fn();
+function Actions() {
+  const { renderRunActions } = useDiagnoseCustomization();
+  return <>{renderRunActions?.({ run, onRunUpdated })}</>;
+}
+
+describe('investigation action slot', () => {
+  it('has no default host actions in OSS', () => {
+    expect(renderToStaticMarkup(<Actions />)).toBe('');
+  });
+  it('passes the run and update callback to the host', () => {
+    const renderRunActions = vi.fn(() => <button>Host action</button>);
+    expect(renderToStaticMarkup(
+      <DiagnoseCustomizationProvider value={undefined} renderRunActions={renderRunActions}>
+        <Actions />
+      </DiagnoseCustomizationProvider>,
+    )).toContain('Host action');
+    expect(renderRunActions).toHaveBeenCalledWith({ run, onRunUpdated });
+  });
+});

package/src/context/DiagnoseCustomization.tsx

@@ -11,6 +11,15 @@
 // agent-free.
 import { createContext, useContext, useMemo } from "react";
 import type { ReactNode } from "react";
+import type { RunSummary } from "../api/diagnose";
+
+/** Optional host controls beside shared run actions. Return a component element
+ * if hooks are needed: this callback is invoked conditionally. Call onRunUpdated
+ * after a mutation to refresh the shared run summary. */
+export type RenderInvestigationRunActions = (props: {
+  run: RunSummary;
+  onRunUpdated: (run: RunSummary) => void;
+}) => ReactNode;
 
 /** Render prop for the resource-level Investigate action. */
 export type RenderDiagnoseAction = (ctx: {
@@ -52,6 +61,7 @@ export type DiagnoseConsentCopy = {
 // set once at mount, so per-value re-render isolation buys nothing.
 export interface DiagnoseCustomization {
   renderAction: RenderDiagnoseAction | undefined;
+  renderRunActions?: RenderInvestigationRunActions;
   consentCopy: DiagnoseConsentCopy | undefined;
   // undefined = default (CustomEvent → Radar's own Settings dialog);
   // null = hide the settings affordances.
@@ -70,19 +80,21 @@ const DiagnoseCustomizationContext =
 export function DiagnoseCustomizationProvider({
   value,
   consentCopy,
+  renderRunActions,
   onOpenSettings,
   children,
 }: {
   value: RenderDiagnoseAction | undefined;
   consentCopy?: DiagnoseConsentCopy;
+  renderRunActions?: RenderInvestigationRunActions;
   /** Where "AI settings" affordances lead. Omit for Radar's own Settings
    *  dialog; pass `null` to hide them. */
   onOpenSettings?: (() => void) | null;
   children: ReactNode;
 }) {
   const ctx = useMemo(
-    () => ({ renderAction: value, consentCopy, onOpenSettings }),
-    [value, consentCopy, onOpenSettings],
+    () => ({ renderAction: value, consentCopy, onOpenSettings, renderRunActions }),
+    [value, consentCopy, onOpenSettings, renderRunActions],
   );
   return (
     <DiagnoseCustomizationContext.Provider value={ctx}>

package/src/index.ts

@@ -28,6 +28,7 @@ export type {
 } from './api/timelineSource';
 export type {
   RenderDiagnoseAction,
+  RenderInvestigationRunActions,
   DiagnoseConsentCopy,
 } from './context/DiagnoseCustomization';
 

package/src/utils/shell-safe.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { allShellSafe, isShellSafeValue } from './shell-safe'
+import { allShellSafe, isShellSafeAWSProfile, isShellSafeValue } from './shell-safe'
 
 describe('isShellSafeValue', () => {
   it('accepts the values real provider context names produce', () => {
@@ -53,3 +53,27 @@ describe('allShellSafe', () => {
     expect(allShellSafe('prod', null)).toBe(false)
   })
 })
+
+describe('isShellSafeAWSProfile', () => {
+  it('accepts simple and slash-separated profile names', () => {
+    expect(isShellSafeAWSProfile('default')).toBe(true)
+    expect(isShellSafeAWSProfile('myorg/my-account/my-role')).toBe(true)
+    expect(isShellSafeAWSProfile('prod-account')).toBe(true)
+  })
+
+  it('rejects shell metacharacters', () => {
+    expect(isShellSafeAWSProfile('prod; id')).toBe(false)
+    expect(isShellSafeAWSProfile('prod$(id)')).toBe(false)
+    expect(isShellSafeAWSProfile('prod profile')).toBe(false)
+  })
+
+  it('rejects leading dash', () => {
+    expect(isShellSafeAWSProfile('-rf')).toBe(false)
+  })
+
+  it('rejects empty and absent values', () => {
+    expect(isShellSafeAWSProfile('')).toBe(false)
+    expect(isShellSafeAWSProfile(null)).toBe(false)
+    expect(isShellSafeAWSProfile(undefined)).toBe(false)
+  })
+})

package/src/utils/shell-safe.ts

@@ -19,3 +19,19 @@ export function isShellSafeValue(value: string | null | undefined): value is str
 export function allShellSafe(...values: (string | null | undefined)[]): boolean {
   return values.every(isShellSafeValue)
 }
+
+// AWS SSO profile names may contain `/` as a path separator
+// (e.g. "myorg/my-account/my-role") — safe in shell arguments since `/`
+// has no special meaning to the shell itself.
+const SHELL_SAFE_AWS_PROFILE = /^[A-Za-z0-9][A-Za-z0-9._:@/-]*$/
+
+export function isShellSafeAWSProfile(value: string | null | undefined): value is string {
+  return typeof value === 'string' && SHELL_SAFE_AWS_PROFILE.test(value)
+}
+
+// Returns ` --profile <name>` for embedding in an aws CLI hint, or '' when no
+// profile is pinned or the name fails the allowlist — the hint then falls
+// back to the ambient profile rather than offering nothing.
+export function awsProfileFlag(profile: string | null | undefined): string {
+  return isShellSafeAWSProfile(profile) ? ` --profile ${profile}` : ''
+}