feat(security-agent): add audit report UI

apps/web/package.json

@@ -51,9 +51,9 @@
     "@kilocode/event-service": "workspace:*",
     "@kilocode/kilo-chat": "workspace:*",
     "@kilocode/kilo-chat-hooks": "workspace:*",
-    "@kilocode/mcp-gateway": "workspace:*",
     "@kilocode/kiloclaw-instance-tiers": "workspace:*",
     "@kilocode/kiloclaw-secret-catalog": "workspace:*",
+    "@kilocode/mcp-gateway": "workspace:*",
     "@kilocode/organization-entitlement": "workspace:*",
     "@kilocode/worker-utils": "workspace:*",
     "@linear/sdk": "76.0.0",
@@ -151,6 +151,7 @@
     "posthog-node": "5.10.4",
     "react": "19.2.6",
     "react-countup": "6.5.3",
+    "react-day-picker": "10.0.1",
     "react-dom": "19.2.6",
     "react-markdown": "10.1.0",
     "react-turnstile": "1.1.5",

apps/web/src/app/(app)/organizations/[id]/security-agent/audit-report/page.tsx

@@ -0,0 +1,16 @@
+import { Suspense } from 'react';
+import { SecurityAuditReportPage } from '@/components/security-agent/SecurityAuditReportPage';
+
+export default function OrgAuditReportPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="text-muted-foreground block py-16 text-center text-sm">
+          Loading audit report...
+        </div>
+      }
+    >
+      <SecurityAuditReportPage />
+    </Suspense>
+  );
+}

apps/web/src/app/(app)/organizations/[id]/security-agent/layout.tsx

