@compose-market/theme 0.0.94 → 0.0.96

package/dist/agents/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const agentsCss = "/**\n * Compose.Market Agent Card\n * @compose-market/theme/css/agents\n */\n\n.cm-agent-card {\n  container-type: inline-size;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  gap: 0.85rem;\n  border-radius: 14px;\n  border: 1px solid hsl(var(--primary) / 0.18);\n  background:\n    linear-gradient(145deg, hsl(226 21% 23% / 0.42), hsl(221 50% 9% / 0.32)),\n    radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.08), transparent 34%),\n    hsl(224 36% 13% / 0.24);\n  box-shadow:\n    0 0 34px hsl(var(--primary) / 0.055),\n    inset 0 1px 0 hsl(0 0% 100% / 0.06);\n  overflow: hidden;\n  backdrop-filter: blur(16px) saturate(1.12);\n}\n\n.cm-agent-card--interactive {\n  transition:\n    transform 180ms ease,\n    border-color 180ms ease,\n    box-shadow 180ms ease;\n}\n\n.cm-agent-card--interactive:hover {\n  transform: translateY(-2px);\n  border-color: hsl(var(--primary) / 0.45);\n  box-shadow:\n    0 18px 36px hsl(240 30% 2% / 0.32),\n    0 0 24px hsl(var(--primary) / 0.14),\n    inset 0 1px 0 hsl(0 0% 100% / 0.05);\n}\n\n.cm-agent-card--running {\n  border-color: hsl(142 71% 45% / 0.48);\n  box-shadow:\n    0 10px 30px hsl(142 71% 45% / 0.08),\n    0 0 24px hsl(142 71% 45% / 0.12),\n    inset 0 1px 0 hsl(0 0% 100% / 0.05);\n}\n\n.cm-agent-card__main {\n  display: grid;\n  gap: 0.9rem;\n  padding: 1rem;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.cm-agent-card__header {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.cm-agent-card__avatar {\n  width: 3.5rem;\n  height: 3.5rem;\n  border-radius: max(var(--radius, 0.25rem), 0.35rem);\n  border: 1px solid hsl(var(--primary) / 0.28);\n  background:\n    linear-gradient(180deg, hsl(var(--background) / 0.92), hsl(var(--muted) / 0.34));\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  overflow: hidden;\n  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.08);\n}\n\n.cm-agent-card__avatar-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.cm-agent-card__avatar-fallback {\n  font-family: var(--font-mono), monospace;\n  color: hsl(var(--primary));\n  font-size: 0.88rem;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__copy {\n  display: grid;\n  gap: 0.5rem;\n  min-width: 0;\n  max-width: 100%;\n  flex: 1;\n}\n\n.cm-agent-card__title-row {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.6rem;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.cm-agent-card__title {\n  font-family: var(--font-display), sans-serif;\n  font-size: 1.05rem;\n  line-height: 1.1;\n  color: hsl(var(--foreground));\n  min-width: 0;\n  max-width: 100%;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__header-action {\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.cm-agent-card__description {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.84rem;\n  line-height: 1.48;\n  max-width: 100%;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__badges,\n.cm-agent-card__tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.45rem;\n}\n\n.cm-agent-card__badge,\n.cm-agent-card__tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  min-height: 1.7rem;\n  padding: 0 0.7rem;\n  border-radius: 999px;\n  border: 1px solid hsl(var(--border) / 0.72);\n  background: hsl(var(--muted) / 0.28);\n  color: hsl(var(--muted-foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.64rem;\n  letter-spacing: 0.08em;\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__badge-icon {\n  display: inline-flex;\n  align-items: center;\n}\n\n.cm-agent-card__badge[data-tone=\"cyan\"],\n.cm-agent-card__tag {\n  border-color: hsl(var(--primary) / 0.28);\n  background: hsl(var(--primary) / 0.12);\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__badge[data-tone=\"green\"] {\n  border-color: hsl(142 71% 45% / 0.28);\n  background: hsl(142 71% 45% / 0.12);\n  color: hsl(142 71% 45%);\n}\n\n.cm-agent-card__badge[data-tone=\"fuchsia\"] {\n  border-color: hsl(292 85% 55% / 0.28);\n  background: hsl(292 85% 55% / 0.12);\n  color: hsl(292 85% 55%);\n}\n\n.cm-agent-card__badge[data-tone=\"warning\"] {\n  border-color: hsl(42 100% 48% / 0.28);\n  background: hsl(42 100% 48% / 0.12);\n  color: hsl(42 100% 48%);\n}\n\n.cm-agent-card__badge[data-tone=\"danger\"] {\n  border-color: hsl(var(--destructive) / 0.28);\n  background: hsl(var(--destructive) / 0.12);\n  color: hsl(var(--destructive));\n}\n\n.cm-agent-card__metrics {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(8.7rem, 1fr));\n  gap: 0.6rem;\n}\n\n.cm-agent-card__metric {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 0.6rem;\n  align-items: center;\n  padding: 0.72rem 0.8rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border) / 0.65);\n  background: hsl(var(--background) / 0.5);\n}\n\n.cm-agent-card__metric-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__metric-copy {\n  display: grid;\n  gap: 0.14rem;\n  min-width: 0;\n}\n\n.cm-agent-card__metric-label,\n.cm-agent-card__focus-label,\n.cm-agent-card__tags-title,\n.cm-agent-card__meta-label {\n  color: hsl(var(--muted-foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.62rem;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__metric-value,\n.cm-agent-card__focus-value,\n.cm-agent-card__meta-value {\n  color: hsl(var(--foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.8rem;\n  line-height: 1.2;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__metric[data-tone=\"green\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"green\"] .cm-agent-card__metric-value {\n  color: hsl(142 71% 45%);\n}\n\n.cm-agent-card__metric[data-tone=\"cyan\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"cyan\"] .cm-agent-card__metric-value {\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__metric[data-tone=\"fuchsia\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"fuchsia\"] .cm-agent-card__metric-value {\n  color: hsl(292 85% 55%);\n}\n\n.cm-agent-card__metric[data-tone=\"warning\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"warning\"] .cm-agent-card__metric-value {\n  color: hsl(42 100% 48%);\n}\n\n.cm-agent-card__metric[data-tone=\"danger\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"danger\"] .cm-agent-card__metric-value {\n  color: hsl(var(--destructive));\n}\n\n.cm-agent-card__focus {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 0.7rem;\n  align-items: center;\n  padding: 0.85rem 0.95rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border) / 0.72);\n  background:\n    linear-gradient(135deg, hsl(var(--primary) / 0.11), transparent 68%);\n}\n\n.cm-agent-card__focus-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__focus-copy,\n.cm-agent-card__tags-block {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.cm-agent-card__meta {\n  display: grid;\n  gap: 0.55rem;\n}\n\n.cm-agent-card__meta-row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n.cm-agent-card__footer {\n  padding-top: 0.9rem;\n  border-top: 1px solid hsl(var(--border) / 0.55);\n}\n\n.cm-agent-card__footer-stack {\n  display: grid;\n  gap: 0.8rem;\n}\n\n.cm-agent-card__endpoint,\n.cm-agent-card__creator {\n  display: grid;\n  gap: 0.45rem;\n}\n\n.cm-agent-card__endpoint-label,\n.cm-agent-card__creator-label {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.68rem;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__endpoint-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: 0.6rem;\n  align-items: center;\n  padding: 0.65rem 0.75rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border) / 0.65);\n  background: hsl(var(--background) / 0.42);\n}\n\n.cm-agent-card__endpoint-code,\n.cm-agent-card__creator-value {\n  color: hsl(var(--primary));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.78rem;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__creator-value {\n  color: hsl(292 85% 55%);\n}\n\n.cm-agent-card__footer-link {\n  color: hsl(var(--primary));\n  font-size: 0.82rem;\n  font-weight: 600;\n  text-decoration: none;\n}\n\n.cm-agent-card__footer-link:hover {\n  text-decoration: underline;\n}\n\n.cm-agent-card--match-chat {\n  height: 100%;\n  min-height: 0;\n}\n\n.cm-agent-card--match-chat > .cm-agent-card__main {\n  height: 100%;\n  min-height: 0;\n  align-content: start;\n  overflow-y: auto;\n}\n\n.cm-agent-card__metric,\n.cm-agent-card__metric-copy,\n.cm-agent-card__focus,\n.cm-agent-card__focus-copy,\n.cm-agent-card__tags-block,\n.cm-agent-card__footer,\n.cm-agent-card__footer-stack,\n.cm-agent-card__endpoint,\n.cm-agent-card__creator {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.cm-agent-card__metric-value,\n.cm-agent-card__focus-value,\n.cm-agent-card__meta-value,\n.cm-agent-card__endpoint-code,\n.cm-agent-card__creator-value {\n  max-width: 100%;\n  min-width: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n\n.cm-agent-card__identity {\n  display: grid;\n  gap: 0.32rem;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.cm-agent-card__identity-head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.45rem;\n  min-width: 0;\n  max-width: 100%;\n  flex-wrap: wrap;\n}\n\n.cm-agent-card__identity-name {\n  min-width: 0;\n  max-width: 100%;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__identity-address {\n  color: hsl(var(--muted-foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.68rem;\n  font-weight: 500;\n  line-height: 1.1;\n}\n\n.cm-agent-card__model {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.28rem;\n  width: fit-content;\n  max-width: 100%;\n  padding: 0.16rem 0.44rem;\n  border: 1px solid hsl(var(--primary) / 0.3);\n  border-radius: 999px;\n  background: hsl(var(--primary) / 0.06);\n  color: hsl(var(--foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.66rem;\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.cm-agent-card__model svg {\n  width: 0.68rem;\n  height: 0.68rem;\n  flex-shrink: 0;\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__model-name {\n  min-width: 0;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.cm-agent-card__badge,\n.cm-agent-card__tag {\n  max-width: 100%;\n  min-width: 0;\n  height: auto;\n  padding-top: 0.35rem;\n  padding-bottom: 0.35rem;\n  line-height: 1.2;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__endpoint-row {\n  min-width: 0;\n  max-width: 100%;\n  cursor: pointer;\n  text-align: left;\n}\n\n.cm-agent-card__endpoint-row:focus-visible {\n  outline: 2px solid hsl(var(--primary) / 0.75);\n  outline-offset: 2px;\n}\n\n.cm-agent-card__actions {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.55rem;\n  padding: 1rem 1rem 1rem 0;\n}\n\n.cm-agent-card__action-stack {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.55rem;\n  flex-wrap: wrap;\n}\n\n.cm-agent-card--skeleton {\n  pointer-events: none;\n}\n\n.cm-agent-card__skeleton {\n  border-radius: var(--radius, 0.25rem);\n  background: linear-gradient(90deg, hsl(var(--muted) / 0.55), hsl(var(--muted) / 0.8), hsl(var(--muted) / 0.55));\n  background-size: 220% 100%;\n  animation: cm-agent-card-shimmer 1.6s linear infinite;\n}\n\n.cm-agent-card__skeleton--avatar {\n  width: 3.5rem;\n  height: 3.5rem;\n  border-radius: max(var(--radius, 0.25rem), 0.35rem);\n}\n\n.cm-agent-card__skeleton--title {\n  height: 1.1rem;\n  width: 10rem;\n}\n\n.cm-agent-card__skeleton--line {\n  height: 0.82rem;\n  width: 100%;\n}\n\n.cm-agent-card__skeleton--line.short {\n  width: 76%;\n}\n\n.cm-agent-card__skeleton--metric {\n  min-height: 4.4rem;\n}\n\n.cm-agent-card__skeleton--focus {\n  min-height: 4.3rem;\n}\n\n.cm-agent-card__skeleton--tags {\n  min-height: 5.6rem;\n}\n\n.cm-agent-card__skeleton--footer {\n  min-height: 4.2rem;\n}\n\n@keyframes cm-agent-card-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n@media (max-width: 720px) {\n  .cm-agent-card__main {\n    gap: 0.65rem;\n    padding: 0.85rem;\n  }\n\n  .cm-agent-card__avatar {\n    width: 2.5rem;\n    height: 2.5rem;\n  }\n\n  .cm-agent-card__title {\n    font-size: 0.92rem;\n  }\n\n  .cm-agent-card__description {\n    font-size: 0.78rem;\n    line-height: 1.4;\n  }\n\n  .cm-agent-card__metrics {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .cm-agent-card__metric {\n    padding: 0.55rem 0.7rem;\n  }\n\n  .cm-agent-card__focus {\n    padding: 0.7rem 0.8rem;\n  }\n\n  .cm-agent-card__badges,\n  .cm-agent-card__tags {\n    gap: 0.3rem;\n  }\n\n  .cm-agent-card__badge,\n  .cm-agent-card__tag {\n    min-height: 1.45rem;\n    padding: 0 0.5rem;\n    font-size: 0.65rem;\n  }\n\n  .cm-agent-card__endpoint-code,\n  .cm-agent-card__creator-value {\n    font-size: 0.68rem;\n  }\n\n  .cm-agent-card__actions {\n    padding: 0 0.85rem 0.85rem;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n  }\n}\n\n@container (max-width: 26rem) {\n  .cm-agent-card__metrics {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .cm-agent-card__header {\n    gap: 0.7rem;\n  }\n\n  .cm-agent-card__avatar {\n    width: 2.75rem;\n    height: 2.75rem;\n  }\n}\n\n@container (max-width: 21rem) {\n  .cm-agent-card__endpoint-row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n";
+export declare const agentsCss = "/**\n * Compose.Market Agent Card\n * @compose-market/theme/css/agents\n */\n\n.cm-agent-card {\n  container-type: inline-size;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  gap: 0.85rem;\n  border-radius: 14px;\n  border: 1px solid hsl(var(--primary) / 0.18);\n  background:\n    linear-gradient(145deg, hsl(226 21% 23% / 0.42), hsl(221 50% 9% / 0.32)),\n    radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.08), transparent 34%),\n    hsl(224 36% 13% / 0.24);\n  box-shadow:\n    0 0 34px hsl(var(--primary) / 0.055),\n    inset 0 1px 0 hsl(0 0% 100% / 0.06);\n  overflow: hidden;\n  backdrop-filter: blur(16px) saturate(1.12);\n}\n\n.cm-agent-card--interactive {\n  cursor: pointer;\n  transition:\n    transform 180ms ease,\n    border-color 180ms ease,\n    box-shadow 180ms ease;\n}\n\n.cm-agent-card--interactive:hover {\n  transform: translateY(-2px);\n  border-color: hsl(var(--primary) / 0.45);\n  box-shadow:\n    0 18px 36px hsl(240 30% 2% / 0.32),\n    0 0 24px hsl(var(--primary) / 0.14),\n    inset 0 1px 0 hsl(0 0% 100% / 0.05);\n}\n\n.cm-agent-card--interactive:focus-visible {\n  outline: 2px solid hsl(var(--primary) / 0.72);\n  outline-offset: 3px;\n}\n\n.cm-agent-card--running {\n  border-color: hsl(142 71% 45% / 0.48);\n  box-shadow:\n    0 10px 30px hsl(142 71% 45% / 0.08),\n    0 0 24px hsl(142 71% 45% / 0.12),\n    inset 0 1px 0 hsl(0 0% 100% / 0.05);\n}\n\n.cm-agent-card__main {\n  display: grid;\n  gap: 0.9rem;\n  padding: 1rem;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.cm-agent-card__header {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.cm-agent-card__avatar {\n  width: 3.5rem;\n  height: 3.5rem;\n  border-radius: max(var(--radius, 0.25rem), 0.35rem);\n  border: 1px solid hsl(var(--primary) / 0.28);\n  background:\n    linear-gradient(180deg, hsl(var(--background) / 0.92), hsl(var(--muted) / 0.34));\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  overflow: hidden;\n  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.08);\n}\n\n.cm-agent-card__avatar-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.cm-agent-card__avatar-fallback {\n  font-family: var(--font-mono), monospace;\n  color: hsl(var(--primary));\n  font-size: 0.88rem;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__copy {\n  display: grid;\n  gap: 0.5rem;\n  min-width: 0;\n  max-width: 100%;\n  flex: 1;\n}\n\n.cm-agent-card__title-row {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.6rem;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.cm-agent-card__title {\n  font-family: var(--font-display), sans-serif;\n  font-size: 1.05rem;\n  line-height: 1.1;\n  color: hsl(var(--foreground));\n  min-width: 0;\n  max-width: 100%;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__header-action {\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.cm-agent-card__description {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.84rem;\n  line-height: 1.48;\n  max-width: 100%;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__badges,\n.cm-agent-card__tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.45rem;\n}\n\n.cm-agent-card__badge,\n.cm-agent-card__tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  min-height: 1.7rem;\n  padding: 0 0.7rem;\n  border-radius: 999px;\n  border: 1px solid hsl(var(--border) / 0.72);\n  background: hsl(var(--muted) / 0.28);\n  color: hsl(var(--muted-foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.64rem;\n  letter-spacing: 0.08em;\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__badge-icon {\n  display: inline-flex;\n  align-items: center;\n}\n\n.cm-agent-card__badge[data-tone=\"cyan\"],\n.cm-agent-card__tag {\n  border-color: hsl(var(--primary) / 0.28);\n  background: hsl(var(--primary) / 0.12);\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__badge[data-tone=\"green\"] {\n  border-color: hsl(142 71% 45% / 0.28);\n  background: hsl(142 71% 45% / 0.12);\n  color: hsl(142 71% 45%);\n}\n\n.cm-agent-card__badge[data-tone=\"fuchsia\"] {\n  border-color: hsl(292 85% 55% / 0.28);\n  background: hsl(292 85% 55% / 0.12);\n  color: hsl(292 85% 55%);\n}\n\n.cm-agent-card__badge[data-tone=\"warning\"] {\n  border-color: hsl(42 100% 48% / 0.28);\n  background: hsl(42 100% 48% / 0.12);\n  color: hsl(42 100% 48%);\n}\n\n.cm-agent-card__badge[data-tone=\"danger\"] {\n  border-color: hsl(var(--destructive) / 0.28);\n  background: hsl(var(--destructive) / 0.12);\n  color: hsl(var(--destructive));\n}\n\n.cm-agent-card__metrics {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(8.7rem, 1fr));\n  gap: 0.6rem;\n}\n\n.cm-agent-card__metric {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 0.6rem;\n  align-items: center;\n  padding: 0.72rem 0.8rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border) / 0.65);\n  background: hsl(var(--background) / 0.5);\n}\n\n.cm-agent-card__metric-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__metric-copy {\n  display: grid;\n  gap: 0.14rem;\n  min-width: 0;\n}\n\n.cm-agent-card__metric-label,\n.cm-agent-card__focus-label,\n.cm-agent-card__tags-title,\n.cm-agent-card__meta-label {\n  color: hsl(var(--muted-foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.62rem;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__metric-value,\n.cm-agent-card__focus-value,\n.cm-agent-card__meta-value {\n  color: hsl(var(--foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.8rem;\n  line-height: 1.2;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__metric[data-tone=\"green\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"green\"] .cm-agent-card__metric-value {\n  color: hsl(142 71% 45%);\n}\n\n.cm-agent-card__metric[data-tone=\"cyan\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"cyan\"] .cm-agent-card__metric-value {\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__metric[data-tone=\"fuchsia\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"fuchsia\"] .cm-agent-card__metric-value {\n  color: hsl(292 85% 55%);\n}\n\n.cm-agent-card__metric[data-tone=\"warning\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"warning\"] .cm-agent-card__metric-value {\n  color: hsl(42 100% 48%);\n}\n\n.cm-agent-card__metric[data-tone=\"danger\"] .cm-agent-card__metric-icon,\n.cm-agent-card__metric[data-tone=\"danger\"] .cm-agent-card__metric-value {\n  color: hsl(var(--destructive));\n}\n\n.cm-agent-card__focus {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 0.7rem;\n  align-items: center;\n  padding: 0.85rem 0.95rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border) / 0.72);\n  background:\n    linear-gradient(135deg, hsl(var(--primary) / 0.11), transparent 68%);\n}\n\n.cm-agent-card__focus-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__focus-copy,\n.cm-agent-card__tags-block {\n  display: grid;\n  gap: 0.35rem;\n}\n\n.cm-agent-card__meta {\n  display: grid;\n  gap: 0.55rem;\n}\n\n.cm-agent-card__meta-row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n.cm-agent-card__footer {\n  padding-top: 0.9rem;\n  border-top: 1px solid hsl(var(--border) / 0.55);\n}\n\n.cm-agent-card__footer-stack {\n  display: grid;\n  gap: 0.8rem;\n}\n\n.cm-agent-card__endpoint,\n.cm-agent-card__creator {\n  display: grid;\n  gap: 0.45rem;\n}\n\n.cm-agent-card__endpoint-label,\n.cm-agent-card__creator-label {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.68rem;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n.cm-agent-card__endpoint-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: 0.6rem;\n  align-items: center;\n  padding: 0.65rem 0.75rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border) / 0.65);\n  background: hsl(var(--background) / 0.42);\n}\n\n.cm-agent-card__endpoint-code,\n.cm-agent-card__creator-value {\n  color: hsl(var(--primary));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.78rem;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__creator-value {\n  color: hsl(292 85% 55%);\n}\n\n.cm-agent-card__footer-link {\n  color: hsl(var(--primary));\n  font-size: 0.82rem;\n  font-weight: 600;\n  text-decoration: none;\n}\n\n.cm-agent-card__footer-link:hover {\n  text-decoration: underline;\n}\n\n.cm-agent-card--match-chat {\n  height: 100%;\n  min-height: 0;\n}\n\n.cm-agent-card--match-chat > .cm-agent-card__main {\n  height: 100%;\n  min-height: 0;\n  align-content: start;\n  overflow: hidden;\n}\n\n.cm-agent-card--market {\n  height: var(--cm-market-card-height, clamp(12.5rem, 24vw, 20rem));\n  min-height: 0;\n}\n\n.cm-agent-card--market > .cm-agent-card__main {\n  height: 100%;\n  min-height: 0;\n  gap: clamp(0.34rem, 1.1cqi, 0.54rem);\n  padding: clamp(0.58rem, 1.35cqi, 0.78rem);\n  align-content: start;\n  overflow: hidden;\n}\n\n.cm-agent-card--market .cm-agent-card__header {\n  gap: 0.62rem;\n  align-items: flex-start;\n}\n\n.cm-agent-card--market .cm-agent-card__avatar {\n  width: clamp(2.05rem, 9cqi, 2.55rem);\n  height: clamp(2.05rem, 9cqi, 2.55rem);\n}\n\n.cm-agent-card--market .cm-agent-card__copy {\n  gap: 0.28rem;\n}\n\n.cm-agent-card--market .cm-agent-card__title {\n  font-size: clamp(0.82rem, 3.2cqi, 0.98rem);\n  line-height: 1.08;\n}\n\n.cm-agent-card--market .cm-agent-card__identity {\n  gap: 0.22rem;\n}\n\n.cm-agent-card--market .cm-agent-card__identity-head {\n  flex-wrap: nowrap;\n}\n\n.cm-agent-card--market .cm-agent-card__identity-name,\n.cm-agent-card--market .cm-agent-card__identity-address,\n.cm-agent-card--market .cm-agent-card__model-name,\n.cm-agent-card--market .cm-agent-card__metric-value,\n.cm-agent-card--market .cm-agent-card__endpoint-code,\n.cm-agent-card--market .cm-agent-card__creator-value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow-wrap: normal;\n  word-break: normal;\n}\n\n.cm-agent-card--market .cm-agent-card__model {\n  max-width: 100%;\n  padding-block: 0.12rem;\n  font-size: clamp(0.55rem, 2.1cqi, 0.63rem);\n}\n\n.cm-agent-card--market .cm-agent-card__description {\n  display: -webkit-box;\n  min-height: calc(2 * 1.28em);\n  max-height: calc(2 * 1.28em);\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  font-size: clamp(0.66rem, 2.35cqi, 0.74rem);\n  line-height: 1.28;\n}\n\n.cm-agent-card--market .cm-agent-card__badges,\n.cm-agent-card--market .cm-agent-card__tags {\n  max-height: clamp(1.48rem, 5.5cqi, 1.7rem);\n  gap: 0.28rem;\n  overflow: hidden;\n}\n\n.cm-agent-card--market .cm-agent-card__badge,\n.cm-agent-card--market .cm-agent-card__tag {\n  min-height: clamp(1.25rem, 4.9cqi, 1.5rem);\n  padding: 0 0.42rem;\n  font-size: clamp(0.5rem, 1.9cqi, 0.58rem);\n  letter-spacing: 0.06em;\n  white-space: nowrap;\n}\n\n.cm-agent-card--market .cm-agent-card__metrics {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 0.32rem;\n}\n\n.cm-agent-card--market .cm-agent-card__metric {\n  min-width: 0;\n  min-height: clamp(2.05rem, 7.5cqi, 2.45rem);\n  gap: 0.32rem;\n  padding: 0.32rem 0.42rem;\n  border-color: hsl(var(--primary) / 0.13);\n  background: hsl(221 50% 9% / 0.32);\n}\n\n.cm-agent-card--market .cm-agent-card__metric-icon svg {\n  width: 0.74rem;\n  height: 0.74rem;\n}\n\n.cm-agent-card--market .cm-agent-card__metric-label {\n  font-size: clamp(0.46rem, 1.6cqi, 0.52rem);\n  letter-spacing: 0.08em;\n}\n\n.cm-agent-card--market .cm-agent-card__metric-value {\n  font-size: clamp(0.58rem, 2.05cqi, 0.68rem);\n}\n\n.cm-agent-card--market .cm-agent-card__tags-block {\n  gap: 0.22rem;\n  min-height: clamp(1.55rem, 6cqi, 1.85rem);\n}\n\n.cm-agent-card--market .cm-agent-card__tags-title {\n  display: none;\n}\n\n.cm-agent-card--market .cm-agent-card__footer {\n  padding-top: 0.38rem;\n}\n\n.cm-agent-card--market .cm-agent-card__footer-stack {\n  grid-template-columns: minmax(0, 1fr) minmax(4rem, auto);\n  align-items: center;\n  gap: 0.42rem;\n}\n\n.cm-agent-card--market .cm-agent-card__endpoint,\n.cm-agent-card--market .cm-agent-card__creator {\n  gap: 0;\n  min-width: 0;\n}\n\n.cm-agent-card--market .cm-agent-card__endpoint-label,\n.cm-agent-card--market .cm-agent-card__creator-label {\n  display: none;\n}\n\n.cm-agent-card--market .cm-agent-card__endpoint-row {\n  min-height: 1.72rem;\n  padding: 0.22rem 0.34rem 0.22rem 0.48rem;\n  gap: 0.25rem;\n  border-color: hsl(var(--primary) / 0.12);\n}\n\n.cm-agent-card--market .cm-agent-card__creator-value,\n.cm-agent-card--market .cm-agent-card__endpoint-code {\n  font-size: clamp(0.55rem, 1.85cqi, 0.62rem);\n}\n\n.cm-agent-card--market .cm-agent-card__creator-value {\n  display: block;\n  text-align: right;\n}\n\n.cm-agent-card__metric,\n.cm-agent-card__metric-copy,\n.cm-agent-card__focus,\n.cm-agent-card__focus-copy,\n.cm-agent-card__tags-block,\n.cm-agent-card__footer,\n.cm-agent-card__footer-stack,\n.cm-agent-card__endpoint,\n.cm-agent-card__creator {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.cm-agent-card__metric-value,\n.cm-agent-card__focus-value,\n.cm-agent-card__meta-value,\n.cm-agent-card__endpoint-code,\n.cm-agent-card__creator-value {\n  max-width: 100%;\n  min-width: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n\n.cm-agent-card__identity {\n  display: grid;\n  gap: 0.32rem;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.cm-agent-card__identity-head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.45rem;\n  min-width: 0;\n  max-width: 100%;\n  flex-wrap: wrap;\n}\n\n.cm-agent-card__identity-name {\n  min-width: 0;\n  max-width: 100%;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__identity-address {\n  color: hsl(var(--muted-foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.68rem;\n  font-weight: 500;\n  line-height: 1.1;\n}\n\n.cm-agent-card__model {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.28rem;\n  width: fit-content;\n  max-width: 100%;\n  padding: 0.16rem 0.44rem;\n  border: 1px solid hsl(var(--primary) / 0.3);\n  border-radius: 999px;\n  background: hsl(var(--primary) / 0.06);\n  color: hsl(var(--foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.66rem;\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.cm-agent-card__model svg {\n  width: 0.68rem;\n  height: 0.68rem;\n  flex-shrink: 0;\n  color: hsl(var(--primary));\n}\n\n.cm-agent-card__model-name {\n  min-width: 0;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.cm-agent-card__badge,\n.cm-agent-card__tag {\n  max-width: 100%;\n  min-width: 0;\n  height: auto;\n  padding-top: 0.35rem;\n  padding-bottom: 0.35rem;\n  line-height: 1.2;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.cm-agent-card__endpoint-row {\n  min-width: 0;\n  max-width: 100%;\n  cursor: pointer;\n  text-align: left;\n}\n\n.cm-agent-card__endpoint-row:focus-visible {\n  outline: 2px solid hsl(var(--primary) / 0.75);\n  outline-offset: 2px;\n}\n\n.cm-agent-card__actions {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.55rem;\n  padding: 1rem 1rem 1rem 0;\n}\n\n.cm-agent-card__action-stack {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.55rem;\n  flex-wrap: wrap;\n}\n\n.cm-agent-card--skeleton {\n  pointer-events: none;\n}\n\n.cm-agent-card__skeleton {\n  border-radius: var(--radius, 0.25rem);\n  background: linear-gradient(90deg, hsl(var(--muted) / 0.55), hsl(var(--muted) / 0.8), hsl(var(--muted) / 0.55));\n  background-size: 220% 100%;\n  animation: cm-agent-card-shimmer 1.6s linear infinite;\n}\n\n.cm-agent-card__skeleton--avatar {\n  width: 3.5rem;\n  height: 3.5rem;\n  border-radius: max(var(--radius, 0.25rem), 0.35rem);\n}\n\n.cm-agent-card__skeleton--title {\n  height: 1.1rem;\n  width: 10rem;\n}\n\n.cm-agent-card__skeleton--line {\n  height: 0.82rem;\n  width: 100%;\n}\n\n.cm-agent-card__skeleton--line.short {\n  width: 76%;\n}\n\n.cm-agent-card__skeleton--metric {\n  min-height: 4.4rem;\n}\n\n.cm-agent-card__skeleton--focus {\n  min-height: 4.3rem;\n}\n\n.cm-agent-card__skeleton--tags {\n  min-height: 5.6rem;\n}\n\n.cm-agent-card__skeleton--footer {\n  min-height: 4.2rem;\n}\n\n@keyframes cm-agent-card-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n@media (max-width: 720px) {\n  .cm-agent-card__main {\n    gap: 0.65rem;\n    padding: 0.85rem;\n  }\n\n  .cm-agent-card__avatar {\n    width: 2.5rem;\n    height: 2.5rem;\n  }\n\n  .cm-agent-card__title {\n    font-size: 0.92rem;\n  }\n\n  .cm-agent-card__description {\n    font-size: 0.78rem;\n    line-height: 1.4;\n  }\n\n  .cm-agent-card__metrics {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .cm-agent-card__metric {\n    padding: 0.55rem 0.7rem;\n  }\n\n  .cm-agent-card__focus {\n    padding: 0.7rem 0.8rem;\n  }\n\n  .cm-agent-card__badges,\n  .cm-agent-card__tags {\n    gap: 0.3rem;\n  }\n\n  .cm-agent-card__badge,\n  .cm-agent-card__tag {\n    min-height: 1.45rem;\n    padding: 0 0.5rem;\n    font-size: 0.65rem;\n  }\n\n  .cm-agent-card__endpoint-code,\n  .cm-agent-card__creator-value {\n    font-size: 0.68rem;\n  }\n\n  .cm-agent-card__actions {\n    padding: 0 0.85rem 0.85rem;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n  }\n}\n\n@container (max-width: 26rem) {\n  .cm-agent-card__metrics {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .cm-agent-card__header {\n    gap: 0.7rem;\n  }\n\n  .cm-agent-card__avatar {\n    width: 2.75rem;\n    height: 2.75rem;\n  }\n}\n\n@container (max-width: 21rem) {\n  .cm-agent-card__endpoint-row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n";
 //# sourceMappingURL=styles.d.ts.map

