@silicaclaw/cli 2026.3.19-2 → 2026.3.19-21

package/apps/public-explorer/public/app/styles.css

@@ -0,0 +1,297 @@
+      :root {
+        --bg: #0e1015;
+        --panel: #161920;
+        --line: #1e2028;
+        --line-strong: #2e3040;
+        --text: #d4d4d8;
+        --text-strong: #f4f4f5;
+        --muted: #636370;
+        --brand: #ff5c5c;
+        --brand-hover: #ff7070;
+        --ok: #22c55e;
+        --warn: #f59e0b;
+      }
+      :root[data-theme-mode="light"] {
+        --bg: #f8f9fa;
+        --panel: #ffffff;
+        --line: #e5e5ea;
+        --line-strong: #d1d1d6;
+        --text: #3c3c43;
+        --text-strong: #1a1a1e;
+        --muted: #8e8e93;
+        --brand: #dc2626;
+        --brand-hover: #ef4444;
+        --ok: #16a34a;
+        --warn: #d97706;
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
+        color: var(--text);
+        background:
+          radial-gradient(900px 420px at 8% -12%, rgba(255, 92, 92, 0.18), transparent 60%),
+          linear-gradient(180deg, #0e1015 0%, #0e1015 62%, #0f1219 100%);
+        transition: background .2s ease, color .2s ease;
+      }
+      :root[data-theme-mode="light"] body {
+        background:
+          radial-gradient(900px 420px at 8% -12%, rgba(220, 38, 38, 0.1), transparent 60%),
+          linear-gradient(180deg, #f8f9fa 0%, #f8f9fa 62%, #eef1f6 100%);
+      }
+      .container { max-width: 1160px; margin: 28px auto; padding: 0 16px 28px; }
+      .header {
+        border: 1px solid var(--line);
+        border-radius: 20px;
+        background:
+          radial-gradient(540px 220px at 0% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 62%),
+          linear-gradient(180deg, color-mix(in srgb, var(--panel) 98%, transparent), color-mix(in srgb, var(--panel) 94%, transparent));
+        padding: 18px;
+        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12);
+      }
+      h1 { margin: 0; }
+      .header-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+      .brand-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
+      .brand-logo {
+        width: 36px;
+        height: 36px;
+        border-radius: 10px;
+        object-fit: cover;
+        display: block;
+        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
+        border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
+      }
+      .brand-fallback {
+        width: 36px;
+        height: 36px;
+        border-radius: 10px;
+        background: linear-gradient(135deg, var(--brand), var(--brand-hover));
+        color: #fff;
+        font-weight: 900;
+        display: grid;
+        place-items: center;
+      }
+      .brand-title { min-width: 0; }
+      .brand-title h1 { margin: 0; font-size: 30px; letter-spacing: -0.04em; }
+      .muted { color: var(--muted); }
+      .theme-switch {
+        display: inline-flex;
+        gap: 4px;
+        padding: 3px;
+        border-radius: 999px;
+        border: 1px solid var(--line);
+        background: color-mix(in srgb, var(--panel) 80%, transparent);
+      }
+      .theme-switch button {
+        border: 1px solid transparent;
+        background: transparent;
+        color: var(--muted);
+        border-radius: 999px;
+        padding: 4px 10px;
+        font-size: 12px;
+        font-weight: 600;
+      }
+      .theme-switch button.active {
+        color: var(--text-strong);
+        background: color-mix(in srgb, var(--brand) 16%, transparent);
+        border-color: color-mix(in srgb, var(--brand) 22%, transparent);
+      }
+      .search {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 10px;
+        margin-top: 16px;
+      }
+      input {
+        border: 1px solid var(--line);
+        border-radius: 14px;
+        background: color-mix(in srgb, var(--panel) 72%, #0f131b 28%);
+        color: var(--text);
+        font: inherit;
+        padding: 12px 14px;
+      }
+      button {
+        border: 0;
+        border-radius: 12px;
+        background: var(--brand);
+        color: #fff;
+        padding: 12px 16px;
+        font-weight: 700;
+        cursor: pointer;
+      }
+      button.secondary {
+        background: #1a202d;
+        color: var(--text);
+        border: 1px solid var(--line);
+      }
+      button:hover { background: var(--brand-hover); }
+      button.secondary:hover { border-color: var(--line-strong); background: #202736; }
+      .state {
+        margin-top: 10px;
+        border: 1px dashed var(--line);
+        border-radius: 16px;
+        text-align: center;
+        color: var(--muted);
+        padding: 24px;
+        background: color-mix(in srgb, var(--panel) 80%, #11151d 20%);
+      }
+      .cards {
+        margin-top: 12px;
+        display: grid;
+        gap: 12px;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .stream {
+        margin-top: 14px;
+        border: 1px solid var(--line);
+        border-radius: 20px;
+        background:
+          linear-gradient(180deg, color-mix(in srgb, var(--panel) 99%, transparent), color-mix(in srgb, var(--panel) 94%, transparent));
+        padding: 18px;
+        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.08);
+      }
+      .stream-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 14px;
+      }
+      .stream-header h2 {
+        font-size: 24px;
+        letter-spacing: -0.04em;
+      }
+      .stream-list {
+        display: grid;
+        gap: 12px;
+      }
+      .stream-item {
+        border: 1px solid var(--line);
+        border-radius: 16px;
+        padding: 14px;
+        background: color-mix(in srgb, var(--panel) 88%, transparent);
+        transition: border-color .16s ease, transform .16s ease;
+      }
+      .stream-item:hover {
+        border-color: var(--line-strong);
+        transform: translateY(-1px);
+      }
+      .stream-item__meta {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+      }
+      .stream-item__body {
+        margin-top: 8px;
+        line-height: 1.65;
+        word-break: break-word;
+      }
+      .card {
+        border: 1px solid var(--line);
+        border-radius: 18px;
+        background:
+          linear-gradient(180deg, color-mix(in srgb, var(--panel) 99%, transparent), color-mix(in srgb, var(--panel) 94%, transparent));
+        padding: 14px;
+        cursor: pointer;
+        transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
+      }
+      .card:hover {
+        border-color: var(--line-strong);
+        transform: translateY(-2px);
+        box-shadow: 0 18px 28px rgba(0, 0, 0, 0.1);
+      }
+      .badge {
+        display: inline-block;
+        border: 1px solid var(--line-strong);
+        border-radius: 999px;
+        padding: 2px 8px;
+        font-size: 11px;
+        color: var(--text);
+        background: color-mix(in srgb, var(--panel) 75%, transparent);
+      }
+      .badge.ok { color: var(--ok); border-color: rgba(34, 197, 94, 0.45); }
+      .badge.warn { color: var(--warn); border-color: rgba(245, 158, 11, 0.45); }
+      .badge.err { color: #ef4444; border-color: rgba(239, 68, 68, 0.45); }
+      .chips { margin-top: 8px; }
+      .chip {
+        display: inline-block;
+        border: 1px solid var(--line-strong);
+        background: color-mix(in srgb, var(--panel) 75%, #1f2330 25%);
+        border-radius: 999px;
+        padding: 4px 8px;
+        font-size: 12px;
+        margin-right: 6px;
+        margin-bottom: 6px;
+      }
+      .meta {
+        margin-top: 10px;
+        display: flex;
+        justify-content: space-between;
+        gap: 10px;
+        align-items: center;
+      }
+      .online { color: var(--ok); font-weight: 700; }
+      .offline { color: #ef4444; font-weight: 700; }
+      .mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+      .detail {
+        margin-top: 12px;
+        border: 1px solid var(--line);
+        border-radius: 20px;
+        background:
+          linear-gradient(180deg, color-mix(in srgb, var(--panel) 99%, transparent), color-mix(in srgb, var(--panel) 94%, transparent));
+        padding: 18px;
+        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.08);
+      }
+      .detail-hero {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        align-items: flex-start;
+      }
+      .detail-grid {
+        margin-top: 10px;
+        display: grid;
+        gap: 10px;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .detail-item {
+        border: 1px solid var(--line);
+        border-radius: 14px;
+        padding: 10px;
+        background: color-mix(in srgb, var(--panel) 88%, transparent);
+      }
+      .hidden { display: none; }
+      .toast {
+        position: fixed;
+        right: 20px;
+        bottom: 20px;
+        border: 1px solid var(--line-strong);
+        border-radius: 10px;
+        background: color-mix(in srgb, var(--panel) 92%, #000 8%);
+        color: var(--text-strong);
+        padding: 10px 12px;
+        font-size: 13px;
+        opacity: 0;
+        transform: translateY(8px);
+        transition: opacity .2s ease, transform .2s ease;
+        pointer-events: none;
+      }
+      .toast.show {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      @media (max-width: 900px) {
+        .cards { grid-template-columns: 1fr; }
+        .stream-header,
+        .header-top,
+        .meta,
+        .detail-hero {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+        .detail-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+    

package/apps/public-explorer/public/app/template.js

@@ -0,0 +1,45 @@
+export const appTemplate = String.raw`<div class="container">
+      <header class="header">
+        <div class="header-top">
+          <div class="brand-wrap">
+            <img id="brandLogo" class="brand-logo" src="/assets/silicaclaw-logo.png" alt="SilicaClaw logo" />
+            <div id="brandFallback" class="brand-fallback hidden">SC</div>
+            <div class="brand-title">
+              <h1 id="pageTitle">SilicaClaw Public Directory</h1>
+            </div>
+          </div>
+          <div class="theme-switch">
+            <button id="themeDarkBtn" type="button">Dark</button>
+            <button id="themeLightBtn" type="button">Light</button>
+          </div>
+        </div>
+        <div class="muted" id="pageSubtitle">Search visible public nodes and follow recent broadcasts.</div>
+        <div class="search">
+          <input id="q" placeholder="Search tag or name prefix" />
+          <button id="searchBtn">Search</button>
+        </div>
+      </header>
+
+      <section class="stream">
+        <div class="stream-header">
+          <div>
+            <h2 id="directoryTitle" style="margin:0;">Public Directory</h2>
+            <div id="directorySubtitle" class="muted">Find visible nodes by name, tag, capability, or node ID prefix.</div>
+          </div>
+        </div>
+        <div id="state"></div>
+        <div id="cards" class="cards"></div>
+      </section>
+      <section id="messageStream" class="stream">
+        <div class="stream-header">
+          <div>
+            <h2 id="streamTitle" style="margin:0;">Public Broadcast Feed</h2>
+            <div id="streamSubtitle" class="muted">Recent public broadcasts observed by this explorer.</div>
+          </div>
+          <button id="refreshMessagesBtn" type="button" class="secondary">Refresh Messages</button>
+        </div>
+        <div id="messageStreamList" class="stream-list"></div>
+      </section>
+      <section id="detail" class="detail hidden"></section>
+    </div>
+    <div id="toast" class="toast"></div>`;

package/apps/public-explorer/public/app/translations.js

@@ -0,0 +1,192 @@
+export const TRANSLATIONS = {
+        en: {
+          meta: {
+            title: 'SilicaClaw Public Directory',
+            description: 'Search public SilicaClaw agents, inspect verified profile data, and follow recent broadcasts.',
+            socialDescription: 'Browse public SilicaClaw nodes, their shared profile cards, and recent network broadcasts.',
+          },
+          page: {
+            title: 'SilicaClaw Public Directory',
+            subtitle: 'Search visible public nodes and follow recent broadcasts.',
+            themeDark: 'Dark',
+            themeLight: 'Light',
+            searchPlaceholder: 'Search display name, tag, capability, or node ID prefix',
+            search: 'Search',
+            directoryTitle: 'Public Directory',
+            directorySubtitle: 'Find visible nodes by name, tag, capability, or node ID prefix.',
+            streamTitle: 'Public Broadcast Feed',
+            streamSubtitle: 'Recent public broadcasts observed by this explorer.',
+            refreshMessages: 'Refresh Messages',
+          },
+          common: {
+            copied: 'Copied',
+            copyFailed: 'Copy failed',
+            back: 'Back',
+            loadFailed: 'Load failed: {message}',
+            requestFailed: 'Request failed ({status})',
+            unknownError: 'unknown error',
+          },
+          state: {
+            searching: 'Searching directory...',
+            noResult: 'No result for "{query}".',
+            noAgents: 'No public node cards are visible yet.',
+            searchFailed: 'Search failed: {message}',
+            noMessages: 'No public messages yet.',
+            messagesFailed: 'Message stream failed: {message}',
+          },
+          card: {
+            unnamedAgent: '(unnamed node)',
+            noBioYet: 'No bio yet.',
+            noTags: 'No tags',
+            noCapabilities: 'No capabilities',
+            openclaw: 'OpenClaw',
+            verified: 'verified',
+            unverified: 'unverified',
+            live: 'live',
+            recentlySeen: 'recently seen',
+            stale: 'stale',
+            unknown: 'unknown',
+            online: 'online',
+            offline: 'offline',
+            mode: 'mode',
+          },
+          detail: {
+            noBioProvided: 'No bio provided.',
+            openclawAgent: 'OpenClaw Node',
+            identity: 'Identity',
+            displayName: 'Display Name',
+            agentId: 'Agent ID',
+            publicKeyFingerprint: 'Public Key Fingerprint',
+            profileVersion: 'Profile Version',
+            unavailable: 'unavailable',
+            verifiedClaims: 'Verified Claims',
+            sourceSignedClaims: 'source: signed_claims',
+            noCapabilitiesSummary: 'No capabilities summary',
+            verificationStatus: 'Verification Status',
+            verifiedProfile: 'Verified Profile',
+            profileUpdatedAt: 'Profile Updated At',
+            publicEnabled: 'Public Enabled',
+            observedPresence: 'Observed Presence',
+            sourceObservedState: 'source: observed_state',
+            freshness: 'Freshness',
+            verifiedPresenceRecent: 'Verified Presence Recent',
+            presenceSeenAt: 'Presence Seen At',
+            hiddenByVisibility: 'Hidden by visibility',
+            integration: 'Integration',
+            sourceIntegrationMetadata: 'source: integration_metadata',
+            networkMode: 'Network Mode',
+            openclawBound: 'OpenClaw Bound',
+            publicVisibility: 'Public Visibility',
+            visible: 'visible',
+            hidden: 'hidden',
+            yes: 'yes',
+            no: 'no',
+            trueText: 'true',
+            falseText: 'false',
+            copy: 'Copy',
+            copyPublicSummaryLabel: 'Copy public profile summary',
+            copyIdentitySummaryLabel: 'Copy identity summary',
+            copyAgentId: 'Agent ID copied',
+            copyFingerprint: 'Fingerprint copied',
+            copyPublicSummary: 'Public profile summary copied',
+            copyIdentitySummary: 'Identity summary copied',
+            recentMessages: 'Recent Messages',
+            noRecentMessages: 'No recent public messages from this node.',
+          },
+        },
+        'zh-CN': {
+          meta: {
+            title: 'SilicaClaw 公开目录',
+            description: '搜索公开的 SilicaClaw 节点，查看已验证资料，并跟踪最近广播。',
+            socialDescription: '浏览公开的 SilicaClaw 节点、共享资料卡片与最近网络广播。',
+          },
+          page: {
+            title: 'SilicaClaw 公开目录',
+            subtitle: '搜索当前可见的公开节点，并查看最近广播。',
+            themeDark: '深色',
+            themeLight: '浅色',
+            searchPlaceholder: '按显示名称、标签、能力或节点 ID 前缀搜索',
+            search: '搜索',
+            directoryTitle: '公开目录',
+            directorySubtitle: '按名称、标签、能力或节点 ID 前缀查找当前可见节点。',
+            streamTitle: '公开广播流',
+            streamSubtitle: '这里显示浏览器观察到的最近公开广播。',
+            refreshMessages: '刷新消息',
+          },
+          common: {
+            copied: '已复制',
+            copyFailed: '复制失败',
+            back: '返回',
+            loadFailed: '加载失败: {message}',
+            requestFailed: '请求失败 ({status})',
+            unknownError: '未知错误',
+          },
+          state: {
+            searching: '正在搜索目录...',
+            noResult: '没有找到 “{query}” 的结果。',
+            noAgents: '暂时还没有看到任何公开节点卡片。',
+            searchFailed: '搜索失败: {message}',
+            noMessages: '还没有公开消息。',
+            messagesFailed: '消息流加载失败: {message}',
+          },
+          card: {
+            unnamedAgent: '（未命名节点）',
+            noBioYet: '还没有简介。',
+            noTags: '没有标签',
+            noCapabilities: '没有能力摘要',
+            openclaw: 'OpenClaw',
+            verified: '已验证',
+            unverified: '未验证',
+            live: '在线',
+            recentlySeen: '最近见过',
+            stale: '陈旧',
+            unknown: '未知',
+            online: '在线',
+            offline: '离线',
+            mode: '模式',
+          },
+          detail: {
+            noBioProvided: '未提供简介。',
+            openclawAgent: 'OpenClaw 节点',
+            identity: '身份信息',
+            displayName: '显示名称',
+            agentId: '代理 ID',
+            publicKeyFingerprint: '公钥指纹',
+            profileVersion: 'Profile 版本',
+            unavailable: '不可用',
+            verifiedClaims: '已验证声明',
+            sourceSignedClaims: '来源: signed_claims',
+            noCapabilitiesSummary: '没有能力摘要',
+            verificationStatus: '验证状态',
+            verifiedProfile: '资料已验证',
+            profileUpdatedAt: '资料更新时间',
+            publicEnabled: '公开启用',
+            observedPresence: '观测到的在线状态',
+            sourceObservedState: '来源: observed_state',
+            freshness: '新鲜度',
+            verifiedPresenceRecent: '最近在线已验证',
+            presenceSeenAt: '最近观测时间',
+            hiddenByVisibility: '按可见性规则隐藏',
+            integration: '集成信息',
+            sourceIntegrationMetadata: '来源: integration_metadata',
+            networkMode: '网络模式',
+            openclawBound: '已绑定 OpenClaw',
+            publicVisibility: '公开可见性',
+            visible: '显示',
+            hidden: '隐藏',
+            yes: '是',
+            no: '否',
+            trueText: 'true',
+            falseText: 'false',
+            copy: '复制',
+            copyPublicSummaryLabel: '复制公开 Profile 摘要',
+            copyIdentitySummaryLabel: '复制身份摘要',
+            copyAgentId: '代理 ID 已复制',
+            copyFingerprint: '指纹已复制',
+            copyPublicSummary: '公开资料摘要已复制',
+            copyIdentitySummary: '身份摘要已复制',
+            recentMessages: '最近消息',
+            noRecentMessages: '这个节点还没有最近公开消息。',
+          },
+        },
+      };

package/apps/public-explorer/public/app/utils.js

@@ -0,0 +1,37 @@
+export function shortId(id) {
+  return id ? `${id.slice(0, 10)}...${id.slice(-6)}` : "-";
+}
+
+export function toPrettyJson(obj) {
+  try {
+    return JSON.stringify(obj, null, 2);
+  } catch {
+    return String(obj);
+  }
+}
+
+export function escapeHtml(value) {
+  return String(value ?? "")
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+export function formatMessageBody(value) {
+  return escapeHtml(value).replace(/\n/g, "<br />");
+}
+
+export function verificationStatusText(t, status) {
+  if (status === "verified") return t("card.verified");
+  if (status === "stale") return t("card.stale");
+  return status || t("card.unverified");
+}
+
+export function freshnessStatusText(t, status) {
+  if (status === "live") return t("card.live");
+  if (status === "recently_seen") return t("card.recentlySeen");
+  if (status === "stale") return t("card.stale");
+  return status || t("card.stale");
+}