feat: add message copy actions, follow-tail control, and draft persistence

Author: gosunuts

frontend/app.js

@@ -50,19 +50,22 @@ const hubCount = document.getElementById('hubCount');
 const hubEl = document.getElementById('hub');
 const hubOverlay = document.getElementById('hub-overlay');
 const hubList = document.getElementById('hubList');
+const jumpLatestBtn = document.getElementById('jumpLatest');
 
 // ── 2. State ─────────────────────────────────────────────────────────
 
 let ws = null;
 let streaming = false;
-let activeSessionId = null;
+let activeSessionId = localStorage.getItem('chat-active-session');
 let reconnectTimer = null;
 let promptWatchdog = null;
 let lastState = null;        // last state_update (model, thinkingLevel, …)
 let modelCache = null;       // last model_list payload
 let caps = { models: false, thinking: false, subagents: false, transcripts: false, cost: false, commands: false, abort: true };
 let COMMANDS = [];           // adapter-provided slash commands (via capabilities)
 let hubAgents = [];          // last subagent_update payload
+let followTail = true;       // false while the user is reading older output
+let restoringHistory = false;
 
 // In-flight assistant message being streamed.
 let agentEl = null;          // bubble element
@@ -86,7 +89,80 @@ function resetAgent() {
   agentEl = null; textEl = null; thinkEl = null; pendingMd = '';
 }
 
-function scrollBottom() { chat.scrollTop = chat.scrollHeight; }
+function isNearBottom() {
+  return chat.scrollHeight - chat.scrollTop - chat.clientHeight < 72;
+}
+
+function updateFollowTail() {
+  if (restoringHistory) return;
+  followTail = isNearBottom();
+  jumpLatestBtn.classList.toggle('visible', !followTail);
+}
+
+function scrollBottom(force = false) {
+  if (!force && !followTail) {
+    jumpLatestBtn.classList.add('visible');
+    return;
+  }
+  chat.scrollTop = chat.scrollHeight;
+  followTail = true;
+  jumpLatestBtn.classList.remove('visible');
+}
+
+function jumpToLatest() {
+  scrollBottom(true);
+}
+
+function draftKey(sessionId = activeSessionId) {
+  return sessionId ? `chat-draft:${sessionId}` : null;
+}
+
+function persistDraft() {
+  const key = draftKey();
+  if (!key) return;
+  if (input.value) localStorage.setItem(key, input.value);
+  else localStorage.removeItem(key);
+}
+
+function restoreDraft() {
+  input.value = localStorage.getItem(draftKey()) || '';
+  input.style.height = 'auto';
+  input.style.height = Math.min(input.scrollHeight, 120) + 'px';
+}
+
+async function copyText(text, button) {
+  if (!text) return;
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    const helper = document.createElement('textarea');
+    helper.value = text;
+    helper.style.position = 'fixed';
+    helper.style.opacity = '0';
+    document.body.appendChild(helper);
+    helper.select();
+    document.execCommand('copy');
+    helper.remove();
+  }
+  const old = button.textContent;
+  button.textContent = 'Copied';
+  button.classList.add('copied');
+  setTimeout(() => { button.textContent = old; button.classList.remove('copied'); }, 1200);
+}
+
+function addMessageActions(el, text) {
+  if (!text) return;
+  const actions = document.createElement('div');
+  actions.className = 'message-actions';
+  const button = document.createElement('button');
+  button.className = 'copy-btn';
+  button.type = 'button';
+  button.textContent = 'Copy';
+  button.setAttribute('aria-label', 'Copy message');
+  button.onclick = () => copyText(text, button);
+  actions.appendChild(button);
+  el.appendChild(actions);
+}
 
 function saveNick(v) {
   nick = (v || '').trim().slice(0, 20) || nick;
@@ -205,6 +281,7 @@ function userMsg(text, who) {
     el.className = 'msg theirs';
     el.innerHTML = `<span class="nick">${esc(who)}</span>${esc(text)}`;
   }
+  addMessageActions(el, text);
   chat.appendChild(el);
   scrollBottom();
 }
@@ -224,6 +301,15 @@ function renderText(delta) {
   agentBubble();
   pendingMd += delta;
   textEl.innerHTML = md(pendingMd);
+  let actions = agentEl.querySelector('.message-actions');
+  if (!actions) {
+    actions = document.createElement('div');
+    actions.className = 'message-actions';
+    actions.innerHTML = '<button class="copy-btn" type="button" aria-label="Copy message">Copy</button>';
+    agentEl.appendChild(actions);
+  }
+  const messageText = pendingMd;
+  actions.querySelector('button').onclick = (e) => copyText(messageText, e.currentTarget);
   scrollBottom();
 }
 
