@skyhook-io/radar-app 1.3.1 → 1.3.3

package/src/components/home/GitOpsControllersCard.tsx

@@ -41,21 +41,23 @@ export function GitOpsControllersCard({ data, onNavigate }: GitOpsControllersCar
     <button
       type="button"
       onClick={onNavigate}
-      className="flex flex-col gap-3 rounded-xl bg-theme-surface p-4 text-left shadow-theme-sm transition-colors hover:bg-theme-hover"
+      className="group h-[260px] rounded-xl bg-theme-surface shadow-theme-sm hover:-translate-y-1 hover:shadow-theme-md transition-all duration-200 text-left animate-fade-in-up"
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <GitBranch className="h-4 w-4 text-theme-text-tertiary" />
-          <span className="text-xs font-semibold uppercase tracking-wider text-theme-text-secondary">
-            GitOps Controllers
-          </span>
+      <div className="flex flex-col h-full w-full">
+        <div className="flex items-center justify-between px-5 py-3 border-b border-theme-border/50">
+          <div className="flex items-center gap-2">
+            <GitBranch className={clsx('h-4 w-4', headerTone)} />
+            <span className={clsx('text-xs font-semibold uppercase tracking-wider', headerTone)}>
+              GitOps Controllers
+            </span>
+          </div>
+          <span className={clsx('text-[11px] font-medium', headerTone)}>{headerLabel}</span>
         </div>
-        <span className={clsx('text-[11px] font-medium', headerTone)}>{headerLabel}</span>
-      </div>
 
-      <div className="flex flex-col gap-2">
-        {argo.length > 0 && <ControllerSection label="Argo CD" controllers={argo} />}
-        {flux.length > 0 && <ControllerSection label="Flux CD" controllers={flux} />}
+        <div className="flex-1 min-h-0 overflow-y-auto px-5 py-3 flex flex-col gap-3">
+          {argo.length > 0 && <ControllerSection label="Argo CD" controllers={argo} />}
+          {flux.length > 0 && <ControllerSection label="Flux CD" controllers={flux} />}
+        </div>
       </div>
     </button>
   )

package/src/components/home/HomeView.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo, type ReactNode } from 'react'
 import { useDashboard, useDashboardCRDs, useDashboardHelm } from '../../api/client'
 import type { DashboardResponse } from '../../api/client'
 import type { ExtendedMainView, Topology, SelectedResource } from '../../types'
@@ -113,77 +113,88 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
         )}>
           {/* Left column: teaser cards */}
           <div className="flex flex-col gap-6 auto-rows-min">
-            {/* Primary cards — 2-col grid */}
+            {/* Live band — Topology + Timeline always render, so a fixed 2-up never strands.
+                These are the richest visuals and the most-used live views, so they get the width. */}
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
               <TopologyPreview
                 topology={scopedTopology}
                 summary={data.topologySummary}
                 onNavigate={() => onNavigateToView('topology')}
               />
-              <HelmSummary
-                data={helmData}
-                onNavigate={() => onNavigateToView('helm')}
-              />
               <ActivitySummary
                 namespaces={namespaces}
                 topology={scopedTopology}
                 onNavigate={() => onNavigateToView('timeline')}
               />
-              <TrafficSummary
-                data={data.trafficSummary}
-                onNavigate={() => onNavigateToView('traffic')}
-              />
-              <CostCard onNavigate={() => onNavigateToView('cost')} />
             </div>
 
