@abot-ai/runtime 1.1.0 → 1.3.0

package/dist/src/web-ui/app/styles/27-conversation-tools.css

@@ -0,0 +1,266 @@
+.conversation-tools {
+  min-width: 0;
+}
+
+@media (max-width: 600px) {
+  .conversation-activity.has-tool-summary .conversation-activity-summary {
+    flex-wrap: wrap;
+    gap: 4px 8px;
+  }
+
+  .conversation-activity.has-tool-summary .conversation-activity-heading {
+    flex-shrink: 0;
+  }
+
+  .conversation-activity.has-tool-summary .conversation-activity-facts {
+    flex: 1 1 100%;
+    max-width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    text-align: start;
+  }
+}
+
+.conversation-role-content > .conversation-tools {
+  margin-block-start: 4px;
+}
+
+.conversation-tools-title {
+  margin: 0 0 6px;
+  color: var(--text-strong);
+  font-size: var(--font-size-xs);
+  font-weight: 650;
+}
+
+.conversation-tools-list {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.conversation-tool {
+  min-width: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.conversation-tool-row + .conversation-tool-row {
+  border-block-start: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
+}
+
+.conversation-tool-summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  padding: 3px 4px;
+  cursor: pointer;
+  list-style: none;
+}
+
+.conversation-tool-summary::-webkit-details-marker {
+  display: none;
+}
+
+.conversation-tool-summary:hover .conversation-tool-title,
+.conversation-tool-summary:hover .conversation-tool-chevron {
+  color: var(--text-strong);
+}
+
+.conversation-tool-summary:focus-visible {
+  outline: 2px solid var(--accent-strong);
+  outline-offset: -2px;
+  border-radius: 2px;
+}
+
+.conversation-tool-description {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 2px 8px;
+  min-width: 0;
+}
+
+.conversation-tool-title,
+.conversation-tool-target,
+.conversation-tool-status,
+.conversation-tool-count {
+  font-size: var(--font-size-xs);
+  line-height: 1.4;
+}
+
+.conversation-tool-title {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  color: var(--text);
+  font-weight: 550;
+}
+
+.conversation-tool-target {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.conversation-tool[open] .conversation-tool-target {
+  overflow: visible;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.conversation-tool-symbol,
+.conversation-tool-chevron {
+  flex: none;
+  width: 12px;
+  color: var(--muted);
+  text-align: center;
+}
+
+.conversation-tool-status,
+.conversation-tool-count {
+  flex: none;
+  color: var(--muted);
+}
+
+.conversation-tool.is-completed .conversation-tool-symbol {
+  color: var(--green);
+}
+
+.conversation-tool.is-failed .conversation-tool-symbol,
+.conversation-tool.is-failed .conversation-tool-status {
+  color: var(--danger);
+}
+
+.conversation-tool.is-awaiting_approval .conversation-tool-status,
+.conversation-tool.is-incomplete .conversation-tool-status {
+  color: var(--amber);
+}
+
+.conversation-tool[open]
+  > .conversation-tool-summary
+  .conversation-tool-chevron {
+  transform: rotate(180deg);
+}
+
+.conversation-tool-body {
+  padding: 1px 4px 6px;
+  padding-inline-start: 22px;
+}
+
+.conversation-tool-intent,
+.conversation-tool-notice,
+.conversation-tool-unrecorded,
+.conversation-tool-preview-label {
+  margin: 0 0 6px;
+  color: var(--muted);
+  overflow-wrap: anywhere;
+  font-size: var(--font-size-xs);
+  line-height: 1.5;
+}
+
+.conversation-tool-panels {
+  display: grid;
+  gap: 5px;
+}
+
+.conversation-tool-evidence {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 8px;
+  min-width: 0;
+}
+
+.conversation-tool-fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px 12px;
+  margin: 0;
+  font-size: var(--font-size-xs);
+  line-height: 1.5;
+}
+
+.conversation-tool-field {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  min-width: 0;
+}
+
+.conversation-tool-field-label {
+  flex: none;
+  color: var(--muted);
+}
+
+.conversation-tool-field-label::after {
+  content: ":";
+}
+
+.conversation-tool-field-value {
+  min-width: 0;
+  margin: 0;
+  color: var(--text);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.conversation-tool-text-block {
+  flex-basis: 100%;
+  min-width: 0;
+}
+
+.conversation-tool-preview-label {
+  margin: 0 0 3px;
+}
+
+.conversation-tool-preview {
+  max-height: 110px;
+  margin: 0;
+  padding: 6px;
+  overflow: auto;
+  border-radius: 5px;
+  background: var(--panel);
+  color: var(--text);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  line-height: 1.5;
+}
+
+.conversation-tool-notice {
+  margin: 4px 0 0;
+}
+
+.conversation-tool-unrecorded {
+  margin: 0;
+}
+
+@media (max-width: 540px) {
+  .conversation-tool-summary {
+    min-height: 40px;
+    padding-block: 4px;
+  }
+
+  .conversation-tool-description {
+    display: grid;
+    gap: 1px;
+  }
+
+  .conversation-tool-status {
+    max-width: 100px;
+    text-align: end;
+  }
+}
+
+@media (pointer: coarse) {
+  .conversation-tool-summary {
+    min-height: 44px;
+  }
+}

package/dist/src/web-ui/app/styles/28-conversation-status.css

@@ -0,0 +1,52 @@
+.conversation-status {
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  padding: 5px 0 8px;
+  color: var(--muted);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.6;
+}
+
+.conversation-status[hidden] {
+  display: none;
+}
+
+@supports ((background-clip: text) or (-webkit-background-clip: text)) {
+  .conversation-status.is-animated {
+    background-image: linear-gradient(
+      105deg,
+      var(--muted) 38%,
+      var(--text) 48%,
+      #fff 50%,
+      var(--text) 52%,
+      var(--muted) 62%
+    );
+    background-size: 240% 100%;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    animation: conversation-status-shimmer var(--status-shimmer-duration)
+      ease-in-out infinite;
+    animation-delay: var(--status-shimmer-delay);
+  }
+}
+
+@keyframes conversation-status-shimmer {
+  0% {
+    background-position: 150% 0;
+  }
+  65%,
+  100% {
+    background-position: -150% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce), (forced-colors: active) {
+  .conversation-status.is-animated {
+    animation: none;
+    background: none;
+    color: var(--muted);
+  }
+}

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;
 }