claude-mem 13.9.2 → 13.9.3

package/plugin/ui/viewer.html

@@ -309,39 +309,6 @@
       overflow: hidden;
     }
 
-    .full-height-flex-layout {
-      display: flex;
-      height: 100%;
-      position: relative;
-    }
-
-    .main-col {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .sidebar {
-      position: fixed;
-      right: 0;
-      top: 0;
-      height: 100vh;
-      width: 100%;
-      max-width: 400px;
-      background: var(--color-bg-primary);
-      border-left: 1px solid var(--color-border-primary);
-      display: flex;
-      flex-direction: column;
-      transform: translate3d(100%, 0, 0);
-      transition: transform 0.3s ease;
-      z-index: 100;
-      will-change: transform;
-    }
-
-    .sidebar.open {
-      transform: translate3d(0, 0, 0);
-    }
-
     .header {
       padding: 16px 24px;
       border-bottom: 1px solid var(--color-border-primary);
@@ -363,131 +330,6 @@
       flex-wrap: wrap;
     }
 
-    .sidebar-header {
-      padding: 14px 18px;
-      border-bottom: 1px solid var(--color-border-primary);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background: var(--color-bg-header);
-    }
-
-    .sidebar-header h1 {
-      font-size: 16px;
-      font-weight: 500;
-      color: var(--color-text-header);
-    }
-
-    .sidebar-community-btn {
-      display: none;
-      background: var(--color-bg-card);
-      border: 1px solid var(--color-border-primary);
-      border-radius: 6px;
-      padding: 0 14px;
-      height: 36px;
-      cursor: pointer;
-      align-items: center;
-      justify-content: center;
-      color: var(--color-text-secondary);
-      font-size: 13px;
-      font-weight: 500;
-      text-decoration: none;
-      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-      white-space: nowrap;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-      margin: 16px 18px;
-    }
-
-    .sidebar-community-btn:hover {
-      background: var(--color-bg-card-hover);
-      border-color: var(--color-border-focus);
-      color: var(--color-text-primary);
-      transform: translateY(-1px);
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-    }
-
-    .sidebar-community-btn:active {
-      transform: translateY(0);
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-    }
-
-    @media (max-width: 600px) {
-      .sidebar-community-btn {
-        display: flex;
-      }
-    }
-
-    .sidebar-project-filter {
-      display: none;
-      padding: 16px 18px;
-      border-bottom: 1px solid var(--color-border-primary);
-    }
-
-    .sidebar-project-filter label {
-      display: block;
-      margin-bottom: 8px;
-      font-size: 12px;
-      color: var(--color-text-muted);
-      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-      font-weight: 500;
-    }
-
-    .sidebar-project-filter select {
-      width: 100%;
-      background: var(--color-bg-card);
-      border: 1px solid var(--color-border-primary);
-      border-radius: 6px;
-      padding: 0 32px 0 12px;
-      height: 36px;
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--color-text-secondary);
-      cursor: pointer;
-      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-      appearance: none;
-      background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-      background-repeat: no-repeat;
-      background-position: right 10px center;
-    }
-
-    .sidebar-project-filter select:hover {
-      background-color: var(--color-bg-card-hover);
-      border-color: var(--color-border-focus);
-      color: var(--color-text-primary);
-    }
-
-    .sidebar-project-filter select:focus {
-      outline: none;
-      border-color: var(--color-border-focus);
-      box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
-    }
-
-    @media (max-width: 480px) {
-      .sidebar-project-filter {
-        display: block;
-      }
-    }
-
-    .sidebar-social-links {
-      display: none;
-      padding: 16px 18px;
-      border-bottom: 1px solid var(--color-border-primary);
-      gap: 8px;
-      justify-content: center;
-    }
-
-    .sidebar-social-links .icon-link {
-      flex: 1;
-      max-width: 80px;
-    }
-
-    @media (max-width: 768px) {
-      .sidebar-social-links {
-        display: flex;
-      }
-    }
-
     .header h1 {
       font-size: 17px;
       font-weight: 500;
@@ -586,38 +428,6 @@
       box-shadow: 0 2px 8px rgba(9, 105, 218, 0.25);
     }
 
