claude-code-workflow 6.3.18 → 6.3.20

package/ccw/src/templates/dashboard-css/01-base.css

@@ -300,3 +300,112 @@ body {
     padding-right: 2.5rem;
   }
 }
+
+/* ===================================
+   Development Index Timeline Styles
+   =================================== */
+
+/* View toggle buttons */
+.dev-view-btn {
+  transition: all 0.2s ease;
+}
+
+.dev-view-btn.active {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  border-color: hsl(var(--primary));
+}
+
+.dev-view-btn:hover:not(.active) {
+  background: hsl(var(--muted));
+}
+
+/* Development Timeline */
+.dev-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.dev-timeline-item {
+  display: flex;
+  gap: 1rem;
+  position: relative;
+}
+
+.dev-timeline-marker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  width: 2rem;
+}
+
+.dev-timeline-dot {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  flex-shrink: 0;
+}
+
+.dev-timeline-dot.bg-primary {
+  background: hsl(var(--primary));
+  color: white;
+}
+
+.dev-timeline-dot.bg-success {
+  background: hsl(var(--success));
+  color: white;
+}
+
+.dev-timeline-dot.bg-destructive {
+  background: hsl(var(--destructive));
+  color: white;
+}
+
+.dev-timeline-dot.bg-warning {
+  background: hsl(var(--warning));
+  color: hsl(var(--foreground));
+}
+
+.dev-timeline-dot.bg-muted {
+  background: hsl(var(--muted-foreground));
+  color: white;
+}
+
+.dev-timeline-dot i {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.dev-timeline-line {
+  width: 2px;
+  flex: 1;
+  min-height: 1rem;
+  background: hsl(var(--border));
+  margin: 0.25rem 0;
+}
+
+.dev-timeline-content {
+  flex: 1;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+  transition: all 0.2s ease;
+}
+
+.dev-timeline-content:hover {
+  border-color: hsl(var(--primary) / 0.3);
+  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.05);
+}
+
+/* Hidden utility class */
+.hidden {
+  display: none !important;
+}

package/ccw/src/templates/dashboard-css/10-cli-status.css

@@ -203,6 +203,208 @@
   color: hsl(142 76% 36%);
 }
 
