@abot-ai/runtime 1.0.0 → 1.2.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);
+  }
+}