@apiboost/omnispec 1.1.0-next.5 → 1.1.0-next.7

package/dist/cjs/chunks/{AsyncApiSpec-B-RGmOUL.js → AsyncApiSpec-g7Htcn89.js}

@@ -3,9 +3,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var css = require('@emotion/css');
-var useSpecFetcher = require('./useSpecFetcher-BAbHnXax.js');
-var Collapsible = require('./Collapsible-qjYtxwP0.js');
-var ErrorBoundary = require('./ErrorBoundary-CezYgQDG.js');
+var useSpecFetcher = require('./useSpecFetcher-CpXe_imr.js');
+var Collapsible = require('./Collapsible-2_XxRGv-.js');
+var ErrorBoundary = require('./ErrorBoundary-DokoK3KD.js');
 var refResolver = require('./ref-resolver-0A8GNRI3.js');
 require('@emotion/styled');
 require('./ssrf-guard-B6T2A7Ho.js');
@@ -51,6 +51,27 @@ function deriveAppliedTraitNames(traits, rawTraits) {
     return trait.name ?? trait.title ?? `trait ${i + 1}`;
   });
 }
+function resolveLocalPointer(root, ref) {
+  if (!ref.startsWith("#/")) return void 0;
+  let cur = root;
+  for (const seg of ref.slice(2).split("/")) {
+    if (cur === null || typeof cur !== "object") return void 0;
+    cur = cur[refResolver.decodeJsonPointerSegment(seg)];
+  }
+  return cur;
+}
+function rawMessageTraits(rawMsg, rawApi) {
+  let msg = rawMsg;
+  const seen = /* @__PURE__ */ new Set();
+  while (msg && typeof msg === "object" && typeof msg.$ref === "string") {
+    const ref = msg.$ref;
+    if (seen.has(ref)) return void 0;
+    seen.add(ref);
+    msg = resolveLocalPointer(rawApi, ref);
+  }
+  if (!msg || typeof msg !== "object") return void 0;
+  return msg.traits;
+}
 function applyMessageTraits(msg, isV3) {
   if (!msg.traits || msg.traits.length === 0) return msg;
   if (isV3) {
@@ -93,10 +114,12 @@ async function parseAsyncApiSpec(specInput) {
   const servers = extractServers(api, raw);
   const rawApi = raw;
   const defaultContentType = api.defaultContentType;
-  const channels = isV3 ? extractChannelsV3(api, rawApi, defaultContentType) : extractChannelsV2(api, defaultContentType);
+  const channels = isV3 ? extractChannelsV3(api, rawApi, defaultContentType) : extractChannelsV2(api, rawApi, defaultContentType);
   const components = extractComponents(api, rawApi, isV3, defaultContentType);
   const root = api;
-  const tags = api.tags?.map((tag) => {
+  const rootTags = isV3 ? api.info.tags ?? api.tags : api.tags;
+  const rootExternalDocs = isV3 ? api.info.externalDocs ?? api.externalDocs : api.externalDocs;
+  const tags = rootTags?.map((tag) => {
     const raw2 = tag;
     return {
       name: tag.name,
@@ -115,7 +138,7 @@ async function parseAsyncApiSpec(specInput) {
     components,
     tags,
     tagGroups: root["x-tagGroups"],
-    externalDocs: api.externalDocs,
+    externalDocs: rootExternalDocs,
     contact: api.info.contact,
     license: api.info.license,
     termsOfService: api.info.termsOfService,
@@ -145,15 +168,17 @@ function extractServers(api, rawApi) {
   const rawServers = !Array.isArray(rawApi.servers) && rawApi.servers || {};
   return Object.entries(api.servers).map(([name, s]) => toServer(s, name, rawServers[name]?.security));
 }
-function extractChannelsV2(api, defaultContentType) {
+function extractChannelsV2(api, rawApi, defaultContentType) {
   if (!api.channels) return [];
+  const rawChannels = rawApi.channels ?? {};
   return Object.entries(api.channels).map(([channelName, ch]) => {
     const operations = [];
+    const rawCh = rawChannels[channelName];
     if (ch.publish) {
-      operations.push(convertOperationV2("publish", ch.publish, defaultContentType));
+      operations.push(convertOperationV2("publish", ch.publish, rawCh?.publish, rawApi, defaultContentType));
     }
     if (ch.subscribe) {
-      operations.push(convertOperationV2("subscribe", ch.subscribe, defaultContentType));
+      operations.push(convertOperationV2("subscribe", ch.subscribe, rawCh?.subscribe, rawApi, defaultContentType));
     }
     const raw = ch;
     return {
@@ -168,16 +193,20 @@ function extractChannelsV2(api, defaultContentType) {
     };
   });
 }
-function convertOperationV2(action, rawOp, defaultContentType) {
+function convertOperationV2(action, rawOp, rawOperation, rawApi, defaultContentType) {
   const op = applyOperationTraits(rawOp, false);
   const messages = [];
   if (op.message) {
+    const rawMessage = rawOperation?.message;
     if ("oneOf" in op.message) {
-      for (const m of op.message.oneOf) {
-        messages.push(convertMessage(m, false, defaultContentType));
-      }
+      op.message.oneOf.forEach((m, i) => {
+        const rawOneOf = rawMessage?.oneOf;
+        messages.push(convertMessage(m, false, defaultContentType, rawMessageTraits(rawOneOf?.[i], rawApi)));
+      });
     } else {
-      messages.push(convertMessage(op.message, false, defaultContentType));
+      messages.push(
+        convertMessage(op.message, false, defaultContentType, rawMessageTraits(rawMessage, rawApi))
+      );
     }
   }
   const raw = op;
@@ -244,21 +273,26 @@ function extractChannelsV3(api, rawApi, defaultContentType) {
       const op = applyOperationTraits(resolvedOp, true);
       const rawOp = rawApi.operations?.[opKey];
       const channelName = resolveChannelName(rawOp?.channel, op.channel, addressToName);
-      const collectMessages = (list) => {
+      const collectMessages = (list, rawList) => {
         const out = [];
-        for (const msg of list ?? []) {
-          if (msg && typeof msg === "object" && "$ref" in msg) continue;
-          out.push(convertMessage(msg, true, defaultContentType));
-        }
+        (list ?? []).forEach((msg, i) => {
+          if (msg && typeof msg === "object" && "$ref" in msg) return;
+          out.push(convertMessage(msg, true, defaultContentType, rawMessageTraits(rawList?.[i], rawApi)));
+        });
         return out;
       };
-      let messages = collectMessages(op.messages);
+      let messages = collectMessages(op.messages, rawOp?.messages);
       if (messages.length === 0 && channelName && api.channels?.[channelName]?.messages) {
+        const rawChannelMessages = rawApi.channels?.[channelName]?.messages ?? {};
         messages = collectMessages(
-          Object.values(api.channels[channelName].messages)
+          Object.values(api.channels[channelName].messages),
+          Object.values(rawChannelMessages)
         );
       }
-      const replyMessages = collectMessages(op.reply?.messages);
+      const replyMessages = collectMessages(
+        op.reply?.messages,
+        rawOp?.reply?.messages
+      );
       const rawReplyChannel = rawOp?.reply?.channel;
       const replyChannelName = resolveChannelName(
         rawReplyChannel,
@@ -427,7 +461,7 @@ function ExternalLink({ href, children, label, className }) {
       target: "_blank",
       rel: "noopener noreferrer",
       "aria-label": `${label}, opens in new tab`,
-      className: css.cx(linkStyle$1, className),
+      className: css.cx(linkStyle$2, className),
       children: [
         children,
         /* @__PURE__ */ jsxRuntime.jsx(useSpecFetcher.Icon, { name: "external-link", size: "0.875em" })
@@ -435,7 +469,7 @@ function ExternalLink({ href, children, label, className }) {
     }
   );
 }
-const linkStyle$1 = css.css({
+const linkStyle$2 = css.css({
   display: "inline-flex",
   alignItems: "center",
   gap: "0.25rem",
@@ -489,7 +523,7 @@ const metaStyle = css.css({
   color: "var(--omnispec-fg-secondary)",
   marginTop: "0.25rem"
 });
-const linkStyle = css.css({
+const linkStyle$1 = css.css({
   color: "var(--omnispec-fg-link)",
   textDecoration: "none",
   "&:hover": {
@@ -515,7 +549,7 @@ function AsyncOverview({ spec }) {
       ] }),
       spec.contact.email && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
         " <",
-        /* @__PURE__ */ jsxRuntime.jsx("a", { href: `mailto:${spec.contact.email}`, className: linkStyle, children: spec.contact.email }),
+        /* @__PURE__ */ jsxRuntime.jsx("a", { href: `mailto:${spec.contact.email}`, className: linkStyle$1, children: spec.contact.email }),
         ">"
       ] }),
       spec.contact.url && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -675,9 +709,9 @@ function FieldRows({
   verbatim = false
 }) {
   if (fields.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("dl", { className: listStyle$1, children: fields.map(([field, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowStyle$1, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("dl", { className: listStyle$1, children: fields.map(([field, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowStyle$2, children: [
     /* @__PURE__ */ jsxRuntime.jsx("dt", { className: nameStyle$1, children: verbatim ? field : humanizeField(field) }),
-    /* @__PURE__ */ jsxRuntime.jsx("dd", { className: valueStyle, children: renderValue(value, verbatim) })
+    /* @__PURE__ */ jsxRuntime.jsx("dd", { className: valueStyle$1, children: renderValue(value, verbatim) })
   ] }, field)) });
 }
 const listStyle$1 = css.css({
@@ -687,13 +721,13 @@ const listStyle$1 = css.css({
   margin: "0.25rem 0 0",
   minWidth: 0
 });
-const rowStyle$1 = css.css({ display: "contents" });
+const rowStyle$2 = css.css({ display: "contents" });
 const nameStyle$1 = css.css({
   fontSize: "var(--omnispec-font-size-xs)",
   fontWeight: 600,
   color: "var(--omnispec-fg-secondary)"
 });
-const valueStyle = css.css({
+const valueStyle$1 = css.css({
   fontSize: "var(--omnispec-font-size-xs)",
   color: "var(--omnispec-fg-primary)",
   margin: 0,
@@ -838,8 +872,8 @@ const emptyStyle = css.css({
 
 function SecurityRequirementBadges({ requirements, label = "Security" }) {
   if (!requirements || requirements.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowStyle, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelStyle, children: label }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowStyle$1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelStyle$1, children: label }),
     requirements.map((alternative, altIndex) => {
       const chips = alternative.map((scheme) => /* @__PURE__ */ jsxRuntime.jsxs("a", { href: `#security-${scheme.name}`, className: badgeStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsx(useSpecFetcher.Icon, { name: "lock", size: "0.625rem", strokeWidth: 2.5 }),
@@ -856,7 +890,7 @@ function SecurityRequirementBadges({ requirements, label = "Security" }) {
     })
   ] });
 }
-const rowStyle = css.css({
+const rowStyle$1 = css.css({
   display: "flex",
   alignItems: "center",
   gap: "0.375rem",
@@ -872,7 +906,7 @@ const orGroupStyle = css.css({
   gap: "0.375rem",
   whiteSpace: "nowrap"
 });
-const labelStyle = css.css({
+const labelStyle$1 = css.css({
   fontSize: "var(--omnispec-font-size-xxs)",
   lineHeight: 1.5,
   fontWeight: 600,
@@ -1068,7 +1102,7 @@ function ServerList({ servers }) {
   ] });
 }
 
-function TagChips({ tags, onTagClick }) {
+function TagChips({ tags, onTagClick, activeTag }) {
   if (!tags || tags.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tagChipsStyle$1, children: tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: tagItemStyle, children: [
     onTagClick ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1077,6 +1111,7 @@ function TagChips({ tags, onTagClick }) {
         type: "button",
         className: tagChipButtonStyle$1,
         title: tag.description,
+        "aria-pressed": tag.name === activeTag,
         onClick: () => onTagClick(tag.name),
         children: tag.name
       }
@@ -1335,22 +1370,94 @@ const unresolvedRefCodeStyle = css.css({
   fontSize: "var(--omnispec-font-size-xs)"
 });
 
-const actionLabels$1 = {
+const actionLabels = {
   publish: "PUB",
   subscribe: "SUB",
   send: "SEND",
   receive: "RECV"
 };
-const actionColors$1 = {
+const actionColors = {
   publish: "var(--omnispec-color-publish)",
   subscribe: "var(--omnispec-color-subscribe)",
   send: "var(--omnispec-color-publish)",
   receive: "var(--omnispec-color-subscribe)"
 };
-function ChannelDetail({ channel, id, expandAll, expandGeneration, onTagClick }) {
-  const primaryAction = channel.operations[0]?.action;
-  const primaryLabel = actionLabels$1[primaryAction] ?? primaryAction?.toUpperCase() ?? "";
-  const primaryColor = actionColors$1[primaryAction] ?? "var(--omnispec-fg-muted)";
+function channelActionBadge(channel) {
+  const distinct = [...new Set(channel.operations.map((op) => op.action))];
+  const label = distinct.map((a) => actionLabels[a] ?? a.toUpperCase()).join(" / ");
+  const color = distinct.length === 1 ? actionColors[distinct[0]] ?? "var(--omnispec-fg-muted)" : "var(--omnispec-color-primary)";
+  return { label, color };
+}
+
+function ReplyMeta({
+  reply,
+  channelHref,
+  onChannelNavigate
+}) {
+  const hasAddress = reply.address && (reply.address.value || reply.address.location || reply.address.description);
+  const replyHref = reply.channelName ? channelHref?.(reply.channelName) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    reply.channelName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelStyle, children: "channel" }),
+      replyHref ? /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: replyHref,
+          className: linkStyle,
+          onClick: onChannelNavigate ? (e) => {
+            e.preventDefault();
+            onChannelNavigate(reply.channelName);
+          } : void 0,
+          children: reply.channelName
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("code", { className: valueStyle, children: reply.channelName })
+    ] }),
+    hasAddress && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelStyle, children: "address" }),
+      reply.address?.value && /* @__PURE__ */ jsxRuntime.jsx("code", { className: valueStyle, children: reply.address.value }),
+      reply.address?.location && /* @__PURE__ */ jsxRuntime.jsx("code", { className: valueStyle, children: reply.address.location }),
+      reply.address?.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: descStyle$2, children: reply.address.description })
+    ] })
+  ] });
+}
+const rowStyle = css.css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  flexWrap: "wrap",
+  marginBottom: "0.5rem"
+});
+const labelStyle = css.css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 700,
+  color: "var(--omnispec-fg-primary)",
+  fontFamily: "var(--omnispec-font-mono)"
+});
+const valueStyle = css.css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-code)",
+  backgroundColor: "var(--omnispec-bg-tertiary)",
+  padding: "0.0625rem 0.375rem",
+  borderRadius: "0.1875rem"
+});
+const linkStyle = css.css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-color-primary)",
+  backgroundColor: "var(--omnispec-bg-tertiary)",
+  padding: "0.0625rem 0.375rem",
+  borderRadius: "0.1875rem",
+  textDecoration: "none",
+  "&:hover": { textDecoration: "underline" }
+});
+const descStyle$2 = css.css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-secondary)"
+});
+
+function ChannelDetail({ channel, id, expandAll, expandGeneration, onTagClick, activeTag, channelHref, onChannelNavigate }) {
+  const headerBadge = channelActionBadge(channel);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Collapsible.ExpandableCard,
     {
@@ -1360,10 +1467,10 @@ function ChannelDetail({ channel, id, expandAll, expandGeneration, onTagClick })
       expandAll,
       expandGeneration,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Collapsible.MethodBar, { label: primaryLabel, path: channel.address, color: primaryColor }),
+        /* @__PURE__ */ jsxRuntime.jsx(Collapsible.MethodBar, { label: headerBadge.label, path: channel.address, color: headerBadge.color }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: bodyStyle, children: [
           channel.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: sectionStyle$1, children: /* @__PURE__ */ jsxRuntime.jsx(Collapsible.MarkdownRenderer, { content: channel.description }) }),
-          channel.tags && channel.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(TagChips, { tags: channel.tags, onTagClick }),
+          channel.tags && channel.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(TagChips, { tags: channel.tags, onTagClick, activeTag }),
           channel.externalDocs && /* @__PURE__ */ jsxRuntime.jsx("div", { className: sectionStyle$1, children: /* @__PURE__ */ jsxRuntime.jsx(ExternalDocsLink, { externalDocs: channel.externalDocs, context: channel.address }) }),
           channel.parameters && Object.keys(channel.parameters).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: sectionStyle$1, children: [
             /* @__PURE__ */ jsxRuntime.jsx("h4", { className: sectionTitleStyle$1, children: "Parameters" }),
@@ -1398,9 +1505,9 @@ function ChannelDetail({ channel, id, expandAll, expandGeneration, onTagClick })
                   "span",
                   {
                     className: css.cx(actionBadgeBase$1, css.css({
-                      backgroundColor: actionColors$1[op.action] ?? "var(--omnispec-fg-muted)"
+                      backgroundColor: actionColors[op.action] ?? "var(--omnispec-fg-muted)"
                     })),
-                    children: actionLabels$1[op.action] ?? op.action.toUpperCase()
+                    children: actionLabels[op.action] ?? op.action.toUpperCase()
                   }
                 ),
                 op.operationId && /* @__PURE__ */ jsxRuntime.jsx("span", { className: opIdStyle$1, children: op.operationId }),
@@ -1408,7 +1515,7 @@ function ChannelDetail({ channel, id, expandAll, expandGeneration, onTagClick })
               ] }),
               op.summary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: opSummaryStyle$1, children: op.summary })
             ] }),
-            op.tags && op.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(TagChips, { tags: op.tags, onTagClick }),
+            op.tags && op.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(TagChips, { tags: op.tags, onTagClick, activeTag }),
             op.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: sectionStyle$1, children: /* @__PURE__ */ jsxRuntime.jsx(Collapsible.MarkdownRenderer, { content: op.description }) }),
             op.externalDocs && /* @__PURE__ */ jsxRuntime.jsx("div", { className: opExternalDocsStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
               ExternalDocsLink,
@@ -1421,16 +1528,7 @@ function ChannelDetail({ channel, id, expandAll, expandGeneration, onTagClick })
             /* @__PURE__ */ jsxRuntime.jsx(OperationMessages, { operation: op, idx }),
             op.reply && (op.reply.messages.length > 0 || op.reply.address || op.reply.channelName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: replyStyle$1, children: [
               /* @__PURE__ */ jsxRuntime.jsx("h4", { className: replyTitleStyle, children: "Reply" }),
-              op.reply.channelName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: replyMetaRowStyle, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: replyMetaLabelStyle, children: "channel" }),
-                /* @__PURE__ */ jsxRuntime.jsx("code", { className: replyMetaValueStyle, children: op.reply.channelName })
-              ] }),
-              op.reply.address && (op.reply.address.value || op.reply.address.location || op.reply.address.description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: replyMetaRowStyle, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: replyMetaLabelStyle, children: "address" }),
-                op.reply.address.value && /* @__PURE__ */ jsxRuntime.jsx("code", { className: replyMetaValueStyle, children: op.reply.address.value }),
-                op.reply.address.location && /* @__PURE__ */ jsxRuntime.jsx("code", { className: replyMetaValueStyle, children: op.reply.address.location }),
-                op.reply.address.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: replyMetaDescStyle, children: op.reply.address.description })
-              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(ReplyMeta, { reply: op.reply, channelHref, onChannelNavigate }),
               op.reply.messages.map((replyMsg, i) => /* @__PURE__ */ jsxRuntime.jsx(MessageView, { message: replyMsg, idx: `${idx}-reply-${i}` }, i))
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(BindingsSection, { bindings: op.bindings, title: "Operation Bindings" })
@@ -1676,48 +1774,9 @@ const replyTitleStyle = css.css({
   color: "var(--omnispec-fg-primary)",
   letterSpacing: "0.02em"
 });
-const replyMetaRowStyle = css.css({
-  display: "flex",
-  alignItems: "center",
-  gap: "0.5rem",
-  flexWrap: "wrap",
-  marginBottom: "0.5rem"
-});
-const replyMetaLabelStyle = css.css({
-  fontSize: "var(--omnispec-font-size-xs)",
-  fontWeight: 700,
-  color: "var(--omnispec-fg-primary)",
-  fontFamily: "var(--omnispec-font-mono)"
-});
-const replyMetaValueStyle = css.css({
-  fontFamily: "var(--omnispec-font-mono)",
-  fontSize: "var(--omnispec-font-size-xs)",
-  color: "var(--omnispec-fg-code)",
-  backgroundColor: "var(--omnispec-bg-tertiary)",
-  padding: "1px 0.375rem",
-  borderRadius: "0.1875rem"
-});
-const replyMetaDescStyle = css.css({
-  fontSize: "var(--omnispec-font-size-xs)",
-  color: "var(--omnispec-fg-secondary)"
-});
 
-const actionLabels = {
-  publish: "PUB",
-  subscribe: "SUB",
-  send: "SEND",
-  receive: "RECV"
-};
-const actionColors = {
-  publish: "var(--omnispec-color-publish)",
-  subscribe: "var(--omnispec-color-subscribe)",
-  send: "var(--omnispec-color-publish)",
-  receive: "var(--omnispec-color-subscribe)"
-};
-function ChannelReferenceDetail({ channel, id, expandAll, expandGeneration, onTagClick }) {
-  const primaryAction = channel.operations[0]?.action;
-  const primaryLabel = actionLabels[primaryAction] ?? primaryAction?.toUpperCase() ?? "";
-  const primaryColor = actionColors[primaryAction] ?? "var(--omnispec-fg-muted)";
+function ChannelReferenceDetail({ channel, id, expandAll, expandGeneration, onTagClick, activeTag, channelHref, onChannelNavigate }) {
+  const headerBadge = channelActionBadge(channel);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Collapsible.ExpandableCard,
     {
@@ -1727,23 +1786,32 @@ function ChannelReferenceDetail({ channel, id, expandAll, expandGeneration, onTa
       expandAll,
       expandGeneration,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Collapsible.MethodBar, { label: primaryLabel, path: channel.address, color: primaryColor }),
+        /* @__PURE__ */ jsxRuntime.jsx(Collapsible.MethodBar, { label: headerBadge.label, path: channel.address, color: headerBadge.color }),
         channel.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: channelMetaStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Collapsible.MarkdownRenderer, { content: channel.description }) }),
         channel.externalDocs && /* @__PURE__ */ jsxRuntime.jsx("div", { className: channelMetaStyle, children: /* @__PURE__ */ jsxRuntime.jsx(ExternalDocsLink, { externalDocs: channel.externalDocs, context: channel.address }) }),
         channel.operations.map((op, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { id: id ? `${id}-op-${idx}` : void 0, className: operationWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
           Collapsible.ReferenceLayout,
           {
             operationId: op.operationId ?? `${channel.name}-op-${idx}`,
-            schema: /* @__PURE__ */ jsxRuntime.jsx(
+            schema: /* @__PURE__ */ jsxRuntime.jsx("div", { className: refMobilePadStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
               OperationSchemaColumn,
               {
                 channel,
                 operation: op,
-                onTagClick
+                onTagClick,
+                activeTag
+              }
+            ) }),
+            samples: /* @__PURE__ */ jsxRuntime.jsx("div", { className: refMobilePadStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+              OperationSamplesColumn,
+              {
+                operation: op,
+                idx,
+                channelHref,
+                onChannelNavigate
               }
-            ),
-            samples: /* @__PURE__ */ jsxRuntime.jsx(OperationSamplesColumn, { operation: op, idx }),
-            tryIt: /* @__PURE__ */ jsxRuntime.jsx("div", { className: tryItNaStyle, children: "Interactive testing is not available for AsyncAPI protocols." })
+            ) }),
+            tryIt: /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(refMobilePadStyle, tryItNaStyle), children: "Interactive testing is not available for AsyncAPI protocols." })
           }
         ) }, idx))
       ]
