codexmate 0.0.28 → 0.0.30

package/web-ui/styles/plugins-panel.css

@@ -1,14 +1,14 @@
 .plugins-layout {
     display: grid;
-    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
+    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
     gap: var(--spacing-sm);
     align-items: start;
 }
 
 .plugins-sidebar {
-    border: 1px solid rgba(160, 145, 130, 0.22);
-    border-radius: var(--radius-md);
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.7) 100%);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    background: linear-gradient(to bottom, rgba(255,255,255,0.92) 0%, rgba(255,248,241,0.72) 100%);
     box-shadow: var(--shadow-subtle);
     padding: var(--spacing-sm);
     min-width: 0;
@@ -24,12 +24,12 @@
     margin-top: 4px;
     font-size: var(--font-size-caption);
     color: var(--color-text-tertiary);
-    line-height: 1.45;
+    line-height: 1.5;
 }
 
 .plugins-list {
     display: grid;
-    gap: 10px;
+    gap: 8px;
 }
 
 .plugins-item {
@@ -37,24 +37,36 @@
     text-align: left;
     display: flex;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
     gap: var(--spacing-xs);
-    padding: 12px 12px;
+    padding: 10px 12px;
     border-radius: var(--radius-sm);
-    border: 1px solid rgba(160, 145, 130, 0.18);
-    background: rgba(255, 255, 255, 0.6);
+    border: 1px solid transparent;
+    background: transparent;
     cursor: pointer;
-    transition: border-color var(--transition-fast) var(--ease-spring), background var(--transition-fast) var(--ease-spring), transform var(--transition-fast) var(--ease-spring);
+    position: relative;
+    transition: all var(--transition-fast) var(--ease-spring);
 }
 
 .plugins-item:hover {
-    transform: translateY(-1px);
-    border-color: rgba(208, 88, 58, 0.28);
+    background: rgba(255,255,255,0.7);
+    transform: translateX(2px);
 }
 
 .plugins-item.active {
-    border-color: rgba(208, 88, 58, 0.45);
-    background: linear-gradient(to bottom, rgba(255, 243, 236, 0.96) 0%, rgba(255, 232, 220, 0.78) 100%);
+    border-color: rgba(208,88,58,0.2);
+    background: linear-gradient(to right, rgba(255,243,236,0.96) 0%, rgba(255,255,255,0.86) 100%);
+    box-shadow: 0 2px 8px rgba(200,121,99,0.1);
+}
+.plugins-item.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 8px;
+    bottom: 8px;
+    width: 3px;
+    border-radius: 0 3px 3px 0;
+    background: var(--color-brand);
 }
 
 .plugins-item-main {
@@ -64,11 +76,11 @@
 .plugins-item-title {
     font-size: var(--font-size-body);
     font-weight: var(--font-weight-secondary);
-    color: var(--color-text-secondary);
+    color: var(--color-text-primary);
 }
 
 .plugins-item-meta {
-    margin-top: 4px;
+    margin-top: 3px;
     font-size: var(--font-size-caption);
     color: var(--color-text-tertiary);
     line-height: 1.45;
@@ -80,11 +92,11 @@
 }
 
 .plugins-panel {
-    border: 1px solid rgba(160, 145, 130, 0.22);
-    border-radius: var(--radius-md);
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.76) 100%);
-    box-shadow: var(--shadow-subtle);
-    padding: var(--spacing-sm);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(255,248,241,0.72) 100%);
+    box-shadow: var(--shadow-card);
+    padding: var(--spacing-md);
 }
 
 .plugins-panel-head {
@@ -95,7 +107,7 @@
     font-size: var(--font-size-title);
     font-weight: var(--font-weight-title);
     color: var(--color-text-primary);
-    letter-spacing: -0.01em;
+    letter-spacing: -0.02em;
 }
 
 .plugins-panel-subtitle {
@@ -107,44 +119,51 @@
 
 .plugins-panel-subtitle code {
     font-family: var(--font-family-mono);
-    font-size: 0.95em;
+    font-size: 0.92em;
+    background: var(--color-brand-light);
+    padding: 2px 6px;
+    border-radius: 6px;
 }
 
-/* Prompt templates */
+/* Prompt templates modebar */
 .prompt-templates-modebar {
     display: inline-flex;
-    gap: 8px;
-    padding: 6px;
-    border: 1px solid rgba(160, 145, 130, 0.18);
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.62);
-    margin-bottom: var(--spacing-sm);
+    gap: 4px;
+    padding: 4px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    background: linear-gradient(to bottom, rgba(255,255,255,0.82) 0%, rgba(255,248,241,0.58) 100%);
+    backdrop-filter: blur(12px);
+    margin-bottom: var(--spacing-md);
 }
 
 .mode-pill {
     border: 0;
-    border-radius: 999px;
-    padding: 8px 12px;
+    border-radius: var(--radius-full);
+    padding: 9px 18px;
     font-size: var(--font-size-caption);
-    letter-spacing: 0.01em;
+    font-weight: var(--font-weight-caption);
+    letter-spacing: 0.03em;
     cursor: pointer;
     background: transparent;
     color: var(--color-text-tertiary);
-    transition: background var(--transition-fast) var(--ease-spring), color var(--transition-fast) var(--ease-spring), transform var(--transition-fast) var(--ease-spring);
+    transition: all var(--transition-fast) var(--ease-spring);
 }
 
 .mode-pill.active {
-    background: linear-gradient(to bottom, rgba(201, 94, 75, 0.18) 0%, rgba(201, 94, 75, 0.08) 100%);
-    color: var(--color-text-secondary);
+    background: var(--color-surface-elevated);
+    color: var(--color-text-primary);
+    box-shadow: 0 1px 4px rgba(92,68,52,0.1), inset 0 0 0 1px rgba(200,121,99,0.2);
 }
 
