Refactor renamed the component groups to something less obtuse:

Elements -> Groups -> Screens -> Views

clients/web/src/components/elements/TransportBadge/TransportBadge.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TransportBadge } from "./TransportBadge";
+
+const meta: Meta<typeof TransportBadge> = {
+  title: "Elements/TransportBadge",
+  component: TransportBadge,
+};
+
+export default meta;
+type Story = StoryObj<typeof TransportBadge>;
+
+export const Stdio: Story = {
+  args: {
+    transport: "stdio",
+  },
+};
+
+export const Http: Story = {
+  args: {
+    transport: "http",
+  },
+};

clients/web/src/components/elements/TransportBadge/TransportBadge.tsx

@@ -0,0 +1,13 @@
+import { Badge } from "@mantine/core";
+
+export interface TransportBadgeProps {
+  transport: "stdio" | "http";
+}
+
+export function TransportBadge({ transport }: TransportBadgeProps) {
+  return (
+    <Badge variant="outline" color="gray">
+      {transport.toUpperCase()}
+    </Badge>
+  );
+}