@abot-ai/runtime 1.1.0 → 1.2.0

package/dist/src/web-ui/app/styles/20-chat-composer.css

@@ -34,238 +34,17 @@
 }
 
 .chat-header h2 {
-  max-width: min(36vw, 520px);
+  max-width: 100%;
   margin: 0;
   overflow: hidden;
   color: var(--text-strong);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 16px;
+  font-size: var(--font-size-2xl);
   font-weight: 400;
   letter-spacing: -0.012em;
 }
 
-.header-controls {
-  display: flex;
-  flex: none;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 6px;
-  min-width: 0;
-}
-
-.control-cluster {
-  position: relative;
-  display: block;
-  min-width: 0;
-}
-
-.agent-mode-control {
-  width: 152px;
-}
-
-.model-control {
-  width: clamp(145px, 17vw, 220px);
-}
-
-.agent-mode-button,
-.model-select-button {
-  min-height: 34px;
-  border-color: transparent;
-  border-radius: 9px;
-  background: rgba(93, 133, 173, 0.08);
-  color: var(--muted);
-  box-shadow: none;
-}
-
-.agent-mode-button:hover,
-.model-select-button:hover {
-  border-color: transparent;
-  background: rgba(97, 143, 187, 0.12);
-  color: var(--text);
-}
-
-.agent-mode-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 7px;
-  width: 100%;
-  padding: 0 9px;
-  font-size: 12px;
-  font-weight: 400;
-}
-
-.agent-mode-button > span:last-child {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.agent-mode-icon,
-.agent-mode-option-icon {
-  display: grid;
-  place-items: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 5px;
-  background: rgba(242, 187, 92, 0.1);
-  color: #e8c47f;
-  font-size: 10px;
-  font-weight: 400;
-}
-
-.model-select-button {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-  min-width: 0;
-  padding: 0 9px 0 11px;
-  font-size: 12px;
-  font-weight: 400;
-}
-
-.model-select-button > span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.model-select-button svg {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: currentColor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 1.7;
-  transition: transform 120ms ease;
-}
-
-.model-select-button.open svg {
-  transform: rotate(180deg);
-}
-
-.agent-mode-menu,
-.model-select-menu,
-.permission-mode-menu {
-  position: absolute;
-  z-index: 80;
-  display: grid;
-  gap: 3px;
-  padding: 5px;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: #132438;
-  box-shadow: 0 18px 42px rgba(0, 6, 16, 0.34);
-  opacity: 0;
-  pointer-events: none;
-  transition:
-    opacity 120ms ease,
-    transform 120ms ease;
-}
-
-.agent-mode-menu {
-  top: calc(100% + 7px);
-  right: 0;
-  width: 260px;
-  transform: translateY(-4px);
-}
-
-.model-select-menu {
-  top: calc(100% + 7px);
-  right: 0;
-  width: max(100%, 230px);
-  max-height: min(420px, calc(100vh - 86px));
-  overflow-y: auto;
-  transform: translateY(-4px);
-}
-
-.agent-mode-menu.open,
-.model-select-menu.open,
-.permission-mode-menu.open {
-  opacity: 1;
-  pointer-events: auto;
-  transform: none;
-}
-
-.agent-mode-option,
-.model-select-option,
-.permission-mode-option {
-  border-color: transparent;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--text);
-  text-align: left;
-  box-shadow: none;
-}
-
-.agent-mode-option:hover,
-.agent-mode-option.selected,
-.model-select-option:hover,
-.model-select-option.selected,
-.permission-mode-option:hover,
-.permission-mode-option.selected {
-  border-color: transparent;
-  background: rgba(91, 138, 183, 0.11);
-}
-
-.model-select-option {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 18px;
-  gap: 10px;
-  align-items: center;
-  min-height: 38px;
-  padding: 7px 9px;
-  font-size: 13px;
-  font-weight: 400;
-}
-
-.model-select-option-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.model-select-check {
-  color: #8eb7ec;
-  text-align: center;
-}
-
-.agent-mode-option {
-  display: grid;
-  grid-template-columns: 24px minmax(0, 1fr);
-  gap: 8px;
-  align-items: center;
-  min-height: 48px;
-  padding: 7px 9px;
-}
-
-.agent-mode-option strong,
-.agent-mode-option small,
-.permission-mode-option strong,
-.permission-mode-option small {
-  display: block;
-}
-
-.agent-mode-option strong,
-.permission-mode-option strong {
-  color: var(--text);
-  font-size: 12px;
-  font-weight: 400;
-}
-
-.agent-mode-option small,
-.permission-mode-option small {
-  margin-top: 2px;
-  color: var(--muted-2);
-  font-size: 11px;
-  font-weight: 450;
-}
-
 .messages-list {
   grid-row: 2;
   display: flex;
@@ -321,7 +100,7 @@
 .runtime-setup-copy h3 {
   margin: 0;
   color: var(--text-strong);
-  font-size: clamp(22px, 2.2vw, 28px);
+  font-size: clamp(1.75rem, 2.8vw, var(--font-size-7xl));
   letter-spacing: -0.026em;
   line-height: 1.25;
 }
@@ -330,7 +109,7 @@
   max-width: 620px;
   margin: 10px 0 0;
   color: var(--muted);
-  font-size: 14px;
+  font-size: var(--font-size-xl);
   line-height: 1.65;
 }
 
