@pixelzx/genesis 2026.6.4 → 2026.6.5

package/dist/control-ui/assets/sessions-CHmx5D2H.js

@@ -0,0 +1,306 @@
+import{f as e,r as t,u as n}from"./i18n-BiXTtoQW.js";import{r,t as i}from"./string-coerce-LCfkQHEZ.js";import{u as a}from"./format-BvrOTETl.js";import{I as o,L as s,R as c,g as l,s as u}from"./index-YAwpI05T.js";var d=[`off`,`minimal`,`low`,`medium`,`high`],f=[{value:``,label:`inherit`},{value:`off`,label:`off (explicit)`},{value:`on`,label:`on`},{value:`full`,label:`full`}],p=[{value:``,label:`inherit`},{value:`on`,label:`on`},{value:`off`,label:`off`}],m=[``,`off`,`on`,`stream`],h=[10,25,50,100];function g(e){return c(e)??i(e)}function _(e){return[{value:``,label:`inherit`},...(e.thinkingLevels?.length?e.thinkingLevels:(e.thinkingOptions?.length?e.thinkingOptions:d).map(e=>({id:g(e),label:e}))).map(e=>({value:g(e.id),label:e.label}))]}function v(e,t){return!t||e.includes(t)?[...e]:[...e,t]}function y(e,t){return!t||e.some(e=>e.value===t)?[...e]:[...e,{value:t,label:`${t} (custom)`}]}function b(e){return e||null}function x(e,t){let n=i(t);return n?e.filter(e=>{let t=i(e.key),r=i(e.label),a=i(e.kind),o=i(e.displayName);return t.includes(n)||r.includes(n)||a.includes(n)||o.includes(n)}):e}function S(e,t,n){let r=n===`asc`?1:-1;return s(e,(e,n)=>{let i=0;switch(t){case`key`:i=(e.key??``).localeCompare(n.key??``);break;case`kind`:i=(e.kind??``).localeCompare(n.kind??``);break;case`updated`:i=(e.updatedAt??0)-(n.updatedAt??0);break;case`tokens`:i=(e.totalTokens??e.inputTokens??e.outputTokens??0)-(n.totalTokens??n.inputTokens??n.outputTokens??0);break}return i*r})}function C(e,t,n){let r=t*n;return e.slice(r,r+n)}function w(e){switch(e){case`manual`:return`manual`;case`auto-threshold`:return`auto-threshold`;case`overflow-retry`:return`overflow retry`;case`timeout-retry`:return`timeout retry`;default:return e}}function T(e){return typeof e.tokensBefore==`number`&&typeof e.tokensAfter==`number`&&Number.isFinite(e.tokensBefore)&&Number.isFinite(e.tokensAfter)?`${e.tokensBefore.toLocaleString()} → ${e.tokensAfter.toLocaleString()} tokens`:typeof e.tokensBefore==`number`&&Number.isFinite(e.tokensBefore)?`${e.tokensBefore.toLocaleString()} tokens before`:`token delta unavailable`}function E(r){let i=S(x(r.result?.sessions??[],r.searchQuery),r.sortColumn,r.sortDir),a=i.length,o=Math.max(1,Math.ceil(a/r.pageSize)),s=Math.min(r.page,o-1),c=C(i,s,r.pageSize),u=(t,n,i=``)=>{let a=r.sortColumn===t,o=a&&r.sortDir===`asc`?`desc`:`asc`;return e`
+      <th
+        class=${i}
+        data-sortable
+        data-sort-dir=${a?r.sortDir:``}
+        @click=${()=>r.onSortChange(t,a?o:`desc`)}
+      >
+        ${n}
+        <span class="data-table-sort-icon">${l.arrowUpDown}</span>
+      </th>
+    `};return e`
+    <section class="card">
+      <div class="row" style="justify-content: space-between; margin-bottom: 12px;">
+        <div>
+          <div class="card-title">Sessions</div>
+          <div class="card-sub">
+            ${r.result?`Store: ${r.result.path}`:`Active session keys and per-session overrides.`}
+          </div>
+        </div>
+        <button class="btn" ?disabled=${r.loading} @click=${r.onRefresh}>
+          ${r.loading?t(`common.loading`):t(`common.refresh`)}
+        </button>
+      </div>
+
+      <div class="filters" style="margin-bottom: 12px;">
+        <label class="field-inline">
+          <span>Active</span>
+          <input
+            style="width: 72px;"
+            placeholder="min"
+            .value=${r.activeMinutes}
+            @input=${e=>r.onFiltersChange({activeMinutes:e.target.value,limit:r.limit,includeGlobal:r.includeGlobal,includeUnknown:r.includeUnknown})}
+          />
+        </label>
+        <label class="field-inline">
+          <span>Limit</span>
+          <input
+            style="width: 64px;"
+            .value=${r.limit}
+            @input=${e=>r.onFiltersChange({activeMinutes:r.activeMinutes,limit:e.target.value,includeGlobal:r.includeGlobal,includeUnknown:r.includeUnknown})}
+          />
+        </label>
+        <label class="field-inline checkbox">
+          <input
+            type="checkbox"
+            .checked=${r.includeGlobal}
+            @change=${e=>r.onFiltersChange({activeMinutes:r.activeMinutes,limit:r.limit,includeGlobal:e.target.checked,includeUnknown:r.includeUnknown})}
+          />
+          <span>Global</span>
+        </label>
+        <label class="field-inline checkbox">
+          <input
+            type="checkbox"
+            .checked=${r.includeUnknown}
+            @change=${e=>r.onFiltersChange({activeMinutes:r.activeMinutes,limit:r.limit,includeGlobal:r.includeGlobal,includeUnknown:e.target.checked})}
+          />
+          <span>Unknown</span>
+        </label>
+      </div>
+
+      ${r.error?e`<div class="callout danger" style="margin-bottom: 12px;">${r.error}</div>`:n}
+
+      <div class="data-table-wrapper">
+        <div class="data-table-toolbar">
+          <div class="data-table-search">
+            <input
+              type="text"
+              placeholder="Filter by key, label, kind…"
+              .value=${r.searchQuery}
+              @input=${e=>r.onSearchChange(e.target.value)}
+            />
+          </div>
+        </div>
+
+        ${r.selectedKeys.size>0?e`
+              <div class="data-table-bulk-bar">
+                <span>${r.selectedKeys.size} selected</span>
+                <button class="btn btn--sm" @click=${r.onDeselectAll}>
+                  ${t(`common.unselect`)}
+                </button>
+                <button
+                  class="btn btn--sm danger"
+                  ?disabled=${r.loading}
+                  @click=${r.onDeleteSelected}
+                >
+                  ${l.trash} Delete
+                </button>
+              </div>
+            `:n}
+
+        <div class="data-table-container">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th class="data-table-checkbox-col">
+                  ${c.length>0?e`<input
+                        type="checkbox"
+                        .checked=${c.length>0&&c.every(e=>r.selectedKeys.has(e.key))}
+                        .indeterminate=${c.some(e=>r.selectedKeys.has(e.key))&&!c.every(e=>r.selectedKeys.has(e.key))}
+                        @change=${()=>{c.every(e=>r.selectedKeys.has(e.key))?r.onDeselectPage(c.map(e=>e.key)):r.onSelectPage(c.map(e=>e.key))}}
+                        aria-label="Select all on page"
+                      />`:n}
+                </th>
+                ${u(`key`,`Key`,`data-table-key-col`)}
+                <th>Label</th>
+                ${u(`kind`,`Kind`)} ${u(`updated`,`Updated`)}
+                ${u(`tokens`,`Tokens`)}
+                <th>Compaction</th>
+                <th>Thinking</th>
+                <th>Fast</th>
+                <th>Verbose</th>
+                <th>Reasoning</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${c.length===0?e`
+                    <tr>
+                      <td
+                        colspan="11"
+                        style="text-align: center; padding: 48px 16px; color: var(--muted)"
+                      >
+                        No sessions found.
+                      </td>
+                    </tr>
+                  `:c.flatMap(e=>D(e,r))}
+            </tbody>
+          </table>
+        </div>
+
+        ${a>0?e`
+              <div class="data-table-pagination">
+                <div class="data-table-pagination__info">
+                  ${s*r.pageSize+1}-${Math.min((s+1)*r.pageSize,a)}
+                  of ${a} row${a===1?``:`s`}
+                </div>
+                <div class="data-table-pagination__controls">
+                  <select
+                    style="height: 32px; padding: 0 8px; font-size: 13px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card);"
+                    .value=${String(r.pageSize)}
+                    @change=${e=>r.onPageSizeChange(Number(e.target.value))}
+                  >
+                    ${h.map(t=>e`<option value=${t}>${t} per page</option>`)}
+                  </select>
+                  <button ?disabled=${s<=0} @click=${()=>r.onPageChange(s-1)}>
+                    Previous
+                  </button>
+                  <button
+                    ?disabled=${s>=o-1}
+                    @click=${()=>r.onPageChange(s+1)}
+                  >
+                    Next
+                  </button>
+                </div>
+              </div>
+            `:n}
+      </div>
+    </section>
+  `}function D(i,s){let c=i.updatedAt?a(i.updatedAt):t(`common.na`),l=i.thinkingLevel??``,d=l?g(l):``,h=y(_(i),d),x=i.fastMode===!0?`on`:i.fastMode===!1?`off`:``,S=y(p,x),C=i.verboseLevel??``,E=y(f,C),D=i.reasoningLevel??``,O=v(m,D),k=i.latestCompactionCheckpoint,A=i.compactionCheckpointCount??0,j=s.expandedCheckpointKey===i.key,M=s.checkpointItemsByKey[i.key]??[],N=s.checkpointErrorByKey[i.key],P=r(i.displayName)??null,F=r(i.label)??``,I=!!(P&&P!==i.key&&P!==F),L=i.kind!==`global`,R=L?`${o(`chat`,s.basePath)}?session=${encodeURIComponent(i.key)}`:null,z=i.kind===`direct`?`data-table-badge--direct`:i.kind===`group`?`data-table-badge--group`:i.kind===`global`?`data-table-badge--global`:`data-table-badge--unknown`;return[e`<tr>
+      <td class="data-table-checkbox-col">
+        <input
+          type="checkbox"
+          .checked=${s.selectedKeys.has(i.key)}
+          @change=${()=>s.onToggleSelect(i.key)}
+          aria-label="Select session"
+        />
+      </td>
+      <td class="data-table-key-col">
+        <div class="mono session-key-cell">
+          ${L?e`<a
+                href=${R}
+                class="session-link"
+                @click=${e=>{e.defaultPrevented||e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||s.onNavigateToChat&&(e.preventDefault(),s.onNavigateToChat(i.key))}}
+                >${i.key}</a
+              >`:i.key}
+          ${I?e`<span class="muted session-key-display-name">${P}</span>`:n}
+        </div>
+      </td>
+      <td>
+        <input
+          .value=${i.label??``}
+          ?disabled=${s.loading}
+          placeholder="(optional)"
+          style="width: 100%; max-width: 140px; padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);"
+          @change=${e=>{let t=r(e.target.value)??null;s.onPatch(i.key,{label:t})}}
+        />
+      </td>
+      <td>
+        <span class="data-table-badge ${z}">${i.kind}</span>
+      </td>
+      <td>${c}</td>
+      <td>${u(i)}</td>
+      <td>
+        <div style="display: grid; gap: 6px;">
+          <span class="muted" style="font-size: 12px;">
+            ${A>0?`${A} checkpoint${A===1?``:`s`}`:`none`}
+          </span>
+          ${k?e`
+                <span style="font-size: 12px;">
+                  ${w(k.reason)} ·
+                  ${a(k.createdAt)}
+                </span>
+              `:n}
+          <button
+            class="btn btn--sm"
+            ?disabled=${s.checkpointLoadingKey===i.key}
+            @click=${()=>s.onToggleCheckpointDetails(i.key)}
+          >
+            ${j?`Hide checkpoints`:`Show checkpoints`}
+          </button>
+        </div>
+      </td>
+      <td>
+        <select
+          ?disabled=${s.loading}
+          style="padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 90px;"
+          @change=${e=>{let t=e.target.value;s.onPatch(i.key,{thinkingLevel:b(t)})}}
+        >
+          ${h.map(t=>e`<option value=${t.value} ?selected=${d===t.value}>
+                ${t.label}
+              </option>`)}
+        </select>
+      </td>
+      <td>
+        <select
+          ?disabled=${s.loading}
+          style="padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 90px;"
+          @change=${e=>{let t=e.target.value;s.onPatch(i.key,{fastMode:t===``?null:t===`on`})}}
+        >
+          ${S.map(t=>e`<option value=${t.value} ?selected=${x===t.value}>
+                ${t.label}
+              </option>`)}
+        </select>
+      </td>
+      <td>
+        <select
+          ?disabled=${s.loading}
+          style="padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 90px;"
+          @change=${e=>{let t=e.target.value;s.onPatch(i.key,{verboseLevel:t||null})}}
+        >
+          ${E.map(t=>e`<option value=${t.value} ?selected=${C===t.value}>
+                ${t.label}
+              </option>`)}
+        </select>
+      </td>
+      <td>
+        <select
+          ?disabled=${s.loading}
+          style="padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 90px;"
+          @change=${e=>{let t=e.target.value;s.onPatch(i.key,{reasoningLevel:t||null})}}
+        >
+          ${O.map(t=>e`<option value=${t} ?selected=${D===t}>
+                ${t||`inherit`}
+              </option>`)}
+        </select>
+      </td>
+    </tr>`,...j?[e`<tr>
+            <td colspan="11" style="padding: 0;">
+              <div
+                style="padding: 14px 16px; border-top: 1px solid var(--border); background: var(--surface-2, rgba(127, 127, 127, 0.05));"
+              >
+                ${s.checkpointLoadingKey===i.key?e`<div class="muted">Loading checkpoints…</div>`:N?e`<div class="callout danger">${N}</div>`:M.length===0?e`<div class="muted">
+                          No compaction checkpoints recorded for this session.
+                        </div>`:e`
+                          <div style="display: grid; gap: 10px;">
+                            ${M.map(t=>e`
+                                <div
+                                  style="border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; display: grid; gap: 8px;"
+                                >
+                                  <div
+                                    style="display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap;"
+                                  >
+                                    <strong>
+                                      ${w(t.reason)} ·
+                                      ${a(t.createdAt)}
+                                    </strong>
+                                    <span class="muted" style="font-size: 12px;">
+                                      ${T(t)}
+                                    </span>
+                                  </div>
+                                  ${t.summary?e`<div style="white-space: pre-wrap;">
+                                        ${t.summary}
+                                      </div>`:e`<div class="muted">No summary captured.</div>`}
+                                  <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+                                    <button
+                                      class="btn btn--sm"
+                                      ?disabled=${s.checkpointBusyKey===t.checkpointId}
+                                      @click=${()=>s.onBranchFromCheckpoint(i.key,t.checkpointId)}
+                                    >
+                                      Branch from checkpoint
+                                    </button>
+                                    <button
+                                      class="btn btn--sm"
+                                      ?disabled=${s.checkpointBusyKey===t.checkpointId}
+                                      @click=${()=>s.onRestoreCheckpoint(i.key,t.checkpointId)}
+                                    >
+                                      Restore
+                                    </button>
+                                  </div>
+                                </div>
+                              `)}
+                          </div>
+                        `}
+              </div>
+            </td>
+          </tr>`]:[]]}export{E as renderSessions};
+//# sourceMappingURL=sessions-CHmx5D2H.js.map

