tmux-weblink 0.3.0

package/dist/lib/notes-drawer.js

@@ -0,0 +1,210 @@
+import{notesDbScript as o}from"./notes-db.js";import{notesUtilsScript as n}from"./notes-utils.js";import{closeOtherDrawersExcept as r,wrapDrawerScript as a}from"./drawer-script.js";import{drawerResizeCSS as s,drawerResizeHandleHTML as i,drawerResizeScript as d}from"./drawer-resize.js";import{escapeHtml as c}from"./html.js";function m(){return`
+  #notes-backdrop {
+    position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 999;
+    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
+  }
+  #notes-backdrop.open { opacity: 1; pointer-events: auto; }
+  #notes-drawer {
+    position: fixed; right: 0; top: 0; height: 100%; width: 360px; z-index: 1000;
+    background: var(--panel-bg); border-left: 1px solid var(--panel-border);
+    display: flex; flex-direction: column;
+    transform: translateX(100%); transition: transform 0.25s ease;
+  }
+  #notes-drawer.open { transform: translateX(0); }
+  ${s()}
+  .drawer-header {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 10px 16px; border-bottom: 1px solid var(--panel-border);
+    font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
+    color: var(--panel-accent); font-family: var(--font-mono); flex-shrink: 0;
+  }
+  .drawer-header button {
+    background: none; border: none; color: var(--panel-muted); cursor: pointer;
+    font-size: var(--text-lg); line-height: 1; min-width: 44px; min-height: 44px; padding: 8px; border-radius: 8px; transition: color 0.15s, background 0.15s;
+  }
+  .drawer-header button:hover { color: var(--panel-accent); background: color-mix(in srgb, var(--panel-accent) 8%, transparent); }
+  .drawer-header button:focus-visible { box-shadow: 0 0 0 2px var(--panel-accent); outline: none; }
+  .drawer-toolbar {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 8px 16px; border-bottom: 1px solid var(--panel-border);
+    flex-shrink: 0; gap: 8px;
+  }
+  .drawer-toolbar .badge {
+    font-size: var(--text-xs); color: var(--panel-success); letter-spacing: 0.1em; text-transform: uppercase;
+    opacity: 0; transition: opacity 0.15s; font-family: var(--font-mono);
+  }
+  .drawer-toolbar .badge.show { opacity: 1; }
+  .drawer-toolbar .actions { display: flex; gap: 8px; align-items: center; }
+  .drawer-toolbar button {
+    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: var(--font-mono); transition: all 0.15s;
+    min-height: 44px;
+  }
+  .drawer-toolbar button:hover { border-color: var(--panel-accent); color: var(--panel-accent); }
+  .drawer-toolbar button:focus-visible { box-shadow: 0 0 0 2px var(--panel-accent); outline: none; }
+  .drawer-toolbar button:disabled { opacity: 0.4; cursor: not-allowed; }
+  .drawer-toolbar button.flash { color: var(--panel-success); border-color: var(--panel-success); }
+  #notes-editor {
+    flex: 1; padding: 16px; outline: none; overflow-y: auto;
+    font-size: var(--text-sm); line-height: 1.7; font-family: var(--font-mono);
+    white-space: pre-wrap; word-break: break-word; color: var(--page-fg);
+    scrollbar-width: thin;
+    scrollbar-color: var(--panel-border) transparent;
+  }
+  #notes-editor::-webkit-scrollbar { width: 4px; }
+  #notes-editor::-webkit-scrollbar-track { background: transparent; }
+  #notes-editor::-webkit-scrollbar-thumb {
+    background: var(--panel-border); border-radius: 2px;
+  }
+  #notes-editor::-webkit-scrollbar-thumb:hover { background: var(--panel-muted); }
+  #notes-editor:empty::before {
+    content: "Double-click to add notes..."; color: var(--panel-muted); pointer-events: none;
+  }
+  #notes-editor[contenteditable="true"] {
+    border: 1px solid color-mix(in srgb, var(--panel-accent) 30%, transparent);
+    background: color-mix(in srgb, var(--page-bg) 70%, transparent);
+    border-radius: 8px; margin: 8px;
+  }
+  #notes-editor a { color: var(--panel-accent); text-decoration: none; }
+  #notes-editor a:hover { text-decoration: underline; }
+  @media (max-width: 560px) {
+    #notes-drawer { width: min(100vw - 16px, 400px); }
+  }`}function g(e){return`
+<div id="notes-backdrop"></div>
+<div id="notes-drawer" class="resizable-drawer">
+  ${i()}
+  <div class="drawer-header">
+    <span>${c(e)}</span>
+    <button id="drawer-close">&times;</button>
+  </div>
+  <div class="drawer-toolbar">
+    <span class="badge" id="edit-badge">Editing</span>
+    <div class="actions">
+      <button id="notes-copy">Copy</button>
+      <button id="notes-export">Export .md</button>
+    </div>
+  </div>
+  <div id="notes-editor"></div>
+</div>`}function f(e){const t=JSON.stringify(e);return a("notes",`
+const NOTES_SCOPE = ${t};
+${o()}
+${n()}
+${d("notes-drawer","tmux-web:drawer-width:notes",360)}
+
+const notesBackdrop = document.getElementById('notes-backdrop');
+const notesDrawer = document.getElementById('notes-drawer');
+const notesEditor = document.getElementById('notes-editor');
+const notesToggle = document.getElementById('notes-toggle');
+const drawerClose = document.getElementById('drawer-close');
+const editBadge = document.getElementById('edit-badge');
+const copyBtn = document.getElementById('notes-copy');
+const exportBtn = document.getElementById('notes-export');
+
+let notePlain = '';
+let editing = false;
+
+function setButtonsEnabled(enabled) {
+  copyBtn.disabled = !enabled;
+  exportBtn.disabled = !enabled;
+}
+
+async function renderNote() {
+  const rec = await loadNote(NOTES_SCOPE);
+  notePlain = rec?.content || '';
+  notesEditor.innerHTML = linkifyHTML(escapeHTML(notePlain));
+  setButtonsEnabled(!!notePlain);
+}
+
+function openDrawer() {
+  ${r("notes")}
+  notesDrawer.classList.add('open');
+  notesBackdrop.classList.add('open');
+  renderNote();
+  const url = new URL(location.href);
+  if (url.searchParams.get('tab') !== 'notes') {
+    url.searchParams.set('tab', 'notes');
+    history.pushState({ notesOpen: true }, '', url);
+  }
+}
+
+function closeDrawer() {
+  notesDrawer.classList.remove('open');
+  notesBackdrop.classList.remove('open');
+  if (editing) stopEditing();
+  const url = new URL(location.href);
+  if (url.searchParams.get('tab') === 'notes') {
+    url.searchParams.delete('tab');
+    history.pushState({}, '', url);
+  }
+}
+
+function startEditing() {
+  editing = true;
+  notesEditor.contentEditable = 'true';
+  notesEditor.textContent = notePlain;
+  editBadge.classList.add('show');
+  notesEditor.focus();
+}
+
+async function stopEditing() {
+  if (!editing) return;
+  editing = false;
+  // innerText (not textContent): Enter in contenteditable inserts <br> or blocks;
+  // textContent drops those breaks and merges lines.
+  notePlain = (notesEditor.innerText ?? '').replace(/\\r\\n/g, '\\n');
+  notesEditor.contentEditable = 'false';
+  notesEditor.innerHTML = linkifyHTML(escapeHTML(notePlain));
+  editBadge.classList.remove('show');
+  await saveNote(NOTES_SCOPE, notePlain);
+  setButtonsEnabled(!!notePlain);
+}
+
+notesToggle.addEventListener('click', () => {
+  if (notesDrawer.classList.contains('open')) closeDrawer();
+  else openDrawer();
+});
+
+drawerClose.addEventListener('click', closeDrawer);
+notesBackdrop.addEventListener('click', closeDrawer);
+
+notesEditor.addEventListener('dblclick', (e) => {
+  if (!editing) { e.preventDefault(); startEditing(); }
+});
+
+notesEditor.addEventListener('blur', () => { if (editing) stopEditing(); });
+
+notesEditor.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && editing) { e.preventDefault(); stopEditing(); }
+});
+
+copyBtn.addEventListener('click', async () => {
+  if (!notePlain) return;
+  try {
+    await navigator.clipboard.writeText(notePlain);
+    copyBtn.textContent = 'Copied!';
+    copyBtn.classList.add('flash');
+    setTimeout(() => { copyBtn.textContent = 'Copy'; copyBtn.classList.remove('flash'); }, 1500);
+  } catch {}
+});
+
+exportBtn.addEventListener('click', () => {
+  if (!notePlain) return;
+  const blob = new Blob([notePlain], { type: 'text/markdown' });
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  const safeName = NOTES_SCOPE.replace(/[:\\/\\\\]/g, '-');
+  a.download = \`notes-\${safeName}.md\`;
+  a.click();
+  URL.revokeObjectURL(a.href);
+});
+
+window.addEventListener('popstate', () => {
+  const params = new URLSearchParams(location.search);
+  if (params.get('tab') === 'notes') openDrawer();
+  else closeDrawer();
+});
+
+if (new URLSearchParams(location.search).get('tab') === 'notes') {
+  openDrawer();
+}`,"closeDrawer")}export{m as notesDrawerCSS,g as notesDrawerHTML,f as notesDrawerScript};

