@silicaclaw/cli 2026.3.20-2 → 2026.3.20-21

package/apps/local-console/public/app/styles.css

@@ -334,17 +334,6 @@
         width: 18px;
         height: 18px;
       }
-      .app.nav-collapsed .nav button.active::before {
-        content: "";
-        position: absolute;
-        left: 8px;
-        top: 10px;
-        bottom: 10px;
-        width: 3px;
-        border-radius: 999px;
-        background: color-mix(in srgb, var(--accent) 86%, transparent);
-        box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 34%, transparent);
-      }
       .app.nav-collapsed .sidebar-shell__footer {
         padding: 8px 0 2px;
         display: grid;
@@ -394,8 +383,16 @@
       .nav-section {
         display: grid;
         align-content: start;
-        gap: 6px;
-        margin-bottom: 10px;
+        gap: 8px;
+        margin-bottom: 12px;
+        padding: 10px;
+        border-radius: 18px;
+        background:
+          linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 94%, transparent) 100%);
+        border: 1px solid color-mix(in srgb, var(--border) 54%, transparent);
+        box-shadow:
+          inset 0 1px 0 color-mix(in srgb, white 8%, transparent),
+          0 10px 24px color-mix(in srgb, black 8%, transparent);
       }
       .nav-section:last-child {
         margin-bottom: 0;
@@ -406,12 +403,12 @@
         justify-content: space-between;
         gap: 8px;
         width: 100%;
-        min-height: 28px;
-        padding: 0 10px;
-        color: var(--muted);
-        font-size: 12px;
+        min-height: 24px;
+        padding: 0 4px;
+        color: color-mix(in srgb, var(--text) 78%, transparent);
+        font-size: 11px;
         font-weight: 700;
-        letter-spacing: 0.06em;
+        letter-spacing: 0.12em;
         text-transform: uppercase;
       }
       .nav-section__items {
@@ -425,13 +422,13 @@
         align-items: flex-start;
         justify-content: flex-start;
         gap: 10px;
-        min-height: 56px;
+        min-height: 54px;
         text-align: left;
-        border: 1px solid transparent;
-        background: transparent;
+        border: 1px solid color-mix(in srgb, var(--border) 42%, transparent);
+        background: color-mix(in srgb, var(--bg) 92%, transparent);
         color: var(--muted);
         padding: 10px 12px;
-        border-radius: 14px;
+        border-radius: 15px;
         cursor: pointer;
         font: inherit;
         line-height: 1;
@@ -488,17 +485,6 @@
           inset 0 1px 0 color-mix(in srgb, white 10%, transparent),
           0 10px 18px color-mix(in srgb, black 8%, transparent);
       }
-      .nav button.active::before {
-        content: "";
-        position: absolute;
-        left: 8px;
-        top: 9px;
-        bottom: 9px;
-        width: 3px;
-        border-radius: 999px;
-        background: color-mix(in srgb, var(--accent) 86%, transparent);
-        box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 28%, transparent);
-      }
       .nav button.active .tab-icon {
         opacity: 1;
         color: var(--accent);
@@ -508,8 +494,9 @@
       }
       .nav button:hover {
         color: var(--text);
-        background: color-mix(in srgb, var(--bg-hover) 68%, transparent);
-        border-color: color-mix(in srgb, var(--border) 60%, transparent);
+        background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
+        border-color: color-mix(in srgb, var(--accent) 26%, var(--border) 74%);
+        transform: translateY(-1px);
       }
       .nav button:hover .tab-icon {
         opacity: 1;
@@ -586,6 +573,88 @@
         overflow: hidden;
         text-overflow: ellipsis;
       }
