@qwen-code/arena-agent 0.0.8 → 0.0.9-dev.0

package/web/styles.css

@@ -520,6 +520,51 @@ a:focus-visible {
   animation: none;
 }
 
+.session-metrics {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 7px;
+  margin-left: auto;
+  margin-right: 18px;
+}
+
+.metric-chip {
+  display: grid;
+  min-width: 118px;
+  grid-template-columns: auto auto;
+  gap: 7px;
+  align-items: baseline;
+  padding: 6px 9px;
+  border: 1px solid var(--line-soft);
+  border-radius: 6px;
+  background: rgb(255 255 255 / 2%);
+  white-space: nowrap;
+}
+
+.metric-chip small {
+  color: var(--dim);
+  font-size: 9px;
+}
+
+.metric-chip strong {
+  color: var(--text-soft);
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.metric-chip[data-state="good"] strong {
+  color: var(--accent);
+}
+
+.metric-chip[data-state="warning"] strong {
+  color: #d9a255;
+}
+
+.metric-chip[data-state="bad"] strong {
+  color: var(--red);
+}
+
 @keyframes pulse {
   50% {
     opacity: 0.35;
@@ -768,7 +813,9 @@ a:focus-visible {
 .add-files,
 .composer-tools button,
 .artifact-toggle,
+.undo-button,
 .send-button,
+.retry-button,
 .stop-button {
   height: 34px;
   border: 1px solid var(--line);
@@ -808,7 +855,8 @@ a:focus-visible {
 
 .add-files:hover,
 .composer-tools button:hover,
-.artifact-toggle:hover {
+.artifact-toggle:hover,
+.undo-button:hover:not(:disabled) {
   border-color: #6b6661;
   background: var(--panel-raised);
 }
@@ -828,6 +876,17 @@ a:focus-visible {
   font-size: 9px;
 }
 
+.undo-button {
+  padding: 0 10px;
+  color: var(--text-soft);
+  font-size: 11px;
+}
+
+.undo-button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
 .send-button {
   display: grid;
   width: 34px;
@@ -857,6 +916,23 @@ a:focus-visible {
   font-size: 10px;
 }
 
+.retry-button {
+  padding: 0 11px;
+  border-color: #7a6841;
+  color: #e8c978;
+  font-size: 11px;
+}
+
+.retry-button:hover:not(:disabled) {
+  border-color: #b69b5e;
+  background: rgb(182 155 94 / 12%);
+}
+
+.retry-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
 .stop-button span {
   width: 7px;
   height: 7px;
@@ -1525,7 +1601,7 @@ audio.artifact-preview-content {
   }
 
   .workspace-shell {
-    grid-template-rows: 56px minmax(0, 1fr);
+    grid-template-rows: 88px minmax(0, 1fr);
   }
 
   .topbar {
@@ -1546,6 +1622,35 @@ audio.artifact-preview-content {
     position: static;
   }
 
+  .session-metrics {
+    position: absolute;
+    top: 52px;
+    right: 8px;
+    left: 8px;
+    justify-content: center;
+    gap: 4px;
+    margin: 0;
+  }
+
+  .metric-chip {
+    min-width: 0;
+    padding: 5px 6px;
+  }
+
+  .metric-chip small {
+    display: none;
+  }
+
+  .metric-chip strong {
+    font-size: 0;
+  }
+
+  .metric-chip strong::after {
+    color: inherit;
+    content: attr(data-mobile-value);
+    font-size: 9px;
+  }
+
   .mode-toggle {
     padding: 0 8px;
   }
@@ -1559,6 +1664,7 @@ audio.artifact-preview-content {
 
   .connection {
     position: absolute;
+    top: 20px;
     right: 15px;
     display: flex;
     margin: 0;
@@ -1588,7 +1694,7 @@ audio.artifact-preview-content {
   }
 
   .announcement {
-    top: 76px;
+    top: 108px;
     width: min(296.98px, calc(100vw - 32px));
     height: 38px;
     max-width: none;