Draft 1 of slack app page polish, add search, refactor, fix dates

agents-manage-ui/src/app/[tenantId]/work-apps/github/[installationId]/page.tsx

@@ -35,7 +35,7 @@ interface PageParams {
 function getStatusBadgeVariant(status: string) {
   switch (status) {
     case 'active':
-      return 'primary';
+      return 'success';
     case 'pending':
       return 'warning';
     case 'suspended':
@@ -147,13 +147,15 @@ export default function GitHubInstallationDetailPage({ params }: PageParams) {
     <div className="space-y-8">
       {/* Back link and Header */}
       <div className="space-y-4">
-        <Link
-          href={`/${tenantId}/work-apps/github`}
-          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
-        >
-          <ArrowLeft className="size-4" />
-          Back to GitHub Settings
-        </Link>
+        <Button variant="ghost" asChild>
+          <Link
+            href={`/${tenantId}/work-apps/github`}
+            className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
+          >
+            <ArrowLeft className="size-4" />
+            Back to GitHub Settings
+          </Link>
+        </Button>
 
         <div className="flex items-start justify-between">
           <div className="flex items-center gap-4">

agents-manage-ui/src/app/globals.css

@@ -8,6 +8,7 @@
 
 @theme {
   --text-2xs: 0.688rem; /* 11px */
+  --text-1sm: 0.813rem; /* 13px */
   --color-gray-50: oklch(0.985 0.001 106.423);
   --color-gray-100: oklch(0.97 0.001 106.424);
   --color-gray-200: oklch(0.923 0.003 48.717);

agents-manage-ui/src/components/dataset-items/delete-dataset-item-confirmation.tsx

@@ -62,11 +62,7 @@ export function DeleteDatasetItemConfirmation({
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={handleDelete}
-            disabled={isDeleting}
-            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-          >
+          <AlertDialogAction onClick={handleDelete} disabled={isDeleting} variant="destructive">
             {isDeleting ? 'Deleting...' : 'Delete'}
           </AlertDialogAction>
         </AlertDialogFooter>

agents-manage-ui/src/components/evaluation-jobs/delete-evaluation-job-confirmation.tsx

@@ -61,11 +61,7 @@ export function DeleteEvaluationJobConfirmation({
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={handleDelete}
-            disabled={isDeleting}
-            className="bg-white text-gray-900 border border-gray-300 hover:bg-gray-100"
-          >
+          <AlertDialogAction onClick={handleDelete} disabled={isDeleting} variant="destructive">
             {isDeleting ? 'Deleting...' : 'Delete'}
           </AlertDialogAction>
         </AlertDialogFooter>

agents-manage-ui/src/components/evaluation-run-configs/delete-evaluation-run-config-confirmation.tsx

@@ -66,11 +66,7 @@ export function DeleteEvaluationRunConfigConfirmation({
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={handleDelete}
-            disabled={isDeleting}
-            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-          >
+          <AlertDialogAction onClick={handleDelete} disabled={isDeleting} variant="destructive">
             {isDeleting ? 'Deleting...' : 'Delete'}
           </AlertDialogAction>
         </AlertDialogFooter>

agents-manage-ui/src/components/evaluators/delete-evaluator-confirmation.tsx

@@ -62,11 +62,7 @@ export function DeleteEvaluatorConfirmation({
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={handleDelete}
-            disabled={isDeleting}
-            className="bg-white text-gray-900 border border-gray-300 hover:bg-gray-100"
-          >
+          <AlertDialogAction onClick={handleDelete} disabled={isDeleting} variant="destructive">
             {isDeleting ? 'Deleting...' : 'Delete'}
           </AlertDialogAction>
         </AlertDialogFooter>

agents-manage-ui/src/components/sidebar-nav/app-sidebar.tsx

@@ -3,6 +3,7 @@
 import {
   Activity,
   BarChart3,
+  Blocks,
   BookOpen,
   Component,
   Globe,
@@ -12,7 +13,6 @@ import {
   LifeBuoy,
   Lock,
   LucideHexagon,
-  Plug,
   Settings,
   Users,
   Workflow,
@@ -81,7 +81,7 @@ export const AppSidebar: FC<AppSidebarProps> = ({ open, setOpen, ...props }) =>
               {
                 title: STATIC_LABELS['work-apps'],
                 url: `/${tenantId}/work-apps`,
-                icon: Plug,
+                icon: Blocks,
               },
             ]
           : []),

agents-manage-ui/src/components/skills/delete-skill-confirmation.tsx

@@ -61,10 +61,7 @@ export const DeleteSkillConfirmation: FC<DeleteSkillConfirmationProps> = ({
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={handleDelete}
-            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-          >
+          <AlertDialogAction onClick={handleDelete} variant="destructive">
             Delete
           </AlertDialogAction>
         </AlertDialogFooter>

agents-manage-ui/src/components/ui/alert-dialog.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import type { VariantProps } from 'class-variance-authority';
 import type * as React from 'react';
 import { buttonVariants } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
@@ -102,9 +103,15 @@ function AlertDialogDescription({
 
 function AlertDialogAction({
   className,
+  variant,
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> & VariantProps<typeof buttonVariants>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants({ variant }), className)}
+      {...props}
+    />
+  );
 }
 
 function AlertDialogCancel({

agents-manage-ui/src/components/work-apps/work-apps-nav.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Github, Plug, Slack } from 'lucide-react';
+import { Blocks, Github, Slack } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { cn } from '@/lib/utils';
@@ -13,7 +13,7 @@ const navItems = [
   {
     label: 'All Apps',
     href: (tenantId: string) => `/${tenantId}/work-apps`,
-    icon: Plug,
+    icon: Blocks,
     exact: true,
   },
   {