codexmate 0.1.16 → 0.1.17

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

@@ -5,7 +5,7 @@
 .docs-mode-content {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 14px;
 }
 
 /* ---- Toolbar grid ----
@@ -20,17 +20,17 @@
 .docs-toolbar-card {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 7px;
     padding: 14px;
     border: 1px solid var(--color-border-soft);
     border-radius: var(--radius-md);
     background: var(--color-surface);
 }
 
-.docs-toolbar-card-wide {
-    /* 历史遗留的宽卡类，等宽网格下不再需要额外跨度，
-       保留类名以兼容模板中的引用。 */
-    grid-column: auto;
+/* 三张卡统一承载分段控件：标签块级化，使相邻卡内
+   install-action-tabs 的顶部基线保持一致。 */
+.docs-toolbar-card .form-label {
+    display: block;
 }
 
 /* Segmented control：把 install/registry 的散落 btn-mini
@@ -49,7 +49,7 @@
     border-color: transparent;
     background: transparent;
     box-shadow: none;
-    padding: 6px 12px;
+    padding: 5px 12px;
 }
 
 .docs-toolbar-card .install-action-tabs .btn-mini:hover {
@@ -64,48 +64,6 @@
     box-shadow: var(--shadow-subtle);
 }
 
-/* ---- Summary strip ----
-   原为 4 列网格但仅有 3 个 item，末列长期空置。改为
-   3 列等宽，composition 直接对齐内容数量。 */
-.docs-summary-strip {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 10px;
-    margin-top: 2px;
-}
-
-.docs-summary-item {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    padding: 14px 16px;
-    border: 1px solid var(--color-border-soft);
-    border-radius: var(--radius-md);
-    background: var(--color-surface);
-}
-
-/* 三列等宽后不再需要额外跨度，保留类名兼容模板引用。 */
-.docs-summary-item-wide {
-    grid-column: auto;
-}
-
-.docs-summary-label {
-    font-size: 10px;
-    font-weight: 700;
-    color: var(--color-text-muted);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-}
-
-.docs-summary-value {
-    font-size: 18px;
-    font-weight: 700;
-    color: var(--color-text-primary);
-    line-height: 1.2;
-    letter-spacing: -0.02em;
-    word-break: break-word;
-}
-
 /* ---- Install rows ---- */
 .docs-install-list {
     display: flex;
@@ -114,7 +72,7 @@
 }
 
 .docs-install-row {
-    padding: 16px;
+    padding: 14px;
     border: 1px solid var(--color-border-soft);
     border-radius: var(--radius-md);
     background: var(--color-surface);
@@ -124,7 +82,7 @@
     display: flex;
     flex-direction: column;
     gap: 6px;
-    margin-bottom: 10px;
+    margin-bottom: 8px;
 }
 
 .docs-command-row {
@@ -253,10 +211,6 @@
     .docs-toolbar-grid > .docs-toolbar-card:first-child {
         grid-column: span 2;
     }
-
-    .docs-summary-strip {
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
 }
 
 @media (max-width: 720px) {
@@ -268,7 +222,6 @@
         grid-column: auto;
     }
 
-    .docs-summary-strip,
     .docs-help-grid {
         grid-template-columns: 1fr;
     }

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

@@ -5,6 +5,10 @@
     align-items: start;
 }
 
