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

package/dist/src/web-ui/app/styles/30-inspector-config.css

@@ -1,8 +1,4 @@
-/* Inspector, operations, health, and logs ---------------------------------- */
-
-.logs-view {
-  font-family: var(--font-mono);
-}
+/* Inspector and shared workspace foundations ------------------------------ */
 
 .inspector-tabs {
   display: grid;
@@ -27,7 +23,7 @@
   color: var(--muted);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 11.5px;
+  font-size: var(--font-size-sm);
   font-weight: 650;
   box-shadow: none;
 }
@@ -82,19 +78,19 @@
   justify-content: space-between;
   gap: 10px;
   color: var(--muted);
-  font-size: 11px;
+  font-size: var(--font-size-sm);
   font-weight: 780;
   text-transform: uppercase;
 }
 
 .task-progress-topline strong {
   color: var(--accent-strong);
-  font-size: 11px;
+  font-size: var(--font-size-sm);
 }
 
 .task-progress-summary {
   color: var(--text-strong);
-  font-size: 13px;
+  font-size: var(--font-size-lg);
   font-weight: 710;
   line-height: 1.35;
 }
@@ -115,7 +111,7 @@
 
 .task-progress-count {
   color: var(--muted);
-  font-size: 11.5px;
+  font-size: var(--font-size-sm);
   font-weight: 650;
 }
 
@@ -130,7 +126,7 @@
   gap: 8px;
   align-items: start;
   color: var(--muted);
-  font-size: 12px;
+  font-size: var(--font-size-md);
   line-height: 1.3;
 }
 
@@ -230,7 +226,7 @@
   color: var(--text-strong);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 12.5px;
+  font-size: var(--font-size-md);
   font-weight: 700;
 }
 
@@ -249,7 +245,7 @@
   background: rgba(255, 255, 255, 0.075);
   color: var(--muted);
   text-align: center;
-  font-size: 10.5px;
+  font-size: var(--font-size-xs);
   font-weight: 760;
   line-height: 1.35;
 }
@@ -257,37 +253,10 @@
 .event-meta {
   margin-top: 4px;
   color: var(--muted);
-  font-size: 10.5px;
+  font-size: var(--font-size-xs);
   line-height: 1.35;
 }
 
-.runtime-card {
-  padding: 12px;
-  overflow: hidden;
-  line-height: 1.5;
-}
-
-.runtime-grid {
-  display: grid;
-  gap: 10px;
-}
-
-.runtime-row {
-  display: grid;
-  grid-template-columns: 88px minmax(0, 1fr);
-  gap: 10px;
-  min-width: 0;
-}
-
-.runtime-row span:first-child {
-  color: var(--muted);
-}
-
-.runtime-row strong {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
 .logs-view,
 .config-view {
   flex: 1;
@@ -296,7 +265,7 @@
   padding: 12px;
   overflow: auto;
   color: #dce3ee;
-  font-size: 12px;
+  font-size: var(--font-size-md);
   line-height: 1.45;
   white-space: pre-wrap;
 }
@@ -307,87 +276,6 @@
   resize: vertical;
 }
 