@@ -346,12 +125,12 @@
 
 .runtime-setup-status strong {
   color: var(--text);
-  font-size: 13px;
+  font-size: var(--font-size-lg);
 }
 
 .runtime-setup-status span {
   color: var(--muted);
-  font-size: 12px;
+  font-size: var(--font-size-md);
   line-height: 1.5;
 }
 
@@ -375,7 +154,7 @@
   gap: 9px;
   margin: 0;
   color: var(--text);
-  font-size: 13px;
+  font-size: var(--font-size-lg);
   line-height: 1.4;
 }
 
@@ -390,7 +169,7 @@
   border: 1px solid var(--line-strong);
   border-radius: 50%;
   color: var(--accent-strong);
-  font-size: 11px;
+  font-size: var(--font-size-sm);
 }
 
 .runtime-provider-options {
@@ -429,13 +208,13 @@
 
 .runtime-provider-option strong {
   color: var(--text);
-  font-size: 13px;
+  font-size: var(--font-size-lg);
 }
 
 .runtime-provider-option small {
   margin-top: 3px;
   color: var(--muted-2);
-  font-size: 11.5px;
+  font-size: var(--font-size-sm);
   line-height: 1.4;
 }
 
@@ -454,7 +233,7 @@
   background: var(--control-bg);
   color: var(--text);
   font-family: var(--mono);
-  font-size: 13px;
+  font-size: var(--font-size-lg);
 }
 
 .runtime-model-field input:focus {
@@ -464,7 +243,7 @@
 
 .runtime-model-field > small {
   color: var(--muted-2);
-  font-size: 11.5px;
+  font-size: var(--font-size-sm);
 }
 
 .runtime-model-field > small.error {
@@ -483,7 +262,7 @@
 .runtime-setup-footer p {
   margin: 0;
   color: var(--muted);
-  font-size: 12px;
+  font-size: var(--font-size-md);
   line-height: 1.6;
 }
 
@@ -511,7 +290,7 @@
   padding: 5px 7px 5px 11px;
   border-bottom: 1px solid rgba(122, 158, 191, 0.14);
   color: #93a9bd;
-  font-size: 10.5px;
+  font-size: var(--font-size-xs);
 }
 
 .runtime-terminal-heading button {
@@ -521,7 +300,7 @@
   border-radius: 6px;
   background: rgba(112, 153, 190, 0.1);
   color: #c8d8e7;
-  font-size: 10.5px;
+  font-size: var(--font-size-xs);
 }
 
 .runtime-terminal-heading button:hover:not(:disabled),
@@ -541,7 +320,7 @@
   overflow: auto;
   color: #d4e3f0;
   font-family: var(--mono);
-  font-size: 11.5px;
+  font-size: var(--font-size-sm);
   line-height: 1.65;
   text-align: left;
   direction: ltr;
@@ -557,7 +336,7 @@
   min-height: 17px;
   padding: 0 11px 4px;
   color: #89b7dd;
-  font-size: 10.5px;
+  font-size: var(--font-size-xs);
 }
 
 .runtime-copy-status.error {
@@ -575,7 +354,7 @@
   display: block;
   margin-bottom: 4px;
   color: var(--text);
-  font-size: 12px;
+  font-size: var(--font-size-md);
 }
 
 .runtime-provider-note {
@@ -595,7 +374,7 @@
   background: var(--control-bg);
   color: var(--text);
   font-family: var(--mono);
-  font-size: 10.5px;
+  font-size: var(--font-size-xs);
 }
 
 .runtime-setup-footer {
@@ -619,7 +398,7 @@
   border-radius: 10px;
   background: var(--accent-soft);
   color: var(--accent-strong);
-  font-size: 13px;
+  font-size: var(--font-size-lg);
 }
 
 .runtime-setup-action:hover:not(:disabled) {
@@ -648,7 +427,7 @@
 .mode-empty-title {
   max-width: 560px;
   color: var(--text-strong);
-  font-size: clamp(24px, 2.4vw, 29px);
+  font-size: clamp(var(--font-size-6xl), 3vw, var(--font-size-7xl));
   font-weight: 400;
   letter-spacing: -0.028em;
   line-height: 1.28;
@@ -659,7 +438,7 @@
   max-width: 520px;
   margin-top: 10px;
   color: var(--muted);
-  font-size: 14px;
+  font-size: var(--font-size-xl);
   line-height: 1.6;
 }
 
@@ -687,7 +466,7 @@
   color: var(--text);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
-  font-size: 14.5px;
+  font-size: var(--font-size-xl);
   line-height: 1.65;
 }
 
