@unity-china/codely-cli 1.0.0-alpha.1 → 1.0.0-alpha.3

package/bundle/web-ui/dist/public/app.css

@@ -143,6 +143,20 @@ textarea {
   margin-bottom: 12px;
 }
 
+.session-notice {
+  position: sticky;
+  top: 0;
+  z-index: 4;
+  padding: 10px 12px;
+  border: 1px solid rgba(224, 175, 104, 0.3);
+  border-radius: var(--radius-md);
+  background: rgba(224, 175, 104, 0.08);
+  color: var(--warn);
+  white-space: pre-wrap;
+  line-height: 1.45;
+  backdrop-filter: blur(18px);
+}
+
 .user-message {
   padding: 4px 0;
   color: var(--text);
@@ -782,6 +796,69 @@ textarea {
   gap: 10px;
 }
 
+.ask-user-countdown {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 4px 12px;
+  align-items: center;
+  padding: 10px 12px;
+  border: 1px solid rgba(224, 175, 104, 0.58);
+  border-radius: 12px;
+  background: rgba(224, 175, 104, 0.12);
+  box-shadow: inset 0 0 0 1px rgba(224, 175, 104, 0.08);
+}
+.ask-user-countdown-label {
+  color: var(--warn);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.ask-user-countdown-time {
+  grid-row: span 2;
+  min-width: 56px;
+  padding: 6px 10px;
+  border: 1px solid rgba(224, 175, 104, 0.6);
+  border-radius: 999px;
+  color: #ffd089;
+  background: rgba(224, 175, 104, 0.16);
+  font-family: var(--mono);
+  font-size: 16px;
+  font-weight: 800;
+  text-align: center;
+}
+.ask-user-countdown-message {
+  color: var(--muted);
+  font-size: 12px;
+}
+.ask-user-option {
+  position: relative;
+  gap: 8px;
+}
+.ask-user-option-default {
+  border-color: rgba(224, 175, 104, 0.85) !important;
+  background: rgba(224, 175, 104, 0.12) !important;
+  box-shadow: inset 0 0 0 1px rgba(224, 175, 104, 0.25);
+}
+.ask-user-option-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+.ask-user-default-badge {
+  padding: 2px 6px;
+  border: 1px solid rgba(224, 175, 104, 0.68);
+  border-radius: 999px;
+  color: var(--warn);
+  background: rgba(224, 175, 104, 0.1);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+}
+
 /* Subagent card styles */
 .subagent-card {
   background: linear-gradient(
@@ -1322,6 +1399,16 @@ textarea {
   text-transform: uppercase;
   letter-spacing: 0.08em;
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cp-workers-header .btn {
+  text-transform: none;
+  letter-spacing: normal;
+  font-size: 11px;
+  padding: 2px 8px;
 }
 
 .cp-worker-grid {
@@ -1345,7 +1432,8 @@ textarea {
   flex-direction: column;
   cursor: pointer;
   transition: border-color 0.15s ease;
-  min-height: 360px;
+  max-height: 30vh;
+  min-height: 180px;
 }
 
 .cp-task-card:hover {
@@ -1366,31 +1454,67 @@ textarea {
 
 .cp-task-header {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 10px 12px;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 10px;
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
 }
 
+.cp-task-header-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.cp-task-header-left {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+}
+
+.cp-task-header-info {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  /* Keep title + URL as two explicit lines; do not clip the link row away */
+  overflow: visible;
+}
+
 .cp-task-name {
   font-weight: 600;
-  font-size: 14px;
+  font-size: 13px;
+  line-height: 1.35;
+  /* Line 1: title only; URL is always the next sibling on line 2 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .cp-task-url {
   font-size: 11px;
   color: var(--muted);
+  display: block;
+  line-height: 1.35;
   word-break: break-all;
+  /* Second line dedicated to link; wrap instead of single-line ellipsis */
+  overflow-wrap: anywhere;
 }
 
 .cp-task-meta {
   display: flex;
-  flex-direction: column;
-  gap: 4px;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
   font-size: 11px;
   color: var(--muted);
+  flex-shrink: 0;
+  margin-left: auto;
 }
 
 .cp-conn {
@@ -1417,10 +1541,30 @@ textarea {
   font-size: 11px;
 }
 
+/* One row: Cancel / Refresh / Retry + idle activity timestamp */
+.cp-task-actions-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
 .cp-task-actions {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: 6px;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.cp-task-actions-time {
+  flex-shrink: 0;
+}
+
+.cp-task-actions .btn {
+  padding: 2px 8px;
+  font-size: 11px;
 }
 
 .cp-task-error {
@@ -1431,11 +1575,21 @@ textarea {
   flex-shrink: 0;
 }
 
+.cp-task-notice {
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--warn);
+  border-bottom: 1px solid var(--border);
+  background: rgba(224, 175, 104, 0.06);
+  white-space: pre-wrap;
+  flex-shrink: 0;
+}
+
 .cp-task-body {
   padding: 10px 12px;
   overflow: auto;
   flex: 1;
-  min-height: 120px;
+  min-height: 60px;
 }
 
 .cp-task-message,
@@ -2186,3 +2340,584 @@ textarea {
     display: none !important;
   }
 }
+
+/* ─── Rollout Page ──────────────────────────────────────────────────────────── */
+
+.rollout-app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--bg);
+}
+
+.rollout-stats {
+  display: flex;
+  gap: 20px;
+  padding: 14px 24px;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+.rollout-stat {
+  text-align: center;
+  min-width: 72px;
+}
+.rollout-stat-value {
+  font-size: 22px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--text);
+}
+.rollout-stat-label {
+  font-size: 11px;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-top: 2px;
+}
+.rollout-running {
+  color: var(--accent);
+}
+.rollout-queued {
+  color: var(--warn);
+}
+.rollout-completed {
+  color: var(--ok);
+}
+.rollout-failed {
+  color: var(--err);
+}
+
+.rollout-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.rollout-sidebar {
+  width: 320px;
+  border-right: 1px solid var(--border);
+  background: var(--panel);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+.rollout-sidebar-section {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.rollout-sidebar-queue {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 10px 16px;
+}
+.rollout-label {
+  display: block;
+  font-size: 12px;
+  color: var(--muted);
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.rollout-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.rollout-input,
+.rollout-textarea,
+.rollout-select {
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 7px 10px;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-family: var(--sans);
+  outline: none;
+  width: 100%;
+}
+.rollout-input:focus,
+.rollout-textarea:focus {
+  border-color: var(--accent);
+}
+.rollout-input-sm {
+  width: 70px;
+  flex: 0 0 auto;
+}
+.rollout-textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+.rollout-select {
+  cursor: pointer;
+}
+.rollout-add-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.rollout-badge {
+  background: var(--subtle);
+  padding: 1px 7px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+}
+.rollout-queue-list {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.rollout-queue-empty {
+  color: var(--muted);
+  font-size: 12px;
+  padding: 8px 0;
+}
+.rollout-queue-item {
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 10px;
+}
+.rollout-queue-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.rollout-queue-item-prompt {
+  font-size: 12px;
+  color: var(--muted);
+  margin-top: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rollout-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+.rollout-main-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.rollout-main-title {
+  font-size: 15px;
+  font-weight: 600;
+}
+.rollout-main-controls {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.rollout-main-controls .rollout-select {
+  width: auto;
+  min-width: 100px;
+}
+.rollout-task-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.rollout-empty {
+  text-align: center;
+  padding: 40px;
+  color: var(--muted);
+}
+.rollout-task-card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+  transition: border-color 0.15s;
+}
+.rollout-task-card:hover {
+  border-color: var(--muted);
+}
+.rollout-task-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.rollout-task-card-left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.rollout-task-id {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--muted);
+}
+.rollout-task-model {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: var(--subtle);
+  color: var(--muted);
+}
+.rollout-task-tags {
+  font-size: 11px;
+  color: var(--accent-2);
+}
+.rollout-task-status {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 2px 10px;
+  border-radius: 10px;
+}
+.rollout-task-status.queued {
+  background: rgba(224, 175, 104, 0.15);
+  color: var(--warn);
+}
+.rollout-task-status.running {
+  background: rgba(122, 162, 247, 0.15);
+  color: var(--accent);
+}
+.rollout-task-status.completed {
+  background: rgba(158, 206, 106, 0.15);
+  color: var(--ok);
+}
+.rollout-task-status.failed,
+.rollout-task-status.stopped {
+  background: rgba(247, 118, 142, 0.15);
+  color: var(--err);
+}
+.rollout-task-status.cancelled {
+  background: var(--subtle);
+  color: var(--muted);
+}
+
+.rollout-task-prompt {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text);
+  margin-bottom: 4px;
+  word-break: break-word;
+}
+.rollout-task-command {
+  font-family: var(--mono);
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--muted);
+  background: var(--subtle);
+  padding: 3px 8px;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  word-break: break-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rollout-task-meta {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  font-size: 11px;
+  color: var(--muted);
+}
+.rollout-task-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 10px;
+}
+.rollout-btn-sm {
+  font-size: 12px !important;
+  padding: 4px 10px !important;
+}
+.rollout-btn-xs {
+  font-size: 11px !important;
+  padding: 2px 8px !important;
+}
+
+/* Tabs */
+.rollout-tabs {
+  display: flex;
+  gap: 0;
+  align-items: center;
+  padding: 0 20px;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+.rollout-tab {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 10px 18px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--muted);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.rollout-tab:hover {
+  color: var(--text);
+}
+.rollout-tab.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+.rollout-hint {
+  font-size: 12px;
+  color: var(--muted);
+  font-weight: 400;
+}
+.rollout-task-card.is-running {
+  border-left: 3px solid var(--accent);
+}
+
+/* Detail / Log panel */
+.rollout-log-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+}
+.rollout-log-panel {
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 55vw;
+  min-width: 500px;
+  height: 100vh;
+  background: var(--panel);
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  animation: rollout-slide-in 0.2s ease;
+}
+@keyframes rollout-slide-in {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+.rollout-log-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.rollout-log-header h3 {
+  font-size: 14px;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 60%;
+}
+.rollout-detail-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  padding: 0 16px;
+}
+.rollout-detail-tab {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 8px 14px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--muted);
+  cursor: pointer;
+}
+.rollout-detail-tab:hover {
+  color: var(--text);
+}
+.rollout-detail-tab.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+.rollout-log-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  color: var(--muted);
+}
+.rollout-log-content.loading {
+  opacity: 0.5;
+}
+.rollout-live-dot {
+  color: var(--ok);
+  font-size: 11px;
+  font-weight: 600;
+  animation: rollout-blink 1s infinite;
+}
+@keyframes rollout-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+
+/* Artifacts list */
+.rollout-artifact-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.rollout-artifact-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--subtle);
+  border-radius: var(--radius);
+  color: var(--text);
+  text-decoration: none;
+  font-family: var(--mono);
+  font-size: 12px;
+  transition: background 0.15s;
+}
+.rollout-artifact-item:hover {
+  background: var(--border);
+}
+.rollout-artifact-icon {
+  font-size: 14px;
+}
+
+/* Resolution badge */
+.rollout-task-resolution {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: rgba(187, 154, 247, 0.15);
+  color: #bb9af7;
+  font-weight: 600;
+}
+
+/* Config info */
+.rollout-config-info {
+  font-size: 12px;
+  line-height: 1.8;
+  color: var(--muted);
+}
+.rollout-config-info code {
+  font-family: var(--mono);
+  font-size: 11px;
+  background: var(--subtle);
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+
+/* New Task Dialog */
+.rollout-dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 680px;
+  max-width: 90vw;
+  max-height: 85vh;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  animation: rollout-dialog-in 0.2s ease;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+@keyframes rollout-dialog-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+.rollout-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.rollout-dialog-header h3 {
+  font-size: 16px;
+  margin: 0;
+}
+.rollout-dialog-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.rollout-dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 12px;
+  border-top: 1px solid var(--border);
+  margin-top: 4px;
+}
+
+/* Form groups */
+.rollout-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.rollout-form-row {
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+}
+.rollout-form-details {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 8px 12px;
+}
+.rollout-form-details[open] {
+  padding-bottom: 4px;
+}
+
+/* JSON editor */
+.rollout-json-editor {
+  font-family: var(--mono) !important;
+  font-size: 13px !important;
+  line-height: 1.5 !important;
+  min-height: 300px;
+  resize: vertical;
+  tab-size: 2;
+}
+.rollout-json-error {
+  color: var(--err);
+  font-size: 12px;
+  padding: 4px 0;
+}