codexmate 0.0.31 → 0.0.33

package/web-ui/styles/sessions-list.css

@@ -19,20 +19,250 @@
     opacity: 0.18;
 }
 
+
+/* ============================================
+   回收站 — 极简·本质
+   ============================================ */
+
+/* ---- 空态 ---- */
+.trash-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 64px 24px;
+    text-align: center;
+}
+
+.trash-empty-svg {
+    width: 56px;
+    height: 56px;
+    color: var(--color-text-muted);
+    opacity: 0.6;
+}
+
+.trash-spinner {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 2.5px solid var(--color-border-soft);
+    border-top-color: var(--color-brand);
+    animation: trash-spin 0.7s linear infinite;
+}
+
+@keyframes trash-spin {
+    to { transform: rotate(360deg); }
+}
+
+.trash-empty-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+}
+
+.trash-empty-hint {
+    font-size: 12px;
+    color: var(--color-text-muted);
+    max-width: 280px;
+    line-height: 1.5;
+}
+
+/* ---- 工具栏 ---- */
+.trash-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-bottom: 14px;
+}
+
+.trash-toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: var(--color-text-secondary);
+}
+
+.trash-toolbar-count {
+    font-weight: 600;
+    color: var(--color-text-primary);
+}
+
+.trash-toolbar-retention {
+    color: var(--color-text-muted);
+    font-size: 12px;
+}
+
+.trash-toolbar-right {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+/* ---- 列表 ---- */
 .trash-list {
-    display: grid;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.trash-item {
+    display: flex;
+    flex-direction: column;
+    padding: 12px 16px;
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border-soft);
+    transition: all 120ms var(--ease-spring);
+}
+
+.trash-item:hover {
+    border-color: var(--color-border-strong);
+    background: var(--color-surface-alt);
+}
+
+.trash-item-body {
+    display: flex;
+    align-items: center;
     gap: 12px;
-    margin-top: 12px;
 }
 
-.trash-item.session-item {
-    min-height: auto;
-    height: auto;
-    cursor: default;
-    content-visibility: visible;
-    contain-intrinsic-size: auto;
+.trash-item-main {
+    flex: 1;
+    min-width: 0;
+}
+
+.trash-item-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 1.3;
+}
+
+.trash-item-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 4px;
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+    flex-wrap: wrap;
+}
+
+.trash-item-time {
+    white-space: nowrap;
+}
+
+.trash-item-cwd {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+    color: var(--color-text-muted);
+    font-family: var(--font-family-mono);
+    font-size: 11px;
+}
+
+/* ---- 操作按钮（悬浮显示） ---- */
+.trash-item-actions {
+    display: flex;
+    gap: 6px;
+    flex-shrink: 0;
+    opacity: 0;
+    transition: opacity 120ms var(--ease-spring);
+}
+
+.trash-item:hover .trash-item-actions {
+    opacity: 1;
+}
+
+.trash-action-btn {
+    width: 34px;
+    height: 34px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--color-border-soft);
+    background: var(--color-surface);
+    color: var(--color-text-tertiary);
+    cursor: pointer;
+    transition: all 120ms var(--ease-spring);
+    padding: 0;
+}
+
+.trash-action-btn svg {
+    width: 16px;
+    height: 16px;
 }
 