@@ -713,11 +492,12 @@
 
 .message-meta {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   margin-bottom: 8px;
   color: var(--muted-2);
-  font-size: 12px;
+  font-size: var(--font-size-md);
   font-weight: 400;
 }
 
@@ -816,12 +596,12 @@
 }
 
 .markdown-body h3 {
-  font-size: 18px;
+  font-size: var(--font-size-4xl);
 }
 
 .markdown-body h4,
 .markdown-body h5 {
-  font-size: 15px;
+  font-size: var(--font-size-2xl);
 }
 
 .markdown-body ul,
@@ -883,7 +663,7 @@
   border-radius: 9px;
   background: rgba(77, 111, 145, 0.055);
   color: var(--muted);
-  font-size: 12.5px;
+  font-size: var(--font-size-md);
   font-style: normal;
 }
 
@@ -896,7 +676,7 @@
   color: var(--muted);
   cursor: pointer;
   list-style: none;
-  font-size: 12px;
+  font-size: var(--font-size-md);
   font-weight: 500;
 }
 
@@ -906,7 +686,7 @@
 
 .thinking-card summary span:last-child {
   color: var(--muted-2);
-  font-size: 11px;
+  font-size: var(--font-size-sm);
 }
 
 .thinking-body {
@@ -971,7 +751,7 @@
   color: var(--muted);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 12px;
+  font-size: var(--font-size-md);
   font-weight: 400;
 }
 
@@ -982,14 +762,14 @@
   color: var(--muted);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 11px;
+  font-size: var(--font-size-sm);
   font-weight: 400;
 }
 
 .conversation-activity-facts {
   flex: none;
   color: var(--muted-2);
-  font-size: 11px;
+  font-size: var(--font-size-sm);
   font-variant-numeric: tabular-nums;
 }
 
@@ -1007,72 +787,6 @@
   scrollbar-gutter: stable;
 }
 
-.conversation-context-window {
-  display: grid;
-  gap: 7px;
-  margin: 2px 0 10px;
-  padding: 10px 12px;
-  border: 1px solid rgba(111, 154, 197, 0.16);
-  border-radius: 10px;
-  background: linear-gradient(
-    135deg,
-    rgba(67, 112, 160, 0.1),
-    rgba(6, 18, 30, 0.22)
-  );
-  box-shadow: 0 6px 18px rgba(2, 10, 18, 0.08);
-}
-
-.conversation-context-window-header {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 14px;
-}
-
-.conversation-context-window-title {
-  color: var(--text);
-  font-size: 12px;
-}
-
-.conversation-context-window-value {
-  color: #80b7ff;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-variant-numeric: tabular-nums;
-}
-
-.conversation-context-window-value.rejected {
-  color: #ef9a9a;
-}
-
-.conversation-context-window-track {
-  height: 3px;
-  overflow: hidden;
-  border-radius: 999px;
-  background: rgba(118, 157, 198, 0.12);
-}
-
-.conversation-context-window-track span {
-  display: block;
-  height: 100%;
-  border-radius: inherit;
-  background: #5d8fe1;
-  transition: width 180ms ease;
-}
-
-.conversation-context-window-detail,
-.conversation-context-window-provider,
-.conversation-context-window-compaction {
-  color: var(--muted-2);
-  font-size: 10px;
-  line-height: 1.45;
-}
-
-.conversation-context-window-compaction {
-  color: #8dd7b6;
-  font-family: var(--font-mono);
-}
-
 .conversation-activity-progress {
   display: grid;
   gap: 7px;
@@ -1095,7 +809,7 @@
   color: var(--text);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 12px;
+  font-size: var(--font-size-md);
   font-weight: 400;
 }
 
