fix(ui): agent detail design review 1 (#252)

- moved bee badge next to the title (on the list too)
- moved github link to the metadata line

Refs: #182

apps/beeai-ui/src/modules/agents/components/AgentCard.tsx

@@ -24,6 +24,7 @@ import classes from './AgentCard.module.scss';
 import { AgentMetadata } from './AgentMetadata';
 import { AgentTags } from './AgentTags';
 import { ReactNode } from 'react';
+import { BeeBadge } from './BeeBadge';
 
 interface Props {
   agent: Agent;
@@ -34,7 +35,10 @@ export function AgentCard({ agent, renderTitle }: Props) {
   const { description } = agent;
   return (
     <article className={classes.root}>
-      <h2 className={classes.name}>{renderTitle({ className: classes.link, agent })}</h2>
+      <h2 className={classes.name}>
+        {renderTitle({ className: classes.link, agent })}
+        <BeeBadge agent={agent} />
+      </h2>
 
       <div className={classes.body}>
         <AgentMetadata agent={agent} />

apps/beeai-ui/src/modules/agents/components/AgentDetail.tsx

@@ -31,6 +31,7 @@ import { MarkdownContent } from '#components/MarkdownContent/MarkdownContent.tsx
 import { AgentDetailSection } from './AgentDetailSection';
 import { AgentExampleRequests } from './AgentExampleRequests';
 import { AgentTags } from './AgentTags';
+import { BeeBadge } from './BeeBadge';
 import { fadeProps } from '#utils/fadeProps.ts';
 import commands from '#utils/commands.ts';
 import classes from './AgentDetail.module.scss';
@@ -46,12 +47,13 @@ export function AgentDetail({ agent, buttons }: Props) {
     <div className={classes.root}>
       <motion.h1 {...fadeInPropsWithMarginShift({ start: { from: spacing[4] } })} className={classes.name}>
         {getAgentTitle(agent)}
+        <BeeBadge agent={agent} size="lg" />
       </motion.h1>
 
       <motion.div {...fadeInPropsWithMarginShift({ start: { from: spacing[3] } })}>
-        <AgentMetadata agent={agent} className={classes.metadata} />
+        <AgentMetadata agent={agent} showGithub className={classes.metadata} />
         {description && <MarkdownContent className={classes.description}>{description}</MarkdownContent>}
-        <AgentTags agent={agent} showGitHub className={classes.tags} />
+        <AgentTags agent={agent} className={classes.tags} />
       </motion.div>
 
       <motion.div

apps/beeai-ui/src/modules/agents/components/AgentMetadata.module.scss

@@ -30,3 +30,8 @@
     border-inline-end: 1px solid $border-subtle-00;
   }
 }
+
+.githubLink {
+  display: flex;
+  color: inherit;
+}

apps/beeai-ui/src/modules/agents/components/AgentMetadata.tsx

@@ -16,17 +16,19 @@
 
 import { Time } from '@carbon/icons-react';
 import { SkeletonText } from '@carbon/react';
+import { LogoGithub } from '@carbon/icons-react';
 import clsx from 'clsx';
 import { Agent } from '../api/types';
 import classes from './AgentMetadata.module.scss';
 
 interface Props {
   agent: Agent;
   className?: string;
+  showGithub?: boolean;
 }
 
-export function AgentMetadata({ agent, className }: Props) {
-  const { avgRunTimeSeconds, avgRunTokens, license } = agent;
+export function AgentMetadata({ agent, className, showGithub }: Props) {
+  const { avgRunTimeSeconds, avgRunTokens, license, githubUrl } = agent;
 
   return (
     <ul className={clsx(classes.root, className)}>
@@ -38,6 +40,11 @@ export function AgentMetadata({ agent, className }: Props) {
       )}
       {avgRunTokens && <li className={classes.item}>{avgRunTokens} tokens/run (avg)</li>}
       {license && <li className={classes.item}>{license}</li>}
+      {showGithub && githubUrl && (
+        <li className={classes.item}>
+          <GithubLink githubUrl={githubUrl} />
+        </li>
+      )}
     </ul>
   );
 }
@@ -49,3 +56,11 @@ interface SkeletonProps {
 AgentMetadata.Skeleton = function AgentMetadataSkeleton({ className }: SkeletonProps) {
   return <SkeletonText className={clsx(classes.root, className)} width="33%" />;
 };
+
+function GithubLink({ githubUrl }: { githubUrl: string }) {
+  return (
+    <a target="_blank" href={githubUrl} className={classes.githubLink} aria-label="Open on Github">
+      <LogoGithub size={16} />
+    </a>
+  );
+}

apps/beeai-ui/src/modules/agents/components/AgentTags.tsx

@@ -16,44 +16,23 @@
 
 import type { ReactElement } from 'react';
 import { Tag } from '@carbon/react';
-import { LogoGithub } from '@carbon/icons-react';
 import { TagsList } from '#components/TagsList/TagsList.tsx';
-import { Tooltip } from '#components/Tooltip/Tooltip.tsx';
-import Bee from '#svgs/Bee.svg';
-import { BEE_AI_FRAMEWORK_TAG } from '#utils/constants.ts';
 import { isNotNull } from '#utils/helpers.ts';
 import type { Agent } from '../api/types';
-import classes from './AgentTags.module.scss';
 
 interface Props {
   agent: Agent;
-  showGitHub?: boolean;
   className?: string;
 }
 
-export function AgentTags({ agent, showGitHub, className }: Props) {
-  const { framework, githubUrl } = agent;
+export function AgentTags({ agent, className }: Props) {
+  const { framework } = agent;
 
-  const tags: ReactElement[] = [
-    framework ? <AgentTag key={framework} name={framework} /> : null,
-    showGitHub && githubUrl ? <AgentGitHubTag key={githubUrl} href={githubUrl} /> : null,
-  ].filter(isNotNull);
+  const tags: ReactElement[] = [framework ? <AgentTag key={framework} name={framework} /> : null].filter(isNotNull);
 
   return <TagsList tags={tags} className={className} />;
 }
 
 function AgentTag({ name }: { name: string }) {
-  return name === BEE_AI_FRAMEWORK_TAG ? (
-    <Tooltip content="Built by the BeeAI team" placement="top" asChild>
-      <Tag type="green" renderIcon={Bee}>
-        {name}
-      </Tag>
-    </Tooltip>
-  ) : (
-    <Tag type="cool-gray">{name}</Tag>
-  );
-}
-
-function AgentGitHubTag({ href }: { href: string }) {
-  return <Tag type="cool-gray" as="a" href={href} target="_blank" renderIcon={LogoGithub} className={classes.link} />;
+  return <Tag type="cool-gray">{name}</Tag>;
 }

apps/beeai-ui/src/modules/agents/components/AgentTags.module.scss → apps/beeai-ui/src/modules/agents/components/BeeBadge.module.scss

@@ -14,6 +14,21 @@
  * limitations under the License.
  */
 
-.link {
-  cursor: pointer;
+.tag:global(.#{$prefix}--tag) {
+  margin-inline-start: $spacing-03;
+}
+
+.tag:global(.#{$prefix}--tag--lg) {
+  padding-inline-start: rem(7px) !important;
+  padding-inline-end: rem(7px) !important;
+
+  :global(.#{$prefix}--tag__custom-icon) {
+    block-size: rem(18px);
+    inline-size: rem(18px);
+
+    > svg {
+      block-size: rem(18px) !important;
+      inline-size: rem(18px) !important;
+    }
+  }
 }

apps/beeai-ui/src/modules/agents/components/BeeBadge.tsx

@@ -0,0 +1,41 @@
+/**
+ * Copyright 2025 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentProps } from 'react';
+import { BEE_AI_FRAMEWORK_TAG } from '#utils/constants.ts';
+import { Tooltip } from '#components/Tooltip/Tooltip.tsx';
+import Bee from '#svgs/Bee.svg';
+import type { Agent } from '../api/types';
+import { Tag } from '@carbon/react';
+import classes from './BeeBadge.module.scss';
+
+interface Props {
+  agent: Agent;
+  size?: ComponentProps<typeof Tag>['size'];
+}
+
+export function BeeBadge({ agent, size }: Props) {
+  const { framework } = agent;
+  return (
+    <>
+      {framework === BEE_AI_FRAMEWORK_TAG && (
+        <Tooltip content="Built by the BeeAI team" placement="top" asChild>
+          <Tag type="green" renderIcon={Bee} size={size} className={classes.tag} />
+        </Tooltip>
+      )}
+    </>
+  );
+}