diff --git a/plugins/plugin-agent-catalog/src/components/AgentInfoCard.tsx b/plugins/plugin-agent-catalog/src/components/AgentInfoCard.tsx
index 9ddd3f5..30025b8 100644
--- a/plugins/plugin-agent-catalog/src/components/AgentInfoCard.tsx
+++ b/plugins/plugin-agent-catalog/src/components/AgentInfoCard.tsx
@@ -8,15 +8,35 @@ import type { ReactNode } from 'react';
 import { InfoCard } from '@backstage/core-components';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { Chip, Grid, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 const A = 'agentcatalog.io';
 
+const useStyles = makeStyles(theme => ({
+  chips: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: theme.spacing(1),
+  },
+  statValue: {
+    overflowWrap: 'anywhere',
+  },
+  detail: {
+    margin: 0,
+    overflowWrap: 'anywhere',
+  },
+}));
+
 const Stat = ({ label, value }: { label: string; value: ReactNode }) => (
-  <Grid item xs={4}>
+  <Grid item xs={6}>
     <Typography variant="overline" color="textSecondary" component="div">
       {label}
     </Typography>
-    <Typography variant="h6" component="div">
+    <Typography
+      variant="body1"
+      component="div"
+      className={useStyles().statValue}
+    >
       {value}
     </Typography>
   </Grid>
@@ -24,8 +44,10 @@ const Stat = ({ label, value }: { label: string; value: ReactNode }) => (
 
 export const AgentInfoCard = () => {
   const { entity } = useEntity();
+  const classes = useStyles();
   const ann = entity.metadata.annotations ?? {};
-  const agent = (entity.spec as { agent?: Record<string, unknown> })?.agent ?? {};
+  const agent =
+    (entity.spec as { agent?: Record<string, unknown> })?.agent ?? {};
 
   const requests = ann[`${A}/usage-requests`];
   const tokens = ann[`${A}/usage-tokens`];
@@ -54,41 +76,73 @@ export const AgentInfoCard = () => {
     >
       <Grid container spacing={2}>
         <Grid item xs={12}>
-          {cluster && <Chip size="small" variant="outlined" label={`cluster: ${cluster}`} />}
-          {discovery && <Chip size="small" variant="outlined" label={`discovery: ${discovery}`} />}
-          {reachable && (
-            <Chip
-              size="small"
-              label={reachable === 'true' ? 'reachable' : 'unreachable'}
-              style={{
-                backgroundColor: reachable === 'true' ? '#1db95433' : '#e5484d33',
-              }}
-            />
-          )}
-          {sourceStatus && (
-            <Chip
-              size="small"
-              label={sourceStatus === 'available' ? 'source: online' : 'source: offline'}
-              style={{
-                backgroundColor:
-                  sourceStatus === 'available' ? '#1db95433' : '#e5484d33',
-              }}
-            />
-          )}
-          {cardSource && <Chip size="small" variant="outlined" label={`card: ${cardSource}`} />}
-          {interfaceStatus && (
-            <Chip
-              size="small"
-              label={interfaceStatus === 'in-sync' ? 'interface: in sync' : 'interface: drift'}
-              style={{
-                backgroundColor:
-                  interfaceStatus === 'in-sync' ? '#1db95433' : '#f5a52433',
-              }}
-            />
-          )}
+          <div className={classes.chips}>
+            {cluster && (
+              <Chip
+                size="small"
+                variant="outlined"
+                label={`cluster: ${cluster}`}
+              />
+            )}
+            {discovery && (
+              <Chip
+                size="small"
+                variant="outlined"
+                label={`discovery: ${discovery}`}
+              />
+            )}
+            {reachable && (
+              <Chip
+                size="small"
+                label={reachable === 'true' ? 'reachable' : 'unreachable'}
+                style={{
+                  backgroundColor:
+                    reachable === 'true' ? '#1db95433' : '#e5484d33',
+                }}
+              />
+            )}
+            {sourceStatus && (
+              <Chip
+                size="small"
+                label={
+                  sourceStatus === 'available'
+                    ? 'source: online'
+                    : 'source: offline'
+                }
+                style={{
+                  backgroundColor:
+                    sourceStatus === 'available' ? '#1db95433' : '#e5484d33',
+                }}
+              />
+            )}
+            {cardSource && (
+              <Chip
+                size="small"
+                variant="outlined"
+                label={`card: ${cardSource}`}
+              />
+            )}
+            {interfaceStatus && (
+              <Chip
+                size="small"
+                label={
+                  interfaceStatus === 'in-sync'
+                    ? 'interface: in sync'
+                    : 'interface: drift'
+                }
+                style={{
+                  backgroundColor:
+                    interfaceStatus === 'in-sync' ? '#1db95433' : '#f5a52433',
+                }}
+              />
+            )}
+          </div>
         </Grid>
 
-        <Stat label={`Requests${window ? ` / ${window}` : ''}`} value={requests ?? '—'} />
+        <Stat
+          label={`Requests${window ? ` / ${window}` : ''}`}
+          value={requests ?? '—'}
+        />
         <Stat label="Tokens" value={tokens ?? '—'} />
         <Stat label="Last active" value={lastActive ?? '—'} />
         <Stat label="Last observed" value={lastObservedAt ?? '—'} />
@@ -96,42 +150,76 @@ export const AgentInfoCard = () => {
 
         {sourceStatus === 'unavailable' && (
           <Grid item xs={12}>
-            <Typography variant="body2" color="textSecondary">
-              Source is currently unavailable. Last successful observation: <code>{sourceLastSuccessAt ?? 'unknown'}</code>.
+            <Typography
+              variant="body2"
+              color="textSecondary"
+              className={classes.detail}
+            >
+              Source is currently unavailable. Last successful observation:{' '}
+              <code>{sourceLastSuccessAt ?? 'unknown'}</code>.
             </Typography>
           </Grid>
         )}
 
         {signals && (
           <Grid item xs={12}>
-            <Typography variant="body2" color="textSecondary">
-              Flagged because: <code>{signals}</code>. If this is a real
-              agent, label its Service <code>agentcatalog.io/a2a: "true"</code>;
-              if it's a false positive, label it <code>"false"</code>.
+            <Typography
+              variant="body2"
+              color="textSecondary"
+              className={classes.detail}
+            >
+              Flagged because: <code>{signals}</code>. If this is a real agent,
+              label its Service <code>agentcatalog.io/a2a: "true"</code>; if
+              it's a false positive, label it <code>"false"</code>.
             </Typography>
           </Grid>
         )}
         {interfaceDrift && (
           <Grid item xs={12}>
-            <Typography variant="body2" color="textSecondary">
-              Declared interface differs from the live card: <code>{interfaceDrift}</code>.
+            <Typography
+              variant="body2"
+              color="textSecondary"
+              className={classes.detail}
+            >
+              Declared interface differs from the live card:{' '}
+              <code>{interfaceDrift}</code>.
             </Typography>
           </Grid>
         )}
         {(modelConfig || image) && (
           <Grid item xs={12}>
-            <Typography variant="body2" color="textSecondary">
-              {modelConfig && <>model config: <code>{modelConfig}</code> </>}
-              {image && <>image: <code>{image}</code></>}
+            <Typography
+              variant="body2"
+              color="textSecondary"
+              className={classes.detail}
+            >
+              {modelConfig && (
+                <>
+                  model config: <code>{modelConfig}</code>{' '}
+                </>
+              )}
+              {image && (
+                <>
+                  image: <code>{image}</code>
+                </>
+              )}
             </Typography>
           </Grid>
         )}
         {requests === undefined && (
           <Grid item xs={12}>
-            <Typography variant="body2" color="textSecondary">
+            <Typography
+              variant="body2"
+              color="textSecondary"
+              className={classes.detail}
+            >
               No per-agent usage: this agent has no gateway key alias. Issue it
-              a key aliased <code>{String(agent.namespace ?? 'ns')}/{entity.metadata.title ?? entity.metadata.name}</code> to
-              light up traction.
+              a key aliased{' '}
+              <code>
+                {String(agent.namespace ?? 'ns')}/
+                {entity.metadata.title ?? entity.metadata.name}
+              </code>{' '}
+              to light up traction.
             </Typography>
           </Grid>
         )}
diff --git a/plugins/plugin-agent-catalog/src/plugin.tsx b/plugins/plugin-agent-catalog/src/plugin.tsx
index f58a2fe..6a58298 100644
--- a/plugins/plugin-agent-catalog/src/plugin.tsx
+++ b/plugins/plugin-agent-catalog/src/plugin.tsx
@@ -32,14 +32,14 @@ const agentFleetPage = PageBlueprint.make({
     routeRef: agentsRouteRef,
     title: agentCatalogNavItem.title,
     icon: <AndroidIcon />,
-    loader: () =>
-      import('./components/FleetPage').then(m => <m.FleetPage />),
+    loader: () => import('./components/FleetPage').then(m => <m.FleetPage />),
   },
 });
 
 const agentInfoCard = EntityCardBlueprint.make({
   name: 'agent-info',
   params: {
+    type: 'info',
     filter: (entity: Entity) =>
       entity.kind === 'Component' &&
       ['ai-agent', 'ai-agent-team', 'llm-workload'].includes(