@silicaclaw/cli 2026.3.19-9 → 2026.3.20-10

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

@@ -192,6 +192,33 @@
         stroke-linecap: round;
         stroke-linejoin: round;
       }
+      .skills-dialogue-list {
+        display: grid;
+        gap: 8px;
+        margin-top: 12px;
+      }
+      .skills-dialogue-group {
+        display: grid;
+        gap: 8px;
+      }
+      .skills-dialogue-group__title {
+        font-size: 12px;
+        font-weight: 700;
+        color: var(--text-strong);
+        letter-spacing: 0.01em;
+      }
+      .skills-dialogue-group__items {
+        display: grid;
+        gap: 8px;
+      }
+      .skills-dialogue-item {
+        padding: 10px 12px;
+        border-radius: 12px;
+        border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
+        background: color-mix(in srgb, var(--card-soft) 92%, transparent);
+        color: var(--text);
+        line-height: 1.5;
+      }
       .sidebar-shell__body {
         flex: 1 1 auto;
         min-height: 0;
@@ -559,6 +586,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;
@@ -582,6 +691,9 @@
       .app.nav-collapsed .sidebar-version__copy {
         display: none;
       }
+      .app.nav-collapsed .sidebar-version__btn {
+        display: none;
+      }
 
       .main {
         display: flex;
@@ -791,6 +903,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;
@@ -803,9 +916,6 @@
       }
       .notice.show { display: block; }
       .integration-strip {
-        position: sticky;
-        top: 0;
-        z-index: 9;
         margin-bottom: 4px;
         border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
         border-radius: 14px;
@@ -1514,7 +1624,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;
@@ -1549,6 +1659,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;
@@ -1846,8 +1961,7 @@
         grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
       }
       .profile-layout > .card:last-child {
-        position: sticky;
-        top: 0;
+        position: relative;
       }
       .profile-meta {
         border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
@@ -1894,6 +2008,11 @@
         color: var(--muted);
         border-style: dashed;
       }
+      .tag-chip.warn {
+        color: color-mix(in srgb, var(--warn) 84%, var(--text-strong));
+        border-color: color-mix(in srgb, var(--warn) 34%, transparent);
+        background: color-mix(in srgb, var(--warn) 14%, transparent);
+      }
       .field-hint {
         margin-top: 4px;
         color: var(--muted);
@@ -1957,8 +2076,7 @@
         align-items: start;
       }
       .chat-compose-card {
-        position: sticky;
-        top: 12px;
+        position: relative;
       }
       .chat-compose-card textarea {
         min-height: 220px;
@@ -1980,20 +2098,169 @@
       }
       .network-actions-card,
       .social-actions-card {
-        position: sticky;
-        top: 12px;
+        position: relative;
         align-self: start;
       }
+      .skills-topline {
+        display: grid;
+        gap: 10px;
+        grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
+        margin-bottom: 10px;
+      }
+      .skills-action-card {
+        display: grid;
+        gap: 18px;
+        grid-template-columns: minmax(0, 1fr) auto;
+        align-items: center;
+        border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
+        background:
+          radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 18%, transparent), transparent 36%),
+          linear-gradient(180deg, color-mix(in srgb, var(--card-soft) 98%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
+      }
+      .skills-action-card__copy {
+        display: grid;
+        gap: 8px;
+      }
+      .skills-action-card__title {
+        margin: 0;
+        font-size: 24px;
+        line-height: 1.15;
+        color: var(--text-strong);
+      }
+      .skills-action-card__body {
+        margin: 0;
+        max-width: 720px;
+        color: var(--text);
+        line-height: 1.6;
+      }
+      .skills-action-card__side {
+        display: grid;
+        gap: 10px;
+        min-width: 220px;
+        justify-items: end;
+      }
+      .skills-action-card__side .actions {
+        margin: 0;
+      }
+      .skills-action-card__state {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 36px;
+        padding: 9px 12px;
+        border-radius: 999px;
+        border: 1px solid color-mix(in srgb, var(--border-strong) 84%, transparent);
+        background: color-mix(in srgb, var(--panel) 86%, transparent);
+        color: var(--text-strong);
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: 0.02em;
+        text-align: center;
+      }
+      .skills-jump-card {
+        display: grid;
+        gap: 14px;
+      }
+      .skills-jump-card__header {
+        display: grid;
+        gap: 6px;
+      }
+      .skills-jump-card__title {
+        font-size: 16px;
+        font-weight: 700;
+        color: var(--text-strong);
+      }
+      .skills-jump-list {
+        display: grid;
+        gap: 8px;
+      }
+      .skills-jump-btn {
+        justify-content: flex-start;
+      }
       .skills-layout {
         display: grid;
         gap: 10px;
         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;
       }
+      .skills-section {
+        display: grid;
+        gap: 12px;
+      }
+      .skills-section__count {
+        min-width: 42px;
+        padding: 6px 10px;
+        border-radius: 999px;
+        border: 1px solid color-mix(in srgb, var(--border-strong) 76%, transparent);
+        background: color-mix(in srgb, var(--panel) 90%, transparent);
+        color: var(--text-strong);
+        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));
+      }
+      .skills-summary-card {
+        display: grid;
+        gap: 8px;
+        padding: 14px 15px;
+        border-radius: 16px;
+        border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
+        background:
+          linear-gradient(180deg, color-mix(in srgb, var(--card-soft) 98%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
+        box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+      }
+      .skills-summary-card .label {
+        font-size: 11px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--muted);
+      }
+      .skills-summary-card .value {
+        font-size: 24px;
+        line-height: 1;
+        font-weight: 800;
+        color: var(--text-strong);
+      }
       .skill-card {
         border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
         border-radius: 16px;
@@ -2064,10 +2331,14 @@
         color: var(--text);
         line-height: 1.4;
         word-break: break-word;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
       }
       .skills-feature-card {
-        position: sticky;
-        top: 0;
+        position: relative;
       }
       .skills-spotlight {
         border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
@@ -2098,6 +2369,31 @@
         line-height: 1.5;
         font-size: 12.5px;
       }
+      @media (max-width: 1180px) {
+        .skills-topline {
+          grid-template-columns: 1fr;
+        }
+        .skills-action-card {
+          grid-template-columns: 1fr;
+        }
+        .skills-action-card__side {
+          min-width: 0;
+          justify-items: start;
+        }
+        #skillsSummaryCards {
+          grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+        }
+      }
+      @media (max-width: 920px) {
+        .skills-layout {
+          grid-template-columns: 1fr;
+        }
+      }
+      @media (max-width: 640px) {
+        #skillsSummaryCards {
+          grid-template-columns: 1fr;
+        }
+      }
       .network-diagnostics-stack,
       .social-advanced-stack {
         display: grid;
@@ -2225,9 +2521,7 @@
           border-bottom: 1px solid var(--border);
           height: auto;
           overflow: visible;
-          position: sticky;
-          top: 0;
-          z-index: 20;
+          position: relative;
           backdrop-filter: blur(14px) saturate(1.3);
           -webkit-backdrop-filter: blur(14px) saturate(1.3);
         }