-.health-topline {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  margin-bottom: 12px;
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 720;
-}
-
-.health-pill {
-  min-width: 48px;
-  padding: 3px 8px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 7px;
-  background: rgba(255, 255, 255, 0.07);
-  text-align: center;
-  color: var(--text);
-  font-size: 11px;
-  font-weight: 780;
-  text-transform: uppercase;
-}
-
-.health-pill.healthy {
-  border-color: rgba(50, 215, 75, 0.2);
-  background: rgba(50, 215, 75, 0.12);
-  color: #9ef0aa;
-}
-
-.health-pill.failed {
-  border-color: rgba(255, 69, 58, 0.24);
-  background: rgba(255, 69, 58, 0.13);
-  color: #ffb0ab;
-}
-
-.health-requests {
-  display: grid;
-  gap: 8px;
-  margin-top: 13px;
-  padding-top: 13px;
-  border-top: 1px solid var(--line);
-}
-
-.health-request {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 12px;
-  align-items: center;
-  padding: 8px 9px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.045);
-}
-
-.health-request div {
-  display: grid;
-  min-width: 0;
-  gap: 3px;
-}
-
-.health-request div:last-child {
-  justify-items: end;
-}
-
-.health-request strong {
-  overflow: hidden;
-  color: var(--text-strong);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-}
-
-.health-request span {
-  overflow: hidden;
-  color: var(--muted);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 11px;
-}
-
 .empty-state {
   margin: auto;
   color: var(--muted);
@@ -397,7 +285,7 @@
 .empty-state.compact {
   margin: 14px 0 0;
   text-align: left;
-  font-size: 12px;
+  font-size: var(--font-size-md);
 }
 
 .error-text {
@@ -411,7 +299,7 @@
 }
 
 .inspector-heading h2 {
-  font-size: 17px;
+  font-size: var(--font-size-3xl);
 }
 
 .inspector-heading .icon-button {
@@ -441,7 +329,7 @@
   padding: 0 9px;
   border-radius: 8px;
   color: var(--muted);
-  font-size: 11.5px;
+  font-size: var(--font-size-sm);
   font-weight: 620;
 }
 
@@ -465,7 +353,7 @@
   justify-content: space-between;
   gap: 10px;
   color: var(--muted);
-  font-size: 11px;
+  font-size: var(--font-size-sm);
   font-weight: 760;
   letter-spacing: 0.02em;
   text-transform: uppercase;
@@ -477,7 +365,7 @@
   border-color: transparent;
   background: rgba(255, 255, 255, 0.06);
   color: var(--text);
-  font-size: 11.5px;
+  font-size: var(--font-size-sm);
   font-weight: 650;
   text-transform: none;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
@@ -496,7 +384,7 @@
 .panel-toolbar {
   min-height: 30px;
   color: var(--muted);
-  font-size: 10px;
+  font-size: var(--font-size-xs);
   letter-spacing: 0.06em;
 }
 
@@ -529,7 +417,7 @@
 
 .event-name {
   color: var(--text);
-  font-size: 12px;
+  font-size: var(--font-size-md);
 }
 
 .event-meta {
@@ -537,13 +425,6 @@
   line-height: 1.45;
 }
 
-.runtime-row,
-.health-request {
-  border-color: rgba(112, 157, 201, 0.13);
-  border-radius: 10px;
-  background: rgba(54, 94, 133, 0.08);
-}
-
 .panel-backdrop {
   position: fixed;
   inset: 0;
@@ -675,7 +556,7 @@
 .workspace-page-heading h2 {
   margin: 0;
   color: var(--text-strong);
-  font-size: 20px;
+  font-size: var(--font-size-5xl);
   font-weight: 680;
   letter-spacing: -0.025em;
 }
@@ -684,7 +565,7 @@
   max-width: 620px;
   margin: 5px 0 0;
   color: var(--muted);
-  font-size: 12px;
+  font-size: var(--font-size-md);
   line-height: 1.45;
 }
 
@@ -722,13 +603,6 @@
   margin-inline: auto;
 }
 
-.app-shell.operations-workspace {
-  display: grid;
-  grid-template-columns: 72px minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr);
-  overflow: hidden;
-  background: var(--bg);
-}
 .panel-backdrop {
   inset: 0 0 0 72px;
   z-index: 50;
@@ -742,68 +616,6 @@
   z-index: 90;
 }
 
-/* Operations navigation and content. */
-
-.operations-workspace-body {
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  align-content: start;
-  gap: 18px;
-}
-
-.operations-tabs {
-  position: sticky;
-  top: 0;
-  z-index: 6;
-  display: flex;
-  gap: 4px;
-  width: min(1260px, 100%);
-  padding: 4px;
-  border: 1px solid rgba(114, 162, 210, 0.16);
-  border-radius: 12px;
-  background: rgba(11, 29, 47, 0.96);
-  box-shadow: 0 12px 32px rgba(0, 7, 18, 0.14);
-  backdrop-filter: blur(16px);
-}
-
-.operations-tab-button {
-  flex: 0 1 150px;
-  min-height: 36px;
-  border: 0;
-  border-radius: 9px;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 620;
-}
-
-.operations-tab-button:hover {
-  background: rgba(84, 133, 181, 0.09);
-  color: var(--text);
-}
-
-.operations-tab-button.active {
-  background: rgba(76, 136, 218, 0.16);
-  color: #dceaff;
-}
-
-.operations-tab-page {
-  display: none;
-  width: min(1260px, 100%);
-  min-height: 0;
-}
-
-.operations-tab-page.active {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.operations-tab-page .runtime-card,
-.operations-tab-page .logs-view {
-  min-height: 280px;
-  padding: clamp(18px, 3vw, 30px);
-}
-
 /* Rail state hooks shared by full workspace destinations. */
 
 .workspace-rail .rail-button[aria-current="page"] {
@@ -830,7 +642,7 @@
   color: #a8bdd2;
   text-overflow: clip;
   white-space: nowrap;
-  font-size: 10px;
+  font-size: var(--font-size-xs);
   font-weight: 650;
   letter-spacing: 0.035em;
 }