instar 0.28.77 → 0.28.79

package/dashboard/index.html

@@ -52,6 +52,12 @@
       padding: 12px 20px;
       border-bottom: 1px solid var(--border);
       background: var(--bg-panel);
+      position: relative;
+    }
+
+    /* Hamburger toggle — visible only on mobile, sits in the header row */
+    .nav-toggle {
+      display: none;
     }
 
     .header-left {
@@ -2206,9 +2212,26 @@
         font-size: 14px;
       }
 
+      /* Compact terminal action row — only essential keys inline,
+         rest collapse into an overflow scroll strip */
       .terminal-actions {
         gap: 4px;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+      }
+      .terminal-actions::-webkit-scrollbar { display: none; }
+
+      .terminal-actions .action-btn {
+        flex-shrink: 0;
+        min-height: 36px;  /* slightly smaller than 44 since these are arrow keys */
+      }
+
+      /* The arrow-key cluster compresses tighter to leave room */
+      .terminal-actions .action-btn.action-arrow {
+        padding: 6px 10px;
+        min-width: 36px;
       }
 
       .terminal-header {
@@ -2285,14 +2308,62 @@
         padding: 12px 14px;
       }
 
-      /* Tab bar compact */
-      .tab-bar {
+      /* Hamburger toggle — visible in header row on mobile */
+      .nav-toggle {
+        display: flex;
+        align-items: center;
+        gap: 8px;
         margin-left: 12px;
+        padding: 8px 12px;
+        min-height: 40px;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        color: var(--text);
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+      }
+      .nav-toggle:hover { background: var(--bg-hover); }
+      .nav-toggle[aria-expanded="true"] { background: var(--bg-active); border-color: var(--accent); }
+
+      /* On mobile the tab-bar becomes a vertical dropdown panel,
+         hidden by default and toggled via the .nav-open class on .app */
+      .tab-bar {
+        position: absolute;
+        top: 100%;  /* below the header row */
+        left: 0;
+        right: 0;
+        flex-direction: column;
+        margin-left: 0;
+        padding: 8px;
+        gap: 4px;
+        background: var(--bg-panel);
+        border-bottom: 1px solid var(--border);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+        z-index: 100;
+        overflow-x: visible;
+        max-height: calc(100vh - 60px);
+        overflow-y: auto;
+        display: none;
+      }
+      .app.nav-open .tab-bar {
+        display: flex;
       }
 
       .tab-bar .tab {
-        padding: 5px 12px;
-        font-size: 12px;
+        width: 100%;
+        text-align: left;
+        border-radius: 6px;
+        padding: 12px 14px;
+        font-size: 15px;
+        min-height: 44px;
+        border-bottom: 1px solid var(--border);
+        margin-bottom: 0;
+      }
+      .tab-bar .tab.active {
+        background: var(--bg-active);
+        border-color: var(--accent);
       }
 
       /* File viewer mobile */
@@ -2385,6 +2456,41 @@
       .jobs-detail-content {
         padding: 14px;
       }
+
+      /* Filter chips and sort select were below 32px — bump to comfortable tap size */
+      .jobs-filter-chip {
+        padding: 8px 12px;
+        font-size: 12px;
+        min-height: 36px;
+      }
+      .jobs-sort {
+        font-size: 13px;
+        padding: 6px 8px;
+        min-height: 36px;
+      }
+
+      /* Modal — explicit mobile rule instead of relying on max-width: 90vw fallback */
+      .modal-dialog, .modal-content {
+        width: calc(100vw - 24px);
+        max-width: 100%;
+        margin: 12px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      /* Even tighter — phone-only refinements */
+      .header h1 { font-size: 14px; }
+      .nav-toggle { padding: 6px 10px; font-size: 13px; }
+
+      /* Terminal action row — drop arrow keys to icon-only at very narrow widths */
+      .terminal-actions .action-btn.action-arrow {
+        padding: 6px 8px;
+        min-width: 30px;
+      }
+
+      /* Jobs summary cards stack tighter */
+      .jobs-summary-card { padding: 4px 2px; min-width: 40px; }
+      .jobs-summary-val { font-size: 14px; }
     }
   </style>
 </head>
@@ -2406,7 +2512,8 @@
       <div class="header-left">
         <img class="logo" src="/dashboard/logo.png" alt="Instar">
         <h1>Instar Dashboard</h1>
-        <nav class="tab-bar">
+        <button class="nav-toggle" id="navToggle" aria-label="Open navigation menu" aria-expanded="false" onclick="toggleNavMenu()">&#9776; <span id="navToggleLabel">Sessions</span></button>
+        <nav class="tab-bar" id="tabBar">
           <button class="tab active" data-tab="sessions" onclick="switchTab('sessions')">Sessions <span class="tab-count" id="tabSessionCount">0</span></button>
           <button class="tab" data-tab="files" onclick="switchTab('files')">Files</button>
           <button class="tab" data-tab="dropzone" onclick="switchTab('dropzone')">Send Content</button>
@@ -2946,9 +3053,34 @@
         <div id="tlBridgeError" style="color:var(--err, #c44);font-size:12px;display:none"></div>
       </div>
 
-      <!-- Future home of the conversation observability view (deliverable 4) -->
-      <div style="border:1px dashed var(--border);border-radius:8px;padding:16px;font-size:12px;color:var(--text-dim);line-height:1.5">
-        The conversation observability view — threads list, color-coded message stream, latency metrics, FTS search — lands here in a follow-up. The settings above ship now so the bridge stays quiet by default once it goes live.
+      <!-- Conversation observability — threads list + message stream + search -->
+      <div style="border:1px solid var(--border);border-radius:8px;padding:0;display:flex;flex-direction:column;min-height:480px">
+        <!-- Toolbar -->
+        <div style="display:flex;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)">
+          <div style="font-weight:600">Conversations</div>
+          <div style="flex:1"></div>
+          <input type="search" id="tlObsSearchInput" placeholder="search messages…" style="padding:6px 8px;font-size:12px;width:220px" oninput="tlObsSearchDebounced(this.value)" />
+          <select id="tlObsHasTopicFilter" onchange="tlObsLoadThreads()" style="padding:6px 8px;font-size:12px">
+            <option value="">all threads</option>
+            <option value="yes">with Telegram topic</option>
+            <option value="no">without Telegram topic</option>
+          </select>
+          <input type="text" id="tlObsRemoteFilter" placeholder="agent filter" style="padding:6px 8px;font-size:12px;width:140px" oninput="tlObsLoadThreadsDebounced()" />
+          <button onclick="tlObsLoadThreads()" style="padding:6px 10px;font-size:12px">Refresh</button>
+        </div>
+
+        <!-- Two-pane: threads list + active thread -->
+        <div style="display:grid;grid-template-columns:280px 1fr;flex:1;min-height:420px">
+          <ul id="tlObsThreadsList" style="list-style:none;padding:0;margin:0;border-right:1px solid var(--border);overflow-y:auto;max-height:520px">
+            <li style="padding:16px;color:var(--text-dim);font-size:12px">Loading…</li>
+          </ul>
+          <div id="tlObsConversation" style="padding:16px;overflow-y:auto;max-height:520px;display:flex;flex-direction:column;gap:10px">
+            <div style="color:var(--text-dim);font-size:12px;font-style:italic">Select a thread on the left to view the conversation.</div>
+          </div>
+        </div>
+
+        <!-- Search results -->
+        <div id="tlObsSearchResults" style="display:none;border-top:1px solid var(--border);padding:12px 16px;max-height:280px;overflow-y:auto"></div>
       </div>
     </div>
 
@@ -3445,7 +3577,7 @@
           brightCyan: '#99f6e4',
           brightWhite: '#eee',
         },
