@abot-ai/runtime 1.4.0 → 1.5.0

package/dist/src/web-ui/app/styles/23-composer-plan.css

@@ -9,8 +9,8 @@
 .composer-plan-details {
   overflow: hidden;
   border: 1px solid var(--line);
-  border-radius: 12px;
-  background: var(--surface, #132438);
+  border-radius: 8px;
+  background: var(--panel);
 }
 
 .composer-plan-toggle {
@@ -28,16 +28,16 @@
 }
 
 .composer-plan-toggle:focus-visible {
-  outline: 2px solid #80b7ff;
+  outline: 2px solid var(--accent);
   outline-offset: -3px;
-  border-radius: 11px;
+  border-radius: 7px;
 }
 
 .composer-plan-label {
   flex: none;
   color: var(--muted-2);
   font-size: var(--font-size-sm);
-  font-weight: 650;
+  font-weight: 400;
 }
 
 .composer-plan-preview {
@@ -82,7 +82,7 @@
   min-width: 0;
   margin: 0;
   font-size: var(--font-size-md);
-  font-weight: 600;
+  font-weight: 400;
   overflow-wrap: anywhere;
 }
 
@@ -131,17 +131,17 @@
 
 .composer-plan-item.is-active .composer-plan-status,
 .composer-plan-status.is-active {
-  color: #80b7ff;
+  color: var(--accent);
 }
 
 .composer-plan-item.is-done .composer-plan-status,
 .composer-plan-status.is-done {
-  color: #8dd7b6;
+  color: var(--green);
 }
 
 .composer-plan-item.is-blocked .composer-plan-status,
 .composer-plan-item.is-blocked .composer-plan-item-status {
-  color: #ef9a9a;
+  color: var(--danger);
 }
 
 .composer-plan-item.is-superseded {

package/dist/src/web-ui/app/styles/24-composer-stop.css

@@ -0,0 +1,44 @@
+.composer-submit-actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 8px;
+}
+
+.composer-stop-button {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--muted);
+}
+
+.composer-stop-button svg {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+
+.composer-stop-button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--text) 7%, transparent);
+  color: var(--text);
+}
+
+.composer-stop-button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.composer-stop-button[aria-busy="true"] {
+  opacity: 0.65;
+}
+
+.composer-stop-button:focus-visible {
+  outline: 1px solid var(--muted);
+  outline-offset: 2px;
+}

package/dist/src/web-ui/app/styles/24-conversation-role-cards.css

@@ -1,21 +1,23 @@
 .conversation-role-view,
 .conversation-role-panel,
-.conversation-role-content {
+.conversation-role-content,
+.conversation-role-message {
   min-width: 0;
 }
 
 .conversation-role-view {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  gap: 6px;
+  gap: 12px;
 }
 
 .conversation-role-toolbar {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
-  justify-content: space-between;
   gap: 8px;
+  padding: 8px 2px 0;
+  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
 }
 
 .conversation-role-label {
@@ -24,123 +26,128 @@
 }
 
 .conversation-role-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex: none;
   min-height: 32px;
   padding: 4px 8px;
-  border-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
   background: transparent;
+  color: var(--muted);
   font-size: var(--font-size-xs);
   line-height: 1.4;
   cursor: pointer;
 }
 
+.conversation-role-toggle:hover,
+.conversation-role-toggle[aria-pressed="true"] {
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+}
+
+.conversation-role-toggle-icon,
+.conversation-role-toggle-icon svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+}
+
 .conversation-role-list {
+  display: grid;
+  gap: 22px;
   margin: 0;
-  padding: 0;
+  padding: 4px 2px 8px;
   list-style: none;
 }
 