package/dist/lib/notes-utils.js

@@ -0,0 +1,15 @@
+function e(){return`
+function linkifyHTML(text) {
+  const urlRe = /https?:\\/\\/[^\\s<>"]+/g;
+  return text.replace(urlRe, (url) =>
+    \`<a href="\${url}" target="_blank" rel="noopener noreferrer">\${url}</a>\`
+  );
+}
+
+function escapeHTML(text) {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}`}export{e as notesUtilsScript};

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

@@ -0,0 +1,105 @@
+import{cssVarsStyle as s}from"../theme.js";import{AGENT_LABELS as o}from"../agent-detect.js";import{commandbarCSS as i,commandbarHTML as l,commandbarScript as p}from"../commandbar.js";import{notesDrawerCSS as c,notesDrawerHTML as d,notesDrawerScript as g}from"../notes-drawer.js";import{sharedLayoutCSS as m,sharedHeader as u,sharedSidebar as x,newSessionModalHTML as f,newSessionModalScript as b}from"../shared-layout.js";function k(a,e=!1,t=[]){const n=JSON.stringify(o).replace(/</g,"\\u003c"),r=`
+  .sub { font-size: var(--text-sm); color: var(--panel-muted); margin-bottom: 24px; line-height: 1.5; }
+  .agent {
+    display: flex; align-items: center; gap: 12px; text-decoration: none;
+    padding: 14px 16px; border: 1px solid var(--panel-border); border-radius: 12px;
+    margin-bottom: 8px; background: var(--panel-bg); transition: border-color 0.15s, transform 0.1s;
+  }
+  .agent:hover { border-color: var(--panel-accent); transform: translateY(-1px); }
+  .agent .name { font-size: var(--text-sm); font-weight: 600; color: var(--page-fg); flex: 1; }
+  .agent .loc { font-size: var(--text-xs); color: var(--panel-muted); }
+  .badge {
+    font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase;
+    padding: 4px 10px; border-radius: 10px; border: 1px solid var(--panel-border);
+    flex-shrink: 0; min-width: 64px; text-align: center;
+  }
+  .badge.working { color: var(--panel-success); border-color: var(--panel-success); }
+  .badge.blocked { color: #f0c674; border-color: #f0c674; }
+  .badge.idle { color: var(--panel-muted); }
+  .badge.unknown { color: var(--panel-muted); opacity: 0.7; }
+  .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--panel-muted); }
+  .dot.working { background: var(--panel-success); }
+  .dot.blocked { background: #f0c674; }
+  .empty { font-size: var(--text-sm); color: var(--panel-muted); line-height: 1.6; margin-top: 20px; }
+  @media (max-width: 560px) {
+    .agent { flex-wrap: wrap; gap: 8px; }
+    .agent .loc { width: 100%; order: 3; }
+  }
+  ${e?i():""}
+  ${c()}`;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>Agents - tmux-web</title>
+<style>
+  ${s(a.shell)}
+  ${m(r)}
+</style>
+</head>
+<body>
+
+${u({commandbarEnabled:e,title:"Agents",themeTemplate:a.template})}
+
+<div class="page-wrap">
+  <div class="page-layout">
+    ${x({activePage:"agents",agentsEnabled:!0,refreshHref:"/agents"})}
+    <main class="main-panel">
+      <p class="sub">AI agents in the last panes you viewed. Updates automatically.</p>
+      <div id="agents-list">
+        <p class="empty" id="empty-msg">Loading\u2026</p>
+      </div>
+    </main>
+  </div>
+</div>
+
+${f()}
+${e?l():""}
+${d("Notes - Global")}
+
+<script type="module">
+${g("__global__")}
+${e?p(t,[]):""}
+${b()}
+</script>
+
+<script type="module">
+const LABELS = ${n};
+
+function esc(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function render(list) {
+  const container = document.getElementById('agents-list');
+  if (!list || list.length === 0) {
+    container.innerHTML = '<p class="empty" id="empty-msg">No agents detected.<br>Open a session running Claude, Codex, OpenCode, or Cursor to start watching it.</p>';
+    return;
+  }
+  container.innerHTML = list.map((a) => {
+    const label = LABELS[a.agent] || a.agent;
+    const state = a.state || 'unknown';
+    return '<a class="agent" href="/s/' + encodeURIComponent(a.sessionName) + '">' +
+      '<span class="dot ' + esc(state) + '"></span>' +
+      '<span class="name">' + esc(label) + '</span>' +
+      '<span class="loc">' + esc(a.sessionName) + ':' + a.windowIndex + '.' + a.paneIndex + '</span>' +
+      '<span class="badge ' + esc(state) + '">' + esc(state) + '</span>' +
+    '</a>';
+  }).join('');
+}
+
+async function poll() {
+  try {
+    const res = await fetch('/api/agents', { headers: { 'accept': 'application/json' } });
+    if (res.ok) render(await res.json());
+  } catch {
+    // transient \u2014 keep last render
+  }
+}
+
+poll();
+setInterval(poll, 2500);
+</script>
+</body>
+</html>`}export{k as renderAgentsIndex};

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

@@ -0,0 +1,85 @@
+import{cssVarsStyle as v}from"../theme.js";import{commandbarCSS as w,commandbarHTML as b,commandbarScript as y}from"../commandbar.js";import{sharedLayoutCSS as S,sharedHeader as $,sharedSidebar as M,newSessionModalHTML as H,newSessionModalScript as k}from"../shared-layout.js";function l(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function C(e,i){const t=Math.max(0,i-e),n=Math.floor(t/1e3);if(n<45)return"just now";const s=Math.floor(n/60);if(s<60)return s+"m ago";const r=Math.floor(s/60);if(r<24)return r+"h ago";const a=Math.floor(r/24);return a<30?a+"d ago":new Date(e).toLocaleDateString()}function N(e,i,t=!1,n=[],s=!1,r=new Set){const a=Date.now(),p=e.map(o=>{const x=l(o.windowName||"(unnamed)"),g=l(o.sessionName),u=l(C(o.visitedAt,a)),c=r.has(o.sessionName),d=`
+  <div class="hist-main">
+    <span class="hist-window">${x}</span>
+    <span class="hist-session">${g}${c?"":' <span class="hist-gone">gone</span>'}</span>
+  </div>
+  <span class="hist-time">${u}</span>`;return c?`<a class="hist-row" href="${"/s/"+encodeURIComponent(o.sessionName)+"?window="+o.windowIndex}">${d}</a>`:`<div class="hist-row dead" title="Session no longer exists">${d}</div>`}).join(`
+`),m=e.length?'<div class="hist-toolbar"><button id="hist-clear" type="button">Clear history</button></div>':"",h=e.length?p:'<p class="empty">No history yet. Sessions and windows you visit will show up here.</p>',f=`
+  .hist-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
+  .hist-toolbar button {
+    background: none; border: 1px solid var(--panel-border); border-radius: 6px;
+    color: var(--panel-muted); font-family: inherit; font-size: var(--text-xs);
+    padding: 8px 14px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
+    min-height: 44px;
+  }
+  .hist-toolbar button:hover { border-color: #fc8181; color: #fc8181; background: color-mix(in srgb, #fc8181 8%, transparent); }
+  .hist-toolbar button:focus-visible { box-shadow: 0 0 0 2px #fc8181; outline: none; }
+  .hist-row {
+    display: flex; align-items: center; gap: 12px; justify-content: space-between;
+    padding: 14px 16px; border: 1px solid var(--panel-border); border-radius: 10px;
+    margin-bottom: 8px; text-decoration: none; color: var(--page-fg);
+    background: var(--panel-bg); transition: border-color 0.15s, transform 0.1s;
+  }
+  .hist-row:hover { border-color: var(--panel-accent); transform: translateY(-1px); }
+  .hist-row.dead { opacity: 0.5; cursor: default; }
+  .hist-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+  .hist-window {
+    font-size: var(--text-sm); font-weight: 600; color: var(--page-fg);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .hist-session { font-size: var(--text-xs); color: var(--panel-muted); letter-spacing: 0.03em; }
+  .hist-gone {
+    color: #fc8181; text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.08em;
+    border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; margin-left: 4px;
+  }
+  .hist-time { font-size: var(--text-xs); color: var(--panel-muted); flex-shrink: 0; }
+  .empty { font-size: var(--text-sm); color: var(--panel-muted); line-height: 1.6; margin-top: 20px; }
+  @media (max-width: 560px) {
+    .hist-row { flex-direction: column; align-items: flex-start; gap: 8px; }
+    .hist-time { align-self: flex-end; }
+  }
+  ${t?w():""}`;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>History - tmux-web</title>
+<style>
+  ${v(i.shell)}
+  ${S(f)}
+</style>
+</head>
+<body>
+
+${$({commandbarEnabled:t,title:"History",themeTemplate:i.template})}
+
+<div class="page-wrap">
+  <div class="page-layout">
+    ${M({activePage:"history",agentsEnabled:s,refreshHref:"/history"})}
+    <main class="main-panel">
+      ${m}
+      <div id="hist-list">${h}</div>
+    </main>
+  </div>
+</div>
+
+${H()}
+${t?b():""}
+
+<script type="module">
+const clearBtn = document.getElementById('hist-clear');
+if (clearBtn) {
+  clearBtn.addEventListener('click', async () => {
+    clearBtn.disabled = true;
+    try {
+      await fetch('/api/history/clear', { method: 'POST' });
+      location.reload();
+    } catch { clearBtn.disabled = false; }
+  });
+}
+${t?y(n,[]):""}
+${k()}
+</script>
+</body>
+</html>`}export{N as renderHistoryIndex};

package/dist/lib/pages/landing.js

@@ -0,0 +1,78 @@
+import{cssVarsStyle as w}from"../theme.js";import{notesDrawerCSS as b,notesDrawerHTML as v,notesDrawerScript as x}from"../notes-drawer.js";import{escapeHtml as $}from"../html.js";import{commandbarCSS as y,commandbarHTML as S,commandbarScript as M}from"../commandbar.js";import{sharedLayoutCSS as k,sharedHeader as T,sharedSidebar as C,newSessionModalHTML as A,newSessionModalScript as D}from"../shared-layout.js";function H(o){const s=Date.now()-o;if(s<0)return"just now";const a=Math.floor(s/1e3),n=Math.floor(a/60),t=Math.floor(n/60),e=Math.floor(t/24),i=Math.floor(e/7),c=Math.floor(e/30),l=Math.floor(e/365),r=new Intl.RelativeTimeFormat("en",{numeric:"auto"});return a<45?"just now":n<60?r.format(-n,"minute"):t<24?r.format(-t,"hour"):e<7?r.format(-e,"day"):i<5?r.format(-i,"week"):c<12?r.format(-c,"month"):r.format(-l,"year")}function L(o,s,a){if(s==="default")return o;const n=[],t=[];for(const e of o)a.has(e.name)?n.push(e):t.push(e);return n.sort((e,i)=>(a.get(i.name)??0)-(a.get(e.name)??0)),[...n,...t]}function z(o,s,a){const n=`${o.windows} window${o.windows!==1?"s":""}`,t=o.attached?" \xB7 attached":"";if(s==="default")return`${n}${t}`;const e=a.get(o.name);return e?`${n}${t} \xB7 ${H(e)}`:`${n}${t}`}function F(o,s){const{view:a,accessMap:n,commandbarEnabled:t=!1,commandbarSessions:e=[],agentsEnabled:i=!1,theme:c}=s,l=L(o,a,n),r=[{label:"Open notes",meta:"Global notes",clickTargetId:"notes-toggle"}];i&&r.push({label:"View All Agents",meta:"Running agents",href:"/agents"});const p=l.map(m=>`<a href="/s/${encodeURIComponent(m.name)}" class="session-row">
+      <span class="name">${$(m.name)}</span>
+      <span class="meta">${z(m,a,n)}</span>
+    </a>`).join(`
+`),d=o.length===0?'<p class="empty">No tmux sessions found.<br>Create one with <code>tmux new -s mysession</code><br>or use the <strong>New Session</strong> button.</p>':"",f=a==="recent"?"/?view=recent":"/",g=a==="default"?" active":"",u=a==="recent"?" active":"",h=`
+  .session-row {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 18px 22px; border: 1px solid var(--panel-border); border-radius: 16px;
+    margin-bottom: 12px; text-decoration: none; color: var(--page-fg);
+    background: var(--panel-bg); transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
+  }
+  .session-row:hover {
+    border-color: var(--panel-accent);
+    box-shadow: 0 4px 20px color-mix(in srgb, var(--panel-accent) 8%, transparent);
+    transform: translateY(-1px);
+  }
+  .session-row .name { font-size: var(--text-base); font-weight: 500; color: var(--page-fg); }
+  .session-row .meta { font-size: var(--text-sm); color: var(--panel-muted); text-align: right; margin-top: 4px; }
+  .empty { font-size: var(--text-sm); color: var(--panel-muted); line-height: 1.7; margin-top: 12px; }
+  .empty code { background: color-mix(in srgb, var(--panel-accent) 8%, transparent); padding: 3px 7px; border-radius: 6px; font-size: var(--text-xs) }
+  .empty strong { color: var(--panel-accent); font-weight: 500; }
+  .view-tabs {
+    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;
+  }
+  .view-tabs .tab {
+    display: inline-flex; align-items: center;
+    font-size: var(--text-sm); color: var(--panel-muted); text-decoration: none;
+    min-height: 44px; padding: 8px 16px; border-radius: 999px;
+    transition: color 0.15s, background 0.15s;
+  }
+  .view-tabs .tab:hover { color: var(--panel-accent); background: color-mix(in srgb, var(--panel-accent) 8%, transparent); }
+  .view-tabs .tab.active { color: var(--panel-accent-on); background: var(--panel-accent); }
+  @media (max-width: 560px) {
+    .session-row { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; }
+    .session-row .meta { text-align: left; margin-top: 0; }
+  }
+  ${t?y():""}
+  ${b()}`;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>tmux-weblink</title>
+<style>
+  ${w(c.shell)}
+  ${k(h)}
+</style>
+</head>
+<body>
+
+${T({commandbarEnabled:t,title:"TMUX Sessions",themeTemplate:c.template})}
+
+<div class="page-wrap">
+  <div class="page-layout">
+    ${C({activePage:"home",agentsEnabled:i,refreshHref:f})}
+    <main class="main-panel">
+      <nav class="view-tabs">
+        <a href="/" class="tab${g}">Default</a>
+        <a href="/?view=recent" class="tab${u}">Last Updated</a>
+      </nav>
+      ${p}
+      ${d}
+    </main>
+  </div>
+</div>
+
+${A()}
+${t?S():""}
+${v("Notes - Global")}
+
+<script type="module">
+${x("__global__")}
+${t?M(e,r):""}
+${D()}
+</script>
+</body>
+</html>`}export{F as renderLanding};