-    .community-btn {
-      background: var(--color-bg-card);
-      border: 1px solid var(--color-border-primary);
-      border-radius: 6px;
-      padding: 0 14px;
-      height: 36px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--color-text-secondary);
-      font-size: 13px;
-      font-weight: 500;
-      text-decoration: none;
-      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-      white-space: nowrap;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-    }
-
-    .community-btn:hover {
-      background: var(--color-bg-card-hover);
-      border-color: var(--color-border-focus);
-      color: var(--color-text-primary);
-      transform: translateY(-1px);
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-    }
-
-    .community-btn:active {
-      transform: translateY(0);
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-    }
-
     /* GitHub Stars Button - Similar to Community Button */
     .github-stars-btn {
       background: var(--color-bg-card);
@@ -702,19 +512,6 @@
       height: 18px;
     }
 
-    .status-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--color-accent-error);
-      animation: pulse 2s ease-in-out infinite;
-    }
-
-    .status-dot.connected {
-      background: var(--color-accent-success);
-      animation: none;
-    }
-
     @keyframes pulse {
 
       0%,
@@ -863,22 +660,6 @@
       gap: 10px;
     }
 
-    .card-subheading-left {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-
-    .card-subheading {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 14px;
-      font-size: 12px;
-      color: var(--color-text-muted);
-      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-    }
-
     .card-type {
       padding: 2px 8px;
       background: var(--color-type-badge-bg);
@@ -1022,32 +803,6 @@
       line-height: 1.7;
     }
 
-    .card-section {
-      font-size: 14px;
-      color: var(--color-text-subtitle);
-      line-height: 1.6;
-      margin-bottom: 10px;
-    }
-
-    .card-section:last-child {
-      margin-bottom: 0;
-    }
-
-    .card-section pre {
-      white-space: pre-wrap;
-      font-size: 13px;
-      /* word-wrap: break-word; */
-    }
-
-    /* 
-    .card-section h4 {
-      font-size: 12px;
-      margin-bottom: 8px;
-      margin-top: 16px;
-      color: var(--color-text-title);
-      font-weight: 500;
-    } */
-
     .card-meta {
       font-size: 11px;
       color: var(--color-text-tertiary);
@@ -1063,11 +818,6 @@
       color: var(--color-text-tertiary);
     }
 
-    .meta-concepts {
-      font-style: italic;
-      color: var(--color-text-muted);
-    }
-
     .meta-files {
       color: var(--color-text-muted);
       font-size: 10px;
@@ -1287,71 +1037,6 @@
       }
     }
 
-    .settings-section {
-      padding: 18px;
-      border-bottom: 1px solid var(--color-border-primary);
-    }
-
-    .settings-section h3 {
-      font-size: 14px;
-      font-weight: 600;
-      margin-bottom: 14px;
-      color: var(--color-text-header);
-      letter-spacing: 0.3px;
-    }
-
-    .form-group {
-      margin-bottom: 14px;
-    }
-
-    .form-group label {
-      display: block;
-      margin-bottom: 6px;
-      font-size: 12px;
-      color: var(--color-text-muted);
-      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-    }
-
-    .setting-description {
-      font-size: 12px;
-      color: var(--color-text-muted);
-      margin-bottom: 8px;
-      line-height: 1.5;
-    }
-
-    .stats-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 12px;
-    }
-
-    .stat {
-      padding: 10px 12px;
-      background: var(--color-bg-stat);
-      border: 1px solid var(--color-border-primary);
-      border-radius: 4px;
-    }
-
-    .stat-label {
-      color: var(--color-text-muted);
-      margin-bottom: 4px;
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-
-    .stat-value {
-      font-size: 18px;
-      color: var(--color-text-header);
-      font-weight: 600;
-      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-    }
-
-    .stats-scroll {
-      flex: 1;
-      overflow-y: auto;
-    }
-
     ::-webkit-scrollbar {
       width: 10px;
     }
@@ -1389,21 +1074,6 @@
       color: var(--color-prompt-badge-text);
     }
 
