botmux 3.1.1 → 3.2.0

package/dist/dashboard-web/style.css

@@ -7251,6 +7251,543 @@ button.sidebar-create-btn:focus-visible {
     transparent 100%
   );
 }
+.topbar-brand-block {
+  display: grid;
+  min-width: 0;
+  padding: 3px 0 4px;
+}
+.dashboard-version-control {
+  position: relative;
+  z-index: 2;
+  width: max-content;
+  margin: -2px 0 0 37px;
+}
+button.dashboard-version-chip {
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 22px;
+  margin: 0;
+  padding: 0 7px 0 9px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-full);
+  background: color-mix(in srgb, var(--surface) 42%, transparent);
+  color: var(--muted);
+  box-shadow: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+}
+button.dashboard-version-chip::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  z-index: 0;
+  padding: 1px;
+  border-radius: inherit;
+  background: linear-gradient(135deg, var(--brand-accent-cyan), var(--brand-accent), var(--brand-accent-pink));
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+button.dashboard-version-chip > span {
+  position: relative;
+  z-index: 1;
+}
+button.dashboard-version-chip:hover,
+.dashboard-version-control.is-open button.dashboard-version-chip {
+  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
+  color: var(--fg);
+}
+.dashboard-version-state {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 14px;
+  height: 14px;
+  border-radius: var(--radius-full);
+  font-size: 9px;
+  font-weight: 800;
+  line-height: 1;
+}
+.dashboard-version-state.is-current {
+  background: var(--success-soft);
+  color: var(--fg);
+}
+.dashboard-version-state.has-update {
+  background: var(--warning-soft);
+  color: var(--fg);
+}
+.dashboard-version-state.is-unknown {
+  background: var(--surface-muted);
+  color: var(--fg);
+}
+.dashboard-version-state.is-error {
+  background: var(--danger-soft);
+  color: var(--fg);
+}
+.dashboard-version-popover {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  width: min(340px, calc(100vw - 32px));
+  max-height: calc(100vh - var(--topbar-height) - 16px);
+  overflow: hidden;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  color: var(--fg);
+  box-shadow: var(--modal-shadow);
+}
+.dashboard-version-popover-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-soft);
+}
+.dashboard-version-popover-head strong {
+  font-size: 14px;
+  font-weight: 760;
+}
+.dashboard-version-head-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+button.dashboard-version-refresh,
+button.dashboard-version-close {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  min-height: 28px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--muted);
+  box-shadow: none;
+  cursor: pointer;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 1;
+}
+button.dashboard-version-refresh svg {
+  width: 15px;
+  height: 15px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.6;
+}
+button.dashboard-version-refresh:hover:not(:disabled),
+button.dashboard-version-close:hover {
+  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
+  color: var(--accent-strong);
+}
+button.dashboard-version-refresh:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+button.dashboard-version-refresh.is-refreshing svg {
+  animation: dashboard-update-spin 700ms linear infinite;
+}
+.dashboard-version-popover-body {
+  display: grid;
+  justify-items: center;
+  gap: 7px;
+  min-height: 0;
+  padding: 22px 20px 18px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  text-align: center;
+}
+.dashboard-version-current {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+}
+.dashboard-version-current > strong {
+  font-family: "Geist Mono", var(--mono);
+  font-size: 28px;
+  font-weight: 760;
+  letter-spacing: -0.04em;
+  line-height: 1.2;
+}
+.dashboard-version-current > span {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  font-size: 14px;
+  font-weight: 800;
+}
+.dashboard-version-current > span.is-current {
+  background: var(--success-soft);
+  color: var(--fg);
+}
+.dashboard-version-current > span.has-update {
+  background: var(--warning-soft);
+  color: var(--fg);
+}
+.dashboard-version-current > span.is-unknown {
+  background: var(--surface-muted);
+  color: var(--fg);
+}
+.dashboard-version-current > span.is-error {
+  background: var(--danger-soft);
+  color: var(--fg);
+}
+.dashboard-version-message {
+  max-width: 290px;
+  margin: 0;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.55;
+}
+.dashboard-version-message.is-error {
+  color: var(--danger);
+  overflow-wrap: anywhere;
+}
+.dashboard-version-release-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 30px;
+  margin-top: 3px;
+  padding: 5px 9px;
+  border-radius: var(--radius-full);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 1;
+  text-decoration: none;
+}
+.dashboard-version-release-link svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+.dashboard-version-release-link:hover {
+  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
+  color: var(--accent-strong);
+}
+.dashboard-version-installs {
+  width: 100%;
+  margin-top: 5px;
+  padding: 8px 10px;
+  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-soft));
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
+  color: var(--warning);
+  text-align: left;
+  font-size: 11px;
+  line-height: 1.45;
+}
+.dashboard-version-installs summary { cursor: pointer; }
+.dashboard-version-installs ul {
+  margin: 6px 0 0;
+  padding-left: 18px;
+  overflow-wrap: anywhere;
+}
+.dashboard-version-rollback {
+  width: 100%;
+  margin-top: 8px;
+  padding-top: 4px;
+  border-top: 1px solid var(--border-soft);
+  color: var(--muted);
+  text-align: left;
+}
+.dashboard-version-rollback > summary {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr) 16px;
+  align-items: center;
+  gap: 8px;
+  min-height: 38px;
+  padding: 5px 2px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 650;
+  list-style: none;
+  user-select: none;
+}
+.dashboard-version-rollback > summary::-webkit-details-marker { display: none; }
+.dashboard-version-rollback > summary:hover {
+  color: var(--accent-strong);
+}
+.dashboard-version-rollback > summary:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.dashboard-version-rollback > summary svg {
+  width: 15px;
+  height: 15px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.5;
+}
+.dashboard-version-rollback-chevron {
+  justify-self: end;
+  font-size: 15px;
+  line-height: 1;
+  transform: rotate(0deg);
+  transition: transform 140ms ease;
+}
+.dashboard-version-rollback[open] .dashboard-version-rollback-chevron {
+  transform: rotate(180deg);
+}
+.dashboard-version-rollback-body {
+  display: grid;
+  gap: 10px;
+  padding: 3px 0 2px;
+}
+.dashboard-version-rollback-body fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.dashboard-version-rollback-body legend {
+  width: 100%;
+  margin: 0 0 8px;
+  padding: 0;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.45;
+}
+.dashboard-version-rollback-options {
+  display: grid;
+  gap: 7px;
+}
+.dashboard-version-rollback-options label {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 9px;
+  min-height: 44px;
+  padding: 7px 11px;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--surface-muted) 42%, transparent);
+  color: var(--fg);
+  cursor: pointer;
+}
+.dashboard-version-rollback-options label:hover {
+  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-soft));
+  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
+}
+.dashboard-version-rollback-options label.is-selected {
+  border-color: color-mix(in srgb, var(--warning) 72%, var(--border-soft));
+  background: var(--warning-soft);
+}
+.dashboard-version-rollback-options label:has(input:focus-visible) {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.dashboard-version-rollback-options input {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--warning);
+}
+.dashboard-version-rollback-options strong {
+  min-width: 0;
+  overflow: hidden;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 720;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dashboard-version-rollback-options time {
+  flex: none;
+  color: var(--muted);
+  font-size: 11px;
+  white-space: nowrap;
+}
+.dashboard-version-rollback-status,
+.dashboard-version-rollback-load-error,
+.dashboard-version-rollback-risk {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.5;
+}
+.dashboard-version-rollback-status {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 34px;
+  color: var(--muted);
+}
+.dashboard-version-rollback-load-error {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 9px;
+  border-radius: var(--radius-sm);
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+.dashboard-version-rollback-load-error button {
+  flex: none;
+  min-height: 26px;
+  margin: 0;
+  padding: 3px 8px;
+  border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--border-soft));
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: inherit;
+  box-shadow: none;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 700;
+}
+.dashboard-version-rollback-load-error button:disabled { cursor: wait; opacity: 0.65; }
+.dashboard-version-rollback-risk {
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+  padding: 8px 9px;
+  border-radius: var(--radius-sm);
+  background: var(--warning-soft);
+  color: var(--warning);
+}
+.dashboard-version-rollback-risk > svg {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  margin-top: 1px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.4;
+}
+.dashboard-version-rollback-risk a {
+  color: inherit;
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.dashboard-version-rollback-risk a:hover { color: var(--accent-strong); }
+.dashboard-version-rollback-risk a:focus-visible {
+  border-radius: 2px;
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+button.dashboard-version-rollback-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  width: 100%;
+  min-height: 36px;
+  margin: 0;
+  padding: 7px 12px;
+  border: 1px solid color-mix(in srgb, var(--warning) 58%, var(--border-soft));
+  border-radius: var(--radius-full);
+  background: var(--warning-soft);
+  color: var(--warning);
+  box-shadow: none;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 720;
+  line-height: 1;
+}
+button.dashboard-version-rollback-action:hover:not(:disabled) {
+  border-color: var(--warning);
+  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
+}
+button.dashboard-version-rollback-action:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.dashboard-version-popover-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border-soft);
+}
+button.dashboard-version-secondary,
+button.dashboard-version-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 32px;
+  margin: 0;
+  padding: 6px 12px;
+  border-radius: var(--radius-full);
+  box-shadow: none;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 720;
+  line-height: 1;
+}
+button.dashboard-version-secondary {
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--muted);
+}
+button.dashboard-version-primary {
+  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border-soft));
+  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
+  color: var(--accent-strong);
+}
+button.dashboard-version-secondary:hover {
+  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
+  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
+  color: var(--accent-strong);
+}
+button.dashboard-version-primary:hover:not(:disabled) {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+}
+button.dashboard-version-primary:disabled {
+  cursor: wait;
+  opacity: 0.7;
+}
+.dashboard-update-spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: var(--radius-full);
+  animation: dashboard-update-spin 700ms linear infinite;
+}
+@keyframes dashboard-update-spin {
+  to { transform: rotate(360deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dashboard-update-spinner,
+  button.dashboard-version-refresh.is-refreshing svg { animation: none; }
+  .dashboard-version-rollback-chevron { transition: none; }
+}
 .topbar-left {
   grid-column: 1;
   display: inline-flex;
@@ -11348,6 +11885,11 @@ dialog :where(input:not([type=checkbox], [type=radio]), select, textarea) {
     column-gap: 8px;
     padding: 0 12px;
   }
+  .dashboard-version-control { margin-left: 33px; }
+  .dashboard-version-popover {
+    left: -33px;
+    width: min(340px, calc(100vw - 24px));
+  }
   .topbar-left {
     gap: 10px;
   }
@@ -11991,6 +12533,18 @@ tbody tr[data-chat]:hover {
   white-space: nowrap;
 }
 
+.schedule-chip-strip span.schedule-error-chip {
+  border-color: color-mix(in srgb, var(--danger) 35%, var(--border-soft));
+  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
+  color: var(--danger);
+  max-width: 320px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: help;
+  justify-content: flex-start;
+  text-align: left;
+}
+
 .schedule-row-head .schedule-state {
   align-self: center;
   min-width: 42px;
@@ -22839,3 +23393,146 @@ button.ui-refresh-button.is-loading .ui-action-icon {
     min-height: 320px;
   }
 }
+
+/* ── Schedule create/edit form modal ─────────────────────────────────────── */
+.schedule-form-overlay {
+  position: fixed;
+  inset: 0;
+  background: color-mix(in srgb, var(--bg) 72%, transparent);
+  backdrop-filter: blur(3px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 24px;
+}
+
+.schedule-form-dialog {
+  background: var(--surface);
+  border: 1px solid var(--border-soft);
+  border-radius: 12px;
+  box-shadow: 0 16px 48px color-mix(in srgb, #000 28%, transparent);
+  width: min(560px, 100%);
+  max-height: 90dvh;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.schedule-form-dialog h2 {
+  margin: 0 0 16px;
+  font-size: 18px;
+}
+
+.schedule-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.schedule-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.schedule-form-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.schedule-form-field input[type="text"],
+.schedule-form-field textarea {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--border-soft);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 13px;
+  font-family: inherit;
+}
+
+.schedule-form-field textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.schedule-form-help {
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.schedule-form-radio-group {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.schedule-form-radio-group label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.schedule-form-toggle {
+  flex-direction: row !important;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.schedule-form-toggle > span {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.schedule-form-error {
+  color: var(--danger, #e5484d);
+  font-size: 12px;
+  margin: 0;
+}
+
+.schedule-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.schedule-form-cancel,
+.schedule-form-submit {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  cursor: pointer;
+  border: 1px solid var(--border-soft);
+}
+
+.schedule-form-cancel {
+  background: transparent;
+  color: var(--text);
+}
+
+.schedule-form-submit {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+.schedule-form-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.schedule-edit-button,
+.schedule-delete-button {
+  min-width: 56px !important;
+}
+
+.schedule-delete-button {
+  color: var(--danger, #e5484d) !important;
+  border-color: color-mix(in srgb, var(--danger, #e5484d) 48%, var(--border-soft)) !important;
+}