@@ -1753,7 +1821,8 @@ function ChannelReferenceDetail({ channel, id, expandAll, expandGeneration, onTa
 function OperationSchemaColumn({
   channel,
   operation,
-  onTagClick
+  onTagClick,
+  activeTag
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: opHeaderStyle, children: [
@@ -1777,6 +1846,7 @@ function OperationSchemaColumn({
           type: "button",
           className: tagChipButtonStyle,
           title: tag.description,
+          "aria-pressed": tag.name === activeTag,
           onClick: () => onTagClick(tag.name),
           children: tag.name
         },
@@ -1821,10 +1891,11 @@ function OperationSchemaColumn({
     /* @__PURE__ */ jsxRuntime.jsx(BindingsSection, { bindings: channel.bindings, title: "Channel Bindings" })
   ] });
 }
-function OperationSamplesColumn({ operation, idx }) {
+function OperationSamplesColumn({ operation, idx, channelHref, onChannelNavigate }) {
   const messages = operation.messages ?? [];
-  const replyMessages = operation.reply?.messages ?? [];
-  if (messages.length === 0 && replyMessages.length === 0) {
+  const reply = operation.reply;
+  const hasReply = !!(reply && (reply.messages.length > 0 || reply.address || reply.channelName));
+  if (messages.length === 0 && !hasReply) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: emptySamplesStyle, children: "No message payload is defined for this operation." });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: samplesColumnStyle, children: [
@@ -1839,9 +1910,10 @@ function OperationSamplesColumn({ operation, idx }) {
       message.contentType && /* @__PURE__ */ jsxRuntime.jsx("code", { className: contentTypeStyle$1, children: message.contentType }),
       /* @__PURE__ */ jsxRuntime.jsx(MessagePayload, { message, idx: `${idx}-msg-${i}` })
     ] }, i)),
-    replyMessages.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: replyStyle, children: [
+    hasReply && reply && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: replyStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h4", { className: sectionTitleStyle, children: "Reply" }),
-      replyMessages.map((message, i) => /* @__PURE__ */ jsxRuntime.jsx(MessagePayload, { message, idx: `${idx}-reply-${i}` }, i))
+      /* @__PURE__ */ jsxRuntime.jsx(ReplyMeta, { reply, channelHref, onChannelNavigate }),
+      reply.messages.map((message, i) => /* @__PURE__ */ jsxRuntime.jsx(MessagePayload, { message, idx: `${idx}-reply-${i}` }, i))
     ] })
   ] });
 }
