acdev 1.0.5 → 1.0.6

package/public/styles.css

@@ -240,6 +240,26 @@ a { color: var(--primary); text-underline-offset: 3px; }
   margin-bottom: 6px;
 }
 
+.model-meta-row {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.model-meta-row:first-of-type {
+  margin-top: 0;
+}
+
+.model-meta-key {
+  flex: 0 0 auto;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.model-provider,
 .model-current {
   font-family: 'JetBrains Mono', ui-monospace, monospace;
   font-size: 11px;
@@ -247,6 +267,7 @@ a { color: var(--primary); text-underline-offset: 3px; }
   color: var(--text);
   line-height: 1.35;
   word-break: break-all;
+  min-width: 0;
 }
 
 .repo-meta {
@@ -373,15 +394,391 @@ a { color: var(--primary); text-underline-offset: 3px; }
 .enqueue-card {
   display: flex;
   flex-direction: column;
+  gap: 14px;
+  padding: 18px 20px;
+  overflow: visible;
+}
+
+.enqueue-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: 12px;
+  flex-wrap: wrap;
 }
 
-.enqueue-footer {
+.enqueue-card-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-left: auto;
+}
+
+.enqueue-card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.enqueue-card-dot {
+  flex-shrink: 0;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--primary);
+}
+
+.enqueue-card-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--primary) 72%, var(--text-muted));
+}
+
+.enqueue-queued-count {
+  flex-shrink: 0;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.enqueue-textarea {
+  min-height: 96px;
+  padding: 12px 14px;
+  font-size: 14px;
+  border-radius: 10px;
+  resize: vertical;
+}
+
+.enqueue-input-hint {
+  margin: -4px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+
+.enqueue-kbd {
+  display: inline-block;
+  padding: 1px 6px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--text);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
+}
+
+.enqueue-info-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 11px 13px;
+  background: var(--surface-2);
+  border: 1px solid var(--border-soft);
+  border-radius: 10px;
+}
+
+.enqueue-info-icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+  color: var(--text-muted);
+}
+
+.enqueue-info-text {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--text-muted);
+}
+
+.enqueue-info-text strong {
+  font-weight: 600;
+  color: var(--text);
+}
+
+.enqueue-actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
+  overflow: visible;
+}
+
+.agent-picker {
+  position: relative;
+  flex: 1 1 220px;
+  min-width: 0;
+  max-width: 360px;
+  min-height: 52px;
+  overflow: visible;
+}
+
+.agent-pill {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 52px;
+  padding: 8px 12px 8px 10px;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+.agent-pill:hover {
+  border-color: color-mix(in srgb, var(--text) 18%, var(--border));
+}
+
+.agent-pill:focus-visible {
+  border-color: var(--primary);
+  outline: 2px solid var(--primary);
+  outline-offset: 0;
+}
+
+.agent-pill-icon {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 7px;
+}
+
+.agent-pill-icon--claude {
+  background: linear-gradient(145deg, #e8a87c 0%, #d97706 100%);
+}
+
+.agent-pill-icon--openrouter {
+  background: linear-gradient(145deg, #7c8cf5 0%, #5b4fe8 100%);
+}
+
+.agent-pill-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.agent-pill-label {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.agent-pill-value {
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-pill-value.is-empty {
+  color: var(--text-muted);
+}
+
+.agent-pill-chevron {
+  flex-shrink: 0;
+  color: var(--text-muted);
+  transition: transform 0.12s ease;
+}
+
+.agent-pill[aria-expanded="true"] .agent-pill-chevron {
+  transform: rotate(180deg);
+}
+
+.agent-picker-panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  width: min(360px, calc(100vw - 48px));
+  max-height: 320px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 14%, transparent);
+  overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(-6px) scale(0.98);
+  transform-origin: top left;
+  transition:
+    opacity 0.16s ease,
+    transform 0.16s ease,
+    visibility 0s linear 0.16s;
+}
+
+.agent-picker-panel.is-open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+  transition:
+    opacity 0.16s ease,
+    transform 0.16s ease,
+    visibility 0s linear 0s;
+}
+
+.agent-picker-panel.hidden {
+  display: none;
+}
+
+.agent-picker-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 8px 8px 0;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.agent-picker-tab {
+  flex: 1;
+  min-height: 32px;
+  padding: 6px 10px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: 7px 7px 0 0;
+  transition: color 0.12s ease, background 0.12s ease;
+}
+
+.agent-picker-tab:hover {
+  color: var(--text);
+  background: var(--surface-2);
+}
+
+.agent-picker-tab.is-active {
+  color: var(--text);
+  background: var(--surface-2);
+  box-shadow: inset 0 -2px 0 var(--primary);
+}
+
+.agent-picker-tab:disabled,
+.agent-picker-tab.is-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.agent-picker-tab:disabled:hover,
+.agent-picker-tab.is-disabled:hover {
+  color: var(--text-muted);
+  background: transparent;
+}
+
+.agent-picker-search {
+  flex-shrink: 0;
+  min-height: 36px;
+  padding: 8px 12px;
+  font-size: 13px;
+  border: none;
+  border-bottom: 1px solid var(--border-soft);
+  border-radius: 0;
+}
+
+.agent-picker-search:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--primary);
+}
+
+.agent-picker-panel .model-picker-list {
+  flex: 1;
+  min-height: 0;
+  max-height: 220px;
+  margin: 0;
+  padding: 4px;
+  border: none;
+  border-radius: 0;
+}
+
+.enqueue-add-btn {
+  flex: 0 0 auto;
+  align-self: stretch;
+  min-height: 52px;
+  padding: 0 20px;
+  border-radius: 10px;
+  font-size: 14px;
+}
+
+.enqueue-add-arrow {
+  flex-shrink: 0;
+}
+
+.enqueue-feedback-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  /* Reserve space so LLM/enqueue messages never shift the card */
+  min-height: calc(1.5em + 4px + 1.5em);
+}
+
+.enqueue-feedback-row .feedback {
+  margin: 0;
+  min-height: 1.5em;
+  line-height: 1.5;
+}
+
+/* Keep slot size when empty; global .hidden uses display:none and collapses the row */
+.enqueue-feedback-row .feedback.hidden {
+  display: block !important;
+  visibility: hidden;
+}
+
+.model-combined {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--text);
+  word-break: break-word;
+}
+
+@media (max-width: 720px) {
+  .enqueue-card-header {
+    align-items: flex-start;
+  }
+
+  .enqueue-card-header-actions {
+    width: 100%;
+    margin-left: 0;
+    justify-content: space-between;
+  }
+
+  .enqueue-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .agent-picker {
+    max-width: none;
+    width: 100%;
+  }
+
+  .agent-picker-panel {
+    width: 100%;
+  }
+
+  .enqueue-add-btn {
+    width: 100%;
+  }
 }
 
 .hint {
@@ -1776,6 +2173,156 @@ body.diff-fs-open {
   grid-column: 1 / -1;
 }
 
+.model-picker {
+  position: relative;
+  overflow: visible;
+}
+
+.model-picker-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-height: 38px;
+  padding: 9px 11px;
+  font: inherit;
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+  background: var(--surface);
+}
+
+.model-picker-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-picker-value.is-empty {
+  color: var(--text-muted);
+}
+
+.model-picker-chevron {
+  flex-shrink: 0;
+  color: var(--text-muted);
+  transition: transform 0.12s ease;
+}
+
+.model-picker-trigger[aria-expanded="true"] .model-picker-chevron {
+  transform: rotate(180deg);
+}
+
+.model-picker-panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  max-height: 280px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 12%, transparent);
+  overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(-4px) scale(0.98);
+  transform-origin: top left;
+  transition:
+    opacity 0.16s ease,
+    transform 0.16s ease,
+    visibility 0s linear 0.16s;
+}
+
+.model-picker-panel.is-open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+  transition:
+    opacity 0.16s ease,
+    transform 0.16s ease,
+    visibility 0s linear 0s;
+}
+
+.model-picker-panel.hidden {
+  display: none;
+}
+
+.model-picker-search {
+  flex-shrink: 0;
+  min-height: 34px;
+  padding: 7px 11px;
+  font-size: 13px;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  border-radius: 0;
+}
+
+.model-picker-search:focus-visible {
+  outline: none;
+  border-bottom-color: var(--primary);
+  box-shadow: inset 0 -2px 0 var(--primary);
+}
+
+.model-picker-search::placeholder {
+  color: var(--text-muted);
+}
+
+.model-picker-list {
+  flex: 1;
+  min-height: 0;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  overflow-y: auto;
+}
+
+.model-picker-option {
+  display: block;
+  width: 100%;
+  padding: 8px 10px;
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  color: var(--text);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.model-picker-option:hover,
+.model-picker-option.is-active {
+  background: var(--surface-2);
+}
+
+.model-picker-option.is-selected {
+  background: color-mix(in srgb, var(--primary) 12%, var(--surface-2));
+  font-weight: 500;
+}
+
+.model-picker-option-id {
+  display: block;
+  margin-top: 2px;
+  font-family: var(--font-mono, 'JetBrains Mono', monospace);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.model-picker-empty {
+  padding: 12px 10px;
+  font-size: 13px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
 .field-hint {
   margin: 6px 0 0;
   font-size: 12px;
@@ -1838,8 +2385,16 @@ body.diff-fs-open {
 /* Ticket source + Jira connect */
 .source-toggle {
   display: flex;
-  gap: 6px;
+  gap: 4px;
   max-width: 360px;
+  padding: 3px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface-2);
+}
+
+.source-toggle--compact {
+  max-width: none;
 }
 
 .source-btn {
@@ -1847,18 +2402,44 @@ body.diff-fs-open {
   padding: 10px 12px;
   font-size: 13px;
   font-weight: 600;
-  border: 1px solid var(--border);
-  border-radius: 8px;
+  border: 1px solid transparent;
+  border-radius: 999px;
   font-family: inherit;
-  background: var(--surface-2);
-  color: var(--text);
+  background: transparent;
+  color: var(--text-muted);
   cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
+}
+
+.source-toggle--compact .source-btn {
+  padding: 5px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.source-btn:hover:not(.active) {
+  color: var(--text);
+  background: color-mix(in srgb, var(--text) 4%, transparent);
 }
 
 .source-btn.active {
-  background: var(--primary);
-  color: var(--btn-on-primary);
-  border-color: var(--primary);
+  background: var(--surface);
+  color: var(--text);
+  border-color: var(--border-soft);
+  box-shadow: var(--shadow-sm);
+}
+
+.enqueue-jira-hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--amber-800);
+}
+
+.enqueue-jira-hint a {
+  font-weight: 600;
 }
 
 .jira-panel {
@@ -1907,30 +2488,6 @@ body.diff-fs-open {
   color: var(--danger, #b42318);
 }
 
-.auth-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-  padding: 12px 14px;
-  background: var(--amber-100);
-  color: var(--amber-800);
-  border-radius: 8px;
-  font-size: 13px;
-}
-
-.auth-banner.hidden,
-.auth-banner[hidden] {
-  display: none;
-}
-
-.auth-banner-text {
-  margin: 0;
-  flex: 1;
-  min-width: 12rem;
-}
-
 .auth-clear {
   display: inline-block;
   margin-top: 6px;