-            {/* Health & compliance cards — 3-col when enough cards, 2-col fallback */}
-            {(data.certificateHealth || data.networkPolicyCoverage || data.audit || data.gitopsControllers) && (() => {
-              const healthCards = [
-                data.certificateHealth && (
-                  <CertificateHealthCard
-                    key="certs"
-                    data={data.certificateHealth}
-                    onNavigate={() => onNavigateToResourceKind('secrets', undefined, { type: ['TLS'] })}
-                  />
-                ),
-                data.networkPolicyCoverage && (
-                  <NetworkPolicyCoverageCard
-                    key="netpol"
-                    data={data.networkPolicyCoverage}
-                    onNavigate={() => onNavigateToResourceKind('networkpolicies', 'networking.k8s.io')}
-                  />
-                ),
-                data.gitopsControllers && (
-                  <GitOpsControllersCard
-                    key="gitops-controllers"
-                    data={data.gitopsControllers}
-                    onNavigate={() => onNavigateToView('gitops')}
-                  />
-                ),
-                data.audit && (
-                  <AuditCard
-                    key="audit"
-                    data={data.audit}
-                    onNavigate={() => onNavigateToView('audit')}
-                  />
-                ),
-              ].filter(Boolean)
-
-              return (
-                <div className={clsx(
-                  'grid gap-6',
-                  healthCards.length >= 3 ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3' : 'grid-cols-1 sm:grid-cols-2'
-                )}>
-                  {healthCards}
-                </div>
-              )
-            })()}
+            {/* Explore band — flex-grow wrap so the row always fills. The conditional
+                Cost card self-hides via BandItem's empty:hidden when OpenCost is absent,
+                leaving Traffic + Helm to stretch rather than stranding an empty cell. */}
+            <div className="flex flex-wrap gap-6">
+              <BandItem>
+                <TrafficSummary
+                  data={data.trafficSummary}
+                  onNavigate={() => onNavigateToView('traffic')}
+                />
+              </BandItem>
+              <BandItem>
+                <HelmSummary
+                  data={helmData}
+                  onNavigate={() => onNavigateToView('helm')}
+                />
+              </BandItem>
+              <BandItem>
+                <CostCard onNavigate={() => onNavigateToView('cost')} />
+              </BandItem>
+            </div>
+
+            {/* Posture band — same flex-grow wrap so any subset of compliance cards
+                fills its row instead of stranding the last one (the old 3-col grid
+                left Cluster Audit alone with two empty cells beside it). */}
+            {(data.certificateHealth || data.networkPolicyCoverage || data.audit || data.gitopsControllers) && (
+              <div className="flex flex-wrap gap-6">
+                {data.certificateHealth && (
+                  <BandItem>
+                    <CertificateHealthCard
+                      data={data.certificateHealth}
+                      onNavigate={() => onNavigateToResourceKind('secrets', undefined, { type: ['TLS'] })}
+                    />
+                  </BandItem>
+                )}
+                {data.networkPolicyCoverage && (
+                  <BandItem>
+                    <NetworkPolicyCoverageCard
+                      data={data.networkPolicyCoverage}
+                      onNavigate={() => onNavigateToResourceKind('networkpolicies', 'networking.k8s.io')}
+                    />
+                  </BandItem>
+                )}
+                {data.gitopsControllers && (
+                  <BandItem>
+                    <GitOpsControllersCard
+                      data={data.gitopsControllers}
+                      onNavigate={() => onNavigateToView('gitops')}
+                    />
+                  </BandItem>
+                )}
+                {data.audit && (
+                  <BandItem>
+                    <AuditCard
+                      data={data.audit}
+                      onNavigate={() => onNavigateToView('audit')}
+                    />
+                  </BandItem>
+                )}
+              </div>
+            )}
           </div>
 
           {/* Right column: problems panel */}
           {hasProblems && (
             <ProblemsPanel
               problems={data.problems}
+              onNavigateToIssues={() => onNavigateToView('issues')}
               onResourceClick={onNavigateToResource}
             />
           )}
@@ -193,25 +204,42 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
   )
 }
 
+// A self-tiling flex item: grows to share the row, clamps to a sensible min
+// width, and removes itself (empty:hidden) when its card renders null — so a
+// data-gated card (e.g. Cost without OpenCost) can't leave a phantom column.
+function BandItem({ children }: { children: ReactNode }) {
+  return <div className="flex-1 min-w-[260px] empty:hidden [&>*]:w-full">{children}</div>
+}
+
 // ============================================================================
 // Problems Panel (right sidebar, scrollable)
 // ============================================================================
 
 interface ProblemsPanelProps {
   problems: DashboardResponse['problems']
+  onNavigateToIssues: () => void
   onResourceClick: (resource: SelectedResource) => void
 }
 
 