@@ -247,7 +333,7 @@ function renderToolCard(name, params) {
     <div class="hd"><span class="icon">⚙</span><span class="name">${esc(name)}</span><span class="st">running…</span></div>
     <div class="bd">
       ${paramsStr ? `<div class="tool-params"><span class="lbl">params</span><pre>${esc(paramsStr)}</pre></div>` : ''}
-      <div class="tool-result"><span class="lbl">result</span><pre>waiting…</pre></div>
+      <div class="tool-result"><div class="tool-label-row"><span class="lbl">result</span><button class="copy-btn" type="button" aria-label="Copy tool result" disabled>Copy</button></div><pre>waiting…</pre></div>
     </div>`;
   card.querySelector('.hd').onclick = () => card.classList.toggle('open');
   chat.appendChild(card);
@@ -262,6 +348,10 @@ function finishToolCard(result) {
   last.querySelector('.st').classList.add('done');
   const out = last.querySelector('.tool-result pre');
   if (!out) return;
+  const copyButton = last.querySelector('.tool-result .copy-btn');
+  const resultText = result || '(no output)';
+  copyButton.disabled = false;
+  copyButton.onclick = () => copyText(resultText, copyButton);
   if (result) {
     // Markdown-render text-like results, truncate long ones
     if (result.length < 2000 && (result.includes('\n') || result.includes('`') || result.includes('**'))) {
@@ -318,6 +408,7 @@ function clearChat() {
 }
 
 function loadHistory(messages) {
+  restoringHistory = true;
   clearChat();
   for (const m of messages) {
     if (m.role === 'user') {
@@ -326,10 +417,12 @@ function loadHistory(messages) {
       agentBubble();
       pendingMd = m.content;
       textEl.innerHTML = md(pendingMd);
+      addMessageActions(agentEl, m.content);
       resetAgent();
     }
   }
-  chat.scrollTop = chat.scrollHeight;
+  restoringHistory = false;
+  scrollBottom(true);
 }
 
 // ── 7. Agent Hub (R14 + transcripts) ────────────────────────────────
@@ -678,8 +771,11 @@ function handleEvent(msg) {
       renderSessionList(lastSessions);
       break;
     case 'session_switched':
+      persistDraft();
       activeSessionId = msg.sessionId;
+      localStorage.setItem('chat-active-session', activeSessionId);
       clearChat();
+      restoreDraft();
       // Per-session state from the previous session must not leak in
       hubAgents = [];
       hubView = { mode: 'list', agentId: null };
@@ -871,6 +967,7 @@ function send() {
     return;
   }
   input.value = '';
+  persistDraft();
   input.style.height = 'auto';
   userMsg(t, nick);
   ws.send(JSON.stringify({
@@ -893,7 +990,7 @@ function stop() {
 input.addEventListener('keydown', (e) => {
   const pickerOpen = pickerEl.classList.contains('visible');
   const cmdOpen = cmdList.classList.contains('visible');
-  if (e.key === 'Enter' && !e.shiftKey) {
+  if (e.key === 'Enter' && !e.shiftKey && !e.isComposing && e.keyCode !== 229) {
     e.preventDefault();
     if (pickerOpen) pickerAccept();
     else if (cmdOpen) cmdAccept();
@@ -917,13 +1014,25 @@ input.addEventListener('keydown', (e) => {
 });
 
 input.addEventListener('input', () => {
+  persistDraft();
   input.style.height = 'auto';
   input.style.height = Math.min(input.scrollHeight, 120) + 'px';
   if (maybeShowPicker(input.value)) return;
   hidePicker();
   showAutocomplete(input.value);
 });
 
+chat.addEventListener('scroll', updateFollowTail, { passive: true });
+chat.addEventListener('click', (e) => {
+  const button = e.target.closest('[data-copy="code"]');
+  if (!button) return;
+  const code = button.closest('.code-block')?.querySelector('code')?.textContent || '';
+  copyText(code, button);
+});
+document.addEventListener('visibilitychange', () => {
+  if (document.hidden) persistDraft();
+});
+
 // ── init ─────────────────────────────────────────────────────────────
 
 connect();

frontend/contract.ts

@@ -49,6 +49,7 @@ export function runStaticChecks(): { passed: CheckResult[]; failed: CheckResult[
       "lastState", "modelCache", "caps", "COMMANDS", "hubAgents", "agentEl",
       "textEl", "thinkEl", "pendingMd", "lastSessions", "nick", "hubView",
       "sessionFiles", "hubTranscripts", "pickerMode", "cmdActiveIndex", "pickerActiveIndex",
+      "followTail", "restoringHistory",
     ];
     const problems: string[] = [];
     for (const name of canonical) {
@@ -122,6 +123,16 @@ export function runStaticChecks(): { passed: CheckResult[]; failed: CheckResult[
     assert(undeclared.length === 0, `var() without :root declaration: [${undeclared}]`);
   });
 
+  run("mobile UX: semantic copy, IME-safe send, draft and follow-tail", () => {
+    const app = file("app.js");
+    const html = file("index.html");
+    const markdown = file("markdown.js");
+    assert(app.includes("e.isComposing") && app.includes("e.keyCode !== 229"), "Enter send is not IME-safe");
+    assert(app.includes("chat-draft:") && app.includes("persistDraft"), "session drafts are not persisted");
+    assert(app.includes("followTail") && html.includes('id="jumpLatest"'), "follow-tail control missing");
+    assert(markdown.includes('data-copy="code"') && app.includes("addMessageActions") && app.includes("Copy tool result"), "copy actions missing");
+  });
+
   // C9: adapter request/response pairing — an edit once deleted the
   // get_available_models response branch, leaving /model permanently
   // empty. Every RPC command the adapter writes must have a matching

frontend/index.html

@@ -42,7 +42,10 @@ <h1 id="chatTitle">Agent Chat</h1>
       <input class="nick" id="nickInput" placeholder="nick" maxlength="20" onchange="saveNick(this.value)">
     </header>
 
-    <main id="chat"></main>
+    <main id="chat" aria-live="polite" aria-relevant="additions text"></main>
+    <button id="jumpLatest" class="jump-latest" type="button" onclick="jumpToLatest()" aria-label="Jump to latest message">
+      <span>New activity</span><span aria-hidden="true">↓</span>
+    </button>
 
     <div id="hub-overlay" onclick="toggleHub()"></div>
     <div id="hub">
@@ -56,7 +59,7 @@ <h1 id="chatTitle">Agent Chat</h1>
     <footer>
       <div class="cmd-list" id="cmdList"></div>
       <div class="row">
-        <textarea id="input" placeholder="Send a prompt… or / for commands" rows="1"></textarea>
+        <textarea id="input" placeholder="Send a prompt… or / for commands" rows="1" enterkeyhint="send" aria-label="Message"></textarea>
         <button class="send" id="sendBtn" onclick="send()">Send</button>
         <button class="stop" id="stopBtn" onclick="stop()">Stop</button>
       </div>

frontend/markdown.js

@@ -65,7 +65,7 @@ function md(src) {
     if (cb) {
       flushPara(); flushList();
       const b = blocks[parseInt(cb[1])];
-      html += `<div class="code-block"><div class="code-lang">${escAttr(b.lang || 'text')}</div><pre><code>${hl(b.code, b.lang)}</code></pre></div>`;
+      html += codeBlock(b);
       continue;
     }
 
@@ -116,12 +116,16 @@ function md(src) {
   // Restore any remaining code blocks
   html = html.replace(/\x00CB(\d+)\x00/g, (_, i) => {
     const b = blocks[parseInt(i)];
-    return `<div class="code-block"><div class="code-lang">${escAttr(b.lang || 'text')}</div><pre><code>${hl(b.code, b.lang)}</code></pre></div>`;
+    return codeBlock(b);
   });
 
   return html;
 }
 
+function codeBlock(block) {
+  return `<div class="code-block"><div class="code-head"><span class="code-lang">${escAttr(block.lang || 'text')}</span><button class="copy-btn" type="button" data-copy="code" aria-label="Copy code">Copy</button></div><pre><code>${hl(block.code, block.lang)}</code></pre></div>`;
+}
+
 function escAttr(s) { return s.replace(/"/g, '&quot;').replace(/</g, '&lt;'); }
 
 // ── Basic syntax highlighting ─────────────────────────────────────────

frontend/style.css

@@ -85,9 +85,13 @@ main::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
 
 /* Code blocks */
 .code-block { background:var(--bg); border:1px solid var(--border); border-radius:8px; margin:8px 0; overflow:hidden; }
-.code-block .code-lang { font-size:10px; color:var(--dim); padding:4px 10px; border-bottom:1px solid var(--border); background:var(--surface); text-transform:uppercase; letter-spacing:.5px; }
+.code-block .code-head { min-height:36px; padding:3px 5px 3px 10px; border-bottom:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:space-between; gap:8px; }
+.code-block .code-lang { font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; }
 .code-block pre { padding:10px 12px; overflow-x:auto; margin:0; }
 .code-block code { font-family:var(--code-font); font-size:12px; line-height:1.5; color:var(--text); }
+.copy-btn { min-width:44px; min-height:30px; padding:4px 9px; border:1px solid var(--border); border-radius:6px; background:transparent; color:var(--dim); font:500 11px var(--font); cursor:pointer; touch-action:manipulation; }
+.copy-btn:hover, .copy-btn:focus-visible { color:var(--text); border-color:var(--accent); outline:none; }
+.copy-btn.copied { color:var(--success); border-color:var(--success); }
 
 /* Syntax highlighting */
 .code-block .k { color:#ff7b72; }
@@ -99,6 +103,9 @@ main::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
 /* Rich tool cards */
 .tool .bd .tool-params, .tool .bd .tool-result { margin:6px 0; }
 .tool .bd .lbl { display:block; font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
+.tool-label-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
+.tool-label-row .lbl { margin-bottom:0; }
+.copy-btn:disabled { opacity:.4; cursor:default; }
 .tool .bd .tool-params pre { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:8px; font-size:11px; color:var(--dim); white-space:pre-wrap; max-height:120px; overflow-y:auto; }
 .tool .bd .tool-result pre { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:8px; font-size:12px; white-space:pre-wrap; max-height:180px; overflow-y:auto; }
 .tool .bd .tool-result pre code { font-family:var(--code-font); font-size:12px; line-height:1.5; }
@@ -179,13 +186,16 @@ main::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
 .hc-stats { font-variant-numeric:tabular-nums; }
 .hc-out { font-size:12px; color:var(--text); background:var(--surface); border-radius:6px; padding:6px 8px; margin-top:4px; white-space:pre-wrap; max-height:80px; overflow:hidden; font-family:var(--code-font); }
 
-.msg { max-width:85%; line-height:1.6; font-size:14px; word-break:break-word; }
+.msg { position:relative; max-width:85%; line-height:1.6; font-size:14px; word-break:break-word; }
 .msg.mine, .msg.theirs { white-space:pre-wrap; }
 .msg.mine { align-self:flex-end; background:var(--accent); color:#fff; padding:10px 14px; border-radius:var(--radius) var(--radius) 4px var(--radius); }
 .msg.theirs { align-self:flex-start; background:var(--surface); border:1px solid var(--accent); padding:10px 14px; border-radius:var(--radius) var(--radius) var(--radius) 4px; }
 .msg.theirs .nick { font-size:11px; color:var(--accent); display:block; margin-bottom:4px; font-weight:500; }
 .msg.agent { align-self:flex-start; background:var(--surface); border:1px solid var(--border); padding:10px 14px; border-radius:var(--radius) var(--radius) var(--radius) 4px; }
 .msg.agent .thinking { color:var(--dim); font-style:italic; font-size:13px; margin-bottom:6px; }
+.message-actions { display:flex; justify-content:flex-end; margin:7px -5px -5px 0; }
+.msg.mine .copy-btn { color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.35); }
+.msg.mine .copy-btn.copied { color:#fff; border-color:#fff; }
 
 .tool { align-self:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); max-width:85%; overflow:hidden; }
 .tool .hd { padding:8px 12px; display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
@@ -198,6 +208,9 @@ main::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
 
 .notice { align-self:center; font-size:12px; color:var(--dim); padding:4px 12px; background:var(--surface); border-radius:20px; border:1px solid var(--border); }
 
+.jump-latest { position:fixed; right:16px; bottom:calc(82px + env(safe-area-inset-bottom)); z-index:9; display:flex; align-items:center; gap:7px; min-height:44px; padding:8px 14px; border:1px solid var(--accent); border-radius:999px; background:var(--surface); color:var(--text); box-shadow:0 6px 24px rgba(0,0,0,.35); font:500 12px var(--font); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .15s, transform .15s; }
+.jump-latest.visible { opacity:1; pointer-events:auto; transform:none; }
+
 /* Command autocomplete */
 .cmd-list { position:absolute; bottom:100%; left:12px; right:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius) var(--radius) 0 0; max-height:220px; overflow-y:auto; z-index:10; display:none; }
 .cmd-list.visible { display:block; }
@@ -217,10 +230,17 @@ footer { position:relative; width:100%; background:var(--surface); border-top:1p
 .row .stop { background:var(--error); color:#fff; display:none; }
 
 @media (max-width:600px) {
-  .msg, .tool { max-width:92%; }
+  .msg, .tool { max-width:96%; }
   header { padding:8px 10px; }
   main { padding:10px; }
-  #sidebar { width:80vw; }
+  #sidebar { width:min(88vw, 360px); }
+  .sb-item { min-height:48px; }
+  .sb-item .sb-ren, .sb-item .sb-del { min-width:36px; min-height:36px; }
+  .row button { min-width:56px; min-height:44px; padding:10px 12px; }
+  .row textarea { font-size:16px; }
+  .tool .hd { min-height:44px; }
+  footer { padding-left:10px; padding-right:10px; }
+  .jump-latest { right:10px; }
 }
 
 /* ── Desktop (≥768px): docked sidebar, full-width content ──────────── */
@@ -233,4 +253,5 @@ footer { position:relative; width:100%; background:var(--surface); border-top:1p
   #sidebar-overlay { display:none !important; }
   #app { flex:1; min-width:0; width:auto; margin-left:0; }
   .menu-btn { display:none; }
+  .jump-latest { right:24px; }
 }