package/dist/agents/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/agents/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,8hbA6nBrB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/agents/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,6ujBAqyBrB,CAAC"}

package/dist/agents/styles.js

@@ -25,6 +25,7 @@ export const agentsCss = `/**
 }
 
 .cm-agent-card--interactive {
+  cursor: pointer;
   transition:
     transform 180ms ease,
     border-color 180ms ease,
@@ -40,6 +41,11 @@ export const agentsCss = `/**
     inset 0 1px 0 hsl(0 0% 100% / 0.05);
 }
 
+.cm-agent-card--interactive:focus-visible {
+  outline: 2px solid hsl(var(--primary) / 0.72);
+  outline-offset: 3px;
+}
+
 .cm-agent-card--running {
   border-color: hsl(142 71% 45% / 0.48);
   box-shadow:
@@ -374,7 +380,169 @@ export const agentsCss = `/**
   height: 100%;
   min-height: 0;
   align-content: start;
-  overflow-y: auto;
+  overflow: hidden;
+}
+
+.cm-agent-card--market {
+  height: var(--cm-market-card-height, clamp(12.5rem, 24vw, 20rem));
+  min-height: 0;
+}
+
+.cm-agent-card--market > .cm-agent-card__main {
+  height: 100%;
+  min-height: 0;
+  gap: clamp(0.34rem, 1.1cqi, 0.54rem);
+  padding: clamp(0.58rem, 1.35cqi, 0.78rem);
+  align-content: start;
+  overflow: hidden;
+}
+
+.cm-agent-card--market .cm-agent-card__header {
+  gap: 0.62rem;
+  align-items: flex-start;
+}
+
+.cm-agent-card--market .cm-agent-card__avatar {
+  width: clamp(2.05rem, 9cqi, 2.55rem);
+  height: clamp(2.05rem, 9cqi, 2.55rem);
+}
+
+.cm-agent-card--market .cm-agent-card__copy {
+  gap: 0.28rem;
+}
+
+.cm-agent-card--market .cm-agent-card__title {
+  font-size: clamp(0.82rem, 3.2cqi, 0.98rem);
+  line-height: 1.08;
+}
+
+.cm-agent-card--market .cm-agent-card__identity {
+  gap: 0.22rem;
+}
+
+.cm-agent-card--market .cm-agent-card__identity-head {
+  flex-wrap: nowrap;
+}
+
+.cm-agent-card--market .cm-agent-card__identity-name,
+.cm-agent-card--market .cm-agent-card__identity-address,
+.cm-agent-card--market .cm-agent-card__model-name,
+.cm-agent-card--market .cm-agent-card__metric-value,
+.cm-agent-card--market .cm-agent-card__endpoint-code,
+.cm-agent-card--market .cm-agent-card__creator-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.cm-agent-card--market .cm-agent-card__model {
+  max-width: 100%;
+  padding-block: 0.12rem;
+  font-size: clamp(0.55rem, 2.1cqi, 0.63rem);
+}
+
+.cm-agent-card--market .cm-agent-card__description {
+  display: -webkit-box;
+  min-height: calc(2 * 1.28em);
+  max-height: calc(2 * 1.28em);
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: clamp(0.66rem, 2.35cqi, 0.74rem);
+  line-height: 1.28;
+}
+
+.cm-agent-card--market .cm-agent-card__badges,
+.cm-agent-card--market .cm-agent-card__tags {
+  max-height: clamp(1.48rem, 5.5cqi, 1.7rem);
+  gap: 0.28rem;
+  overflow: hidden;
+}
+
+.cm-agent-card--market .cm-agent-card__badge,
+.cm-agent-card--market .cm-agent-card__tag {
+  min-height: clamp(1.25rem, 4.9cqi, 1.5rem);
+  padding: 0 0.42rem;
+  font-size: clamp(0.5rem, 1.9cqi, 0.58rem);
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.cm-agent-card--market .cm-agent-card__metrics {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.32rem;
+}
+
+.cm-agent-card--market .cm-agent-card__metric {
+  min-width: 0;
+  min-height: clamp(2.05rem, 7.5cqi, 2.45rem);
+  gap: 0.32rem;
+  padding: 0.32rem 0.42rem;
+  border-color: hsl(var(--primary) / 0.13);
+  background: hsl(221 50% 9% / 0.32);
+}
+
+.cm-agent-card--market .cm-agent-card__metric-icon svg {
+  width: 0.74rem;
+  height: 0.74rem;
+}
+
+.cm-agent-card--market .cm-agent-card__metric-label {
+  font-size: clamp(0.46rem, 1.6cqi, 0.52rem);
+  letter-spacing: 0.08em;
+}
+
+.cm-agent-card--market .cm-agent-card__metric-value {
+  font-size: clamp(0.58rem, 2.05cqi, 0.68rem);
+}
+
+.cm-agent-card--market .cm-agent-card__tags-block {
+  gap: 0.22rem;
+  min-height: clamp(1.55rem, 6cqi, 1.85rem);
+}
+
+.cm-agent-card--market .cm-agent-card__tags-title {
+  display: none;
+}
+
+.cm-agent-card--market .cm-agent-card__footer {
+  padding-top: 0.38rem;
+}
+
+.cm-agent-card--market .cm-agent-card__footer-stack {
+  grid-template-columns: minmax(0, 1fr) minmax(4rem, auto);
+  align-items: center;
+  gap: 0.42rem;
+}
+
+.cm-agent-card--market .cm-agent-card__endpoint,
+.cm-agent-card--market .cm-agent-card__creator {
+  gap: 0;
+  min-width: 0;
+}
+
+.cm-agent-card--market .cm-agent-card__endpoint-label,
+.cm-agent-card--market .cm-agent-card__creator-label {
+  display: none;
+}
+
+.cm-agent-card--market .cm-agent-card__endpoint-row {
+  min-height: 1.72rem;
+  padding: 0.22rem 0.34rem 0.22rem 0.48rem;
+  gap: 0.25rem;
+  border-color: hsl(var(--primary) / 0.12);
+}
+
+.cm-agent-card--market .cm-agent-card__creator-value,
+.cm-agent-card--market .cm-agent-card__endpoint-code {
+  font-size: clamp(0.55rem, 1.85cqi, 0.62rem);
+}
+
+.cm-agent-card--market .cm-agent-card__creator-value {
+  display: block;
+  text-align: right;
 }
 
 .cm-agent-card__metric,

package/dist/agents/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/agents/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6nBxB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/agents/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqyBxB,CAAC"}

package/dist/css/agents.css

@@ -25,6 +25,7 @@
 }
 
 .cm-agent-card--interactive {
+  cursor: pointer;
   transition:
     transform 180ms ease,
     border-color 180ms ease,
@@ -40,6 +41,11 @@
     inset 0 1px 0 hsl(0 0% 100% / 0.05);
 }
 
+.cm-agent-card--interactive:focus-visible {
+  outline: 2px solid hsl(var(--primary) / 0.72);
+  outline-offset: 3px;
+}
+
 .cm-agent-card--running {
   border-color: hsl(142 71% 45% / 0.48);
   box-shadow:
@@ -374,7 +380,169 @@
   height: 100%;
   min-height: 0;
   align-content: start;
-  overflow-y: auto;
+  overflow: hidden;
+}
+
+.cm-agent-card--market {
+  height: var(--cm-market-card-height, clamp(12.5rem, 24vw, 20rem));
+  min-height: 0;
+}
+
+.cm-agent-card--market > .cm-agent-card__main {
+  height: 100%;
+  min-height: 0;
+  gap: clamp(0.34rem, 1.1cqi, 0.54rem);
+  padding: clamp(0.58rem, 1.35cqi, 0.78rem);
+  align-content: start;
+  overflow: hidden;
+}
+
+.cm-agent-card--market .cm-agent-card__header {
+  gap: 0.62rem;
+  align-items: flex-start;
+}
+
+.cm-agent-card--market .cm-agent-card__avatar {
+  width: clamp(2.05rem, 9cqi, 2.55rem);
+  height: clamp(2.05rem, 9cqi, 2.55rem);
+}
+
+.cm-agent-card--market .cm-agent-card__copy {
+  gap: 0.28rem;
+}
+
+.cm-agent-card--market .cm-agent-card__title {
+  font-size: clamp(0.82rem, 3.2cqi, 0.98rem);
+  line-height: 1.08;
+}
+
+.cm-agent-card--market .cm-agent-card__identity {
+  gap: 0.22rem;
+}
+
+.cm-agent-card--market .cm-agent-card__identity-head {
+  flex-wrap: nowrap;
+}
+
+.cm-agent-card--market .cm-agent-card__identity-name,
+.cm-agent-card--market .cm-agent-card__identity-address,
+.cm-agent-card--market .cm-agent-card__model-name,
+.cm-agent-card--market .cm-agent-card__metric-value,
+.cm-agent-card--market .cm-agent-card__endpoint-code,
+.cm-agent-card--market .cm-agent-card__creator-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.cm-agent-card--market .cm-agent-card__model {
+  max-width: 100%;
+  padding-block: 0.12rem;
+  font-size: clamp(0.55rem, 2.1cqi, 0.63rem);
+}
+
+.cm-agent-card--market .cm-agent-card__description {
+  display: -webkit-box;
+  min-height: calc(2 * 1.28em);
+  max-height: calc(2 * 1.28em);
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: clamp(0.66rem, 2.35cqi, 0.74rem);
+  line-height: 1.28;
+}
+
+.cm-agent-card--market .cm-agent-card__badges,
+.cm-agent-card--market .cm-agent-card__tags {
+  max-height: clamp(1.48rem, 5.5cqi, 1.7rem);
+  gap: 0.28rem;
+  overflow: hidden;
+}
+
+.cm-agent-card--market .cm-agent-card__badge,
+.cm-agent-card--market .cm-agent-card__tag {
+  min-height: clamp(1.25rem, 4.9cqi, 1.5rem);
+  padding: 0 0.42rem;
+  font-size: clamp(0.5rem, 1.9cqi, 0.58rem);
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.cm-agent-card--market .cm-agent-card__metrics {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.32rem;
+}
+
+.cm-agent-card--market .cm-agent-card__metric {
+  min-width: 0;
+  min-height: clamp(2.05rem, 7.5cqi, 2.45rem);
+  gap: 0.32rem;
+  padding: 0.32rem 0.42rem;
+  border-color: hsl(var(--primary) / 0.13);
+  background: hsl(221 50% 9% / 0.32);
+}
+
+.cm-agent-card--market .cm-agent-card__metric-icon svg {
+  width: 0.74rem;
+  height: 0.74rem;
+}
+
+.cm-agent-card--market .cm-agent-card__metric-label {
+  font-size: clamp(0.46rem, 1.6cqi, 0.52rem);
+  letter-spacing: 0.08em;
+}
+
+.cm-agent-card--market .cm-agent-card__metric-value {
+  font-size: clamp(0.58rem, 2.05cqi, 0.68rem);
+}
+
+.cm-agent-card--market .cm-agent-card__tags-block {
+  gap: 0.22rem;
+  min-height: clamp(1.55rem, 6cqi, 1.85rem);
+}
+
+.cm-agent-card--market .cm-agent-card__tags-title {
+  display: none;
+}
+
+.cm-agent-card--market .cm-agent-card__footer {
+  padding-top: 0.38rem;
+}
+
+.cm-agent-card--market .cm-agent-card__footer-stack {
+  grid-template-columns: minmax(0, 1fr) minmax(4rem, auto);
+  align-items: center;
+  gap: 0.42rem;
+}
+
+.cm-agent-card--market .cm-agent-card__endpoint,
+.cm-agent-card--market .cm-agent-card__creator {
+  gap: 0;
+  min-width: 0;
+}
+
+.cm-agent-card--market .cm-agent-card__endpoint-label,
+.cm-agent-card--market .cm-agent-card__creator-label {
+  display: none;
+}
+
+.cm-agent-card--market .cm-agent-card__endpoint-row {
+  min-height: 1.72rem;
+  padding: 0.22rem 0.34rem 0.22rem 0.48rem;
+  gap: 0.25rem;
+  border-color: hsl(var(--primary) / 0.12);
+}
+
+.cm-agent-card--market .cm-agent-card__creator-value,
+.cm-agent-card--market .cm-agent-card__endpoint-code {
+  font-size: clamp(0.55rem, 1.85cqi, 0.62rem);
+}
+
+.cm-agent-card--market .cm-agent-card__creator-value {
+  display: block;
+  text-align: right;
 }
 
 .cm-agent-card__metric,

package/dist/css/session.css

@@ -9,8 +9,14 @@
 
 .cm-session-trigger {
   border-color: hsl(var(--primary) / 0.35);
-  background: hsl(var(--primary) / 0.08);
+  background:
+    radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.16), transparent 38%),
+    radial-gradient(circle at 82% 100%, hsl(var(--accent) / 0.12), transparent 42%),
+    linear-gradient(145deg, hsl(226 21% 22% / 0.56), hsl(221 50% 8% / 0.48));
   color: hsl(var(--primary));
+  box-shadow:
+    inset 0 1px 0 hsl(0 0% 100% / 0.07),
+    0 0 22px hsl(var(--primary) / 0.11);
 }
 
 .cm-app-chrome__hud .cm-session-menu,
@@ -21,10 +27,11 @@
 .cm-app-chrome__hud .cm-session-trigger,
 .cm-app-chrome__hud-popover .cm-session-trigger {
   width: auto;
-  min-width: var(--cm-hud-size, 2.75rem);
+  min-width: max-content;
+  max-width: min(13.5rem, 52vw);
   min-height: var(--cm-hud-size, 2.75rem);
   height: var(--cm-hud-size, 2.75rem);
-  padding-inline: clamp(0.72rem, 1.4vw, 0.92rem);
+  padding-inline: clamp(0.78rem, 1.35vw, 1rem);
   border-radius: 999px;
   white-space: nowrap;
 }
@@ -274,19 +281,14 @@
 
   .cm-app-chrome__hud .cm-session-trigger {
     width: auto;
-    min-width: var(--cm-hud-size, 2.75rem);
+    min-width: max-content;
     padding-inline: 0.72rem;
   }
 }
 
 @media (max-width: 380px) {
   .cm-app-chrome__hud .cm-session-trigger {
-    width: var(--cm-hud-size, 2.75rem);
-    padding-inline: 0;
-  }
-
-  .cm-app-chrome__hud .cm-session-trigger__mobile {
-    display: none;
+    max-width: min(10.5rem, 58vw);
   }
 }