@silicaclaw/cli 2026.3.19-9 → 2026.3.20-2

package/apps/local-console/public/app/social.js

@@ -68,6 +68,7 @@ export function createSocialController({
 
     listEl.innerHTML = filteredMessages
       .map((item) => {
+        const visibleRemoteCount = getVisibleRemotePublicCount();
         const selfStatusChips = item.is_self
           ? `
               <span class="tag-chip" style="margin-left:8px;">${t("overview.selfMessagePublished")}</span>
@@ -77,7 +78,21 @@ export function createSocialController({
                   ? t("overview.selfMessageRemoteObserved", { count: String(item.remote_observation_count) })
                   : t("overview.selfMessageAwaitingObservation")
               }</span>
-              <span class="tag-chip" style="margin-left:8px;">${t("overview.selfMessageRemoteVisible", { count: String(getVisibleRemotePublicCount()) })}</span>
+              <span class="tag-chip" style="margin-left:8px;">${t("overview.selfMessageRemoteVisible", { count: String(visibleRemoteCount) })}</span>
+            `
+          : "";
+        const selfDeliveryHint = item.is_self
+          ? `
+              <div style="margin-top:8px; color:#90a2c3;">
+                ${
+                  item.remote_observation_count > 0
+                    ? t("overview.selfMessageDeliveryObserved", {
+                        count: String(item.remote_observation_count),
+                        visible: String(visibleRemoteCount),
+                      })
+                    : t("overview.selfMessageDeliveryPending", { count: String(visibleRemoteCount) })
+                }
+              </div>
             `
           : "";
         const observationChip = item.remote_observation_count > 0
@@ -98,6 +113,7 @@ export function createSocialController({
               <div class="mono" style="color:#90a2c3;">${new Date(item.created_at).toLocaleString()}</div>
             </div>
             <div style="margin-top:8px; line-height:1.6;">${formatMessageBody(item.body || "")}</div>
+            ${selfDeliveryHint}
           </div>
         `;
       })
@@ -112,11 +128,12 @@ export function createSocialController({
   }
 
   async function refreshSocial() {
-    const [socialRes, summaryRes, statusRes, networkCfgRes, governanceRes] = await Promise.all([
+    const [socialRes, summaryRes, statusRes, networkCfgRes, networkStatsRes, governanceRes] = await Promise.all([
       api("/api/social/config"),
       api("/api/social/integration-summary"),
       api("/api/integration/status"),
       api("/api/network/config"),
+      api("/api/network/stats"),
       api("/api/social/message-governance"),
     ]);
     const bridgeRes = await api("/api/openclaw/bridge");
@@ -126,6 +143,7 @@ export function createSocialController({
     const networkCfg = networkCfgRes.data || {};
     const bridge = bridgeRes.data || {};
     const governance = governanceRes.data || {};
+    const networkStats = networkStatsRes.data || {};
     const runtime = social.runtime || {};
     const config = social.social_config || {};
     const network = config.network || {};
@@ -137,6 +155,7 @@ export function createSocialController({
     const effectiveNamespace = networkCfg.namespace || runtimeNetwork.namespace || summary.current_namespace || "-";
     const effectiveRoom = effectiveAdapterExtra.room || runtimeNetwork.room || network.room || "-";
     const effectiveRelay = effectiveAdapterExtra.signaling_url || runtimeNetwork.signaling_url || network.signaling_url || "-";
+    const networkDiag = networkStats.adapter_diagnostics_summary || {};
     const discoverable = status.discoverable === true;
     const mode = effectiveMode;
     const summaryLine = status.status_line || summary.summary_line || `${summary.connected ? t("social.connectedToSilicaClaw") : t("social.notConnectedToSilicaClaw")} · ${discoverable ? t("social.discoverableInCurrentMode") : t("social.notDiscoverableInCurrentMode")} · ${t("social.usingMode", { mode })}`;
@@ -190,6 +209,17 @@ export function createSocialController({
       [t("social.reuseOpenClawIdentity"), summary.reused_openclaw_identity ? t("common.yes") : t("common.no")],
     ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${v}</div></div>`).join("");
 
+    document.getElementById("socialMessagePathCards").innerHTML = [
+      [t("social.messageBroadcast"), bridge.message_broadcast_enabled ? t("common.on") : t("common.off")],
+      [t("social.publicDiscovery"), status.public_enabled ? t("common.on") : t("common.off")],
+      [t("social.namespace"), effectiveNamespace],
+      [t("labels.room"), effectiveRoom],
+      [t("labels.relay"), effectiveRelay],
+      [t("network.lastPoll"), networkDiag.last_poll_at ? new Date(networkDiag.last_poll_at).toLocaleTimeString() : "-"],
+      [t("network.lastPublish"), networkDiag.last_publish_at ? new Date(networkDiag.last_publish_at).toLocaleTimeString() : "-"],
+      [t("network.lastError"), networkDiag.last_error || t("network.none")],
+    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${escapeHtml(String(v))}</div></div>`).join("");
+
     const skillLearning = bridge.skill_learning || {};
     const ownerDelivery = bridge.owner_delivery || {};
     const installAction = skillLearning.install_action || {};
@@ -224,6 +254,12 @@ export function createSocialController({
       `${t("social.ownerForwardReady")}: ${ownerDelivery.ready ? t("common.yes") : t("common.no")}`,
     ].join(" · ");
     document.getElementById("socialOwnerDeliveryReason").textContent = ownerDeliveryBody;
+    document.getElementById("socialCapabilityCards").innerHTML = [
+      [t("socialCapability.publicBroadcast"), bridge.message_broadcast_enabled ? t("common.yes") : t("common.no")],
+      [t("socialCapability.monitorBroadcasts"), ownerDelivery.bridge_messages_readable ? t("common.yes") : t("common.no")],
+      [t("socialCapability.autoPushToOwner"), ownerDelivery.ready ? t("common.yes") : t("common.no")],
+      [t("socialCapability.ownerPrivateBoundary"), t("socialCapability.ownerPrivateBoundaryValue")],
+    ].map(([k, v]) => `<div class="card"><div class="label">${escapeHtml(String(k))}</div><div class="value" style="font-size:17px;">${escapeHtml(String(v))}</div></div>`).join("");
     document.getElementById("openclawSkillCards").innerHTML = [
       [t("social.openclawInstalled"), openclawDetected ? t("common.yes") : t("common.no")],
       [t("social.running"), openclawRunning ? t("common.yes") : t("common.no")],
@@ -370,12 +406,19 @@ export function createSocialController({
 
   function renderSkillCard(skill, options = {}) {
     const capabilities = Array.isArray(skill.capabilities) ? skill.capabilities.slice(0, 6) : [];
+    const updateAvailable = options.updateAvailable === true;
     const statusText = options.statusText || (skill.installed_in_openclaw ? t("common.yes") : t("hints.skillsNotInstalled"));
     const versionText = String(skill.version || "-");
     const bodyText = escapeHtml(String(skill.description || "-"));
-    const installTone = skill.installed_in_openclaw || skill.install_mode === "workspace" || skill.install_mode === "legacy"
-      ? "tag-chip emphasis"
-      : "tag-chip muted";
+    const skillName = String(skill.name || "").trim();
+    const installable = options.installable === true && Boolean(skillName) && (!skill.installed_in_openclaw || updateAvailable);
+    const installedVersionText = escapeHtml(String(options.installedVersion || skill.installed_version || "-"));
+    const bundledVersionText = escapeHtml(String(options.bundledVersion || skill.bundled_version || skill.version || "-"));
+    const installTone = updateAvailable
+      ? "tag-chip warn"
+      : skill.installed_in_openclaw || skill.install_mode === "workspace" || skill.install_mode === "legacy"
+        ? "tag-chip emphasis"
+        : "tag-chip muted";
     const sourceText = escapeHtml(String(skill.source_path || skill.bundled_source_path || skill.installed_path || "-"));
     const locationText = escapeHtml(String(skill.installed_path || skill.manifest_path || "-"));
     return `
@@ -390,9 +433,18 @@ export function createSocialController({
         <div class="skill-card__body">${bodyText}</div>
         <div class="skill-card__tags">
           <span class="${installTone}">${escapeHtml(statusText)}</span>
+          ${updateAvailable ? `<span class="tag-chip warn">${t("labels.skillsUpdateAvailable")}</span>` : ""}
           ${capabilities.map((item) => `<span class="tag-chip">${escapeHtml(String(item))}</span>`).join("")}
         </div>
         <div class="skill-card__meta">
+          <div class="skill-card__meta-item">
+            <div class="skill-card__meta-label">${t("labels.skillsInstalledVersion")}</div>
+            <div class="skill-card__meta-value mono">${installedVersionText}</div>
+          </div>
+          <div class="skill-card__meta-item">
+            <div class="skill-card__meta-label">${t("labels.skillsBundledVersion")}</div>
+            <div class="skill-card__meta-value mono">${bundledVersionText}</div>
+          </div>
           <div class="skill-card__meta-item">
             <div class="skill-card__meta-label">${t("labels.skillsSource")}</div>
             <div class="skill-card__meta-value mono">${sourceText}</div>
@@ -402,6 +454,50 @@ export function createSocialController({
             <div class="skill-card__meta-value mono">${locationText}</div>
           </div>
         </div>
+        ${installable ? `
+          <div class="actions">
+            <button class="secondary skill-install-btn" type="button" data-skill-install="${escapeHtml(skillName)}">${updateAvailable ? t("actions.updateThisSkill") : t("actions.installThisSkill")}</button>
+          </div>
+        ` : ""}
+      </div>
+    `;
+  }
+
+  function setSkillActionCopy({ title, body, state }) {
+    document.getElementById("skillsActionTitle").textContent = title;
+    document.getElementById("skillsActionBody").textContent = body;
+    document.getElementById("skillsActionState").textContent = state;
+  }
+
+  function renderDialogueCard(skill) {
+    const sections = Array.isArray(skill.owner_dialogue_sections_zh) ? skill.owner_dialogue_sections_zh : [];
+    const examples = Array.isArray(skill.owner_dialogue_examples_zh) ? skill.owner_dialogue_examples_zh : [];
+    return `
+      <div class="skill-card">
+        <div class="skill-card__top">
+          <div>
+            <div class="skill-card__eyebrow">${escapeHtml(skill.display_name || skill.name || "Skill")}</div>
+            <div class="skill-card__title">${escapeHtml(t("labels.skillsDialogueExamples"))}</div>
+          </div>
+          <div class="skill-card__version mono">${escapeHtml(skill.version || "-")}</div>
+        </div>
+        <div class="skill-card__body">${escapeHtml(skill.description || "-")}</div>
+        <div class="skills-dialogue-list">
+          ${sections.length
+            ? sections.map((section) => `
+                <div class="skills-dialogue-group">
+                  <div class="skills-dialogue-group__title">${escapeHtml(String(section.title || "-"))}</div>
+                  <div class="skills-dialogue-group__items">
+                    ${Array.isArray(section.items)
+                      ? section.items.map((item) => `<div class="skills-dialogue-item">"${escapeHtml(String(item))}"</div>`).join("")
+                      : ""}
+                  </div>
+                </div>
+              `).join("")
+            : examples.length
+              ? examples.map((item) => `<div class="skills-dialogue-item">"${escapeHtml(String(item))}"</div>`).join("")
+            : `<div class="skills-empty">${t("hints.skillsNoDialogueExamples")}</div>`}
+        </div>
       </div>
     `;
   }
@@ -413,9 +509,29 @@ export function createSocialController({
     const openclaw = payload.openclaw || {};
     const summary = payload.summary || {};
     const installAction = payload.install_action || {};
-    const featured = bundled[0] || null;
+    const broadcastSkill = bundled.find((item) => item.name === "silicaclaw-broadcast") || bundled[0] || null;
+    const ownerPushSkill = bundled.find((item) => item.name === "silicaclaw-owner-push") || null;
+    const featuredSkills = [broadcastSkill, ownerPushSkill].filter(Boolean);
     const openclawDetected = !!openclaw.detected;
     const openclawRunning = !!openclaw.running;
+    const allFeaturedInstalled = featuredSkills.length > 0 && featuredSkills.every((item) => item.installed_in_openclaw);
+    const installedFeaturedCount = featuredSkills.filter((item) => item.installed_in_openclaw).length;
+    const bundledUpdateCount = bundled.filter((item) => item.update_available).length;
+    const bundledSorted = [...bundled].sort((left, right) => {
+      const featuredLeft = featuredSkills.some((item) => item?.name === left.name) ? 1 : 0;
+      const featuredRight = featuredSkills.some((item) => item?.name === right.name) ? 1 : 0;
+      if (featuredLeft !== featuredRight) return featuredRight - featuredLeft;
+      const updateLeft = left.update_available ? 1 : 0;
+      const updateRight = right.update_available ? 1 : 0;
+      if (updateLeft !== updateRight) return updateRight - updateLeft;
+      const installLeft = left.installed_in_openclaw ? 1 : 0;
+      const installRight = right.installed_in_openclaw ? 1 : 0;
+      if (installLeft !== installRight) return installLeft - installRight;
+      return String(left.display_name || left.name || "").localeCompare(String(right.display_name || right.name || ""));
+    });
+    const installedSorted = [...installed].sort((left, right) =>
+      String(left.display_name || left.name || "").localeCompare(String(right.display_name || right.name || ""))
+    );
 
     document.getElementById("skillsBannerRuntimeValue").textContent = t("hints.skillsRuntimeSummary", {
       runtime: openclawRunning ? t("common.yes") : t("common.no"),
@@ -423,51 +539,114 @@ export function createSocialController({
       installed: String(summary.installed_count || 0),
     });
 
+    if (!openclawDetected) {
+      setSkillActionCopy({
+        title: t("hints.skillsActionMissingTitle"),
+        body: t("hints.skillsActionMissingBody"),
+        state: t("labels.skillsStateAttention"),
+      });
+    } else if (!openclawRunning) {
+      setSkillActionCopy({
+        title: t("hints.skillsActionStoppedTitle"),
+        body: t("hints.skillsActionStoppedBody"),
+        state: t("labels.skillsStateAttention"),
+      });
+    } else if (bundledUpdateCount > 0) {
+      setSkillActionCopy({
+        title: t("hints.skillsActionUpdateTitle", { count: String(bundledUpdateCount) }),
+        body: t("hints.skillsActionUpdateBody", { count: String(bundledUpdateCount) }),
+        state: t("labels.skillsStateAttention"),
+      });
+    } else if (allFeaturedInstalled) {
+      setSkillActionCopy({
+        title: t("hints.skillsActionCompleteTitle"),
+        body: t("hints.skillsActionCompleteBody"),
+        state: t("labels.skillsStateComplete"),
+      });
+    } else if (installedFeaturedCount > 0) {
+      setSkillActionCopy({
+        title: t("hints.skillsActionPartialTitle"),
+        body: t("hints.skillsActionPartialBody"),
+        state: t("labels.skillsStateInProgress"),
+      });
+    } else {
+      setSkillActionCopy({
+        title: t("hints.skillsActionInstallTitle"),
+        body: t("hints.skillsActionInstallBody"),
+        state: t("labels.skillsStateReady"),
+      });
+    }
+
     document.getElementById("skillsSummaryCards").innerHTML = [
       [t("labels.skillsBundled"), String(summary.bundled_count || 0)],
       [t("labels.skillsInstalled"), String(summary.installed_count || 0)],
-      [t("social.openclawInstalled"), openclawDetected ? t("common.yes") : t("common.no")],
-      [t("social.running"), openclawRunning ? t("common.yes") : t("common.no")],
-    ].map(([k, v]) => `<div class="card"><div class="label">${k}</div><div class="value" style="font-size:17px;">${escapeHtml(v)}</div></div>`).join("");
+      [t("labels.skillsUpdates"), String(summary.update_available_count || 0)],
+      [t("labels.skillsBroadcastLearning"), broadcastSkill?.installed_in_openclaw ? t("common.yes") : t("common.no")],
+      [t("labels.skillsAutoPush"), ownerPushSkill?.installed_in_openclaw ? t("common.yes") : t("common.no")],
+    ].map(([k, v]) => `<div class="skills-summary-card"><div class="label">${k}</div><div class="value">${escapeHtml(v)}</div></div>`).join("");
 
-    document.getElementById("skillsFeaturedSpotlight").innerHTML = featured
-      ? `
+    document.getElementById("skillsFeaturedCount").textContent = `${featuredSkills.length}`;
+    document.getElementById("skillsBundledCount").textContent = `${bundled.length}`;
+    document.getElementById("skillsInstalledCount").textContent = `${installed.length}`;
+    document.getElementById("skillsDialogueCount").textContent = `${featuredSkills.length}`;
+
+    document.getElementById("skillsFeaturedSpotlights").innerHTML = featuredSkills.length
+      ? featuredSkills.map((skill) => `
         <div class="skills-spotlight">
-          <div class="skill-card__eyebrow">${escapeHtml(openclaw.gateway_url || "OpenClaw skill")}</div>
-          <div class="skills-spotlight__title">${escapeHtml(featured.display_name || featured.name)}</div>
-          <div class="skills-spotlight__body">${escapeHtml(featured.description || "-")}</div>
+          <div class="skill-card__eyebrow">${escapeHtml(skill.name === "silicaclaw-owner-push" ? t("labels.skillsAutoPush") : t("labels.skillsBroadcastLearning"))}</div>
+          <div class="skills-spotlight__title">${escapeHtml(skill.display_name || skill.name)}</div>
+          <div class="skills-spotlight__body">${escapeHtml(skill.description || "-")}</div>
           <div class="skill-card__tags">
-            <span class="${featured.installed_in_openclaw ? "tag-chip emphasis" : "tag-chip muted"}">${featured.installed_in_openclaw ? t("common.yes") : t("hints.skillsNotInstalled")}</span>
-            ${(featured.capabilities || []).slice(0, 8).map((item) => `<span class="tag-chip">${escapeHtml(String(item))}</span>`).join("")}
+            <span class="${skill.update_available ? "tag-chip warn" : skill.installed_in_openclaw ? "tag-chip emphasis" : "tag-chip muted"}">${skill.update_available ? t("labels.skillsUpdateAvailable") : skill.installed_in_openclaw ? `${t("labels.skillsStatus")}: ${t("common.yes")}` : t("hints.skillsNotInstalled")}</span>
+            ${(skill.capabilities || []).slice(0, 8).map((item) => `<span class="tag-chip">${escapeHtml(String(item))}</span>`).join("")}
           </div>
         </div>
-      `
+      `).join("")
       : `<div class="skills-empty">${t("hints.skillsNoBundled")}</div>`;
 
-    document.getElementById("skillsBundledGrid").innerHTML = bundled.length
-      ? bundled.map((skill) => renderSkillCard(skill, {
+    document.getElementById("skillsBundledGrid").innerHTML = bundledSorted.length
+      ? bundledSorted.map((skill) => renderSkillCard(skill, {
           eyebrow: skill.install_mode === "workspace" || skill.install_mode === "legacy" ? skill.install_mode : "bundled",
-          statusText: skill.installed_in_openclaw ? `${t("labels.skillsStatus")}: ${t("common.yes")}` : t("hints.skillsNotInstalled"),
+          statusText: skill.update_available
+            ? t("labels.skillsUpdateAvailable")
+            : skill.installed_in_openclaw
+              ? `${t("labels.skillsStatus")}: ${t("common.yes")}`
+              : t("hints.skillsNotInstalled"),
+          installable: true,
+          updateAvailable: skill.update_available,
+          installedVersion: skill.installed_version,
+          bundledVersion: skill.version,
         })).join("")
       : `<div class="skills-empty">${t("hints.skillsNoBundled")}</div>`;
 
-    document.getElementById("skillsInstalledGrid").innerHTML = installed.length
-      ? installed.map((skill) => renderSkillCard(skill, {
+    document.getElementById("skillsInstalledGrid").innerHTML = installedSorted.length
+      ? installedSorted.map((skill) => renderSkillCard(skill, {
           eyebrow: skill.install_mode || "installed",
-          statusText: `${t("labels.skillsStatus")}: ${escapeHtml(String(skill.install_mode || "-"))}`,
+          statusText: skill.update_available
+            ? t("labels.skillsUpdateAvailable")
+            : `${t("labels.skillsStatus")}: ${escapeHtml(String(skill.install_mode || "-"))}`,
+          updateAvailable: skill.update_available,
+          installedVersion: skill.version,
+          bundledVersion: skill.bundled_version,
         })).join("")
       : `<div class="skills-empty">${t("hints.skillsNoInstalled")}</div>`;
 
+    document.getElementById("skillsDialogueGrid").innerHTML = featuredSkills.length
+      ? featuredSkills.map((skill) => renderDialogueCard(skill)).join("")
+      : `<div class="skills-empty">${t("hints.skillsNoDialogueExamples")}</div>`;
+
     const installBtn = document.getElementById("skillsInstallBtn");
     installBtn.textContent = !openclawDetected
       ? t("actions.openclawNotInstalled")
       : !openclawRunning
         ? t("actions.openclawNotRunning")
-        : featured?.installed_in_openclaw
-          ? t("actions.openclawSkillLearned")
-          : t("actions.learnOpenClawSkill");
-    installBtn.disabled = !openclawDetected || !openclawRunning || !!featured?.installed_in_openclaw;
-    document.getElementById("skillsFeedback").textContent = featured?.installed_in_openclaw
+        : bundledUpdateCount > 0
+          ? t("actions.updateSilicaClawSkills")
+        : allFeaturedInstalled
+          ? t("actions.silicaClawSkillsInstalled")
+          : t("actions.installSilicaClawSkills");
+    installBtn.disabled = !openclawDetected || !openclawRunning || (allFeaturedInstalled && bundledUpdateCount === 0);
+    document.getElementById("skillsFeedback").textContent = allFeaturedInstalled && bundledUpdateCount === 0
       ? t("feedback.openclawSkillInstalled")
       : installAction.recommended_command || t("common.ready");
   }

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;
@@ -803,9 +830,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;
@@ -1846,8 +1870,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 +1917,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 +1985,7 @@
         align-items: start;
       }
       .chat-compose-card {
-        position: sticky;
-        top: 12px;
+        position: relative;
       }
       .chat-compose-card textarea {
         min-height: 220px;
@@ -1980,10 +2007,85 @@
       }
       .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;
@@ -1994,6 +2096,45 @@
         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;
+      }
+      #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 +2205,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 +2243,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 +2395,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);
         }