-.mode-pill:hover {
-    transform: translateY(-1px);
+.mode-pill:hover:not(.active) {
+    color: var(--color-text-secondary);
+    background: rgba(255,255,255,0.5);
 }
 
 .prompt-compose {
     display: grid;
-    gap: var(--spacing-sm);
+    gap: var(--spacing-md);
 }
 
 .prompt-compose-command-row {
@@ -158,17 +177,17 @@
     flex: 1;
     min-width: 240px;
     background-color: var(--color-surface);
-    border-color: rgba(163, 146, 134, 0.18);
+    border-color: var(--color-border);
     box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.03);
 }
 
 .prompt-compose-form {
-    padding: 12px;
+    padding: var(--spacing-sm);
     border-radius: var(--radius-md);
-    border: 1px solid rgba(160, 145, 130, 0.18);
-    background: rgba(255, 255, 255, 0.62);
+    border: 1px solid var(--color-border-soft);
+    background: rgba(255,255,255,0.6);
     display: grid;
-    gap: 10px;
+    gap: 12px;
 }
 
 .prompt-compose-template-select {
@@ -246,20 +265,21 @@
 .prompt-compose-picker-item {
     width: 100%;
     text-align: left;
-    border: 1px dashed var(--color-border-soft);
+    border: 1px solid var(--color-border-soft);
     border-radius: var(--radius-sm);
-    background: rgba(255, 255, 255, 0.58);
+    background: rgba(255,255,255,0.5);
     padding: 12px;
     display: flex;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
     gap: 10px;
     cursor: pointer;
-    transition: border-color var(--transition-fast) var(--ease-spring), background var(--transition-fast) var(--ease-spring);
+    transition: all var(--transition-fast) var(--ease-spring);
 }
 
 .prompt-compose-picker-item:hover {
-    border-color: rgba(201, 94, 75, 0.55);
+    border-color: rgba(200,121,99,0.4);
+    background: rgba(255,243,236,0.4);
 }
 
 .prompt-compose-picker-item-title {
@@ -287,16 +307,16 @@
 }
 
 .prompt-compose-selected {
-    padding: 12px;
+    padding: var(--spacing-sm);
     border-radius: var(--radius-md);
-    border: 1px solid rgba(160, 145, 130, 0.18);
-    background: rgba(255, 255, 255, 0.62);
+    border: 1px solid var(--color-border-soft);
+    background: linear-gradient(to bottom, rgba(255,243,236,0.5) 0%, rgba(255,255,255,0.6) 100%);
 }
 
 .prompt-compose-selected-title {
     font-size: var(--font-size-body);
-    font-weight: var(--font-weight-secondary);
-    color: var(--color-text-secondary);
+    font-weight: var(--font-weight-primary);
+    color: var(--color-text-primary);
 }
 
 .prompt-compose-selected-meta {
@@ -307,13 +327,13 @@
 }
 
 .prompt-compose-canvas {
-    padding: 12px;
+    padding: var(--spacing-sm);
     border-radius: var(--radius-md);
-    border: 1px solid rgba(160, 145, 130, 0.18);
-    background: rgba(255, 255, 255, 0.62);
+    border: 1px solid var(--color-border-soft);
+    background: rgba(255,255,255,0.6);
     font-family: var(--font-family-mono);
     font-size: var(--font-size-caption);
-    line-height: 1.6;
+    line-height: 1.7;
     white-space: pre-wrap;
     overflow-wrap: anywhere;
 }
@@ -327,21 +347,23 @@
     vertical-align: baseline;
     min-width: 120px;
     max-width: 100%;
-    padding: 6px 8px;
-    margin: 0 4px;
-    border-radius: 10px;
-    border: 1px solid rgba(201, 94, 75, 0.38);
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.78) 100%);
+    padding: 6px 10px;
+    margin: 2px 3px;
+    border-radius: var(--radius-sm);
+    border: 1px solid rgba(200,121,99,0.35);
+    background: linear-gradient(to bottom, rgba(255,255,255,0.98) 0%, rgba(255,243,236,0.7) 100%);
     color: var(--color-text-primary);
     font-family: var(--font-family-mono);
     font-size: var(--font-size-caption);
     line-height: 1.4;
     resize: vertical;