package/dist/control-ui/assets/skills-C-34EOwN.js

@@ -0,0 +1,323 @@
+import{f as e,r as t,u as n}from"./i18n-BiXTtoQW.js";import{t as r}from"./string-coerce-LCfkQHEZ.js";import{t as i}from"./format-BvrOTETl.js";import{p as a,y as o}from"./index-YAwpI05T.js";import{i as s,n as c,r as l,t as u}from"./skills-shared-BbxW-wNm.js";function d(e){return e?a(e,window.location.href):null}function f(e){!(e instanceof HTMLDialogElement)||e.open||queueMicrotask(()=>{!e.isConnected||e.open||e.showModal()})}var p=[{id:`all`,label:`All`},{id:`ready`,label:`Ready`},{id:`needs-setup`,label:`Needs Setup`},{id:`disabled`,label:`Disabled`}];function m(e,t){switch(t){case`all`:return!0;case`ready`:return!e.disabled&&e.eligible;case`needs-setup`:return!e.disabled&&!e.eligible;case`disabled`:return e.disabled}throw Error(`Unsupported skills status filter`)}function h(e){return e.disabled?`muted`:e.eligible?`ok`:`warn`}function g(i){let a=i.report?.skills??[],o={all:a.length,ready:0,"needs-setup":0,disabled:0};for(let e of a)e.disabled?o.disabled++:e.eligible?o.ready++:o[`needs-setup`]++;let c=i.statusFilter===`all`?a:a.filter(e=>m(e,i.statusFilter)),l=r(i.filter),u=l?c.filter(e=>r([e.name,e.description,e.source].join(` `)).includes(l)):c,d=s(u),f=i.detailKey?a.find(e=>e.skillKey===i.detailKey)??null:null;return e`
+    <section class="card">
+      <div class="row" style="justify-content: space-between;">
+        <div>
+          <div class="card-title">Skills</div>
+          <div class="card-sub">Installed skills and their status.</div>
+        </div>
+        <button
+          class="btn"
+          ?disabled=${i.loading||!i.connected}
+          @click=${i.onRefresh}
+        >
+          ${i.loading?t(`common.loading`):t(`common.refresh`)}
+        </button>
+      </div>
+
+      <div class="agent-tabs" style="margin-top: 14px;">
+        ${p.map(t=>e`
+            <button
+              class="agent-tab ${i.statusFilter===t.id?`active`:``}"
+              @click=${()=>i.onStatusFilterChange(t.id)}
+            >
+              ${t.label}<span class="agent-tab-count">${o[t.id]}</span>
+            </button>
+          `)}
+      </div>
+
+      <div
+        class="filters"
+        style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px;"
+      >
+        <label class="field" style="flex: 1; min-width: 180px;">
+          <input
+            .value=${i.filter}
+            @input=${e=>i.onFilterChange(e.target.value)}
+            placeholder="Filter installed skills"
+            autocomplete="off"
+            name="skills-filter"
+          />
+        </label>
+        <div class="muted">${u.length} shown</div>
+      </div>
+
+      <div style="margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px;">
+        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
+          <div style="font-weight: 600;">ClawHub</div>
+          <div class="muted" style="font-size: 13px;">
+            Search and install skills from the registry
+          </div>
+        </div>
+        <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
+          <label class="field" style="flex: 1; min-width: 180px;">
+            <input
+              .value=${i.clawhubQuery}
+              @input=${e=>i.onClawHubQueryChange(e.target.value)}
+              placeholder="Search ClawHub skills…"
+              autocomplete="off"
+              name="clawhub-search"
+            />
+          </label>
+          <button
+            class="btn btn--sm"
+            ?disabled=${!i.connected||i.clawhubSearchLoading}
+            @click=${()=>i.onClawHubQueryChange(``)}
+          >
+            Browse
+          </button>
+          ${i.clawhubSearchLoading?e`<span class="muted">Searching…</span>`:n}
+        </div>
+        ${i.clawhubSearchError?e`<div class="callout danger" style="margin-top: 8px;">
+              ${i.clawhubSearchError}
+            </div>`:n}
+        ${i.clawhubInstallMessage?e`<div
+              class="callout ${i.clawhubInstallMessage.kind===`error`?`danger`:`success`}"
+              style="margin-top: 8px;"
+            >
+              ${i.clawhubInstallMessage.text}
+            </div>`:n}
+        ${_(i)}
+      </div>
+
+      ${i.error?e`<div class="callout danger" style="margin-top: 12px;">${i.error}</div>`:n}
+      ${u.length===0?e`
+            <div class="muted" style="margin-top: 16px">
+              ${!i.connected&&!i.report?`Not connected to gateway.`:`No skills found.`}
+            </div>
+          `:e`
+            <div class="agent-skills-groups" style="margin-top: 16px;">
+              ${d.map(t=>e`
+                  <details class="agent-skills-group" open>
+                    <summary class="agent-skills-header">
+                      <span>${t.label}</span>
+                      <span class="muted">${t.skills.length}</span>
+                    </summary>
+                    <div class="list skills-grid">
+                      ${t.skills.map(e=>y(e,i))}
+                    </div>
+                  </details>
+                `)}
+            </div>
+          `}
+    </section>
+
+    ${f?b(f,i):n}
+    ${i.clawhubDetailSlug?v(i):n}
+  `}function _(t){let r=t.clawhubResults;return r?r.length===0?e`<div class="muted" style="margin-top: 8px;">No skills found on ClawHub.</div>`:e`
+    <div class="list" style="margin-top: 8px;">
+      ${r.map(r=>e`
+          <div
+            class="list-item list-item-clickable"
+            @click=${()=>t.onClawHubDetailOpen(r.slug)}
+          >
+            <div class="list-main">
+              <div class="list-title">${r.displayName}</div>
+              <div class="list-sub">${r.summary?i(r.summary,120):r.slug}</div>
+            </div>
+            <div class="list-meta" style="display: flex; align-items: center; gap: 8px;">
+              ${r.version?e`<span class="muted" style="font-size: 12px;">v${r.version}</span>`:n}
+              <button
+                class="btn btn--sm"
+                ?disabled=${t.clawhubInstallSlug!==null}
+                @click=${e=>{e.stopPropagation(),t.onClawHubInstall(r.slug)}}
+              >
+                ${t.clawhubInstallSlug===r.slug?`Installing…`:`Install`}
+              </button>
+            </div>
+          </div>
+        `)}
+    </div>
+  `:e`<div class="muted" style="margin-top: 8px;">
+      Search or browse ClawHub to install registry skills.
+    </div>`}function v(r){let i=r.clawhubDetail;return e`
+    <dialog
+      class="md-preview-dialog"
+      ${o(f)}
+      @click=${e=>{let t=e.currentTarget;e.target===t&&t.close()}}
+      @close=${r.onClawHubDetailClose}
+    >
+      <div class="md-preview-dialog__panel">
+        <div class="md-preview-dialog__header">
+          <div class="md-preview-dialog__title">
+            ${i?.skill?.displayName??r.clawhubDetailSlug}
+          </div>
+          <button
+            class="btn btn--sm"
+            @click=${e=>{e.currentTarget.closest(`dialog`)?.close()}}
+          >
+            Close
+          </button>
+        </div>
+        <div class="md-preview-dialog__body" style="display: grid; gap: 16px;">
+          ${r.clawhubDetailLoading?e`<div class="muted">${t(`common.loading`)}</div>`:r.clawhubDetailError?e`<div class="callout danger">${r.clawhubDetailError}</div>`:i?.skill?e`
+                    <div style="font-size: 14px; line-height: 1.5;">
+                      ${i.skill.summary??``}
+                    </div>
+                    ${i.owner?.displayName?e`<div class="muted" style="font-size: 13px;">
+                          By
+                          ${i.owner.displayName}${i.owner.handle?e` (@${i.owner.handle})`:n}
+                        </div>`:n}
+                    ${i.latestVersion?e`<div class="muted" style="font-size: 13px;">
+                          Latest: v${i.latestVersion.version}
+                        </div>`:n}
+                    ${i.latestVersion?.changelog?e`<div
+                          style="font-size: 13px; border-top: 1px solid var(--border); padding-top: 12px; white-space: pre-wrap;"
+                        >
+                          ${i.latestVersion.changelog}
+                        </div>`:n}
+                    ${i.metadata?.os?e`<div class="muted" style="font-size: 12px;">
+                          Platforms: ${i.metadata.os.join(`, `)}
+                        </div>`:n}
+                    <button
+                      class="btn primary"
+                      ?disabled=${r.clawhubInstallSlug!==null}
+                      @click=${()=>{r.clawhubDetailSlug&&r.onClawHubInstall(r.clawhubDetailSlug)}}
+                    >
+                      ${r.clawhubInstallSlug===r.clawhubDetailSlug?`Installing…`:`Install ${i.skill.displayName}`}
+                    </button>
+                  `:e`<div class="muted">Skill not found.</div>`}
+        </div>
+      </div>
+    </dialog>
+  `}function y(t,r){let a=r.busyKey===t.skillKey;return e`
+    <div class="list-item list-item-clickable" @click=${()=>r.onDetailOpen(t.skillKey)}>
+      <div class="list-main">
+        <div class="list-title" style="display: flex; align-items: center; gap: 8px;">
+          <span class="statusDot ${h(t)}"></span>
+          ${t.emoji?e`<span>${t.emoji}</span>`:n}
+          <span>${t.name}</span>
+        </div>
+        <div class="list-sub">${i(t.description,140)}</div>
+      </div>
+      <div
+        class="list-meta"
+        style="display: flex; align-items: center; justify-content: flex-end; gap: 10px;"
+      >
+        <label class="skill-toggle-wrap" @click=${e=>e.stopPropagation()}>
+          <input
+            type="checkbox"
+            class="skill-toggle"
+            .checked=${!t.disabled}
+            ?disabled=${a}
+            @change=${e=>{e.stopPropagation(),r.onToggle(t.skillKey,t.disabled)}}
+          />
+        </label>
+      </div>
+    </div>
+  `}function b(t,r){let i=r.busyKey===t.skillKey,a=r.edits[t.skillKey]??``,s=r.messages[t.skillKey]??null,p=t.install.length>0&&t.missing.bins.length>0,m=!!(t.bundled&&t.source!==`genesis-bundled`),g=u(t),_=c(t);return e`
+    <dialog
+      class="md-preview-dialog"
+      ${o(f)}
+      @click=${e=>{let t=e.currentTarget;e.target===t&&t.close()}}
+      @close=${r.onDetailClose}
+    >
+      <div class="md-preview-dialog__panel">
+        <div class="md-preview-dialog__header">
+          <div
+            class="md-preview-dialog__title"
+            style="display: flex; align-items: center; gap: 8px;"
+          >
+            <span class="statusDot ${h(t)}"></span>
+            ${t.emoji?e`<span style="font-size: 18px;">${t.emoji}</span>`:n}
+            <span>${t.name}</span>
+          </div>
+          <button
+            class="btn btn--sm"
+            @click=${e=>{e.currentTarget.closest(`dialog`)?.close()}}
+          >
+            Close
+          </button>
+        </div>
+        <div class="md-preview-dialog__body" style="display: grid; gap: 16px;">
+          <div>
+            <div style="font-size: 14px; line-height: 1.5; color: var(--text);">
+              ${t.description}
+            </div>
+            ${l({skill:t,showBundledBadge:m})}
+          </div>
+
+          ${g.length>0?e`
+                <div
+                  class="callout"
+                  style="border-color: var(--warn-subtle); background: var(--warn-subtle); color: var(--warn);"
+                >
+                  <div style="font-weight: 600; margin-bottom: 4px;">Missing requirements</div>
+                  <div>${g.join(`, `)}</div>
+                </div>
+              `:n}
+          ${_.length>0?e`
+                <div class="muted" style="font-size: 13px;">Reason: ${_.join(`, `)}</div>
+              `:n}
+
+          <div style="display: flex; align-items: center; gap: 12px;">
+            <label class="skill-toggle-wrap">
+              <input
+                type="checkbox"
+                class="skill-toggle"
+                .checked=${!t.disabled}
+                ?disabled=${i}
+                @change=${()=>r.onToggle(t.skillKey,t.disabled)}
+              />
+            </label>
+            <span style="font-size: 13px; font-weight: 500;">
+              ${t.disabled?`Disabled`:`Enabled`}
+            </span>
+            ${p?e`<button
+                  class="btn"
+                  ?disabled=${i}
+                  @click=${()=>r.onInstall(t.skillKey,t.name,t.install[0].id)}
+                >
+                  ${i?`Installing…`:t.install[0].label}
+                </button>`:n}
+          </div>
+
+          ${s?e`<div class="callout ${s.kind===`error`?`danger`:`success`}">
+                ${s.message}
+              </div>`:n}
+          ${t.primaryEnv?e`
+                <div style="display: grid; gap: 8px;">
+                  <div class="field">
+                    <span
+                      >API key
+                      <span class="muted" style="font-weight: normal; font-size: 0.88em;"
+                        >(${t.primaryEnv})</span
+                      ></span
+                    >
+                    <input
+                      type="password"
+                      .value=${a}
+                      @input=${e=>r.onEdit(t.skillKey,e.target.value)}
+                    />
+                  </div>
+                  ${(()=>{let r=d(t.homepage);return r?e`<div class="muted" style="font-size: 13px;">
+                          Get your key:
+                          <a href="${r}" target="_blank" rel="noopener noreferrer"
+                            >${t.homepage}</a
+                          >
+                        </div>`:n})()}
+                  <button
+                    class="btn primary"
+                    ?disabled=${i}
+                    @click=${()=>r.onSaveKey(t.skillKey)}
+                  >
+                    Save key
+                  </button>
+                </div>
+              `:n}
+
+          <div
+            style="border-top: 1px solid var(--border); padding-top: 12px; display: grid; gap: 6px; font-size: 12px; color: var(--muted);"
+          >
+            <div><span style="font-weight: 600;">Source:</span> ${t.source}</div>
+            <div style="font-family: var(--mono); word-break: break-all;">${t.filePath}</div>
+            ${(()=>{let r=d(t.homepage);return r?e`<div>
+                    <a href="${r}" target="_blank" rel="noopener noreferrer"
+                      >${t.homepage}</a
+                    >
+                  </div>`:n})()}
+          </div>
+        </div>
+      </div>
+    </dialog>
+  `}export{g as renderSkills};
+//# sourceMappingURL=skills-C-34EOwN.js.map