-        fontSize: window.innerWidth <= 768 ? 11 : 13,
+        fontSize: window.innerWidth <= 480 ? 10 : window.innerWidth <= 768 ? 11 : 13,
         fontFamily: "'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace",
         cursorBlink: false,
         cursorStyle: 'underline',
@@ -3463,6 +3595,12 @@
       });
       resizeObserver.observe(container);
 
+      // Refit on window resize / orientation change — phone rotation may not
+      // trigger ResizeObserver if the parent grid keeps its size.
+      window.addEventListener('resize', () => {
+        try { fitAddon.fit(); } catch {}
+      });
+
       // Initial fit after a tick (container needs to be visible)
       requestAnimationFrame(() => {
         try { fitAddon.fit(); } catch {}
@@ -4008,7 +4146,10 @@
         id: 'threadline',
         panels: ['threadlineTab'],
         display: ['flex'],
-        onActivate: () => { if (typeof loadThreadlineBridgeConfig === 'function') loadThreadlineBridgeConfig(); },
+        onActivate: () => {
+          if (typeof loadThreadlineBridgeConfig === 'function') loadThreadlineBridgeConfig();
+          if (typeof tlObsLoadThreads === 'function') tlObsLoadThreads();
+        },
       },
       {
         id: 'secrets',
@@ -4024,6 +4165,51 @@
       },
     ];
 