+    transition: border-color var(--transition-fast) var(--ease-spring), box-shadow var(--transition-fast) var(--ease-spring);
 }
 
 .prompt-fragment-var:focus {
     outline: none;
-    box-shadow: 0 0 0 3px rgba(201, 94, 75, 0.16);
+    border-color: var(--color-brand);
+    box-shadow: 0 0 0 3px var(--color-brand-light);
 }
 
 .prompt-templates-grid {
@@ -377,21 +399,37 @@
 }
 
 .prompt-template-item {
-    border: 1px dashed var(--color-border-soft);
+    border: 1px solid var(--color-border-soft);
     border-radius: var(--radius-sm);
-    background: rgba(255, 255, 255, 0.58);
-    padding: 12px;
+    background: rgba(255,255,255,0.5);
+    padding: 10px 12px;
     display: flex;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
     gap: 10px;
     cursor: pointer;
-    transition: border-color var(--transition-fast) var(--ease-spring), background var(--transition-fast) var(--ease-spring);
+    position: relative;
+    transition: all var(--transition-fast) var(--ease-spring);
+}
+
+.prompt-template-item:hover {
+    background: rgba(255,255,255,0.75);
+    border-color: var(--color-border);
 }
 
 .prompt-template-item.active {
-    border-color: rgba(201, 94, 75, 0.55);
-    background: linear-gradient(to bottom, rgba(201, 94, 75, 0.09) 0%, rgba(201, 94, 75, 0.03) 100%);
+    border-color: rgba(200,121,99,0.4);
+    background: linear-gradient(to right, rgba(255,243,236,0.8) 0%, rgba(255,255,255,0.7) 100%);
+}
+.prompt-template-item.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 8px;
+    bottom: 8px;
+    width: 3px;
+    border-radius: 0 3px 3px 0;
+    background: var(--color-brand);
 }
 
 .prompt-template-item-title {
@@ -417,10 +455,10 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
-    padding: 12px;
+    padding: var(--spacing-sm);
     border-radius: var(--radius-md);
-    border: 1px solid rgba(160, 145, 130, 0.18);
-    background: rgba(255, 255, 255, 0.62);
+    border: 1px solid var(--color-border);
+    background: linear-gradient(to bottom, rgba(255,255,255,0.88) 0%, rgba(255,248,241,0.6) 100%);
     margin-bottom: var(--spacing-sm);
 }
 
