reasonix 0.12.8 → 0.12.14

package/dashboard/app.css

@@ -543,6 +543,34 @@ body {
   background: var(--bg-3);
   color: var(--fg-2);
 }
+.pill-active {
+  background: rgba(103, 232, 249, 0.22);
+  color: var(--primary);
+}
+
+/* ---------- Key/value rows (compact metadata layout) ---------- */
+.kv {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--fg-1);
+  font-family: var(--mono);
+}
+.kv > div {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px;
+}
+.kv-key {
+  display: inline-block;
+  min-width: 84px;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--fg-3);
+}
 
 /* ---------- Tables ---------- */
 
@@ -1193,6 +1221,108 @@ textarea:focus {
   color: var(--fg-2);
 }
 
+/* Onboarding banner that nudges new users to the Semantic panel.
+ * Only shown when the project has no built index AND the user hasn't
+ * explicitly dismissed it (state in localStorage). The "Build it →"
+ * action navigates the sidebar via the appBus so the rest of the
+ * panel state isn't disturbed. */
+.chat-banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+  padding: 10px 14px;
+  background: var(--bg-1);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius-md);
+  font-size: 13px;
+}
+.chat-banner-icon {
+  font-family: var(--mono);
+  color: var(--accent);
+  font-size: 18px;
+}
+.chat-banner-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 13px;
+}
+.chat-banner-text strong {
+  color: var(--fg-0);
+  font-weight: 600;
+}
+.chat-banner-text .muted {
+  font-size: 12px;
+  line-height: 1.45;
+}
+.chat-banner-close {
+  background: transparent;
+  border: none;
+  color: var(--fg-3);
+  font-size: 20px;
+  line-height: 1;
+  padding: 0 6px;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+.chat-banner-close:hover {
+  background: var(--bg-3);
+  color: var(--fg-0);
+}
+
+/* In-flight row sits just above ChatStatusBar — the user's eyes are
+ * already at the input; this puts the spinner + elapsed + token
+ * stream in the same visual neighborhood instead of pushing them up
+ * to the top of the panel. Border on the bottom only so it shares the
+ * statusbar's top divider. */
+.chat-inflight {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 8px;
+  margin-top: 6px;
+  background: var(--bg-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--fg-1);
+  flex-shrink: 0;
+}
+.chat-inflight-phase {
+  color: var(--accent);
+  font-weight: 600;
+}
+.chat-inflight-sep {
+  color: var(--fg-3);
+}
+.chat-inflight-tool {
+  color: var(--fg-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 480px;
+}
+.chat-inflight-abort {
+  margin-left: auto;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--fg-2);
+  padding: 3px 10px;
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+.chat-inflight-abort:hover {
+  border-color: var(--err);
+  color: var(--err);
+}
+
 /* ---------- Chat status bar ----------
  *
  * Compact metric strip below the input area. Mirrors the TUI's
@@ -1352,6 +1482,11 @@ textarea:focus {
   padding: 8px 12px;
   font-family: var(--mono);
   font-size: 13px;
+  overflow-x: auto;
+  max-height: 240px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
 }
 .modal-cmd-prompt {
   color: var(--fg-3);
@@ -1361,6 +1496,7 @@ textarea:focus {
   color: var(--primary);
   background: transparent;
   padding: 0;
+  word-break: break-all;
 }
 
 .modal-actions {
@@ -1431,6 +1567,64 @@ textarea:focus {
   overflow-y: auto;
 }
 
+/* Plan-revision modal — list of remaining steps with risk dots. */
+.modal-revise-reason {
+  background: var(--bg-2);
+  border-left: 3px solid #c4b5fd;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  padding: 8px 12px;
+  color: var(--fg-1);
+  font-size: 13px;
+  white-space: pre-wrap;
+}
+.modal-revise-steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 280px;
+  overflow-y: auto;
+}
+.modal-revise-steps li {
+  display: grid;
+  grid-template-columns: 12px 64px 1fr;
+  grid-template-rows: auto auto;
+  gap: 2px 10px;
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  align-items: center;
+}
+.modal-revise-dot {
+  grid-row: 1 / 3;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  align-self: center;
+}
+.modal-revise-id {
+  grid-row: 1;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--fg-2);
+}
+.modal-revise-title {
+  grid-row: 1;
+  color: var(--fg-0);
+  font-size: 13px;
+  font-weight: 500;
+}
+.modal-revise-action {
+  grid-column: 2 / 4;
+  grid-row: 2;
+  color: var(--fg-2);
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+
 .modal-edit-preview {
   background: var(--bg-2);
   border: 1px solid var(--border);