-    .observation-card {
-      border-color: var(--color-border-observation);
-      background: var(--color-bg-observation);
-      color: var(--color-text-observation);
-    }
-
-    .observation-card:hover {
-      border-color: var(--color-border-observation-hover);
-    }
-
-    .observation-card .card-type {
-      background: var(--color-observation-badge-bg);
-      color: var(--color-observation-badge-text);
-    }
-
     /* Welcome modal — first-launch + reusable as help via the ? button.
        Layout strategy: desktop-first, fluid type via clamp(), and squares
        built with the padding-bottom:100% trick (percentage padding resolves
@@ -1615,16 +1285,6 @@
       word-wrap: break-word;
     }
 
-    .processing-indicator {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      color: var(--color-accent-focus);
-      font-size: 11px;
-      font-weight: 500;
-      margin-left: auto;
-    }
-
     .spinner {
       width: 12px;
       height: 12px;
@@ -1640,38 +1300,6 @@
       }
     }
 
-    .summary-skeleton {
-      opacity: 0.7;
-    }
-
-    .summary-skeleton .processing-indicator {
-      margin-left: auto;
-    }
-
-    .skeleton-line {
-      height: 16px;
-      background: linear-gradient(90deg, var(--color-skeleton-base) 25%, var(--color-skeleton-highlight) 50%, var(--color-skeleton-base) 75%);
-      background-size: 200% 100%;
-      animation: shimmer 1.5s infinite;
-      border-radius: 4px;
-      margin-bottom: 8px;
-    }
-
-    .skeleton-title {
-      height: 20px;
-      width: 80%;
-      margin-bottom: 10px;
-    }
-
-    .skeleton-subtitle {
-      height: 16px;
-      width: 90%;
-    }
-
-    .skeleton-subtitle.short {
-      width: 60%;
-    }
-
     @keyframes shimmer {
       0% {
         background-position: 200% 0;
@@ -1723,14 +1351,7 @@
       to {
         opacity: 1;
         transform: translateY(0);
-      }
-    }
-
-    /* Utility: Container */
-    .container {
-      width: 100%;
-      max-width: 600px;
-      margin: 0 auto;
+      }
     }
 
     /* Tablet Responsive Styles - 481px to 768px */
@@ -1757,10 +1378,6 @@
         display: none;
       }
 
