{% extends "base.html" %}
{% block title %}Playground — Ageri{% endblock %}

{% block head %}
<!-- Ace editor — single-script CDN load. v2.C tier 2.
     Version pinned to 1.32.0; no SRI to match the existing tailwind/
     alpine/htmx pattern. -->
<script src="https://cdn.jsdelivr.net/npm/ace-builds@1.32.0/src-min-noconflict/ace.js"></script>
<style>
  .skill-row {
    transition: background-color 0.12s, border-color 0.12s;
  }
  .skill-row:hover:not(.selected) {
    background-color: rgba(255,255,255,0.03);
  }
  .skill-row.selected {
    background-color: rgb(var(--color-accent) / 0.10);
    border-color: rgb(var(--color-accent) / 0.5);
  }
  .file-tab {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    color: #94a3b8;
    transition: background-color 0.12s, color 0.12s;
  }
  .file-tab.active {
    background-color: rgb(var(--color-accent) / 0.18);
    color: #fff;
  }
  .file-tab:not(.active):hover {
    background-color: rgba(255,255,255,0.05);
    color: #e2e8f0;
  }
  pre.source-view {
    background: rgb(var(--color-panel));
    border: 1px solid rgb(var(--color-border));
    border-radius: 8px;
    padding: 12px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: #cbd5e1;
    overflow: auto;
    max-height: 480px;
    line-height: 1.5;
    white-space: pre;
  }
  .cli-snippet {
    background: rgb(var(--color-panel));
    border: 1px solid rgb(var(--color-border));
    border-radius: 6px;
    padding: 8px 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: #cbd5e1;
    overflow-x: auto;
    white-space: pre;
  }
  .manifest-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 4px 12px;
    padding: 4px 0;
    border-bottom: 1px solid rgb(var(--color-border) / 0.4);
    font-size: 12px;
  }
  .manifest-row:last-child { border-bottom: none; }
  .manifest-key { color: #94a3b8; font-weight: 500; }
  .manifest-val { color: #e2e8f0; word-break: break-word; }
</style>
{% endblock %}

{% block body %}
<div
  class="min-h-screen"
  x-data="playgroundPage()"
  x-init="init()"
>

  <!-- ── Top bar ─────────────────────────────────────────────────────────── -->
  <div class="sticky top-0 z-30 bg-surface/95 backdrop-blur border-b border-border">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 flex items-center gap-4 h-14">
      <a href="/"
        class="flex items-center gap-1.5 text-slate-400 hover:text-white transition-colors text-sm shrink-0"
        title="Back to your agents">
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
        </svg>
        <span class="hidden sm:inline">Back</span>
      </a>
      <div class="w-px h-5 bg-border shrink-0"></div>
      <span class="text-white font-semibold text-sm shrink-0">Playground</span>
      <span class="text-xs text-slate-500 hidden md:inline">Local authoring workspace</span>
      <div class="flex-1"></div>
      <button
        type="button"
        @click="openPublisherModal()"
        class="px-3 py-1.5 text-sm font-medium text-green-300 border border-green-500/40 rounded-lg hover:bg-green-500/10 hover:border-green-500/70 transition-colors"
        :title="publisherStatus.registered
          ? 'Publish a tagged version to the marketplace'
          : 'Register a marketplace namespace + publish your skills'"
      >
        <span x-show="!publisherStatus.registered">Become a skill publisher ›</span>
        <span x-show="publisherStatus.registered">Publish a version ›</span>
      </button>
      <button
        type="button"
        @click="openCreateModal()"
        class="px-3 py-1.5 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent/90 transition-colors"
      >
        + New skill
      </button>
    </div>
  </div>

  {% with active='playground' %}{% include "_skills_nav.html" %}{% endwith %}

  <!-- ── Main two-pane layout ────────────────────────────────────────────── -->
  <div class="max-w-6xl mx-auto px-4 sm:px-6 py-6">

    <!-- Purpose blurb — first-run users need to know what this surface
         is FOR. Otherwise they confuse it with the marketplace. -->
    <div class="mb-5 flex items-start gap-3 p-4 bg-accent/8 border border-accent/20 rounded-xl">
      <div class="text-xl shrink-0 mt-0.5">🛠️</div>
      <div class="flex-1 min-w-0">
        <p class="text-sm font-semibold text-white mb-0.5">Author your own skills here</p>
        <p class="text-xs text-slate-300 leading-relaxed">
          The Playground is where you create new skills — describe what you want, demonstrate a workflow,
          import from GitHub, or write code by hand. Once it works, <b class="text-accent">pack + publish</b>
          to share it with others on the
          <a href="/skills" class="text-accent hover:underline">Marketplace</a>.
        </p>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-[300px_1fr] gap-6">

      <!-- ── Left: skill index ──────────────────────────────────────────── -->
      <div>
        <div class="flex items-center justify-between mb-3">
          <h2 class="text-sm font-semibold text-white">Local skills</h2>
          <button
            type="button"
            @click="loadSkills()"
            :disabled="loadingList"
            class="text-xs text-slate-400 hover:text-slate-200"
          >
            <span x-show="!loadingList">↻ Refresh</span>
            <span x-show="loadingList">Loading...</span>
          </button>
        </div>

        <template x-if="!loadingList && skills.length === 0">
          <div class="border border-dashed border-border rounded-lg p-5 text-center">
            <p class="text-xs text-slate-500 mb-3">
              No local skills yet.
            </p>
            <button
              type="button"
              @click="openCreateModal()"
              class="text-xs text-accent hover:underline"
            >
              Create your first one →
            </button>
          </div>
        </template>

        <div class="space-y-1.5">
          <template x-for="s in skills" :key="s.id">
            <button
              type="button"
              @click="selectSkill(s.id)"
              class="skill-row w-full text-left bg-panel border border-border rounded-lg px-3 py-2.5"
              :class="selectedId === s.id ? 'selected' : ''"
            >
              <div class="flex items-baseline justify-between gap-2">
                <p class="text-sm font-medium text-white truncate" x-text="s.name"></p>
                <span class="text-[10px] text-slate-500 shrink-0" x-text="s.version || ''"></span>
              </div>
              <p class="text-[11px] text-slate-500 mt-0.5 truncate" x-text="s.id"></p>
              <div class="flex items-center gap-2 mt-1">
                <template x-if="s.state">
                  <span class="text-[10px] px-1.5 py-0.5 rounded uppercase font-medium"
                    :class="{
                      'bg-amber-500/15 text-amber-300': s.state === 'draft',
                      'bg-slate-500/15 text-slate-400': s.state === 'ready',
                      'bg-teal-500/15 text-teal-300':   s.state === 'installed',
                      'bg-green-500/15 text-green-300': s.state === 'published',
                    }"
                    x-text="s.state"></span>
                </template>
                <template x-if="s.has_provenance">
                  <span class="text-[10px] text-teal/80">↩ imported</span>
                </template>
              </div>
            </button>
          </template>
        </div>
      </div>

      <!-- ── Right: detail panel ────────────────────────────────────────── -->
      <div>

        <template x-if="!selectedId">
          <div class="border border-dashed border-border rounded-2xl p-10 text-center">
            <svg class="w-10 h-10 text-slate-600 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/>
            </svg>
            <p class="text-sm text-slate-400">
              Pick a skill on the left to inspect it,<br>
              or create a new one.
            </p>
          </div>
        </template>

        <template x-if="selectedId && loadingDetail">
          <div class="text-center py-12 text-sm text-slate-500">Loading...</div>
        </template>

        <template x-if="selectedId && !loadingDetail && detail">
          <div class="space-y-4">

            <!-- Header: state badge + editable name/description + actions -->
            <div class="bg-panel border border-border rounded-2xl p-5">

              <!-- Top row: state badge + id + version dropdown + actions.
                   Version dropdown follows the GitHub branch/tag picker pattern:
                   snapshot (default, editable) + each tagged version. Selecting
                   a tag reloads the right pane in read-only mode. -->
              <div class="flex items-start justify-between gap-3 mb-4">
                <div class="flex items-center gap-2 flex-wrap min-w-0">
                  <!-- State badge — Draft / Ready / Installed / Published -->
                  <span class="px-2 py-0.5 text-[10px] font-medium rounded uppercase"
                    :class="{
                      'bg-amber-500/15 text-amber-300': detail.state === 'draft',
                      'bg-slate-500/15 text-slate-300': detail.state === 'ready',
                      'bg-teal-500/15 text-teal-300':   detail.state === 'installed',
                      'bg-green-500/15 text-green-300': detail.state === 'published',
                    }"
                    x-text="detail.state || 'draft'"></span>
                  <span class="text-xs text-slate-500 truncate" x-text="detail.id"></span>

                  <!-- Version picker: shown when versions API returned anything
                       beyond legacy single-dir layouts. Even an empty-tag-list
                       family is shown so the user knows snapshot is editable. -->
                  <template x-if="availableVersions && (availableVersions.snapshot || (availableVersions.tags || []).length > 0)">
                    <div class="flex items-center gap-1.5">
                      <span class="text-[11px] text-slate-500">version</span>
                      <select
                        x-model="selectedVersion"
                        @change="selectedVersion = $event.target.value; onVersionChange()"
                        x-effect="$nextTick(() => { if ($el.value !== selectedVersion && selectedVersion) $el.value = selectedVersion; })"
                        class="px-2 py-0.5 text-xs bg-surface border border-border rounded text-slate-200 font-mono focus:border-accent/60"
                      >
                        <template x-if="availableVersions.snapshot">
                          <option value="snapshot" x-text="'snapshot (' + (availableVersions.snapshot.version || '?') + ')'"></option>
                        </template>
                        <template x-for="t in (availableVersions.tags || [])" :key="t.version">
                          <option :value="t.version"
                            x-text="t.version + (t.active ? ' · active' : '') + (t.published ? ' · published' : '')">
                          </option>
                        </template>
                      </select>
                      <template x-if="!detail.is_snapshot">
                        <span class="text-[10px] text-amber-300/80 uppercase tracking-wide" title="Tagged versions are frozen — switch back to snapshot to edit.">read-only</span>
                      </template>
                    </div>
                  </template>
                </div>
                <div class="flex items-center gap-2 shrink-0">
                  <button type="button" @click="confirmRemove()"
                    :disabled="removing"
                    class="px-2.5 py-1 text-[11px] font-medium text-red-300 border border-red-500/30 rounded
                           hover:bg-red-500/10 hover:border-red-500/60 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                    title="Remove this skill family from local/ — wipes snapshot AND all tagged versions"
                  >
                    <span x-show="!removing">Remove</span>
                    <span x-show="removing">Removing…</span>
                  </button>
                </div>
              </div>

              <!-- Inline-editable name (saves on blur if changed).
                   Disabled when viewing a tagged version — tags are frozen. -->
              <label class="text-[11px] text-slate-500 block mb-1">Skill name</label>
              <input type="text"
                x-model="metaForm.name"
                @blur="saveMetadataIfDirty()"
                @keydown.enter.prevent="$event.target.blur()"
                :disabled="!detail.writable"
                placeholder="A short, friendly title"
                :class="!detail.writable ? 'cursor-not-allowed opacity-70' : ''"
                class="w-full text-lg font-semibold text-white bg-surface border border-border rounded px-3 py-1.5 mb-3 focus:border-accent/60">

              <!-- Inline-editable description -->
              <label class="text-[11px] text-slate-500 block mb-1">Description</label>
              <textarea
                x-model="metaForm.description"
                @blur="saveMetadataIfDirty()"
                :disabled="!detail.writable"
                rows="2"
                placeholder="One sentence — what does this skill do?"
                :class="!detail.writable ? 'cursor-not-allowed opacity-70' : ''"
                class="w-full text-sm text-slate-200 bg-surface border border-border rounded px-3 py-1.5 focus:border-accent/60 leading-relaxed"></textarea>

              <template x-if="metaSaveError">
                <p class="text-xs text-amber-400 mt-2" x-text="metaSaveError"></p>
              </template>
              <template x-if="metaSaving">
                <p class="text-[11px] text-slate-500 mt-2">Saving changes…</p>
              </template>

              <template x-if="detail.manifest_error">
                <div class="text-xs text-amber-400 mt-3 p-2 bg-amber-500/10 border border-amber-500/30 rounded">
                  <b>Draft — manifest needs fixing:</b> <span x-text="detail.manifest_error"></span>
                </div>
              </template>

              <template x-if="removeError">
                <p class="text-xs text-amber-400 mt-3" x-text="removeError"></p>
              </template>

              <!-- Snapshot-only action row: freeze the current snapshot
                   as a new installable version. On a tag, this is replaced
                   by the per-version Install/Uninstall/Publish row below. -->
              <div x-show="detail.is_snapshot" x-cloak
                class="flex flex-wrap items-center gap-2 mt-4 pt-3 border-t border-border/40">
                <button type="button"
                  @click="openTagModal()"
                  :disabled="!!detail.manifest_error"
                  class="px-3 py-1.5 text-sm font-medium bg-accent text-white rounded-lg
                         hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                  :title="detail.manifest_error
                    ? 'Fix the manifest before creating an installable version — skill.json is invalid'
                    : 'Freeze the current snapshot as a new installable version'"
                >Install as a new version ›</button>
                <span class="text-[11px] text-slate-500">
                  Snapshot is the editable working copy — create a version to make it installable.
                </span>
              </div>

              <!-- Action row — state-driven, AND only shown when viewing a
                   tagged version (5E.2). On `snapshot/`, Install / Uninstall /
                   Publish don't apply — the snapshot is the editable working
                   copy. Per-version actions live here for the selected tag. -->
              <div x-show="!detail.is_snapshot" x-cloak
                class="flex flex-wrap items-center gap-2 mt-4 pt-3 border-t border-border/40">

                <!-- Install — visible only in Ready state (i.e. this tag
                     is not the currently active one and isn't published).
                     Wording stays version-agnostic so the user reads
                     consistently when switching among tagged versions —
                     the version they're acting on is shown in the dropdown. -->
                <template x-if="detail.state === 'ready'">
                  <button type="button"
                    @click="installFromPlayground()"
                    :disabled="installing"
                    class="px-3 py-1.5 text-sm font-medium bg-accent text-white rounded-lg
                           hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                    :title="'Install ' + detail.version + ' — sets it as the active version. Restart Ageri to load it.'"
                  >
                    <span x-show="!installing">Install this version</span>
                    <span x-show="installing">Installing…</span>
                  </button>
                </template>

                <!-- Installed indicator -->
                <template x-if="detail.state === 'installed' || detail.state === 'published'">
                  <span class="text-[11px] text-teal-300">
                    ✓ Active version
                    <span x-show="detail.state_detail && detail.state_detail.installed_version"
                      class="text-slate-500 ml-1 font-mono"
                      x-text="detail.state_detail.installed_version"></span>
                  </span>
                </template>

                <!-- Uninstall — clears _active.txt. Source dirs (snapshot,
                     all tags) stay on disk. Only shown when this tag IS
                     the active one. -->
                <template x-if="detail.state === 'installed'">
                  <button type="button"
                    @click="uninstallFromPlayground()"
                    :disabled="installing"
                    class="px-3 py-1.5 text-sm font-medium text-red-300 border border-red-500/30 rounded-lg
                           hover:text-red-200 hover:border-red-500/60 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                    title="Clear _active.txt — source stays, agents stop seeing this skill on next restart"
                  >
                    <span x-show="!installing">Uninstall</span>
                    <span x-show="installing">Uninstalling…</span>
                  </button>
                </template>

                <!-- Publish to marketplace — opens the publisher modal
                     with this (skill, version) pre-selected. If the user
                     is not yet a publisher, the modal lands on the
                     registration screen first; on success it falls
                     through to the picker with this skill+version
                     already filled in. -->
                <template x-if="detail.state === 'installed'">
                  <button type="button"
                    @click="openPublisherModal({skill_id: detail.id, version: detail.version})"
                    class="px-3 py-1.5 text-sm font-medium bg-green-500/15 text-green-300 border border-green-500/30 rounded-lg
                           hover:bg-green-500/25 hover:border-green-500/60 transition-colors"
                    title="Publish this version to the marketplace"
                  >Publish to marketplace ›</button>
                </template>

                <!-- Export .ags — 5E.6a sideload path. Pack the tag dir
                     into a .ags file the user downloads, hands to a
                     friend, and they import via the playground's Import
                     modal. The recipient's /installed page renders it
                     with a SIDELOADED pill so they know it didn't come
                     from the marketplace. Available on any tag with
                     a valid manifest (state !== draft) — not just
                     installed ones, so a publisher can hand around
                     specific releases without making them the active
                     version locally. -->
                <template x-if="!detail.is_snapshot && detail.state !== 'draft'">
                  <a :href="'/api/skills/playground/local/' + encodeURIComponent(detail.id) + '/export?version=' + encodeURIComponent(detail.version)"
                    class="px-3 py-1.5 text-sm font-medium text-slate-300 border border-border rounded-lg hover:text-white hover:border-slate-500 transition-colors"
                    :title="'Download .ags for ' + detail.version + ' — share offline; recipient imports + sees a sideloaded pill'"
                  >Export .ags ↓</a>
                </template>

                <!-- Restore to snapshot — 5E.7 recovery path.
                     Copies this tag's files OVER the current snapshot/,
                     bumps the snapshot's manifest version to
                     <bump_patch(tag)>-snapshot. Tag stays read-only +
                     untouched. Confirms before overwriting because the
                     current snapshot's state is lost. Available on any
                     tag with a valid manifest. -->
                <template x-if="!detail.is_snapshot && detail.state !== 'draft'">
                  <button type="button"
                    @click="restoreToSnapshot()"
                    :disabled="installing"
                    class="px-3 py-1.5 text-sm font-medium text-slate-300 border border-border rounded-lg
                           hover:text-white hover:border-slate-500 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                    title="Copy this tag's files over your current snapshot — recovery path when the snapshot is broken"
                  >
                    <span x-show="!installing">↺ Restore to snapshot</span>
                    <span x-show="installing">Restoring…</span>
                  </button>
                </template>

                <!-- Published indicator -->
                <template x-if="detail.state === 'published'">
                  <span class="text-[11px] text-green-300">
                    ✓ Published
                    <span x-show="detail.state_detail && detail.state_detail.marketplace_uri"
                      class="text-slate-500 ml-1"
                      x-text="detail.state_detail.marketplace_uri"></span>
                  </span>
                </template>

                <!-- Unpublish (yank) — 5E.6b. Removes the listing from
                     the marketplace + drops the local publish marker.
                     Marketplace-unreachable → refuse (single source of
                     truth, per the local-versioning memo decision 1).
                     After yank, the version number is dead — user must
                     tag a new version to ship again. -->
                <template x-if="detail.state === 'published'">
                  <button type="button"
                    @click="unpublishFromPlayground()"
                    :disabled="installing"
                    class="px-3 py-1.5 text-sm font-medium text-amber-300 border border-amber-500/30 rounded-lg
                           hover:text-amber-200 hover:border-amber-500/60 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                    title="Yank this version from the marketplace. The version number is permanently dead afterward — bump for the next release."
                  >
                    <span x-show="!installing">Unpublish</span>
                    <span x-show="installing">Unpublishing…</span>
                  </button>
                </template>

                <!-- Restart-needed hint after Install -->
                <span x-show="installResult"
                  class="text-[11px] text-amber-300 ml-1" x-text="installResult"></span>
              </div>
            </div>

            <!-- Provenance -->
            <template x-if="detail.provenance">
              <div class="bg-panel border border-border rounded-2xl p-5">
                <div class="flex items-baseline justify-between mb-3">
                  <h2 class="text-sm font-semibold text-white">Imported from</h2>
                  <span class="text-[10px] text-slate-500" x-text="(detail.provenance.imported_at || '').slice(0, 16).replace('T', ' ')"></span>
                </div>
                <div class="space-y-1">
                  <div class="manifest-row">
                    <div class="manifest-key">git_url</div>
                    <div class="manifest-val text-xs"><code x-text="detail.provenance.source && detail.provenance.source.git_url"></code></div>
                  </div>
                  <div class="manifest-row" x-show="detail.provenance.source && detail.provenance.source.ref">
                    <div class="manifest-key">ref</div>
                    <div class="manifest-val text-xs"><code x-text="detail.provenance.source && detail.provenance.source.ref"></code></div>
                  </div>
                  <div class="manifest-row" x-show="detail.provenance.source && detail.provenance.source.commit_sha">
                    <div class="manifest-key">commit</div>
                    <div class="manifest-val text-xs"><code x-text="(detail.provenance.source.commit_sha || '').slice(0, 12)"></code></div>
                  </div>
                </div>
                <div class="mt-3 pt-3 border-t border-border/60">
                  <p class="text-[11px] text-slate-500 mb-1.5">Refresh from source:</p>
                  <div class="cli-snippet" x-text="'python -m ageri skill update ' + detail.id"></div>
                </div>
              </div>
            </template>

            <!-- Manifest summary -->
            <template x-if="detail.manifest">
              <div class="bg-panel border border-border rounded-2xl p-5">
                <h2 class="text-sm font-semibold text-white mb-3">Manifest</h2>
                <div class="space-y-1">
                  <template x-for="row in manifestRows" :key="row.key">
                    <div class="manifest-row">
                      <div class="manifest-key" x-text="row.key"></div>
                      <div class="manifest-val" x-text="row.val"></div>
                    </div>
                  </template>
                </div>
              </div>
            </template>

            <!-- Files — dropdown picker so 200+ files don't blow out
                 the layout. Aggressive server-side filter drops
                 node_modules / browser_profiles / .venv / __pycache__
                 so the list shows only actual source files. -->
            <div class="bg-panel border border-border rounded-2xl p-5">
              <div class="flex items-baseline justify-between mb-3">
                <h2 class="text-sm font-semibold text-white">Files</h2>
                <span class="text-[10px] text-slate-500">
                  <span x-text="(detail.files || []).length + ' file' + ((detail.files || []).length === 1 ? '' : 's')"></span>
                  <span x-show="detail.files_truncated" class="text-amber-400" title="More than 200 source files in this skill — listing capped.">
                    (truncated)
                  </span>
                </span>
              </div>
              <template x-if="(detail.files || []).length === 0">
                <p class="text-xs text-slate-500">No source files indexed.</p>
              </template>
              <div class="flex flex-wrap items-center gap-2 mb-3" x-show="(detail.files || []).length > 0">
                <!-- Why x-model + watcher (and not :value=...@change): Alpine's
                     :value binding on a <select> with x-for-rendered options
                     fires before the options exist in the DOM, so the browser
                     keeps the first option visually selected. Result: dropdown
                     showed boss.py while editor loaded skill.json. x-model
                     binds reactively, and x-effect re-syncs the displayed
                     option after x-for renders. -->
                <select
                  x-model="currentFile"
                  @change="openFile(currentFile)"
                  x-effect="$nextTick(() => { if ($el.value !== currentFile && currentFile) $el.value = currentFile; })"
                  class="flex-1 min-w-0 px-2.5 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60 font-mono"
                >
                  <template x-for="f in detail.files" :key="f">
                    <option :value="f" x-text="f + (dirtyFiles[f] ? ' •' : '')"></option>
                  </template>
                </select>
                <button type="button" @click="saveCurrentFile()"
                  :disabled="!currentFile || !dirtyFiles[currentFile] || saving || !detail.writable"
                  class="px-2.5 py-1 text-[11px] font-medium bg-accent text-white rounded
                         hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                  :title="detail.writable ? 'Save the current file' : 'Tagged versions are read-only — switch to snapshot to edit'"
                >
                  <span x-show="!saving">Save</span>
                  <span x-show="saving">Saving...</span>
                </button>
                <button type="button" @click="revertCurrentFile()"
                  :disabled="!currentFile || !dirtyFiles[currentFile] || saving || !detail.writable"
                  class="px-2.5 py-1 text-[11px] font-medium text-slate-400 hover:text-white disabled:opacity-40 disabled:cursor-not-allowed"
                  title="Discard unsaved changes in this file"
                >Revert</button>
              </div>

              <template x-if="loadingFile">
                <p class="text-xs text-slate-500 py-4">Loading file...</p>
              </template>
              <template x-if="fileError">
                <p class="text-xs text-amber-400 py-2" x-text="fileError"></p>
              </template>

              <!-- Manifest validation errors from the server (skill.json only). -->
              <template x-if="manifestSaveErrors.length > 0">
                <div class="bg-amber-500/10 border border-amber-500/30 rounded-lg p-3 mb-2">
                  <p class="text-xs text-amber-300 font-medium mb-1">Manifest invalid — not saved:</p>
                  <ul class="text-[11px] text-amber-200 list-disc pl-5 space-y-0.5">
                    <template x-for="err in manifestSaveErrors" :key="err">
                      <li x-text="err"></li>
                    </template>
                  </ul>
                </div>
              </template>

              <!-- Ace editor container — initialised when a file is open. -->
              <div
                x-show="!loadingFile && !fileError && currentFile && fileContent !== null"
                id="ace-editor-host"
                class="border border-border rounded-lg"
                style="height: 480px; width: 100%;"
              ></div>
            </div>

            <!-- Test panel (v2.C tier 3) -->
            <div class="bg-panel border border-border rounded-2xl p-5">
              <div class="flex items-baseline justify-between mb-3">
                <h2 class="text-sm font-semibold text-white">Try it out</h2>
                <span class="text-[10px] text-slate-500">safe sandbox · runs until you stop it</span>
              </div>
              <p class="text-xs text-slate-400 mb-3">
                Pretend you're a user talking to your agent. Type what you'd say
                below and watch the skill respond — nothing real happens (no real
                messages sent, no real API calls), just a dry-run so you can verify
                the skill works before you install it.
              </p>
              <div class="space-y-2 mb-3">
                <div class="relative" @click.outside="cmdSuggestionsOpen = false">
                  <label class="text-[11px] text-slate-500 block mb-1">What would you say?</label>
                  <input type="text" x-model="testForm.message"
                    @input="updateCmdSuggestions()"
                    @focus="updateCmdSuggestions()"
                    @keydown.down.prevent="cmdSuggestionMove(1)"
                    @keydown.up.prevent="cmdSuggestionMove(-1)"
                    @keydown.tab.prevent="cmdSuggestionApply()"
                    @keydown.enter="cmdSuggestionsOpen && filteredCmdSuggestions.length ? (cmdSuggestionApply(), $event.preventDefault()) : null"
                    @keydown.escape="cmdSuggestionsOpen = false"
                    placeholder='Type / for skill commands — or describe what you want'
                    autocomplete="off"
                    class="w-full px-3 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60">
                  <!-- Slash-command autocomplete dropdown -->
                  <div
                    x-show="cmdSuggestionsOpen && filteredCmdSuggestions.length > 0"
                    x-cloak
                    class="absolute z-20 left-0 right-0 top-full mt-1 bg-surface border border-border rounded shadow-2xl max-h-64 overflow-y-auto"
                  >
                    <template x-for="(c, i) in filteredCmdSuggestions" :key="c.full">
                      <button type="button"
                        @click="cmdSuggestionApply(i)"
                        @mouseenter="cmdSuggestionIdx = i"
                        :class="i === cmdSuggestionIdx ? 'bg-accent/15' : ''"
                        class="w-full text-left px-3 py-1.5 hover:bg-accent/10 border-b border-border/40 last:border-b-0 flex items-baseline gap-2">
                        <span class="text-sm text-accent font-mono" x-text="c.full"></span>
                        <span class="text-[11px] text-slate-400 truncate" x-text="c.description"></span>
                      </button>
                    </template>
                  </div>
                </div>
                <details class="text-[11px]">
                  <summary class="text-slate-500 hover:text-slate-300 cursor-pointer select-none">
                    Advanced: pass extra parameters
                  </summary>
                  <div class="mt-2">
                    <textarea x-model="testForm.metadataText" rows="2"
                      placeholder='{ "date": "2026-05-14" } — only needed for skills that take structured input'
                      class="w-full px-2.5 py-1.5 text-xs bg-surface border border-border rounded text-slate-200 focus:border-accent/60 font-mono"></textarea>
                  </div>
                </details>
                <template x-if="testForm.metadataError">
                  <p class="text-[11px] text-amber-400" x-text="testForm.metadataError"></p>
                </template>
              </div>
              <div class="flex items-center justify-end gap-3">
                <!-- Live elapsed timer while a run is in flight -->
                <span x-show="testing" x-cloak class="text-xs text-slate-400 font-mono">
                  <span class="inline-block w-2 h-2 rounded-full bg-amber-400 animate-pulse mr-1.5 align-middle"></span>
                  <span x-text="formatElapsed(testElapsedMs)"></span>
                </span>
                <button type="button" @click="runTest()"
                  x-show="!testing"
                  :disabled="!detail"
                  class="px-4 py-1.5 text-sm font-medium bg-accent text-white rounded-lg
                         hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
                  ▶ Run
                </button>
                <button type="button" @click="stopTest()"
                  x-show="testing" x-cloak
                  class="px-4 py-1.5 text-sm font-medium bg-red-600/90 text-white rounded-lg
                         hover:bg-red-600 transition-colors">
                  ■ Stop
                </button>
              </div>

              <!-- Result -->
              <template x-if="testResult">
                <div class="mt-4 space-y-3">
                  <!-- Status pill + duration -->
                  <div class="flex items-center gap-2">
                    <span class="px-2 py-0.5 text-[10px] font-medium rounded uppercase"
                          :class="testResult.ok ? 'bg-green-500/20 text-green-300' :
                                 (testResult.cancelled ? 'bg-slate-500/30 text-slate-300' :
                                 (testResult.timed_out ? 'bg-amber-500/20 text-amber-300' : 'bg-red-500/20 text-red-300'))"
                          x-text="testResult.ok ? (testResult.status || 'done') :
                                  (testResult.cancelled ? 'stopped' :
                                  (testResult.timed_out ? 'timeout' : 'error'))"></span>
                    <span class="text-[11px] text-slate-500" x-text="formatElapsed(testResult.duration_ms || 0)"></span>
                  </div>

                  <!-- Response -->
                  <template x-if="testResult.ok && testResult.response">
                    <div>
                      <p class="text-[11px] text-slate-500 mb-1">Response</p>
                      <pre class="source-view" style="max-height: 160px;"><code x-text="testResult.response"></code></pre>
                    </div>
                  </template>

                  <!-- Error -->
                  <template x-if="testResult.error">
                    <div>
                      <p class="text-[11px] text-red-300 mb-1">
                        <span x-text="testResult.error.kind || 'error'"></span>:
                        <span class="text-slate-200" x-text="testResult.error.message"></span>
                      </p>
                      <template x-if="testResult.error.traceback">
                        <pre class="source-view" style="max-height: 200px; color: #fca5a5;"><code x-text="testResult.error.traceback"></code></pre>
                      </template>
                    </div>
                  </template>

                  <!-- Memory writes -->
                  <template x-if="(testResult.memory_writes || []).length > 0">
                    <div>
                      <p class="text-[11px] text-slate-500 mb-1" x-text="'Memory writes (' + testResult.memory_writes.length + ')'"></p>
                      <div class="bg-surface/40 border border-border rounded text-[11px] font-mono divide-y divide-border/40">
                        <template x-for="(w, i) in testResult.memory_writes" :key="i">
                          <div class="px-2 py-1 grid grid-cols-[1fr_auto_2fr] gap-2">
                            <span class="text-slate-300 truncate" x-text="w.key"></span>
                            <span class="text-slate-500" x-text="w.tier || 'working'"></span>
                            <span class="text-slate-400 truncate" x-text="(w.value || '').slice(0, 100)"></span>
                          </div>
                        </template>
                      </div>
                    </div>
                  </template>

                  <!-- Agent calls -->
                  <template x-if="(testResult.agent_calls || []).length > 0">
                    <div>
                      <p class="text-[11px] text-slate-500 mb-1" x-text="'Agent calls (' + testResult.agent_calls.length + ')'"></p>
                      <div class="bg-surface/40 border border-border rounded text-[11px] font-mono divide-y divide-border/40 max-h-32 overflow-y-auto">
                        <template x-for="(call, i) in testResult.agent_calls" :key="i">
                          <div class="px-2 py-1">
                            <span class="text-slate-500 text-[10px]" x-text="call.method"></span>
                            <span class="text-slate-300 ml-2" x-text="(call.prompt || '').slice(0, 80)"></span>
                          </div>
                        </template>
                      </div>
                    </div>
                  </template>

                  <!-- Reply messages -->
                  <template x-if="(testResult.reply_messages || []).length > 0">
                    <div>
                      <p class="text-[11px] text-slate-500 mb-1" x-text="'Reply messages (' + testResult.reply_messages.length + ')'"></p>
                      <div class="bg-surface/40 border border-border rounded text-[11px] divide-y divide-border/40">
                        <template x-for="(m, i) in testResult.reply_messages" :key="i">
                          <div class="px-2 py-1">
                            <span class="text-slate-500 text-[10px] mr-1" x-text="m.type"></span>
                            <span class="text-slate-300" x-text="(m.message || m.text || m.action || '').slice(0, 100)"></span>
                          </div>
                        </template>
                      </div>
                    </div>
                  </template>

                  <!-- Tool calls summary -->
                  <template x-if="testResult.tool_calls && Object.keys(testResult.tool_calls).length > 0">
                    <div>
                      <p class="text-[11px] text-slate-500 mb-1">Tool calls</p>
                      <pre class="source-view" style="max-height: 160px; font-size: 11px;"><code x-text="JSON.stringify(testResult.tool_calls, null, 2)"></code></pre>
                    </div>
                  </template>
                </div>
              </template>
            </div>

            <!-- "Next steps" CLI-snippet card removed 2026-05-15 —
                 Ageri runs these commands itself via the Install +
                 Become-a-publisher buttons in the header. No need to
                 dump shell commands on a non-coder. -->

          </div>
        </template>

      </div><!-- /right -->

    </div><!-- /grid -->

  </div>

  <!-- ── Publisher modal (5E.5) ──────────────────────────────────────── -->
  <template x-if="pubModal.open">
    <div
      class="fixed inset-0 z-40 bg-black/60 flex items-center justify-center p-4"
      @click.self="closePubModal()"
    >
      <div class="bg-surface border border-border rounded-2xl w-full max-w-md p-6">
        <!-- Two screens: registration vs picker. publisherStatus.registered
             flips which one is shown. -->

        <!-- A) Registration screen — user hasn't claimed a namespace yet. -->
        <template x-if="!publisherStatus.registered">
          <div>
            <div class="flex items-start justify-between gap-3 mb-4">
              <div>
                <h2 class="text-lg font-semibold text-white">Become a skill publisher</h2>
                <p class="text-xs text-slate-400 mt-0.5">
                  Claim a namespace on the Ageri marketplace — your published
                  skills will live under <code class="text-accent">ageri://&lt;namespace&gt;/&lt;skill&gt;@&lt;version&gt;</code>.
                </p>
              </div>
              <button type="button" @click="closePubModal()"
                :disabled="pubModal.submitting"
                class="text-slate-500 hover:text-white disabled:opacity-40">✕</button>
            </div>
            <label class="text-[11px] text-slate-500 block mb-1">Namespace</label>
            <!-- Namespace is fixed to the user's own Ageri namespace.
                 You can only register YOUR own — bypass attempts get
                 a 403 server-side too (defence in depth). -->
            <input type="text" x-model="pubModal.regForm.namespace"
              disabled
              class="w-full px-3 py-2 text-sm bg-panel/60 border border-border rounded text-slate-400 font-mono cursor-not-allowed">
            <p class="text-[11px] text-slate-500 mt-1.5">
              This is your Ageri namespace — you can only register your own.
              Change AGERI_NAMESPACE in setup if you need a different one.
            </p>

            <label class="text-[11px] text-slate-500 block mb-1 mt-3">Display name</label>
            <input type="text" x-model="pubModal.regForm.display_name"
              :disabled="pubModal.submitting"
              placeholder="e.g. Your Name"
              class="w-full px-3 py-2 text-sm bg-panel border border-border rounded text-white focus:border-accent/60">

            <label class="text-[11px] text-slate-500 block mb-1 mt-3">Email <span class="text-slate-500/80">(required, for security notices)</span></label>
            <input type="email" x-model="pubModal.regForm.email"
              :disabled="pubModal.submitting"
              required
              placeholder="you@example.com"
              class="w-full px-3 py-2 text-sm bg-panel border border-border rounded text-white focus:border-accent/60">

            <template x-if="pubModal.error">
              <p class="text-xs text-amber-400 mt-3 p-2 bg-amber-500/10 border border-amber-500/30 rounded"
                x-text="pubModal.error"></p>
            </template>

            <div class="flex justify-end gap-2 mt-5">
              <button type="button" @click="closePubModal()"
                :disabled="pubModal.submitting"
                class="px-3 py-1.5 text-sm text-slate-400 hover:text-white disabled:opacity-40">Cancel</button>
              <button type="button" @click="submitRegistration()"
                :disabled="pubModal.submitting || !pubModal.regForm.namespace || !pubModal.regForm.email"
                class="px-4 py-1.5 text-sm font-medium bg-green-500/20 text-green-200 border border-green-500/40 rounded
                       hover:bg-green-500/30 disabled:opacity-40 disabled:cursor-not-allowed">
                <span x-show="!pubModal.submitting">Register</span>
                <span x-show="pubModal.submitting">Registering…</span>
              </button>
            </div>
          </div>
        </template>

        <!-- B) Picker screen — user is registered; pick (skill, version) to publish. -->
        <template x-if="publisherStatus.registered">
          <div>
            <div class="flex items-start justify-between gap-3 mb-4">
              <div>
                <h2 class="text-lg font-semibold text-white">Publish a version</h2>
                <p class="text-xs text-slate-400 mt-0.5">
                  Signed in as
                  <span class="text-accent font-mono" x-text="publisherStatus.author?.namespace || ''"></span>.
                  Pick a tagged version to push to the marketplace.
                </p>
              </div>
              <button type="button" @click="closePubModal()"
                :disabled="pubModal.submitting"
                class="text-slate-500 hover:text-white disabled:opacity-40">✕</button>
            </div>

            <template x-if="pubModal.loading">
              <p class="text-sm text-slate-500 py-4">Loading your skills…</p>
            </template>

            <template x-if="!pubModal.loading && pubModal.publishable.length === 0">
              <div class="border border-dashed border-border rounded-lg p-5 text-center">
                <p class="text-sm text-slate-300 mb-1">Nothing to publish yet</p>
                <p class="text-xs text-slate-500">
                  Open a local skill in the playground and use
                  <b class="text-slate-300">Install as a new version ›</b>
                  to create a tagged version. Tags are what get published.
                </p>
              </div>
            </template>

            <template x-if="!pubModal.loading && pubModal.publishable.length > 0">
              <div class="space-y-2">
                <label class="text-[11px] text-slate-500 block">Skill</label>
                <select x-model="pubModal.pickForm.skill_id"
                  @change="pubModal.pickForm.version = ''"
                  class="w-full px-3 py-2 text-sm bg-panel border border-border rounded text-slate-200 focus:border-accent/60">
                  <option value="">— pick a skill —</option>
                  <template x-for="s in pubModal.publishable" :key="s.skill_id">
                    <option :value="s.skill_id" x-text="s.name + ' (' + s.skill_id + ')'"></option>
                  </template>
                </select>

                <template x-if="pubModal.pickForm.skill_id">
                  <div>
                    <label class="text-[11px] text-slate-500 block mt-3 mb-1">Tagged version</label>
                    <select x-model="pubModal.pickForm.version"
                      class="w-full px-3 py-2 text-sm bg-panel border border-border rounded text-slate-200 font-mono focus:border-accent/60">
                      <option value="">— pick a version —</option>
                      <template x-for="t in pubModal_tagsForSelected" :key="t.version">
                        <option :value="t.version"
                          :disabled="t.published"
                          x-text="t.version + (t.published ? '  ·  already published' : '')"></option>
                      </template>
                    </select>
                  </div>
                </template>
              </div>
            </template>

            <template x-if="pubModal.error">
              <p class="text-xs text-amber-400 mt-3 p-2 bg-amber-500/10 border border-amber-500/30 rounded"
                x-text="pubModal.error"></p>
            </template>
            <template x-if="pubModal.successMessage">
              <p class="text-xs text-green-300 mt-3 p-2 bg-green-500/10 border border-green-500/30 rounded"
                x-text="pubModal.successMessage"></p>
            </template>

            <div class="flex justify-between items-center mt-5 gap-2">
              <button type="button" @click="signOutPublisher()"
                class="text-[11px] text-slate-500 hover:text-slate-300"
                title="Clear local publisher credentials. Your marketplace namespace stays claimed."
              >Sign out as publisher</button>
              <div class="flex gap-2">
                <button type="button" @click="closePubModal()"
                  :disabled="pubModal.submitting"
                  class="px-3 py-1.5 text-sm text-slate-400 hover:text-white disabled:opacity-40">Close</button>
                <button type="button" @click="submitPublish()"
                  :disabled="pubModal.submitting || !pubModal.pickForm.skill_id || !pubModal.pickForm.version"
                  class="px-4 py-1.5 text-sm font-medium bg-green-500/20 text-green-200 border border-green-500/40 rounded
                         hover:bg-green-500/30 disabled:opacity-40 disabled:cursor-not-allowed">
                  <span x-show="!pubModal.submitting">Publish</span>
                  <span x-show="pubModal.submitting">Publishing…</span>
                </button>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </template>

  <!-- ── Tag-a-version modal (5E.3) ──────────────────────────────────────── -->
  <template x-if="tagModal.open">
    <div
      class="fixed inset-0 z-40 bg-black/60 flex items-center justify-center p-4"
      @click.self="closeTagModal()"
    >
      <div class="bg-surface border border-border rounded-2xl w-full max-w-md p-6">
        <div class="flex items-start justify-between gap-3 mb-4">
          <div>
            <h2 class="text-lg font-semibold text-white">Create a new version</h2>
            <p class="text-xs text-slate-400 mt-0.5">
              Freezes the current snapshot as a new installable version + bumps
              the snapshot to the next development version. Same shape as the
              Jenkins Maven-release flow — both numbers are editable.
            </p>
          </div>
          <button type="button" @click="closeTagModal()"
            :disabled="tagModal.creating"
            class="text-slate-500 hover:text-white disabled:opacity-40">✕</button>
        </div>
        <label class="text-[11px] text-slate-500 block mb-1">Release version</label>
        <input type="text" x-model="tagModal.version"
          @input="tagModal.userTouchedNext || (tagModal.next_snapshot_version = _suggestNextSnapshot(tagModal.version))"
          :disabled="tagModal.creating"
          placeholder="e.g. 1.0.0"
          class="w-full px-3 py-2 text-sm bg-panel border border-border rounded text-white font-mono focus:border-accent/60">
        <p class="text-[11px] text-slate-500 mt-1.5">
          What you're freezing as an installable version — no
          <code class="text-slate-300">-snapshot</code> suffix.
        </p>

        <label class="text-[11px] text-slate-500 block mb-1 mt-3">Next development version</label>
        <input type="text" x-model="tagModal.next_snapshot_version"
          @input="tagModal.userTouchedNext = true"
          :disabled="tagModal.creating"
          placeholder="e.g. 1.0.1-snapshot"
          @keydown.enter.prevent="submitTag()"
          class="w-full px-3 py-2 text-sm bg-panel border border-border rounded text-white font-mono focus:border-accent/60">
        <p class="text-[11px] text-slate-500 mt-1.5">
          What the snapshot bumps to after the tag is created. Must end with
          <code class="text-slate-300">-snapshot</code>. Auto-fills as you type
          the release version — edit if you're jumping a major.
        </p>
        <template x-if="tagModal.error">
          <p class="text-xs text-amber-400 mt-3 p-2 bg-amber-500/10 border border-amber-500/30 rounded"
            x-text="tagModal.error"></p>
        </template>
        <div class="flex justify-end gap-2 mt-5">
          <button type="button" @click="closeTagModal()"
            :disabled="tagModal.creating"
            class="px-3 py-1.5 text-sm text-slate-400 hover:text-white disabled:opacity-40">Cancel</button>
          <button type="button" @click="submitTag()"
            :disabled="tagModal.creating || !tagModal.version"
            class="px-4 py-1.5 text-sm font-medium bg-accent text-white rounded
                   hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed">
            <span x-show="!tagModal.creating">Create tag</span>
            <span x-show="tagModal.creating">Creating…</span>
          </button>
        </div>
      </div>
    </div>
  </template>

  <!-- ── Create modal ────────────────────────────────────────────────────── -->
  <template x-if="createOpen">
    <div
      class="fixed inset-0 z-40 bg-black/60 flex items-center justify-center p-4"
      @click.self="createOpen = false"
    >
      <div class="bg-surface border border-border rounded-2xl w-full max-w-2xl p-6 max-h-[90vh] overflow-y-auto">
        <div class="flex items-start justify-between gap-3 mb-4">
          <div class="flex items-center gap-3">
            <template x-if="createTab !== 'picker'">
              <button
                type="button"
                @click="createTab = 'picker'; createError = ''"
                class="text-slate-400 hover:text-white text-sm"
                title="Back"
              >←</button>
            </template>
            <div>
              <h2 class="text-lg font-semibold text-white">
                <span x-show="createTab === 'picker'">+ New skill</span>
                <span x-show="createTab === 'describe'">Describe what you want</span>
                <span x-show="createTab === 'demonstrate'">Demonstrate it once</span>
                <span x-show="createTab === 'github'">Import from GitHub</span>
                <span x-show="createTab === 'ags'">Import a .ags bundle</span>
                <span x-show="createTab === 'cli'">Use the CLI or your IDE</span>
                <span x-show="createTab === 'template'">Start from a template</span>
              </h2>
              <p class="text-xs text-slate-500 mt-0.5">
                <span x-show="createTab === 'picker'">Pick how you want to start. Most paths land in ~/ageri/skills/local/&lt;id&gt;/.</span>
                <span x-show="createTab !== 'picker'">Lands in ~/ageri/skills/local/&lt;id&gt;/.</span>
              </p>
            </div>
          </div>
          <button
            type="button"
            @click="createOpen = false"
            class="text-slate-400 hover:text-white text-sm"
          >✕</button>
        </div>

        <!-- ─── PICKER VIEW ───────────────────────────────────────────────── -->
        <template x-if="createTab === 'picker'">
          <div class="space-y-3">

            <!-- Card: Describe (recommended) -->
            <button
              type="button"
              @click="createTab = 'describe'; createError = ''"
              class="create-card w-full text-left bg-accent/10 border border-accent/40 rounded-xl p-4 hover:border-accent/70 transition-colors"
            >
              <div class="flex items-start gap-3">
                <div class="text-2xl shrink-0">💬</div>
                <div class="flex-1 min-w-0">
                  <div class="flex items-center gap-2 flex-wrap">
                    <span class="text-sm font-semibold text-white">Describe what you want</span>
                    <span class="px-1.5 py-0.5 text-[9px] font-medium bg-accent/30 text-accent-foreground rounded uppercase">Recommended</span>
                  </div>
                  <p class="text-xs text-slate-300 mt-1 leading-relaxed">
                    Tell Ageri what to automate in plain words. It'll ask a few questions, scaffold a working starter skill, and drop you into the editor to refine.
                  </p>
                </div>
              </div>
            </button>

            <!-- Card: Demonstrate -->
            <button
              type="button"
              @click="createTab = 'demonstrate'; createError = ''; mixedState = 'setup'"
              class="create-card w-full text-left bg-panel border border-border rounded-xl p-4 hover:border-accent/50 transition-colors"
            >
              <div class="flex items-start gap-3">
                <div class="text-2xl shrink-0">🎬</div>
                <div class="flex-1 min-w-0">
                  <p class="text-sm font-semibold text-white">Demonstrate it once</p>
                  <p class="text-xs text-slate-400 mt-1 leading-relaxed">
                    Show Ageri the workflow on your screen. Browser clicks auto-capture; press <code>Ctrl+Shift+R</code> for desktop actions, <code>Ctrl+Shift+C</code> to grab clipboard. Ageri turns it into a runnable skill.
                  </p>
                </div>
              </div>
            </button>

            <!-- Card: Import from GitHub -->
            <button
              type="button"
              @click="createTab = 'github'; createError = ''"
              class="create-card w-full text-left bg-panel border border-border rounded-xl p-4 hover:border-accent/50 transition-colors"
            >
              <div class="flex items-start gap-3">
                <div class="text-2xl shrink-0">🐙</div>
                <div class="flex-1 min-w-0">
                  <p class="text-sm font-semibold text-white">Import from GitHub</p>
                  <p class="text-xs text-slate-400 mt-1 leading-relaxed">
                    Paste a github.com URL or SSH form. Public repos need no auth; private ones use your existing SSH key.
                  </p>
                </div>
              </div>
            </button>

            <!-- Card: Import a .ags bundle -->
            <button
              type="button"
              @click="createTab = 'ags'; createError = ''; agsState = 'upload'"
              class="create-card w-full text-left bg-panel border border-border rounded-xl p-4 hover:border-accent/50 transition-colors"
            >
              <div class="flex items-start gap-3">
                <div class="text-2xl shrink-0">📦</div>
                <div class="flex-1 min-w-0">
                  <p class="text-sm font-semibold text-white">Import a .ags bundle</p>
                  <p class="text-xs text-slate-400 mt-1 leading-relaxed">
                    Already packed a skill (or got one from someone)? Drop the <code>.ags</code> file here to install it locally.
                  </p>
                </div>
              </div>
            </button>

            <!-- Card: CLI / IDE -->
            <button
              type="button"
              @click="createTab = 'cli'; createError = ''"
              class="create-card w-full text-left bg-panel border border-border rounded-xl p-4 hover:border-accent/50 transition-colors"
            >
              <div class="flex items-start gap-3">
                <div class="text-2xl shrink-0">💻</div>
                <div class="flex-1 min-w-0">
                  <p class="text-sm font-semibold text-white">I'll write the code myself</p>
                  <p class="text-xs text-slate-400 mt-1 leading-relaxed">
                    CLI commands for <code>ageri skill init</code> + a docs link. For developers who prefer their own editor / Claude Code / Cursor.
                  </p>
                </div>
              </div>
            </button>

            <!-- Advanced disclosure -->
            <details class="bg-panel/50 border border-border rounded-xl">
              <summary class="cursor-pointer px-4 py-2.5 text-xs text-slate-400 hover:text-slate-200 select-none">
                ▸ Advanced
              </summary>
              <div class="px-4 pb-4 pt-1">
                <button
                  type="button"
                  @click="createTab = 'template'; createError = ''"
                  class="create-card w-full text-left bg-surface border border-border rounded-lg p-3 hover:border-accent/40 transition-colors"
                >
                  <div class="flex items-start gap-3">
                    <div class="text-xl shrink-0">📋</div>
                    <div class="flex-1 min-w-0">
                      <p class="text-sm font-medium text-white">Start from a template</p>
                      <p class="text-[11px] text-slate-500 mt-0.5 leading-relaxed">
                        Pick a starter shape — blank, cognitive, browser-automation, desktop-automation, api-adapter. For when you already know which scaffold you want.
                      </p>
                    </div>
                  </div>
                </button>
              </div>
            </details>

          </div>
        </template>

        <!-- ─── DESCRIBE VIEW (3-step mini-chat) ────────────────────────── -->
        <template x-if="createTab === 'describe'">
          <div class="space-y-4">

            <!-- Step 1 — describe -->
            <template x-if="describeState === 'input'">
              <div class="space-y-3">
                <p class="text-xs text-slate-400 leading-relaxed">
                  Tell Ageri what you want to automate. Be as specific as you can —
                  the more detail you give, the less it has to ask.
                </p>
                <textarea
                  x-model="describeForm.description"
                  rows="5"
                  placeholder="e.g. Download yesterday's CukCuk sales report and email me a summary every morning at 8am."
                  class="w-full px-3 py-2 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60 placeholder-slate-500"
                  @keydown.meta.enter="describeContinue()"
                  @keydown.ctrl.enter="describeContinue()"
                ></textarea>
                <div class="text-[11px] text-slate-500 space-y-1">
                  <p><b>Good examples:</b></p>
                  <ul class="list-disc pl-5 space-y-0.5">
                    <li>"Summarise the top 5 GitHub PR comments waiting for my review."</li>
                    <li>"Open my Excel sheet for today's expenses, copy column B, paste into our QuickBooks form."</li>
                    <li>"Every weekday at 9am, check the weather for Saigon and Hanoi and tell me which to wear a jacket for."</li>
                  </ul>
                </div>

                <template x-if="createError">
                  <p class="text-xs text-amber-400 whitespace-pre-line" x-text="createError"></p>
                </template>

                <div class="flex items-center justify-between gap-2 pt-1">
                  <button type="button" @click="createTab = 'picker'"
                    class="px-3 py-1.5 text-sm text-slate-400 hover:text-white">← Back</button>
                  <button type="button" @click="describeContinue()"
                    :disabled="!describeForm.description.trim() || describing"
                    class="px-4 py-1.5 text-sm font-medium bg-accent text-white rounded-lg
                           hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
                    <span x-show="!describing">Continue →</span>
                    <span x-show="describing">Asking Ageri...</span>
                  </button>
                </div>
              </div>
            </template>

            <!-- Step 2 — clarifying questions -->
            <template x-if="describeState === 'questions'">
              <div class="space-y-3">
                <div class="bg-surface/40 border border-border rounded-lg p-3">
                  <p class="text-[11px] text-slate-500 mb-1">Your description</p>
                  <p class="text-xs text-slate-300 italic line-clamp-3" x-text="describeForm.description"></p>
                </div>

                <p class="text-xs text-slate-400 leading-relaxed">
                  Ageri has a few questions before scaffolding:
                </p>

                <div class="space-y-3">
                  <template x-for="(q, i) in describeQuestions" :key="i">
                    <div>
                      <label class="text-xs text-slate-300 block mb-1" x-text="q"></label>
                      <input type="text" x-model="describeAnswers[q]"
                        class="w-full px-3 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60"
                        placeholder="Your answer (or leave blank to let Ageri guess)">
                    </div>
                  </template>
                </div>

                <template x-if="createError">
                  <p class="text-xs text-amber-400 whitespace-pre-line" x-text="createError"></p>
                </template>

                <div class="flex items-center justify-between gap-2 pt-2">
                  <button type="button" @click="describeState = 'input'; createError = ''"
                    class="px-3 py-1.5 text-sm text-slate-400 hover:text-white">← Edit description</button>
                  <button type="button" @click="describeScaffold()"
                    :disabled="describing"
                    class="px-4 py-1.5 text-sm font-medium bg-accent text-white rounded-lg
                           hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
                    <span x-show="!describing">Scaffold the skill</span>
                    <span x-show="describing">Generating...</span>
                  </button>
                </div>
              </div>
            </template>

            <!-- Step 3 — scaffolded -->
            <template x-if="describeState === 'scaffolded' && describeResult">
              <div class="space-y-3">
                <div class="bg-green-500/10 border border-green-500/30 rounded-lg p-4">
                  <div class="flex items-start gap-3">
                    <svg class="w-6 h-6 text-green-400 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                    </svg>
                    <div class="min-w-0">
                      <p class="text-sm font-semibold text-white" x-text="describeResult.skill_id + '@' + (describeResult.manifest && describeResult.manifest.version)"></p>
                      <p class="text-xs text-slate-300 mt-0.5" x-text="describeResult.manifest && describeResult.manifest.description"></p>
                      <p class="text-[11px] text-slate-500 mt-2 break-all" x-text="describeResult.install_dir"></p>
                    </div>
                  </div>
                </div>

                <div class="bg-surface/40 border border-border rounded-lg p-3 text-[11px] text-slate-400 space-y-1">
                  <p><b class="text-slate-300">Files written:</b> <span x-text="(describeResult.files_written || []).join(', ')"></span></p>
                  <p><b class="text-slate-300">Tools:</b> <span x-text="(describeResult.manifest && describeResult.manifest.permissions && describeResult.manifest.permissions.tools || []).join(', ') || '(none)'"></span></p>
                  <p><b class="text-slate-300">Category:</b> <span x-text="describeResult.manifest && describeResult.manifest.category"></span></p>
                </div>

                <p class="text-xs text-slate-500 italic">
                  The starter is intentionally rough — open it in the editor to refine.
                </p>

                <div class="flex items-center justify-between gap-2 pt-2">
                  <button type="button" @click="resetDescribe()"
                    class="px-3 py-1.5 text-sm text-slate-400 hover:text-white">
                    Describe another
                  </button>
                  <button type="button"
                    @click="createOpen = false; loadSkills(); selectSkill(describeResult.skill_id)"
                    class="px-4 py-1.5 text-sm font-medium bg-accent text-white rounded-lg
                           hover:bg-accent/90 transition-colors">
                    Open in editor →
                  </button>
                </div>
              </div>
            </template>

          </div>
        </template>

        <!-- ─── CLI VIEW ────────────────────────────────────────────────── -->
        <template x-if="createTab === 'cli'">
          <div class="space-y-3 py-1">
            <p class="text-sm text-slate-300 leading-relaxed">
              Five commands take you from blank to published. Run them in any shell where Ageri is installed.
            </p>
            <div class="space-y-2">
              <div>
                <p class="text-[11px] text-slate-500 mb-1">1. Scaffold from a template</p>
                <div class="cli-snippet">ageri skill init my-skill --template cognitive</div>
              </div>
              <div>
                <p class="text-[11px] text-slate-500 mb-1">2. Edit boss.py in your editor (VS Code, Cursor, Claude Code, …)</p>
                <div class="cli-snippet">code ~/ageri/skills/local/my-skill</div>
              </div>
              <div>
                <p class="text-[11px] text-slate-500 mb-1">3. Validate</p>
                <div class="cli-snippet">ageri skill test my-skill</div>
              </div>
              <div>
                <p class="text-[11px] text-slate-500 mb-1">4. Pack (after bumping version in skill.json)</p>
                <div class="cli-snippet">ageri skill pack ~/ageri/skills/local/my-skill</div>
              </div>
              <div>
                <p class="text-[11px] text-slate-500 mb-1">5. Upload to the marketplace</p>
                <div class="cli-snippet">ageri skill upload my-skill-0.1.0.ags</div>
              </div>
            </div>
            <p class="text-xs text-slate-500 pt-2">
              Full author guide:
              <a href="https://docs.ageri.ai/getting-started/first-skill/" target="_blank" rel="noopener"
                 class="text-accent hover:underline">docs.ageri.ai</a>
            </p>
            <div class="flex justify-end pt-2">
              <button type="button" @click="createTab = 'picker'"
                class="px-3 py-1.5 text-sm text-slate-400 hover:text-white">← Back</button>
            </div>
          </div>
        </template>

        <!-- ─── .AGS UPLOAD VIEW ────────────────────────────────────────── -->
        <template x-if="createTab === 'ags'">
          <div class="space-y-3">

            <!-- Upload step -->
            <template x-if="agsState === 'upload'">
              <div>
                <p class="text-xs text-slate-400 mb-3">
                  Drop or pick a <code>.ags</code> bundle. Ageri validates the manifest then installs the skill into the right directory based on its declared trust level.
                </p>
                <label
                  class="file-drop block p-6 text-center cursor-pointer"
                  :class="agsDragging ? 'dragging' : ''"
                  @dragover.prevent="agsDragging = true"
                  @dragleave.prevent="agsDragging = false"
                  @drop.prevent="agsDragging = false; handleAgsFile($event.dataTransfer.files[0])"
                >
                  <svg class="w-8 h-8 text-slate-500 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.9 5 5 0 019.9-1A5.002 5.002 0 0117 16M9 19l3-3m0 0l3 3m-3-3v6"/>
                  </svg>
                  <p class="text-sm text-slate-300 mb-1">
                    <template x-if="!agsFile"><span>Drop a <code class="text-xs">.ags</code> here, or click to browse</span></template>
                    <template x-if="agsFile"><span class="text-accent" x-text="agsFile.name"></span></template>
                  </p>
                  <p class="text-[11px] text-slate-500" x-show="!agsFile">50 MB max per spec §2</p>
                  <input type="file" accept=".ags,application/gzip,application/x-tar"
                    class="hidden" @change="handleAgsFile($event.target.files[0])">
                </label>

                <template x-if="createError">
                  <p class="mt-3 text-xs text-amber-400" x-text="createError"></p>
                </template>

                <div class="mt-4 flex items-center justify-between gap-2">
                  <button type="button" @click="createTab = 'picker'"
                    class="px-3 py-1.5 text-sm text-slate-400 hover:text-white">← Back</button>
                  <button type="button" @click="installAgs()"
                    :disabled="!agsFile || agsInstalling"
                    class="px-4 py-1.5 text-sm font-medium bg-accent text-white rounded-lg
                           hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
                    <span x-show="!agsInstalling">Validate + install</span>
                    <span x-show="agsInstalling">Installing...</span>
                  </button>
                </div>
              </div>
            </template>

            <!-- Success step -->
            <template x-if="agsState === 'installed'">
              <div class="text-center py-4">
                <div class="w-12 h-12 mx-auto mb-3 rounded-full bg-green-500/15 flex items-center justify-center">
                  <svg class="w-6 h-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
                <h2 class="text-white font-medium text-base mb-1" x-text="agsResult ? agsResult.skill_id + '@' + agsResult.version : 'Installed'"></h2>
                <p class="text-xs text-slate-400 mb-2" x-text="agsResult ? (agsResult.action + ' to ' + (agsResult.trust_level || 'local')) : ''"></p>
                <p class="text-[11px] text-slate-500 break-all" x-text="agsResult && agsResult.install_dir"></p>
                <div class="flex items-center justify-center gap-2 mt-4">
                  <button type="button" @click="agsState = 'upload'; agsFile = null; agsResult = null; createError = ''"
                    class="px-3 py-1.5 text-sm text-slate-400 hover:text-white">
                    Install another
                  </button>
                  <button type="button" @click="createOpen = false; loadSkills(); agsResult && selectSkill(agsResult.skill_id)"
                    class="px-4 py-1.5 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent/90 transition-colors">
                    Open in playground
                  </button>
                </div>
              </div>
            </template>
          </div>
        </template>

        <!-- ── Tab: From template ────────────────────────────────────────── -->
        <template x-if="createTab === 'template'">
          <div class="space-y-3">
            <div>
              <label class="text-xs text-slate-400 block mb-1">Skill ID</label>
              <input
                type="text"
                x-model="scratchForm.skill_id"
                placeholder="my-skill"
                class="w-full px-3 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60"
              >
              <p class="text-[10px] text-slate-500 mt-1">
                Lowercase, hyphens allowed. Becomes the directory name.
              </p>
            </div>
            <div>
              <label class="text-xs text-slate-400 block mb-1">Template</label>
              <select
                x-model="scratchForm.template"
                class="w-full px-3 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60"
              >
                <option value="blank">blank — minimal scaffolding</option>
                <option value="cognitive">cognitive — pure LLM reasoning, no tools</option>
                <option value="browser-automation">browser-automation — Playwright-based</option>
                <option value="desktop-automation">desktop-automation — native app GUI via vision</option>
                <option value="api-adapter">api-adapter — bridge to an external HTTP API</option>
              </select>
            </div>
            <label class="flex items-center gap-2 text-xs text-slate-400">
              <input type="checkbox" x-model="scratchForm.force">
              Overwrite if local/&lt;id&gt;/ exists
            </label>

            <template x-if="createError">
              <p class="text-xs text-amber-400" x-text="createError"></p>
            </template>

            <div class="flex justify-end gap-2 pt-2">
              <button
                type="button"
                @click="createOpen = false"
                class="px-3 py-1.5 text-sm text-slate-400 hover:text-white"
              >Cancel</button>
              <button
                type="button"
                @click="submitScratch()"
                :disabled="!scratchForm.skill_id || creating"
                class="px-4 py-1.5 text-sm font-medium bg-accent text-white rounded-lg
                       hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
              >
                <span x-show="!creating">Scaffold</span>
                <span x-show="creating">Scaffolding...</span>
              </button>
            </div>
          </div>
        </template>

        <!-- (Desktop-only recording tab consolidated into 'demonstrate'
             which uses the combined Playwright + desktop recorder so a
             single recording can mix web + native + clipboard.) -->

        <!-- ── Tab: Record mixed (desktop + browser + clipboard) ─────────── -->
        <template x-if="createTab === 'demonstrate'">
          <div>

            <!-- State: setup -->
            <template x-if="mixedState === 'setup'">
              <div class="space-y-3">
                <p class="text-xs text-slate-400 leading-relaxed">
                  Records a workflow that crosses desktop and browser. Three capture sources:
                </p>
                <ul class="text-xs text-slate-400 list-disc pl-5 space-y-1">
                  <li><b class="text-slate-300">Browser clicks + typing</b> — auto-captured in the recorder's Playwright window</li>
                  <li><b class="text-slate-300">Desktop clicks</b> — press <code>Ctrl+Shift+R</code> on the focused app</li>
                  <li><b class="text-slate-300">Clipboard</b> — press <code>Ctrl+Shift+C</code> after a Ctrl+C in any app; the value flows into the next browser paste</li>
                </ul>
                <div>
                  <label class="text-xs text-slate-400 block mb-1">Skill ID</label>
                  <input type="text" x-model="mixedForm.skill_id" placeholder="excel-to-portal"
                    class="w-full px-3 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60">
                </div>
                <div>
                  <label class="text-xs text-slate-400 block mb-1">Display name (optional)</label>
                  <input type="text" x-model="mixedForm.name" placeholder="Excel-to-portal import"
                    class="w-full px-3 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60">
                </div>
                <div>
                  <label class="text-xs text-slate-400 block mb-1">Initial browser URL (optional)</label>
                  <input type="text" x-model="mixedForm.initial_url" placeholder="https://app.example.com/import"
                    class="w-full px-3 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60 font-mono">
                  <p class="text-[10px] text-slate-500 mt-1">
                    The recorder opens a browser window — start it at the right page so you can drive straight in.
                  </p>
                </div>
                <div>
                  <label class="text-xs text-slate-400 block mb-1">Desktop window title (optional)</label>
                  <input type="text" x-model="mixedForm.window_title" placeholder="e.g. Microsoft Excel"
                    class="w-full px-3 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60">
                </div>
                <div>
                  <label class="text-xs text-slate-400 block mb-1">Description (optional)</label>
                  <textarea x-model="mixedForm.description" rows="2" placeholder="What this skill does"
                    class="w-full px-3 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60"></textarea>
                </div>

                <template x-if="createError">
                  <p class="text-xs text-amber-400 whitespace-pre-line" x-text="createError"></p>
                </template>

                <div class="flex justify-end gap-2 pt-2">
                  <button type="button" @click="createOpen = false"
                    class="px-3 py-1.5 text-sm text-slate-400 hover:text-white">Cancel</button>
                  <button type="button" @click="startMixed()"
                    :disabled="!mixedForm.skill_id || starting"
                    class="px-4 py-1.5 text-sm font-medium bg-accent text-white rounded-lg
                           hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
                    <span x-show="!starting">Start recording (opens browser)</span>
                    <span x-show="starting">Starting...</span>
                  </button>
                </div>
              </div>
            </template>

            <!-- State: active -->
            <template x-if="mixedState === 'active'">
              <div class="space-y-3">
                <div class="flex items-center gap-2 p-3 bg-accent/10 border border-accent/30 rounded-lg">
                  <span class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></span>
                  <span class="text-sm text-white font-medium">Mixed recording</span>
                  <span class="text-xs text-slate-400" x-text="'Hotkeys: ' + (mixedSession.desktop_hotkey || 'Ctrl+Shift+R') + ' (desktop), ' + (mixedSession.clipboard_hotkey || 'Ctrl+Shift+C') + ' (clipboard)'"></span>
                  <span class="flex-1"></span>
                  <span class="text-xs text-slate-400" x-text="mixedSteps.length + ' step(s)'"></span>
                </div>

                <p class="text-xs text-slate-400 leading-relaxed">
                  The recorder's browser window is open. Switch between it and your desktop app:
                  <b>browser clicks/typing</b> capture automatically; press <b>Ctrl+Shift+R</b>
                  before each desktop click; press <b>Ctrl+Shift+C</b> after a desktop Ctrl+C
                  to lock in the clipboard value for the next browser paste.
                </p>

                <!-- Live step list -->
                <div class="bg-surface/40 border border-border rounded-lg p-2 max-h-48 overflow-y-auto">
                  <template x-if="mixedSteps.length === 0">
                    <p class="text-[11px] text-slate-500 p-2">No steps captured yet.</p>
                  </template>
                  <template x-for="s in mixedSteps" :key="s.index">
                    <div class="flex items-baseline gap-2 py-1 text-[11px] border-b border-border/40 last:border-b-0">
                      <span class="font-mono text-slate-500 w-6 text-right" x-text="s.index + 1"></span>
                      <span class="px-1.5 py-0.5 rounded font-medium text-[10px] uppercase"
                            :class="{
                              'bg-teal/15 text-teal': s.target === 'browser',
                              'bg-purple-500/15 text-purple-400': s.target === 'desktop' && s.kind !== 'clipboard_read',
                              'bg-amber-500/15 text-amber-400': s.kind === 'clipboard_read',
                            }"
                            x-text="s.kind === 'clipboard_read' ? 'clip' : (s.target === 'browser' ? 'web' : 'desk')"></span>
                      <span class="text-slate-400 truncate" x-text="s.kind"></span>
                      <span class="text-slate-300 truncate flex-1" x-text="s.description || s.clipboard_preview || s.url || ''"></span>
                    </div>
                  </template>
                </div>

                <!-- Manual fallback row -->
                <div class="grid grid-cols-2 gap-2">
                  <button type="button" @click="captureMixedDesktop()"
                    :disabled="capturing"
                    class="px-3 py-1.5 text-xs font-medium bg-slate-700 text-white rounded hover:bg-slate-600 disabled:opacity-40 transition-colors">
                    + Capture desktop click
                  </button>
                  <button type="button" @click="captureMixedClipboard()"
                    :disabled="capturing"
                    class="px-3 py-1.5 text-xs font-medium bg-slate-700 text-white rounded hover:bg-slate-600 disabled:opacity-40 transition-colors">
                    + Capture clipboard
                  </button>
                </div>

                <template x-if="createError">
                  <p class="text-xs text-amber-400 whitespace-pre-line" x-text="createError"></p>
                </template>

                <div class="flex justify-between gap-2 pt-2">
                  <button type="button" @click="cancelMixed()"
                    class="px-3 py-1.5 text-sm text-slate-400 hover:text-white">Cancel recording</button>
                  <button type="button" @click="finishMixed()"
                    :disabled="mixedSteps.length === 0 || finishing"
                    class="px-4 py-1.5 text-sm font-medium bg-accent text-white rounded-lg
                           hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
                    <span x-show="!finishing">Done — synthesise skill</span>
                    <span x-show="finishing">Synthesising...</span>
                  </button>
                </div>
              </div>
            </template>

          </div>
        </template>

        <!-- ── Tab: From GitHub ──────────────────────────────────────────── -->
        <template x-if="createTab === 'github'">
          <div class="space-y-3">
            <div>
              <label class="text-xs text-slate-400 block mb-1">Git URI</label>
              <input
                type="text"
                x-model="importForm.uri"
                placeholder="gh://owner/repo  or  https://github.com/owner/repo  or  git@github.com:owner/repo.git"
                class="w-full px-3 py-1.5 text-sm bg-surface border border-border rounded text-slate-200 focus:border-accent/60 font-mono"
              >
              <p class="text-[10px] text-slate-500 mt-1">
                Append <code>#&lt;ref&gt;</code> to pin a branch/tag/commit. Private repos use your SSH key or git credential helper.
              </p>
            </div>

            <div class="flex flex-wrap gap-4">
              <label class="flex items-center gap-2 text-xs text-slate-400">
                <input type="checkbox" x-model="importForm.update">
                Update if already imported from same source
              </label>
              <label class="flex items-center gap-2 text-xs text-slate-400">
                <input type="checkbox" x-model="importForm.force">
                Force overwrite
              </label>
            </div>

            <template x-if="createError">
              <p class="text-xs text-amber-400 whitespace-pre-line" x-text="createError"></p>
            </template>

            <div class="flex justify-end gap-2 pt-2">
              <button
                type="button"
                @click="createOpen = false"
                class="px-3 py-1.5 text-sm text-slate-400 hover:text-white"
              >Cancel</button>
              <button
                type="button"
                @click="submitImport()"
                :disabled="!importForm.uri || creating"
                class="px-4 py-1.5 text-sm font-medium bg-accent text-white rounded-lg
                       hover:bg-accent/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
              >
                <span x-show="!creating">Import</span>
                <span x-show="creating">Cloning...</span>
              </button>
            </div>
          </div>
        </template>

      </div>
    </div>
  </template>

