claude-code-workflow 6.1.4 → 6.2.2

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

@@ -0,0 +1,1700 @@
+/* ============================================
+   Core Memory Styles
+   ============================================ */
+
+/* Modal Base Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease-out;
+  backdrop-filter: blur(2px);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.modal-content {
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  animation: slideUpModal 0.3s ease-out;
+  overflow: hidden;
+}
+
+@keyframes slideUpModal {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.modal-header h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  margin: 0;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  padding: 0.5rem;
+  cursor: pointer;
+  color: hsl(var(--muted-foreground));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+
+.modal-close:hover {
+  background: hsl(var(--hover));
+  color: hsl(var(--foreground));
+}
+
+.modal-close i {
+  width: 20px;
+  height: 20px;
+}
+
+.modal-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1.25rem 1.5rem;
+  border-top: 1px solid hsl(var(--border));
+}
+
+.core-memory-container {
+  padding: 1.5rem;
+}
+
+/* Tab Navigation */
+.core-memory-tabs {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+  padding-bottom: 1rem;
+}
+
+.tab-nav {
+  display: flex;
+  gap: 0;
+  background: hsl(var(--muted) / 0.5);
+  border-radius: 8px;
+  padding: 4px;
+}
+
+.tab-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  border: none;
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.9375rem;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.tab-btn i {
+  width: 18px;
+  height: 18px;
+}
+
+.tab-btn:hover {
+  color: hsl(var(--foreground));
+}
+
+.tab-btn.active {
+  background: hsl(var(--card));
+  color: hsl(var(--primary));
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.tab-actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.cm-tab-panel {
+  animation: fadeIn 0.2s ease-out;
+}
+
+.cm-tab-panel .memory-stats {
+  margin-bottom: 1rem;
+}
+
+.core-memory-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.header-actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.memory-stats {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.stat-label {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+  margin-bottom: 0.25rem;
+}
+
+.stat-value {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+/* Memories Grid */
+.memories-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  gap: 1.25rem;
+}
+
+@media (max-width: 768px) {
+  .memories-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Memory Card */
+.memory-card {
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  padding: 1.25rem;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  /* Fixed card dimensions */
+  display: flex;
+  flex-direction: column;
+  height: 280px;
+  min-height: 280px;
+  max-height: 280px;
+}
+
+.memory-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.memory-card.archived {
+  opacity: 0.7;
+  border-style: dashed;
+}
+
+.memory-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  flex-shrink: 0;
+}
+
+.memory-id {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+  font-weight: 600;
+  flex-wrap: wrap;
+}
+
+.memory-id i {
+  width: 16px;
+  height: 16px;
+}
+
+.memory-id i[data-lucide="star"] {
+  color: hsl(38 92% 50%);
+}
+
+.memory-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.icon-btn {
+  background: none;
+  border: none;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: hsl(var(--muted-foreground));
+  transition: color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-btn:hover {
+  color: hsl(var(--foreground));
+}
+
+.icon-btn.danger:hover {
+  color: hsl(var(--destructive));
+}
+
+.icon-btn.favorite-active {
+  color: hsl(38 92% 50%);
+}
+
+.icon-btn.favorite-active:hover {
+  color: hsl(38 92% 40%);
+}
+
+.icon-btn i {
+  width: 18px;
+  height: 18px;
+}
+
+/* Copy ID Button */
+.copy-id-btn {
+  background: none;
+  border: none;
+  padding: 0.125rem 0.25rem;
+  cursor: pointer;
+  color: hsl(var(--muted-foreground));
+  transition: color 0.2s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.25rem;
+  border-radius: 4px;
+}
+
+.copy-id-btn:hover {
+  color: hsl(var(--primary));
+  background: hsl(var(--muted));
+}
+
+.copy-id-btn i {
+  width: 14px;
+  height: 14px;
+}
+
+.copy-id-btn.copied {
+  color: hsl(var(--success, 142 76% 36%));
+}
+
+/* Memory Content */
+.memory-content {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  margin-bottom: 0.75rem;
+}
+
+.memory-summary,
+.memory-preview {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: hsl(var(--muted-foreground));
+  /* Fixed height with ellipsis */
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 6em;
+}
+
+.memory-summary {
+  color: hsl(var(--foreground));
+}
+
+/* Memory Tags */
+.memory-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-bottom: 0.5rem;
+  flex-shrink: 0;
+  max-height: 2rem;
+  overflow: hidden;
+}
+
+.tag {
+  padding: 0.25rem 0.75rem;
+  background: hsl(var(--accent));
+  color: hsl(var(--primary));
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* Memory Footer - Fixed at bottom */
+.memory-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid hsl(var(--border));
+  margin-top: auto;
+}
+
+.memory-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.8125rem;
+  color: hsl(var(--muted-foreground));
+  flex-wrap: wrap;
+}
+
+.memory-meta span {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.memory-meta i {
+  width: 14px;
+  height: 14px;
+}
+
+.memory-features {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.feature-btn {
+  padding: 0.375rem 0.75rem;
+  background: hsl(var(--muted));
+  border: 1px solid hsl(var(--border));
+  border-radius: 4px;
+  font-size: 0.8125rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: hsl(var(--foreground));
+}
+
+.feature-btn:hover {
+  background: hsl(var(--hover));
+  border-color: hsl(var(--primary));
+}
+
+.feature-btn i {
+  width: 14px;
+  height: 14px;
+}
+
+/* Badges */
+.badge {
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.badge-archived {
+  background: var(--warning-bg, #fef3c7);
+  color: var(--warning-color, #92400e);
+}
+
+.badge-priority-high {
+  background: var(--danger-bg, #fee2e2);
+  color: var(--danger-color, #991b1b);
+}
+
+.badge-priority-low {
+  background: var(--info-bg, #dbeafe);
+  color: var(--info-color, #1e3a8a);
+}
+
+.badge-current {
+  background: var(--success-bg, #d1fae5);
+  color: var(--success-color, #065f46);
+}
+
+/* Modal Styles */
+.memory-modal {
+  max-width: 700px;
+  width: 100%;
+}
+
+.memory-detail-modal {
+  max-width: 900px;
+  width: 100%;
+}
+
+.form-group {
+  margin-bottom: 1.25rem;
+}
+
+.form-group label {
+  display: block;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: hsl(var(--foreground));
+}
+
+.form-group textarea,
+.form-group input[type="text"] {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid hsl(var(--border));
+  border-radius: 6px;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: inherit;
+  font-size: 0.9375rem;
+  resize: vertical;
+}
+
+.form-group textarea:focus,
+.form-group input[type="text"]:focus {
+  outline: none;
+  border-color: hsl(var(--primary));
+  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
+}
+
+/* Memory Detail Content */
+.memory-detail-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.detail-section h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  color: hsl(var(--foreground));
+}
+
+.detail-text {
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  color: hsl(var(--foreground));
+  white-space: pre-wrap;
+}
+
+.detail-code {
+  background: hsl(var(--muted));
+  border: 1px solid hsl(var(--border));
+  border-radius: 6px;
+  padding: 1rem;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* Knowledge Graph Styles */
+.knowledge-graph {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.graph-section h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  color: hsl(var(--foreground));
+}
+
+.entities-list,
+.relationships-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.entity-item {
+  padding: 0.75rem;
+  background: hsl(var(--muted));
+  border: 1px solid hsl(var(--border));
+  border-radius: 6px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.entity-name {
+  font-weight: 500;
+  color: hsl(var(--foreground));
+}
+
+.entity-type {
+  padding: 0.25rem 0.5rem;
+  background: hsl(var(--accent));
+  color: hsl(var(--primary));
+  border-radius: 4px;
+  font-size: 0.75rem;
+}
+
+.relationship-item {
+  padding: 0.75rem;
+  background: hsl(var(--muted));
+  border: 1px solid hsl(var(--border));
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.rel-source,
+.rel-target {
+  flex: 1;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+}
+
+.rel-type {
+  padding: 0.25rem 0.5rem;
+  background: hsl(var(--info) / 0.15);
+  color: hsl(var(--info));
+  border-radius: 4px;
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+
+/* Evolution Timeline */
+.evolution-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.evolution-version {
+  padding: 1rem;
+  background: hsl(var(--muted));
+  border: 1px solid hsl(var(--border));
+  border-left: 3px solid hsl(var(--primary));
+  border-radius: 6px;
+}
+
+.version-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.version-number {
+  font-weight: 600;
+  color: hsl(var(--primary));
+}
+
+.version-date {
+  font-size: 0.8125rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.version-reason {
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+  margin-top: 0.5rem;
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.empty-state i {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.empty-state p {
+  font-size: 0.9375rem;
+}
+
+.empty-text {
+  color: hsl(var(--muted-foreground));
+  font-style: italic;
+}
+
+/* Notification Animations */
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+}
+
+/* ============================================
+   Knowledge Graph D3 Visualization Styles
+   ============================================ */
+
+.knowledge-graph-container {
+  width: 100%;
+  min-height: 400px;
+  background: hsl(var(--muted) / 0.3);
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.knowledge-graph-svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.graph-content {
+  cursor: grab;
+}
+
+.graph-content:active {
+  cursor: grabbing;
+}
+
+.graph-edge {
+  stroke: hsl(var(--muted-foreground));
+  stroke-width: 1.5;
+  stroke-opacity: 0.6;
+  fill: none;
+}
+
+.graph-node {
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.graph-node:hover {
+  filter: brightness(1.2);
+  stroke-width: 3;
+}
+
+.graph-label {
+  font-size: 11px;
+  fill: hsl(var(--foreground));
+  pointer-events: none;
+  user-select: none;
+}
+
+.graph-node-group.file .graph-node { fill: #3b82f6; }
+.graph-node-group.function .graph-node { fill: #10b981; }
+.graph-node-group.module .graph-node { fill: #8b5cf6; }
+.graph-node-group.class .graph-node { fill: #f59e0b; }
+.graph-node-group.entity .graph-node { fill: #6b7280; }
+
+.graph-error,
+.graph-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  color: hsl(var(--muted-foreground));
+  text-align: center;
+  padding: 2rem;
+}
+
+.graph-error i,
+.graph-empty-state i {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.graph-error p,
+.graph-empty-state p {
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+/* ============================================
+   Evolution Version Card Styles
+   ============================================ */
+
+.version-card {
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-left: 3px solid hsl(var(--primary));
+  border-radius: 8px;
+  padding: 1rem;
+  transition: all 0.2s ease;
+}
+
+.version-card:hover {
+  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.08);
+}
+
+.version-card .version-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.version-card .version-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.version-card .version-number {
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: hsl(var(--primary));
+  padding: 0.25rem 0.5rem;
+  background: hsl(var(--primary) / 0.1);
+  border-radius: 4px;
+}
+
+.version-card .version-date {
+  font-size: 0.8125rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.version-content-preview {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--muted) / 0.5);
+  padding: 0.75rem;
+  border-radius: 6px;
+  margin-bottom: 0.75rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.version-diff-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.diff-stat {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.25rem 0.625rem;
+  border-radius: 4px;
+}
+
+.diff-stat i {
+  width: 12px;
+  height: 12px;
+}
+
+.diff-stat.diff-added {
+  background: hsl(142 76% 36% / 0.15);
+  color: hsl(142 76% 30%);
+}
+
+.diff-stat.diff-modified {
+  background: hsl(38 92% 50% / 0.15);
+  color: hsl(38 92% 40%);
+}
+
+.diff-stat.diff-deleted {
+  background: hsl(0 84% 60% / 0.15);
+  color: hsl(0 84% 45%);
+}
+
+.version-card .version-reason {
+  font-size: 0.8125rem;
+  color: hsl(var(--foreground));
+  padding-top: 0.75rem;
+  border-top: 1px solid hsl(var(--border));
+  margin-top: 0;
+}
+
+.version-card .version-reason strong {
+  color: hsl(var(--muted-foreground));
+  font-weight: 600;
+}
+
+.evolution-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  color: hsl(var(--muted-foreground));
+  text-align: center;
+  padding: 2rem;
+}
+
+.evolution-empty-state i {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.evolution-empty-state p {
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+/* Relations Detail Styles */
+.relations-detail h4 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: hsl(var(--foreground));
+}
+
+.clusters-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.relation-cluster-item {
+  padding: 1rem;
+  background: hsl(var(--muted) / 0.3);
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+}
+
+.relation-cluster-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.relation-cluster-header i {
+  width: 18px;
+  height: 18px;
+  color: hsl(var(--primary));
+}
+
+.relation-cluster-header .cluster-name {
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.cluster-relations-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid hsl(var(--border));
+}
+
+.relations-label {
+  font-size: 0.8125rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.relation-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  background: hsl(var(--accent));
+  border-radius: 4px;
+  font-size: 0.8125rem;
+}
+
+.relation-tag i {
+  width: 12px;
+  height: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.relation-tag .relation-type {
+  font-size: 0.6875rem;
+  padding: 0.125rem 0.375rem;
+  background: hsl(var(--primary) / 0.15);
+  color: hsl(var(--primary));
+  border-radius: 3px;
+  margin-left: 0.25rem;
+}
+
+.text-muted {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.875rem;
+}
+
+/* Dark Mode Adjustments */
+[data-theme="dark"] .memory-card {
+  background: #1e293b;
+  border-color: #334155;
+}
+
+[data-theme="dark"] .memory-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .detail-code {
+  background: #0f172a;
+  border-color: #334155;
+}
+
+[data-theme="dark"] .entity-item,
+[data-theme="dark"] .relationship-item,
+[data-theme="dark"] .evolution-version {
+  background: #1e293b;
+  border-color: #334155;
+}
+
+[data-theme="dark"] .knowledge-graph-container {
+  background: #0f172a;
+  border-color: #334155;
+}
+
+[data-theme="dark"] .graph-label {
+  fill: #e2e8f0;
+}
+
+[data-theme="dark"] .graph-edge {
+  stroke: #64748b;
+}
+
+[data-theme="dark"] .version-card {
+  background: #1e293b;
+  border-color: #334155;
+}
+
+[data-theme="dark"] .version-content-preview {
+  background: #0f172a;
+}
+
+/* ============================================
+   Session Clustering Styles
+   ============================================ */
+
+.clusters-container {
+  margin-top: 0;
+  height: calc(100vh - 200px);
+  min-height: 500px;
+}
+
+.clusters-layout {
+  display: grid;
+  grid-template-columns: 320px 1fr;
+  gap: 1.5rem;
+  height: 100%;
+}
+
+@media (max-width: 900px) {
+  .clusters-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Clusters Sidebar */
+.clusters-sidebar {
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.clusters-sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.3);
+}
+
+.clusters-sidebar-header h4 {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.cluster-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+/* Cluster Item */
+.cluster-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.875rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: 0.5rem;
+  border: 1px solid transparent;
+}
+
+.cluster-item:hover {
+  background: hsl(var(--muted) / 0.5);
+}
+
+.cluster-item.active {
+  background: hsl(var(--primary) / 0.1);
+  border-color: hsl(var(--primary) / 0.3);
+}
+
+.cluster-icon {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(var(--muted));
+  border-radius: 6px;
+  color: hsl(var(--muted-foreground));
+}
+
+.cluster-icon i {
+  width: 18px;
+  height: 18px;
+}
+
+.cluster-item.active .cluster-icon {
+  background: hsl(var(--primary) / 0.15);
+  color: hsl(var(--primary));
+}
+
+.cluster-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.cluster-name {
+  font-weight: 500;
+  font-size: 0.9375rem;
+  color: hsl(var(--foreground));
+  margin-bottom: 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cluster-meta {
+  display: flex;
+  gap: 0.75rem;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Cluster Status Badges */
+.badge-active {
+  background: hsl(142 76% 36% / 0.15);
+  color: hsl(142 76% 36%);
+}
+
+.badge-archived {
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+}
+
+.badge-pending {
+  background: hsl(38 92% 50% / 0.15);
+  color: hsl(38 92% 40%);
+}
+
+/* Clusters Detail Panel */
+.clusters-detail {
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.cluster-detail-content {
+  padding: 1.5rem;
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0; /* Enable flexbox scrolling */
+}
+
+.cluster-detail-content .empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 300px;
+}
+
+/* Cluster Detail View */
+.cluster-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.cluster-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cluster-header h3 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.cluster-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.cluster-description {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.cluster-intent {
+  padding: 0.75rem 1rem;
+  background: hsl(var(--muted) / 0.5);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+}
+
+.cluster-intent strong {
+  color: hsl(var(--primary));
+}
+
+/* Cluster Sections */
+.cluster-timeline,
+.cluster-relations {
+  padding-top: 1rem;
+  border-top: 1px solid hsl(var(--border));
+}
+
+.cluster-timeline h4,
+.cluster-relations h4 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 1rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.cluster-timeline h4 i,
+.cluster-relations h4 i {
+  width: 18px;
+  height: 18px;
+  color: hsl(var(--primary));
+}
+
+/* Session Timeline */
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 100%;
+}
+
+/* Override conflicting timeline-item styles from other CSS files */
+.cluster-timeline .timeline .timeline-item {
+  display: flex;
+  gap: 1rem;
+  position: relative;
+  /* Reset card-like appearance from other CSS */
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  margin-bottom: 0;
+  /* Remove height constraints */
+  min-height: auto;
+  max-height: none;
+  overflow: visible;
+  cursor: default;
+}
+
+.cluster-timeline .timeline .timeline-item::before {
+  content: '';
+  position: absolute;
+  left: 0.6875rem;
+  top: 2rem;
+  bottom: -1rem;
+  width: 2px;
+  background: hsl(var(--border));
+}
+
+.cluster-timeline .timeline .timeline-item:last-child::before {
+  display: none;
+}
+
+.timeline-marker {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+.timeline-number {
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(var(--primary));
+  color: white;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.timeline-content {
+  flex: 1;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  padding: 1rem;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.timeline-content:hover {
+  border-color: hsl(var(--primary) / 0.3);
+  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.05);
+}
+
+.timeline-content.expanded {
+  border-color: hsl(var(--primary) / 0.5);
+  background: hsl(var(--primary) / 0.02);
+}
+
+.timeline-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.session-id {
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--muted));
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+
+/* Session Type Badges */
+.badge-core_memory {
+  background: hsl(260 70% 50% / 0.15);
+  color: hsl(260 70% 50%);
+}
+
+.badge-workflow {
+  background: hsl(200 80% 50% / 0.15);
+  color: hsl(200 80% 45%);
+}
+
+.badge-cli_history {
+  background: hsl(30 80% 50% / 0.15);
+  color: hsl(30 80% 40%);
+}
+
+.session-title {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: hsl(var(--foreground));
+  line-height: 1.4;
+  margin-bottom: 0.5rem;
+}
+
+.session-summary {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+  line-height: 1.5;
+  margin-bottom: 0.5rem;
+}
+
+.session-tokens {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+  padding: 0.25rem 0.5rem;
+  background: hsl(var(--muted));
+  border-radius: 4px;
+  margin-bottom: 0.75rem;
+}
+
+.session-tokens i {
+  width: 12px;
+  height: 12px;
+}
+
+/* Expandable timeline card - DEPRECATED, use clickable instead */
+.timeline-content.expandable {
+  position: relative;
+}
+
+/* Clickable timeline card */
+.timeline-content.clickable {
+  position: relative;
+}
+
+.timeline-content.clickable:hover {
+  border-color: hsl(var(--primary) / 0.5);
+  background: hsl(var(--primary) / 0.02);
+}
+
+.timeline-content.clickable:active {
+  transform: scale(0.995);
+}
+
+/* Timeline card footer with preview hint */
+.timeline-card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid hsl(var(--border));
+}
+
+.preview-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+  transition: color 0.2s;
+}
+
+.preview-hint i {
+  width: 14px;
+  height: 14px;
+}
+
+.timeline-content:hover .preview-hint {
+  color: hsl(var(--primary));
+}
+
+/* CSS Arrow for expand hint - DEPRECATED */
+.expand-arrow {
+  display: flex;
+  justify-content: center;
+  padding: 0.75rem 0 0.25rem;
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+
+.timeline-content:hover .expand-arrow {
+  opacity: 1;
+}
+
+.expand-arrow::after {
+  content: '';
+  width: 10px;
+  height: 10px;
+  border-right: 2px solid hsl(var(--primary));
+  border-bottom: 2px solid hsl(var(--primary));
+  transform: rotate(45deg);
+  transition: transform 0.2s ease;
+}
+
+.timeline-content.expanded .expand-arrow::after {
+  transform: rotate(-135deg) translateY(3px);
+}
+
+/* Expanded detail section */
+.session-detail-expand {
+  display: none;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid hsl(var(--border));
+  animation: fadeIn 0.2s ease-out;
+}
+
+.timeline-content.expanded .session-detail-expand {
+  display: block;
+}
+
+.full-summary {
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  background: hsl(var(--muted) / 0.3);
+  border-radius: 6px;
+}
+
+.session-detail-expand .session-tokens {
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+  margin-bottom: 1rem;
+}
+
+.timeline-actions {
+  display: flex;
+  gap: 0.5rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid hsl(var(--border));
+}
+
+.btn-xs {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-xs i {
+  width: 14px;
+  height: 14px;
+}
+
+.btn-ghost {
+  background: transparent;
+  border: 1px solid hsl(var(--border));
+  color: hsl(var(--muted-foreground));
+}
+
+.btn-ghost:hover {
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+  border-color: hsl(var(--muted-foreground));
+}
+
+.btn-ghost.btn-danger:hover {
+  background: hsl(var(--destructive) / 0.1);
+  color: hsl(var(--destructive));
+  border-color: hsl(var(--destructive) / 0.3);
+}
+
+/* Relations List */
+.relations-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.relation-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.875rem;
+  background: hsl(var(--muted) / 0.3);
+  border: 1px solid hsl(var(--border));
+  border-radius: 6px;
+  font-size: 0.875rem;
+}
+
+.relation-item i {
+  width: 14px;
+  height: 14px;
+  color: hsl(var(--muted-foreground));
+}
+
+.relation-type {
+  padding: 0.125rem 0.5rem;
+  background: hsl(var(--primary) / 0.1);
+  color: hsl(var(--primary));
+  border-radius: 3px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.relation-item a {
+  color: hsl(var(--primary));
+  text-decoration: none;
+}
+
+.relation-item a:hover {
+  text-decoration: underline;
+}
+
+/* Dark Mode for Clusters */
+[data-theme="dark"] .clusters-sidebar,
+[data-theme="dark"] .clusters-detail {
+  background: #1e293b;
+  border-color: #334155;
+}
+
+[data-theme="dark"] .tab-nav {
+  background: rgba(51, 65, 85, 0.5);
+}
+
+[data-theme="dark"] .tab-btn.active {
+  background: #1e293b;
+}
+
+[data-theme="dark"] .clusters-sidebar-header {
+  background: rgba(15, 23, 42, 0.5);
+  border-color: #334155;
+}
+
+[data-theme="dark"] .cluster-item:hover {
+  background: rgba(51, 65, 85, 0.5);
+}
+
+[data-theme="dark"] .cluster-item.active {
+  background: rgba(59, 130, 246, 0.15);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+[data-theme="dark"] .timeline-content,
+[data-theme="dark"] .cluster-intent,
+[data-theme="dark"] .relation-item {
+  background: rgba(15, 23, 42, 0.5);
+  border-color: #334155;
+}
+
+/* Embedding Hint Styles */
+.embedding-hint {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.embedding-hint i {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.embedding-hint.warning {
+  background: rgba(245, 158, 11, 0.1);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+  color: #d97706;
+}
+
+.embedding-hint.info {
+  background: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.3);
+  color: #3b82f6;
+}
+
+.embedding-hint .hint-link {
+  margin-left: auto;
+  color: inherit;
+  text-decoration: underline;
+  white-space: nowrap;
+}
+
+.embedding-hint .btn-xs {
+  margin-left: auto;
+  padding: 4px 8px;
+  font-size: 11px;
+}
+
+[data-theme="dark"] .embedding-hint.warning {
+  background: rgba(245, 158, 11, 0.15);
+  color: #fbbf24;
+}
+
+[data-theme="dark"] .embedding-hint.info {
+  background: rgba(59, 130, 246, 0.15);
+  color: #60a5fa;
+}