@profoundlogic/coderflow-server 0.2.1 → 0.2.4

package/dist/web-ui/public/styles.css

@@ -2683,6 +2683,26 @@ button:disabled,
   background: var(--color-text-muted);
 }
 
+.btn-primary.btn-approved:disabled {
+  background: transparent;
+  color: var(--color-success);
+  border: none;
+  font-weight: 600;
+  box-shadow: none;
+  opacity: 1;
+  cursor: default;
+  pointer-events: auto;
+}
+
+.btn-primary.btn-approved:disabled:hover {
+  transform: none;
+  background: transparent;
+}
+
+.btn-primary.btn-approved:disabled svg {
+  color: #1e8a55;
+}
+
 .btn-secondary:disabled {
   background: rgba(31, 42, 68, 0.06);
   color: var(--color-text-muted);
@@ -2735,6 +2755,17 @@ button:disabled,
   background: rgba(63, 114, 255, 0.16);
 }
 
+.dropdown-item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  color: var(--color-text-secondary);
+}
+
+.dropdown-item:disabled:hover {
+  background: none;
+  color: var(--color-text-secondary);
+}
+
 .btn-ghost:disabled {
   color: rgba(31, 42, 68, 0.3);
 }
@@ -3182,6 +3213,7 @@ button:disabled,
   background: #fdfcfb; /* Very subtle warm cream to feel inviting */
   border-radius: var(--radius-medium);
   border: 1px solid rgba(31,42,68,0.08);
+  border-left: 3px solid rgba(31,42,68,0.15);
   color: inherit;
   text-decoration: none;
   transition: box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
@@ -3194,61 +3226,76 @@ button:disabled,
   transform: none;
   box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
   background: var(--color-surface); /* Brighten to pure white on hover */
