@xingjisoft/neutrino 0.4.0 → 0.5.0

package/web/style.css

@@ -549,13 +549,28 @@ svg {
   color: var(--text-tertiary);
 }
 
-.dot {
+/* Sidebar row status: a finished turn, a turn in flight, or a pending approval. */
+.session-state {
   flex: none;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--accent);
-  animation: pulse 2s var(--ease) infinite;
+}
+
+.session-state.approval {
+  background: var(--amber);
+  animation: pulse-amber 1.6s ease-out infinite;
+}
+
+/* A running turn is a ring that keeps turning, never a coloured dot. */
+.session-state.running {
+  width: 9px;
+  height: 9px;
+  background: none;
+  border: 1.5px solid rgba(122, 170, 255, 0.25);
+  border-top-color: var(--accent);
+  animation: spin 0.8s linear infinite;
 }
 
 .more {
@@ -597,6 +612,16 @@ svg {
   border-bottom: 1px solid var(--border-soft);
 }
 
+/* Match the CLI's 500ms thinking phases across the full title bar. */
+.main-header.is-thinking {
+  background-color: #28393d;
+  animation: header-thinking 1s steps(1, end) infinite;
+}
+
+.main-header.is-thinking .main-title h1 {
+  color: #99d9ea;
+}
+
 .main-title {
   flex: 1;
   min-width: 0;
@@ -1372,6 +1397,26 @@ svg {
 
 /* --------------------------------------------------------------- composer */
 
+.agent-actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 12px clamp(16px, 4vw, 40px) max(18px, env(safe-area-inset-bottom));
+}
+
+.agent-actions .form-feedback {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.agent-actions button {
+  flex-shrink: 0;
+}
+
 .composer {
   flex-shrink: 0;
   padding: 0 clamp(16px, 4vw, 40px) 18px;
@@ -1386,6 +1431,7 @@ svg {
 
 .composer-card {
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-end;
   gap: 8px;
   padding: 8px 8px 8px 16px;
@@ -1404,7 +1450,7 @@ svg {
 }
 
 .composer textarea {
-  flex: 1;
+  flex: 1 0 100%;
   min-width: 0;
   min-height: 36px;
   max-height: 240px;
@@ -1428,8 +1474,6 @@ svg {
   outline: none;
 }
 
-.pro-mode .composer-card { flex-wrap: wrap; }
-.pro-mode .composer textarea { flex: 1 0 100%; }
 .pro-preset-control { position: relative; margin-left: auto; align-self: center; }
 .pro-preset-control > summary {
   display: flex; align-items: center; gap: 10px; padding: 7px 10px;
@@ -1466,20 +1510,20 @@ svg {
   border-radius: 50%; background: rgba(255, 255, 255, .18);
 }
 .pro-slider-stop.is-filled { background: rgba(255, 255, 255, .35); }
-#pro-preset-range {
+#pro-preset-range, #model-intensity {
   position: relative; display: block; width: 100%; height: 40px; margin: 0; padding: 0;
   -webkit-appearance: none; appearance: none; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
 }
-#pro-preset-range::-webkit-slider-runnable-track { height: 24px; border: 0; background: transparent; }
-#pro-preset-range::-webkit-slider-thumb {
+#pro-preset-range::-webkit-slider-runnable-track, #model-intensity::-webkit-slider-runnable-track { height: 24px; border: 0; background: transparent; }
+#pro-preset-range::-webkit-slider-thumb, #model-intensity::-webkit-slider-thumb {
   -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -2px;
   border: 0; border-radius: 50%; background: #fff;
 }
-#pro-preset-range::-moz-range-track { height: 24px; border: 0; background: transparent; }
-#pro-preset-range::-moz-range-progress { background: transparent; }
-#pro-preset-range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; }
-#pro-preset-range:focus-visible { outline-offset: 2px; }
-#pro-preset-range:disabled { cursor: default; }
+#pro-preset-range::-moz-range-track, #model-intensity::-moz-range-track { height: 24px; border: 0; background: transparent; }
+#pro-preset-range::-moz-range-progress, #model-intensity::-moz-range-progress { background: transparent; }
+#pro-preset-range::-moz-range-thumb, #model-intensity::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; }
+#pro-preset-range:focus-visible, #model-intensity:focus-visible { outline-offset: 2px; }
+#pro-preset-range:disabled, #model-intensity:disabled { cursor: default; }
 .pro-preset-ticks { position: relative; height: 24px; margin: 6px 14px 16px; }
 .pro-preset-ticks button {
   position: absolute; transform: translateX(-50%); border: 0; background: transparent;
@@ -1554,6 +1598,15 @@ svg {
   height: 18px;
 }
 
+#send .pause-icon,
+#send.is-pause .send-icon {
+  display: none;
+}
+
+#send.is-pause .pause-icon {
+  display: block;
+}
+
 #send:hover {
   background: var(--primary-hover);
 }
@@ -1892,40 +1945,18 @@ svg {
 
 /* ----------------------------------------------------- model and settings */
 
-.model-picker {
-  display: flex;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 10px;
-  padding: 10px clamp(16px, 4vw, 32px) 12px;
-  border-bottom: 1px solid var(--border-soft);
-}
-
-.model-picker label {
+.model-picker { min-width: 0; max-width: min(75%, 340px); }
+.model-picker > summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.model-picker-fields { display: grid; gap: 12px; margin-bottom: 18px; }
+.model-picker-fields label {
   display: flex;
   flex-direction: column;
   gap: 5px;
-  flex: 0 1 170px;
   min-width: 0;
-  color: var(--text-caption);
+  color: var(--text-tertiary);
   font-size: 11px;
 }
-
-.model-picker label:nth-child(2) {
-  flex-grow: 1;
-  max-width: 300px;
-}
-
-.model-picker .control {
-  height: 34px;
-}
-
-.model-picker .form-feedback {
-  flex: 1 1 200px;
-  align-self: center;
-  margin: 0;
-}
+.model-picker-card .form-feedback { margin: 0; }
 
 select,
 .settings-fields input[type="password"],
@@ -1942,10 +1973,6 @@ select,
   transition: border-color var(--fast), background-color var(--fast);
 }
 
-.model-picker select {
-  height: 34px;
-}
-
 select {
   appearance: none;
   padding-right: 32px;
@@ -2302,11 +2329,6 @@ select option {
   display: none;
 }
 
-/* Sit below the model row instead of covering it. */
-#model-picker:not(.hidden) + #plan-card {
-  top: 138px;
-}
-
 .plan-card-head {
   display: flex;
   align-items: center;
@@ -2659,6 +2681,56 @@ select option {
   flex: 1;
 }
 
+/* One-time background-residency invitation. The orbit badge is the regular
+   console's own mark, so the offer reads as part of the same product. */
+.background-dialog {
+  width: min(460px, calc(100vw - 24px));
+}
+
+.background-header {
+  align-items: center;
+  justify-content: flex-start;
+  gap: 14px;
+  border-bottom: 0;
+  padding-bottom: 18px;
+}
+
+.background-mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 46px;
+  height: 46px;
+  color: var(--accent);
+  background: var(--surface-1);
+  border: 1px solid var(--border-soft);
+  border-radius: 13px;
+}
+
+.background-mark svg {
+  width: 24px;
+  height: 24px;
+}
+
+.background-copy {
+  min-width: 0;
+}
+
+.background-copy h2 {
+  font-size: 15px;
+  line-height: 1.55;
+  font-weight: 600;
+}
+
+.background-feedback:empty {
+  display: none;
+}
+
+.background-actions {
+  border-top: 1px solid var(--border-soft);
+}
+
 /* Folder picker */
 .folder-sheet {
   max-height: calc(100vh - 32px);
@@ -3032,6 +3104,18 @@ html.pro-transitioning body::before {
 
 /* -------------------------------------------------------------- animations */
 
+@keyframes header-thinking {
+  0%,
+  100% {
+    background-color: #28393d;
+    border-bottom-color: rgba(153, 217, 234, 0.45);
+  }
+  50% {
+    background-color: var(--bg);
+    border-bottom-color: var(--border-soft);
+  }
+}
+
 @keyframes blink {
   0%,
   49% {
@@ -3067,6 +3151,12 @@ html.pro-transitioning body::before {
   }
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .pro-slider-meteors { display: none; }
   *,
@@ -3195,27 +3285,6 @@ html.pro-transitioning body::before {
     height: 34px;
   }
 
-  .model-picker {
-    gap: 8px;
-    padding: 10px 12px;
-    max-height: 30vh;
-    max-height: 30dvh;
-    overflow: auto;
-  }
-
-  .model-picker label {
-    flex: 1 1 calc(50% - 8px);
-  }
-
-  .model-picker label:nth-child(2) {
-    max-width: none;
-  }
-
-  .model-picker .control {
-    flex: 1 1 calc(50% - 8px);
-    height: 38px;
-  }
-
   .messages {
     padding: 16px 14px 20px;
   }
@@ -3237,6 +3306,11 @@ html.pro-transitioning body::before {
     border-radius: 20px;
   }
 
+  .model-picker-card {
+    right: -48px;
+    width: min(390px, calc(100vw - 32px));
+  }
+
   .composer textarea {
     max-height: min(220px, 25dvh);
   }
@@ -3382,13 +3456,6 @@ html.pro-transitioning body::before {
     overflow-y: auto;
   }
 
-  .model-picker {
-    flex-shrink: 1;
-    min-height: 44px;
-    padding-top: 6px;
-    padding-bottom: 6px;
-  }
-
   .messages {
     min-height: 40px;
     padding-top: 8px;