diff --git a/components/settings/integration-form-dialog.tsx b/components/settings/integration-form-dialog.tsx
index 5cf37e18..8757af09 100644
--- a/components/settings/integration-form-dialog.tsx
+++ b/components/settings/integration-form-dialog.tsx
@@ -43,6 +43,7 @@ import {
   getIntegrationLabels,
   getSortedIntegrationTypes,
 } from "@/plugins";
+import { getIntegrationDescriptions } from "@/plugins/registry";
 
 type IntegrationFormDialogProps = {
   open: boolean;
@@ -65,6 +66,9 @@ const SYSTEM_INTEGRATION_TYPES: IntegrationType[] = ["database"];
 const SYSTEM_INTEGRATION_LABELS: Record<string, string> = {
   database: "Database",
 };
+const SYSTEM_INTEGRATION_DESCRIPTIONS: Record<string, string> = {
+  database: "Connect to PostgreSQL databases",
+};
 
 // Get all integration types (plugins + system)
 const getIntegrationTypes = (): IntegrationType[] => [
@@ -76,6 +80,12 @@ const getIntegrationTypes = (): IntegrationType[] => [
 const getLabel = (type: IntegrationType): string =>
   getIntegrationLabels()[type] || SYSTEM_INTEGRATION_LABELS[type] || type;
 
+// Get description for any integration type
+const getDescription = (type: IntegrationType): string =>
+  getIntegrationDescriptions()[type] ||
+  SYSTEM_INTEGRATION_DESCRIPTIONS[type] ||
+  "";
+
 function SecretField({
   fieldId,
   label,
@@ -419,20 +429,31 @@ function TypeSelector({
             No services found
           </p>
         ) : (
-          filteredTypes.map((type) => (
-            <button
-              className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-muted/50"
-              key={type}
-              onClick={() => onSelectType(type)}
-              type="button"
-            >
-              <IntegrationIcon
-                className="size-5"
-                integration={type === "ai-gateway" ? "vercel" : type}
-              />
-              <span className="font-medium">{getLabel(type)}</span>
-            </button>
-          ))
+          filteredTypes.map((type) => {
+            const description = getDescription(type);
+            return (
+              <button
+                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-muted/50"
+                key={type}
+                onClick={() => onSelectType(type)}
+                type="button"
+              >
+                <IntegrationIcon
+                  className="size-5 shrink-0"
+                  integration={type === "ai-gateway" ? "vercel" : type}
+                />
+                <span className="min-w-0 flex-1 truncate">
+                  <span className="font-medium">{getLabel(type)}</span>
+                  {description && (
+                    <span className="text-muted-foreground text-xs">
+                      {" "}
+                      - {description}
+                    </span>
+                  )}
+                </span>
+              </button>
+            );
+          })
         )}
       </div>
     </div>
diff --git a/components/settings/integrations-dialog.tsx b/components/settings/integrations-dialog.tsx
index f992f4f7..1104b4d7 100644
--- a/components/settings/integrations-dialog.tsx
+++ b/components/settings/integrations-dialog.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useSetAtom } from "jotai";
-import { Plus } from "lucide-react";
+import { Plus, Search } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
@@ -12,6 +12,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
 import { integrationsVersionAtom } from "@/lib/integrations-store";
 import { IntegrationsManager } from "./integrations-manager";
@@ -27,6 +28,7 @@ export function IntegrationsDialog({
 }: IntegrationsDialogProps) {
   const [loading, setLoading] = useState(true);
   const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [filter, setFilter] = useState("");
   const setIntegrationsVersion = useSetAtom(integrationsVersionAtom);
   // Track if any changes were made during this dialog session
   const hasChangesRef = useRef(false);
@@ -48,6 +50,8 @@ export function IntegrationsDialog({
       hasChangesRef.current = false;
       // Reset create dialog state when opening
       setShowCreateDialog(false);
+      // Reset filter when opening
+      setFilter("");
     }
   }, [open, loadAll]);
 
@@ -68,10 +72,7 @@ export function IntegrationsDialog({
 
   return (
     <Dialog onOpenChange={handleClose} open={open}>
-      <DialogContent
-        className="max-h-[90vh] max-w-4xl overflow-y-auto"
-        showCloseButton={false}
-      >
+      <DialogContent className="max-w-4xl" showCloseButton={false}>
         <DialogHeader>
           <DialogTitle>Connections</DialogTitle>
           <DialogDescription>
@@ -84,12 +85,24 @@ export function IntegrationsDialog({
             <Spinner />
           </div>
         ) : (
-          <div className="mt-4">
-            <IntegrationsManager
-              onCreateDialogClose={() => setShowCreateDialog(false)}
-              onIntegrationChange={handleIntegrationChange}
-              showCreateDialog={showCreateDialog}
-            />
+          <div className="mt-4 space-y-4">
+            <div className="relative">
+              <Search className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
+              <Input
+                className="pl-9"
+                onChange={(e) => setFilter(e.target.value)}
+                placeholder="Filter connections..."
+                value={filter}
+              />
+            </div>
+            <div className="max-h-[300px] overflow-y-auto">
+              <IntegrationsManager
+                filter={filter}
+                onCreateDialogClose={() => setShowCreateDialog(false)}
+                onIntegrationChange={handleIntegrationChange}
+                showCreateDialog={showCreateDialog}
+              />
+            </div>
           </div>
         )}
 
diff --git a/components/settings/integrations-manager.tsx b/components/settings/integrations-manager.tsx
index 39510676..f6beaca9 100644
--- a/components/settings/integrations-manager.tsx
+++ b/components/settings/integrations-manager.tsx
@@ -29,12 +29,14 @@ type IntegrationsManagerProps = {
   showCreateDialog: boolean;
   onCreateDialogClose?: () => void;
   onIntegrationChange?: () => void;
+  filter?: string;
 };
 
 export function IntegrationsManager({
   showCreateDialog: externalShowCreateDialog,
   onCreateDialogClose,
   onIntegrationChange,
+  filter = "",
 }: IntegrationsManagerProps) {
   const [integrations, setIntegrations] = useState<Integration[]>([]);
   const [loading, setLoading] = useState(true);
@@ -69,6 +71,7 @@ export function IntegrationsManager({
   // Get integrations with their labels, sorted by label then name
   const integrationsWithLabels = useMemo(() => {
     const labels = getIntegrationLabels() as Record<string, string>;
+    const filterLower = filter.toLowerCase();
 
     return integrations
       .map((integration) => ({
@@ -78,6 +81,14 @@ export function IntegrationsManager({
           SYSTEM_INTEGRATION_LABELS[integration.type] ||
           integration.type,
       }))
+      .filter((integration) => {
+        if (!filter) return true;
+        return (
+          integration.label.toLowerCase().includes(filterLower) ||
+          integration.name.toLowerCase().includes(filterLower) ||
+          integration.type.toLowerCase().includes(filterLower)
+        );
+      })
       .sort((a, b) => {
         const labelCompare = a.label.localeCompare(b.label);
         if (labelCompare !== 0) {
@@ -85,7 +96,7 @@ export function IntegrationsManager({
         }
         return a.name.localeCompare(b.name);
       });
-  }, [integrations]);
+  }, [integrations, filter]);
 
   const handleDelete = async (id: string) => {
     try {
@@ -139,70 +150,88 @@ export function IntegrationsManager({
     );
   }
 
-  return (
-    <div className="space-y-1">
-      {integrations.length === 0 ? (
+  const renderIntegrationsList = () => {
+    if (integrations.length === 0) {
+      return (
         <div className="py-8 text-center">
           <p className="text-muted-foreground text-sm">
             No connections configured yet
           </p>
         </div>
-      ) : (
-        <div className="space-y-1">
-          {integrationsWithLabels.map((integration) => (
-            <div
-              className="flex items-center justify-between rounded-md px-2 py-1.5"
-              key={integration.id}
-            >
-              <div className="flex items-center gap-2">
-                <IntegrationIcon
-                  className="size-4"
-                  integration={
-                    integration.type === "ai-gateway"
-                      ? "vercel"
-                      : integration.type
-                  }
-                />
-                <span className="font-medium text-sm">{integration.label}</span>
-                <span className="text-muted-foreground text-sm">
-                  {integration.name}
-                </span>
-              </div>
-              <div className="flex items-center gap-1">
-                <Button
-                  className="h-7 px-2"
-                  disabled={testingId === integration.id}
-                  onClick={() => handleTest(integration.id)}
-                  size="sm"
-                  variant="outline"
-                >
-                  {testingId === integration.id ? (
-                    <Spinner className="size-3" />
-                  ) : (
-                    <span className="text-xs">Test</span>
-                  )}
-                </Button>
-                <Button
-                  className="size-7"
-                  onClick={() => setEditingIntegration(integration)}
-                  size="icon"
-                  variant="outline"
-                >
-                  <Pencil className="size-3" />
-                </Button>
-                <Button
-                  className="size-7"
-                  onClick={() => setDeletingId(integration.id)}
-                  size="icon"
-                  variant="outline"
-                >
-                  <Trash2 className="size-3" />
-                </Button>
-              </div>
-            </div>
-          ))}
+      );
+    }
+
+    if (integrationsWithLabels.length === 0) {
+      return (
+        <div className="py-8 text-center">
+          <p className="text-muted-foreground text-sm">
+            No connections match your filter
+          </p>
         </div>
-      )}
+      );
+    }
+
+    return (
+      <div className="space-y-1">
+        {integrationsWithLabels.map((integration) => (
+          <div
+            className="flex items-center justify-between rounded-md px-2 py-1.5"
+            key={integration.id}
+          >
+            <div className="flex items-center gap-2">
+              <IntegrationIcon
+                className="size-4"
+                integration={
+                  integration.type === "ai-gateway"
+                    ? "vercel"
+                    : integration.type
+                }
+              />
+              <span className="font-medium text-sm">{integration.label}</span>
+              <span className="text-muted-foreground text-sm">
+                {integration.name}
+              </span>
+            </div>
+            <div className="flex items-center gap-1">
+              <Button
+                className="h-7 px-2"
+                disabled={testingId === integration.id}
+                onClick={() => handleTest(integration.id)}
+                size="sm"
+                variant="outline"
+              >
+                {testingId === integration.id ? (
+                  <Spinner className="size-3" />
+                ) : (
+                  <span className="text-xs">Test</span>
+                )}
+              </Button>
+              <Button
+                className="size-7"
+                onClick={() => setEditingIntegration(integration)}
+                size="icon"
+                variant="outline"
+              >
+                <Pencil className="size-3" />
+              </Button>
+              <Button
+                className="size-7"
+                onClick={() => setDeletingId(integration.id)}
+                size="icon"
+                variant="outline"
+              >
+                <Trash2 className="size-3" />
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <div className="space-y-1">
+      {renderIntegrationsList()}
 
       {(showCreateDialog || editingIntegration) && (
         <IntegrationFormDialog
diff --git a/components/workflow/config/action-grid.tsx b/components/workflow/config/action-grid.tsx
index 8fe3ed87..69decbb2 100644
--- a/components/workflow/config/action-grid.tsx
+++ b/components/workflow/config/action-grid.tsx
@@ -1,9 +1,32 @@
 "use client";
 
-import { Database, Search, Settings, Zap } from "lucide-react";
+import {
+  ChevronRight,
+  Eye,
+  EyeOff,
+  Grid3X3,
+  List,
+  MoreHorizontal,
+  Search,
+  Settings,
+  Zap,
+} from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { IntegrationIcon } from "@/components/ui/integration-icon";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { getAllActions } from "@/plugins";
 
@@ -12,7 +35,6 @@ type ActionType = {
   label: string;
   description: string;
   category: string;
-  icon?: React.ComponentType<{ className?: string }>;
   integration?: string;
 };
 
@@ -23,21 +45,18 @@ const SYSTEM_ACTIONS: ActionType[] = [
     label: "HTTP Request",
     description: "Make an HTTP request to any API",
     category: "System",
-    icon: Zap,
   },
   {
     id: "Database Query",
     label: "Database Query",
     description: "Query your database",
     category: "System",
-    icon: Database,
   },
   {
     id: "Condition",
     label: "Condition",
     description: "Branch based on a condition",
     category: "System",
-    icon: Settings,
   },
 ];
 
@@ -65,16 +84,70 @@ type ActionGridProps = {
   isNewlyCreated?: boolean;
 };
 
-function ActionIcon({ action }: { action: ActionType }) {
+function GroupIcon({
+  group,
+}: {
+  group: { category: string; actions: ActionType[] };
+}) {
+  // For plugin categories, use the integration icon from the first action
+  const firstAction = group.actions[0];
+  if (firstAction?.integration) {
+    return (
+      <IntegrationIcon
+        className="size-4"
+        integration={firstAction.integration}
+      />
+    );
+  }
+  // For System category
+  if (group.category === "System") {
+    return <Settings className="size-4" />;
+  }
+  return <Zap className="size-4" />;
+}
+
+function ActionIcon({
+  action,
+  className,
+}: {
+  action: ActionType;
+  className?: string;
+}) {
   if (action.integration) {
     return (
-      <IntegrationIcon className="size-5" integration={action.integration} />
+      <IntegrationIcon className={className} integration={action.integration} />
     );
   }
-  if (action.icon) {
-    return <action.icon className="size-5" />;
+  if (action.category === "System") {
+    return <Settings className={cn(className, "text-muted-foreground")} />;
+  }
+  return <Zap className={cn(className, "text-muted-foreground")} />;
+}
+
+// Local storage keys
+const HIDDEN_GROUPS_KEY = "workflow-action-grid-hidden-groups";
+const VIEW_MODE_KEY = "workflow-action-grid-view-mode";
+
+type ViewMode = "list" | "grid";
+
+function getInitialHiddenGroups(): Set<string> {
+  if (typeof window === "undefined") return new Set();
+  try {
+    const stored = localStorage.getItem(HIDDEN_GROUPS_KEY);
+    return stored ? new Set(JSON.parse(stored)) : new Set();
+  } catch {
+    return new Set();
+  }
+}
+
+function getInitialViewMode(): ViewMode {
+  if (typeof window === "undefined") return "list";
+  try {
+    const stored = localStorage.getItem(VIEW_MODE_KEY);
+    return stored === "grid" ? "grid" : "list";
+  } catch {
+    return "list";
   }
-  return <Zap className="size-5" />;
 }
 
 export function ActionGrid({
@@ -83,9 +156,49 @@ export function ActionGrid({
   isNewlyCreated,
 }: ActionGridProps) {
   const [filter, setFilter] = useState("");
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(
+    new Set()
+  );
+  const [hiddenGroups, setHiddenGroups] = useState<Set<string>>(
+    getInitialHiddenGroups
+  );
+  const [showHidden, setShowHidden] = useState(false);
+  const [viewMode, setViewMode] = useState<ViewMode>(getInitialViewMode);
   const actions = useAllActions();
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const toggleViewMode = () => {
+    const newMode = viewMode === "list" ? "grid" : "list";
+    setViewMode(newMode);
+    localStorage.setItem(VIEW_MODE_KEY, newMode);
+  };
+
+  const toggleGroup = (category: string) => {
+    setCollapsedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(category)) {
+        next.delete(category);
+      } else {
+        next.add(category);
+      }
+      return next;
+    });
+  };
+
+  const toggleHideGroup = (category: string) => {
+    setHiddenGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(category)) {
+        next.delete(category);
+      } else {
+        next.add(category);
+      }
+      // Persist to localStorage
+      localStorage.setItem(HIDDEN_GROUPS_KEY, JSON.stringify([...next]));
+      return next;
+    });
+  };
+
   useEffect(() => {
     if (isNewlyCreated && inputRef.current) {
       inputRef.current.focus();
@@ -101,49 +214,236 @@ export function ActionGrid({
     );
   });
 
+  // Group actions by category
+  const groupedActions = useMemo(() => {
+    const groups: Record<string, ActionType[]> = {};
+
+    for (const action of filteredActions) {
+      const category = action.category;
+      if (!groups[category]) {
+        groups[category] = [];
+      }
+      groups[category].push(action);
+    }
+
+    // Sort categories: System first, then alphabetically
+    const sortedCategories = Object.keys(groups).sort((a, b) => {
+      if (a === "System") return -1;
+      if (b === "System") return 1;
+      return a.localeCompare(b);
+    });
+
+    return sortedCategories.map((category) => ({
+      category,
+      actions: groups[category],
+    }));
+  }, [filteredActions]);
+
+  // Filter groups based on hidden state
+  const visibleGroups = useMemo(() => {
+    if (showHidden) return groupedActions;
+    return groupedActions.filter((g) => !hiddenGroups.has(g.category));
+  }, [groupedActions, hiddenGroups, showHidden]);
+
+  const hiddenCount = hiddenGroups.size;
+
   return (
     <div className="flex min-h-0 flex-1 flex-col gap-3">
-      <div className="relative shrink-0">
-        <Search className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
-        <Input
-          autoFocus={isNewlyCreated}
-          className="pl-9"
-          data-testid="action-search-input"
-          disabled={disabled}
-          id="action-filter"
-          onChange={(e) => setFilter(e.target.value)}
-          placeholder="Search actions..."
-          ref={inputRef}
-          value={filter}
-        />
+      <div className="flex shrink-0 gap-2">
+        <div className="relative flex-1">
+          <Search className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
+          <Input
+            autoFocus={isNewlyCreated}
+            className="pl-9"
+            data-testid="action-search-input"
+            disabled={disabled}
+            id="action-filter"
+            onChange={(e) => setFilter(e.target.value)}
+            placeholder="Search actions..."
+            ref={inputRef}
+            value={filter}
+          />
+        </div>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                className="shrink-0"
+                onClick={toggleViewMode}
+                size="icon"
+                variant="ghost"
+              >
+                {viewMode === "list" ? (
+                  <Grid3X3 className="size-4" />
+                ) : (
+                  <List className="size-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {viewMode === "list" ? "Grid view" : "List view"}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+        {hiddenCount > 0 && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  className={cn("shrink-0", showHidden && "bg-muted")}
+                  onClick={() => setShowHidden(!showHidden)}
+                  size="icon"
+                  variant="ghost"
+                >
+                  {showHidden ? (
+                    <Eye className="size-4" />
+                  ) : (
+                    <EyeOff className="size-4" />
+                  )}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {showHidden
+                  ? "Hide hidden groups"
+                  : `Show ${hiddenCount} hidden group${hiddenCount > 1 ? "s" : ""}`}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
       </div>
 
       <div
-        className="min-h-0 flex-1 space-y-1 overflow-y-auto pb-4"
+        className="min-h-0 flex-1 overflow-y-auto pb-4"
         data-testid="action-grid"
       >
-        {filteredActions.length === 0 ? (
+        {filteredActions.length === 0 && (
           <p className="py-4 text-center text-muted-foreground text-sm">
             No actions found
           </p>
-        ) : (
-          filteredActions.map((action) => (
-            <button
-              className={cn(
-                "flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-muted/50",
-                disabled && "pointer-events-none opacity-50"
-              )}
-              data-testid={`action-option-${action.id.toLowerCase().replace(/\s+/g, "-")}`}
-              disabled={disabled}
-              key={action.id}
-              onClick={() => onSelectAction(action.id)}
-              type="button"
-            >
-              <ActionIcon action={action} />
-              <span className="font-medium">{action.label}</span>
-            </button>
-          ))
         )}
+        {filteredActions.length > 0 && visibleGroups.length === 0 && (
+          <p className="py-4 text-center text-muted-foreground text-sm">
+            All groups are hidden
+          </p>
+        )}
+
+        {/* Grid View */}
+        {viewMode === "grid" && visibleGroups.length > 0 && (
+          <div
+            className="grid gap-2 p-1"
+            style={{
+              gridTemplateColumns: "repeat(auto-fill, minmax(72px, 1fr))",
+            }}
+          >
+            {filteredActions
+              .filter(
+                (action) => showHidden || !hiddenGroups.has(action.category)
+              )
+              .map((action) => (
+                <button
+                  className={cn(
+                    "flex aspect-square flex-col items-center justify-center gap-1.5 rounded-lg border border-transparent p-2 text-center transition-colors hover:border-border hover:bg-muted",
+                    disabled && "pointer-events-none opacity-50"
+                  )}
+                  data-testid={`action-option-${action.id.toLowerCase().replace(/\s+/g, "-")}`}
+                  disabled={disabled}
+                  key={action.id}
+                  onClick={() => onSelectAction(action.id)}
+                  type="button"
+                >
+                  <ActionIcon action={action} className="size-6" />
+                  <span className="line-clamp-2 font-medium text-xs leading-tight">
+                    {action.label}
+                  </span>
+                </button>
+              ))}
+          </div>
+        )}
+
+        {/* List View */}
+        {viewMode === "list" &&
+          visibleGroups.length > 0 &&
+          visibleGroups.map((group, groupIndex) => {
+            const isCollapsed = collapsedGroups.has(group.category);
+            const isHidden = hiddenGroups.has(group.category);
+            return (
+              <div key={group.category}>
+                {groupIndex > 0 && <div className="my-2 h-px bg-border" />}
+                <div
+                  className={cn(
+                    "sticky top-0 z-10 mb-1 flex items-center gap-2 bg-background px-3 py-2 font-medium text-muted-foreground text-xs uppercase tracking-wider",
+                    isHidden && "opacity-50"
+                  )}
+                >
+                  <button
+                    className="flex flex-1 items-center gap-2 text-left hover:text-foreground"
+                    onClick={() => toggleGroup(group.category)}
+                    type="button"
+                  >
+                    <ChevronRight
+                      className={cn(
+                        "size-3.5 transition-transform",
+                        !isCollapsed && "rotate-90"
+                      )}
+                    />
+                    <GroupIcon group={group} />
+                    {group.category}
+                  </button>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        className="rounded p-0.5 hover:bg-muted hover:text-foreground"
+                        type="button"
+                      >
+                        <MoreHorizontal className="size-4" />
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem
+                        onClick={() => toggleHideGroup(group.category)}
+                      >
+                        {isHidden ? (
+                          <>
+                            <Eye className="mr-2 size-4" />
+                            Show group
+                          </>
+                        ) : (
+                          <>
+                            <EyeOff className="mr-2 size-4" />
+                            Hide group
+                          </>
+                        )}
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+                {!isCollapsed &&
+                  group.actions.map((action) => (
+                    <button
+                      className={cn(
+                        "flex w-full items-center rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-muted",
+                        disabled && "pointer-events-none opacity-50"
+                      )}
+                      data-testid={`action-option-${action.id.toLowerCase().replace(/\s+/g, "-")}`}
+                      disabled={disabled}
+                      key={action.id}
+                      onClick={() => onSelectAction(action.id)}
+                      type="button"
+                    >
+                      <span className="min-w-0 flex-1 truncate">
+                        <span className="font-medium">{action.label}</span>
+                        {action.description && (
+                          <span className="text-muted-foreground text-xs">
+                            {" "}
+                            - {action.description}
+                          </span>
+                        )}
+                      </span>
+                    </button>
+                  ))}
+              </div>
+            );
+          })}
       </div>
     </div>
   );
diff --git a/plugins/registry.ts b/plugins/registry.ts
index 9e73c407..ef16bea6 100644
--- a/plugins/registry.ts
+++ b/plugins/registry.ts
@@ -372,6 +372,17 @@ export function getIntegrationLabels(): Record<IntegrationType, string> {
   return labels as Record<IntegrationType, string>;
 }
 
+/**
+ * Get integration descriptions map
+ */
+export function getIntegrationDescriptions(): Record<IntegrationType, string> {
+  const descriptions: Record<string, string> = {};
+  for (const plugin of integrationRegistry.values()) {
+    descriptions[plugin.type] = plugin.description;
+  }
+  return descriptions as Record<IntegrationType, string>;
+}
+
 /**
  * Get sorted integration types for dropdowns
  */