claude-code-workflow 6.1.4 → 6.2.2

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

@@ -0,0 +1,310 @@
+/* ========================================
+ * CLI Tool Management Styles
+ * ======================================== */
+
+/* Disabled tool card */
+.cli-tool-card.disabled {
+  opacity: 0.6;
+}
+
+.cli-tool-card.disabled .cli-tool-header {
+  opacity: 0.8;
+}
+
+/* Disabled status indicator */
+.cli-tool-status.status-disabled {
+  background: hsl(var(--warning));
+}
+
+/* Warning badge */
+.cli-tool-badge.badge-warning {
+  background: hsl(var(--warning) / 0.15);
+  color: hsl(var(--warning));
+  font-size: 0.65rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  margin-left: 0.25rem;
+}
+
+/* Compact toggle for tool cards */
+.cli-toggle-compact {
+  position: relative;
+  display: inline-block;
+  width: 28px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.cli-toggle-compact input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.cli-toggle-slider-compact {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: hsl(var(--muted));
+  transition: 0.2s;
+  border-radius: 16px;
+}
+
+.cli-toggle-slider-compact:before {
+  position: absolute;
+  content: "";
+  height: 12px;
+  width: 12px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  transition: 0.2s;
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+.cli-toggle-compact input:checked + .cli-toggle-slider-compact {
+  background-color: hsl(var(--primary));
+}
+
+.cli-toggle-compact input:checked + .cli-toggle-slider-compact:before {
+  transform: translateX(12px);
+}
+
+.cli-toggle-compact input:focus + .cli-toggle-slider-compact {
+  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.5);
+}
+
+/* Language Setting Status Badge */
+.cli-setting-status {
+  margin-left: 0.75rem;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  border-radius: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+}
+
+.cli-setting-status.enabled {
+  background: hsl(var(--primary) / 0.15);
+  color: hsl(var(--primary));
+}
+
+.cli-setting-status.disabled {
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+}
+
+/* Ghost button variant for destructive actions */
+.btn-ghost.text-destructive {
+  color: hsl(var(--destructive));
+}
+
+/* ========================================
+ * Tool Configuration Modal
+ * ======================================== */
+
+/* Tool item clickable */
+.tool-item.clickable {
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.tool-item.clickable:hover {
+  background: hsl(var(--accent));
+  border-color: hsl(var(--primary) / 0.3);
+}
+
+.tool-item.clickable:hover .tool-config-icon {
+  opacity: 1;
+}
+
+.tool-config-icon {
+  margin-left: 0.375rem;
+  color: hsl(var(--muted-foreground));
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+/* Tool Config Modal */
+.tool-config-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.tool-config-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.tool-config-section h4 {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  color: hsl(var(--muted-foreground));
+  margin: 0;
+}
+
+.tool-config-section h4 .text-muted {
+  font-weight: 400;
+  text-transform: none;
+  color: hsl(var(--muted-foreground) / 0.7);
+}
+
+/* Status Badges */
+.tool-config-badges {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  border-radius: 9999px;
+}
+
+.badge-success {
+  background: hsl(var(--success) / 0.15);
+  color: hsl(var(--success));
+}
+
+.badge-primary {
+  background: hsl(var(--primary) / 0.15);
+  color: hsl(var(--primary));
+}
+
+.badge-muted {
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+}
+
+/* Config Actions */
+.tool-config-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.btn-danger-outline {
+  border-color: hsl(var(--destructive) / 0.5);
+  color: hsl(var(--destructive));
+}
+
+.btn-danger-outline:hover {
+  background: hsl(var(--destructive) / 0.1);
+  border-color: hsl(var(--destructive));
+}
+
+/* Config Selects and Inputs */
+.tool-config-select,
+.tool-config-input {
+  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;
+}
+
+.tool-config-select:focus,
+.tool-config-input:focus {
+  outline: none;
+  border-color: hsl(var(--primary));
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
+}
+
+.tool-config-select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.25rem;
+  padding-right: 2rem;
+}
+
+.tool-config-input.hidden {
+  display: none;
+}
+
+.tool-config-input {
+  margin-top: 0.375rem;
+}
+
+/* Config Footer */
+.tool-config-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem 1.25rem 1.25rem;
+  border-top: 1px solid hsl(var(--border));
+  margin-top: 0.5rem;
+}
+
+.tool-config-footer .btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.tool-config-footer .btn-outline {
+  background: transparent;
+  border: 1px solid hsl(var(--border));
+  color: hsl(var(--foreground));
+}
+
+.tool-config-footer .btn-outline:hover {
+  background: hsl(var(--muted));
+  border-color: hsl(var(--muted-foreground) / 0.3);
+}
+
+.tool-config-footer .btn-primary {
+  background: hsl(var(--primary));
+  border: 1px solid hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+}
+
+.tool-config-footer .btn-primary:hover {
+  background: hsl(var(--primary) / 0.9);
+}
+
+/* Model Select Group */
+.model-select-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.model-select-group .tool-config-input {
+  margin-top: 0;
+}
+
+.btn-ghost.text-destructive:hover {
+  background: hsl(var(--destructive) / 0.1);
+}
+

package/ccw/src/templates/dashboard-css/22-cli-semantic.css

@@ -0,0 +1,240 @@
+/* ========================================
+ * Semantic Metadata Viewer Styles
+ * ======================================== */
+.semantic-viewer-toolbar {
+  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));
+}
+
+.semantic-table-container {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.semantic-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
+}
+
+.semantic-table th {
+  position: sticky;
+  top: 0;
+  background: hsl(var(--card));
+  padding: 0.625rem 0.75rem;
+  text-align: left;
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+  border-bottom: 1px solid hsl(var(--border));
+  white-space: nowrap;
+}
+
+.semantic-table td {
+  padding: 0.625rem 0.75rem;
+  border-bottom: 1px solid hsl(var(--border) / 0.5);
+  vertical-align: top;
+}
+
+.semantic-row {
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.semantic-row:hover {
+  background: hsl(var(--hover));
+}
+
+.semantic-cell-file {
+  max-width: 200px;
+}
+
+.semantic-cell-lang {
+  width: 80px;
+  color: hsl(var(--muted-foreground));
+}
+
+.semantic-cell-purpose {
+  max-width: 180px;
+  color: hsl(var(--foreground) / 0.8);
+}
+
+.semantic-cell-keywords {
+  max-width: 160px;
+}
+
+.semantic-cell-tool {
+  width: 70px;
+}
+
+.semantic-cell-date {
+  width: 80px;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.75rem;
+}
+
+.semantic-keyword {
+  display: inline-block;
+  padding: 0.125rem 0.375rem;
+  margin: 0.125rem;
+  background: hsl(var(--primary) / 0.1);
+  color: hsl(var(--primary));
+  border-radius: 0.25rem;
+  font-size: 0.6875rem;
+}
+
+.semantic-keyword-more {
+  display: inline-block;
+  padding: 0.125rem 0.375rem;
+  margin: 0.125rem;
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+  border-radius: 0.25rem;
+  font-size: 0.6875rem;
+}
+
+.tool-badge {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+.tool-badge.tool-gemini {
+  background: hsl(210 80% 55% / 0.15);
+  color: hsl(210 80% 45%);
+}
+
+.tool-badge.tool-qwen {
+  background: hsl(142 76% 36% / 0.15);
+  color: hsl(142 76% 36%);
+}
+
+.tool-badge.tool-unknown {
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+}
+
+.semantic-detail-row {
+  background: hsl(var(--muted) / 0.2);
+}
+
+.semantic-detail-row.hidden {
+  display: none;
+}
+
+.semantic-detail-content {
+  padding: 1rem;
+}
+
+.semantic-detail-section {
+  margin-bottom: 1rem;
+}
+
+.semantic-detail-section h4 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: hsl(var(--muted-foreground));
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.semantic-detail-section p {
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: hsl(var(--foreground));
+}
+
+.semantic-keywords-full {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.semantic-detail-meta {
+  display: flex;
+  gap: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid hsl(var(--border) / 0.5);
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.semantic-detail-meta span {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.semantic-viewer-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: hsl(var(--muted) / 0.3);
+  border-top: 1px solid hsl(var(--border));
+}
+
+.semantic-loading,
+.semantic-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  text-align: center;
+  color: hsl(var(--muted-foreground));
+}
+
+.semantic-loading {
+  gap: 1rem;
+}
+
+/* ========================================
+ * CodexLens Test Search Results
+ * ======================================== */
+#searchResults {
+  margin-top: 0.5rem;
+}
+
+#searchResults > div {
+  display: flex;
+  flex-direction: column;
+  max-height: 200px;
+  overflow: hidden;
+  background: hsl(var(--muted) / 0.3);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+}
+
+#searchResults .flex.items-center {
+  flex-shrink: 0;
+  margin-bottom: 0.5rem;
+}
+
+#searchResultContent {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 0.75rem;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: hsl(var(--foreground) / 0.9);
+  background: hsl(var(--background) / 0.5);
+  border-radius: 0.375rem;
+  padding: 0.5rem;
+  margin: 0;
+}