Deploy Karate Wiener (kimodo kata maker)

app.py

@@ -250,11 +250,23 @@ APP_CSS = """
 .kimodo-cz-katafeat:hover:not(:disabled) { background: #7c6226 !important; color: #fff1c4 !important; }
 .kimodo-cz-katafeat:disabled { cursor: default; }
 .kimodo-cz-katafeat.featured { background: #8a6d12 !important; border-color: #d9ad33 !important; color: #fff6d6 !important; cursor: default; }
+/* SHARED browse header (kata + dojo libraries): the Mine/Community pill + create/add
+   button + search/sort, anchored (sticky) at the top of the scrolling list so they don't
+   scroll away. Both libraries are their own scroll container, so `position:sticky` works. */
+.kimodo-libhead { position: sticky; top: 0; z-index: 8; display: flex; flex-direction: column; gap: 8px; padding: 2px 0 9px; margin-bottom: 4px; background: #16161b; border-bottom: 1px solid #2a2233; }
+.kimodo-libhead .kimodo-cz-seg, .kimodo-libhead .kimodo-cz-libctrls, .kimodo-libhead .kimodo-cz-createbtn, .kimodo-libhead .kimodo-dojo-addbtn { margin: 0 !important; }
+/* Shared search input (kata + dojo). */
+.kimodo-libsearch { width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13px; color: #f2e6ff; background: #1c1622; border: 1px solid #4a3a60; border-radius: 8px; }
+.kimodo-libsearch::placeholder { color: #8a7aa0; }
+.kimodo-libsearch:focus { outline: none; border-color: #a86fe0; }
 /* Library browse controls: search filter + sort select. */
-.kimodo-cz-libctrls { display: flex; gap: 6px; margin-bottom: 10px; }
+.kimodo-cz-libctrls { display: flex; gap: 6px; }
 .kimodo-cz-cfilter { flex: 1; margin-bottom: 0 !important; }
 .kimodo-cz-csort { flex: 0 0 auto; padding: 8px 8px; font-size: 12px; color: #f2e6ff; background: #1c1622; border: 1px solid #4a3a60; border-radius: 8px; cursor: pointer; }
 .kimodo-cz-csort:focus { outline: none; border-color: #a86fe0; }
+/* Header "Create a kata" button (was an in-list card; now anchored, Mine only). */
+.kimodo-cz-createbtn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 11px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600; color: #e6c7ff !important; background: #3a2a55 !important; border: 1px dashed #a86fe0 !important; box-shadow: none !important; }
+.kimodo-cz-createbtn:hover { background: #46356a !important; }
 /* Card footer: upvote on the left, "★ Featured" badge pushed to the lower-right. */
 .kimodo-cz-cardfoot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
 /* Per-card upvote: ▲ + count; filled when this browser has voted. */
@@ -737,8 +749,8 @@ html, body, gradio-app, .gradio-container { height: 100%; margin: 0; overflow: h
 .kimodo-cz-tlcard.end .kimodo-cz-tlnode.endn { border-color: #d9776a; }
 .kimodo-cz-tlcard.gen { background: #1d1730; border-color: #4a3a6a; }   /* saved move = darker purple */
 .kimodo-cz-tlcard.cz-pending { background: #232026; border-color: #4a474f; }
-.kimodo-cz-tlcard.cz-active { border-color: #a86fe0; box-shadow: 0 0 0 1px #a86fe0; }
-.kimodo-cz-tlcard.sel { box-shadow: 0 0 0 2px #c79bff; }
+.kimodo-cz-tlcard.cz-active { border-color: #7dd3fc; box-shadow: 0 0 0 1px #7dd3fc; }
+.kimodo-cz-tlcard.sel { box-shadow: 0 0 0 2px #7dd3fc; }
 .kimodo-cz-tlcard.cz-justgen { animation: kimodo-cz-fromgray-card .55s ease; }
 .kimodo-cz-pcardrow.cz-pop .kimodo-cz-tlcard { animation: kimodo-cz-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
 .kimodo-cz-tlmeta { flex: 1; min-width: 0; }
@@ -749,7 +761,7 @@ html, body, gradio-app, .gradio-container { height: 100%; margin: 0; overflow: h
 .kimodo-cz-tlx { position: absolute; top: 3px; right: 5px; }
 .kimodo-cz-tlgrip { position: absolute; left: 0; right: 0; bottom: 0; height: 15px; display: flex; align-items: center; justify-content: center; cursor: ns-resize; touch-action: none; z-index: 5; }
 .kimodo-cz-tlgrip span { width: 28px; height: 3px; border-radius: 2px; background: #6a5a86; transition: background .15s ease; }
-.kimodo-cz-tlgrip:hover span, .kimodo-cz-tlcard.cz-active .kimodo-cz-tlgrip span { background: #a86fe0; }
+.kimodo-cz-tlgrip:hover span, .kimodo-cz-tlcard.cz-active .kimodo-cz-tlgrip span { background: #7dd3fc; }
 /* active-move controls below the timeline */
 .kimodo-cz-controls { margin-top: 12px; padding-top: 10px; border-top: 1px solid #2a2233; }
 .kimodo-cz-controlslab { font-size: 11px; font-weight: 600; color: #c9b6ea; margin-bottom: 6px; }
@@ -757,7 +769,7 @@ html, body, gradio-app, .gradio-container { height: 100%; margin: 0; overflow: h
    to set the length = the gap between them), GENERATE right under the end, then the
    collapsed refine prompt + the move/rotation numbers. ---- */
 .kimodo-cz-activerow { overflow: visible; }
-.kimodo-cz-editcard { position: relative; border: 1px solid #a86fe0; border-radius: 10px; background: #241a30; padding: 8px; box-shadow: 0 0 0 1px rgba(168,111,224,0.35); }
+.kimodo-cz-editcard { position: relative; border: 1px solid #7dd3fc; border-radius: 10px; background: #241a30; padding: 8px; box-shadow: 0 0 0 1px rgba(125,211,252,0.35); }
 /* A move edited after it was generated → dirty (amber) so it's clearly "needs Refresh". */
 .kimodo-cz-editcard.cz-dirty { border-color: #5a5a64; background: #26262c; box-shadow: 0 0 0 1px rgba(90,90,100,0.35); }   /* unsaved edit = gray (like a new move) */
 /* Not generated yet → gray. Once generated it pulses gray→purple; selecting a generated
@@ -766,14 +778,14 @@ html, body, gradio-app, .gradio-container { height: 100%; margin: 0; overflow: h
 .kimodo-cz-editcard.cz-genpulse { animation: kimodo-cz-gray2purple .6s ease both; }
 .kimodo-cz-editcard.cz-selpulse { animation: kimodo-cz-green2purple .6s ease both; }
 @keyframes kimodo-cz-gray2purple {
-  0% { background: #26262c; border-color: #5a5a64; box-shadow: 0 0 0 0 rgba(168,111,224,0); }
-  45% { box-shadow: 0 0 0 5px rgba(168,111,224,0.5); transform: scale(1.02); }
-  100% { background: #241a30; border-color: #a86fe0; box-shadow: 0 0 0 1px rgba(168,111,224,0.35); transform: scale(1); }
+  0% { background: #26262c; border-color: #5a5a64; box-shadow: 0 0 0 0 rgba(125,211,252,0); }
+  45% { box-shadow: 0 0 0 5px rgba(125,211,252,0.5); transform: scale(1.02); }
+  100% { background: #241a30; border-color: #7dd3fc; box-shadow: 0 0 0 1px rgba(125,211,252,0.35); transform: scale(1); }
 }
 @keyframes kimodo-cz-green2purple {
-  0% { background: #1d1730; border-color: #4a3a6a; box-shadow: 0 0 0 0 rgba(168,111,224,0); }   /* from the darker-purple saved card */
-  45% { box-shadow: 0 0 0 5px rgba(168,111,224,0.5); transform: scale(1.02); }
-  100% { background: #241a30; border-color: #a86fe0; box-shadow: 0 0 0 1px rgba(168,111,224,0.35); transform: scale(1); }
+  0% { background: #1d1730; border-color: #4a3a6a; box-shadow: 0 0 0 0 rgba(125,211,252,0); }   /* from the darker-purple saved card */
+  45% { box-shadow: 0 0 0 5px rgba(125,211,252,0.5); transform: scale(1.02); }
+  100% { background: #241a30; border-color: #7dd3fc; box-shadow: 0 0 0 1px rgba(125,211,252,0.35); transform: scale(1); }
 }
 .kimodo-cz-emmovelab { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #c9b6ea; margin: 0 0 5px 2px; }
 .kimodo-cz-emregion { position: relative; margin: 2px 2px 8px; }
@@ -4197,20 +4209,25 @@ def _drawers_html() -> str:
         # Library view (home): Mine/Community filter + a "＋ Create a kata" card on
         # top of the list, then the saved-kata cards.
         '<div id="kimodo-cz-library" class="kimodo-cz-view cz-active">',
+        # Anchored (sticky) browse header: pill + Create button (Mine) + search/sort
+        # (Community). renderComposeLibrary toggles which controls show per scope.
+        '<div class="kimodo-libhead">',
         '<div class="kimodo-cz-seg kimodo-cz-seg--sub" id="kimodo-cz-scope">',
         '<button type="button" class="kimodo-cz-segbtn active" data-scope="mine">Mine</button>',
         '<button type="button" class="kimodo-cz-segbtn" data-scope="community">Community</button>',
         '</div>',
-        # Browse controls: search filter + sort (Top by votes / Newest / Featured).
-        # Shown only on the Community tab (toggled in renderComposeLibrary).
+        # ＋ Create a kata — Mine only.
+        '<button type="button" id="kimodo-cz-create" class="kimodo-cz-createbtn"><span style="font-size:16px">＋</span> Create a kata</button>',
+        # Search + sort (Top by votes / Newest / Featured) — Community only.
         '<div class="kimodo-cz-libctrls" id="kimodo-cz-libctrls">',
-        '<input id="kimodo-cz-cfilter" class="kimodo-cz-pfilter kimodo-cz-cfilter" type="text" placeholder="Search katas…" autocomplete="off" />',
+        '<input id="kimodo-cz-cfilter" class="kimodo-libsearch kimodo-cz-cfilter" type="text" placeholder="🔍 search" autocomplete="off" />',
         '<select id="kimodo-cz-csort" class="kimodo-cz-csort" title="Sort / filter">',
         '<option value="top">▲ Top</option>',
         '<option value="newest">Newest</option>',
         '<option value="featured">★ Featured</option>',
         '</select>',
         '</div>',
+        '</div>',  # /libhead
         '<div id="kimodo-cz-katalist" class="kimodo-cz-katalist"></div>',
         '</div>',
         # Kata view (unified): tap a kata → view/edit it here with a scrubbable
@@ -5397,8 +5414,9 @@ _COMPOSE_JS = r"""
   function renderComposeLibrary() {
     const list = document.getElementById('kimodo-cz-katalist'); if (!list) return;
     document.querySelectorAll('#kimodo-cz-scope .kimodo-cz-segbtn').forEach((b) => b.classList.toggle('active', b.dataset.scope === composeScope));
-    // Browse controls (search + sort/featured) are a Community-only concern.
+    // Anchored header: Create button is Mine-only; search + sort/featured are Community-only.
     const ctrls = document.getElementById('kimodo-cz-libctrls'); if (ctrls) ctrls.style.display = (composeScope === 'community') ? '' : 'none';
+    const createBtn = document.getElementById('kimodo-cz-create'); if (createBtn) createBtn.style.display = (composeScope === 'mine') ? '' : 'none';
     // Mine = the localStorage entries (recipe-backed, instant); Community = the
     // server manifest. Mine cards are always recipe-editable; their filmstrips draw
     // from stance ids, so they don't depend on per-clip record files.
@@ -5419,13 +5437,7 @@ _COMPOSE_JS = r"""
       return (b.created || 0) - (a.created || 0);
     });
     list.innerHTML = '';
-    // ＋ Create a kata — only on Mine (you build into your own list, not the community feed).
-    if (composeScope === 'mine') {
-      const createCard = document.createElement('div'); createCard.className = 'kimodo-cz-createcard';
-      createCard.innerHTML = '<span style="font-size:16px">＋</span><span>Create a kata</span>';
-      createCard.onclick = () => newComposeKata();
-      list.appendChild(createCard);
-    }
+    // (The "＋ Create a kata" button now lives in the anchored header, Mine only.)
     if (!shown.length) {
       const e = document.createElement('div'); e.className = 'kimodo-cz-libempty';
       e.textContent = composeScope === 'mine'
@@ -6589,6 +6601,8 @@ _COMPOSE_JS = r"""
     if (cfilter) cfilter.addEventListener('input', () => { composeFilter = cfilter.value || ''; renderComposeLibrary(); });
     const csort = document.getElementById('kimodo-cz-csort');
     if (csort) { csort.value = composeSort; csort.addEventListener('change', () => { composeSort = csort.value || 'top'; renderComposeLibrary(); }); }
+    const ccreate = document.getElementById('kimodo-cz-create');
+    if (ccreate) ccreate.addEventListener('click', () => newComposeKata());
     // Move-mode pill: only changes the mode while the kata is empty (then it's locked).
     const modeSeg = document.getElementById('kimodo-cz-mode');
     if (modeSeg) modeSeg.addEventListener('click', (e) => {

tabs/dojo.drawer.html

@@ -2,11 +2,16 @@
 
   <!-- ============ LIBRARY VIEW: list of dojos (Mine / Community) ============ -->
   <div id="kimodo-dojo-library" class="kimodo-dojo-view">
-    <div class="kimodo-cz-seg kimodo-cz-seg--sub kimodo-dojo-seg" id="kimodo-dojo-scope" aria-label="Dojo scope">
-      <button type="button" class="kimodo-cz-segbtn active" data-scope="mine">Mine</button>
-      <button type="button" class="kimodo-cz-segbtn" data-scope="community">Community</button>
+    <!-- Anchored (sticky) browse header — same pattern as the kata library: pill + Add
+         (Mine only) + search (Community only). Toggled per scope in renderLibrary. -->
+    <div class="kimodo-libhead">
+      <div class="kimodo-cz-seg kimodo-cz-seg--sub kimodo-dojo-seg" id="kimodo-dojo-scope" aria-label="Dojo scope">
+        <button type="button" class="kimodo-cz-segbtn active" data-scope="mine">Mine</button>
+        <button type="button" class="kimodo-cz-segbtn" data-scope="community">Community</button>
+      </div>
+      <button id="kimodo-dojo-add" class="kimodo-dojo-addbtn" type="button">＋ Add dojo</button>
+      <input id="kimodo-dojo-search" class="kimodo-libsearch" type="text" placeholder="🔍 search" autocomplete="off" />
     </div>
-    <button id="kimodo-dojo-add" class="kimodo-dojo-addbtn" type="button">＋ Add dojo</button>
     <div id="kimodo-dojo-grid" class="kimodo-dojo-cards" aria-label="Dojo list"></div>
     <div id="kimodo-dojo-empty" class="kimodo-drawer-sub kimodo-dojo-empty"></div>
   </div>

tabs/dojo.tab.js

@@ -3,6 +3,7 @@
   let dojoMode = 'splat';
   let lastScene = null;
   let dojoScope = 'mine';
+  let dojoSearch = '';          // library search query (matches dojo name)
   let improvedByAya = false;   // current prompt came from tiny-aya → button reads "reroll"
   let improving = false;       // a tiny-aya suggestion call is in flight
   let _communityCache = null;  // canonical + contributed dojos fetched from the dataset
@@ -25,6 +26,7 @@
       create: document.getElementById('kimodo-dojo-create'),
       scope: document.getElementById('kimodo-dojo-scope'),
       add: document.getElementById('kimodo-dojo-add'),
+      search: document.getElementById('kimodo-dojo-search'),
       back: document.getElementById('kimodo-dojo-back'),
       grid: document.getElementById('kimodo-dojo-grid'),
       emptyMsg: document.getElementById('kimodo-dojo-empty'),
@@ -449,14 +451,22 @@
     return card;
   }
 
+  // Anchored header (mirrors the kata library): Add button is Mine-only, search is
+  // Community-only. Match a dojo by name against the search query.
+  function dojoMatches(name) {
+    const q = (dojoSearch || '').trim().toLowerCase();
+    return !q || String(name || '').toLowerCase().includes(q);
+  }
   function renderLibrary() {
     const els = dojoEls();
     if (els.scope) els.scope.querySelectorAll('.kimodo-cz-segbtn').forEach((b) => b.classList.toggle('active', b.dataset.scope === dojoScope));
+    if (els.add) els.add.style.display = (dojoScope === 'mine') ? '' : 'none';
+    if (els.search) els.search.style.display = (dojoScope === 'community') ? '' : 'none';
     if (!els.grid) return;
     els.grid.innerHTML = '';
     if (dojoScope === 'mine') {
       els.grid.appendChild(clearCard());   // first card: clear + back to the grid floor
-      const arr = loadMyDojos();
+      const arr = loadMyDojos().filter((e) => dojoMatches(e.name));
       arr.forEach((e) => els.grid.appendChild(mineCard(e)));
       if (els.emptyMsg) els.emptyMsg.textContent = arr.length ? '' : 'No dojos yet — tap ＋ Add dojo to create one.';
       return;
@@ -467,9 +477,10 @@
       if (dojoScope !== 'community' || !els.grid) return;
       els.grid.innerHTML = '';
       els.grid.appendChild(clearCard());
-      if (list && list.length) list.forEach((d) => els.grid.appendChild(communityRealCard(d)));
-      else COMMUNITY_SEED.forEach((s) => els.grid.appendChild(communityCard(s)));
-      if (els.emptyMsg) els.emptyMsg.textContent = '';
+      const real = (list || []).filter((d) => dojoMatches(d.name));
+      if (list && list.length) real.forEach((d) => els.grid.appendChild(communityRealCard(d)));
+      else COMMUNITY_SEED.filter((s) => dojoMatches(s.name)).forEach((s) => els.grid.appendChild(communityCard(s)));
+      if (els.emptyMsg) els.emptyMsg.textContent = (list && list.length && !real.length) ? 'No dojos match.' : '';
     });
   }
 
@@ -609,6 +620,7 @@
       renderLibrary();
     });
     if (els.add) els.add.addEventListener('click', () => openCreate(null));
+    if (els.search) els.search.addEventListener('input', () => { dojoSearch = els.search.value || ''; renderLibrary(); });
     if (els.back) els.back.addEventListener('click', () => showView('library'));
     if (els.improve) els.improve.addEventListener('click', () => { if (!busy && !improving) improvePrompt(); });
     if (els.save) els.save.addEventListener('click', () => { if (!els.save.disabled) saveDojoToDataset(); });