+    function toggleNavMenu() {
+      const app = document.querySelector('.app');
+      const toggle = document.getElementById('navToggle');
+      const open = app.classList.toggle('nav-open');
+      toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+    }
+
+    function updateNavToggleLabel(tabName) {
+      // Read the tab name from the actual button so we don't drift when
+      // tabs get renamed in the registry. Strip the trailing count badge
+      // ("Jobs 3" → "Jobs") by ignoring child element text.
+      const labelEl = document.getElementById('navToggleLabel');
+      if (!labelEl) return;
+      const tabBtn = document.querySelector(`.tab-bar .tab[data-tab="${tabName}"]`);
+      let text = tabName;
+      if (tabBtn) {
+        // Clone the button, strip count badges, then read trimmed text.
+        const clone = tabBtn.cloneNode(true);
+        clone.querySelectorAll('.tab-count').forEach(el => el.remove());
+        text = clone.textContent.trim() || tabName;
+      }
+      labelEl.textContent = text;
+    }
+
+    function closeNavMenu() {
+      const app = document.querySelector('.app');
+      if (!app || !app.classList.contains('nav-open')) return;
+      app.classList.remove('nav-open');
+      const toggle = document.getElementById('navToggle');
+      if (toggle) toggle.setAttribute('aria-expanded', 'false');
+    }
+
+    // Close the mobile menu on Escape or on tap outside the tab bar.
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') closeNavMenu();
+    });
+    document.addEventListener('click', (e) => {
+      const app = document.querySelector('.app');
+      if (!app || !app.classList.contains('nav-open')) return;
+      const tabBar = document.querySelector('.tab-bar');
+      const toggle = document.getElementById('navToggle');
+      if (tabBar?.contains(e.target) || toggle?.contains(e.target)) return;
+      closeNavMenu();
+    });
+
     function switchTab(tabName) {
       if (tabName === currentTab) return;
 
@@ -4038,6 +4224,11 @@
         btn.classList.toggle('active', btn.dataset.tab === tabName);
       });
 
+      updateNavToggleLabel(tabName);
+      document.querySelector('.app').classList.remove('nav-open');
+      const navToggle = document.getElementById('navToggle');
+      if (navToggle) navToggle.setAttribute('aria-expanded', 'false');
+
       // Hide all panels
       for (const tab of TAB_REGISTRY) {
         for (const panelId of tab.panels) {
@@ -4303,6 +4494,158 @@
       wire('tlBridgeMirrorExisting', 'mirrorExisting');
     });
 
