@skyhook-io/radar-app 1.13.0 → 1.13.2

package/src/index.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+
 /*
  * Tailwind v4 JIT scans only sources under this CSS file's package (web/).
  * k8s-ui is a workspace package whose TSX files also use Tailwind classes;
@@ -15,6 +16,25 @@
 @import "@fontsource-variable/dm-sans";
 @import "@fontsource/dm-mono";
 
+@container investigation (min-width: 1000px) {
+  .investigation-split-enabled .investigation-evidence-jump { display: none; }
+}
+
+@layer components {
+  .investigation-assessment {
+    background: var(--color-investigation-assessment);
+    border-color: var(--color-investigation-assessment-border);
+  }
+  .investigation-evidence {
+    background: var(--color-investigation-evidence);
+    border-color: var(--color-investigation-evidence-border);
+  }
+  .investigation-next-steps {
+    background: var(--color-investigation-next-steps);
+    border-color: var(--color-investigation-next-steps-border);
+  }
+}
+
 /*
  * Tailwind v4 theme tokens. Migrated from the legacy v3 tailwind.config.js
  * to CSS-first @theme so library consumers (e.g. radar-hub-web) don't need
@@ -22,6 +42,12 @@
  * when they consume this package from npm.
  */
 @theme {
+  --color-investigation-assessment: light-dark(#edf3fc, #182237);
+  --color-investigation-assessment-border: light-dark(#d3dff0, #2b3b56);
+  --color-investigation-evidence: light-dark(#f3f0fa, #211e30);
+  --color-investigation-evidence-border: light-dark(#e0d8ee, #39314b);
+  --color-investigation-next-steps: light-dark(#edf6f5, #172a2c);
+  --color-investigation-next-steps-border: light-dark(#cfe4e0, #2a4546);
   /* Fonts — DM Sans for UI, DM Mono for code/metric panes. */
   --font-sans: "DM Sans Variable", "DM Sans", system-ui, sans-serif;
   --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -44,8 +70,8 @@
   --color-accent: var(--accent);
 
   /* Border radius — rounder than Tailwind defaults to match the brand. */
-  --radius: 0.375rem;    /* default (was 0.25rem) */
-  --radius-md: 0.5rem;   /* was 0.375rem */
+  --radius: 0.375rem; /* default (was 0.25rem) */
+  --radius-md: 0.5rem; /* was 0.375rem */
   --radius-lg: 0.625rem; /* was 0.5rem */
   --radius-xl: 0.875rem; /* was 0.75rem */
 
@@ -54,12 +80,26 @@
 }
 
 @keyframes fadeInOut {
-  0%, 100% { opacity: 0; transform: translateY(-8px); }
-  15%, 85% { opacity: 1; transform: translateY(0); }
+  0%,
+  100% {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  15%,
+  85% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* Global: pointer cursor for all interactive elements */
-button, [role="button"], a, label, select, summary, [tabindex]:not([tabindex="-1"]) {
+button,
+[role="button"],
+a,
+label,
+select,
+summary,
+[tabindex]:not([tabindex="-1"]) {
   cursor: pointer;
 }
 
@@ -69,7 +109,7 @@ button, [role="button"], a, label, select, summary, [tabindex]:not([tabindex="-1
 
 :root {
   /* Font settings */
-  font-family: 'DM Sans Variable', 'DM Sans', system-ui, sans-serif;
+  font-family: "DM Sans Variable", "DM Sans", system-ui, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 }
@@ -91,7 +131,6 @@ body {
   flex-direction: column;
 }
 
-
 /* ============================================
    REACT FLOW CUSTOMIZATIONS
    ============================================ */
@@ -218,8 +257,14 @@ body {
 }
 
 @keyframes slide-out-to-right {
-  from { transform: translateX(0); opacity: 1; }
-  to { transform: translateX(100%); opacity: 0; }
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
 }
 
 .animate-out {
@@ -271,8 +316,12 @@ body {
 }
 
 @keyframes status-enter {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 .animate-status-enter {
   animation: status-enter 140ms ease-out both;
@@ -315,24 +364,8 @@ body {
 
 /* Synthesis "thinking" dot — a calm breathing pulse (not a spinner) for the staged
    pre-verdict beats. */
-@keyframes synth-pulse {
-  0%,
-  100% {
-    opacity: 0.35;
-    transform: scale(0.85);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1.15);
-  }
-}
-.animate-synth-pulse {
-  animation: synth-pulse 1.1s ease-in-out infinite;
-}
-
-/* Result-reveal choreography. The card eases in; the root-cause label gets an accent
-   underline that sweeps out; the whole card pulses its accent border once to mark
-   "diagnosis ready." Sequenced via animation-delay relative to one mount. */
+/* Results enter with the same short spatial motion as new transcript/evidence rows.
+   Avoid pulsing glows or staged pauses: the evidence itself should carry emphasis. */
 @keyframes result-in {
   from {
     opacity: 0;
@@ -346,51 +379,6 @@ body {
 .animate-result-in {
   animation: result-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
-@keyframes underline-sweep {
-  from {
-    transform: scaleX(0);
-  }
-  to {
-    transform: scaleX(1);
-  }
-}
-.animate-underline-sweep {
-  transform-origin: left;
-  animation: underline-sweep 460ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
-}
-/* Richer verdict reveal — a colored ring around the border plus an UNEVEN, breathing
-   outer glow (two soft peaks), held longer (~2.4s). Tinted per verdict via --glow
-   (amber root-cause, emerald healthy, accent remediation, slate inconclusive). */
-@keyframes verdict-reveal {
-  0% {
-    box-shadow:
-      0 0 0 0 color-mix(in oklab, var(--glow, var(--accent)) 0%, transparent),
-      0 0 0 0 transparent;
-  }
-  18% {
-    box-shadow:
-      0 0 0 1px color-mix(in oklab, var(--glow, var(--accent)) 60%, transparent),
-      0 0 20px 2px color-mix(in oklab, var(--glow, var(--accent)) 42%, transparent);
-  }
-  44% {
-    box-shadow:
-      0 0 0 1px color-mix(in oklab, var(--glow, var(--accent)) 32%, transparent),
-      0 0 10px 1px color-mix(in oklab, var(--glow, var(--accent)) 20%, transparent);
-  }
-  68% {
-    box-shadow:
-      0 0 0 1px color-mix(in oklab, var(--glow, var(--accent)) 50%, transparent),
-      0 0 24px 3px color-mix(in oklab, var(--glow, var(--accent)) 38%, transparent);
-  }
-  100% {
-    box-shadow:
-      0 0 0 0 transparent,
-      0 0 0 0 transparent;
-  }
-}
-.animate-verdict-reveal {
-  animation: verdict-reveal 2400ms cubic-bezier(0.32, 0.72, 0, 1) 120ms both;
-}
 @media (prefers-reduced-motion: reduce) {
   .ai-shimmer {
     animation: none;
@@ -398,10 +386,7 @@ body {
     -webkit-text-fill-color: currentColor;
     color: var(--text-secondary);
   }
-  .animate-synth-pulse,
-  .animate-result-in,
-  .animate-underline-sweep,
-  .animate-verdict-reveal {
+  .animate-result-in {
     animation: none;
   }
 }
@@ -428,7 +413,6 @@ body {
   animation: slide-in-from-right 0.2s ease-out;
 }
 
-
 /* ============================================
    XTERM TERMINAL STYLES
    ============================================ */

package/src/index.ts

@@ -31,7 +31,7 @@ export type {
   DiagnoseConsentCopy,
 } from './context/DiagnoseCustomization';
 
-// Standalone AI-diagnose surface — mount the investigation panel outside a
+// Standalone AI investigation surface — mount the investigation panel outside a
 // full <RadarApp>. No router dependency, no client-side cluster state: the
 // backend set via setApiBase() picks the cluster, so hosts remount
 // <DiagnoseProvider key={cluster}> to switch. Mount order: ThemeProvider >