-.conversation-role-card,
-.conversation-role-summary-item {
-  --role-accent: #58b9a8;
+.conversation-role-list[hidden] {
+  display: none;
+}
+
+.conversation-role-card {
+  --role-accent: var(--accent);
 }
 
 .conversation-role-card {
+  position: relative;
   display: grid;
-  grid-template-columns: 30px minmax(0, 1fr);
+  grid-template-columns: 34px minmax(0, 1fr);
   align-items: start;
-  gap: 10px;
+  gap: 12px;
   min-width: 0;
-  padding: 8px 2px;
   color: var(--text);
 }
 
-.conversation-role-card:not(:last-child) {
-  border-block-end: 1px solid var(--line);
-}
-
-.conversation-role-card[data-role="planner"],
-.conversation-role-summary-item[data-role="planner"] {
-  --role-accent: #a99af2;
-}
-
-.conversation-role-card[data-role="worker"],
-.conversation-role-summary-item[data-role="worker"] {
-  --role-accent: #55a7e8;
+.conversation-role-message {
+  width: fit-content;
+  max-width: 100%;
+  margin-block-start: 7px;
+  padding: 10px 14px;
+  border-radius: 3px 12px 12px;
+  background: color-mix(in srgb, var(--role-accent) 5%, var(--panel));
 }
 
-.conversation-role-card[data-role="reviewer"],
-.conversation-role-summary-item[data-role="reviewer"] {
-  --role-accent: #e0ac4f;
+.conversation-role-message:has(> .conversation-tools) {
+  width: 100%;
 }
 
-.conversation-role-card.is-failed,
-.conversation-role-summary-item.is-failed {
-  --role-accent: #ffb4ab;
+.conversation-role-card.is-active > .conversation-role-avatar {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--role-accent) 8%, transparent);
 }
 
-.conversation-role-avatar {
-  display: grid;
-  place-items: center;
-  width: 30px;
-  height: 30px;
-  margin-block-start: 2px;
-  border: 1px solid color-mix(in srgb, var(--role-accent) 22%, transparent);
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--role-accent) 8%, transparent);
-  color: var(--role-accent);
-  font-size: var(--font-size-xs);
-  font-weight: 650;
+.conversation-role-card[data-role="planner"] {
+  --role-accent: #8ebcff;
 }
 
-.conversation-role-summary-strip {
-  display: inline-flex;
-  align-items: center;
-  flex: none;
-  gap: 4px;
-  white-space: nowrap;
+.conversation-role-card[data-role="worker"] {
+  --role-accent: #c7a1ef;
 }
 
-.conversation-role-summary-strip .conversation-role-avatar {
-  margin-block-start: 0;
+.conversation-role-card[data-role="researcher"] {
+  --role-accent: #7dd4e7;
 }
 
-.conversation-activity[open] .conversation-role-summary-strip,
-.conversation-activity.has-role-summary:not([open])
-  .conversation-activity-current {
-  display: none;
+.conversation-role-card[data-role="reviewer"] {
+  --role-accent: var(--amber);
 }
 
-.conversation-activity.has-role-summary:not([open])
-  > .conversation-activity-summary {
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  gap: 6px 10px;
+.conversation-role-card[data-role="unknown"] {
+  --role-accent: var(--muted);
 }
 
-.conversation-activity.has-role-summary:not([open])
-  .conversation-activity-heading {
-  max-width: 100%;
+.conversation-role-card.is-failed {
+  --role-accent: var(--danger);
 }
 
-.conversation-activity.has-role-summary:not([open])
-  .conversation-activity-facts {
-  max-width: 100%;
-  margin-inline-start: auto;
-  overflow-wrap: anywhere;
+.conversation-role-avatar {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: 1px solid color-mix(in srgb, var(--role-accent) 22%, transparent);
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--role-accent) 12%, var(--panel));
+  color: var(--role-accent);
+  font-size: var(--font-size-xs);
+  font-weight: 400;
 }
 
 .conversation-role-header {
   display: flex;
   flex-wrap: wrap;
-  align-items: baseline;
-  gap: 2px 8px;
-  line-height: 1.4;
+  align-items: center;
+  min-height: 24px;
+  gap: 4px 10px;
+  line-height: 1.5;
 }
 
 .conversation-role-title {
-  color: var(--text-strong);
+  color: var(--role-accent);
   font-size: var(--font-size-md);
-  font-weight: 650;
+  font-weight: 400;
 }
 
 .conversation-role-responsibility {
@@ -151,23 +158,29 @@
 }
 
 .conversation-role-active {
-  align-self: center;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
   flex: none;
+  padding: 2px 0;
+  color: var(--role-accent);
+  font-size: var(--font-size-xs);
+}
+
+.conversation-role-active::before {
+  content: "";
   width: 6px;
   height: 6px;
+  flex: none;
   border-radius: 50%;
-  background: var(--text);
+  background: var(--role-accent);
   animation: conversation-role-pulse 1600ms ease-in-out infinite;
 }
 
 .conversation-role-summary {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  margin: 2px 0 0;
+  margin: 0;
   font-size: var(--font-size-md);
-  line-height: 1.4;
+  line-height: 1.6;
   overflow-wrap: anywhere;
 }
 
@@ -177,13 +190,27 @@
   font-size: var(--font-size-xs);
 }
 
+.conversation-role-action-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.conversation-role-error {
+  color: var(--danger);
+}
+
 .conversation-role-facts {
   display: flex;
   flex-wrap: wrap;
-  gap: 2px 8px;
-  margin: 0;
+  gap: 4px 8px;
+  margin: 8px 0 0;
   padding: 0;
-  color: var(--muted-2);
+  color: var(--muted);
   font-size: var(--font-size-xs);
   list-style: none;
 }
@@ -192,6 +219,70 @@
   overflow-wrap: anywhere;
 }
 
+.conversation-role-card .conversation-role-message > .conversation-tools {
+  margin-block-start: 10px;
+  padding: 4px;
+  border: 1px solid color-mix(in srgb, var(--role-accent) 12%, transparent);
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--bg) 65%, transparent);
+}
+
+.conversation-role-card .conversation-tool-row + .conversation-tool-row {
+  border-block-start: 0;
+}
+
+.conversation-role-card .conversation-tool-summary {
+  min-height: 34px;
+  padding: 6px 8px;
+  gap: 8px;
+  border-radius: 5px;
+}
+
+.conversation-role-card .conversation-tool-summary:hover,
+.conversation-role-card .conversation-tool[open] > .conversation-tool-summary {
+  background: color-mix(in srgb, var(--text) 4%, transparent);
+}
+
+.conversation-role-card .conversation-tool-body {
+  padding: 6px 8px 12px;
+}
+
+.conversation-role-card .conversation-tool-status {
+  font-size: var(--font-size-xs);
+}
+
+@media (max-width: 600px) {
+  .conversation-role-card {
+    grid-template-columns: 26px minmax(0, 1fr);
+    gap: 8px;
+  }
+
+  .conversation-role-message {
+    padding: 9px 10px;
+  }
+
+  .conversation-role-card > .conversation-role-avatar {
+    width: 26px;
+    height: 26px;
+  }
+
+  .conversation-role-responsibility {
+    flex-basis: 100%;
+    order: 2;
+  }
+
+  .conversation-role-active {
+    margin-inline-start: auto;
+  }
+}
+
+@media (pointer: coarse) {
+  .conversation-role-toggle,
+  .conversation-role-card .conversation-tool-summary {
+    min-height: 44px;
+  }
+}
+
 @keyframes conversation-role-pulse {
   50% {
     opacity: 0.35;
@@ -199,7 +290,45 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .conversation-role-active {
+  .conversation-role-active::before {
     animation: none;
   }
 }
+.conversation-activity.is-inline-agents {
+  margin: 8px 0 22px;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.is-inline-agents .conversation-activity-summary {
+  min-width: 0;
+  flex-wrap: wrap;
+  min-height: 0;
+  padding: 0;
+  gap: 6px 12px;
+  cursor: default;
+  user-select: text;
+}
+
+.is-inline-agents .conversation-activity-facts {
+  flex: 1 1 180px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  text-align: start;
+}
+
+.is-inline-agents > .conversation-activity-body {
+  max-height: none;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  scrollbar-gutter: auto;
+}
+
+.conversation-role-view[data-view="timeline"] > .conversation-role-panel {
+  max-height: 330px;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}

package/dist/src/web-ui/app/styles/25-conversation-sources.css

@@ -22,7 +22,7 @@
 
 .conversation-sources-title {
   color: var(--text-strong);
-  font-weight: 650;
+  font-weight: 400;
 }
 
 .conversation-sources-operation,
@@ -60,17 +60,17 @@
   padding: 6px 8px;
   border: 1px solid var(--line);
   border-radius: 6px;
-  background: color-mix(in srgb, var(--text) 2%, transparent);
+  background: transparent;
   color: inherit;
   text-decoration: none;
 }
 
 .conversation-source-link:hover {
-  background: color-mix(in srgb, var(--text) 5%, transparent);
+  background: var(--control-bg-hover);
 }
 
 .conversation-source-link:focus-visible {
-  outline: 2px solid var(--text);
+  outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
 
@@ -118,7 +118,7 @@
 }
 
 .conversation-source-status.is-failed {
-  color: #ffb4ab;
+  color: var(--muted);
 }
 
 .conversation-sources-omitted {

package/dist/src/web-ui/app/styles/26-message-content.css

@@ -3,6 +3,43 @@
   line-height: 1.65;
 }
 
+.conversation-reasoning {
+  margin: 2px 0 14px;
+  color: var(--muted);
+  font-size: var(--font-size-md);
+  font-style: italic;
+  line-height: 1.65;
+}
+
+.conversation-reasoning-toggle {
+  position: relative;
+  padding: 2px 0;
+  border-radius: 4px;
+  cursor: pointer;
+  list-style: none;
+}
+
+.conversation-reasoning-toggle::-webkit-details-marker {
+  display: none;
+}
+
+.conversation-reasoning:not([open]) .thinking-body {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  max-height: 3.3em;
+  overflow: hidden;
+  mask-image: linear-gradient(to bottom, #000 40%, #0008 75%, transparent);
+}
+
+.conversation-reasoning:not([open]) > summary::after {
+  content: "";
+  position: absolute;
+  inset: 1.65em 0 0;
+  pointer-events: none;
+  backdrop-filter: blur(0.6px);
+}
+
 :is(.markdown-body, .thinking-body) {
   min-width: 0;
   white-space: normal;
@@ -68,7 +105,7 @@
 
 :is(.markdown-body, .thinking-body) li::marker {
   color: color-mix(in srgb, var(--accent-strong) 72%, var(--muted));
-  font-weight: 650;
+  font-weight: 400;
   font-variant-numeric: tabular-nums;
 }
 
@@ -108,7 +145,7 @@
   padding: 14px 15px;
   overflow: auto;
   border: 1px solid var(--line);
-  border-radius: 10px;
+  border-radius: 8px;
   background: var(--bg);
   direction: ltr;
   text-align: left;
@@ -190,9 +227,9 @@
 }
 
 .markdown-table-scroll th {
-  background: var(--panel-raised);
+  background: var(--panel);
   color: var(--text-strong);
-  font-weight: 650;
+  font-weight: 500;
 }
 
 .markdown-table-scroll tr > :last-child {
@@ -275,7 +312,7 @@
   overflow: hidden;
   color: var(--text-strong);
   font-size: var(--font-size-sm);
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1.35;
   overflow-wrap: anywhere;
   -webkit-line-clamp: 2;
@@ -287,6 +324,48 @@
   text-underline-offset: 3px;
 }
 
+.message-row.user .markdown-body:not(:empty) {
+  width: fit-content;
+  max-width: 100%;
+  margin-left: auto;
+  padding: 12px 16px;
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--panel-raised) 38%, var(--bg));
+}
+
+.message-row.user .message-link-previews {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin: 5px 6px 0;
+}
+
+.message-row.user .message-link-preview {
+  width: fit-content;
+  max-width: min(100%, 320px);
+  height: auto;
+  min-height: 40px;
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 7px;
+  background: var(--panel);
+}
+
+.message-row.user .message-link-preview::before {
+  content: "↗";
+  color: var(--muted);
+}
+
+.message-row.user .message-link-preview:hover {
+  background: var(--control-fill);
+}
+
+.message-row.user .message-link-preview-image {
+  flex-basis: 32px;
+  width: 32px;
+  height: 32px;
+}
+
 @media (max-width: 540px) {
   .markdown-table-scroll :is(th, td) {
     min-width: 88px;