+    // ── Threadline observability — threads list + conversation view ──
+    let tlObsActiveThreadId = null;
+    let tlObsLoadThreadsTimer = null;
+    let tlObsSearchTimer = null;
+
+    function tlObsLoadThreadsDebounced() {
+      if (tlObsLoadThreadsTimer) clearTimeout(tlObsLoadThreadsTimer);
+      tlObsLoadThreadsTimer = setTimeout(tlObsLoadThreads, 300);
+    }
+
+    function tlObsSearchDebounced(value) {
+      if (tlObsSearchTimer) clearTimeout(tlObsSearchTimer);
+      tlObsSearchTimer = setTimeout(() => tlObsRunSearch(value), 300);
+    }
+
+    async function tlObsLoadThreads() {
+      const list = document.getElementById('tlObsThreadsList');
+      if (!list) return;
+      const remoteAgent = document.getElementById('tlObsRemoteFilter')?.value?.trim() || '';
+      const hasTopic = document.getElementById('tlObsHasTopicFilter')?.value || '';
+      const params = new URLSearchParams();
+      if (remoteAgent) params.set('remoteAgent', remoteAgent);
+      if (hasTopic) params.set('hasTopic', hasTopic);
+      try {
+        const resp = await apiFetch('/threadline/observability/threads?' + params.toString());
+        const threads = resp.threads || [];
+        if (threads.length === 0) {
+          list.innerHTML = '<li style="padding:16px;color:var(--text-dim);font-size:12px;font-style:italic">No threads yet.</li>';
+          return;
+        }
+        list.innerHTML = threads.map(t => tlObsRenderThreadRow(t)).join('');
+      } catch (err) {
+        list.innerHTML = `<li style="padding:16px;color:var(--red)">Error: ${escapeHtml(err.message || String(err))}</li>`;
+      }
+    }
+
+    function tlObsRenderThreadRow(t) {
+      const lastSeen = t.lastSeen ? fmtRelTime(t.lastSeen) : '—';
+      const bridgeBadge = t.bridge
+        ? '<span style="display:inline-block;padding:1px 6px;border-radius:8px;background:#3b82f6;color:#fff;font-size:10px;margin-left:6px">TG</span>'
+        : '';
+      const spawnBadge = t.hasSpawnedSession
+        ? '<span style="display:inline-block;padding:1px 6px;border-radius:8px;background:#16a34a;color:#fff;font-size:10px;margin-left:4px">S</span>'
+        : '';
+      const isActive = tlObsActiveThreadId === t.threadId ? 'background:rgba(59,130,246,0.08);' : '';
+      return `
+        <li onclick="tlObsLoadThread('${t.threadId.replace(/'/g, "\\'")}')"
+            style="padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;${isActive}">
+          <div style="display:flex;justify-content:space-between;align-items:center">
+            <div style="font-weight:600;font-size:13px">${escapeHtml(t.remoteAgentName)}${bridgeBadge}${spawnBadge}</div>
+            <div style="font-size:11px;color:var(--text-dim)">${escapeHtml(lastSeen)}</div>
+          </div>
+          <div style="font-size:11px;color:var(--text-dim);margin-top:2px;font-family:monospace">
+            ${escapeHtml(t.threadId.slice(0, 16))}…
+          </div>
+          <div style="font-size:11px;color:var(--text-dim);margin-top:2px">
+            ${t.messageCount} msgs · ${t.inboundCount} in / ${t.outboundCount} out
+            ${typeof t.avgResponseLatencyMs === 'number' ? ' · ~' + Math.round(t.avgResponseLatencyMs / 1000) + 's reply' : ''}
+          </div>
+        </li>
+      `;
+    }
+
+    async function tlObsLoadThread(threadId) {
+      tlObsActiveThreadId = threadId;
+      tlObsLoadThreads(); // Re-render threads list to highlight active row
+      const conv = document.getElementById('tlObsConversation');
+      if (!conv) return;
+      conv.innerHTML = '<div style="color:var(--text-dim);font-size:12px">Loading…</div>';
+      try {
+        const detail = await apiFetch(`/threadline/observability/threads/${encodeURIComponent(threadId)}`);
+        conv.innerHTML = tlObsRenderConversation(detail);
+      } catch (err) {
+        conv.innerHTML = `<div style="color:var(--red);font-size:12px">Error: ${escapeHtml(err.message || String(err))}</div>`;
+      }
+    }
+
+    function tlObsRenderConversation(detail) {
+      const header = `
+        <div style="border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:10px">
+          <div style="font-weight:600;font-size:14px">${escapeHtml(detail.remoteAgentName)}</div>
+          <div style="font-family:monospace;font-size:11px;color:var(--text-dim)">${escapeHtml(detail.threadId)}</div>
+          <div style="display:flex;gap:14px;font-size:11px;color:var(--text-dim);margin-top:6px;flex-wrap:wrap">
+            <span>${detail.messageCount} messages</span>
+            <span>${detail.inboundCount} in / ${detail.outboundCount} out</span>
+            <span>first: ${escapeHtml(fmtRelTime(detail.firstSeen))}</span>
+            <span>last: ${escapeHtml(fmtRelTime(detail.lastSeen))}</span>
+            ${typeof detail.avgResponseLatencyMs === 'number' ? '<span>avg reply: ' + Math.round(detail.avgResponseLatencyMs/1000) + 's</span>' : ''}
+            ${detail.bridge ? '<span>📨 topic ' + detail.bridge.topicId + '</span>' : '<span style="color:var(--text-dim);font-style:italic">no Telegram topic</span>'}
+            ${detail.hasSpawnedSession ? '<span>🧵 spawn-session</span>' : ''}
+          </div>
+        </div>
+      `;
+      const messages = (detail.messages || []).map(m => tlObsRenderMessage(m)).join('');
+      return header + messages;
+    }
+
+    function tlObsRenderMessage(m) {
+      const isIn = m.direction === 'in';
+      const bg = isIn ? 'rgba(99,102,241,0.10)' : 'rgba(34,197,94,0.10)';
+      const border = isIn ? '#6366f1' : '#22c55e';
+      const arrow = isIn ? '←' : '→';
+      const meta = `${escapeHtml(m.timestamp)} · ${escapeHtml(m.id.slice(0, 8))}${m.outcome ? ' · ' + escapeHtml(m.outcome) : ''} · trust:${escapeHtml(m.trustLevel)}`;
+      return `
+        <div style="border-left:3px solid ${border};background:${bg};padding:8px 10px;border-radius:4px">
+          <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px">
+            <div style="font-weight:600;font-size:12px">
+              ${arrow} ${escapeHtml(m.remoteAgentName)}
+            </div>
+            <div style="font-size:11px;color:var(--text-dim)">${escapeHtml(fmtRelTime(m.timestamp))}</div>
+          </div>
+          <div style="font-size:13px;white-space:pre-wrap;word-break:break-word;line-height:1.4">${escapeHtml(m.text)}</div>
+          <div style="font-family:monospace;font-size:10px;color:var(--text-dim);margin-top:4px">${meta}</div>
+        </div>
+      `;
+    }
+
+    async function tlObsRunSearch(query) {
+      const panel = document.getElementById('tlObsSearchResults');
+      if (!panel) return;
+      const q = (query || '').trim();
+      if (!q) { panel.style.display = 'none'; return; }
+      panel.style.display = 'block';
+      panel.innerHTML = '<div style="color:var(--text-dim);font-size:12px">Searching…</div>';
+      try {
+        const resp = await apiFetch('/threadline/observability/search?q=' + encodeURIComponent(q) + '&limit=30');
+        const hits = resp.hits || [];
+        if (hits.length === 0) {
+          panel.innerHTML = '<div style="color:var(--text-dim);font-size:12px">No matches.</div>';
+          return;
+        }
+        panel.innerHTML = `<div style="font-size:12px;color:var(--text-dim);margin-bottom:8px">${hits.length} match${hits.length === 1 ? '' : 'es'} (click to open thread)</div>` +
+          hits.map(h => `
+            <div onclick="tlObsLoadThread('${h.message.threadId.replace(/'/g, "\\'")}')"
+                 style="padding:6px 8px;border-bottom:1px solid var(--border);cursor:pointer;font-size:12px">
+              <div style="display:flex;justify-content:space-between">
+                <span style="font-weight:600">${h.message.direction === 'in' ? '←' : '→'} ${escapeHtml(h.message.remoteAgentName)}</span>
+                <span style="font-size:11px;color:var(--text-dim)">${escapeHtml(fmtRelTime(h.message.timestamp))}</span>
+              </div>
+              <div style="margin-top:2px;line-height:1.4">${tlObsRenderSnippet(h.snippet)}</div>
+            </div>
+          `).join('');
+      } catch (err) {
+        panel.innerHTML = `<div style="color:var(--red);font-size:12px">Error: ${escapeHtml(err.message || String(err))}</div>`;
+      }
+    }
+
+    function tlObsRenderSnippet(s) {
+      // Server returns matches wrapped in «...» — render as <mark>
+      return escapeHtml(s).replace(/«/g, '<mark style="background:#fef08a;color:#000">').replace(/»/g, '</mark>');
+    }
+
     async function loadFileTree() {
       fileTreeLoaded = true;
       const list = document.getElementById('fileTreeList');

package/dist/commands/init.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAgDH,UAAU,WAAW;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yFAAyF;IACzF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,wBAAsB,WAAW,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAqBrE;AAkzCD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAkqC1E;AA0mBD;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAuBlF"}
+{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAmDH,UAAU,WAAW;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yFAAyF;IACzF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,wBAAsB,WAAW,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAqBrE;AAkzCD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAkqC1E;AA0mBD;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAuBlF"}

package/dist/commands/init.js

@@ -29,6 +29,8 @@
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 import pc from 'picocolors';
 import { randomUUID } from 'node:crypto';
 import { execFileSync, execSync } from 'node:child_process';
@@ -2534,7 +2536,7 @@ function installBuildSkill(skillsDir) {
     if (fs.existsSync(skillFile) || fs.existsSync(path.join(buildDir, 'skill.md')))
         return;
     // Try to copy from bundled .claude/skills/build/ first
-    const modDir = path.dirname(new URL(import.meta.url).pathname);
+    const modDir = __dirname;
     const bundledSkill = path.join(modDir, '..', '..', '.claude', 'skills', 'build', 'SKILL.md');
     if (fs.existsSync(bundledSkill)) {
         fs.mkdirSync(buildDir, { recursive: true });
@@ -2573,7 +2575,7 @@ function installAutonomousSkill(skillsDir) {
     const hooksDir = path.join(autonomousDir, 'hooks');
     const scriptsDir = path.join(autonomousDir, 'scripts');
     // Copy from instar's bundled skill files if they exist
-    const modDir = path.dirname(new URL(import.meta.url).pathname);
+    const modDir = __dirname;
     const bundledDir = path.join(path.dirname(path.dirname(modDir)), '.claude', 'skills', 'autonomous');
     if (fs.existsSync(bundledDir)) {
         // Copy from bundled source
@@ -3304,7 +3306,7 @@ function refreshScripts(projectDir, stateDir) {
  * PostUpdateMigrator.getTelegramReplyScript() uses the same loading pattern.
  */
 function loadRelayTemplate(filename, port) {
-    const modDir = path.dirname(new URL(import.meta.url).pathname);
+    const modDir = __dirname;
     const candidates = [
         // dev: src/commands → ../templates/scripts
         path.resolve(modDir, '..', 'templates', 'scripts', filename),
@@ -4010,7 +4012,7 @@ function installSerendipityCapture(projectDir) {
     // Resolve template from package directory
     // In dev: src/commands/ → ../../src/templates/scripts/serendipity-capture.sh
     // In dist: dist/commands/ → ../templates/scripts/serendipity-capture.sh
-    const modDir = path.dirname(new URL(import.meta.url).pathname);
+    const modDir = __dirname;
     const candidates = [
         path.resolve(modDir, '..', 'templates', 'scripts', 'serendipity-capture.sh'),
         path.resolve(modDir, '..', '..', 'src', 'templates', 'scripts', 'serendipity-capture.sh'),