Tweak styles on edge sidepane, add label for graph settings (#510)

Author: sarah-inkeep

.changeset/eight-jobs-make.md

@@ -0,0 +1,5 @@
+---
+"@inkeep/agents-manage-ui": patch
+---
+
+Tweak styling on edge pane, graph settings label

agents-manage-ui/src/components/graph/sidepane/edges/edge-editor.tsx

@@ -1,14 +1,15 @@
 import { type Edge, useNodesData, useReactFlow } from '@xyflow/react';
 import { Spline } from 'lucide-react';
 import { DashedSplineIcon } from '@/components/icons/dashed-spline';
+import { Badge } from '@/components/ui/badge';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 import { useGraphActions } from '@/features/graph/state/use-graph-store';
 import type { A2AEdgeData } from '../../configuration/edge-types';
 
 type RelationshipOptionProps = {
   id: string;
-  label: string;
+  label: string | React.ReactNode;
   onCheckedChange: (id: string, checked: boolean) => void;
   checked: boolean;
 };
@@ -20,9 +21,12 @@ function RelationshipOption({ id, label, onCheckedChange, checked }: Relationshi
         id={id}
         onCheckedChange={(checked) => onCheckedChange(id, checked as boolean)}
         checked={checked}
+        className="mt-[5px]"
       />
       <div className="grid gap-2">
-        <Label htmlFor={id}>{label}</Label>
+        <Label htmlFor={id} className="font-normal">
+          {label}
+        </Label>
       </div>
     </div>
   );
@@ -32,7 +36,7 @@ type RelationshipSectionProps = {
   icon: React.ReactNode;
   title: string;
   description: string;
-  options: Array<{ id: string; label: string }>;
+  options: Array<{ id: string; label: string | React.ReactNode }>;
   onCheckedChange: (id: string, checked: boolean) => void;
   checkedValues: A2AEdgeData['relationships'];
 };
@@ -131,35 +135,89 @@ function EdgeEditor({ selectedEdge }: EdgeEditorProps) {
     ? [
         {
           id: 'transferSourceToTarget',
-          label: `${sourceNode?.data.name} can transfer to itself`,
+          label: (
+            <div>
+              <Badge variant="code" className="my-0.5">
+                {sourceNode?.data.name as string}
+              </Badge>{' '}
+              can transfer to itself
+            </div>
+          ),
         },
       ]
     : [
         {
           id: 'transferSourceToTarget',
-          label: `${sourceNode?.data.name} can transfer to ${targetNode?.data.name}`,
+          label: (
+            <div>
+              <Badge variant="code" className="my-0.5">
+                {sourceNode?.data.name as string}
+              </Badge>{' '}
+              can transfer to{' '}
+              <Badge variant="code" className="my-0.5">
+                {targetNode?.data.name as string}
+              </Badge>
+            </div>
+          ),
         },
         {
           id: 'transferTargetToSource',
-          label: `${targetNode?.data.name} can transfer to ${sourceNode?.data.name}`,
+          label: (
+            <div>
+              <Badge variant="code" className="my-0.5">
+                {targetNode?.data.name as string}
+              </Badge>{' '}
+              can transfer to{' '}
+              <Badge variant="code" className="my-0.5">
+                {sourceNode?.data.name as string}
+              </Badge>
+            </div>
+          ),
         },
       ];
 
   const delegateOptions = isSelfLoop
     ? [
         {
           id: 'delegateSourceToTarget',
-          label: `${sourceNode?.data.name} can delegate to itself`,
+          label: (
+            <div>
+              <Badge variant="code" className="my-0.5">
+                {sourceNode?.data.name as string}
+              </Badge>{' '}
+              can delegate to itself
+            </div>
+          ),
         },
       ]
     : [
         {
           id: 'delegateSourceToTarget',
-          label: `${sourceNode?.data.name} can delegate to ${targetNode?.data.name}`,
+          label: (
+            <div>
+              <Badge variant="code" className="my-0.5">
+                {sourceNode?.data.name as string}
+              </Badge>{' '}
+              can delegate to{' '}
+              <Badge variant="code" className="my-0.5">
+                {targetNode?.data.name as string}
+              </Badge>
+            </div>
+          ),
         },
         {
           id: 'delegateTargetToSource',
-          label: `${targetNode?.data.name} can delegate to ${sourceNode?.data.name}`,
+          label: (
+            <div>
+              <Badge variant="code" className="my-0.5">
+                {targetNode?.data.name as string}
+              </Badge>{' '}
+              can delegate to{' '}
+              <Badge variant="code" className="my-0.5">
+                {sourceNode?.data.name as string}
+              </Badge>
+            </div>
+          ),
         },
       ];
 

agents-manage-ui/src/components/graph/toolbar/toolbar.tsx

@@ -1,8 +1,8 @@
 import { Play, Settings } from 'lucide-react';
+import { useEffect, useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useGraphStore } from '@/features/graph/state/use-graph-store';
-import { useEffect, useRef } from 'react';
 import { isMacOs } from '@/lib/utils';
 
 interface ToolbarProps {
@@ -71,9 +71,9 @@ export function Toolbar({
       >
         {isPreviewDisabled ? 'Save' : 'Save changes'}
       </Button>
-      <Button type="button" variant="ghost" onClick={toggleSidePane}>
-        <span className="sr-only">Toggle side pane</span>
+      <Button type="button" variant="outline" onClick={toggleSidePane}>
         <Settings className="w-4 h-4" />
+        Graph Settings
       </Button>
     </div>
   );