@@ -1851,6 +1923,9 @@ const channelMetaStyle = css.css({
     padding: "1rem 1.25rem 0"
   }
 });
+const refMobilePadStyle = css.css({
+  [useSpecFetcher.mq.mobile]: { paddingInline: "1rem" }
+});
 const operationWrapStyle = css.css({
   borderTop: "1px solid var(--omnispec-border-color)"
 });
@@ -1918,7 +1993,9 @@ const paramConstraintsStyle = css.css({
 const opHeaderStyle = css.css({
   display: "flex",
   alignItems: "center",
-  gap: "0.5rem",
+  flexWrap: "wrap",
+  gap: "0.25rem 0.5rem",
+  minWidth: 0,
   marginBottom: "0.5rem"
 });
 const actionBadgeBase = css.css({
@@ -1935,16 +2012,21 @@ const opIdStyle = css.css({
   fontSize: "var(--omnispec-font-size-sm)",
   fontWeight: 700,
   backgroundColor: "transparent",
-  padding: 0
+  padding: 0,
+  overflowWrap: "anywhere"
 });
 const opTitleStyle = css.css({
   fontSize: "var(--omnispec-font-size-sm)",
   fontWeight: 600,
-  color: "var(--omnispec-fg-primary)"
+  color: "var(--omnispec-fg-primary)",
+  overflowWrap: "anywhere"
 });
 const opSummaryStyle = css.css({
+  flexBasis: "100%",
+  minWidth: 0,
   fontSize: "var(--omnispec-font-size-sm)",
-  color: "var(--omnispec-fg-secondary)"
+  color: "var(--omnispec-fg-secondary)",
+  overflowWrap: "anywhere"
 });
 const messageTitleStyle = css.css({
   fontWeight: 400,
@@ -2394,17 +2476,39 @@ function AsyncApiSpec({
     setActiveTagFilter((prev) => {
       const next = prev === tagName ? null : tagName;
       setSearchQuery(next ?? "");
+      writeTagParam(next);
       return next;
     });
   }, []);
   const handleSearch = React.useCallback((query) => {
     setSearchQuery(query);
     setActiveTagFilter(null);
+    writeTagParam(null);
   }, []);
   const clearTagFilter = React.useCallback(() => {
     setActiveTagFilter(null);
     setSearchQuery("");
+    writeTagParam(null);
   }, []);
+  const availableTags = React.useMemo(() => {
+    const names = /* @__PURE__ */ new Set();
+    for (const tag of parsedSpec?.tags ?? []) names.add(tag.name);
+    for (const ch of parsedSpec?.channels ?? []) {
+      for (const tag of ch.tags ?? []) names.add(tag.name);
+      for (const op of ch.operations) for (const t of op.tags ?? []) names.add(t.name);
+    }
+    return names;
+  }, [parsedSpec]);
+  const didInitFromUrl = React.useRef(false);
+  React.useEffect(() => {
+    if (didInitFromUrl.current || !parsedSpec) return;
+    didInitFromUrl.current = true;
+    const urlTag = readTagParam();
+    if (urlTag && availableTags.has(urlTag)) {
+      setActiveTagFilter(urlTag);
+      setSearchQuery(urlTag);
+    }
+  }, [parsedSpec, availableTags]);
   React.useMemo(() => {
     if (parsedSpec && onSpecLoaded) {
       const major = parseInt(parsedSpec.specVersion.split(".")[0], 10);
@@ -2454,6 +2558,13 @@ function AsyncApiSpec({
     }
     return map;
   }, [filteredChannels, channelDomId]);
+  const channelHref = React.useCallback(
+    (channelName) => {
+      const domId = channelDomId.get(channelName);
+      return domId ? `#${domId}` : void 0;
+    },
+    [channelDomId]
+  );
   const hasOperations = React.useMemo(
     () => filteredChannels.some((ch) => ch.operations.length > 0),
     [filteredChannels]
@@ -2538,6 +2649,10 @@ function AsyncApiSpec({
     }
     navigateTo(id);
   }, [navigateTo, opToCard]);
+  const onChannelNavigate = React.useCallback((channelName) => {
+    const domId = channelDomId.get(channelName);
+    if (domId) navigateTo(domId);
+  }, [channelDomId, navigateTo]);
   const navSectionIds = React.useMemo(() => Collapsible.flattenNavItemIds(navItems), [navItems]);
   const activeSection = Collapsible.useScrollSpy(navSectionIds);
   if (state.status === "loading") {
@@ -2563,7 +2678,7 @@ function AsyncApiSpec({
     /* @__PURE__ */ jsxRuntime.jsx(
       Collapsible.SearchBar,
       {
-        placeholder: "Filter channels...",
+        placeholder: navGrouping === "operation" ? "Filter operations..." : "Filter channels...",
         onSearch: handleSearch,
         value: searchQuery
       }
@@ -2658,7 +2773,10 @@ function AsyncApiSpec({
                 displayMode: resolvedDisplayMode,
                 expandAll: allExpanded,
                 expandGeneration,
-                onTagClick: handleTagFilter
+                onTagClick: handleTagFilter,
+                activeTag: activeTagFilter,
+                channelHref,
+                onChannelNavigate
               },
               `${group.id}-${channel.name}`
             ))
@@ -2670,7 +2788,10 @@ function AsyncApiSpec({
               displayMode: resolvedDisplayMode,
               expandAll: allExpanded,
               expandGeneration,
-              onTagClick: handleTagFilter
+              onTagClick: handleTagFilter,
+              activeTag: activeTagFilter,
+              channelHref,
+              onChannelNavigate
             },
             channel.name
           ))
@@ -2687,7 +2808,10 @@ function ChannelCard({
   displayMode,
   expandAll,
   expandGeneration,
-  onTagClick
+  onTagClick,
+  activeTag,
+  channelHref,
+  onChannelNavigate
 }) {
   const Renderer = displayMode === "reference" ? ChannelReferenceDetail : ChannelDetail;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2697,10 +2821,31 @@ function ChannelCard({
       channel,
       expandAll,
       expandGeneration,
-      onTagClick
+      onTagClick,
+      activeTag,
+      channelHref,
+      onChannelNavigate
     }
   );
 }
+const TAG_PARAM = "omnispec-tag";
+function readTagParam() {
+  if (typeof window === "undefined") return null;
+  return new URLSearchParams(window.location.search).get(TAG_PARAM);
+}
+function writeTagParam(tag) {
+  if (typeof window === "undefined") return;
+  const params = new URLSearchParams(window.location.search);
+  if (params.get(TAG_PARAM) === (tag ?? null)) return;
+  if (tag) params.set(TAG_PARAM, tag);
+  else params.delete(TAG_PARAM);
+  const query = params.toString();
+  window.history.replaceState(
+    window.history.state,
+    "",
+    `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`
+  );
+}
 function nestByTagGroups(groups, xTagGroups, toNav) {
   if (!xTagGroups?.length) return groups.map(toNav);
   const byTagName = /* @__PURE__ */ new Map();
@@ -2821,4 +2966,4 @@ const activeFilterClearStyle = css.css({
 });
 
 exports.AsyncApiSpec = AsyncApiSpec;
-//# sourceMappingURL=AsyncApiSpec-B-RGmOUL.js.map
+//# sourceMappingURL=AsyncApiSpec-g7Htcn89.js.map