tmux-weblink 0.3.0

package/dist/lib/pages/schedule-index.js

@@ -0,0 +1,392 @@
+import{cssVarsStyle as S}from"../theme.js";import{commandbarCSS as k,commandbarHTML as $,commandbarScript as E}from"../commandbar.js";import{notesDrawerCSS as L,notesDrawerHTML as A,notesDrawerScript as B}from"../notes-drawer.js";import{sharedLayoutCSS as C,sharedHeader as M,sharedSidebar as q,newSessionModalHTML as I,newSessionModalScript as D}from"../shared-layout.js";import{DELAY_INVALID_MESSAGE as R,DELAY_MAX_MESSAGE as T,MAX_SCHEDULE_MS as z,scheduleDelayParseScript as N}from"../schedule-delay.js";function t(s){return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function p(s){const n=new Date(s);return n.toLocaleDateString()+" "+n.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}function _(s,n){return s.length?`<div class="task-list">${s.map(e=>`<div class="task">
+  <div class="task-row1">
+    <span class="cmd">${t(e.text)}</span>
+    <span class="status-pill status-${e.status}">${e.status}</span>
+  </div>
+  <div class="task-row2">
+    <a class="trig-target" href="/s/${encodeURIComponent(e.sessionName)}?window=${e.windowIndex}">${t(e.sessionName)} &middot; win:${e.windowIndex}</a>
+    <span class="meta">${t(p(e.triggeredAt))}</span>
+  </div>${e.status==="error"&&e.error?`
+  <div class="trig-error">${t(e.error)}</div>`:""}
+</div>`).join(`
+`)}</div>`:`<p class="empty">No tasks triggered in the last ${n} day${n===1?"":"s"}.</p>`}function O(s,n,c,e=7,i=!1,u=[],m=!1){const d=[...s].sort((r,o)=>r.fireAt-o.fireAt),l=new Map;for(const r of d){const o=l.get(r.sessionName);o?o.push(r):l.set(r.sessionName,[r])}const h=[...l.entries()].map(([r,o])=>{const y=o.map(a=>`<div class="task" data-id="${t(a.id)}">
+  <div class="task-row1">
+    <span class="cmd">${t(a.text)}</span>
+    <span class="countdown" data-fire-at="${a.fireAt}">\u2026</span>
+  </div>
+  <div class="task-row2">
+    <span class="meta"><a class="win-link" href="/s/${encodeURIComponent(a.sessionName)}?window=${a.windowIndex}">win:${a.windowIndex}</a> &middot; fires ${t(p(a.fireAt))}</span>
+    <div style="display:flex;gap:4px;align-items:center;">
+      <button class="reschedule-btn" data-id="${t(a.id)}">reschedule</button>
+      <button class="cancel-btn" data-id="${t(a.id)}">cancel</button>
+    </div>
+  </div>
+  <div class="reschedule-row" data-id="${t(a.id)}">
+    <div class="reschedule-presets">
+      <button class="reschedule-preset-btn" data-delay="1m">1m</button>
+      <button class="reschedule-preset-btn" data-delay="5m">5m</button>
+      <button class="reschedule-preset-btn" data-delay="15m">15m</button>
+      <button class="reschedule-preset-btn" data-delay="1h">1h</button>
+    </div>
+    <div class="reschedule-input-row">
+      <input class="reschedule-input" type="text" placeholder="1h, 5m, 70h, 30d" autocomplete="off" />
+      <button class="reschedule-confirm-btn">Set</button>
+      <span class="reschedule-error"></span>
+    </div>
+  </div>
+</div>`).join(`
+`);return`<div class="session-group" data-session="${t(r)}">
+  <a class="session-head" href="/s/${encodeURIComponent(r)}?tab=scheduler">
+    <span class="sname">${t(r)}</span>
+    <span class="scount">${o.length}</span>
+  </a>
+  <div class="task-list">${y}</div>
+</div>`}).join(`
+`),f=d.length?h:'<p class="empty" id="empty-msg">No scheduled tasks.</p>',g=_(n,e),b=z,x=R,v=T,w=`
+  .session-head {
+    display: flex; align-items: center; gap: 8px; text-decoration: none;
+    font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
+    color: var(--panel-accent); margin-bottom: 8px;
+  }
+  .session-head:hover .sname { text-decoration: underline; }
+  .session-head .scount {
+    font-size: var(--text-xs); color: var(--panel-success); border: 1px solid var(--panel-border);
+    border-radius: 10px; padding: 2px 9px; text-transform: none; letter-spacing: 0;
+  }
+  .session-group { margin-bottom: 18px; }
+  .task {
+    padding: 14px 16px; border: 1px solid var(--panel-border); border-radius: 10px;
+    margin-bottom: 8px; background: var(--panel-bg);
+    display: flex; flex-direction: column; gap: 6px;
+  }
+  .task-row1 { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
+  .task .cmd {
+    font-size: var(--text-sm); color: var(--page-fg);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .task .countdown {
+    font-size: var(--text-sm); font-weight: 600; color: var(--panel-success);
+    flex-shrink: 0; min-width: 56px; text-align: right;
+  }
+  .task .countdown.urgent { color: #f0c674; }
+  .task .countdown.imminent { color: #cc6666; }
+  .task-row2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+  .task .meta { font-size: var(--text-xs); color: var(--panel-muted); }
+  .win-link { color: var(--panel-accent); text-decoration: none; }
+  .win-link:hover { text-decoration: underline; }
+  .cancel-btn {
+    font-size: var(--text-xs); color: var(--panel-muted); background: none;
+    border: 1px solid var(--panel-border); padding: 6px 12px; border-radius: 6px;
+    cursor: pointer; font-family: inherit; transition: all 0.15s;
+    min-height: 44px;
+  }
+  .cancel-btn:hover { border-color: #cc6666; color: #cc6666; background: color-mix(in srgb, #cc6666 8%, transparent); }
+  .cancel-btn:focus-visible { box-shadow: 0 0 0 2px #cc6666; outline: none; }
+  .reschedule-btn {
+    font-size: var(--text-xs); color: var(--panel-muted); background: none;
+    border: 1px solid var(--panel-border); padding: 6px 12px; border-radius: 6px;
+    cursor: pointer; font-family: inherit; transition: all 0.15s; margin-right: 4px;
+    min-height: 44px;
+  }
+  .reschedule-btn:hover { border-color: var(--panel-accent); color: var(--panel-accent); background: color-mix(in srgb, var(--panel-accent) 8%, transparent); }
+  .reschedule-btn:focus-visible { box-shadow: 0 0 0 2px var(--panel-accent); outline: none; }
+  .reschedule-row {
+    display: none; flex-direction: column; gap: 6px;
+    padding-top: 8px; border-top: 1px solid var(--panel-border);
+  }
+  .reschedule-row.active { display: flex; }
+  .reschedule-presets { display: flex; gap: 6px; }
+  .reschedule-preset-btn {
+    font-size: var(--text-xs); color: var(--panel-muted); background: none;
+    border: 1px solid var(--panel-border); padding: 6px 12px; border-radius: 6px;
+    cursor: pointer; font-family: inherit; transition: all 0.15s;
+    min-height: 44px;
+  }
+  .reschedule-preset-btn:hover { border-color: var(--panel-accent); color: var(--panel-accent); background: color-mix(in srgb, var(--panel-accent) 8%, transparent); }
+  .reschedule-preset-btn:focus-visible { box-shadow: 0 0 0 2px var(--panel-accent); outline: none; }
+  .reschedule-input-row { display: flex; gap: 8px; align-items: center; }
+  .reschedule-input {
+    flex: 1; background: color-mix(in srgb, var(--page-bg) 70%, transparent); border: 1px solid var(--panel-border);
+    color: var(--page-fg); font-family: inherit; font-size: var(--text-xs);
+    padding: 6px 10px; border-radius: 6px; outline: none; transition: border-color 0.15s;
+  }
+  .reschedule-input:focus { border-color: var(--panel-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--panel-accent) 8%, transparent); }
+  .reschedule-input.error { border-color: #cc6666; }
+  .reschedule-confirm-btn {
+    font-size: var(--text-xs); background: color-mix(in srgb, var(--panel-success) 12%, transparent);
+    border: 1px solid var(--panel-success); color: var(--panel-success);
+    padding: 8px 16px; border-radius: 6px; cursor: pointer; font-family: inherit;
+    min-height: 44px;
+  }
+  .reschedule-confirm-btn:hover { background: color-mix(in srgb, var(--panel-success) 22%, transparent); }
+  .reschedule-confirm-btn:focus-visible { box-shadow: 0 0 0 2px var(--panel-success); outline: none; }
+  .reschedule-confirm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+  .reschedule-error { font-size: var(--text-xs); color: #cc6666; }
+  .page-tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--panel-border); margin-bottom: 20px; }
+  .page-tab {
+    font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
+    color: var(--panel-muted); background: none; border: none; cursor: pointer;
+    padding: 10px 16px; font-family: inherit; border-bottom: 2px solid transparent;
+    margin-bottom: -1px; transition: color 0.15s, border-color 0.15s;
+    min-height: 44px;
+  }
+  .page-tab:hover { color: var(--panel-accent); }
+  .page-tab.active { color: var(--panel-accent); border-bottom-color: var(--panel-accent); }
+  .page-tab:focus-visible { outline: none; box-shadow: inset 0 -2px 0 0 var(--panel-accent); }
+  .tab-panel { display: none; }
+  .tab-panel.active { display: block; }
+  .status-pill {
+    font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
+    border: 1px solid var(--panel-border); border-radius: 10px; padding: 2px 10px; flex-shrink: 0;
+  }
+  .status-pill.status-ok { color: var(--panel-success); border-color: var(--panel-success); }
+  .status-pill.status-error { color: #cc6666; border-color: #cc6666; }
+  .status-pill.status-missed { color: var(--panel-muted); }
+  .trig-target { font-size: var(--text-xs); color: var(--panel-accent); text-decoration: none; }
+  .trig-target:hover { text-decoration: underline; }
+  .trig-error {
+    font-size: var(--text-xs); color: #cc6666; white-space: pre-wrap; word-break: break-word;
+    margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--panel-border);
+  }
+  .empty { font-size: var(--text-sm); color: var(--panel-muted); line-height: 1.6; margin-top: 20px; }
+  @media (max-width: 560px) {
+    .task-row2 { flex-direction: column; align-items: flex-start; gap: 8px; }
+    .reschedule-input-row { flex-direction: column; align-items: stretch; }
+    .reschedule-input-row button { align-self: flex-start; }
+  }
+  ${i?k():""}
+  ${L()}`;return`<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<title>Scheduled tasks - tmux-web</title>
+<style>
+  ${S(c.shell)}
+  ${C(w)}
+</style>
+</head>
+<body>
+
+${M({commandbarEnabled:i,title:"Scheduled",themeTemplate:c.template})}
+
+<div class="page-wrap">
+  <div class="page-layout">
+    ${q({activePage:"schedule",agentsEnabled:m,refreshHref:"/schedule"})}
+    <main class="main-panel">
+      <div class="page-tab-bar">
+        <button class="page-tab active" data-tab="upcoming">Upcoming</button>
+        <button class="page-tab" data-tab="triggered">Recently Triggered</button>
+      </div>
+      <div class="tab-panel active" data-panel="upcoming">
+        <div id="schedule-list">${f}</div>
+      </div>
+      <div class="tab-panel" data-panel="triggered">
+        ${g}
+      </div>
+    </main>
+  </div>
+</div>
+
+${I()}
+${i?$():""}
+${A("Notes - Global")}
+
+<script type="module">
+${B("__global__")}
+${i?E(u,[]):""}
+${D()}
+</script>
+
+<script>
+const MAX_SCHEDULE_MS = ${b};
+${N()}
+
+// \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function activateTab(name) {
+  document.querySelectorAll('.page-tab').forEach((t) => t.classList.toggle('active', t.dataset.tab === name));
+  document.querySelectorAll('.tab-panel').forEach((p) => p.classList.toggle('active', p.dataset.panel === name));
+}
+document.querySelectorAll('.page-tab').forEach((t) => {
+  t.addEventListener('click', () => {
+    const name = t.dataset.tab;
+    activateTab(name);
+    const url = new URL(location.href);
+    if (name === 'upcoming') url.searchParams.delete('tab');
+    else url.searchParams.set('tab', name);
+    history.replaceState({}, '', url);
+  });
+});
+if (new URLSearchParams(location.search).get('tab') === 'triggered') activateTab('triggered');
+
+function formatCountdown(ms) {
+  if (ms <= 0) return 'FIRING';
+  const s = Math.ceil(ms / 1000);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  if (h > 0) return h + ':' + String(m).padStart(2, '0') + ':' + String(sec).padStart(2, '0');
+  return String(m).padStart(2, '0') + ':' + String(sec).padStart(2, '0');
+}
+
+function tick() {
+  document.querySelectorAll('.countdown').forEach((el) => {
+    const fireAt = parseInt(el.dataset.fireAt, 10);
+    const remaining = fireAt - Date.now();
+    el.textContent = formatCountdown(remaining);
+    el.classList.remove('urgent', 'imminent');
+    if (remaining <= 10000) el.classList.add('imminent');
+    else if (remaining <= 60000) el.classList.add('urgent');
+  });
+}
+
+function refreshEmptyState() {
+  document.querySelectorAll('.session-group').forEach((g) => {
+    if (!g.querySelector('.task')) g.remove();
+  });
+  const list = document.getElementById('schedule-list');
+  if (!list.querySelector('.task') && !document.getElementById('empty-msg')) {
+    const p = document.createElement('p');
+    p.className = 'empty';
+    p.id = 'empty-msg';
+    p.textContent = 'No scheduled tasks.';
+    list.appendChild(p);
+  }
+}
+
+function openReschedule(id) {
+  document.querySelectorAll('.reschedule-row.active').forEach((r) => {
+    if (r.dataset.id !== id) closeReschedule(r.dataset.id);
+  });
+  const row = document.querySelector('.reschedule-row[data-id="' + id + '"]');
+  if (!row) return;
+  row.classList.add('active');
+  const input = row.querySelector('.reschedule-input');
+  input.value = ''; input.classList.remove('error');
+  row.querySelector('.reschedule-error').textContent = '';
+  input.focus();
+}
+
+function closeReschedule(id) {
+  const row = document.querySelector('.reschedule-row[data-id="' + id + '"]');
+  if (!row) return;
+  row.classList.remove('active');
+  const input = row.querySelector('.reschedule-input');
+  input.value = ''; input.classList.remove('error');
+  row.querySelector('.reschedule-error').textContent = '';
+}
+
+async function submitReschedule(id, delayStr) {
+  const row = document.querySelector('.reschedule-row[data-id="' + id + '"]');
+  if (!row) return;
+  const input = row.querySelector('.reschedule-input');
+  const errorEl = row.querySelector('.reschedule-error');
+  const confirmBtn = row.querySelector('.reschedule-confirm-btn');
+  const delayMs = parseDelay(delayStr !== undefined ? delayStr : input.value);
+  if (!delayMs) {
+    input.classList.add('error');
+    errorEl.textContent = ${JSON.stringify(x)};
+    input.focus();
+    return;
+  }
+  if (delayMs > MAX_SCHEDULE_MS) {
+    input.classList.add('error');
+    errorEl.textContent = ${JSON.stringify(v)};
+    input.focus();
+    return;
+  }
+  input.classList.remove('error'); errorEl.textContent = '';
+  confirmBtn.disabled = true;
+  try {
+    const res = await fetch('/api/schedule/' + id, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ delayMs }),
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      errorEl.textContent = err.error || 'Server error.';
+      confirmBtn.disabled = false;
+      return;
+    }
+    const data = await res.json();
+    const task = document.querySelector('.task[data-id="' + id + '"]');
+    if (task) {
+      const countdown = task.querySelector('.countdown');
+      if (countdown) countdown.dataset.fireAt = String(data.fireAt);
+      const meta = task.querySelector('.meta');
+      if (meta) {
+        const d = new Date(data.fireAt);
+        const win = (meta.textContent.match(/win:(d+)/) || ['','?'])[1];
+        const time = d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        meta.textContent = 'win:' + win + ' \xB7 fires ' + time;
+      }
+    }
+    closeReschedule(id);
+  } catch {
+    errorEl.textContent = 'Network error.';
+    confirmBtn.disabled = false;
+  }
+}
+
+document.getElementById('schedule-list').addEventListener('click', async (e) => {
+  const cancelBtn = e.target.closest('.cancel-btn');
+  if (cancelBtn) {
+    const id = cancelBtn.dataset.id;
+    cancelBtn.disabled = true;
+    try {
+      const res = await fetch('/api/schedule/' + id, { method: 'DELETE' });
+      if (res.ok) {
+        const task = document.querySelector('.task[data-id="' + id + '"]');
+        if (task) task.remove();
+        refreshEmptyState();
+      } else { cancelBtn.disabled = false; }
+    } catch { cancelBtn.disabled = false; }
+    return;
+  }
+
+  const rescheduleBtn = e.target.closest('.reschedule-btn');
+  if (rescheduleBtn) {
+    const id = rescheduleBtn.dataset.id;
+    const row = document.querySelector('.reschedule-row[data-id="' + id + '"]');
+    if (row && row.classList.contains('active')) closeReschedule(id);
+    else openReschedule(id);
+    return;
+  }
+
+  const confirmBtn = e.target.closest('.reschedule-confirm-btn');
+  if (confirmBtn) {
+    const row = confirmBtn.closest('.reschedule-row');
+    if (row) await submitReschedule(row.dataset.id);
+    return;
+  }
+
+  const presetBtn = e.target.closest('.reschedule-preset-btn');
+  if (presetBtn) {
+    const row = presetBtn.closest('.reschedule-row');
+    if (row) await submitReschedule(row.dataset.id, presetBtn.dataset.delay);
+    return;
+  }
+});
+
+document.getElementById('schedule-list').addEventListener('keydown', (e) => {
+  const input = e.target.closest('.reschedule-input');
+  if (!input) return;
+  const row = input.closest('.reschedule-row');
+  if (!row) return;
+  if (e.key === 'Escape') { e.preventDefault(); closeReschedule(row.dataset.id); }
+  else if (e.key === 'Enter') { e.preventDefault(); void submitReschedule(row.dataset.id); }
+});
+
+document.getElementById('schedule-list').addEventListener('focusout', (e) => {
+  const row = e.target.closest('.reschedule-row');
+  if (!row || row.contains(e.relatedTarget)) return;
+  closeReschedule(row.dataset.id);
+});
+
+tick();
+setInterval(tick, 1000);
+</script>
+</body>
+</html>`}export{O as renderScheduleIndex};

package/dist/lib/pages/settings.js

@@ -0,0 +1,206 @@
+import{cssVarsStyle as x}from"../theme.js";import{getThemeTemplates as f,THEME_TEMPLATE_IDS as y}from"../themes/index.js";function n(a){return a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function u(a,e){return`<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<title>${n(a)} - tmux-web</title>
+<style>
+  ${x(e.shell)}
+  html, body { background: var(--page-bg); color: var(--page-fg); min-height: 100%; font-family: var(--font-sans); }
+  .container { max-width: 680px; margin: 80px auto; padding: 0 24px; }
+  .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
+  h1 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--page-fg); }
+  .back-link {
+    font-size: var(--text-sm); color: var(--panel-muted); text-decoration: none;
+    border: 1px solid var(--panel-border); padding: 8px 16px; border-radius: 10px; transition: all 0.15s;
+  }
+  .back-link:hover { border-color: var(--panel-accent); color: var(--panel-accent); background: color-mix(in srgb, var(--panel-accent) 8%, transparent); }
+  .restart-note {
+    font-size: var(--text-sm); line-height: 1.6; color: var(--panel-muted);
+    border: 1px dashed var(--panel-border); border-radius: 12px;
+    padding: 12px 16px; margin-bottom: 24px;
+  }
+  .restart-note strong { color: var(--panel-accent); }
+  .saved-flash {
+    font-size: var(--text-sm); color: var(--panel-success);
+    border: 1px solid var(--panel-success); border-radius: 12px;
+    padding: 12px 16px; margin-bottom: 16px;
+  }
+  .error-flash {
+    font-size: var(--text-sm); color: var(--page-fg); white-space: pre-wrap; word-break: break-word;
+    border: 1px solid #e06c75; border-radius: 12px;
+    padding: 12px 16px; margin-bottom: 16px; background: color-mix(in srgb, #e06c75 8%, var(--panel-bg));
+  }
+  .section { border: 1px solid var(--panel-border); border-radius: 16px; background: var(--panel-bg); padding: 20px; margin-bottom: 16px; }
+  .section h2 { font-size: var(--text-sm); font-weight: 600; color: var(--page-fg); margin-bottom: 4px; }
+  .section .desc { font-size: var(--text-sm); color: var(--panel-muted); line-height: 1.6; margin-bottom: 16px; }
+  label.row { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); cursor: pointer; padding: 5px 0; }
+  label.row input { accent-color: var(--panel-success); }
+  .radios { display: flex; flex-direction: column; gap: 6px; }
+  .override-note { font-size: var(--text-xs); color: var(--panel-muted); margin-top: 10px; }
+  .btn {
+    font-size: var(--text-sm); color: var(--page-fg); background: var(--panel-bg);
+    border: 1px solid var(--panel-border); padding: 9px 18px; border-radius: 12px;
+    cursor: pointer; transition: all 0.15s; font-family: inherit;
+  }
+  .btn:hover { border-color: var(--panel-accent); color: var(--panel-accent); }
+  .btn.primary { border-color: var(--panel-success); color: var(--panel-success); }
+  .btn.danger:hover { border-color: #e06c75; color: #e06c75; }
+  .plugin-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; font-size: var(--text-sm); border-top: 1px solid var(--panel-border); }
+  .plugin-row:first-of-type { border-top: none; }
+  .plugin-row .pkg { word-break: break-all; }
+  .plugin-add { display: flex; gap: 10px; margin-top: 14px; }
+  .plugin-add input[type=text] {
+    flex: 1; font-size: var(--text-sm); font-family: inherit; color: var(--page-fg);
+    background: var(--page-bg); border: 1px solid var(--panel-border);
+    border-radius: 12px; padding: 9px 12px; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
+  }
+  .plugin-add input[type=text]:focus { border-color: var(--panel-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--panel-accent) 8%, transparent); }
+  .num-input {
+    width: 100px; font-size: var(--text-sm); font-family: inherit; color: var(--page-fg);
+    background: var(--page-bg); border: 1px solid var(--panel-border);
+    border-radius: 12px; padding: 9px 12px; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
+  }
+  .num-input:focus { border-color: var(--panel-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--panel-accent) 8%, transparent); }
+  .suggest { font-size: var(--text-sm); color: var(--panel-muted); margin-top: 10px; }
+  .suggest button { background: none; border: none; color: var(--panel-accent); cursor: pointer; font: inherit; font-size: var(--text-sm); padding: 0; text-decoration: underline; }
+  .theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+  .theme-card {
+    border: 1px solid var(--panel-border); border-radius: 14px; padding: 16px;
+    cursor: pointer; transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s; background: var(--panel-bg);
+  }
+  .theme-card:hover { border-color: var(--panel-accent); transform: translateY(-1px); box-shadow: 0 4px 20px color-mix(in srgb, var(--panel-accent) 8%, transparent); }
+  .theme-card.active { border-color: var(--panel-success); }
+  .theme-card .tname { font-size: var(--text-sm); font-weight: 600; color: var(--page-fg); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+  .theme-card .tname input { accent-color: var(--panel-success); }
+  .swatches { display: flex; gap: 4px; flex-wrap: wrap; }
+  .swatch { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(128,128,128,0.18); }
+  .form-actions { margin-top: 12px; }
+  .config-paths { font-size: var(--text-xs); color: var(--panel-muted); line-height: 1.6; margin-top: 28px; }
+  .config-paths code { background: color-mix(in srgb, var(--panel-accent) 8%, transparent); padding: 3px 7px; border-radius: 6px; }
+  .btn { min-height: 44px; }
+  @media (max-width: 640px) {
+    .container { margin: 24px auto; padding: 0 16px; }
+    .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
+    .theme-grid { grid-template-columns: 1fr; }
+    .num-input { width: 100%; }
+  }
+</style>
+</head>`}function w(a,e){let r="";return a&&(r+='<div class="saved-flash">\u2713 Saved. Restart tmux-web to apply.</div>'),e&&(r+=`<div class="error-flash">${n(e)}</div>`),r}function z(a){const{settings:e,renderer:r,rendererOverridden:i,theme:l,plugins:t,saved:d=!1,error:o}=a,c=e.commandbar===!0,s=e.agents===!0,h=e.agentsBackgroundWatch===!0,m=e.terminalRenderer??"xterm",g=e.defaultView??"default",b=e.scheduleHistoryDays??7,v=t.length?t.map(p=>`<div class="plugin-row">
+      <span class="pkg">${n(p)}</span>
+      <form method="POST" action="/settings/plugins" onsubmit="return confirm('Remove ${n(p)}?');">
+        <input type="hidden" name="action" value="remove" />
+        <input type="hidden" name="pkg" value="${n(p)}" />
+        <button type="submit" class="btn danger">Remove</button>
+      </form>
+    </div>`).join(`
+`):'<p class="desc" style="margin:0">No plugins enabled.</p>';return`${u("Settings",l)}
+<body>
+<div class="container">
+  <div class="page-header">
+    <h1>Settings</h1>
+    <a href="/" class="back-link">Back</a>
+  </div>
+
+  <div class="restart-note">
+    <strong>Note:</strong> these settings are read once at startup. You may need to
+    <strong>restart the tmux-web process</strong> after making changes for them to take effect.
+  </div>
+
+  ${w(d,o)}
+
+  <form method="POST" action="/settings">
+    <div class="section">
+      <h2>Command bar</h2>
+      <p class="desc">\u2318K session search + quick actions.</p>
+      <label class="row"><input type="checkbox" name="commandbar" ${c?"checked":""} /> Enable command bar</label>
+    </div>
+
+    <div class="section">
+      <h2>Agents page</h2>
+      <p class="desc">Watch AI agents (Claude, Codex, OpenCode, Cursor) running in the last 10 panes you viewed, at <code>/agents</code>. Off by default.</p>
+      <label class="row"><input type="checkbox" name="agents" ${s?"checked":""} /> Enable agents page</label>
+      <label class="row"><input type="checkbox" name="agentsBackgroundWatch" ${h?"checked":""} /> Watch in the background (poll even when the page is closed)</label>
+    </div>
+
+    <div class="section">
+      <h2>Terminal library</h2>
+      <p class="desc">Rendering engine for the terminal view.</p>
+      <div class="radios">
+        <label class="row"><input type="radio" name="terminalRenderer" value="xterm" ${m==="xterm"?"checked":""} /> xterm.js (default)</label>
+        <label class="row"><input type="radio" name="terminalRenderer" value="ghostty" ${m==="ghostty"?"checked":""} /> ghostty-web</label>
+      </div>
+      ${i?`<p class="override-note">\u26A0 A CLI flag or <code>TMUX_WEB_TERMINAL_RENDERER</code> env var is currently forcing <strong>${r}</strong>, overriding this setting for the running process.</p>`:""}
+    </div>
+
+    <div class="section">
+      <h2>Default home tab</h2>
+      <p class="desc">Which tab the home page opens on.</p>
+      <div class="radios">
+        <label class="row"><input type="radio" name="defaultView" value="default" ${g==="default"?"checked":""} /> Default</label>
+        <label class="row"><input type="radio" name="defaultView" value="recent" ${g==="recent"?"checked":""} /> Last Updated</label>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2>Schedule history</h2>
+      <p class="desc">Days to keep the <code>/schedule</code> "Recently Triggered" history (fired &amp; missed tasks). 1\u2013365, default 7.</p>
+      <label class="row"><input type="number" class="num-input" name="scheduleHistoryDays" min="1" max="365" value="${b}" /> days</label>
+    </div>
+
+    <div class="form-actions">
+      <button type="submit" class="btn primary">Save settings</button>
+    </div>
+  </form>
+
+  <div class="section" style="margin-top:16px">
+    <h2>Plugins</h2>
+    <p class="desc">Installed via npm into the tmux-web data dir. Add/remove runs npm and may take a few seconds.</p>
+    ${v}
+    <form method="POST" action="/settings/plugins" class="plugin-add">
+      <input type="hidden" name="action" value="add" />
+      <input type="text" id="pkg-input" name="pkg" placeholder="npm package name" autocomplete="off" />
+      <button type="submit" class="btn">Add</button>
+    </form>
+  </div>
+
+  <div class="section">
+    <h2>Theme</h2>
+    <p class="desc">Shell chrome + terminal colors.</p>
+    <a href="/settings/theme" class="btn" style="display:inline-block;text-decoration:none">Customize theme \u2192</a>
+  </div>
+</div>
+</body>
+</html>`}const k={vscode:"VS Code",ghostty:"Ghostty","warm-clay":"Warm Clay","dark-cove":"Dark Cove"},$=["background","foreground","red","green","yellow","blue","magenta","cyan"];function E(a){const{theme:e,saved:r=!1}=a,i=f(),l=y.map(t=>{const d=i[t],o=e.template===t,c=$.map(s=>`<span class="swatch" style="background:${n(d.terminal[s])}" title="${s}"></span>`).join("");return`<label class="theme-card${o?" active":""}">
+      <div class="tname">
+        <input type="radio" name="template" value="${t}" ${o?"checked":""} style="accent-color:var(--panel-success)" />
+        ${n(k[t]??t)}
+      </div>
+      <div class="swatches">${c}</div>
+    </label>`}).join(`
+`);return`${u("Theme",e)}
+<body>
+<div class="container">
+  <div class="page-header">
+    <h1>Theme</h1>
+    <a href="/settings" class="back-link">Back</a>
+  </div>
+
+  <div class="restart-note">
+    <strong>Note:</strong> the active theme is applied immediately to new page renders.
+  </div>
+
+  ${r?'<div class="saved-flash">\u2713 Theme saved.</div>':""}
+
+  <form method="POST" action="/settings/theme">
+    <div class="theme-grid">
+      ${l}
+    </div>
+    <div class="form-actions" style="margin-top:16px">
+      <button type="submit" class="btn primary">Save theme</button>
+    </div>
+  </form>
+</div>
+</body>
+</html>`}export{z as renderSettings,E as renderThemeSettings};