@@ -1,11 +1,10 @@
-import { PageContainer } from '@/components/layouts/PageContainer';
 import { OrganizationByPageLayout } from '@/components/organizations/OrganizationByPageLayout';
 import { SecurityAgentLayout } from '@/components/security-agent/SecurityAgentLayout';
 import { SecurityAgentProvider } from '@/components/security-agent/SecurityAgentContext';
 
 export const metadata = {
   title: 'Security Agent | Kilo Code',
-  description: 'Monitor and manage Dependabot security alerts',
+  description: 'Monitor and manage Security Findings synced from Dependabot',
 };
 
 type LayoutProps = {
@@ -17,12 +16,11 @@ export default async function OrgSecurityAgentLayout({ params, children }: Layou
   return (
     <OrganizationByPageLayout
       params={params}
+      fullBleed
       render={({ organization }) => (
-        <PageContainer>
-          <SecurityAgentProvider organizationId={organization.id}>
-            <SecurityAgentLayout>{children}</SecurityAgentLayout>
-          </SecurityAgentProvider>
-        </PageContainer>
+        <SecurityAgentProvider organizationId={organization.id}>
+          <SecurityAgentLayout>{children}</SecurityAgentLayout>
+        </SecurityAgentProvider>
       )}
     />
   );

apps/web/src/app/(app)/organizations/[id]/security-agent/page.tsx

@@ -1,32 +1,23 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { redirect } from 'next/navigation';
 import { Loader2 } from 'lucide-react';
 import { useSecurityAgent } from '@/components/security-agent/SecurityAgentContext';
 import { SecurityDashboard } from '@/components/security-agent/SecurityDashboard';
 
 export default function OrgSecurityAgentDashboardPage() {
-  const { hasIntegration, isEnabled, isLoadingConfig, organizationId } = useSecurityAgent();
-  const router = useRouter();
+  const { hasIntegration, isEnabled, isLoadingConfig, isLoadingPermission, organizationId } =
+    useSecurityAgent();
 
-  const shouldRedirectToConfig = hasIntegration && isEnabled === false && !!organizationId;
-
-  useEffect(() => {
-    if (shouldRedirectToConfig) {
-      router.replace(`/organizations/${organizationId}/security-agent/config`);
-    }
-  }, [shouldRedirectToConfig, organizationId, router]);
+  const shouldRedirectToConfig =
+    !!organizationId &&
+    ((!isLoadingPermission && !hasIntegration) || (hasIntegration && isEnabled === false));
 
   if (shouldRedirectToConfig) {
-    return (
-      <div className="text-muted-foreground block py-16 text-center text-sm">
-        Opening settings...
-      </div>
-    );
+    redirect(`/organizations/${organizationId}/security-agent/config`);
   }
 
-  if (hasIntegration && isLoadingConfig) {
+  if (isLoadingPermission || (hasIntegration && isLoadingConfig)) {
     return (
       <div className="text-muted-foreground flex items-center justify-center gap-2 py-16 text-sm">
         <Loader2 className="size-6 animate-spin motion-reduce:animate-none" aria-hidden="true" />

apps/web/src/app/(app)/security-agent/audit-report/page.tsx

@@ -0,0 +1,16 @@
+import { Suspense } from 'react';
+import { SecurityAuditReportPage } from '@/components/security-agent/SecurityAuditReportPage';
+
+export default function AuditReportPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="text-muted-foreground block py-16 text-center text-sm">
+          Loading audit report...
+        </div>
+      }
+    >
+      <SecurityAuditReportPage />
+    </Suspense>
+  );
+}

apps/web/src/app/(app)/security-agent/layout.tsx

@@ -1,18 +1,15 @@
-import { PageContainer } from '@/components/layouts/PageContainer';
 import { SecurityAgentLayout } from '@/components/security-agent/SecurityAgentLayout';
 import { SecurityAgentProvider } from '@/components/security-agent/SecurityAgentContext';
 
 export const metadata = {
   title: 'Security Agent | Kilo Code',
-  description: 'Monitor and manage Dependabot security alerts',
+  description: 'Monitor and manage Security Findings synced from Dependabot',
 };
 
 export default function SecurityAgentRootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <PageContainer>
-      <SecurityAgentProvider>
-        <SecurityAgentLayout>{children}</SecurityAgentLayout>
-      </SecurityAgentProvider>
-    </PageContainer>
+    <SecurityAgentProvider>
+      <SecurityAgentLayout>{children}</SecurityAgentLayout>
+    </SecurityAgentProvider>
   );
 }

apps/web/src/app/(app)/security-agent/page.tsx

@@ -1,37 +1,26 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { redirect } from 'next/navigation';
 import { Loader2 } from 'lucide-react';
 import { useSecurityAgent } from '@/components/security-agent/SecurityAgentContext';
 import { SecurityDashboard } from '@/components/security-agent/SecurityDashboard';
 
 export default function SecurityAgentDashboardPage() {
-  const { hasIntegration, isEnabled, isLoadingConfig } = useSecurityAgent();
-  const router = useRouter();
+  const { hasIntegration, isEnabled, isLoadingConfig, isLoadingPermission } = useSecurityAgent();
 
   // Redirect per truth table:
-  // No integration -> show dashboard with install CTA (handled by SecurityDashboard)
+  // No integration -> redirect to settings with install CTA
   // Installed + disabled -> redirect to config
   // Installed + enabled -> show dashboard
   // isEnabled is undefined while config is loading — wait before deciding
-  const shouldRedirectToConfig = hasIntegration && isEnabled === false;
-
-  useEffect(() => {
-    if (shouldRedirectToConfig) {
-      router.replace('/security-agent/config');
-    }
-  }, [shouldRedirectToConfig, router]);
+  const shouldRedirectToConfig =
+    (!isLoadingPermission && !hasIntegration) || (hasIntegration && isEnabled === false);
 
   if (shouldRedirectToConfig) {
-    return (
-      <div className="text-muted-foreground block py-16 text-center text-sm">
-        Opening settings...
-      </div>
-    );
+    redirect('/security-agent/config');
   }
 
-  if (hasIntegration && isLoadingConfig) {
+  if (isLoadingPermission || (hasIntegration && isLoadingConfig)) {
     return (
       <div className="text-muted-foreground flex items-center justify-center gap-2 py-16 text-sm">
         <Loader2 className="size-6 animate-spin motion-reduce:animate-none" aria-hidden="true" />