+.plugins-layout-single {
+    grid-template-columns: minmax(0, 1fr);
+}
+
 .plugins-sidebar {
     border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
@@ -101,6 +105,11 @@
 
 .plugins-panel-head {
     margin-bottom: var(--spacing-sm);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
+    flex-wrap: wrap;
 }
 
 .plugins-panel-title {
@@ -303,27 +312,15 @@
 
 .prompt-compose-workspace {
     display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     gap: var(--spacing-sm);
+    align-items: start;
 }
 
-.prompt-compose-selected {
-    padding: var(--spacing-sm);
-    border-radius: var(--radius-md);
-    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-primary);
-    color: var(--color-text-primary);
-}
-
-.prompt-compose-selected-meta {
-    margin-top: 6px;
-    font-size: var(--font-size-caption);
-    color: var(--color-text-tertiary);
-    line-height: 1.5;
+.prompt-compose-main {
+    display: grid;
+    gap: var(--spacing-sm);
+    min-width: 0;
 }
 
 .prompt-compose-canvas {
@@ -552,6 +549,9 @@
     .plugins-layout {
         grid-template-columns: 1fr;
     }
+    .prompt-compose-workspace {
+        grid-template-columns: 1fr;
+    }
     .prompt-templates-grid {
         grid-template-columns: 1fr;
     }

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

@@ -114,47 +114,27 @@
     line-height: 1.6;
 }
 
-/* ---- Hero 区域 (全宽沉浸式) ---- */
-.usage-hero {
-    padding: 32px 28px;
-    margin-bottom: 24px;
-    border-radius: 18px;
-    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(252,248,241,0.9));
-    border: 1px solid rgba(137, 111, 94, 0.08);
-    min-height: 160px;
+/* ---- 当前会话活跃条 (瘦身内嵌) ---- */
+.usage-active-strip {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 20px;
-    box-shadow: 0 8px 32px rgba(92, 68, 52, 0.08), 0 0 0 1px rgba(255,255,255,0.5) inset;
-    backdrop-filter: blur(10px);
-    position: relative;
-    overflow: hidden;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px 16px;
+    padding: 10px 16px;
+    margin-bottom: 16px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, rgba(200, 121, 99, 0.08), rgba(200, 121, 99, 0.04));
+    border: 1px solid rgba(200, 121, 99, 0.12);
+    font-size: 12px;
 }
 
-.usage-hero::before {
-    content: '';
-    position: absolute;
-    top: -72px;
-    right: 0;
-    width: min(320px, 62%);
-    height: min(320px, 62%);
-    background: radial-gradient(circle, rgba(200, 121, 99, 0.06) 0%, transparent 70%);
-    pointer-events: none;
-}
 
 .usage-hero-active {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 10px 16px;
-    padding: 12px 18px;
-    border-radius: 12px;
-    background: linear-gradient(135deg, rgba(200, 121, 99, 0.08), rgba(200, 121, 99, 0.04));
-    border: 1px solid rgba(200, 121, 99, 0.12);
     font-size: 12px;
-    position: relative;
-    z-index: 1;
 }
 
 .usage-hero-active-dot {
@@ -191,49 +171,54 @@
     color: var(--color-border-strong);
 }
 
-.usage-hero-metrics {
-    text-align: center;
-    position: relative;
-    z-index: 1;
+.usage-kpi-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 14px;
+    margin-bottom: 24px;
+}
+
+.usage-kpi-card {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+    padding: 14px 16px;
+    border-radius: 14px;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(252, 248, 241, 0.7));
+    border: 1px solid rgba(137, 111, 94, 0.08);
+    box-shadow: 0 4px 16px rgba(92, 68, 52, 0.05);
+}
+
+.usage-kpi-label {
+    font-size: 11px;
+    color: var(--color-text-tertiary);
+    letter-spacing: 0.02em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-.usage-hero-main {
-    font-size: 52px;
+.usage-kpi-value {
+    font-size: 22px;
     font-weight: 700;
     color: var(--color-text-primary);
-    line-height: 1;
-    letter-spacing: -0.04em;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
     font-variant-numeric: tabular-nums;
-    animation: usage-hero-count 1s var(--ease-out-expo);
-    background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-brand) 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-@keyframes usage-hero-count {
-    from { opacity: 0; transform: translateY(16px) scale(0.95); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    animation: usage-kpi-count 0.6s var(--ease-out-expo);
 }
 
-.usage-hero-sub {
-    margin-top: 10px;
-    font-size: 14px;
-    color: var(--color-text-tertiary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 14px;
-    flex-wrap: wrap;
-    min-width: 0;
-    overflow-wrap: anywhere;
-    text-align: center;
+.usage-kpi-card .usage-hero-delta {
+    align-self: flex-start;
 }
 
-.usage-hero-sub > span {
-    min-width: 0;
-    max-width: 100%;
-    overflow-wrap: anywhere;
+@keyframes usage-kpi-count {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
 .usage-hero-delta {
@@ -255,6 +240,7 @@
 
 /* ---- 波浪图 (流体动画) ---- */
 .usage-wave-section {
+    position: relative;
     overflow: hidden;
     border: none;
     background: transparent;
@@ -262,6 +248,21 @@
     margin-bottom: 24px;
 }
 
+.usage-wave-title {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.usage-wave-summary {
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--color-text-tertiary);
+    letter-spacing: 0;
+}
+
 .usage-wave-container {
     margin-top: 16px;
     display: grid;
@@ -395,11 +396,16 @@
 
 /* ---- 日期详情 ---- */
 .usage-daydetail {
-    margin-top: 16px;
-    padding: 14px 18px;
+    position: absolute;
+    top: 40px;
+    right: 8px;
+    z-index: 3;
+    max-width: min(340px, calc(100% - 40px));
+    padding: 10px 14px;
     border-radius: 12px;
-    background: linear-gradient(135deg, rgba(247, 239, 232, 0.8), rgba(247, 239, 232, 0.4));
-    border: 1px solid rgba(137, 111, 94, 0.06);
+    background: rgba(255, 255, 255, 0.94);
+    border: 1px solid rgba(137, 111, 94, 0.1);
+    box-shadow: 0 6px 20px rgba(92, 68, 52, 0.08);
 }
 
 .usage-daydetail-header {
@@ -619,6 +625,22 @@
     color: var(--color-text-muted);
     margin-top: 3px;
 }
+.usage-list-bar {
+    height: 3px;
+    margin-top: 6px;
+    border-radius: 2px;
+    background: rgba(137, 111, 94, 0.12);
+    overflow: hidden;
+}
+
+.usage-list-bar-fill {
+    display: block;
+    height: 100%;
+    border-radius: 2px;
+    background: linear-gradient(90deg, var(--color-brand), rgba(200, 121, 99, 0.55));
+    transition: width 300ms ease;
+}
+
 
 .usage-list-value {
     font-size: 13px;
@@ -677,9 +699,8 @@
 .usage-list-path-content {
     flex: 1;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 12px;
+    flex-direction: column;
+    gap: 4px;
     min-width: 0;
 }
 
@@ -780,8 +801,8 @@
 
 @media (max-width: 960px) {
 
-    .usage-hero-main {
-        font-size: 44px;
+    .usage-kpi-grid {
+        gap: 10px;
     }
 }
 
@@ -796,27 +817,19 @@
         flex-wrap: wrap;
     }
 
-    .usage-hero {
-        padding: 22px 16px;
-        min-height: 140px;
-        gap: 16px;
+    .usage-active-strip {
+        padding: 8px 12px;
+        gap: 8px 10px;
     }
 
-    .usage-hero::before {
-        top: -56px;
-        right: 0;
-        width: 220px;
-        height: 220px;
+    .usage-kpi-value {
+        font-size: 18px;
     }
 
-    .usage-hero-active {
-        padding: 10px 12px;
-        gap: 8px 10px;
-    }
-
-    .usage-hero-main {
-        font-size: clamp(32px, 10vw, 38px);
-        line-height: 1.08;
+    .usage-daydetail {
+        position: static;
+        max-width: 100%;
+        margin-top: 12px;
     }
 
     .usage-wave-chart {