@abot-ai/runtime 1.1.0 → 1.3.0

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

@@ -0,0 +1,205 @@
+.conversation-role-view,
+.conversation-role-panel,
+.conversation-role-content {
+  min-width: 0;
+}
+
+.conversation-role-view {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 6px;
+}
+
+.conversation-role-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.conversation-role-label {
+  color: var(--muted);
+  font-size: var(--font-size-xs);
+}
+
+.conversation-role-toggle {
+  min-height: 32px;
+  padding: 4px 8px;
+  border-color: transparent;
+  background: transparent;
+  font-size: var(--font-size-xs);
+  line-height: 1.4;
+  cursor: pointer;
+}
+
+.conversation-role-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.conversation-role-card,
+.conversation-role-summary-item {
+  --role-accent: #58b9a8;
+}
+
+.conversation-role-card {
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr);
+  align-items: start;
+  gap: 10px;
+  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-card[data-role="reviewer"],
+.conversation-role-summary-item[data-role="reviewer"] {
+  --role-accent: #e0ac4f;
+}
+
+.conversation-role-card.is-failed,
+.conversation-role-summary-item.is-failed {
+  --role-accent: #ffb4ab;
+}
+
+.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-summary-strip {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  gap: 4px;
+  white-space: nowrap;
+}
+
+.conversation-role-summary-strip .conversation-role-avatar {
+  margin-block-start: 0;
+}
+
+.conversation-activity[open] .conversation-role-summary-strip,
+.conversation-activity.has-role-summary:not([open])
+  .conversation-activity-current {
+  display: none;
+}
+
+.conversation-activity.has-role-summary:not([open])
+  > .conversation-activity-summary {
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 6px 10px;
+}
+
+.conversation-activity.has-role-summary:not([open])
+  .conversation-activity-heading {
+  max-width: 100%;
+}
+
+.conversation-activity.has-role-summary:not([open])
+  .conversation-activity-facts {
+  max-width: 100%;
+  margin-inline-start: auto;
+  overflow-wrap: anywhere;
+}
+
+.conversation-role-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 2px 8px;
+  line-height: 1.4;
+}
+
+.conversation-role-title {
+  color: var(--text-strong);
+  font-size: var(--font-size-md);
+  font-weight: 650;
+}
+
+.conversation-role-responsibility {
+  min-width: 0;
+  color: var(--muted);
+  font-size: var(--font-size-xs);
+  overflow-wrap: anywhere;
+}
+
+.conversation-role-active {
+  align-self: center;
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text);
+  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;
+  font-size: var(--font-size-md);
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+.conversation-role-action-label,
+.conversation-role-error {
+  color: var(--muted);
+  font-size: var(--font-size-xs);
+}
+
+.conversation-role-facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px 8px;
+  margin: 0;
+  padding: 0;
+  color: var(--muted-2);
+  font-size: var(--font-size-xs);
+  list-style: none;
+}
+
+.conversation-role-fact {
+  overflow-wrap: anywhere;
+}
+
+@keyframes conversation-role-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .conversation-role-active {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,141 @@
+.conversation-sources {
+  min-width: 0;
+  margin-block-start: 8px;
+  padding-block-start: 8px;
+  border-block-start: 1px solid var(--line);
+}
+
+.conversation-sources-heading,
+.conversation-sources-group-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 6px;
+}
+
+.conversation-sources-title,
+.conversation-sources-operation {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  line-height: 1.4;
+}
+
+.conversation-sources-title {
+  color: var(--text-strong);
+  font-weight: 650;
+}
+
+.conversation-sources-operation,
+.conversation-sources-provider {
+  color: var(--muted);
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+}
+
+.conversation-sources-group {
+  margin-block-start: 5px;
+}
+
+.conversation-sources-list {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 5px;
+  margin: 4px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.conversation-source-card {
+  min-width: 0;
+}
+
+.conversation-source-link {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 6px;
+  box-sizing: border-box;
+  height: 32px;
+  min-width: 0;
+  padding: 6px 8px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--text) 2%, transparent);
+  color: inherit;
+  text-decoration: none;
+}
+
+.conversation-source-link:hover {
+  background: color-mix(in srgb, var(--text) 5%, transparent);
+}
+
+.conversation-source-link:focus-visible {
+  outline: 2px solid var(--text);
+  outline-offset: 2px;
+}
+
+.conversation-source-icon {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.conversation-source-favicon {
+  position: absolute;
+  inset: 0;
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+
+.conversation-source-favicon[hidden],
+.conversation-source-initial[hidden] {
+  display: none;
+}
+
+.conversation-source-domain,
+.conversation-source-status {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-xs);
+  line-height: 1.4;
+}
+
+.conversation-source-domain {
+  min-width: 0;
+  color: var(--text);
+  text-align: start;
+}
+
+.conversation-source-status {
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.conversation-source-status.is-failed {
+  color: #ffb4ab;
+}
+
+.conversation-sources-omitted {
+  margin: 4px 0 0;
+  color: var(--muted);
+  font-size: var(--font-size-xs);
+  line-height: 1.4;
+}
+
+@media (max-width: 1000px) {
+  .conversation-sources-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 540px) {
+  .conversation-sources-list {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

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

@@ -0,0 +1,295 @@
+.markdown-body {
+  color: var(--text);
+  line-height: 1.65;
+}
+
+:is(.markdown-body, .thinking-body) {
+  min-width: 0;
+  white-space: normal;
+}
+
+:is(.markdown-body, .thinking-body) > :first-child {
+  margin-top: 0;
+}
+
+:is(.markdown-body, .thinking-body) > :last-child {
+  margin-bottom: 0;
+}
+
+:is(.markdown-body, .thinking-body) p {
+  margin: 0 0 12px;
+}
+
+:is(.markdown-body, .thinking-body) :is(h1, h2, h3, h4, h5, h6) {
+  margin: 20px 0 8px;
+  color: var(--text-strong);
+  font-weight: 650;
+  line-height: 1.3;
+}
+
+:is(.markdown-body, .thinking-body) h1 {
+  font-size: var(--font-size-4xl);
+}
+
+:is(.markdown-body, .thinking-body) h2 {
+  font-size: var(--font-size-3xl);
+}
+
+:is(.markdown-body, .thinking-body) h3 {
+  font-size: var(--font-size-2xl);
+}
+
+:is(.markdown-body, .thinking-body) :is(h4, h5, h6) {
+  font-size: var(--font-size-xl);
+}
+
+:is(.markdown-body, .thinking-body) strong {
+  color: var(--text-strong);
+  font-weight: 700;
+}
+
+:is(.markdown-body, .thinking-body) em {
+  font-style: italic;
+}
+
+:is(.markdown-body, .thinking-body) :is(del, s) {
+  color: var(--muted);
+}
+
+:is(.markdown-body, .thinking-body) :is(ul, ol) {
+  margin: 10px 0 14px;
+  padding-inline-start: 26px;
+}
+
+:is(.markdown-body, .thinking-body) li {
+  margin: 9px 0;
+  padding-inline-start: 4px;
+}
+
+:is(.markdown-body, .thinking-body) li::marker {
+  color: color-mix(in srgb, var(--accent-strong) 72%, var(--muted));
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+}
+
+:is(.markdown-body, .thinking-body) li li {
+  margin-block: 4px;
+}
+
+:is(.markdown-body, .thinking-body) li :is(ul, ol) {
+  margin-block: 5px;
+}
+
+:is(.markdown-body, .thinking-body) li > p {
+  margin-bottom: 5px;
+}
+
+:is(.markdown-body, .thinking-body) blockquote {
+  margin: 14px 0;
+  padding: 8px 12px;
+  border-inline-start: 2px solid var(--accent);
+  background: var(--panel-soft);
+  color: var(--muted);
+}
+
+:is(.markdown-body, .thinking-body) blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+:is(.markdown-body, .thinking-body) hr {
+  margin: 18px 0;
+  border: 0;
+  border-top: 1px solid var(--line-strong);
+}
+
+:is(.markdown-body, .thinking-body) pre {
+  max-width: 100%;
+  margin: 14px 0;
+  padding: 14px 15px;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--bg);
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  overflow-wrap: normal;
+  line-height: 1.55;
+}
+
+:is(.markdown-body, .thinking-body) code {
+  padding: 1px 5px;
+  border-radius: 5px;
+  background: var(--panel-soft);
+  color: var(--text);
+  direction: ltr;
+  unicode-bidi: isolate;
+  font-family: var(--font-mono);
+  font-size: 0.92em;
+}
+
+:is(.markdown-body, .thinking-body) pre code {
+  display: block;
+  padding: 0;
+  background: transparent;
+  white-space: inherit;
+}
+
+:is(.markdown-body, .thinking-body) a {
+  color: var(--accent-strong);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
+  text-underline-offset: 3px;
+  border-radius: 3px;
+  unicode-bidi: isolate;
+  overflow-wrap: anywhere;
+  transition:
+    background-color 120ms ease,
+    text-decoration-color 120ms ease;
+}
+
+:is(.markdown-body, .thinking-body) a:hover {
+  color: var(--text-strong);
+  background: var(--accent-soft);
+  text-decoration-color: currentColor;
+}
+
+:is(.markdown-body, .thinking-body) a:focus-visible,
+.markdown-table-scroll:focus-visible,
+.message-link-preview:focus-visible {
+  outline: 2px solid var(--accent-strong);
+  outline-offset: 3px;
+  border-radius: 3px;
+}
+
+.markdown-table-scroll {
+  max-width: 100%;
+  margin: 14px 0;
+  overflow-x: auto;
+  border: 1px solid var(--line-strong);
+  border-radius: 8px;
+}
+
+.markdown-table-scroll table {
+  width: max-content;
+  min-width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-lg);
+  line-height: 1.5;
+}
+
+.markdown-table-scroll :is(th, td) {
+  min-width: 100px;
+  max-width: 360px;
+  padding: 9px 12px;
+  border-inline-end: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  text-align: start;
+  vertical-align: top;
+}
+
+.markdown-table-scroll th {
+  background: var(--panel-raised);
+  color: var(--text-strong);
+  font-weight: 650;
+}
+
+.markdown-table-scroll tr > :last-child {
+  border-inline-end: 0;
+}
+
+.markdown-table-scroll tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.markdown-table-scroll tbody tr:nth-child(even) {
+  background: var(--panel-soft);
+}
+
+.message-link-previews {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
+  gap: 8px;
+  min-width: 0;
+  margin-block: 10px;
+  white-space: normal;
+}
+
+.message-link-preview {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: 360px;
+  height: 78px;
+  padding: 9px 10px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: var(--panel-soft);
+  color: var(--text);
+  text-decoration: none;
+  text-align: start;
+}
+
+.message-link-preview:hover {
+  border-color: var(--accent-strong);
+  background: var(--control-bg-hover);
+}
+
+.message-link-preview-image {
+  flex: 0 0 48px;
+  width: 48px;
+  height: 48px;
+  border-radius: 5px;
+  object-fit: cover;
+  background: var(--bg);
+}
+
+.message-link-preview-content {
+  display: grid;
+  flex: 1;
+  align-content: center;
+  gap: 3px;
+  min-width: 0;
+}
+
+.message-link-preview-domain {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--muted);
+  direction: ltr;
+  unicode-bidi: isolate;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-xs);
+  line-height: 1.3;
+}
+
+.message-link-preview-title {
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--text-strong);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.message-link-preview:hover .message-link-preview-title {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+@media (max-width: 540px) {
+  .markdown-table-scroll :is(th, td) {
+    min-width: 88px;
+    padding: 8px 10px;
+  }
+}