claude-code-workflow 6.3.18 → 6.3.20

package/ccw/src/templates/dashboard-css/31-api-settings.css

@@ -916,7 +916,7 @@ select.cli-input {
 .cli-textarea {
   resize: vertical;
   min-height: 4rem;
-  max-height: 12rem;
+  max-height: 20rem;
   font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
   font-size: 0.8125rem;
 }
@@ -972,27 +972,43 @@ select.cli-input {
 
 .sidebar-tabs {
   display: flex;
-  gap: 0;
+  flex-wrap: nowrap;
+  gap: 0.125rem;
   padding: 0.5rem;
   background: hsl(var(--muted) / 0.3);
   border-bottom: 1px solid hsl(var(--border));
+  overflow-x: auto;
 }
 
 .sidebar-tab {
-  flex: 1;
+  flex: 1 1 0;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.25rem;
+  gap: 0.125rem;
   padding: 0.5rem 0.25rem;
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   font-weight: 500;
   color: hsl(var(--muted-foreground));
   background: transparent;
-  border: none;
-  border-radius: 0.375rem;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
   cursor: pointer;
   transition: all 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.sidebar-tab span {
+  display: block;
+  width: 100%;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .sidebar-tab:hover {
@@ -1002,12 +1018,14 @@ select.cli-input {
 
 .sidebar-tab.active {
   color: hsl(var(--primary));
-  background: hsl(var(--primary) / 0.1);
+  background: hsl(var(--card));
+  border-color: hsl(var(--border));
+  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.05);
 }
 
 .sidebar-tab i {
-  width: 14px;
-  height: 14px;
+  width: 18px;
+  height: 18px;
 }
 
 /* Sidebar content areas */
@@ -1104,16 +1122,65 @@ select.cli-input {
   opacity: 0.5;
 }
 
+/* ===========================
+   Model Pools (High Availability)
+   =========================== */
+
+.model-pools-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.pool-type-group {
+  margin-bottom: 1rem;
+}
+
+.pool-type-header {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--muted) / 0.3);
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.pool-item {
+  padding: 0.75rem;
+  cursor: pointer;
+  border-bottom: 1px solid hsl(var(--border));
+  transition: background-color 0.15s;
+}
+
+.pool-item:hover {
+  background: hsl(var(--muted) / 0.3);
+}
+
+.pool-item.selected {
+  background: hsl(var(--primary) / 0.1);
+  border-left: 3px solid hsl(var(--primary));
+}
+
+.pool-item .pool-name {
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.pool-item .pool-target {
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+}
+
 /* Responsive adjustments for tabs */
 @media (max-width: 768px) {
   .sidebar-tab {
-    padding: 0.5rem 0.5rem;
-    font-size: 0.7rem;
+    padding: 0.5rem 0.625rem;
+    font-size: 0.75rem;
   }
 
   .sidebar-tab i {
-    width: 12px;
-    height: 12px;
+    width: 16px;
+    height: 16px;
   }
 }
 
@@ -1205,9 +1272,100 @@ select.cli-input {
   letter-spacing: 0.03em;
 }
 
+/* Provider Item (used in CLI Settings list) */
+.provider-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  border: 1px solid transparent;
+}
+
+.provider-item:hover {
+  background: hsl(var(--muted) / 0.5);
+}
+
+.provider-item.selected {
+  background: hsl(var(--primary) / 0.1);
+  border-color: hsl(var(--primary) / 0.3);
+}
+
+.provider-item-content {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.provider-icon {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: hsl(var(--muted) / 0.5);
+  color: hsl(var(--muted-foreground));
+}
+
+.provider-icon i,
+.provider-icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.provider-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.provider-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.provider-type {
+  font-size: 0.6875rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.provider-status {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.provider-status .status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: hsl(var(--muted-foreground));
+}
+
+.provider-status.enabled .status-dot {
+  background: hsl(142 76% 36%);
+}
+
+.provider-status.disabled .status-dot {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
 .provider-list-footer {
   padding: 1rem;
   border-top: 1px solid hsl(var(--border));
+  margin-top: auto;
 }
 
 .btn-full {
@@ -1260,6 +1418,75 @@ select.cli-input {
   gap: 1.5rem;
 }
 
+/* Detail Section (for CLI Settings, etc.) */
+.detail-section {
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  padding: 1rem 1.25rem;
+}
+
+.detail-section h3 {
+  margin: 0 0 1rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1rem;
+}
+
+.detail-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.detail-item label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.detail-item span {
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+  word-break: break-all;
+}
+
+.detail-item span.mono {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.8125rem;
+  background: hsl(var(--muted) / 0.3);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.detail-item-full {
+  grid-column: 1 / -1;
+}
+
+/* Code Block */
+.code-block {
+  background: hsl(var(--muted) / 0.3);
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  padding: 0.75rem 1rem;
+  overflow-x: auto;
+}
+
+.code-block code {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.8125rem;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+}
+
 /* Field Groups */
 .field-group {
   display: flex;
@@ -1860,6 +2087,26 @@ select.cli-input {
   margin-bottom: 0.75rem;
 }
 
+/* ===========================
+   CLI Settings List in Sidebar
+   =========================== */
+
+.cli-settings-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+/* ===========================
+   Model Pools List in Sidebar
+   =========================== */
+
+.model-pools-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
 /* ===========================
    Main Panel Sections
    =========================== */
@@ -2262,4 +2509,494 @@ select.cli-input {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
+}
+
+/* ===========================
+   Model Pool Detail Info Grid
+   =========================== */
+
+.provider-detail {
+  padding: 1.5rem;
+  overflow-y: auto;
+}
+
+.provider-detail .provider-detail-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.provider-detail .provider-detail-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.provider-detail .provider-detail-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.provider-detail .form-section {
+  padding: 1.25rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.75rem;
+}
+
+.provider-detail .form-section h3 {
+  margin: 0 0 1rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: hsl(var(--muted-foreground));
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.provider-detail .form-section p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+  line-height: 1.5;
+}
+
+/* Info Grid - Used in Model Pool Detail */
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.info-item label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.info-item span {
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+}
+
+/* Status badge inside info-item should not stretch */
+.info-item .status-badge {
+  display: inline-flex;
+  width: auto;
+}
+
+/* Excluded Providers List */
+.excluded-providers-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.excluded-providers-list .tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background: hsl(var(--muted) / 0.5);
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Provider Actions in Detail Header */
+.provider-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+@media (max-width: 640px) {
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .provider-detail .provider-detail-header {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .provider-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
+/* ===========================
+   CLI Settings Form
+   =========================== */
+
+/* Tool Detail Header */
+.tool-detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.2);
+  flex-shrink: 0;
+}
+
+.tool-detail-header h3 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.tool-detail-header h3 svg,
+.tool-detail-header h3 i {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: hsl(var(--primary));
+}
+
+/* Claude Config Form Container */
+.claude-config-form {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Config Mode Toggle */
+.config-mode-toggle {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding: 0.25rem;
+  background: hsl(var(--muted) / 0.3);
+  border-radius: 0.5rem;
+}
+
+.config-mode-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.config-mode-btn:hover {
+  color: hsl(var(--foreground));
+  background: hsl(var(--muted) / 0.5);
+}
+
+.config-mode-btn.active {
+  color: hsl(var(--primary));
+  background: hsl(var(--card));
+  border-color: hsl(var(--border));
+  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.05);
+}
+
+.config-mode-btn svg,
+.config-mode-btn i {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Model Config Section */
+.model-config-section {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: hsl(var(--muted) / 0.2);
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+}
+
+.model-config-section h4 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 1rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.model-config-section h4 svg,
+.model-config-section h4 i {
+  width: 1rem;
+  height: 1rem;
+  color: hsl(var(--primary));
+}
+
+.model-config-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+.model-config-grid .form-group {
+  margin-bottom: 0;
+}
+
+.model-config-grid .form-group label {
+  font-size: 0.75rem;
+  font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Form Actions - Sticky at bottom */
+.claude-config-form .form-actions {
+  position: sticky;
+  bottom: 0;
+  margin-top: auto;
+  padding: 1rem 0 0;
+  background: hsl(var(--card));
+  border-top: 1px solid hsl(var(--border));
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .model-config-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .config-mode-toggle {
+    flex-direction: column;
+  }
+}
+
+/* ===========================
+   JSON Editor Section
+   =========================== */
+
+.json-editor-section {
+  margin-top: 1rem;
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  overflow: hidden;
+  background: hsl(var(--card));
+}
+
+.json-editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: hsl(var(--muted) / 0.3);
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.json-editor-header h4 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.json-editor-header h4 svg,
+.json-editor-header h4 i {
+  width: 1rem;
+  height: 1rem;
+  color: hsl(var(--primary));
+}
+
+.json-editor-actions {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.json-editor-actions .btn-ghost {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  background: transparent;
+  border: none;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  border-radius: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  transition: all 0.15s;
+}
+
+.json-editor-actions .btn-ghost:hover {
+  background: hsl(var(--muted) / 0.5);
+  color: hsl(var(--foreground));
+}
+
+.json-editor-actions .btn-ghost svg,
+.json-editor-actions .btn-ghost i {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.json-editor-body {
+  display: flex;
+  position: relative;
+  min-height: 200px;
+  max-height: min(450px, 50vh);
+}
+
+.json-line-numbers {
+  width: 2.5rem;
+  padding: 0.75rem 0.5rem;
+  background: hsl(var(--muted) / 0.2);
+  border-right: 1px solid hsl(var(--border));
+  font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  color: hsl(var(--muted-foreground));
+  text-align: right;
+  user-select: none;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.json-line-numbers span {
+  display: block;
+}
+
+.json-textarea {
+  flex: 1;
+  padding: 0.75rem;
+  border: none;
+  resize: none;
+  font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+  outline: none;
+  overflow-y: auto;
+  tab-size: 2;
+}
+
+.json-textarea::placeholder {
+  color: hsl(var(--muted-foreground) / 0.5);
+}
+
+.json-textarea.invalid {
+  background: hsl(var(--destructive) / 0.05);
+  border-left: 2px solid hsl(var(--destructive));
+}
+
+.json-editor-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  background: hsl(var(--muted) / 0.2);
+  border-top: 1px solid hsl(var(--border));
+}
+
+.json-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.json-status svg,
+.json-status i {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.json-status.valid {
+  color: hsl(142 76% 36%);
+}
+
+.json-status.invalid {
+  color: hsl(var(--destructive));
+}
+
+.json-hint {
+  font-size: 0.6875rem;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Parse JSON link in footer */
+.json-parse-link {
+  font-size: 0.75rem;
+  color: hsl(var(--primary));
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.json-parse-link:hover {
+  color: hsl(var(--primary) / 0.8);
+  text-decoration: underline;
+}
+
+/* Input with toggle button (for password visibility) */
+.input-with-toggle {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-with-toggle .form-control {
+  flex: 1;
+  padding-right: 2.5rem;
+}
+
+.input-with-toggle .toggle-password {
+  position: absolute;
+  right: 0.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 0.25rem 0.5rem;
+  background: transparent;
+  border: none;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-with-toggle .toggle-password:hover {
+  color: hsl(var(--foreground));
+}
+
+.input-with-toggle .toggle-password i,
+.input-with-toggle .toggle-password svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* Button styles for JSON editor */
+.btn-sm {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  border-radius: 0.375rem;
 }