claude-relay 2.1.2 → 2.2.0

package/lib/public/css/messages.css

@@ -9,6 +9,93 @@
   padding: 20px 0 12px;
 }
 
+/* --- Sticky todo overlay --- */
+#todo-sticky {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: var(--content-width);
+  padding: 8px 20px;
+  z-index: 10;
+}
+#todo-sticky.hidden { display: none; }
+
+#todo-sticky .todo-sticky-inner {
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+#todo-sticky .todo-sticky-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  cursor: pointer;
+  user-select: none;
+}
+#todo-sticky .todo-sticky-header:hover { background: rgba(255, 255, 255, 0.03); }
+#todo-sticky .todo-sticky-icon { display: inline-flex; color: var(--accent); }
+#todo-sticky .todo-sticky-icon .lucide { width: 14px; height: 14px; }
+#todo-sticky .todo-sticky-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); flex: 1; }
+#todo-sticky .todo-sticky-count { font-size: 11px; color: var(--text-muted); font-family: "SF Mono", Menlo, Monaco, monospace; }
+#todo-sticky .todo-sticky-chevron { display: inline-flex; color: var(--text-muted); transition: transform 0.2s; }
+#todo-sticky .todo-sticky-chevron .lucide { width: 12px; height: 12px; }
+#todo-sticky.collapsed .todo-sticky-chevron { transform: rotate(-90deg); }
+
+#todo-sticky .todo-sticky-progress { height: 2px; background: var(--border); }
+#todo-sticky .todo-sticky-progress-bar { height: 100%; background: var(--success); transition: width 0.3s ease; }
+
+#todo-sticky .todo-sticky-items { padding: 0 4px 6px; }
+#todo-sticky.collapsed .todo-sticky-items { display: none; }
+#todo-sticky.collapsed .todo-sticky-progress { height: 3px; border-radius: 0 0 12px 12px; overflow: hidden; }
+
+#todo-sticky .todo-sticky-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+#todo-sticky .todo-sticky-item-icon { display: inline-flex; flex-shrink: 0; }
+#todo-sticky .todo-sticky-item.pending .todo-sticky-item-icon { color: var(--text-dimmer); }
+#todo-sticky .todo-sticky-item.in-progress .todo-sticky-item-icon { color: var(--accent); }
+#todo-sticky .todo-sticky-item.completed .todo-sticky-item-icon { color: var(--success); }
+#todo-sticky .todo-sticky-item-text { flex: 1; }
+#todo-sticky .todo-sticky-item.pending .todo-sticky-item-text { color: var(--text-muted); }
+#todo-sticky .todo-sticky-item.in-progress .todo-sticky-item-text { color: var(--text); }
+#todo-sticky .todo-sticky-item.completed .todo-sticky-item-text { color: var(--text-dimmer); text-decoration: line-through; }
+
+/* --- Scroll-to-bottom floating button --- */
+#new-msg-btn {
+  position: absolute;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--bg-alt);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: 6px 16px;
+  font-size: 13px;
+  cursor: pointer;
+  z-index: 10;
+  transition: opacity 0.15s;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+#new-msg-btn:hover {
+  background: var(--sidebar-hover);
+  color: var(--text);
+}
+#new-msg-btn.hidden {
+  display: none;
+}
+
 /* --- User message --- */
 .msg-user {
   display: flex;
@@ -555,6 +642,99 @@ pre.mermaid-error {
 .diff-content .diff-file-header { color: #8B949E; font-weight: 600; }
 .diff-content .diff-ctx { color: var(--text-muted); }
 
+/* --- Edit diff viewer --- */
+.edit-diff-header {
+  display: flex;
+  align-items: center;
+  padding: 6px 14px;
+  font-size: 12px;
+  font-family: "SF Mono", Menlo, Monaco, monospace;
+  color: var(--text-muted);
+  background: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.edit-diff-path { flex: 1; }
+
+.edit-diff-toggles {
+  display: inline-flex;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.edit-diff-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: var(--bg-alt);
+  color: var(--text-dimmer);
+  cursor: pointer;
+}
+.edit-diff-toggle .lucide { width: 14px; height: 14px; }
+.edit-diff-toggle:hover { color: var(--text-secondary); background: var(--sidebar-hover); }
+.edit-diff-toggle.active { color: var(--text); background: var(--sidebar-active); }
+.edit-diff-toggle + .edit-diff-toggle { border-left: 1px solid var(--border); }
+
+.edit-diff-body {
+  display: flex;
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.edit-diff-body pre {
+  margin: 0;
+  max-height: none;
+  overflow-y: visible;
+  font-family: "SF Mono", Menlo, Monaco, monospace;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.edit-diff-gutter {
+  flex-shrink: 0;
+  padding: 12px 12px 12px 14px;
+  text-align: right;
+  color: var(--text-dimmer);
+  user-select: none;
+  -webkit-user-select: none;
+  min-width: 36px;
+  border-right: 1px solid var(--border-subtle);
+}
+
+.edit-diff-content {
+  flex: 1;
+  padding: 12px 14px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.edit-diff-content .diff-add {
+  color: #3FB950;
+  background: rgba(63, 185, 80, 0.08);
+  display: inline-block;
+  width: 100%;
+}
+
+.edit-diff-content .diff-del {
+  color: #F85149;
+  background: rgba(248, 81, 73, 0.08);
+  display: inline-block;
+  width: 100%;
+}
+
+/* Split view */
+.edit-diff-split { overflow-x: auto; }
+.edit-diff-split .edit-diff-side-old { border-right: 1px solid var(--border); }
+.edit-diff-split .edit-diff-side-old,
+.edit-diff-split .edit-diff-side-new { min-width: 0; flex: 1; }
+.edit-diff-split .edit-diff-gutter { min-width: 30px; padding: 12px 8px 12px 10px; }
+
 /* --- Code viewer (Read tool) --- */
 .code-viewer {
   display: flex;
@@ -657,6 +837,9 @@ pre.mermaid-error {
 .plan-card-icon { display: inline-flex; color: var(--accent); }
 .plan-card-icon .lucide { width: 16px; height: 16px; }
 .plan-card-title { font-size: 14px; font-weight: 600; color: var(--accent); flex: 1; }
+.plan-card-copy { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-dimmer); cursor: pointer; padding: 2px; border-radius: 4px; transition: color 0.15s; }
+.plan-card-copy:hover { color: var(--text); }
+.plan-card-copy .lucide { width: 14px; height: 14px; }
 .plan-card-chevron { display: inline-flex; color: var(--text-muted); transition: transform 0.2s; }
 .plan-card-chevron .lucide { width: 14px; height: 14px; }
 .plan-card.collapsed .plan-card-chevron { transform: rotate(-90deg); }
@@ -689,6 +872,14 @@ pre.mermaid-error {
 .plan-card-body strong { font-weight: 600; }
 .plan-card-body blockquote { border-left: 3px solid var(--border); padding-left: 12px; color: var(--text-muted); margin: 8px 0; }
 
+/* --- Plan permission (ExitPlanMode) --- */
+.plan-permission-header {
+  background: rgba(87, 171, 90, 0.08) !important;
+  border-color: rgba(87, 171, 90, 0.2) !important;
+}
+.plan-permission-header .permission-icon { color: var(--success) !important; }
+.plan-permission-header .permission-title { color: var(--success) !important; }
+
 /* ==========================================================================
    Todo Widget
    ========================================================================== */

package/lib/public/css/sidebar.css

@@ -335,7 +335,10 @@
 }
 
 .session-list-header {
-  padding: 24px 20px 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 24px 12px 4px 20px;
   font-size: 11px;
   font-weight: 600;
   color: var(--text-dimmer);
@@ -343,6 +346,95 @@
   letter-spacing: 0.5px;
 }
 
+#search-session-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--text-dimmer);
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.15s, background 0.15s;
+}
+
+#search-session-btn .lucide { width: 14px; height: 14px; }
+#search-session-btn:hover { color: var(--text); background: var(--sidebar-hover); }
+
+/* --- Session search --- */
+#session-search {
+  padding: 0 12px 8px;
+}
+
+#session-search.hidden {
+  display: none;
+}
+
+#session-search-input {
+  width: 100%;
+  padding: 7px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--input-bg);
+  color: var(--text);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+#session-search-input:focus {
+  border-color: var(--accent);
+}
+
+#session-search-input::placeholder {
+  color: var(--text-dimmer);
+}
+
+#search-session-btn.active {
+  color: var(--accent);
+}
+
+.session-item.search-match {
+  background: rgba(218, 119, 86, 0.1);
+  color: var(--text);
+}
+
+.session-item.search-match .session-item-text {
+  color: var(--accent);
+}
+
+.session-item.search-dimmed {
+  opacity: 0.35;
+}
+
+.session-highlight {
+  background: rgba(218, 119, 86, 0.3);
+  color: var(--text);
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+/* --- Search hit timeline (right-side markers) --- */
+.search-timeline {
+  position: absolute;
+  right: 8px;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.search-blink {
+  animation: searchBlink 0.4s ease-in-out 3;
+}
+
+@keyframes searchBlink {
+  0%, 100% { box-shadow: none; }
+  50% { box-shadow: 0 0 0 2px var(--accent); border-radius: 12px; }
+}
+
 #session-list {
   padding: 2px 8px;
 }

package/lib/public/index.html

@@ -59,7 +59,13 @@
         <button id="file-browser-btn"><i data-lucide="folder-tree"></i> <span>File browser</span></button>
         <button id="terminal-sidebar-btn"><i data-lucide="square-terminal"></i> <span>Terminal</span></button>
       </div>
-      <div class="session-list-header">Sessions</div>
+      <div class="session-list-header">
+        <span>Sessions</span>
+        <button id="search-session-btn" type="button" title="Search sessions"><i data-lucide="search"></i></button>
+      </div>
+      <div id="session-search" class="hidden">
+        <input id="session-search-input" type="text" placeholder="Search sessions..." autocomplete="off" spellcheck="false" />
+      </div>
       <div id="session-list"></div>
     </div>
     <div id="sidebar-panel-files" class="sidebar-panel hidden">
@@ -74,6 +80,9 @@
         <i data-lucide="ellipsis" style="width:14px;height:14px"></i>
       </button>
       <div id="sidebar-footer-menu" class="hidden">
+        <button class="sidebar-menu-item" id="footer-usage">
+          <i data-lucide="gauge"></i> <span>Usage</span>
+        </button>
         <a class="sidebar-menu-item" href="https://github.com/chadbyte/claude-relay" target="_blank" rel="noopener">
           <i data-lucide="github"></i> <span>GitHub</span>
         </a>
@@ -116,8 +125,9 @@
             </label>
           </div>
         </div>
-        <button id="terminal-toggle-btn" title="Terminal"><i data-lucide="square-terminal"></i></button>
-        <button id="qr-btn" title="QR Code"><i data-lucide="qr-code"></i></button>
+        <button id="usage-header-btn" class="hidden" title="Usage"><i data-lucide="dollar-sign"></i></button>
+        <button id="terminal-toggle-btn" title="Terminal"><i data-lucide="square-terminal"></i><span id="terminal-count" class="hidden"></span></button>
+        <button id="qr-btn" title="Share"><i data-lucide="share"></i></button>
         <div id="qr-overlay" class="hidden">
           <div id="qr-overlay-inner">
             <div id="qr-canvas"></div>
@@ -157,14 +167,72 @@
     </div>
     <div id="messages"></div>
 
+    <div id="usage-panel" class="hidden">
+      <div class="usage-panel-header">
+        <span>Usage</span>
+        <button id="usage-panel-close" aria-label="Close"><i data-lucide="x"></i></button>
+      </div>
+      <div class="usage-panel-body">
+        <div id="usage-rate-limits">
+          <div id="usage-loading" class="usage-loading">Loading...</div>
+          <div id="usage-error" class="usage-error hidden"></div>
+          <div id="usage-bars" class="hidden">
+            <div class="usage-bar-group" id="usage-bar-session">
+              <div class="usage-bar-label"><span>Current session</span><span class="usage-bar-pct" id="usage-pct-session"></span></div>
+              <div class="usage-bar-track"><div class="usage-bar-fill" id="usage-fill-session"></div></div>
+              <div class="usage-bar-reset" id="usage-reset-session"></div>
+            </div>
+            <div class="usage-bar-group" id="usage-bar-weekly">
+              <div class="usage-bar-label"><span>Current week (all models)</span><span class="usage-bar-pct" id="usage-pct-weekly"></span></div>
+              <div class="usage-bar-track"><div class="usage-bar-fill" id="usage-fill-weekly"></div></div>
+              <div class="usage-bar-reset" id="usage-reset-weekly"></div>
+            </div>
+            <div class="usage-bar-group" id="usage-bar-sonnet">
+              <div class="usage-bar-label"><span>Current week (Sonnet only)</span><span class="usage-bar-pct" id="usage-pct-sonnet"></span></div>
+              <div class="usage-bar-track"><div class="usage-bar-fill" id="usage-fill-sonnet"></div></div>
+              <div class="usage-bar-reset" id="usage-reset-sonnet"></div>
+            </div>
+            <div class="usage-bar-group hidden" id="usage-bar-extra">
+              <div class="usage-bar-label"><span>Extra usage</span><span class="usage-bar-pct" id="usage-pct-extra"></span></div>
+              <div class="usage-bar-track"><div class="usage-bar-fill usage-bar-fill-extra" id="usage-fill-extra"></div></div>
+              <div class="usage-bar-reset" id="usage-reset-extra"></div>
+            </div>
+          </div>
+        </div>
+        <div class="usage-divider" id="usage-session-divider"></div>
+        <div class="usage-section-label">Session</div>
+        <div class="usage-row"><span class="usage-label">Cost</span><span id="usage-cost" class="usage-value">$0.0000</span></div>
+        <div class="usage-row"><span class="usage-label">Input tokens</span><span id="usage-input" class="usage-value">0</span></div>
+        <div class="usage-row"><span class="usage-label">Output tokens</span><span id="usage-output" class="usage-value">0</span></div>
+        <div class="usage-row"><span class="usage-label">Cache read</span><span id="usage-cache-read" class="usage-value">0</span></div>
+        <div class="usage-row"><span class="usage-label">Cache write</span><span id="usage-cache-write" class="usage-value">0</span></div>
+        <div class="usage-row"><span class="usage-label">Turns</span><span id="usage-turns" class="usage-value">0</span></div>
+      </div>
+    </div>
+    <div id="todo-sticky" class="hidden"></div>
+    <button id="new-msg-btn" class="hidden" aria-label="Scroll to bottom"></button>
+    <button id="usage-fab" class="hidden" aria-label="Usage"><i data-lucide="gauge"></i></button>
     <div id="input-area">
       <div id="input-wrapper">
         <div id="slash-menu"></div>
         <div id="input-row">
           <div id="image-preview-bar"></div>
-          <div id="input-inner">
-            <textarea id="input" rows="1" placeholder="Message Claude Code..." enterkeyhint="send"></textarea>
-            <button id="send-btn" disabled aria-label="Send"><i data-lucide="arrow-up"></i></button>
+          <textarea id="input" rows="1" placeholder="Message Claude Code..." enterkeyhint="send"></textarea>
+          <div id="input-bottom">
+            <div id="attach-wrap">
+              <button id="attach-btn" type="button" aria-label="Attach"><i data-lucide="plus"></i></button>
+              <div id="attach-menu" class="hidden">
+                <button class="attach-menu-item" id="attach-camera"><i data-lucide="camera"></i> <span>Take Photo</span></button>
+                <button class="attach-menu-item" id="attach-photos"><i data-lucide="image"></i> <span>Add Photos</span></button>
+              </div>
+            </div>
+            <div id="input-bottom-right">
+              <div id="model-menu-wrap" class="hidden">
+                <button id="model-btn" title="Model"><span id="model-label"></span> <i data-lucide="chevron-down"></i></button>
+                <div id="model-menu" class="hidden"></div>
+              </div>
+              <button id="send-btn" disabled aria-label="Send"><i data-lucide="arrow-up"></i></button>
+            </div>
           </div>
         </div>
       </div>
@@ -180,9 +248,22 @@
     <div class="file-viewer-body" id="file-viewer-body"></div>
   </div>
   <div id="terminal-container" class="hidden">
-    <div class="file-viewer-header">
-      <span class="file-viewer-path">Terminal</span>
-      <button class="file-viewer-btn" id="terminal-close" title="Close"><i data-lucide="x"></i></button>
+    <div class="terminal-header">
+      <div id="terminal-tabs" class="terminal-tabs"></div>
+      <div class="terminal-header-actions">
+        <button class="file-viewer-btn" id="terminal-new-tab" title="New tab"><i data-lucide="plus"></i></button>
+        <button class="file-viewer-btn" id="terminal-close" title="Close panel"><i data-lucide="x"></i></button>
+      </div>
+    </div>
+    <div id="terminal-toolbar" class="hidden">
+      <button class="term-key" data-key="tab">Tab</button>
+      <button class="term-key term-key-toggle" data-key="ctrl">Ctrl</button>
+      <button class="term-key" data-key="esc">Esc</button>
+      <span class="term-key-spacer"></span>
+      <button class="term-key term-key-arrow" data-key="up">&#9650;</button>
+      <button class="term-key term-key-arrow" data-key="down">&#9660;</button>
+      <button class="term-key term-key-arrow" data-key="left">&#9664;</button>
+      <button class="term-key term-key-arrow" data-key="right">&#9654;</button>
     </div>
     <div id="terminal-body"></div>
   </div>

package/lib/public/modules/filebrowser.js

@@ -15,7 +15,7 @@ export function initFileBrowser(_ctx) {
 
   // Close button
   document.getElementById("file-viewer-close").addEventListener("click", function () {
-    ctx.fileViewerEl.classList.add("hidden");
+    closeFileViewer();
   });
 
   // Copy button
@@ -33,11 +33,29 @@ export function initFileBrowser(_ctx) {
   // ESC to close
   document.addEventListener("keydown", function (e) {
     if (e.key === "Escape" && !ctx.fileViewerEl.classList.contains("hidden")) {
-      ctx.fileViewerEl.classList.add("hidden");
+      closeFileViewer();
     }
   });
 }
 
+// --- File watch helpers ---
+function sendWatch(filePath) {
+  if (ctx.ws && ctx.connected) {
+    ctx.ws.send(JSON.stringify({ type: "fs_watch", path: filePath }));
+  }
+}
+
+function sendUnwatch() {
+  if (ctx.ws && ctx.connected) {
+    ctx.ws.send(JSON.stringify({ type: "fs_unwatch" }));
+  }
+}
+
+export function closeFileViewer() {
+  sendUnwatch();
+  ctx.fileViewerEl.classList.add("hidden");
+}
+
 function renderBody() {
   var bodyEl = document.getElementById("file-viewer-body");
   var renderBtn = document.getElementById("file-viewer-render");
@@ -292,9 +310,22 @@ function showFileContent(msg) {
   }
 
   ctx.fileViewerEl.classList.remove("hidden");
+  sendWatch(msg.path);
   refreshIcons();
 }
 
+export function handleFileChanged(msg) {
+  if (!msg.path || msg.path !== currentFilePath) return;
+  if (ctx.fileViewerEl.classList.contains("hidden")) return;
+  if (msg.content === currentContent) return;
+
+  var bodyEl = document.getElementById("file-viewer-body");
+  var scrollPos = bodyEl ? bodyEl.scrollTop : 0;
+  pendingRefresh = true;
+  showFileContent(msg);
+  if (bodyEl) bodyEl.scrollTop = scrollPos;
+}
+
 function mapExtToLanguage(ext) {
   var map = {
     js: "javascript", ts: "typescript", jsx: "javascript", tsx: "typescript",

package/lib/public/modules/input.js

@@ -14,6 +14,7 @@ var isRemoteInput = false;
 var builtinCommands = [
   { name: "clear", desc: "Clear conversation" },
   { name: "rewind", desc: "Toggle rewind mode" },
+  { name: "usage", desc: "Toggle usage panel" },
 ];
 
 // --- Send ---
@@ -43,11 +44,18 @@ export function sendMessage() {
     return;
   }
 
+  if (text === "/usage") {
+    ctx.inputEl.value = "";
+    clearPendingImages();
+    autoResize();
+    if (ctx.toggleUsagePanel) ctx.toggleUsagePanel();
+    return;
+  }
+
   if (!ctx.connected) {
     ctx.addSystemMessage("Not connected — message not sent.", true);
     return;
   }
-  if (ctx.processing) return;
 
   var pastes = pendingPastes.map(function (p) { return p.text; });
   ctx.addUserMessage(text, images.length > 0 ? images : null, pastes.length > 0 ? pastes : null);
@@ -263,10 +271,90 @@ export function handleInputSync(text) {
   isRemoteInput = false;
 }
 
+// --- Attach menu ---
+var attachMenuOpen = false;
+
+function toggleAttachMenu() {
+  var menu = document.getElementById("attach-menu");
+  if (!menu) return;
+  attachMenuOpen = !attachMenuOpen;
+  menu.classList.toggle("hidden", !attachMenuOpen);
+}
+
+function closeAttachMenu() {
+  var menu = document.getElementById("attach-menu");
+  if (menu) menu.classList.add("hidden");
+  attachMenuOpen = false;
+}
+
+function createFileInput(accept, capture, multiple) {
+  var input = document.createElement("input");
+  input.type = "file";
+  input.accept = accept;
+  if (capture) input.setAttribute("capture", capture);
+  if (multiple) input.multiple = true;
+  input.style.display = "none";
+  document.body.appendChild(input);
+
+  input.addEventListener("change", function () {
+    if (input.files) {
+      for (var i = 0; i < input.files.length; i++) {
+        if (input.files[i].type.indexOf("image/") === 0) {
+          readImageBlob(input.files[i]);
+        }
+      }
+    }
+    document.body.removeChild(input);
+  });
+
+  input.click();
+}
+
 // --- Init ---
 export function initInput(_ctx) {
   ctx = _ctx;
 
+  // Attach button
+  var isTouchDevice = "ontouchstart" in window;
+  var attachBtn = document.getElementById("attach-btn");
+  if (attachBtn) {
+    attachBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      // Desktop: skip menu, open file picker directly
+      if (!isTouchDevice) {
+        createFileInput("image/*", null, true);
+        return;
+      }
+      toggleAttachMenu();
+    });
+  }
+
+  var cameraBtn = document.getElementById("attach-camera");
+  if (cameraBtn) {
+    cameraBtn.addEventListener("click", function () {
+      closeAttachMenu();
+      createFileInput("image/*", "environment");
+    });
+  }
+
+  var photosBtn = document.getElementById("attach-photos");
+  if (photosBtn) {
+    photosBtn.addEventListener("click", function () {
+      closeAttachMenu();
+      createFileInput("image/*", null, true);
+    });
+  }
+
+  // Close attach menu when clicking outside
+  document.addEventListener("click", function (e) {
+    if (attachMenuOpen) {
+      var wrap = document.getElementById("attach-wrap");
+      if (wrap && !wrap.contains(e.target)) {
+        closeAttachMenu();
+      }
+    }
+  });
+
   // Paste handler
   document.addEventListener("paste", function (e) {
     var cd = e.clipboardData;
@@ -370,11 +458,20 @@ export function initInput(_ctx) {
     }
 
     if (e.key === "Enter" && !e.shiftKey && !isComposing) {
+      // Mobile: Enter inserts newline, send via button only
+      if ("ontouchstart" in window) {
+        return;
+      }
       e.preventDefault();
       sendMessage();
     }
   });
 
+  // Mobile: switch enterkeyhint to "enter" so keyboard shows return key
+  if ("ontouchstart" in window) {
+    ctx.inputEl.setAttribute("enterkeyhint", "enter");
+  }
+
   // Send/Stop button
   ctx.sendBtn.addEventListener("click", function () {
     if (ctx.processing && ctx.connected) {