fixes

Author: ctate

components/settings/integration-form-dialog.tsx

@@ -103,7 +103,6 @@ function SecretField({
           </div>
           <Button
             onClick={() => setIsEditing(true)}
-            size="sm"
             type="button"
             variant="outline"
           >

components/settings/integrations-dialog.tsx

@@ -86,6 +86,7 @@ export function IntegrationsDialog({
         ) : (
           <div className="mt-4">
             <IntegrationsManager
+              onCreateDialogClose={() => setShowCreateDialog(false)}
               onIntegrationChange={handleIntegrationChange}
               showCreateDialog={showCreateDialog}
             />

components/settings/integrations-manager.tsx

@@ -27,11 +27,13 @@ const SYSTEM_INTEGRATION_LABELS: Record<string, string> = {
 
 type IntegrationsManagerProps = {
   showCreateDialog: boolean;
+  onCreateDialogClose?: () => void;
   onIntegrationChange?: () => void;
 };
 
 export function IntegrationsManager({
   showCreateDialog: externalShowCreateDialog,
+  onCreateDialogClose,
   onIntegrationChange,
 }: IntegrationsManagerProps) {
   const [integrations, setIntegrations] = useState<Integration[]>([]);
@@ -121,6 +123,7 @@ export function IntegrationsManager({
   const handleDialogClose = () => {
     setShowCreateDialog(false);
     setEditingIntegration(null);
+    onCreateDialogClose?.();
   };
 
   const handleDialogSuccess = async () => {

components/ui/integration-selector.tsx

@@ -147,7 +147,58 @@ export function IntegrationSelector({
     );
   }
 
-  // Show radio-style selection list
+  // Single integration - show as outlined field (not radio-style)
+  if (integrations.length === 1) {
+    const integration = integrations[0];
+    const displayName = integration.name || `${integrationLabel} API Key`;
+    const isSelected = value === integration.id;
+
+    // Auto-select if not already selected
+    if (!isSelected && !disabled) {
+      onChange(integration.id);
+    }
+
+    return (
+      <>
+        <div
+          className={cn(
+            "flex h-9 w-full items-center gap-2 rounded-md border px-3 text-sm",
+            disabled && "cursor-not-allowed opacity-50"
+          )}
+        >
+          <Check className="size-4 shrink-0 text-green-600" />
+          <span className="flex-1 truncate">{displayName}</span>
+          <Button
+            className="size-6 shrink-0"
+            disabled={disabled}
+            onClick={() => setEditingIntegration(integration)}
+            size="icon"
+            variant="ghost"
+          >
+            <Pencil className="size-3" />
+          </Button>
+        </div>
+
+        {editingIntegration && (
+          <IntegrationFormDialog
+            integration={editingIntegration}
+            mode="edit"
+            onClose={() => setEditingIntegration(null)}
+            onDelete={async () => {
+              await loadIntegrations(true);
+              setEditingIntegration(null);
+              integrationsVersion.current += 1;
+              setIntegrationsVersion((v) => v + 1);
+            }}
+            onSuccess={handleEditSuccess}
+            open
+          />
+        )}
+      </>
+    );
+  }
+
+  // Multiple integrations - show radio-style selection list
   return (
     <>
       <div className="flex flex-col gap-1">
@@ -158,7 +209,7 @@ export function IntegrationSelector({
           return (
             <div
               className={cn(
-                "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
+                "flex w-full items-center gap-2 rounded-md px-[13px] py-1.5 text-sm transition-colors",
                 isSelected
                   ? "bg-primary/10 text-primary"
                   : "hover:bg-muted/50",

components/workflow/config/action-config.tsx

@@ -10,6 +10,7 @@ import {
   Select,
   SelectContent,
   SelectItem,
+  SelectSeparator,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
@@ -339,7 +340,7 @@ export function ActionConfig({
       <div className="grid grid-cols-2 gap-2">
         <div className="space-y-2">
           <Label className="ml-1" htmlFor="actionCategory">
-            Category
+            Service
           </Label>
           <Select
             disabled={disabled}
@@ -356,6 +357,7 @@ export function ActionConfig({
                   <span>System</span>
                 </div>
               </SelectItem>
+              <SelectSeparator />
               {integrations.map((integration) => (
                 <SelectItem key={integration.type} value={integration.label}>
                   <div className="flex items-center gap-2">
@@ -405,7 +407,7 @@ export function ActionConfig({
                   <HelpCircle className="size-3.5 text-muted-foreground" />
                 </TooltipTrigger>
                 <TooltipContent>
-                  <p>Required for this step to run</p>
+                  <p>API key or OAuth credentials for this service</p>
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>