@@ -1103,7 +817,7 @@
   flex: none;
   color: var(--muted-2);
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--font-size-xs);
 }
 
 .conversation-activity-progress-track {
@@ -1136,7 +850,7 @@
   align-items: center;
   min-width: 0;
   color: var(--muted);
-  font-size: 11px;
+  font-size: var(--font-size-sm);
   line-height: 1.35;
 }
 
@@ -1233,7 +947,7 @@
   color: var(--text);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 11.5px;
+  font-size: var(--font-size-sm);
   font-weight: 400;
 }
 
@@ -1245,7 +959,7 @@
   flex: none;
   color: var(--muted-2);
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: var(--font-size-xs);
 }
 
 .conversation-activity-event-detail {
@@ -1255,7 +969,7 @@
   color: var(--muted-2);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 10.5px;
+  font-size: var(--font-size-xs);
   line-height: 1.4;
 }
 
@@ -1273,7 +987,7 @@
   gap: 8px;
   margin: 5px 0 9px;
   color: var(--muted);
-  font-size: 12px;
+  font-size: var(--font-size-md);
   white-space: normal;
 }
 
@@ -1344,7 +1058,7 @@
   border-color: transparent;
   background: transparent;
   color: var(--muted-2);
-  font-size: 11px;
+  font-size: var(--font-size-sm);
   font-weight: 500;
   box-shadow: none;
 }
@@ -1380,14 +1094,14 @@
 
 .approval-message-label {
   color: var(--muted-2);
-  font-size: 11px;
+  font-size: var(--font-size-sm);
   font-weight: 500;
   line-height: 1.35;
 }
 
 .approval-message-title {
   color: var(--text-strong);
-  font-size: 14px;
+  font-size: var(--font-size-xl);
   font-weight: 600;
   line-height: 1.4;
 }
@@ -1395,7 +1109,7 @@
 .approval-message-detail {
   margin: 0;
   color: var(--muted);
-  font-size: 12.5px;
+  font-size: var(--font-size-md);
   line-height: 1.55;
   text-align: start;
   unicode-bidi: plaintext;
@@ -1414,7 +1128,7 @@
   min-height: 34px;
   padding: 0 13px;
   border-radius: 8px;
-  font-size: 12px;
+  font-size: var(--font-size-md);
   font-weight: 600;
 }
 
@@ -1459,7 +1173,7 @@
 
 .composer {
   display: grid;
-  grid-template-columns: 34px auto minmax(0, 1fr) 36px;
+  grid-template-columns: minmax(0, 1fr);
   grid-template-rows: auto auto auto;
   gap: 7px;
   align-items: center;
@@ -1495,7 +1209,7 @@
   border: 0;
   background: transparent;
   color: var(--text-strong);
-  font-size: 14.5px;
+  font-size: var(--font-size-xl);
   line-height: 1.5;
   box-shadow: none;
   scrollbar-gutter: stable;
@@ -1539,7 +1253,7 @@
   border-radius: 7px;
   background: rgba(88, 129, 169, 0.07);
   color: var(--muted);
-  font-size: 12px;
+  font-size: var(--font-size-md);
 }
 
 .attachment-chip button {
@@ -1566,8 +1280,6 @@
 }
 
 .attachment-button {
-  grid-column: 1;
-  grid-row: 3;
   background: transparent;
   color: var(--muted);
 }
@@ -1578,76 +1290,7 @@
   color: var(--text);
 }
 