@@ -454,10 +492,10 @@
 .prompt-vars-block,
 .prompt-preview-block {
     margin-top: var(--spacing-sm);
-    padding: 12px;
+    padding: var(--spacing-sm);
     border-radius: var(--radius-md);
-    border: 1px solid rgba(160, 145, 130, 0.18);
-    background: rgba(255, 255, 255, 0.62);
+    border: 1px solid var(--color-border-soft);
+    background: rgba(255,255,255,0.6);
 }
 
 .prompt-vars-head {
@@ -494,8 +532,10 @@
 }
 
 .prompt-var-label {
-    color: var(--color-text-tertiary);
+    color: var(--color-brand-dark);
+    font-family: var(--font-family-mono);
     font-size: var(--font-size-caption);
+    font-weight: var(--font-weight-caption);
 }
 
 .prompt-var-input {
@@ -504,7 +544,8 @@
 
 .prompt-var-input.is-missing {
     border-color: var(--color-error);
-    box-shadow: 0 0 0 1px rgba(196, 69, 54, 0.18);
+    box-shadow: 0 0 0 2px rgba(196,69,54,0.12);
+    animation: var(--transition-normal) ease-in-out;
 }
 
 @media (max-width: 980px) {

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

@@ -1,23 +1,22 @@
 .session-empty {
-    padding: 28px var(--spacing-sm);
+    padding: 40px var(--spacing-md);
     text-align: center;
-    border: 1px dashed var(--color-border-soft);
+    border: 1px solid var(--color-border-soft);
     border-radius: var(--radius-lg);
     color: var(--color-text-tertiary);
     background: var(--bg-warm-gradient);
-    position: relative;
     box-shadow: var(--shadow-subtle);
 }
 
 .session-empty::before {
     content: "";
     display: block;
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
-    margin: 0 auto 10px;
-    background: rgba(210, 107, 90, 0.12);
-    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.7);
+    margin: 0 auto 14px;
+    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
+    opacity: 0.18;
 }
 
 .trash-list {
@@ -43,7 +42,7 @@
 }
 
 .trash-item.session-item::before {
-    background: linear-gradient(180deg, rgba(70, 86, 110, 0.26), rgba(70, 86, 110, 0.08));
+    background: var(--color-border-soft);
 }
 
 .trash-item-main {
@@ -139,7 +138,7 @@
 .session-layout {
     display: grid;
     grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
-    gap: var(--spacing-sm);
+    gap: var(--spacing-md);
     align-items: start;
     height: min(72vh, 760px);
     min-height: 360px;
@@ -196,9 +195,9 @@
 
 .session-item {
     border: 1px solid var(--color-border-soft);
-    border-radius: var(--radius-sm);
-    background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(255, 255, 255, 0.92) 100%);
-    padding: 16px;
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+    padding: 14px 16px;
     cursor: pointer;
     transition: all var(--transition-fast) var(--ease-spring);
     user-select: none;
@@ -233,10 +232,10 @@
 }
 
 .session-item:focus-visible {
-    outline: 3px solid rgba(201, 94, 75, 0.25);
+    outline: 3px solid rgba(210, 107, 90, 0.2);
     outline-offset: 2px;
     border-color: var(--color-brand);
-    background: linear-gradient(to bottom, rgba(210, 107, 90, 0.08) 0%, rgba(255, 255, 255, 0.98) 100%);
+    background: linear-gradient(to bottom, rgba(210, 107, 90, 0.06) 0%, rgba(255, 255, 255, 0.98) 100%);
 }
 
 .session-item::before {
@@ -247,7 +246,7 @@
     bottom: 10px;
     width: 3px;
     border-radius: 999px;
-    background: rgba(210, 107, 90, 0.15);
+    background: var(--color-border-soft);
     transition: background var(--transition-fast) var(--ease-spring);
 }
 
@@ -257,22 +256,23 @@
 
 .session-item.active {
     border-color: var(--color-brand);
-    background: linear-gradient(to bottom, rgba(210, 107, 90, 0.1) 0%, rgba(255, 255, 255, 0.98) 100%);
-    box-shadow: 0 6px 16px rgba(210, 107, 90, 0.12);
+    background: linear-gradient(to bottom, rgba(210, 107, 90, 0.06) 0%, rgba(255, 255, 255, 0.98) 100%);
+    box-shadow: var(--shadow-float);
 }
 
 .session-item.pinned {
-    border-color: rgba(208, 88, 58, 0.42);
-    background: linear-gradient(to bottom, rgba(210, 107, 90, 0.12) 0%, rgba(255, 251, 247, 0.98) 100%);
-    box-shadow: 0 8px 18px rgba(210, 107, 90, 0.10);
+    border-color: var(--color-brand);
+    background: linear-gradient(to bottom, rgba(210, 107, 90, 0.08) 0%, rgba(255, 251, 247, 0.98) 100%);
+    box-shadow: 0 4px 12px rgba(210, 107, 90, 0.08);
 }
 
 .session-item.pinned::before {
-    background: linear-gradient(180deg, rgba(201, 94, 75, 0.8), rgba(201, 94, 75, 0.32));
+    background: linear-gradient(180deg, var(--color-brand), var(--color-brand-dark));
+    opacity: 0.7;
 }
 
 .session-item.active::before {
-    background: linear-gradient(180deg, rgba(201, 94, 75, 0.9), rgba(201, 94, 75, 0.4));
+    background: linear-gradient(180deg, var(--color-brand), var(--color-brand-dark));
 }
 
 .session-item-title {
@@ -295,11 +295,11 @@
 }
 
 .session-item-copy {
-    border: 1px solid rgba(70, 86, 110, 0.35);
-    background: rgba(70, 86, 110, 0.08);
+    border: 1px solid var(--color-border-soft);
+    background: var(--color-surface-alt);
     color: var(--color-text-secondary);
-    width: 22px;
-    height: 22px;
+    width: 24px;
+    height: 24px;
     border-radius: 8px;
     display: inline-flex;
     align-items: center;
@@ -310,9 +310,9 @@
 }
 
 .session-item-copy:hover {
-    border-color: rgba(70, 86, 110, 0.7);
-    background: rgba(70, 86, 110, 0.16);
-    color: var(--color-text-primary);
+    border-color: var(--color-brand);
+    background: var(--color-surface);
+    color: var(--color-brand);
     transform: translateY(-1px);
 }
 
@@ -328,25 +328,25 @@
 }
 
 .session-item-pin {
-    border-color: rgba(208, 88, 58, 0.24);
+    border-color: var(--color-border-soft);
 }
 
 .session-item-pin .pin-icon,
 .session-item-pin svg {
     width: 9px;
     height: 9px;
-    color: rgba(208, 88, 58, 0.78);
+    color: var(--color-text-tertiary);
 }
 
 .session-item.pinned .session-item-pin {
-    background: rgba(208, 88, 58, 0.16);
-    border-color: rgba(208, 88, 58, 0.46);
-    box-shadow: inset 0 0 0 1px rgba(208, 88, 58, 0.08);
+    background: var(--color-brand);
+    border-color: var(--color-brand);
+    opacity: 0.85;
 }
 
 .session-item.pinned .session-item-pin .pin-icon,
 .session-item.pinned .session-item-pin svg {
-    color: var(--color-brand-dark);
+    color: #fff;
 }
 
 .session-item-sub.session-item-snippet {
@@ -383,11 +383,10 @@
 
 .session-item-hot {
     font-size: var(--font-size-caption);
-    padding: 2px 6px;
+    padding: 2px 8px;
     border-radius: 999px;
-    background: rgba(208, 88, 58, 0.14);
-    border: 1px solid rgba(208, 88, 58, 0.26);
-    color: rgba(140, 46, 24, 0.9);
+    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
+    color: #fff;
     line-height: 1;
     white-space: nowrap;
 }
@@ -405,7 +404,7 @@
 .session-preview {
     border: 1px solid var(--color-border-soft);
     border-radius: var(--radius-xl);
-    background: linear-gradient(to bottom, var(--color-surface-elevated) 0%, rgba(255, 255, 255, 0.96) 100%);
+    background: var(--color-surface-elevated);
     box-shadow: var(--shadow-card);
     min-height: 0;
     max-height: none;
@@ -414,6 +413,5 @@
     flex-direction: column;
     overflow: hidden;
     position: relative;
-    transform: translateX(4px);
-    transition: transform var(--transition-normal) var(--ease-spring-soft), box-shadow var(--transition-normal) var(--ease-spring-soft);
+    transition: box-shadow var(--transition-normal) var(--ease-spring-soft);
 }