package/dist/control-ui/assets/skills-shared-BbxW-wNm.js

@@ -0,0 +1,11 @@
+import{f as e,u as t}from"./i18n-BiXTtoQW.js";var n=[{id:`workspace`,label:`Workspace Skills`,sources:[`genesis-workspace`]},{id:`built-in`,label:`Built-in Skills`,sources:[`genesis-bundled`]},{id:`installed`,label:`Installed Skills`,sources:[`genesis-managed`]},{id:`extra`,label:`Extra Skills`,sources:[`genesis-extra`]}];function r(e){let t=new Map;for(let e of n)t.set(e.id,{id:e.id,label:e.label,skills:[]});let r=n.find(e=>e.id===`built-in`),i={id:`other`,label:`Other Skills`,skills:[]};for(let a of e){let e=a.bundled?r:n.find(e=>e.sources.includes(a.source));e?t.get(e.id)?.skills.push(a):i.skills.push(a)}let a=n.map(e=>t.get(e.id)).filter(e=>!!(e&&e.skills.length>0));return i.skills.length>0&&a.push(i),a}function i(e){return[...e.missing.bins.map(e=>`bin:${e}`),...e.missing.env.map(e=>`env:${e}`),...e.missing.config.map(e=>`config:${e}`),...e.missing.os.map(e=>`os:${e}`)]}function a(e){let t=[];return e.disabled&&t.push(`disabled`),e.blockedByAllowlist&&t.push(`blocked by allowlist`),t}function o(n){let r=n.skill,i=!!n.showBundledBadge;return e`
+    <div class="chip-row" style="margin-top: 6px;">
+      <span class="chip">${r.source}</span>
+      ${i?e` <span class="chip">bundled</span> `:t}
+      <span class="chip ${r.eligible?`chip-ok`:`chip-warn`}">
+        ${r.eligible?`eligible`:`blocked`}
+      </span>
+      ${r.disabled?e` <span class="chip chip-warn">disabled</span> `:t}
+    </div>
+  `}export{r as i,a as n,o as r,i as t};
+//# sourceMappingURL=skills-shared-BbxW-wNm.js.map