+.trash-action-btn:hover:not(:disabled) {
+    border-color: var(--color-border-strong);
+    color: var(--color-text-primary);
+}
+
+.trash-action-btn.restore:hover:not(:disabled) {
+    border-color: var(--color-success);
+    color: var(--color-success);
+    background: rgba(75, 139, 106, 0.06);
+}
+
+.trash-action-btn.delete:hover:not(:disabled) {
+    border-color: var(--color-error);
+    color: var(--color-error);
+    background: rgba(196, 69, 54, 0.06);
+}
+
+.trash-action-btn:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+}
+
+.trash-action-btn:active:not(:disabled) {
+    transform: scale(0.95);
+}
+
+/* ---- 加载更多 ---- */
+.trash-list-footer {
+    display: flex;
+    justify-content: center;
+    padding: 12px 0 4px;
+}
+
+/* ---- 响应式 ---- */
+@media (max-width: 640px) {
+    .trash-item-body {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 10px;
+    }
+
+    .trash-item-actions {
+        opacity: 1;
+        justify-content: flex-end;
+    }
+
+    .trash-toolbar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .trash-toolbar-right {
+        justify-content: flex-end;
+    }
+
+    .trash-empty-state {
+        padding: 40px 16px;
+    }
+}
+
+
 .trash-item.session-item:hover,
 .trash-item.session-item:active {
     transform: none;
@@ -415,3 +645,39 @@
     position: relative;
     transition: box-shadow var(--transition-normal) var(--ease-spring-soft);
 }
+
+.session-context-badge {
+    font-size: 10px;
+    padding: 1px 6px;
+    border-radius: 999px;
+    font-weight: 600;
+    line-height: 1.4;
+    white-space: nowrap;
+}
+
+.session-context-normal {
+    background: rgba(75, 139, 106, 0.12);
+    color: #4b8b6a;
+}
+
+.session-context-warning {
+    background: rgba(217, 119, 6, 0.15);
+    color: #b45309;
+    animation: context-warning-pulse 2s ease-in-out infinite;
+}
+
+.session-context-critical {
+    background: rgba(196, 69, 54, 0.18);
+    color: #c2410c;
+    animation: context-critical-pulse 1s ease-in-out infinite;
+}
+
+@keyframes context-warning-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+
+@keyframes context-critical-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}

package/web-ui/styles/sessions-toolbar-trash.css

@@ -120,7 +120,137 @@
     border-color: var(--color-brand);
 }
 
-.session-source-select,
+/* ===== Session source pill bar ===== */
+.session-source-pills {
+    display: flex;
+    gap: 4px;
+    padding: 3px;
+    border-radius: var(--radius-md);
+    background: var(--color-surface-alt);
+    border: 1px solid var(--color-border-soft);
+}
+
+.session-source-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border-radius: var(--radius-sm);
+    border: none;
+    background: transparent;
+    color: var(--color-text-tertiary);
+    font-size: var(--font-size-secondary);
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-secondary);
+    cursor: pointer;
+    transition: all var(--transition-fast) var(--ease-spring);
+    outline: none;
+    white-space: nowrap;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.session-source-pill:hover:not(:disabled) {
+    color: var(--color-text-secondary);
+    background: var(--color-surface);
+}
+
+.session-source-pill:active:not(:disabled) {
+    transform: scale(0.97);
+}
+
+.session-source-pill.active {
+    color: #fff;
+    background: var(--color-brand);
+    box-shadow: 0 1px 3px rgba(200, 121, 99, 0.35);
+    font-weight: var(--font-weight-primary);
+}
+
+.session-source-pill.active .session-source-pill-dot {
+    background: rgba(255,255,255,0.9);
+    box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
+}
+
+.session-source-pill:focus-visible {
+    box-shadow: 0 0 0 2px var(--color-brand-light);
+}
+
+.session-source-pill:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.session-source-pill-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--color-text-muted);
+    flex-shrink: 0;
+    transition: all var(--transition-fast) var(--ease-spring);
+}
+
+.session-source-pill[data-source="codex"] .session-source-pill-dot {
+    background: #D26B5A;
+}
+.session-source-pill[data-source="claude"] .session-source-pill-dot {
+    background: #D97757;
+}
+.session-source-pill[data-source="gemini"] .session-source-pill-dot {
+    background: #5B8C5A;
+}
+.session-source-pill[data-source="codebuddy"] .session-source-pill-dot {
+    background: #6B8EB5;
+}
+
+.session-source-pill-label {
+    font-size: var(--font-size-secondary);
+    line-height: 1;
+}
+
+/* ===== Session card source badge ===== */
+.session-source {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: var(--font-size-caption);
+    font-weight: var(--font-weight-caption);
+    border-radius: 999px;
+    padding: 2px 8px;
+    white-space: nowrap;
+    background: var(--color-surface-alt);
+    color: var(--color-text-tertiary);
+    border: 1px solid var(--color-border-soft);
+    transition: all var(--transition-fast) var(--ease-spring);
+}
+
+.session-source[data-source="codex"],
+.session-source.codex {
+    background: rgba(210, 107, 90, 0.08);
+    color: #B54A3A;
+    border-color: rgba(210, 107, 90, 0.2);
+}
+
+.session-source[data-source="claude"],
+.session-source.claude {
+    background: rgba(217, 119, 87, 0.08);
+    color: #B55A3A;
+    border-color: rgba(217, 119, 87, 0.2);
+}
+
+.session-source[data-source="gemini"],
+.session-source.gemini {
+    background: rgba(91, 140, 90, 0.08);
+    color: #3A6B38;
+    border-color: rgba(91, 140, 90, 0.2);
+}
+
+.session-source[data-source="codebuddy"],
+.session-source.codebuddy {
+    background: rgba(107, 142, 181, 0.08);
+    color: #3A5A7A;
+    border-color: rgba(107, 142, 181, 0.2);
+}
+
 .session-path-select,
 .session-query-input,
 .session-role-select,