-  border-color: rgba(63,114,255,0.14);
+  border-top-color: rgba(63,114,255,0.14);
+  border-right-color: rgba(63,114,255,0.14);
+  border-bottom-color: rgba(63,114,255,0.14);
   outline: none;
 }
 
 /* Very subtle status-based background tints layered on the warm base */
 .task-tile.status-running {
   background: linear-gradient(135deg, rgba(244, 183, 64, 0.09) 0%, #fdfcfb 100%);
+  border-left-color: var(--color-warning);
 }
 
 .task-tile.status-failed {
   background: linear-gradient(135deg, rgba(229, 83, 104, 0.07) 0%, #fdfcfb 100%);
+  border-left-color: var(--color-danger);
 }
 
 .task-tile.status-completed {
   background: #fdfcfb; /* Keep the warm cream base */
+  border-left-color: var(--color-success);
 }
 
 .task-tile.status-staged {
   background: linear-gradient(135deg, rgba(139, 92, 246, 0.09) 0%, #fdfcfb 100%);
+  border-left-color: #8b5cf6;
 }
 
 .task-tile.status-queued {
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.09) 0%, #fdfcfb 100%);
+  border-left-color: #3b82f6;
 }
 
 :root[data-theme="dark"] .task-tile {
   background: var(--color-surface-muted);
   border-color: rgba(148, 163, 184, 0.2);
+  border-left-color: rgba(148, 163, 184, 0.35);
   box-shadow: var(--shadow-soft);
 }
 
 :root[data-theme="dark"] .task-tile:hover,
 :root[data-theme="dark"] .task-tile:focus-visible {
   background: var(--color-surface);
-  border-color: rgba(63,114,255,0.35);
+  border-top-color: rgba(63,114,255,0.35);
+  border-right-color: rgba(63,114,255,0.35);
+  border-bottom-color: rgba(63,114,255,0.35);
 }
 
 :root[data-theme="dark"] .task-tile.status-running {
   background: linear-gradient(135deg, rgba(244, 183, 64, 0.12) 0%, var(--color-surface-muted) 100%);
+  border-left-color: var(--color-warning);
 }
 
 :root[data-theme="dark"] .task-tile.status-failed {
   background: linear-gradient(135deg, rgba(229, 83, 104, 0.12) 0%, var(--color-surface-muted) 100%);
+  border-left-color: var(--color-danger);
 }
 
 :root[data-theme="dark"] .task-tile.status-completed {
   background: var(--color-surface-muted);
+  border-left-color: var(--color-success);
 }
 
 :root[data-theme="dark"] .task-tile.status-staged {
   background: linear-gradient(135deg, rgba(139, 92, 246, 0.14) 0%, var(--color-surface-muted) 100%);
+  border-left-color: #8b5cf6;
 }
 
 :root[data-theme="dark"] .task-tile.status-queued {
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, var(--color-surface-muted) 100%);
+  border-left-color: #3b82f6;
 }
 
 .task-tile .task-title {
@@ -3286,13 +3333,61 @@ button:disabled,
 }
 
 .task-title .task-time {
-  margin-left: auto;
   font-size: 12px;
   color: var(--color-text-muted);
   white-space: nowrap;
   flex-shrink: 0;
 }
 
+/* Inline status label pill for at-a-glance task status */
+.task-status-label {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+.task-status-label.status-running {
+  background: rgba(244, 183, 64, 0.15);
+  color: #b8860b;
+  animation: pulse-running 2s ease-in-out infinite;
+}
+.task-status-label.status-failed {
+  background: rgba(229, 83, 104, 0.14);
+  color: var(--color-danger);
+}
+.task-status-label.status-staged {
+  background: rgba(139, 92, 246, 0.12);
+  color: #8b5cf6;
+}
+.task-status-label.status-queued {
+  background: rgba(59, 130, 246, 0.12);
+  color: #3b82f6;
+}
+
+:root[data-theme="dark"] .task-status-label.status-running {
+  background: rgba(244, 183, 64, 0.18);
+  color: #f4b740;
+}
+:root[data-theme="dark"] .task-status-label.status-failed {
+  background: rgba(229, 83, 104, 0.18);
+  color: #f87171;
+}
+:root[data-theme="dark"] .task-status-label.status-staged {
+  background: rgba(139, 92, 246, 0.18);
+  color: #a78bfa;
+}
+:root[data-theme="dark"] .task-status-label.status-queued {
+  background: rgba(59, 130, 246, 0.18);
+  color: #60a5fa;
+}
+
 .task-tile .task-meta {
   font-size: 13px;
   color: var(--color-text-muted);
@@ -5638,6 +5733,82 @@ select option[value=""] {
   font-size: 16px;
 }
 
+/* Model Configuration section in options menu */
+.options-menu-section {
+  padding: 4px 0;
+}
+
+.options-menu-label {
+  padding: 6px 16px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--color-text-muted);
+}
+
+.options-menu-select-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 16px;
+}
+
+.options-menu-select-row label {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+}
+
+.options-menu-select-row select {
+  flex: 0 1 auto;
+  min-width: 130px;
+  padding: 4px 8px;
+  font-size: 12px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-small);
+  background: var(--color-bg);
+  color: var(--color-text);
+  cursor: pointer;
+}
+
+.options-menu-select-row select:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+
+.options-menu-actions-row {
+  display: flex;
+  justify-content: flex-end;
+  padding: 4px 16px 8px;
+}
+
+.options-menu-link-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--color-text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.options-menu-link-btn:hover {
+  color: var(--color-text);
+}
+
+.options-menu-link-btn:focus {
+  outline: none;
+  color: var(--color-text);
+}
+
+.options-menu-link-btn:disabled {
+  opacity: 0.45;
+  cursor: default;
+  text-decoration: none;
+}
+
 .options-menu-item .option-text {
   flex: 1;
   white-space: nowrap;
@@ -8097,6 +8268,10 @@ select option[value=""] {
   animation: pulse-indicator 1s ease-in-out infinite;
 }
 
+.status-indicator.degraded {
+  background: var(--color-warning);
+}
+
 @keyframes pulse-indicator {
   0%, 100% {
     opacity: 1;
@@ -12050,6 +12225,183 @@ select option[value=""] {
   display: none;
 }
 
+.profile-section-desc {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  margin-bottom: 12px;
+}
+
+/* Git Connections Section */
+.git-connections-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.git-connections-loading {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  padding: 8px 0;
+}
+
+.git-connection-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: var(--color-bg-secondary);
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+}
+
+.git-connection-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.git-connection-icon {
+  width: 24px;
+  height: 24px;
+  color: var(--color-text-muted);
+}
+
+.git-connection-details {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.git-connection-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+.git-connection-display-name {
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+.git-connection-status {
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+.git-connection-status.connected {
+  color: var(--color-success);
+}
+
+.git-connection-actions .btn-small {
+  padding: 4px 10px;
+  font-size: 12px;
+}
+
+.git-connections-empty {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  padding: 12px 0;
+  text-align: center;
+}
+
+/* Git Connections Required Modal */
+.git-connections-intro {
+  margin-bottom: 16px;
+  color: var(--color-text);
+}
+
+.git-connections-required-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.git-provider-card {
+  padding: 16px;
+  background: var(--color-bg-secondary);
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+}
+
+.git-provider-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.git-provider-card-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.git-provider-card-icon {
+  width: 24px;
+  height: 24px;
+  color: var(--color-text-muted);
+}
+
+.git-provider-card-details {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.git-provider-card-name {
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+.git-provider-card-display-name {
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+.git-provider-card.connected {
+  border-color: var(--color-success);
+  background: color-mix(in srgb, var(--color-success) 5%, var(--color-bg-secondary));
+}
+
+.git-provider-card-connected {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-success);
+}
+
+.git-provider-card.unsupported {
+  border-color: var(--color-warning);
+  background: color-mix(in srgb, var(--color-warning) 5%, var(--color-bg-secondary));
+}
+
+.git-provider-card-unsupported {
+  font-size: 12px;
+  color: var(--color-warning);
+  font-style: italic;
+}
+
+.git-provider-card-repos {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  padding-left: 34px;
+}
+
+.git-provider-card-repos ul {
+  margin: 4px 0 0 0;
+  padding-left: 16px;
+}
+
+.git-provider-card-repos li {
+  margin-bottom: 2px;
+}
+
+.git-connections-hint {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  margin-top: 8px;
+}
+
 .admin-dropdown {
   min-width: 220px;
 }
@@ -12356,6 +12708,32 @@ select option[value=""] {
   color: var(--color-text);
 }
 
+.metric-progress {
+  width: 100%;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  overflow: hidden;
+  margin-top: 2px;
+}
+
+.metric-progress-fill {
+  width: 0;
+  height: 100%;
+  border-radius: inherit;
+  transition: width 0.25s ease;
+  background: var(--color-success);
+}
+
+.metric-progress-fill.status-warning {
+  background: var(--color-warning, #f59e0b);
+}
+
+.metric-progress-fill.status-critical {
+  background: var(--color-danger, #e55368);
+}
+
 .metric-sub {
   font-size: 13px;
   color: var(--color-text-muted);
@@ -15551,6 +15929,58 @@ select option[value=""] {
   margin-bottom: 8px;
 }
 
+.objective-model-config-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.objective-model-config-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.objective-model-config-row label {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+.objective-model-config-row select {
+  min-width: 180px;
+  max-width: 260px;
+  width: 100%;
+  padding: 7px 10px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-small);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 13px;
+}
+
+.objective-model-config-row select:focus {
+  outline: 2px solid rgba(63,114,255,0.25);
+  border-color: var(--color-accent);
+}
+
+.objective-model-config-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media (max-width: 700px) {
+  .objective-model-config-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .objective-model-config-row select {
+    min-width: 0;
+    max-width: none;
+  }
+}
+
 /* Objective Modal Actions */
 .objective-modal-actions {
   display: flex;
@@ -15649,6 +16079,7 @@ select option[value=""] {
 #objective-modal.instructions-maximized #objective-attachments-field,
 #objective-modal.instructions-maximized #objective-environment-field,
 #objective-modal.instructions-maximized #objective-agents-field,
+#objective-modal.instructions-maximized #objective-model-config-field,
 #objective-modal.instructions-maximized #objective-comments-field,
 #objective-modal.instructions-maximized .objective-modal-actions {
   display: none;
@@ -17020,7 +17451,7 @@ body.task-list-open .task-list-side-trigger {
    ============================================ */
 
 .modal-content-narrow {
-  max-width: 480px;
+  max-width: 560px;
 }
 
 .modal-content-medium {
@@ -17050,14 +17481,13 @@ body.task-list-open .task-list-side-trigger {
 
 #about-coderflow-modal .about-version-card {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
   padding: 10px 14px;
   background: var(--color-surface-muted);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-small);
   text-align: left;
-  gap: 12px;
+  gap: 8px;
 }
 
 #about-coderflow-modal .about-version-label {
@@ -17089,6 +17519,147 @@ body.task-list-open .task-list-side-trigger {
   text-decoration: underline;
 }
 
+/* About modal - Update check styles */
+.btn-sm {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+#about-check-updates-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.about-update-status {
+  margin-top: 0.5rem;
+  padding: 0.75rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.about-update-status.up-to-date {
+  background-color: rgba(72, 187, 120, 0.1);
+  border: 1px solid rgba(72, 187, 120, 0.3);
+  color: #2f855a;
+}
+
+.about-update-status.update-available {
+  background-color: rgba(66, 153, 225, 0.1);
+  border: 1px solid rgba(66, 153, 225, 0.3);
+  color: #2c5282;
+}
+
+.about-update-status.update-error {
+  background-color: rgba(245, 101, 101, 0.1);
+  border: 1px solid rgba(245, 101, 101, 0.3);
+  color: #c53030;
+}
+
+.about-update-status.update-ahead {
+  background-color: rgba(237, 137, 54, 0.1);
+  border: 1px solid rgba(237, 137, 54, 0.3);
+  color: #9c4221;
+}
+
+.about-update-header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.5rem;
+}
+
+.about-update-status-icon {
+  display: inline-block;
+  font-weight: bold;
+}
+
+.about-update-link {
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+  color: #3182ce;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.about-update-link:hover {
+  text-decoration: underline;
+}
+
+.about-update-version-row {
+  margin-top: 0.5rem;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.about-update-version-arrow {
+  opacity: 0.8;
+}
+
+.about-update-command-row {
+  margin-top: 0.6rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: nowrap;
+}
+
+.about-update-command {
+  white-space: nowrap;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.about-copy-command-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-small);
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.about-copy-command-btn:hover {
+  background: var(--color-surface-muted);
+  color: var(--color-text);
+}
+
+.about-copy-command-btn.copied {
+  background-color: rgba(72, 187, 120, 0.2);
+  border-color: rgba(72, 187, 120, 0.4);
+  color: #2f855a;
+}
+
+.about-update-help {
+  margin-top: 0.6rem;
+  display: block;
+  opacity: 0.85;
+}
+
+.about-update-status code {
+  background-color: rgba(0, 0, 0, 0.1);
+  padding: 0.125rem 0.25rem;
+  border-radius: 3px;
+  font-size: 0.85em;
+}
+
+@media (max-width: 640px) {
+  .about-update-link {
+    margin-left: 0;
+  }
+}
+
 .apikeys-list {
   display: flex;
   flex-direction: column;
@@ -18612,3 +19183,147 @@ body.task-list-open .task-list-side-trigger {
   border-color: var(--color-border);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
+
+/* Task Progress Card Styles (New Design) */
+.task-progress-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 8px 4px 16px;
+}
+
+.task-progress-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.task-progress-track {
+  flex: 1;
+  height: 8px;
+  background-color: #e2e8f0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.task-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #10b981 0%, #3b82f6 100%);
+  border-radius: 4px;
+  transition: width 0.5s ease-out;
+}
+
+.task-progress-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  min-width: 40px;
+  text-align: right;
+}
+
+.task-todo-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  position: relative;
+}
+
+/* Vertical connector line */
+.task-todo-list::before {
+  content: '';
+  position: absolute;
+  top: 14px;
+  bottom: 14px;
+  left: 14px;
+  width: 2px;
+  background-color: #e2e8f0;
+  z-index: 0;
+}
+
+.task-todo-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  position: relative;
+  z-index: 1;
+}
+
+.task-todo-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 600;
+  background-color: var(--color-surface); /* Mask the connector line */
+  transition: all 0.2s ease;
+}
+
+.task-todo-icon.icon-completed {
+  background-color: #10b981;
+  color: white;
+  border: 2px solid #10b981;
+}
+
+.task-todo-icon.icon-completed svg {
+  width: 16px;
+  height: 16px;
+}
+
+.task-todo-icon.icon-in-progress {
+  border: 2px solid #3b82f6;
+  color: #3b82f6;
+  background-color: var(--color-surface);
+}
+
+.task-todo-icon.icon-in-progress svg {
+  width: 16px;
+  height: 16px;
+  animation: task-spin 2s linear infinite;
+}
+
+.task-todo-icon.icon-pending {
+  border: 2px solid #e2e8f0;
+  color: #94a3b8;
+  background-color: var(--color-surface);
+}
+
+.task-todo-content {
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--color-text);
+  padding-top: 3px;
+  font-weight: 500;
+}
+
+.task-todo-item.status-completed .task-todo-content {
+  color: var(--color-text-muted);
+}
+
+@keyframes task-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Dark mode adjustments */
+:root[data-theme="dark"] .task-progress-track {
+  background-color: #1e293b;
+}
+
+:root[data-theme="dark"] .task-todo-list::before {
+  background-color: #1e293b;
+}
+
+:root[data-theme="dark"] .task-todo-icon.icon-pending {
+  border-color: #334155;
+  color: #64748b;
+}
+
+:root[data-theme="dark"] .task-todo-icon.icon-in-progress,
+:root[data-theme="dark"] .task-todo-icon.icon-pending {
+  background-color: var(--color-surface);
+}
+