feat: improve operator UI and navigation

apps/ui/src/pages/operation-create/page.tsx

@@ -1,5 +1,26 @@
-import { PageSection } from "../../shared/ui/page-section";
 import { OperationForm } from "../../features/operation-form/operation-form";
+import { PageSection } from "../../shared/ui/page-section";
+
+const protocolCards = [
+  {
+    protocol: "rest",
+    title: "REST",
+    description:
+      "One tool maps to one method and one path, with body, query and header mapping.",
+  },
+  {
+    protocol: "graphql",
+    title: "GraphQL",
+    description:
+      "One tool maps to one fixed query or mutation with stable variables and response shape.",
+  },
+  {
+    protocol: "grpc",
+    title: "gRPC",
+    description:
+      "One tool maps to one unary method backed by a descriptor-set contract.",
+  },
+] as const;
 
 export function OperationCreatePage() {
   return (
@@ -7,6 +28,23 @@ export function OperationCreatePage() {
       <PageSection
         title="Create Operation"
         subtitle="Create one MCP tool from one fixed REST, GraphQL or unary gRPC contract."
+      >
+        <div className="hero-grid">
+          {protocolCards.map((card) => (
+            <article className="hero-card" key={card.protocol}>
+              <span className={`protocol-pill protocol-${card.protocol}`}>
+                {card.protocol}
+              </span>
+              <h3>{card.title}</h3>
+              <p className="body-copy">{card.description}</p>
+            </article>
+          ))}
+        </div>
+      </PageSection>
+
+      <PageSection
+        title="Contract Builder"
+        subtitle="Define the operator-facing tool contract first, then map it to the upstream target."
       >
         <OperationForm />
       </PageSection>