@@ -144,18 +274,17 @@
 }
 
 @media (min-width: 980px) {
-    /* Wider screens: align left/right control groups, keep query spanning full width. */
     .session-toolbar {
         grid-template-columns: repeat(12, minmax(0, 1fr));
         gap: 10px;
     }
 
     .session-toolbar-primary {
-        grid-column: span 6;
+        grid-column: span 7;
     }
 
     .session-toolbar-secondary {
-        grid-column: span 6;
+        grid-column: span 5;
         justify-content: flex-end;
     }
 
@@ -164,7 +293,6 @@
     }
 }
 
-.session-source-select:hover,
 .session-path-select:hover,
 .session-query-input:hover,
 .session-role-select:hover,
@@ -172,7 +300,6 @@
     border-color: var(--color-border-strong);
 }
 
-.session-source-select:focus,
 .session-path-select:focus,
 .session-query-input:focus,
 .session-role-select:focus,
@@ -218,15 +345,7 @@
     flex-shrink: 0;
 }
 
-.session-source {
-    font-size: var(--font-size-caption);
-    color: var(--color-text-tertiary);
-    border: 1px solid var(--color-border-soft);
-    border-radius: 999px;
-    padding: 2px 8px;
-    background: var(--color-surface-alt);
-    white-space: nowrap;
-}
+/* .session-source now defined above with per-source colors */
 
 .session-derived-badge {
     display: inline-flex;
@@ -346,3 +465,54 @@
     cursor: not-allowed;
     transform: none;
 }
+
+.btn-icon-sm {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+}
+
+/* ===== Session match badges ===== */
+.session-match-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: 999px;
+    background: var(--color-brand-light);
+    color: var(--color-brand-dark);
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.session-match-snippets {
+    margin-top: 4px;
+    grid-column: 1 / -1;
+}
+
+.session-match-snippet {
+    font-size: var(--font-size-caption);
+    color: var(--color-text-tertiary);
+    line-height: 1.35;
+    padding: 3px 8px;
+    margin-bottom: 2px;
+    background: var(--color-surface-alt);
+    border-radius: var(--radius-sm);
+    border-left: 2px solid var(--color-brand-light);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ===== Session preview match highlight ===== */
+.session-msg-content mark {
+    background: rgba(200, 121, 99, 0.18);
+    color: var(--color-brand-dark);
+    border-radius: 2px;
+    padding: 0 1px;
+}