@m6d/cortex-react 0.16.0 → 0.18.0

package/dist/styles.css

@@ -308,6 +308,19 @@
   transform: translateX(-100%);
 }
 
+.cortex-widget__screen--covered > :not(.cortex-widget__screen) {
+  visibility: hidden;
+  transition: visibility 0s 0.3s;
+}
+
+.cortex-widget__screen:has(> .cortex-widget__screen) {
+  overflow: hidden;
+}
+
+.cortex-widget__container--switching > .cortex-widget__screen {
+  transition: none !important;
+}
+
 @keyframes cortex-skeleton-shimmer {
   0% {
     background-position: -200% 0;
@@ -688,6 +701,7 @@
 }
 
 cortex-chat-composer,
+cortex-send-menu,
 cortex-message-tool-call-outcome,
 cortex-llm-usage-chips {
   display: contents;
@@ -872,6 +886,91 @@ cortex-llm-usage-chips {
   transform: rotate(180deg);
 }
 
+.cortex-send-split {
+  position: relative;
+  display: flex;
+}
+.cortex-send-split .cortex-widget__send-btn:has(+ .cortex-send-split__caret) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.cortex-send-split__caret {
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-inline-start: 1px solid var(--cortex-color-border);
+  border-start-end-radius: var(--cortex-radius);
+  border-end-end-radius: var(--cortex-radius);
+  background: var(--cortex-color-send-empty, transparent);
+  color: var(--cortex-color-send-empty-text, var(--cortex-color-text-muted));
+  cursor: pointer;
+}
+.cortex-widget__send-btn--ready + .cortex-send-split__caret {
+  border-inline-start-color: color-mix(in oklab, var(--cortex-color-primary-foreground) 30%, transparent);
+  background: var(--cortex-color-primary);
+  color: var(--cortex-color-primary-foreground);
+}
+.cortex-send-split__caret svg {
+  transform: rotate(180deg);
+}
+
+.cortex-send-menu {
+  position: absolute;
+  inset-inline-end: 0;
+  bottom: calc(100% + 0.5rem);
+  z-index: 10;
+  width: 13rem;
+  padding: 0.25rem;
+  border: 1px solid var(--cortex-color-border);
+  border-radius: var(--cortex-radius);
+  background: var(--cortex-color-surface);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+}
+.cortex-send-menu__item {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+  width: 100%;
+  padding: 0.4375rem 0.5rem;
+  border: 0;
+  border-radius: calc(var(--cortex-radius) * 0.75);
+  background: transparent;
+  text-align: start;
+  cursor: pointer;
+}
+.cortex-send-menu__item:hover, .cortex-send-menu__item[aria-checked=true] {
+  background: var(--cortex-color-hover);
+}
+.cortex-send-menu__check {
+  flex-shrink: 0;
+  width: 0.875rem;
+  height: 0.875rem;
+  margin-top: 0.125rem;
+  color: var(--cortex-color-accent);
+}
+.cortex-send-menu__label {
+  display: block;
+  color: var(--cortex-color-text-heading);
+  font-weight: 500;
+  font-size: 0.8125rem;
+}
+.cortex-send-menu__default {
+  margin-inline-start: 0.25rem;
+  color: var(--cortex-color-text-muted);
+  font-weight: 400;
+  font-size: 0.75rem;
+}
+.cortex-send-menu__hint {
+  display: block;
+  color: var(--cortex-color-text-secondary);
+  font-size: 0.75rem;
+}
+
 .cortex-widget__threads-header {
   flex-shrink: 0;
   padding: 1.25rem 1.25rem 1rem;
@@ -2100,7 +2199,7 @@ details[open] > summary > .cortex-reasoning-details__chevron {
 }
 
 /*
- * A firing in the transcript. By default a small chip in the assistant column
+ * A trigger's fire in the transcript. By default a small chip in the assistant column
  * with the trigger's name and when it fired; in debug mode a full-width dashed
  * block that also shows the raw payload.
  */
@@ -2190,6 +2289,48 @@ details[open] > summary > .cortex-reasoning-details__chevron {
   margin-inline-start: 0.5rem;
 }
 
+.cortex-event-quote {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: min(100%, 28rem);
+  padding: 0.375rem 0.625rem;
+  border-inline-start: 2px solid var(--cortex-color-accent);
+  border-start-end-radius: calc(var(--cortex-radius) * 0.6);
+  border-end-end-radius: calc(var(--cortex-radius) * 0.6);
+  background: var(--cortex-color-surface-subtle);
+  font-size: 0.75rem;
+  color: var(--cortex-color-text-secondary);
+}
+.cortex-event-quote > svg {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex-shrink: 0;
+  color: var(--cortex-color-accent);
+}
+.cortex-event-quote b {
+  display: inline-block;
+  max-width: 16rem;
+  overflow: hidden;
+  vertical-align: bottom;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: 600;
+  color: var(--cortex-color-text-strong);
+}
+
+.cortex-event-quote--note {
+  align-items: flex-start;
+}
+.cortex-event-quote--note > svg {
+  margin-block-start: 0.125rem;
+}
+.cortex-event-quote--note b {
+  display: inline;
+  max-width: none;
+  white-space: normal;
+}
+
 .cortex-message-attachments {
   display: flex;
   flex-wrap: wrap;
@@ -2549,6 +2690,7 @@ details[open] > summary .cortex-debug-tool__chevron {
 }
 
 .cortex-tool-pill__title {
+  min-width: 0;
   font-size: 0.75rem;
   color: var(--cortex-color-text-muted);
   white-space: nowrap;
@@ -2622,11 +2764,15 @@ details[open] > summary .cortex-debug-tool__chevron {
   color: var(--cortex-color-text-strong);
   cursor: pointer;
 }
-.cortex-approval-card__button--approve {
+.cortex-approval-card__button--primary {
   border-color: var(--cortex-color-accent);
   background: var(--cortex-color-accent);
   color: var(--cortex-color-primary-foreground);
 }
+.cortex-approval-card__button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
 
 .cortex-approval-card__line {
   display: flex;
@@ -2911,6 +3057,65 @@ details[open] > summary .cortex-debug-tool__chevron {
   color: var(--cortex-color-success);
 }
 
+.cortex-connect-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  max-width: min(100%, 28rem);
+  margin: 0.25rem 0;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--cortex-color-border);
+  border-radius: var(--cortex-radius);
+  background: var(--cortex-color-surface);
+  font-size: 0.8125rem;
+}
+
+.cortex-connect-card__server {
+  font-size: 0.75rem;
+  color: var(--cortex-color-text-muted);
+}
+
+.cortex-connect-card__title {
+  margin: 0;
+  font-weight: 600;
+  color: var(--cortex-color-text-heading);
+}
+
+.cortex-connect-card__text {
+  margin: 0;
+  color: var(--cortex-color-text-secondary);
+}
+.cortex-connect-card__text--failed {
+  color: var(--cortex-color-danger);
+}
+
+.cortex-connect-card__actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-block-start: 0.5rem;
+}
+
+.cortex-connect-card__button {
+  border: 1px solid var(--cortex-color-border-strong);
+  border-radius: calc(var(--cortex-radius) * 0.75);
+  background: var(--cortex-color-surface);
+  padding: 0.375rem 0.875rem;
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--cortex-color-text-strong);
+  cursor: pointer;
+}
+.cortex-connect-card__button--primary {
+  border-color: var(--cortex-color-accent);
+  background: var(--cortex-color-accent);
+  color: var(--cortex-color-primary-foreground);
+}
+.cortex-connect-card__button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
 .cortex-reasoning-animated {
   display: block;
 }
@@ -2986,6 +3191,330 @@ details[open] > summary .cortex-debug-tool__chevron {
   transition: none;
 }
 
+.cortex-subagent-avatar {
+  position: relative;
+  width: 1.375rem;
+  height: 1.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background: var(--cortex-color-accent);
+  color: var(--cortex-color-primary-foreground);
+}
+.cortex-subagent-avatar svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.cortex-subagent-avatar--live::after {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border-radius: 9999px;
+  border: 1.5px solid color-mix(in oklab, var(--cortex-color-accent) 18%, transparent);
+  border-top-color: var(--cortex-color-accent);
+  border-inline-end-color: color-mix(in oklab, var(--cortex-color-accent) 45%, transparent);
+  animation: cortex-tool-spin 1s linear infinite;
+}
+.cortex-subagent-avatar--off {
+  background: var(--cortex-color-surface-subtle);
+  color: var(--cortex-color-text-muted);
+}
+
+.cortex-subagent-card {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  column-gap: 0.625rem;
+  row-gap: 0.125rem;
+  align-items: center;
+  max-width: min(100%, 28rem);
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--cortex-color-border);
+  border-radius: var(--cortex-radius);
+  background: var(--cortex-color-surface);
+}
+.cortex-subagent-card--live {
+  border-color: color-mix(in oklab, var(--cortex-color-accent) 45%, var(--cortex-color-border));
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cortex-color-accent) 10%, transparent);
+}
+.cortex-subagent-card--more {
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+}
+.cortex-subagent-card > .cortex-subagent-avatar {
+  grid-row: 1/3;
+  align-self: start;
+  margin-top: 0.0625rem;
+}
+.cortex-subagent-card__body {
+  display: grid;
+  gap: 0.0625rem;
+  min-width: 0;
+}
+.cortex-subagent-card__caption {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--cortex-color-accent);
+}
+.cortex-subagent-card__announce {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.cortex-subagent-card__status {
+  font-weight: 400;
+  color: var(--cortex-color-text-secondary);
+}
+.cortex-subagent-card__title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--cortex-color-text-heading);
+  overflow-wrap: anywhere;
+}
+.cortex-subagent-card--off .cortex-subagent-card__title {
+  color: var(--cortex-color-text-secondary);
+}
+.cortex-subagent-card__line {
+  grid-column: 2/-1;
+  font-size: 0.8125rem;
+  color: var(--cortex-color-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cortex-subagent-card__line--result {
+  color: var(--cortex-color-text-strong);
+}
+.cortex-subagent-card__line--failed {
+  color: var(--cortex-color-danger);
+}
+.cortex-subagent-card__open {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--cortex-radius) * 0.6);
+  background: transparent;
+  color: var(--cortex-color-text-muted);
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+.cortex-subagent-card__open::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cortex-radius);
+}
+.cortex-subagent-card__open:hover {
+  background: var(--cortex-color-hover);
+}
+.cortex-subagent-card__open svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.cortex-subagent-card__open svg:dir(rtl) {
+  transform: scaleX(-1);
+}
+.cortex-subagent-card:has(> .cortex-subagent-card__open:hover) {
+  border-color: var(--cortex-color-border-strong);
+}
+.cortex-subagent-card > .cortex-subagent-menu {
+  z-index: 1;
+}
+
+.cortex-subagent-menu {
+  position: relative;
+}
+.cortex-subagent-menu__more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--cortex-radius) * 0.6);
+  background: var(--cortex-color-surface-subtle);
+  color: var(--cortex-color-text-secondary);
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+.cortex-subagent-menu__more:hover {
+  background: var(--cortex-color-hover);
+}
+.cortex-subagent-menu__more svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.cortex-subagent-menu__list {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  inset-inline-end: 0;
+  z-index: 10;
+  min-width: 9.5rem;
+  padding: 0.25rem;
+  border: 1px solid var(--cortex-color-border);
+  border-radius: var(--cortex-radius);
+  background: var(--cortex-color-surface);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
+}
+.cortex-subagent-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: 0;
+  border-radius: calc(var(--cortex-radius) * 0.6);
+  background: transparent;
+  font-size: 0.8125rem;
+  color: var(--cortex-color-text-strong);
+  text-align: start;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.cortex-subagent-menu__item:hover, .cortex-subagent-menu__item:focus-visible {
+  background: var(--cortex-color-surface-subtle);
+  outline: none;
+}
+.cortex-subagent-menu__item--danger {
+  color: var(--cortex-color-danger);
+}
+.cortex-subagent-menu__item svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+.cortex-message-part:has(.cortex-subagent-card) + .cortex-message-part:has(.cortex-subagent-card) {
+  margin-block-start: -0.125rem;
+}
+
+.cortex-subagent-screen {
+  z-index: 1;
+  background: var(--cortex-color-surface);
+}
+.cortex-subagent-screen .cortex-text-bubble--user {
+  max-width: 100%;
+}
+.cortex-subagent-screen__crumb {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.cortex-subagent-screen__text {
+  display: grid;
+  min-width: 0;
+}
+.cortex-subagent-screen__title, .cortex-subagent-screen__sub {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cortex-subagent-screen__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--cortex-color-text-heading);
+}
+.cortex-subagent-screen__sub {
+  font-size: 0.6875rem;
+  color: var(--cortex-color-text-secondary);
+}
+.cortex-subagent-screen__sub b {
+  font-weight: 600;
+  color: var(--cortex-color-accent);
+}
+.cortex-subagent-screen__strip {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  border-bottom: 1px solid var(--cortex-color-border);
+  background: color-mix(in oklab, var(--cortex-color-accent) 8%, var(--cortex-color-surface));
+  font-size: 0.75rem;
+  color: var(--cortex-color-text-secondary);
+}
+.cortex-subagent-screen__strip svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+  color: var(--cortex-color-success);
+}
+.cortex-subagent-screen__strip span {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cortex-subagent-screen__strip--failed, .cortex-subagent-screen__strip--failed svg {
+  color: var(--cortex-color-danger);
+}
+
+.cortex-message__sender {
+  display: block;
+  margin-bottom: 0.125rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--cortex-color-accent);
+}
+.cortex-message__sender--you {
+  color: var(--cortex-color-text-secondary);
+  text-align: end;
+}
+
+.cortex-check-back {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: min(100%, 36rem);
+  font-size: 0.75rem;
+  color: var(--cortex-color-text-secondary);
+}
+.cortex-check-back > svg {
+  width: 0.8125rem;
+  height: 0.8125rem;
+  flex-shrink: 0;
+  color: var(--cortex-color-accent);
+}
+.cortex-check-back > span {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.cortex-check-back b {
+  font-weight: 600;
+  color: var(--cortex-color-text-strong);
+}
+.cortex-check-back__cancel {
+  flex-shrink: 0;
+  border: 0;
+  border-radius: calc(var(--cortex-radius) * 0.6);
+  background: transparent;
+  padding: 0.0625rem 0.375rem;
+  font: inherit;
+  color: var(--cortex-color-text-secondary);
+  cursor: pointer;
+}
+.cortex-check-back__cancel:hover {
+  background: var(--cortex-color-hover);
+  color: var(--cortex-color-text-strong);
+}
+
 .cortex-attachment-queue {
   display: flex;
   flex-wrap: wrap;
@@ -3080,6 +3609,61 @@ details[open] > summary .cortex-debug-tool__chevron {
   height: 0.75rem;
 }
 
+.cortex-queued-tray {
+  margin-bottom: 0.5rem;
+  border: 1px solid var(--cortex-color-border);
+  border-radius: calc(var(--cortex-radius) * 1.25);
+  background: var(--cortex-color-surface-subtle);
+  font-size: 0.8125rem;
+}
+.cortex-queued-tray__head {
+  padding: 0.375rem 0.625rem;
+}
+.cortex-queued-tray__label {
+  color: var(--cortex-color-text-secondary);
+  font-size: 0.75rem;
+}
+.cortex-queued-tray__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.4375rem 0.625rem;
+  border-top: 1px solid var(--cortex-color-border);
+}
+.cortex-queued-tray__text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--cortex-color-text-strong);
+}
+.cortex-queued-tray__send-now {
+  flex-shrink: 0;
+  padding: 0.1875rem 0.5625rem;
+  border: 0;
+  border-radius: calc(var(--cortex-radius) * 0.75);
+  background: var(--cortex-color-primary);
+  color: var(--cortex-color-primary-foreground);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.cortex-queued-tray__cancel {
+  flex-shrink: 0;
+  display: inline-flex;
+  padding: 0.125rem;
+  border: 1px solid var(--cortex-color-border);
+  border-radius: calc(var(--cortex-radius) * 0.5);
+  color: var(--cortex-color-text-muted);
+  cursor: pointer;
+}
+.cortex-queued-tray__cancel:hover {
+  color: var(--cortex-color-text-strong);
+  background: var(--cortex-color-hover);
+}
+
 /* ─── Token Usage Component ────────────────────────────────────────── */
 .cortex-token-usage {
   direction: ltr;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@m6d/cortex-react",
-    "version": "0.16.0",
+    "version": "0.18.0",
     "description": "React chat widget for Cortex agents",
     "license": "MIT",
     "sideEffects": [
@@ -32,8 +32,8 @@
         "@cortex/client": "workspace:*",
         "@cortex/contracts": "workspace:*",
         "@m6d/tsconfig": "workspace:*",
-        "@tanstack/ai": "^0.55.0",
-        "@tanstack/ai-client": "^0.32.1",
+        "@tanstack/ai": "^1.0.1",
+        "@tanstack/ai-client": "^1.0.1",
         "@types/bun": "1.4.4",
         "@types/jsdom": "^28.0.0",
         "@types/leaflet": "^1.9.22",
@@ -54,8 +54,8 @@
         "vega-lite": "^6.4.3"
     },
     "peerDependencies": {
-        "@tanstack/ai": ">=0.55.0 <1.0.0",
-        "@tanstack/ai-client": ">=0.32.0 <1.0.0",
+        "@tanstack/ai": ">=1.0.0 <2.0.0",
+        "@tanstack/ai-client": ">=1.0.0 <2.0.0",
         "dompurify": "^3.0.0",
         "highlight.js": "^11.0.0",
         "leaflet": "^1.9.0",