import{i as e,n as t}from"./lit-BrYIQVuc.js";import{t as n}from"./string-coerce-CuNcS1Hz.js";import{G as r,R as i,d as a}from"./index-DDypcwfe.js";import{i as o,n as s,r as c,t as l}from"./skills-shared-Cl6n1FJQ.js";function u(e){return e?a(e,window.location.href):null}function d(e){!(e instanceof HTMLDialogElement)||e.open||(e.isConnected?e.showModal():queueMicrotask(()=>{e.isConnected&&!e.open&&e.showModal()}))}var f=[{id:`all`,label:`All`},{id:`ready`,label:`Ready`},{id:`needs-setup`,label:`Needs Setup`},{id:`disabled`,label:`Disabled`}];function p(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 m(e){return e.disabled?`muted`:e.eligible?`ok`:`warn`}function h(r){var i;let a=((i=r.report)==null?void 0:i.skills)??[],s={all:a.length,ready:0,"needs-setup":0,disabled:0};for(let e of a)e.disabled?s.disabled++:e.eligible?s.ready++:s[`needs-setup`]++;let c=r.statusFilter===`all`?a:a.filter(e=>p(e,r.statusFilter)),l=n(r.filter),u=l?c.filter(e=>n([e.name,e.description,e.source].join(` `)).includes(l)):c,d=o(u),m=r.detailKey?a.find(e=>e.skillKey===r.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=${r.loading||!r.connected}
          @click=${r.onRefresh}
        >
          ${r.loading?`加载中…`:`刷新`}
        </button>
      </div>

      <div class="agent-tabs" style="margin-top: 14px;">
        ${f.map(t=>e`
            <button
              class="agent-tab ${r.statusFilter===t.id?`active`:``}"
              @click=${()=>r.onStatusFilterChange(t.id)}
            >
              ${t.label}<span class="agent-tab-count">${s[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=${r.filter}
            @input=${e=>r.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=${r.clawhubQuery}
              @input=${e=>r.onClawHubQueryChange(e.target.value)}
              placeholder="Search ClawHub skills…"
              autocomplete="off"
              name="clawhub-search"
            />
          </label>
          ${r.clawhubSearchLoading?e`<span class="muted">Searching…</span>`:t}
        </div>
        ${r.clawhubSearchError?e`<div class="callout danger" style="margin-top: 8px;">
              ${r.clawhubSearchError}
            </div>`:t}
        ${r.clawhubInstallMessage?e`<div
              class="callout ${r.clawhubInstallMessage.kind===`error`?`danger`:`success`}"
              style="margin-top: 8px;"
            >
              ${r.clawhubInstallMessage.text}
            </div>`:t}
        ${g(r)}
      </div>

      ${r.error?e`<div class="callout danger" style="margin-top: 12px;">${r.error}</div>`:t}
      ${u.length===0?e`
            <div class="muted" style="margin-top: 16px">
              ${!r.connected&&!r.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=>v(e,r))}
                    </div>
                  </details>
                `)}
            </div>
          `}
    </section>

    ${m?y(m,r):t}
    ${r.clawhubDetailSlug?_(r):t}
  `}function g(n){let r=n.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=${()=>n.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>`:t}
              <button
                class="btn btn--sm"
                ?disabled=${n.clawhubInstallSlug!==null}
                @click=${e=>{e.stopPropagation(),n.onClawHubInstall(r.slug)}}
              >
                ${n.clawhubInstallSlug===r.slug?`Installing…`:`Install`}
              </button>
            </div>
          </div>
        `)}
    </div>
  `:t}function _(n){var i,a,o,s;let c=n.clawhubDetail;return e`
    <dialog
      class="md-preview-dialog"
      ${r(d)}
      @click=${e=>{let t=e.currentTarget;e.target===t&&t.close()}}
      @close=${n.onClawHubDetailClose}
    >
      <div class="md-preview-dialog__panel">
        <div class="md-preview-dialog__header">
          <div class="md-preview-dialog__title">
            ${(c==null||(i=c.skill)==null?void 0:i.displayName)??n.clawhubDetailSlug}
          </div>
          <button
            class="btn btn--sm"
            @click=${e=>{var t;(t=e.currentTarget.closest(`dialog`))==null||t.close()}}
          >
            Close
          </button>
        </div>
        <div class="md-preview-dialog__body" style="display: grid; gap: 16px;">
          ${n.clawhubDetailLoading?e`<div class="muted">${`加载中…`}</div>`:n.clawhubDetailError?e`<div class="callout danger">${n.clawhubDetailError}</div>`:c!=null&&c.skill?e`
                    <div style="font-size: 14px; line-height: 1.5;">
                      ${c.skill.summary??``}
                    </div>
                    ${(a=c.owner)!=null&&a.displayName?e`<div class="muted" style="font-size: 13px;">
                          By
                          ${c.owner.displayName}${c.owner.handle?e` (@${c.owner.handle})`:t}
                        </div>`:t}
                    ${c.latestVersion?e`<div class="muted" style="font-size: 13px;">
                          Latest: v${c.latestVersion.version}
                        </div>`:t}
                    ${(o=c.latestVersion)!=null&&o.changelog?e`<div
                          style="font-size: 13px; border-top: 1px solid var(--border); padding-top: 12px; white-space: pre-wrap;"
                        >
                          ${c.latestVersion.changelog}
                        </div>`:t}
                    ${(s=c.metadata)!=null&&s.os?e`<div class="muted" style="font-size: 12px;">
                          Platforms: ${c.metadata.os.join(`, `)}
                        </div>`:t}
                    <button
                      class="btn primary"
                      ?disabled=${n.clawhubInstallSlug!==null}
                      @click=${()=>{n.clawhubDetailSlug&&n.onClawHubInstall(n.clawhubDetailSlug)}}
                    >
                      ${n.clawhubInstallSlug===n.clawhubDetailSlug?`Installing…`:`Install ${c.skill.displayName}`}
                    </button>
                  `:e`<div class="muted">Skill not found.</div>`}
        </div>
      </div>
    </dialog>
  `}function v(n,r){let a=r.busyKey===n.skillKey;return e`
    <div class="list-item list-item-clickable" @click=${()=>r.onDetailOpen(n.skillKey)}>
      <div class="list-main">
        <div class="list-title" style="display: flex; align-items: center; gap: 8px;">
          <span class="statusDot ${m(n)}"></span>
          ${n.emoji?e`<span>${n.emoji}</span>`:t}
          <span>${n.name}</span>
        </div>
        <div class="list-sub">${i(n.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=${!n.disabled}
            ?disabled=${a}
            @change=${e=>{e.stopPropagation(),r.onToggle(n.skillKey,n.disabled)}}
          />
        </label>
      </div>
    </div>
  `}function y(n,i){let a=i.busyKey===n.skillKey,o=i.edits[n.skillKey]??``,f=i.messages[n.skillKey]??null,p=n.install.length>0&&n.missing.bins.length>0,h=!!(n.bundled&&n.source!==`openclaw-bundled`),g=l(n),_=s(n);return e`
    <dialog
      class="md-preview-dialog"
      ${r(d)}
      @click=${e=>{let t=e.currentTarget;e.target===t&&t.close()}}
      @close=${i.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 ${m(n)}"></span>
            ${n.emoji?e`<span style="font-size: 18px;">${n.emoji}</span>`:t}
            <span>${n.name}</span>
          </div>
          <button
            class="btn btn--sm"
            @click=${e=>{var t;(t=e.currentTarget.closest(`dialog`))==null||t.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);">
              ${n.description}
            </div>
            ${c({skill:n,showBundledBadge:h})}
          </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>
              `:t}
          ${_.length>0?e`
                <div class="muted" style="font-size: 13px;">Reason: ${_.join(`, `)}</div>
              `:t}

          <div style="display: flex; align-items: center; gap: 12px;">
            <label class="skill-toggle-wrap">
              <input
                type="checkbox"
                class="skill-toggle"
                .checked=${!n.disabled}
                ?disabled=${a}
                @change=${()=>i.onToggle(n.skillKey,n.disabled)}
              />
            </label>
            <span style="font-size: 13px; font-weight: 500;">
              ${n.disabled?`Disabled`:`Enabled`}
            </span>
            ${p?e`<button
                  class="btn"
                  ?disabled=${a}
                  @click=${()=>i.onInstall(n.skillKey,n.name,n.install[0].id)}
                >
                  ${a?`Installing…`:n.install[0].label}
                </button>`:t}
          </div>

          ${f?e`<div class="callout ${f.kind===`error`?`danger`:`success`}">
                ${f.message}
              </div>`:t}
          ${n.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;"
                        >(${n.primaryEnv})</span
                      ></span
                    >
                    <input
                      type="password"
                      .value=${o}
                      @input=${e=>i.onEdit(n.skillKey,e.target.value)}
                    />
                  </div>
                  ${(()=>{let r=u(n.homepage);return r?e`<div class="muted" style="font-size: 13px;">
                          Get your key:
                          <a href="${r}" target="_blank" rel="noopener noreferrer"
                            >${n.homepage}</a
                          >
                        </div>`:t})()}
                  <button
                    class="btn primary"
                    ?disabled=${a}
                    @click=${()=>i.onSaveKey(n.skillKey)}
                  >
                    Save key
                  </button>
                </div>
              `:t}

          <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> ${n.source}</div>
            <div style="font-family: var(--mono); word-break: break-all;">${n.filePath}</div>
            ${(()=>{let r=u(n.homepage);return r?e`<div>
                    <a href="${r}" target="_blank" rel="noopener noreferrer"
                      >${n.homepage}</a
                    >
                  </div>`:t})()}
          </div>
        </div>
      </div>
    </dialog>
  `}export{h as renderSkills};
//# sourceMappingURL=skills-DiiVVMTT.js.map