+      .sidebar-version__hint {
+        font-size: 10px;
+        line-height: 1.2;
+        color: var(--muted);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .sidebar-version__relay {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 10px;
+        line-height: 1.2;
+        color: var(--muted);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .sidebar-version__relay::before {
+        content: "";
+        width: 7px;
+        height: 7px;
+        border-radius: 999px;
+        background: var(--ok);
+        box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 12%, transparent);
+        flex: 0 0 auto;
+      }
+      .sidebar-version__relay.warn {
+        color: color-mix(in srgb, var(--warn) 86%, var(--text));
+      }
+      .sidebar-version__relay.warn::before {
+        background: var(--warn);
+        box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 12%, transparent);
+      }
+      .sidebar-version__relay.danger {
+        color: color-mix(in srgb, var(--danger) 86%, var(--text));
+      }
+      .sidebar-version__relay.danger::before {
+        background: var(--danger);
+        box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 12%, transparent);
+      }
+      .sidebar-version__actions {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex: 0 0 auto;
+      }
+      .sidebar-version__btn {
+        appearance: none;
+        border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
+        background: color-mix(in srgb, var(--accent) 16%, transparent);
+        color: var(--text-strong);
+        border-radius: 999px;
+        padding: 6px 10px;
+        font-size: 11px;
+        line-height: 1;
+        font-weight: 700;
+        cursor: pointer;
+        transition: background .18s ease, border-color .18s ease, opacity .18s ease;
+      }
+      .sidebar-version__btn:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--accent) 22%, transparent);
+        border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
+      }
+      .sidebar-version__btn--ghost {
+        background: transparent;
+        border-color: color-mix(in srgb, var(--border) 88%, transparent);
+        color: var(--muted);
+      }
+      .sidebar-version__btn--ghost:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
+        border-color: color-mix(in srgb, var(--border) 100%, transparent);
+      }
+      .sidebar-version__btn:disabled {
+        opacity: .55;
+        cursor: wait;
+      }
+      .sidebar-version__btn.hidden,
+      .sidebar-version__hint.hidden {
+        display: none;
+      }
       .sidebar-version__status {
         width: 8px;
         height: 8px;
@@ -609,6 +678,9 @@
       .app.nav-collapsed .sidebar-version__copy {
         display: none;
       }
+      .app.nav-collapsed .sidebar-version__btn {
+        display: none;
+      }
 
       .main {
         display: flex;
@@ -818,6 +890,7 @@
       .pill.ok { color: var(--ok); border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.08); }
       .pill.warn { color: var(--warn); border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.08); }
       .pill.danger { color: var(--danger); border-color: rgba(239, 68, 68, 0.42); background: rgba(239, 68, 68, 0.08); }
+      .pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 42%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
 
       .notice {
         display: none;
@@ -1538,7 +1611,7 @@
       }
       .agent-card {
         display: grid;
-        grid-template-columns: auto minmax(0, 1fr) auto auto;
+        grid-template-columns: auto minmax(0, 1fr) auto auto auto;
         gap: 10px;
         align-items: center;
         padding: 12px;
@@ -1573,6 +1646,11 @@
         border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
         background: color-mix(in srgb, var(--accent-subtle) 70%, var(--bg-elevated) 30%);
       }
+      .agent-card__actions {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
       .agent-card__main {
         min-width: 0;
         display: grid;
@@ -2092,6 +2170,34 @@
         grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
         align-items: start;
       }
+      .skills-toolbar {
+        display: grid;
+        gap: 12px;
+        margin-bottom: 10px;
+      }
+      .skills-toolbar__search {
+        display: grid;
+        gap: 6px;
+      }
+      .skills-toolbar__label {
+        font-size: 12px;
+        font-weight: 700;
+        color: var(--text-strong);
+      }
+      .skills-toolbar__filters {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+      .skills-filter-chip.active {
+        border-color: color-mix(in srgb, var(--accent) 28%, transparent);
+        background: color-mix(in srgb, var(--accent-subtle) 82%, transparent);
+        color: var(--text-strong);
+      }
+      .skills-toolbar__meta {
+        color: var(--muted);
+        font-size: 12px;
+      }
       .skills-grid {
         display: grid;
         gap: 10px;
@@ -2110,6 +2216,13 @@
         font-size: 12px;
         text-align: center;
       }
+      .skills-section__footer {
+        display: flex;
+        justify-content: flex-start;
+      }
+      .skills-section__toggle {
+        min-width: 0;
+      }
       #skillsSummaryCards {
         grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
       }
@@ -2439,13 +2552,6 @@
           background: color-mix(in srgb, var(--bg-elevated) 84%, transparent);
           border-color: color-mix(in srgb, var(--border) 72%, transparent);
         }
-        .nav button.active::before {
-          left: 10px;
-          top: auto;
-          bottom: 6px;
-          width: calc(100% - 20px);
-          height: 3px;
-        }
         .grid,
         #view-network #networkCards,
         #socialPrimaryCards,