-      /* Sidebar full width on tablet */
-      .sidebar {
-      }
-
       /* Feed adjustments */
       .feed {
         padding: 20px 16px;
@@ -1777,10 +1394,6 @@
 
     /* Mobile & Small Tablet - 600px and below */
     @media (max-width: 600px) {
-      /* Hide community button in header, will show in sidebar */
-      .community-btn {
-        display: none;
-      }
 
       /* Hide GitHub stars button on mobile */
       .github-stars-btn {
@@ -1852,18 +1465,6 @@
         flex-shrink: 0;
       }
 
-      .community-btn {
-        height: 32px;
-        padding: 0 12px;
-        font-size: 12px;
-        flex-shrink: 0;
-      }
-
-      .community-btn svg {
-        width: 12px;
-        height: 12px;
-      }
-
       .settings-icon,
       .theme-toggle-btn svg,
       .icon-link svg {
@@ -1871,18 +1472,6 @@
         height: 16px;
       }
 
-      /* Sidebar adjustments for mobile */
-      .sidebar {
-      }
-
-      .sidebar-header {
-        padding: 12px 16px;
-      }
-
-      .settings-section {
-        padding: 16px;
-      }
-
       /* Feed adjustments */
       .feed {
         padding: 16px 12px;
@@ -1907,17 +1496,6 @@
         flex-wrap: wrap;
       }
 
-      /* Stats grid to single column */
-      .stats-grid {
-        grid-template-columns: 1fr;
-      }
-
-      /* Form inputs full width */
-      .form-group input,
-      .form-group select {
-        width: 100%;
-      }
-
       /* Scroll to top button position */
       .scroll-to-top {
         bottom: 16px;
@@ -2050,33 +1628,6 @@
       transform: scale(0.95);
     }
 
-    .modal-icon-link {
-      background: transparent;
-      border: 1px solid var(--color-border-primary);
-      width: 32px;
-      height: 32px;
-      border-radius: 6px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--color-text-secondary);
-      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-      padding: 0;
-      text-decoration: none;
-    }
-
-    .modal-icon-link:hover {
-      background: var(--color-bg-card-hover);
-      border-color: var(--color-border-focus);
-      color: var(--color-text-primary);
-      transform: scale(1.05);
-    }
-
-    .modal-icon-link:active {
-      transform: scale(0.95);
-    }
-
     .modal-body {
       flex: 1;
       display: grid;
@@ -2139,48 +1690,6 @@
       flex-direction: column;
     }
 
-    .preview-column-header {
-      padding: 16px 20px;
-      background: #141414;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-      flex-shrink: 0;
-    }
-
-    .preview-column-header label {
-      display: block;
-      font-size: 11px;
-      font-weight: 600;
-      color: #888;
-      margin-bottom: 8px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-
-    .preview-column-header select {
-      width: 100%;
-      background: #0a0a0a;
-      border: 1px solid rgba(255, 255, 255, 0.12);
-      border-radius: 6px;
-      padding: 8px 12px;
-      height: 36px;
-      font-size: 13px;
-      font-weight: 500;
-      color: #ddd;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-
-    .preview-column-header select:hover {
-      border-color: rgba(255, 255, 255, 0.2);
-      background: #111;
-    }
-
-    .preview-column-header select:focus {
-      outline: none;
-      border-color: var(--color-accent-primary);
-      box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
-    }
-
     .preview-content {
       flex: 1;
       overflow-y: auto;
@@ -2240,158 +1749,6 @@
       background: rgba(255, 255, 255, 0.25);
     }
 
-    /* Settings Groups - Compact */
-    .settings-group {
-      padding: 14px 16px;
-      border-bottom: 1px solid var(--color-border-primary);
-    }
-
-    .settings-group:last-child {
-      border-bottom: none;
-    }
-
-    .settings-group h4 {
-      margin: 0 0 10px 0;
-      font-size: 10px;
-      font-weight: 600;
-      color: var(--color-text-muted);
-      text-transform: uppercase;
-      letter-spacing: 0.8px;
-    }
-
-    /* Filter Chips - Compact */
-    .chips-container {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-    }
-
-    .chip {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 5px 10px;
-      min-height: 28px;
-      border: 1px solid var(--color-border-primary);
-      border-radius: 4px;
-      font-size: 11px;
-      font-weight: 500;
-      color: var(--color-text-secondary);
-      background: var(--color-bg-card);
-      cursor: pointer;
-      transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-      user-select: none;
-    }
-
-    .chip:hover {
-      background: var(--color-bg-card-hover);
-      border-color: var(--color-border-hover);
-      color: var(--color-text-primary);
-      transform: translateY(-1px);
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-    }
-
-    .chip:active {
-      transform: translateY(0);
-    }
-
-    .chip.selected {
-      background: linear-gradient(135deg, var(--color-bg-button) 0%, var(--color-accent-primary) 100%);
-      color: white;
-      border-color: var(--color-bg-button);
-      box-shadow: 0 2px 8px rgba(9, 105, 218, 0.25);
-    }
-
-    .chip.selected:hover {
-      transform: translateY(-1px);
-      box-shadow: 0 4px 12px rgba(9, 105, 218, 0.35);
-    }
-
-    /* Form Controls in Modal - Compact */
-    .settings-group input[type="number"],
-    .settings-group select {
-      width: 100%;
-      background: var(--color-bg-input);
-      border: 1px solid var(--color-border-primary);
-      border-radius: 4px;
-      padding: 6px 10px;
-      height: 32px;
-      font-size: 12px;
-      color: var(--color-text-primary);
-      transition: all 0.2s;
-      margin-top: 4px;
-    }
-
-    .settings-group input[type="number"]:hover,
-    .settings-group select:hover {
-      border-color: var(--color-border-hover);
-    }
-
-    .settings-group input[type="number"]:focus,
-    .settings-group select:focus {
-      outline: none;
-      border-color: var(--color-border-focus);
-      box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
-    }
-
-    .settings-group label {
-      display: block;
-      font-size: 11px;
-      font-weight: 500;
-      color: var(--color-text-primary);
-      margin-bottom: 4px;
-    }
-
-    /* Checkboxes - Compact */
-    .settings-group input[type="checkbox"] {
-      width: 14px;
-      height: 14px;
-      cursor: pointer;
-      margin-right: 6px;
-      accent-color: var(--color-accent-primary);
-    }
-
-    .checkbox-group {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      margin-top: 4px;
-    }
-
-    .checkbox-item {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      padding: 4px 0;
-    }
-
-    .checkbox-item label {
-      margin: 0;
-      cursor: pointer;
-      font-size: 11px;
-      font-weight: 500;
-      color: var(--color-text-secondary);
-    }
-
-    .checkbox-item:hover label {
-      color: var(--color-text-primary);
-    }
-
-    /* Number Input Group - Compact */
-    .number-input-group {
-      margin-top: 6px;
-    }
-
-    .select-group {
-      margin-top: 6px;
-    }
-
-    .number-input-group + .number-input-group,
-    .select-group + .number-input-group,
-    .number-input-group + .select-group {
-      margin-top: 10px;
-    }
-
     /* Animations */
     @keyframes fadeIn {
       from {
@@ -2474,61 +1831,6 @@
       padding: 0 16px 16px 16px;
     }
 
-    /* ============================================
-       NEW: Chip Groups with All/None
-       ============================================ */
-    .chip-group {
-      margin-bottom: 14px;
-    }
-
-    .chip-group:last-child {
-      margin-bottom: 0;
-    }
-
-    .chip-group-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 8px;
-    }
-
-    .chip-group-label {
-      font-size: 11px;
-      font-weight: 600;
-      color: var(--color-text-secondary);
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-
-    .chip-group-actions {
-      display: flex;
-      gap: 4px;
-    }
-
-    .chip-action {
-      padding: 2px 8px;
-      font-size: 10px;
-      font-weight: 500;
-      color: var(--color-text-muted);
-      background: transparent;
-      border: 1px solid var(--color-border-primary);
-      border-radius: 3px;
-      cursor: pointer;
-      transition: all 0.15s ease;
-    }
-
-    .chip-action:hover {
-      color: var(--color-text-primary);
-      border-color: var(--color-border-hover);
-      background: var(--color-bg-card-hover);
-    }
-
-    .chip-action.active {
-      color: var(--color-accent-primary);
-      border-color: var(--color-accent-primary);
-      background: var(--color-type-badge-bg);
-    }
-
     /* ============================================
        NEW: Form Fields with Tooltips
        ============================================ */
@@ -2700,47 +2002,6 @@
       margin-bottom: 10px;
     }
 
-    /* ============================================
-       Improved Chip Styles
-       ============================================ */
-    .chip {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 6px 12px;
-      min-height: 30px;
-      border: 1px solid var(--color-border-primary);
-      border-radius: 6px;
-      font-size: 12px;
-      font-weight: 500;
-      color: var(--color-text-secondary);
-      background: var(--color-bg-card);
-      cursor: pointer;
-      transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-      user-select: none;
-    }
-
-    .chip:hover {
-      background: var(--color-bg-card-hover);
-      border-color: var(--color-accent-primary);
-      color: var(--color-text-primary);
-    }
-
-    .chip:active {
-      transform: scale(0.98);
-    }
-
-    .chip.selected {
-      background: var(--color-accent-primary);
-      color: white;
-      border-color: var(--color-accent-primary);
-    }
-
-    .chip.selected:hover {
-      background: var(--color-bg-button-hover);
-      border-color: var(--color-bg-button-hover);
-    }
-
     /* Console Drawer - Chrome DevTools Style */
     .console-toggle-btn {
       position: fixed;
@@ -3104,10 +2365,6 @@
         font-size: 11px;
       }
 
-      .settings-group {
-        padding: 14px 16px;
-      }
-
       .section-header-btn {
         padding: 12px 14px;
       }