+/* Tool Tags - displayed in tool cards */
+.tool-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+}
+
+.tool-tag {
+  font-size: 0.5625rem;
+  font-weight: 500;
+  padding: 0.125rem 0.375rem;
+  background: hsl(var(--primary) / 0.1);
+  color: hsl(var(--primary));
+  border-radius: 0.25rem;
+}
+
+/* Tags Input - used in config modal */
+.tags-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Unified tag input - tags and input in one container */
+.tags-unified-input {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  min-height: 2.5rem;
+  padding: 0.375rem 0.5rem;
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  cursor: text;
+  transition: border-color 0.15s ease;
+}
+
+.tags-unified-input:focus-within {
+  border-color: hsl(var(--primary));
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1);
+}
+
+.tag-inline-input {
+  flex: 1;
+  min-width: 120px;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 0.8125rem;
+  color: hsl(var(--foreground));
+  padding: 0.25rem 0;
+}
+
+.tag-inline-input::placeholder {
+  color: hsl(var(--muted-foreground) / 0.6);
+}
+
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  min-height: 1.75rem;
+  padding: 0.25rem;
+  background: hsl(var(--muted) / 0.3);
+  border-radius: 0.375rem;
+}
+
+.tag-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.25rem 0.5rem;
+  background: hsl(var(--primary) / 0.15);
+  color: hsl(var(--primary));
+  border-radius: 0.25rem;
+}
+
+/* Tag color variants */
+.tag-item.tag-分析, .tool-tag.tag-分析 {
+  background: hsl(210 100% 50% / 0.15);
+  color: hsl(210 100% 45%);
+}
+
+.tag-item.tag-编码, .tool-tag.tag-编码 {
+  background: hsl(142 76% 36% / 0.15);
+  color: hsl(142 76% 36%);
+}
+
+.tag-item.tag-Debug, .tool-tag.tag-Debug {
+  background: hsl(0 84% 60% / 0.15);
+  color: hsl(0 84% 50%);
+}
+
+.tag-item.tag-重构, .tool-tag.tag-重构 {
+  background: hsl(280 70% 50% / 0.15);
+  color: hsl(280 70% 45%);
+}
+
+.tag-item.tag-测试, .tool-tag.tag-测试 {
+  background: hsl(45 93% 47% / 0.15);
+  color: hsl(45 93% 35%);
+}
+
+.tag-item.tag-文档, .tool-tag.tag-文档 {
+  background: hsl(180 70% 40% / 0.15);
+  color: hsl(180 70% 35%);
+}
+
+.tag-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: hsl(var(--primary) / 0.6);
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 1;
+  border-radius: 0.125rem;
+}
+
+.tag-remove:hover {
+  background: hsl(var(--destructive) / 0.2);
+  color: hsl(var(--destructive));
+}
+
+/* Predefined Tags Row - prominent quick add buttons */
+.predefined-tags-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.predefined-tag-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.375rem 0.625rem;
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.predefined-tag-btn:hover {
+  background: hsl(var(--primary) / 0.15);
+  color: hsl(var(--primary));
+  border-color: hsl(var(--primary) / 0.3);
+}
+
+.predefined-tag-btn.selected,
+.predefined-tag-btn:disabled {
+  background: hsl(var(--primary) / 0.1);
+  color: hsl(var(--muted-foreground));
+  border-color: hsl(var(--primary) / 0.2);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.predefined-tag-btn i {
+  opacity: 0.7;
+}
+
+/* Legacy predefined tags */
+.predefined-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: 0.5rem;
+}
+
+.predefined-tag {
+  font-size: 0.6875rem;
+  font-weight: 500;
+  padding: 0.25rem 0.5rem;
+  background: hsl(var(--muted) / 0.5);
+  color: hsl(var(--muted-foreground));
+  border: 1px dashed hsl(var(--border));
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.predefined-tag:hover {
+  background: hsl(var(--primary) / 0.1);
+  color: hsl(var(--primary));
+  border-color: hsl(var(--primary) / 0.3);
+}
+
 .tool-item-right {
   display: flex;
   align-items: center;

package/ccw/src/templates/dashboard-css/21-cli-toolmgmt.css

@@ -308,3 +308,311 @@
   background: hsl(var(--destructive) / 0.1);
 }
 
+/* ========================================
+ * CLI Manager Split Layout (Claude Config)
+ * ======================================== */
+
+.cli-manager-split {
+  display: flex;
+  gap: var(--spacing-md, 1rem);
+  height: 100%;
+  min-height: 400px;
+}
+
+.cli-manager-sidebar {
+  width: 280px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  background: hsl(var(--card));
+  border-radius: 0.5rem;
+  border: 1px solid hsl(var(--border));
+  padding: 1rem;
+}
+
+.cli-manager-sidebar h3 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 0 0 0.75rem 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: hsl(var(--foreground));
+}
+
+.cli-manager-main {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.25rem;
+  background: hsl(var(--card));
+  border-radius: 0.5rem;
+  border: 1px solid hsl(var(--border));
+}
+
+/* Tool List Items */
+.cli-tool-list-item {
+  padding: 0.625rem 0.75rem;
+  cursor: pointer;
+  border-radius: 0.375rem;
+  transition: all 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
+}
+
+.cli-tool-list-item:hover {
+  background: hsl(var(--accent));
+}
+
+.cli-tool-list-item.selected {
+  background: hsl(var(--primary) / 0.1);
+  border-left: 3px solid hsl(var(--primary));
+  padding-left: calc(0.75rem - 3px);
+}
+
+.cli-tool-list-item .tool-name {
+  font-weight: 500;
+  font-size: 0.8125rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cli-tool-list-item .tool-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.cli-tool-list-item .tool-status.installed {
+  background: hsl(var(--success));
+}
+
+.cli-tool-list-item .tool-status.not-installed {
+  background: hsl(var(--muted-foreground) / 0.4);
+}
+
+/* Config Mode Toggle */
+.config-mode-toggle {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.25rem;
+  background: hsl(var(--muted) / 0.5);
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+}
+
+.config-mode-btn {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+}
+
+.config-mode-btn:hover {
+  color: hsl(var(--foreground));
+}
+
+.config-mode-btn.active {
+  background: hsl(var(--background));
+  color: hsl(var(--primary));
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* Tool Detail Header */
+.tool-detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.25rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.tool-detail-header h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Claude Settings Form */
+.claude-config-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.claude-config-form .form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.claude-config-form .form-group label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: hsl(var(--muted-foreground));
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.claude-config-form .form-control {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  font-family: inherit;
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.claude-config-form .form-control:focus {
+  outline: none;
+  border-color: hsl(var(--primary));
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
+}
+
+.claude-config-form .form-control::placeholder {
+  color: hsl(var(--muted-foreground) / 0.6);
+}
+
+/* Model Config Section */
+.model-config-section {
+  background: hsl(var(--muted) / 0.3);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.model-config-section h4 {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  margin: 0 0 0.75rem 0;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.model-config-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+@media (max-width: 768px) {
+  .model-config-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Empty State */
+.cli-manager-main .empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 200px;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.875rem;
+  gap: 0.5rem;
+}
+
+.cli-manager-main .empty-state i {
+  opacity: 0.5;
+}
+
+/* Endpoints List in Config Panel */
+.claude-endpoints-list {
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid hsl(var(--border));
+}
+
+.claude-endpoints-list h4 {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  margin: 0 0 0.75rem 0;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.claude-endpoint-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.625rem 0.75rem;
+  background: hsl(var(--muted) / 0.3);
+  border-radius: 0.375rem;
+  margin-bottom: 0.5rem;
+}
+
+.claude-endpoint-item:last-child {
+  margin-bottom: 0;
+}
+
+.claude-endpoint-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.claude-endpoint-name {
+  font-weight: 500;
+  font-size: 0.8125rem;
+}
+
+.claude-endpoint-meta {
+  font-size: 0.6875rem;
+  color: hsl(var(--muted-foreground));
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.claude-endpoint-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* Config Source Badge */
+.config-source-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.625rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.config-source-badge.provider {
+  background: hsl(var(--primary) / 0.15);
+  color: hsl(var(--primary));
+}
+
+.config-source-badge.direct {
+  background: hsl(var(--success) / 0.15);
+  color: hsl(var(--success));
+}
+

package/ccw/src/templates/dashboard-css/30-core-memory.css

@@ -299,10 +299,30 @@
   color: hsl(38 92% 50%);
 }
 
+.icon-btn.favorite-active svg {
+  stroke: hsl(38 92% 50%);
+  fill: hsl(38 92% 50% / 0.2);
+}
+
 .icon-btn.favorite-active:hover {
   color: hsl(38 92% 40%);
 }
 
+.icon-btn.favorite-active:hover svg {
+  stroke: hsl(38 92% 40%);
+  fill: hsl(38 92% 40% / 0.3);
+}
+
+/* Favorite star icon in memory-id */
+.favorite-star {
+  color: hsl(38 92% 50%);
+}
+
+.favorite-star svg {
+  stroke: hsl(38 92% 50%);
+  fill: hsl(38 92% 50% / 0.2);
+}
+
 .icon-btn i {
   width: 18px;
   height: 18px;