-.permission-mode-control {
-  position: relative;
-  grid-column: 2;
-  grid-row: 3;
-}
-
-.permission-mode-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  width: auto;
-  min-width: 0;
-  min-height: 32px;
-  padding: 0 9px;
-  border-color: transparent;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--muted);
-  font-size: 11.5px;
-  font-weight: 500;
-  box-shadow: none;
-}
-
-.permission-mode-button::after {
-  width: 5px;
-  height: 5px;
-  border-right: 1px solid currentColor;
-  border-bottom: 1px solid currentColor;
-  content: "";
-  opacity: 0.75;
-  transform: translateY(-1px) rotate(45deg);
-}
-
-.permission-mode-button:hover,
-.permission-mode-button.open {
-  border-color: transparent;
-  background: rgba(95, 139, 182, 0.08);
-  color: var(--text);
-}
-
-.permission-mode-button.full {
-  background: transparent;
-  color: #d3b875;
-}
-
-.permission-mode-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.permission-mode-menu {
-  right: auto;
-  bottom: calc(100% + 7px);
-  left: 0;
-  min-width: 180px;
-  transform: translateY(4px);
-}
-
-.permission-mode-option {
-  display: grid;
-  gap: 2px;
-  width: 100%;
-  min-height: 43px;
-  padding: 6px 8px;
-}
-
 .send-button {
-  grid-column: 4;
-  grid-row: 3;
   background: #2b6ddd;
   color: #fff;
 }
@@ -1663,25 +1306,6 @@
   opacity: 0.72;
 }
 
-.composer.composer-has-split-action {
-  grid-template-columns: 34px auto minmax(0, 1fr) auto;
-}
-
-.composer-submit-control {
-  position: relative;
-  grid-column: 4;
-  grid-row: 3;
-  display: inline-flex;
-  justify-self: end;
-  overflow: visible;
-  border-radius: 8px;
-}
-
-.composer-submit-control .send-button {
-  grid-column: auto;
-  grid-row: auto;
-}
-
 .composer-submit-control.split .send-button {
   width: 32px;
   min-width: 32px;
@@ -1741,15 +1365,15 @@
   right: -5px;
   display: grid;
   place-items: center;
-  min-width: 14px;
-  height: 14px;
+  min-width: 1.25rem;
+  height: 1.25rem;
   padding: 0 3px;
   border: 1px solid #132438;
   border-radius: 999px;
   background: #6889a8;
   color: #f1f6fb;
   content: attr(data-count);
-  font-size: 8px;
+  font-size: var(--font-size-xs);
   font-weight: 400;
   line-height: 1;
 }
@@ -1777,7 +1401,7 @@
   background: transparent;
   color: #c4d3e2;
   text-align: left;
-  font-size: 12px;
+  font-size: var(--font-size-md);
   font-weight: 400;
   line-height: 1.2;
   box-shadow: none;
@@ -1806,7 +1430,7 @@
   border-radius: 999px;
   background: #12283d;
   color: #bfd2e7;
-  font-size: 11.5px;
+  font-size: var(--font-size-sm);
   font-weight: 500;
   box-shadow: 0 10px 28px rgba(0, 6, 16, 0.25);
 }
@@ -1816,12 +1440,6 @@
   height: 14px;
 }
 
-@media (max-width: 940px) {
-  .model-control {
-    width: 155px;
-  }
-}
-
 @media (max-width: 760px) {
   .chat-header {
     min-height: 52px;
@@ -1833,26 +1451,7 @@
   }
 
   .chat-header h2 {
-    max-width: calc(100vw - 224px);
-    font-size: 15px;
-  }
-
-  .agent-mode-control {
-    width: 38px;
-  }
-
-  .agent-mode-button {
-    justify-content: center;
-    width: 38px;
-    padding: 0;
-  }
-
-  .agent-mode-button > span:last-child {
-    display: none;
-  }
-
-  .model-control {
-    width: 126px;
+    font-size: var(--font-size-2xl);
   }
 
   .messages-list {
@@ -1888,14 +1487,6 @@
 }
 
 @media (max-width: 460px) {
-  .model-control {
-    display: none;
-  }
-
-  .chat-header h2 {
-    max-width: calc(100vw - 148px);
-  }
-
   .chat-empty-state {
     padding: 18px 8px 54px;
   }
@@ -1923,14 +1514,6 @@
   }
 
   .mode-empty-title {
-    font-size: 24px;
-  }
-
-  .message-bubble {
-    font-size: 14px;
-  }
-
-  .composer textarea {
-    font-size: 14px;
+    font-size: var(--font-size-6xl);
   }
 }