</div>

<script>
function playgroundPage() {
  return {
    // List state
    skills: [],
    loadingList: false,
    selectedId: '',

    // Detail state
    detail: null,
    loadingDetail: false,
    manifestRows: [],

    // File editor state (v2.C tier 2)
    currentFile: '',
    fileContent: null,    // current editor buffer
    fileSavedContent: '', // last-known on-disk content; dirty = !==
    fileError: '',
    loadingFile: false,
    saving: false,
    dirtyFiles: {},       // {path: true} when buffer differs from disk
    manifestSaveErrors: [],
    aceEditor: null,      // Ace instance — created lazily on first openFile
    _suppressChangeEvent: false,  // guard while we set value programmatically
    _openFileReq: 0,      // monotonic stamp — stale fetches discard their result

    // 5E.2 version-picker state
    selectedVersion: 'snapshot',   // 'snapshot' or a tag name like '1.0.0'
    availableVersions: null,       // {snapshot: {present, version}, tags: [...], active: '1.0.0'|null}

    // 5E.3 Tag modal state — Jenkins-style two-field flow.
    tagModal: {
      open: false,
      version: '',                // "Release version" — e.g. 1.0.0
      next_snapshot_version: '',  // "Next development version" — e.g. 1.0.1-snapshot
      userTouchedNext: false,     // once true, stop auto-suggesting on version input
      error: '',
      creating: false,
    },

    // 5E.5 Publisher modal state
    publisherStatus: {
      registered: false,
      author: null,   // {id, namespace, name} when registered
    },
    pubModal: {
      open: false,
      loading: false,
      submitting: false,
      publishable: [],   // [{skill_id, name, tags: [{version, published}]}]
      regForm: {namespace: '', display_name: '', email: ''},
      pickForm: {skill_id: '', version: ''},
      error: '',
      successMessage: '',
    },

    // Create-modal state
    createOpen: false,
    createTab: 'picker',
    createError: '',
    creating: false,
    scratchForm: {
      skill_id: '',
      template: 'blank',
      force: false,
    },
    importForm: {
      uri: '',
      update: false,
      force: false,
    },

    // Desktop-record tab state
    recordState: 'setup',   // 'setup' | 'active'
    recordForm: {
      skill_id: '',
      name: '',
      description: '',
      window_title: '',
    },
    recordSession: null,    // {session_id, hotkey, skill_id}
    recordStepCount: 0,
    recordPollTimer: null,
    starting: false,
    finishing: false,
    capturing: false,
    manualDescription: '',

    // Test panel state (v2.C tier 3)
    testForm: {
      message: 'test from playground',
      metadataText: '',
      metadataError: '',
    },
    testResult: null,
    testing: false,
    testRunId: '',
    testElapsedMs: 0,
    _testTimerInterval: null,   // 100ms wall-clock tick for the live counter
    _testPollInterval: null,    // 1s poll for run status

    // Slash-command autocomplete state (item 2)
    skillCommands: [],           // [{name, description, usage, full}]
    cmdSuggestionsOpen: false,
    cmdSuggestionIdx: 0,
    filteredCmdSuggestions: [],

    // Mixed-record tab state (v2.E) — drives the 'Demonstrate' card.
    mixedState: 'setup',    // 'setup' | 'active'
    mixedForm: {
      skill_id: '',
      name: '',
      description: '',
      initial_url: '',
      window_title: '',
    },
    mixedSession: null,
    mixedSteps: [],
    mixedPollTimer: null,

    // .ags upload state (Commit A — moved from /skills/create import flow,
    // but lands in local/ instead of marketplace publish).
    agsState: 'upload',     // 'upload' | 'installed'
    agsFile: null,
    agsDragging: false,
    agsInstalling: false,
    agsResult: null,

    // Describe-what-you-want state (Commit B — conversational scaffolder).
    describeState: 'input', // 'input' | 'questions' | 'scaffolded'
    describeForm: {description: ''},
    describeQuestions: [],
    describeAnswers: {},    // Q text → user's typed answer
    describeResult: null,   // {skill_id, install_dir, manifest, files_written}
    describing: false,

    // Remove-skill state
    removing: false,
    removeError: '',

    // Inline-editable metadata (name + description) — saves to skill.json
    metaForm: {name: '', description: ''},
    metaSaved: {name: '', description: ''},   // last server-confirmed values
    metaSaving: false,
    metaSaveError: '',

    // Install + Become-a-publisher state (stubs for follow-up commit)
    installing: false,
    installResult: '',

    async init() {
      await this.loadSkills();
      // Fire-and-forget — populates the top-bar button label
      // ("Become a publisher" vs "Publish a version").
      this.loadPublisherStatus();
    },

    async loadSkills() {
      this.loadingList = true;
      try {
        const r = await fetch('/api/skills/playground/local');
        if (r.ok) {
          const data = await r.json();
          this.skills = data.skills || [];
        }
      } catch (e) { /* leave list as-is */ }
      finally { this.loadingList = false; }
    },

    async selectSkill(id) {
      this.selectedId = id;
      this.detail = null;
      this.currentFile = '';
      this.fileContent = null;
      this.fileError = '';
      this.manifestSaveErrors = [];
      // Fresh skill = fresh buffers; don't carry dirty state across.
      this.dirtyFiles = {};
      this.fileBuffers = {};
      this.savedBuffers = {};
      // And fresh test panel — previous skill's test result is misleading.
      // Also tear down any in-flight run (timer + polling) so we don't paint
      // its result onto the new skill's panel.
      if (this._clearTestTimers) this._clearTestTimers();
      this.testResult = null;
      this.testing = false;
      this.testRunId = '';
      this.testElapsedMs = 0;
      this.testForm = {
        message: '',
        metadataText: '',
        metadataError: '',
      };
      this.cmdSuggestionsOpen = false;
      this.filteredCmdSuggestions = [];
      // Fresh metadata edit state
      this.metaForm = {name: '', description: ''};
      this.metaSaved = {name: '', description: ''};
      this.metaSaveError = '';
      this.metaSaving = false;
      this.installResult = '';
      // 5E.2 — reset version picker to snapshot on each new skill select.
      this.selectedVersion = 'snapshot';
      this.availableVersions = null;
      this.loadingDetail = true;
      try {
        // Fetch versions list first (cheap — no file walk) so the dropdown
        // is populated by the time the detail call returns.
        try {
          const vR = await fetch('/api/skills/playground/local/' + encodeURIComponent(id) + '/versions');
          if (vR.ok) this.availableVersions = await vR.json();
        } catch (e) { /* leave null — UI degrades to legacy single-version layout */ }

        await this._loadDetailForVersion(id, this.selectedVersion);
        // Fire-and-forget — populate / autocomplete cache for this skill.
        this.loadSkillCommands(id);
      } catch (e) { /* leave detail empty */ }
      finally { this.loadingDetail = false; }
    },

    // 5E.2 — internal helper: fetch detail for a specific version + seed
    // metadata edit form + auto-open skill.json (or boss.py).
    async _loadDetailForVersion(id, version) {
      const qs = version && version !== 'snapshot'
        ? '?version=' + encodeURIComponent(version) : '';
      const r = await fetch('/api/skills/playground/local/' + encodeURIComponent(id) + qs);
      if (!r.ok) return;
      this.detail = await r.json();
      this.manifestRows = this.buildManifestRows(this.detail.manifest);
      const m = this.detail.manifest || {};
      this.metaForm = {name: m.name || '', description: m.description || ''};
      this.metaSaved = {...this.metaForm};
      // Reset Ace buffers since we're showing different files now
      this.dirtyFiles = {};
      this.fileBuffers = {};
      this.savedBuffers = {};
      const files = this.detail.files || [];
      if (files.includes('skill.json')) {
        await this.openFile('skill.json');
      } else if (files.includes('boss.py')) {
        await this.openFile('boss.py');
      } else {
        this.currentFile = '';
        this.fileContent = null;
      }
    },

    // Called from the version dropdown's @change.
    async onVersionChange() {
      if (!this.selectedId) return;
      this.loadingDetail = true;
      try {
        await this._loadDetailForVersion(this.selectedId, this.selectedVersion);
        // Defensive: _mountEditor sets ace's readOnly, but if a version
        // change leaves the same file open + same content (cache hit),
        // _mountEditor may have already run with stale `detail.writable`.
        // Re-assert here once `this.detail.writable` is guaranteed fresh.
        if (this.aceEditor && this.detail) {
          this.aceEditor.setReadOnly(!this.detail.writable);
        }
      } catch (e) { /* leave detail at last value */ }
      finally { this.loadingDetail = false; }
    },

    // ── Inline metadata save (name + description on blur) ─────────────

    async saveMetadataIfDirty() {
      if (!this.detail || !this.detail.manifest) return;
      const name = (this.metaForm.name || '').trim();
      const desc = (this.metaForm.description || '').trim();
      if (name === this.metaSaved.name && desc === this.metaSaved.description) return;
      if (!name) {
        this.metaSaveError = 'Skill name cannot be empty.';
        this.metaForm.name = this.metaSaved.name;
        return;
      }
      if (!desc) {
        this.metaSaveError = 'Description cannot be empty.';
        this.metaForm.description = this.metaSaved.description;
        return;
      }
      this.metaSaving = true;
      this.metaSaveError = '';
      try {
        // Read the current skill.json, patch name + description, write back.
        // Going through the editor's save path means we get the same
        // server-side validation the Ace save uses.
        const next = {...this.detail.manifest, name, description: desc};
        const r = await fetch(
          '/api/skills/playground/local/' + encodeURIComponent(this.selectedId) + '/file',
          {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
              path: 'skill.json',
              content: JSON.stringify(next, null, 2) + '\n',
            }),
          }
        );
        const data = await r.json();
        if (!r.ok) {
          this.metaSaveError = data.error
            + (data.details ? ': ' + data.details.join('; ') : '');
          return;
        }
        // Refresh detail (state + manifest_error may have changed).
        this.metaSaved = {name, description: desc};
        this.detail.manifest = next;
        this.manifestRows = this.buildManifestRows(next);
        // If skill.json is the open file, refresh its editor buffer so
        // the Ace view shows the patched JSON.
        if (this.currentFile === 'skill.json') {
          const fresh = JSON.stringify(next, null, 2) + '\n';
          this.fileSavedContent = fresh;
          this._buffer('skill.json', fresh, fresh);
          this._mountEditor('skill.json', fresh);
        }
        // Refresh the list so the new name shows up in the left rail.
        await this.loadSkills();
      } catch (e) {
        this.metaSaveError = 'Network error: ' + (e.message || e);
      } finally { this.metaSaving = false; }
    },

    // ── Install / Publish (state-machine handlers) ────
    // Uninstall reuses confirmRemove() — same DELETE endpoint as the
    // small Remove link in the header.

    async installFromPlayground() {
      // 5E.3: installs the CURRENTLY-SELECTED tag (never snapshot). The
      // selected version comes from the dropdown; we forward it in the
      // POST body so the backend writes _active.txt = version.
      if (!this.selectedId) return;
      if (this.selectedVersion === 'snapshot') {
        this.installResult = 'Tag a version first — snapshot is the editable working copy.';
        return;
      }
      this.installing = true;
      this.installResult = '';
      try {
        const r = await fetch(
          '/api/skills/playground/local/' + encodeURIComponent(this.selectedId) + '/install',
          {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({version: this.selectedVersion}),
          },
        );
        const data = await r.json();
        if (!r.ok) {
          this.installResult = data.error || ('Server returned ' + r.status);
          return;
        }
        if (data.restart_required) this.installResult = data.restart_required;
        // Refresh the versions list (active flag flipped) + detail.
        await this.onVersionChange();
        // Reload versions endpoint so the dropdown reflects active=true.
        try {
          const vR = await fetch('/api/skills/playground/local/' + encodeURIComponent(this.selectedId) + '/versions');
          if (vR.ok) this.availableVersions = await vR.json();
        } catch (e) { /* leave as-is */ }
        await this.loadSkills();
      } catch (e) {
        this.installResult = 'Network error: ' + (e.message || e);
      } finally { this.installing = false; }
    },

    async uninstallFromPlayground() {
      // 5E.3: clears _active.txt. The currently selected version stays
      // on disk (as do snapshot + every other tag); the orchestrator
      // drops the skill on next restart.
      if (!this.selectedId) return;
      if (!window.confirm(
        "Uninstall this version?\n\n" +
        "Clears the active pointer. Source dirs stay on disk so you can " +
        "re-install or edit. Agents lose access on next Ageri restart."
      )) return;
      this.installing = true;
      this.installResult = '';
      try {
        const r = await fetch(
          '/api/skills/playground/local/' + encodeURIComponent(this.selectedId) + '/uninstall',
          {method: 'POST'},
        );
        const data = await r.json();
        if (!r.ok) {
          this.installResult = data.error || ('Server returned ' + r.status);
          return;
        }
        if (data.restart_required) this.installResult = data.restart_required;
        await this.onVersionChange();
        try {
          const vR = await fetch('/api/skills/playground/local/' + encodeURIComponent(this.selectedId) + '/versions');
          if (vR.ok) this.availableVersions = await vR.json();
        } catch (e) { /* leave as-is */ }
        await this.loadSkills();
      } catch (e) {
        this.installResult = 'Network error: ' + (e.message || e);
      } finally { this.installing = false; }
    },

    async unpublishFromPlayground() {
      // 5E.6b: yank the current tag from the marketplace. Marketplace
      // is the source of truth — if the yank call fails, the local
      // publish marker is kept so the UI doesn't drift from reality.
      // After a successful yank, the version number can never be
      // re-published (npm/PyPI convention).
      if (!this.selectedId) return;
      if (this.selectedVersion === 'snapshot') return;
      const reason = window.prompt(
        "Yank " + this.selectedVersion + " from the marketplace?\n\n" +
        "This removes the listing — new installs of this version will 404. " +
        "Anyone who already installed it keeps their copy.\n\n" +
        "After yanking, the version number is permanently dead — you'll " +
        "need to bump (Tag a new version) for the next release.\n\n" +
        "(Optional) reason — shown to existing installers:",
        "publisher_yank",
      );
      // Cancel button on the prompt returns null
      if (reason === null) return;
      this.installing = true;
      this.installResult = '';
      try {
        const r = await fetch(
          '/api/skills/playground/local/' + encodeURIComponent(this.selectedId) + '/unpublish',
          {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({version: this.selectedVersion, reason}),
          },
        );
        const data = await r.json();
        if (!r.ok) {
          this.installResult = (data.error || ('Server returned ' + r.status))
            + (data.hint ? ' — ' + data.hint : '');
          return;
        }
        if (data.note) this.installResult = data.note;
        await this.onVersionChange();
        try {
          const vR = await fetch('/api/skills/playground/local/' + encodeURIComponent(this.selectedId) + '/versions');
          if (vR.ok) this.availableVersions = await vR.json();
        } catch (e) { /* leave as-is */ }
        await this.loadSkills();
      } catch (e) {
        this.installResult = 'Network error: ' + (e.message || e);
      } finally { this.installing = false; }
    },

    async restoreToSnapshot() {
      // 5E.7: copy this tag's files OVER the current snapshot. The
      // snapshot's current state is lost — confirm explicitly. After
      // success, snapshot's manifest version bumps to
      // <bump_patch(tag)>-snapshot, and we navigate the user back to
      // snapshot so they can see what landed.
      if (!this.selectedId || this.selectedVersion === 'snapshot') return;
      const tag = this.selectedVersion;
      const snapVersion = this.availableVersions?.snapshot?.version || '<current snapshot>';
      if (!window.confirm(
        "Restore " + tag + " to snapshot?\n\n" +
        "This will OVERWRITE everything in your snapshot/ working copy " +
        "(currently " + snapVersion + ") with the files from " + tag + ". " +
        "Unsaved edits in the snapshot will be lost.\n\n" +
        "The " + tag + " tag itself stays unchanged.\n\n" +
        "Continue?"
      )) return;
      this.installing = true;
      this.installResult = '';
      try {
        const r = await fetch(
          '/api/skills/playground/local/' + encodeURIComponent(this.selectedId) + '/restore',
          {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({version: tag}),
          },
        );
        const data = await r.json();
        if (!r.ok) {
          this.installResult = data.error || ('Server returned ' + r.status);
          return;
        }
        // Refresh versions (snapshot's version field has moved) + switch to
        // snapshot so the user sees the restored content. Side-effect: the
        // file picker's currentFile re-binds via _loadDetailForVersion.
        try {
          const vR = await fetch('/api/skills/playground/local/' + encodeURIComponent(this.selectedId) + '/versions');
          if (vR.ok) this.availableVersions = await vR.json();
        } catch (e) { /* leave as-is */ }
        this.selectedVersion = 'snapshot';
        await this.onVersionChange();
        await this.loadSkills();
        this.installResult = (
          'Restored ' + tag + ' → snapshot. New snapshot version: '
          + (data.snapshot_version || '?')
        );
      } catch (e) {
        this.installResult = 'Network error: ' + (e.message || e);
      } finally { this.installing = false; }
    },

    // ── Tag a version (5E.3) ──────────────────────────────────────────

    // Tiny semver patch-bumper for the modal's "next snapshot" auto-suggest.
    // Mirrors skill_loader._bump_patch on the server — if both stay in lockstep
    // the user's default never disagrees with what the server would compute.
    _suggestNextSnapshot(version) {
      const v = (version || '').trim();
      if (!v) return '';
      const parts = v.split('.');
      if (parts.length >= 3) {
        const m = (parts[2] || '').match(/^(\d+)/);
        if (m) {
          const next = parseInt(m[1], 10) + 1;
          return parts[0] + '.' + parts[1] + '.' + next + '-snapshot';
        }
      }
      return v + '.1-snapshot';
    },

    openTagModal() {
      // Suggest the snapshot's version with -snapshot stripped as the
      // default new tag — keeps semver in lockstep with what the user
      // already typed into skill.json.
      const snapVersion = (this.detail && this.detail.manifest && this.detail.manifest.version) || '';
      const suggestedRelease = snapVersion.toLowerCase().endsWith('-snapshot')
        ? snapVersion.slice(0, -'-snapshot'.length)
        : snapVersion;
      this.tagModal = {
        open: true,
        version: suggestedRelease,
        next_snapshot_version: this._suggestNextSnapshot(suggestedRelease),
        userTouchedNext: false,
        error: '',
        creating: false,
      };
    },

    closeTagModal() {
      if (this.tagModal && this.tagModal.creating) return;
      this.tagModal = {
        open: false, version: '', next_snapshot_version: '',
        userTouchedNext: false, error: '', creating: false,
      };
    },

    async submitTag() {
      if (!this.selectedId || !this.tagModal) return;
      const v = (this.tagModal.version || '').trim();
      const nextSnap = (this.tagModal.next_snapshot_version || '').trim();
      if (!v) {
        this.tagModal.error = 'Release version is required.';
        return;
      }
      // Snapshot version is also required — without it, server uses its
      // default but we still want to surface the value to the user before
      // submit. Empty here means they cleared it intentionally → block.
      if (!nextSnap) {
        this.tagModal.error = 'Next development version is required.';
        return;
      }
      if (!/-snapshot$/i.test(nextSnap)) {
        this.tagModal.error = 'Next development version must end with -snapshot.';
        return;
      }
      this.tagModal.creating = true;
      this.tagModal.error = '';
      try {
        const r = await fetch(
          '/api/skills/playground/local/' + encodeURIComponent(this.selectedId) + '/tag',
          {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
              version: v,
              next_snapshot_version: nextSnap,
            }),
          },
        );
        const data = await r.json();
        if (!r.ok) {
          this.tagModal.error = data.error || ('Server returned ' + r.status);
          return;
        }
        // Success: refresh versions, switch to the new tag, close modal.
        try {
          const vR = await fetch('/api/skills/playground/local/' + encodeURIComponent(this.selectedId) + '/versions');
          if (vR.ok) this.availableVersions = await vR.json();
        } catch (e) { /* leave as-is */ }
        this.selectedVersion = v;
        await this.onVersionChange();
        await this.loadSkills();
        this.closeTagModal();
      } catch (e) {
        this.tagModal.error = 'Network error: ' + (e.message || e);
      } finally {
        if (this.tagModal) this.tagModal.creating = false;
      }
    },

    // ── 5E.5 Publisher flow ────────────────────────────────────────────

    // Convenience: tags for the currently-picked skill in the publisher modal.
    get pubModal_tagsForSelected() {
      const id = this.pubModal.pickForm.skill_id;
      if (!id) return [];
      const s = (this.pubModal.publishable || []).find(x => x.skill_id === id);
      return (s && s.tags) || [];
    },

    async loadPublisherStatus() {
      try {
        const r = await fetch('/api/skills/publisher/status');
        if (!r.ok) return;
        const data = await r.json();
        this.publisherStatus = {
          registered: !!data.registered,
          author: data.author || null,
          // 5E.5 polish: the user's own Ageri namespace — pre-fills the
          // registration form and is enforced server-side.
          default_namespace: data.default_namespace || '',
          default_display_name: data.default_display_name || '',
        };
      } catch (e) { /* leave defaults */ }
    },

    async openPublisherModal(preselect) {
      // `preselect` (optional): {skill_id, version} pre-fills the picker
      // when this modal is opened from a per-tag Publish button. The
      // pre-selection survives the registration step so a brand-new
      // publisher's first action can land directly on Publish.
      this.pubModal.open = true;
      this.pubModal.error = '';
      this.pubModal.successMessage = '';
      this.pubModal.pickForm = {
        skill_id: preselect?.skill_id || '',
        version: preselect?.version || '',
      };
      await this.loadPublisherStatus();
      // Seed registration form from the user's own namespace.
      this.pubModal.regForm = {
        namespace: this.publisherStatus.default_namespace || '',
        display_name: this.publisherStatus.default_display_name || '',
        email: '',
      };
      if (this.publisherStatus.registered) {
        await this._loadPublishable();
      }
    },

    closePubModal() {
      if (this.pubModal.submitting) return;
      this.pubModal.open = false;
    },

    async _loadPublishable() {
      this.pubModal.loading = true;
      try {
        const r = await fetch('/api/skills/publisher/publishable');
        if (!r.ok) return;
        const data = await r.json();
        this.pubModal.publishable = data.skills || [];
      } catch (e) { /* leave empty */ }
      finally { this.pubModal.loading = false; }
    },

    async submitRegistration() {
      const ns = (this.pubModal.regForm.namespace || '').trim();
      const email = (this.pubModal.regForm.email || '').trim();
      if (!ns) { this.pubModal.error = 'Namespace is required.'; return; }
      if (!email) { this.pubModal.error = 'Email is required.'; return; }
      // Light client-side shape check; server does authoritative validation.
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        this.pubModal.error = 'Email doesn\'t look valid.';
        return;
      }
      this.pubModal.submitting = true;
      this.pubModal.error = '';
      try {
        const r = await fetch('/api/skills/publisher/register', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            namespace: ns,
            display_name: (this.pubModal.regForm.display_name || '').trim() || ns,
            email: email,
          }),
        });
        const data = await r.json();
        if (!r.ok) {
          this.pubModal.error = data.error || ('Server returned ' + r.status);
          return;
        }
        this.publisherStatus = {registered: true, author: data.author};
        this.pubModal.successMessage = 'Registered as ' + ns + '. Now pick a version to publish.';
        await this._loadPublishable();
      } catch (e) {
        this.pubModal.error = 'Network error: ' + (e.message || e);
      } finally { this.pubModal.submitting = false; }
    },

    async submitPublish() {
      const {skill_id, version} = this.pubModal.pickForm;
      if (!skill_id || !version) return;
      this.pubModal.submitting = true;
      this.pubModal.error = '';
      this.pubModal.successMessage = '';
      try {
        const r = await fetch(
          '/api/skills/playground/local/' + encodeURIComponent(skill_id) + '/publish',
          {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({version}),
          },
        );
        const data = await r.json();
        if (!r.ok) {
          this.pubModal.error = data.error || ('Server returned ' + r.status);
          return;
        }
        // 5E.6b: backend now actually uploads; success message reflects
        // the live state. The marketplace_uri carried in state_detail
        // is what other users will see.
        const uri = data.state_detail?.marketplace_uri || '';
        this.pubModal.successMessage =
          'Published ' + skill_id + '@' + version
          + (uri ? ' — live at ' + uri : '')
          + (data.note ? '. ' + data.note : '');
        // Refresh the picker to reflect the now-published flag on this tag.
        await this._loadPublishable();
        // If user is currently viewing this skill, refresh versions + detail
        // so the in-app state updates without a page reload.
        if (this.selectedId === skill_id) {
          try {
            const vR = await fetch('/api/skills/playground/local/' + encodeURIComponent(skill_id) + '/versions');
            if (vR.ok) this.availableVersions = await vR.json();
          } catch (e) { /* leave as-is */ }
          if (this.selectedVersion === version) await this.onVersionChange();
        }
        await this.loadSkills();
      } catch (e) {
        this.pubModal.error = 'Network error: ' + (e.message || e);
      } finally { this.pubModal.submitting = false; }
    },

    async signOutPublisher() {
      // Clear local credentials only — marketplace namespace stays claimed.
      // No backend endpoint yet; user can re-register if they need a
      // different namespace via the CLI.
      if (!window.confirm(
        "Sign out as publisher?\n\n" +
        "Clears the marketplace token + author identity stored locally. " +
        "Your namespace stays claimed on the marketplace. You can re-sign-in " +
        "by registering again with the same namespace (no new claim charged)."
      )) return;
      // Best-effort: hit a DELETE endpoint when we add one (5E.6). For now,
      // we just flip the UI back — the credentials remain in the file but
      // the user can re-enter / overwrite.
      this.publisherStatus = {registered: false, author: null};
      this.pubModal.successMessage = '';
      this.pubModal.error = (
        'Sign-out is local-only for now — credentials still on disk. ' +
        'A clean revoke endpoint lands in 5E.6.'
      );
    },

    buildManifestRows(m) {
      if (!m) return [];
      const rows = [];
      const push = (k, v) => { if (v !== undefined && v !== null && v !== '') rows.push({key: k, val: v}); };
      push('id', m.id);
      push('version', m.version);
      push('category', m.category);
      push('license', m.license || 'proprietary (default)');
      push('trust_level', m.trust_level);
      if (m.author) {
        push('author', m.author.id + (m.author.namespace ? ' (' + m.author.namespace + ')' : ''));
      }
      if (m.permissions && Array.isArray(m.permissions.tools)) {
        push('tools', m.permissions.tools.join(', ') || '(none)');
      }
      push('min_age', m.min_age);
      push('pricing', m.pricing && m.pricing.model);
      return rows;
    },

    async openFile(path) {
      // Stamp this request — if the user switches files mid-fetch,
      // the older fetch's resolve() must NOT paint the editor with
      // stale content (observed bug: dropdown showed boss.py but the
      // editor still displayed skill.json content).
      const myReq = ++this._openFileReq;
      this.currentFile = path;
      this.fileContent = null;
      this.fileError = '';
      this.manifestSaveErrors = [];
      // Keep dirty buffer when switching back to a modified file —
      // user might be tab-switching between skill.json and boss.py.
      if (this.dirtyFiles[path] && this.fileBuffers && this.fileBuffers[path] !== undefined) {
        if (this._openFileReq !== myReq) return;
        this.fileContent = this.fileBuffers[path];
        this.fileSavedContent = this.savedBuffers[path] || '';
        this._mountEditor(path, this.fileContent);
        return;
      }
      this.loadingFile = true;
      try {
        const versionQs = (this.selectedVersion && this.selectedVersion !== 'snapshot')
          ? '&version=' + encodeURIComponent(this.selectedVersion) : '';
        const r = await fetch(
          '/api/skills/playground/local/' + encodeURIComponent(this.selectedId)
          + '/file?path=' + encodeURIComponent(path) + versionQs
        );
        if (this._openFileReq !== myReq) return;  // superseded
        const data = await r.json();
        if (this._openFileReq !== myReq) return;  // superseded
        if (!r.ok) {
          this.fileError = data.error || ('Server returned ' + r.status);
          return;
        }
        this.fileContent = data.content;
        this.fileSavedContent = data.content;
        this._buffer(path, data.content, data.content);
        this._mountEditor(path, data.content);
      } catch (e) {
        if (this._openFileReq !== myReq) return;
        this.fileError = 'Network error: ' + (e.message || e);
      } finally {
        if (this._openFileReq === myReq) this.loadingFile = false;
      }
    },

    // ── Editor plumbing ────────────────────────────────────────────────

    fileBuffers: {},
    savedBuffers: {},

    _buffer(path, current, saved) {
      this.fileBuffers[path] = current;
      this.savedBuffers[path] = saved;
      if (current !== saved) {
        this.dirtyFiles[path] = true;
      } else {
        delete this.dirtyFiles[path];
      }
    },

    _modeFor(path) {
      const lower = path.toLowerCase();
      if (lower.endsWith('.py')) return 'ace/mode/python';
      if (lower.endsWith('.json')) return 'ace/mode/json';
      if (lower.endsWith('.md')) return 'ace/mode/markdown';
      if (lower.endsWith('.yaml') || lower.endsWith('.yml')) return 'ace/mode/yaml';
      if (lower.endsWith('.toml')) return 'ace/mode/toml';
      if (lower.endsWith('.properties') || lower.endsWith('.ini') || lower.endsWith('.cfg')) {
        return 'ace/mode/properties';
      }
      return 'ace/mode/text';
    },

    _mountEditor(path, content) {
      // Wait one tick so the host div is in the DOM (x-show toggles it).
      const self = this;
      this.$nextTick(() => {
        const host = document.getElementById('ace-editor-host');
        if (!host) return;
        if (typeof ace === 'undefined') {
          self.fileError = 'Ace editor failed to load. Check your network connection or pull from a different CDN.';
          return;
        }
        // 5E.5 critical fix: Alpine's parent x-if remount creates a FRESH
        // #ace-editor-host element on every detail change. The previous
        // ace.edit() result is still bound to the now-detached old host
        // (which is orphaned with no width/height), so Ace renders to
        // nothing — the new host div in the DOM is empty.
        // Detect element mismatch and tear down + rebind. The change
        // handler is re-registered against the new instance.
        if (self.aceEditor && self.aceEditor.container !== host) {
          try { self.aceEditor.destroy(); } catch (e) { /* best-effort */ }
          self.aceEditor = null;
        }
        if (!self.aceEditor) {
          self.aceEditor = ace.edit(host);
          self.aceEditor.setTheme('ace/theme/tomorrow_night');
          self.aceEditor.setOptions({
            fontSize: '13px',
            showPrintMargin: false,
            tabSize: 4,
            useSoftTabs: true,
            scrollPastEnd: 0.2,
          });
          self.aceEditor.session.on('change', () => {
            if (self._suppressChangeEvent) return;
            const v = self.aceEditor.getValue();
            self.fileContent = v;
            self._buffer(self.currentFile, v, self.fileSavedContent);
          });
        }
        self._suppressChangeEvent = true;
        self.aceEditor.session.setMode(self._modeFor(path));
        self.aceEditor.setValue(content, -1);  // -1 = cursor at start, no select
        // 5E.2: Ace itself goes read-only when viewing a tagged version.
        self.aceEditor.setReadOnly(!(self.detail && self.detail.writable));
        // Belt-and-braces: force a layout recompute after every mount.
        self.aceEditor.resize(true);
        self.aceEditor.renderer.updateFull(true);
        self._suppressChangeEvent = false;
      });
    },

    async saveCurrentFile() {
      if (!this.currentFile || !this.dirtyFiles[this.currentFile]) return;
      this.saving = true;
      this.fileError = '';
      this.manifestSaveErrors = [];
      try {
        const r = await fetch(
          '/api/skills/playground/local/' + encodeURIComponent(this.selectedId) + '/file',
          {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
              path: this.currentFile,
              content: this.fileContent,
            }),
          }
        );
        const data = await r.json();
        if (!r.ok) {
          if (Array.isArray(data.details)) {
            this.manifestSaveErrors = data.details;
          }
          this.fileError = data.error || ('Server returned ' + r.status);
          return;
        }
        // Mark clean — current content is now the saved content.
        this.fileSavedContent = this.fileContent;
        this._buffer(this.currentFile, this.fileContent, this.fileContent);
        // If skill.json changed, refresh the detail panel so the
        // manifest summary + provenance card pick up the new values.
        if (this.currentFile === 'skill.json') {
          await this.selectSkill(this.selectedId);
        } else {
          await this.loadSkills();  // mtime in the index refreshes
        }
      } catch (e) {
        this.fileError = 'Network error: ' + (e.message || e);
      } finally { this.saving = false; }
    },

    revertCurrentFile() {
      if (!this.currentFile) return;
      this.fileContent = this.fileSavedContent;
      this._buffer(this.currentFile, this.fileSavedContent, this.fileSavedContent);
      this._mountEditor(this.currentFile, this.fileSavedContent);
      this.manifestSaveErrors = [];
    },

    // ── Test runner (v2.C tier 3) ──────────────────────────────────────

    formatElapsed(ms) {
      // Show ms < 1s, then s with 1 decimal up to 60s, then m:ss for longer runs.
      const v = Math.max(0, ms | 0);
      if (v < 1000) return v + 'ms';
      if (v < 60_000) return (v / 1000).toFixed(1) + 's';
      const totalSecs = Math.floor(v / 1000);
      const m = Math.floor(totalSecs / 60);
      const s = totalSecs % 60;
      return `${m}:${s.toString().padStart(2, '0')}`;
    },

    _clearTestTimers() {
      if (this._testTimerInterval) {
        clearInterval(this._testTimerInterval);
        this._testTimerInterval = null;
      }
      if (this._testPollInterval) {
        clearInterval(this._testPollInterval);
        this._testPollInterval = null;
      }
    },

    async runTest() {
      if (!this.selectedId || this.testing) return;
      // Validate metadata JSON client-side so the user sees parse errors immediately
      let metadata = {};
      this.testForm.metadataError = '';
      const mt = (this.testForm.metadataText || '').trim();
      if (mt) {
        try {
          metadata = JSON.parse(mt);
          if (typeof metadata !== 'object' || metadata === null || Array.isArray(metadata)) {
            this.testForm.metadataError = 'metadata must be a JSON object';
            return;
          }
        } catch (e) {
          this.testForm.metadataError = 'invalid JSON: ' + (e.message || e);
          return;
        }
      }
      this.testing = true;
      this.testResult = null;
      this.testElapsedMs = 0;
      this.testRunId = '';
      try {
        const r = await fetch(
          '/api/skills/playground/local/' + encodeURIComponent(this.selectedId) + '/test',
          {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
              message: this.testForm.message,
              metadata: metadata,
              // null = no timeout; run until user clicks Stop.
              timeout_secs: null,
            }),
          }
        );
        const data = await r.json();
        if (!r.ok || !data.run_id) {
          this.testResult = {
            ok: false,
            error: {
              kind: 'http',
              message: data.error || ('Server returned ' + r.status),
              traceback: null,
            },
            duration_ms: 0,
          };
          this.testing = false;
          return;
        }
        this.testRunId = data.run_id;
        const startedAt = Date.now();
        // Live elapsed timer (UI-only — server tracks its own clock).
        this._testTimerInterval = setInterval(() => {
          this.testElapsedMs = Date.now() - startedAt;
        }, 100);
        // Poll status every second.
        this._testPollInterval = setInterval(() => this._pollTestStatus(), 1000);
        // Kick once immediately so a sub-second run resolves without delay.
        this._pollTestStatus();
      } catch (e) {
        this.testResult = {
          ok: false,
          error: {kind: 'network', message: e.message || String(e), traceback: null},
          duration_ms: 0,
        };
        this.testing = false;
      }
    },

    async _pollTestStatus() {
      if (!this.testRunId) return;
      try {
        const r = await fetch(
          '/api/skills/playground/local/' + encodeURIComponent(this.selectedId)
            + '/test/' + encodeURIComponent(this.testRunId)
        );
        if (!r.ok) {
          if (r.status === 404) {
            // Run vanished (server restart?). Fall back to error.
            this._clearTestTimers();
            this.testResult = {
              ok: false,
              error: {kind: 'gone', message: 'Server lost the run.', traceback: null},
              duration_ms: this.testElapsedMs,
            };
            this.testing = false;
            this.testRunId = '';
          }
          return;
        }
        const data = await r.json();
        // Always reflect server-reported elapsed so the timer matches result.
        if (typeof data.elapsed_ms === 'number') this.testElapsedMs = data.elapsed_ms;
        if (data.state === 'running') return;  // keep polling
        // Done or cancelled — capture result and tear down timers.
        this._clearTestTimers();
        this.testResult = data.result || {ok: false, duration_ms: this.testElapsedMs};
        // Server may not always set duration_ms — backfill from elapsed_ms.
        if (this.testResult && (this.testResult.duration_ms == null || this.testResult.duration_ms === 0)) {
          this.testResult.duration_ms = this.testElapsedMs;
        }
        this.testing = false;
        this.testRunId = '';
      } catch (e) {
        // Network glitch — keep polling.
      }
    },

    async stopTest() {
      if (!this.testRunId) return;
      try {
        await fetch(
          '/api/skills/playground/local/' + encodeURIComponent(this.selectedId)
            + '/test/' + encodeURIComponent(this.testRunId),
          {method: 'DELETE'},
        );
      } catch (e) { /* fall through — the poll will catch the cancelled state */ }
      // Force an immediate status poll so the UI updates without the 1s lag.
      await this._pollTestStatus();
    },

    // ── Slash-command autocomplete (item 2) ────────────────────────────────

    async loadSkillCommands(skillId) {
      this.skillCommands = [];
      this.cmdSuggestionsOpen = false;
      this.filteredCmdSuggestions = [];
      if (!skillId) return;
      try {
        const r = await fetch('/api/skills/playground/local/' + encodeURIComponent(skillId) + '/commands');
        if (!r.ok) return;
        const data = await r.json();
        // Each entry's "full" is what gets inserted on accept — eg /invoice create.
        const slash = (data.slash_command || '').trim();
        this.skillCommands = (data.commands || []).map(c => ({
          name: c.name,
          description: c.description || '',
          usage: c.usage || '',
          full: slash ? '/' + slash + ' ' + c.name : '/' + c.name,
        }));
      } catch (e) { /* leave empty */ }
    },

    updateCmdSuggestions() {
      const msg = this.testForm.message || '';
      // Only suggest while the user is typing a leading "/<...>" — turn off
      // once whitespace or content moves past the command head.
      const m = msg.match(/^(\/[\w-]*)$/);
      if (!m || this.skillCommands.length === 0) {
        this.cmdSuggestionsOpen = false;
        this.filteredCmdSuggestions = [];
        return;
      }
      const prefix = m[1].toLowerCase();
      const matches = this.skillCommands.filter(c =>
        c.full.toLowerCase().startsWith(prefix)
      );
      this.filteredCmdSuggestions = matches;
      this.cmdSuggestionsOpen = matches.length > 0;
      this.cmdSuggestionIdx = 0;
    },

    cmdSuggestionMove(delta) {
      if (!this.cmdSuggestionsOpen) {
        this.updateCmdSuggestions();
        if (!this.cmdSuggestionsOpen) return;
      }
      const n = this.filteredCmdSuggestions.length;
      if (n === 0) return;
      this.cmdSuggestionIdx = ((this.cmdSuggestionIdx + delta) % n + n) % n;
    },

    cmdSuggestionApply(idx) {
      const i = typeof idx === 'number' ? idx : this.cmdSuggestionIdx;
      const pick = this.filteredCmdSuggestions[i];
      if (!pick) return;
      // Append a space so the user can keep typing arguments after the cmd.
      this.testForm.message = pick.full + ' ';
      this.cmdSuggestionsOpen = false;
      this.filteredCmdSuggestions = [];
    },

    openCreateModal() {
      this.createOpen = true;
      this.createTab = 'picker';
      this.createError = '';
      this.scratchForm = {skill_id: '', template: 'blank', force: false};
      this.importForm = {uri: '', update: false, force: false};
      this.recordState = 'setup';
      this.recordForm = {skill_id: '', name: '', description: '', window_title: ''};
      this.recordSession = null;
      this.recordStepCount = 0;
      this.stopRecordPoll();
      this.manualDescription = '';
      // Mixed-recording tab — fresh reset every modal open
      this.mixedState = 'setup';
      this.mixedForm = {skill_id: '', name: '', description: '', initial_url: '', window_title: ''};
      this.mixedSession = null;
      this.mixedSteps = [];
      this.stopMixedPoll();
      // .ags upload reset
      this.agsState = 'upload';
      this.agsFile = null;
      this.agsDragging = false;
      this.agsInstalling = false;
      this.agsResult = null;
      // Describe reset
      this.resetDescribe();
    },

    // ── Describe what you want (Commit B) ──────────────────────────────

    resetDescribe() {
      this.describeState = 'input';
      this.describeForm = {description: ''};
      this.describeQuestions = [];
      this.describeAnswers = {};
      this.describeResult = null;
      this.describing = false;
    },

    async _callDescribe(extraBody) {
      this.describing = true;
      this.createError = '';
      try {
        const body = Object.assign({
          description: this.describeForm.description,
        }, extraBody || {});
        const r = await fetch('/api/skills/playground/describe', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(body),
        });
        const data = await r.json();
        if (!r.ok) {
          this.createError = data.error || ('Server returned ' + r.status);
          return null;
        }
        return data;
      } catch (e) {
        this.createError = 'Network error: ' + (e.message || e);
        return null;
      } finally { this.describing = false; }
    },

    async describeContinue() {
      const desc = (this.describeForm.description || '').trim();
      if (!desc) return;
      const data = await this._callDescribe(null);
      if (!data) return;
      if (data.phase === 'questions') {
        this.describeQuestions = data.questions || [];
        // Initialise answer map so x-model works for each input
        this.describeAnswers = {};
        for (const q of this.describeQuestions) {
          this.describeAnswers[q] = '';
        }
        this.describeState = 'questions';
      } else if (data.phase === 'scaffolded') {
        this.describeResult = data;
        this.describeState = 'scaffolded';
      } else {
        this.createError = 'Unexpected response from Ageri: ' + JSON.stringify(data).slice(0, 200);
      }
    },

    // ── Remove skill ─────────────────────────────────────────────────

    async confirmRemove() {
      if (!this.selectedId) return;
      const id = this.selectedId;
      // Confirmation prompt — irreversible, so make the user type the id.
      if (!window.confirm(
        `Remove ${id}?\n\nThis deletes ~/ageri/skills/local/${id}/ and any provenance sidecar. The skill's per-agent memory rows are kept (use the marketplace 'Clear data' button for that). This cannot be undone.`
      )) return;
      this.removing = true;
      this.removeError = '';
      try {
        const r = await fetch(
          '/api/skills/playground/local/' + encodeURIComponent(id),
          {method: 'DELETE'},
        );
        const data = await r.json();
        if (!r.ok) {
          this.removeError = data.error || ('Server returned ' + r.status);
          return;
        }
        // Drop the detail panel, refresh the list. If the user had a
        // dirty editor buffer for this skill, it's silently discarded
        // — same as the implicit data loss when they remove anything.
        this.selectedId = '';
        this.detail = null;
        this.dirtyFiles = {};
        this.fileBuffers = {};
        this.savedBuffers = {};
        this.currentFile = '';
        this.fileContent = null;
        await this.loadSkills();
      } catch (e) {
        this.removeError = 'Network error: ' + (e.message || e);
      } finally { this.removing = false; }
    },

    async describeScaffold() {
      // Skip-empty-answers — server tolerates missing answers and falls
      // back to LLM-picked defaults.
      const answers = {};
      for (const q of this.describeQuestions) {
        const v = (this.describeAnswers[q] || '').trim();
        if (v) answers[q] = v;
      }
      const data = await this._callDescribe({answers});
      if (!data) return;
      if (data.phase === 'questions') {
        // The LLM came back with MORE questions. Replace the prior set.
        this.describeQuestions = data.questions || [];
        const next = {};
        for (const q of this.describeQuestions) next[q] = '';
        this.describeAnswers = next;
        // Stay on 'questions' view
      } else if (data.phase === 'scaffolded') {
        this.describeResult = data;
        this.describeState = 'scaffolded';
      } else {
        this.createError = 'Unexpected response from Ageri: ' + JSON.stringify(data).slice(0, 200);
      }
    },

    // ── .ags upload (Commit A) ─────────────────────────────────────────

    handleAgsFile(file) {
      this.createError = '';
      if (!file) return;
      if (!file.name.toLowerCase().endsWith('.ags')) {
        this.createError = 'File must be a .ags bundle.';
        return;
      }
      if (file.size > 50 * 1024 * 1024) {
        this.createError = 'Bundle exceeds the 50 MB size cap.';
        return;
      }
      this.agsFile = file;
    },

    async installAgs() {
      if (!this.agsFile) return;
      this.agsInstalling = true;
      this.createError = '';
      try {
        const fd = new FormData();
        fd.append('bundle', this.agsFile);
        const r = await fetch('/api/skills/playground/install-ags', {
          method: 'POST', body: fd,
        });
        const data = await r.json();
        if (!r.ok) {
          let msg = data.error || ('Server returned ' + r.status);
          if (Array.isArray(data.details) && data.details.length) {
            msg += ': ' + data.details.join('; ');
          }
          this.createError = msg;
          return;
        }
        this.agsResult = data;
        this.agsState = 'installed';
        // Refresh the skill list in the background so the new install
        // shows up immediately when the user dismisses the modal.
        this.loadSkills();
      } catch (e) {
        this.createError = 'Network error: ' + (e.message || e);
      } finally { this.agsInstalling = false; }
    },

    // ── Mixed recording (v2.E) ─────────────────────────────────────────

    async startMixed() {
      this.starting = true;
      this.createError = '';
      try {
        const r = await fetch('/api/skills/playground/record-mixed/start', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            skill_id: this.mixedForm.skill_id,
            name: this.mixedForm.name,
            description: this.mixedForm.description,
            initial_url: this.mixedForm.initial_url,
            window_title: this.mixedForm.window_title,
          }),
        });
        const data = await r.json();
        if (!r.ok) {
          this.createError = data.error || ('Server returned ' + r.status);
          return;
        }
        this.mixedSession = data;
        this.mixedSteps = data.steps || [];
        this.mixedState = 'active';
        this.startMixedPoll();
      } catch (e) {
        this.createError = 'Network error: ' + (e.message || e);
      } finally { this.starting = false; }
    },

    startMixedPoll() {
      this.stopMixedPoll();
      this.mixedPollTimer = setInterval(() => this.pollMixed(), 1500);
    },

    stopMixedPoll() {
      if (this.mixedPollTimer) {
        clearInterval(this.mixedPollTimer);
        this.mixedPollTimer = null;
      }
    },

    async pollMixed() {
      if (!this.mixedSession) return;
      try {
        const r = await fetch(
          '/api/skills/playground/record-mixed/'
          + encodeURIComponent(this.mixedSession.session_id) + '/poll'
        );
        if (r.ok) {
          const data = await r.json();
          this.mixedSteps = data.steps || [];
        }
      } catch (e) { /* keep polling */ }
    },

    async captureMixedDesktop() {
      if (!this.mixedSession) return;
      this.capturing = true;
      try {
        const r = await fetch(
          '/api/skills/playground/record-mixed/'
          + encodeURIComponent(this.mixedSession.session_id) + '/capture-desktop',
          {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({})}
        );
        const data = await r.json();
        if (!r.ok) {
          this.createError = data.error || ('Server returned ' + r.status);
          return;
        }
        await this.pollMixed();
      } catch (e) {
        this.createError = 'Network error: ' + (e.message || e);
      } finally { this.capturing = false; }
    },

    async captureMixedClipboard() {
      if (!this.mixedSession) return;
      this.capturing = true;
      try {
        const r = await fetch(
          '/api/skills/playground/record-mixed/'
          + encodeURIComponent(this.mixedSession.session_id) + '/capture-clipboard',
          {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({})}
        );
        const data = await r.json();
        if (!r.ok) {
          this.createError = data.error || ('Server returned ' + r.status);
          return;
        }
        await this.pollMixed();
      } catch (e) {
        this.createError = 'Network error: ' + (e.message || e);
      } finally { this.capturing = false; }
    },

    async cancelMixed() {
      if (!this.mixedSession) {
        this.createOpen = false;
        return;
      }
      try {
        await fetch(
          '/api/skills/playground/record-mixed/'
          + encodeURIComponent(this.mixedSession.session_id) + '/cancel',
          {method: 'POST'}
        );
      } catch (e) { /* closing anyway */ }
      this.stopMixedPoll();
      this.createOpen = false;
    },

    async finishMixed() {
      if (!this.mixedSession) return;
      this.finishing = true;
      this.createError = '';
      try {
        const r = await fetch(
          '/api/skills/playground/record-mixed/'
          + encodeURIComponent(this.mixedSession.session_id) + '/finish',
          {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({force: false})}
        );
        const data = await r.json();
        if (!r.ok) {
          this.createError = data.error || ('Server returned ' + r.status);
          return;
        }
        this.stopMixedPoll();
        this.createOpen = false;
        await this.loadSkills();
        await this.selectSkill(data.skill_id);
      } catch (e) {
        this.createError = 'Network error: ' + (e.message || e);
      } finally { this.finishing = false; }
    },

    // ── Desktop recording ──────────────────────────────────────────────

    async startRecording() {
      this.starting = true;
      this.createError = '';
      try {
        const r = await fetch('/api/skills/playground/record-desktop/start', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            skill_id: this.recordForm.skill_id,
            name: this.recordForm.name,
            description: this.recordForm.description,
            window_title: this.recordForm.window_title,
          }),
        });
        const data = await r.json();
        if (!r.ok) {
          this.createError = data.error || ('Server returned ' + r.status);
          return;
        }
        this.recordSession = data;
        this.recordStepCount = data.step_count || 0;
        this.recordState = 'active';
        this.startRecordPoll();
      } catch (e) {
        this.createError = 'Network error: ' + (e.message || e);
      } finally { this.starting = false; }
    },

    startRecordPoll() {
      this.stopRecordPoll();
      this.recordPollTimer = setInterval(() => this.pollRecord(), 1500);
    },

    stopRecordPoll() {
      if (this.recordPollTimer) {
        clearInterval(this.recordPollTimer);
        this.recordPollTimer = null;
      }
    },

    async pollRecord() {
      if (!this.recordSession) return;
      try {
        const r = await fetch(
          '/api/skills/playground/record-desktop/'
          + encodeURIComponent(this.recordSession.session_id) + '/poll'
        );
        if (r.ok) {
          const data = await r.json();
          this.recordStepCount = data.step_count || 0;
        }
      } catch (e) { /* keep polling */ }
    },

    async manualCapture() {
      if (!this.recordSession) return;
      this.capturing = true;
      try {
        const r = await fetch(
          '/api/skills/playground/record-desktop/'
          + encodeURIComponent(this.recordSession.session_id) + '/capture',
          {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({description: this.manualDescription || ''}),
          }
        );
        const data = await r.json();
        if (!r.ok) {
          this.createError = data.error || ('Server returned ' + r.status);
          return;
        }
        this.recordStepCount = data.step_count || this.recordStepCount + 1;
        this.manualDescription = '';
      } catch (e) {
        this.createError = 'Network error: ' + (e.message || e);
      } finally { this.capturing = false; }
    },

    async cancelRecording() {
      if (!this.recordSession) {
        this.createOpen = false;
        return;
      }
      try {
        await fetch(
          '/api/skills/playground/record-desktop/'
          + encodeURIComponent(this.recordSession.session_id) + '/cancel',
          {method: 'POST'}
        );
      } catch (e) { /* ignore — closing anyway */ }
      this.stopRecordPoll();
      this.createOpen = false;
    },

    async finishRecording() {
      if (!this.recordSession) return;
      this.finishing = true;
      this.createError = '';
      try {
        const r = await fetch(
          '/api/skills/playground/record-desktop/'
          + encodeURIComponent(this.recordSession.session_id) + '/finish',
          {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({force: false}),
          }
        );
        const data = await r.json();
        if (!r.ok) {
          this.createError = data.error || ('Server returned ' + r.status);
          return;
        }
        this.stopRecordPoll();
        this.createOpen = false;
        await this.loadSkills();
        await this.selectSkill(data.skill_id);
      } catch (e) {
        this.createError = 'Network error: ' + (e.message || e);
      } finally { this.finishing = false; }
    },

    async submitScratch() {
      this.creating = true;
      this.createError = '';
      try {
        const r = await fetch('/api/skills/playground/init', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(this.scratchForm),
        });
        const data = await r.json();
        if (!r.ok) {
          this.createError = data.error || ('Server returned ' + r.status);
          return;
        }
        this.createOpen = false;
        await this.loadSkills();
        await this.selectSkill(data.skill_id);
      } catch (e) {
        this.createError = 'Network error: ' + (e.message || e);
      } finally { this.creating = false; }
    },

    async submitImport() {
      this.creating = true;
      this.createError = '';
      try {
        const r = await fetch('/api/skills/playground/import', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(this.importForm),
        });
        const data = await r.json();
        if (!r.ok) {
          this.createError = data.error || ('Server returned ' + r.status);
          return;
        }
        this.createOpen = false;
        await this.loadSkills();
        await this.selectSkill(data.skill_id);
      } catch (e) {
        this.createError = 'Network error: ' + (e.message || e);
      } finally { this.creating = false; }
    },
  };
}
</script>
{% endblock %}