-function ProblemsPanel({ problems, onResourceClick }: ProblemsPanelProps) {
+function ProblemsPanel({ problems, onNavigateToIssues, onResourceClick }: ProblemsPanelProps) {
   return (
     <div className="rounded-xl bg-theme-surface shadow-theme-sm flex flex-col lg:max-h-[calc(100vh-280px)] lg:sticky lg:top-0">
       <div className="flex items-center justify-between px-5 py-3 border-b border-theme-border/50 shrink-0">
         <div className="flex items-center gap-2">
           <AlertTriangle className="w-4 h-4 text-red-500" />
-          <span className="text-xs font-semibold uppercase tracking-wider text-red-500">Unhealthy Workloads</span>
+          <span className="text-xs font-semibold uppercase tracking-wider text-red-500">Active Issues</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            className="rounded-md px-2 py-1 text-xs font-medium text-accent-text transition-colors hover:bg-accent-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40"
+            onClick={onNavigateToIssues}
+          >
+            View all
+          </button>
+          <span className="badge status-unhealthy rounded-full">{problems.length}</span>
         </div>
-        <span className="badge status-unhealthy rounded-full">{problems.length}</span>
       </div>
       <div className="overflow-y-auto flex-1 min-h-0">
         <div className="divide-y divide-theme-border">

package/src/components/home/MCPSetupDialog.tsx

@@ -1,6 +1,7 @@
 import { useRef, useEffect, useState, useCallback } from 'react'
 import { X, Copy, Check, Radio, Terminal, MessageSquare, Code2, ChevronRight, Pin } from 'lucide-react'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { MCP_TOOL_CATALOG } from './mcpToolCatalog'
 
 interface MCPSetupDialogProps {
   open: boolean
@@ -208,8 +209,9 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
               verbose YAML output.
             </p>
             <p className="text-sm text-theme-text-secondary leading-relaxed">
-              Read tools are strictly read-only. Write tools (restart, scale, sync) are
-              non-destructive and annotated so your AI client can distinguish them.
+              Read tools are strictly read-only. Write tools (restart, scale, sync, apply,
+              node drain) are annotated as destructive so your AI client can flag them and
+              prompt before running.
             </p>
           </div>
 
@@ -219,7 +221,7 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
             <div className="relative">
               <div className="flex items-center gap-3 bg-theme-base rounded-md px-3 py-2.5">
                 <span className="badge text-purple-400 bg-purple-500/10">HTTP</span>
-                <code className="text-sm font-mono text-theme-text-primary">{mcpUrl}</code>
+                <code className="inline-code text-sm">{mcpUrl}</code>
               </div>
               <CopyButton text={mcpUrl} />
             </div>
@@ -296,95 +298,27 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
 
           {/* Available tools */}
           <div className="space-y-2">
-            <h4 className="text-sm font-semibold text-theme-text-primary">Tools</h4>
+            <div className="flex items-baseline justify-between">
+              <h4 className="text-sm font-semibold text-theme-text-primary">Tools</h4>
+              <span className="text-[11px] text-theme-text-tertiary">{MCP_TOOL_CATALOG.length} tools</span>
+            </div>
             <div className="grid grid-cols-1 gap-1.5">
-              {[
-                { name: 'get_dashboard', desc: 'Get cluster health overview including resource counts, problems (failing pods, unhealthy deployments), recent warning events, and Helm release status. Start here to understand cluster state before drilling into specific resources.', params: [
-                  { name: 'namespace', required: false, desc: 'filter to a specific namespace' },
-                ]},
-                { name: 'list_resources', desc: 'List Kubernetes resources of a given kind with minified summaries. Supports all built-in kinds (pods, deployments, services, etc.) and CRDs. Use to discover what\'s running before inspecting individual resources.', params: [
-                  { name: 'kind', required: true, desc: 'resource kind, e.g. pods, deployments, services' },
-                  { name: 'namespace', required: false, desc: 'filter to a specific namespace' },
-                ]},
-                { name: 'get_resource', desc: 'Get a single Kubernetes resource: minified spec/status/metadata plus default-on resourceContext (managedBy, exposes, selectedBy, uses, runsOn, issue/audit rollups). Optionally include heavier sidecars (events, metrics, logs).', params: [
-                  { name: 'kind', required: true, desc: 'resource kind, e.g. pod, deployment, service' },
-                  { name: 'namespace', required: false, desc: 'omit for cluster-scoped kinds (Node, ClusterRole, IngressClass, etc.)' },
-                  { name: 'name', required: true, desc: 'resource name' },
-                  { name: 'group', required: false, desc: 'API group when the kind is ambiguous (e.g. serving.knative.dev for Knative Service vs core Service)' },
-                  { name: 'include', required: false, desc: 'events, metrics, logs' },
-                  { name: 'context', required: false, desc: 'resourceContext tier: basic (default) or none (bare minified)' },
-                ]},
-                { name: 'get_topology', desc: 'Get the topology graph showing relationships between Kubernetes resources. Returns nodes and edges representing Deployments, Services, Ingresses, Pods, etc. Use \'traffic\' view for network flow or \'resources\' view for ownership hierarchy. Use \'summary\' format for LLM-friendly text descriptions.', params: [
-                  { name: 'namespace', required: false, desc: 'filter to a specific namespace' },
-                  { name: 'view', required: false, desc: 'traffic or resources' },
-                  { name: 'format', required: false, desc: 'graph (default) or summary (text)' },
-                ]},
-                { name: 'get_events', desc: 'Get recent Kubernetes warning events, deduplicated and sorted by recency. Useful for diagnosing issues — shows event reason, message, and occurrence count. Filter by resource kind/name to scope to a specific resource.', params: [
-                  { name: 'namespace', required: false, desc: 'filter to a specific namespace' },
-                  { name: 'limit', required: false, desc: 'max events to return (default 20)' },
-                  { name: 'kind', required: false, desc: 'filter to events for this resource kind' },
-                  { name: 'name', required: false, desc: 'filter to events for this resource name' },
-                ]},
-                { name: 'get_pod_logs', desc: 'Get filtered log lines from a pod, prioritizing errors and warnings. Returns diagnostically relevant lines (errors, panics, stack traces) or falls back to the last 20 lines if no error patterns match.', params: [
-                  { name: 'namespace', required: true, desc: 'pod namespace' },
-                  { name: 'name', required: true, desc: 'pod name' },
-                  { name: 'container', required: false, desc: 'container name (defaults to first)' },
-                  { name: 'tail_lines', required: false, desc: 'lines from end (default 200)' },
-                ]},
-                { name: 'list_namespaces', desc: 'List all Kubernetes namespaces with their status. Use to discover available namespaces before filtering other queries.', params: [] },
-                { name: 'get_changes', desc: 'Get recent resource changes (creates, updates, deletes) from the cluster timeline. Use to investigate what changed before an incident. Filter by namespace, resource kind, or specific resource name.', params: [
-                  { name: 'namespace', required: false, desc: 'filter to a specific namespace' },
-                  { name: 'kind', required: false, desc: 'filter to a resource kind (e.g. Deployment)' },
-                  { name: 'name', required: false, desc: 'filter to a specific resource name' },
-                  { name: 'since', required: false, desc: 'lookback duration, e.g. 1h, 30m (default 1h)' },
-                  { name: 'limit', required: false, desc: 'max changes to return (default 20, max 50)' },
-                ]},
-                { name: 'list_helm_releases', desc: 'List all Helm releases in the cluster with their status and health. Returns release name, namespace, chart, version, status, and resource health.', params: [
-                  { name: 'namespace', required: false, desc: 'filter to a specific namespace' },
-                ]},
-                { name: 'get_helm_release', desc: 'Get detailed information about a specific Helm release including owned resources and their status. Optionally include values, revision history, or manifest diff between revisions.', params: [
-                  { name: 'namespace', required: true, desc: 'release namespace' },
-                  { name: 'name', required: true, desc: 'release name' },
-                  { name: 'include', required: false, desc: 'values, history, diff' },
-                  { name: 'diff_revision_1', required: false, desc: 'first revision for diff' },
-                  { name: 'diff_revision_2', required: false, desc: 'second revision for diff (defaults to current)' },
-                ]},
-                { name: 'get_workload_logs', desc: 'Get aggregated, AI-filtered logs from all pods of a workload (Deployment, StatefulSet, or DaemonSet). Logs are collected from all matching pods, filtered for errors/warnings, and deduplicated.', params: [
-                  { name: 'kind', required: true, desc: 'deployment, statefulset, or daemonset' },
-                  { name: 'namespace', required: true, desc: 'workload namespace' },
-                  { name: 'name', required: true, desc: 'workload name' },
-                  { name: 'container', required: false, desc: 'specific container name' },
-                  { name: 'tail_lines', required: false, desc: 'lines per pod (default 100)' },
-                ]},
-                { name: 'manage_workload', desc: 'Perform operations on a workload. \'restart\' triggers a rolling restart, \'scale\' changes the replica count, \'rollback\' reverts to a previous revision.', params: [
-                  { name: 'action', required: true, desc: 'restart, scale, or rollback' },
-                  { name: 'kind', required: true, desc: 'deployment, statefulset, or daemonset' },
-                  { name: 'namespace', required: true, desc: 'workload namespace' },
-                  { name: 'name', required: true, desc: 'workload name' },
-                  { name: 'replicas', required: false, desc: 'target replica count (for scale)' },
-                  { name: 'revision', required: false, desc: 'target revision (for rollback)' },
-                ]},
-                { name: 'manage_cronjob', desc: 'Perform operations on a CronJob. \'trigger\' creates a manual Job run, \'suspend\' pauses the schedule, \'resume\' re-enables it.', params: [
-                  { name: 'action', required: true, desc: 'trigger, suspend, or resume' },
-                  { name: 'namespace', required: true, desc: 'cronjob namespace' },
-                  { name: 'name', required: true, desc: 'cronjob name' },
-                ]},
-                { name: 'manage_gitops', desc: 'Perform operations on GitOps resources. ArgoCD: sync, suspend, resume. FluxCD: reconcile, suspend, resume.', params: [
-                  { name: 'action', required: true, desc: 'sync/reconcile, suspend, or resume' },
-                  { name: 'tool', required: true, desc: 'argocd or fluxcd' },
-                  { name: 'namespace', required: true, desc: 'resource namespace' },
-                  { name: 'name', required: true, desc: 'resource name' },
-                  { name: 'kind', required: false, desc: 'FluxCD resource kind (e.g. kustomization, helmrelease)' },
-                ]},
-              ].map((tool) => (
+              {MCP_TOOL_CATALOG.map((tool) => (
                 <div key={tool.name} className="card-inner space-y-1.5">
-                  <code className="text-[11px] font-mono text-purple-400">{tool.name}</code>
+                  <div className="flex items-center gap-2">
+                    <code className="inline-code text-[11px]">{tool.name}</code>
+                    {tool.write && (
+                      <span className="badge-sm bg-amber-500/10 text-amber-600 dark:text-amber-400" title="Write tool — annotated as destructive">
+                        write
+                      </span>
+                    )}
+                  </div>
                   <p className="text-[11px] text-theme-text-tertiary leading-relaxed">{tool.desc}</p>
                   {tool.params.length > 0 && (
                     <div className="flex flex-wrap gap-1.5 pt-0.5">
                       {tool.params.map((p) => (
-                        <span key={p.name} className="badge-sm font-mono bg-theme-elevated text-theme-text-secondary" title={p.desc}>
-                          <span className="text-theme-text-secondary">{p.name}</span>
+                        <span key={p.arg} className="inline-code text-[11px]" title={p.desc}>
+                          <span>{p.arg}</span>
                           {p.required && <span className="text-red-400">*</span>}
                         </span>
                       ))}