codex-autorunner 1.1.0__py3-none-any.whl → 1.2.0__py3-none-any.whl

codex_autorunner/static/index.html

@@ -23,10 +23,25 @@
       </div>
       <div class="hub-hero-actions">
         <button class="primary sm" id="hub-new-repo">+ New</button>
-        <button class="sm" id="hub-scan">Scan</button>
-        <button class="ghost sm" id="hub-refresh">Refresh</button>
+        <div class="notifications-bell" data-notifications-root="hub">
+          <button class="ghost sm icon-btn notifications-bell-btn" data-notifications-trigger title="Notifications"
+            aria-label="Notifications">
+            <span aria-hidden="true">🔔</span>
+            <span class="notifications-bell-badge hidden" data-notifications-badge></span>
+          </button>
+          <div class="notifications-dropdown hidden" data-notifications-dropdown role="menu"
+            aria-label="Pending dispatches"></div>
+        </div>
         <button class="ghost sm icon-btn" id="hub-settings" title="Settings">⚙</button>
       </div>
+      <div class="hub-mode-toggle" role="tablist" aria-label="Hub mode">
+        <button class="hub-mode-btn active" id="hub-mode-manual" data-hub-mode="manual" role="tab"
+          aria-selected="true">Manual</button>
+        <button class="hub-mode-btn" id="hub-mode-pma" data-hub-mode="pma" role="tab" aria-selected="false">
+          <span class="hub-mode-long">PM Agent</span>
+          <span class="hub-mode-short">PMA</span>
+        </button>
+      </div>
     </header>
     <section class="hub-stats">
       <div class="hub-stat">
@@ -42,15 +57,6 @@
         <p class="muted small">missing</p>
       </div>
     </section>
-    <section class="hub-inbox">
-      <div class="hub-panel-header">
-        <span class="label">Inbox</span>
-        <div class="hub-panel-actions">
-          <button class="ghost sm" id="hub-inbox-refresh">Refresh</button>
-        </div>
-      </div>
-      <div class="hub-inbox-list" id="hub-inbox-list">Loading…</div>
-    </section>
     <section class="hub-usage-chart">
       <div class="hub-usage-chart-header">
         <span class="label">Usage Trend</span>
@@ -83,6 +89,136 @@
       </div>
     </section>
   </div>
+  <div class="hub-shell hidden" id="pma-shell">
+    <header class="hub-hero pma-hero">
+      <div class="hub-hero-text pma-hero-text">
+        <h1>Project Manager</h1>
+        <span class="pill pill-small pill-idle" id="pma-last-scan">–</span>
+        <span class="hub-version" id="pma-version">v–</span>
+      </div>
+      <div class="hub-hero-actions pma-hero-actions">
+        <div class="notifications-bell" data-notifications-root="pma">
+          <button class="ghost sm icon-btn notifications-bell-btn" data-notifications-trigger title="Notifications"
+            aria-label="Notifications">
+            <span aria-hidden="true">🔔</span>
+            <span class="notifications-bell-badge hidden" data-notifications-badge></span>
+          </button>
+          <div class="notifications-dropdown hidden" data-notifications-dropdown role="menu"
+            aria-label="Pending dispatches"></div>
+        </div>
+        <button class="ghost sm icon-btn" id="pma-settings" title="Settings">⚙</button>
+      </div>
+      <div class="hub-mode-toggle" role="tablist" aria-label="Hub mode">
+        <button class="hub-mode-btn" id="pma-mode-manual" data-hub-mode="manual" role="tab"
+          aria-selected="false">Manual</button>
+        <button class="hub-mode-btn active" id="pma-mode-pma" data-hub-mode="pma" role="tab" aria-selected="true">
+          <span class="hub-mode-long">PM Agent</span>
+          <span class="hub-mode-short">PMA</span>
+        </button>
+      </div>
+    </header>
+    <section class="pma-top-bar">
+      <div class="pma-chat-controls-row">
+        <div class="pma-chat-agent-controls">
+          <select id="pma-chat-agent-select" title="Agent"></select>
+          <select id="pma-chat-model-select" title="Model"></select>
+          <select id="pma-chat-reasoning-select" title="Reasoning"></select>
+        </div>
+        <div class="pma-chat-actions">
+          <button class="ghost sm hidden" id="pma-chat-cancel" title="Cancel">✕</button>
+          <button class="pma-new-thread-btn" id="pma-chat-new-thread" title="Start a new chat thread">New
+            thread</button>
+          <span class="pma-status-pill" id="pma-chat-status">idle</span>
+        </div>
+      </div>
+      <div class="pma-thread-info hidden" id="pma-thread-info">
+        <div class="pma-thread-info-header">
+          <span class="pma-thread-info-label">Thread</span>
+          <span class="pill pill-small pill-idle" id="pma-thread-info-status">idle</span>
+        </div>
+        <div class="pma-thread-info-details">
+          <div class="pma-thread-info-row">
+            <span class="pma-thread-info-key muted">Agent</span>
+            <span class="pma-thread-info-value" id="pma-thread-info-agent">–</span>
+          </div>
+          <div class="pma-thread-info-row">
+            <span class="pma-thread-info-key muted">Thread ID</span>
+            <span class="pma-thread-info-value" id="pma-thread-info-thread-id" title="Click to copy">–</span>
+          </div>
+          <div class="pma-thread-info-row">
+            <span class="pma-thread-info-key muted">Turn ID</span>
+            <span class="pma-thread-info-value" id="pma-thread-info-turn-id" title="Click to copy">–</span>
+          </div>
+        </div>
+      </div>
+      <div class="pma-repo-actions" id="pma-repo-actions">
+        <button class="ghost sm" id="pma-scan-repos-btn">Scan repos</button>
+      </div>
+    </section>
+    <section class="pma-chat-section">
+      <div class="pma-chat-main">
+        <div class="pma-chat-stream" id="pma-chat-stream">
+          <div class="pma-chat-error hidden" id="pma-chat-error"></div>
+          <div class="pma-history-header" id="pma-chat-history-header">
+            <span class="pma-history-label">History</span>
+          </div>
+          <div class="pma-chat-messages" id="pma-chat-messages"></div>
+          <div class="pma-chat-events hidden" id="pma-chat-events">
+            <div class="pma-events-header">
+              <span class="pma-events-label">Agent</span>
+              <span class="pma-events-count" id="pma-chat-events-count">0</span>
+              <button class="ghost sm hidden" id="pma-chat-events-toggle">more</button>
+            </div>
+            <div class="pma-chat-events-list" id="pma-chat-events-list"></div>
+          </div>
+        </div>
+        <div class="pma-chat-compose">
+          <div class="pma-attachments-area" id="pma-attachments-area">
+            <div class="pma-files-row">
+              <span class="pma-files-label">In</span>
+              <div class="pma-file-list filebox-list" id="pma-inbox-files"></div>
+            </div>
+            <div class="pma-files-row">
+              <span class="pma-files-label">Out</span>
+              <div class="pma-file-list filebox-list" id="pma-outbox-files"></div>
+              <button class="pma-icon-btn-small" id="pma-outbox-refresh" title="Refresh files">↻</button>
+            </div>
+          </div>
+          <div class="pma-chat-input-row">
+            <textarea id="pma-chat-input" class="pma-chat-input" enterkeyhint="enter"
+              placeholder="Ask PMA to help coordinate work..." rows="1" spellcheck="false"></textarea>
+            <input type="file" id="pma-chat-upload-input" multiple hidden />
+            <button class="ghost sm icon-btn pma-upload-btn" id="pma-chat-upload-btn" title="Upload file">📎</button>
+            <button class="pma-send-btn" id="pma-chat-send" title="Send (Cmd+Enter)">↑</button>
+          </div>
+          <div class="pma-chat-hint">
+            <span class="muted small">⌘↵ send · ↵ newline</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="pma-docs-section hidden" id="pma-docs-section">
+      <div class="pma-docs-header">
+        <h2>PMA Docs</h2>
+        <div class="pma-docs-tabs">
+          <button class="pma-docs-tab active" data-doc="AGENTS.md">AGENTS</button>
+          <button class="pma-docs-tab" data-doc="active_context.md">Active Context</button>
+          <button class="pma-docs-tab" data-doc="context_log.md">Context Log</button>
+        </div>
+      </div>
+      <div class="pma-docs-content">
+        <div class="pma-docs-meta" id="pma-docs-meta"></div>
+        <div class="pma-docs-editor-wrapper">
+          <textarea id="pma-docs-editor" class="pma-docs-editor" spellcheck="false"></textarea>
+        </div>
+        <div class="pma-docs-actions">
+          <button class="ghost sm" id="pma-docs-reset" title="Reset to default">Reset</button>
+          <button class="ghost sm" id="pma-docs-snapshot" title="Snapshot active context to log">Snapshot to log</button>
+          <button class="primary sm" id="pma-docs-save">Save</button>
+        </div>
+      </div>
+    </section>
+  </div>
   <div class="app-shell" id="repo-shell">
     <nav class="nav-bar">
       <span class="nav-brand">CAR</span>
@@ -262,12 +398,33 @@
                     </div>
                   </div>
                 </div>
-                <div class="messages-reply-box">
-                  <textarea class="messages-reply-body" id="messages-reply-body"
-                    placeholder="Write a reply…"></textarea>
-                  <div class="messages-reply-row">
-                    <input type="file" id="messages-reply-files" multiple />
-                    <div class="messages-reply-actions">
+                <div class="messages-compose">
+                  <div class="messages-attachments">
+                    <input type="file" id="messages-filebox-upload" multiple hidden />
+                    <div class="chat-files-row">
+                      <span class="chat-files-label">In</span>
+                      <div class="filebox-list" id="messages-filebox-inbox"></div>
+                      <div class="chat-filebox-actions">
+                        <button class="ghost sm icon-btn chat-icon-btn" id="messages-filebox-upload-btn"
+                          title="Upload to inbox">⭱</button>
+                        <button class="ghost sm icon-btn chat-icon-btn" id="messages-filebox-refresh"
+                          title="Refresh FileBox">↻</button>
+                      </div>
+                    </div>
+                    <div class="chat-files-row">
+                      <span class="chat-files-label">Out</span>
+                      <div class="filebox-list" id="messages-filebox-outbox"></div>
+                    </div>
+                  </div>
+                  <div class="messages-input-row">
+                    <textarea class="messages-reply-body" id="messages-reply-body" enterkeyhint="enter"
+                      placeholder="Write a reply…" rows="2" spellcheck="false"></textarea>
+                    <div class="messages-input-actions">
+                      <input type="file" id="messages-reply-files" multiple hidden />
+                      <button class="ghost sm icon-btn messages-attach-btn" id="messages-reply-attach"
+                        title="Attach files">📎</button>
+                      <span class="muted small messages-attach-summary hidden" id="messages-reply-attach-summary">No
+                        files</span>
                       <button class="primary sm" id="messages-reply-send">Send</button>
                     </div>
                   </div>
@@ -358,6 +515,18 @@
               </button>
               <div class="workspace-mobile-actions">
                 <span class="muted small" id="workspace-status-mobile"></span>
+                <div class="workspace-mobile-menu">
+                  <button class="ghost sm icon-btn" id="workspace-mobile-menu-toggle"
+                    title="Workspace actions">⋯</button>
+                  <div class="workspace-mobile-dropdown hidden" id="workspace-mobile-dropdown">
+                    <button class="workspace-mobile-item" id="workspace-mobile-upload">Upload files</button>
+                    <button class="workspace-mobile-item" id="workspace-mobile-new-folder">New folder</button>
+                    <button class="workspace-mobile-item" id="workspace-mobile-new-file">New file</button>
+                    <button class="workspace-mobile-item" id="workspace-mobile-download">Download ZIP</button>
+                    <button class="workspace-mobile-item hidden" id="workspace-mobile-generate">Generate
+                      tickets</button>
+                  </div>
+                </div>
                 <button class="ghost sm" id="workspace-reload-mobile" title="Reload">↻</button>
                 <button class="primary sm" id="workspace-save-mobile">Save</button>
               </div>
@@ -434,13 +603,21 @@
               <button class="ghost sm icon-btn" id="ticket-overflow-toggle" title="More actions">⋯</button>
               <div class="ticket-overflow-dropdown hidden" id="ticket-overflow-dropdown">
                 <button class="ticket-overflow-item" id="ticket-overflow-new">+ New Ticket</button>
+                <button class="ticket-overflow-item hidden" id="ticket-overflow-template">From Template</button>
                 <button class="ticket-overflow-item" id="ticket-overflow-restart" style="display:none;">Restart</button>
                 <button class="ticket-overflow-item" id="ticket-overflow-archive" style="display:none;">Archive
                   Flow</button>
               </div>
             </div>
-            <button class="ghost sm ticket-desktop-only" id="ticket-new-btn" title="Create new ticket">+ New
-              Ticket</button>
+            <!-- Split button: New Ticket + Template dropdown -->
+            <div class="ticket-new-split ticket-desktop-only">
+              <button class="ghost sm" id="ticket-new-btn" title="Create new ticket">+ New Ticket</button>
+              <button class="ghost sm icon-btn ticket-new-dropdown-toggle hidden" id="ticket-new-dropdown-toggle"
+                title="Create from template">▾</button>
+              <div class="ticket-new-dropdown hidden" id="ticket-new-dropdown">
+                <button class="ticket-new-dropdown-item" id="ticket-new-from-template">From Template</button>
+              </div>
+            </div>
           </div>
           <div class="ticket-flow-meta" id="ticket-flow-meta">
             <div class="ticket-meta-details" id="ticket-meta-details">
@@ -547,10 +724,10 @@
                 <input class="ticket-fm-input" id="ticket-fm-title" placeholder="Title (optional)" spellcheck="false"
                   type="text">
                 <div class="ticket-header-actions">
-                  <button class="ghost sm icon-btn ticket-nav-btn" id="ticket-nav-prev" title="Previous ticket (←)"
-                    aria-label="Previous ticket" aria-keyshortcuts="ArrowLeft Alt+ArrowLeft">←</button>
-                  <button class="ghost sm icon-btn ticket-nav-btn" id="ticket-nav-next" title="Next ticket (→)"
-                    aria-label="Next ticket" aria-keyshortcuts="ArrowRight Alt+ArrowRight">→</button>
+                  <button class="ghost sm icon-btn ticket-nav-btn" id="ticket-nav-prev" title="Previous ticket (Alt+←)"
+                    aria-label="Previous ticket" aria-keyshortcuts="Alt+ArrowLeft">←</button>
+                  <button class="ghost sm icon-btn ticket-nav-btn" id="ticket-nav-next" title="Next ticket (Alt+→)"
+                    aria-label="Next ticket" aria-keyshortcuts="Alt+ArrowRight">→</button>
                   <label class="ticket-fm-toggle" title="Mark as done">
                     <input id="ticket-fm-done" type="checkbox">
                     <span class="ticket-fm-toggle-label">Done</span>
@@ -636,6 +813,60 @@
             </div>
           </div>
         </div>
+        <!-- Template Picker Modal -->
+        <div class="modal-overlay hidden" id="ticket-template-modal">
+          <div class="modal-content ticket-template-modal-content">
+            <div class="modal-header ticket-template-header">
+              <span class="ticket-template-title">New Ticket from Template</span>
+              <button class="ghost sm icon-btn" id="ticket-template-close" title="Close">×</button>
+            </div>
+            <div class="ticket-template-body">
+              <!-- Recent templates (shown if history exists) -->
+              <div class="ticket-template-recent hidden" id="ticket-template-recent"></div>
+
+              <!-- Main input section -->
+              <div class="ticket-template-input-section">
+                <div class="ticket-template-input-wrapper">
+                  <input class="ticket-template-input" id="ticket-template-ref" type="text"
+                    placeholder="repo:path/to/template.md" spellcheck="false" autocomplete="off">
+                  <button class="ticket-template-clear hidden" id="ticket-template-clear" type="button"
+                    title="Clear">×</button>
+                  <span class="ticket-template-input-hint" id="ticket-template-hint">or paste GitHub URL</span>
+                </div>
+                <div class="ticket-template-repos" id="ticket-template-repos"></div>
+              </div>
+
+              <!-- Preview -->
+              <div class="ticket-template-preview-section">
+                <div class="ticket-template-preview-header">
+                  <span class="ticket-template-preview-label">Preview</span>
+                  <span class="ticket-template-preview-status" id="ticket-template-preview-status"></span>
+                </div>
+                <pre class="ticket-template-preview" id="ticket-template-preview"></pre>
+              </div>
+
+              <!-- Error -->
+              <div class="ticket-template-error hidden" id="ticket-template-error"></div>
+
+              <!-- Footer -->
+              <div class="ticket-template-footer">
+                <div class="ticket-template-options">
+                  <label class="ticket-template-option-label">Agent:</label>
+                  <select class="ticket-template-agent-select" id="ticket-template-agent">
+                    <option value="">default</option>
+                    <option value="codex">codex</option>
+                    <option value="opencode">opencode</option>
+                    <option value="user">user</option>
+                  </select>
+                </div>
+                <div class="ticket-template-actions">
+                  <button class="ghost sm" id="ticket-template-cancel">Cancel</button>
+                  <button class="primary sm" id="ticket-template-apply" disabled>Create</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </section>
       <section class="panel" id="terminal">
         <div class="terminal-toolbar">
@@ -879,12 +1110,60 @@
           </div>
           <span class="form-hint">Resetting conversations clears stored thread IDs and restarts chats.</span>
         </div>
+        <div class="form-group">
+          <label>Template Repositories</label>
+          <div class="template-repos-list" id="template-repos-list"></div>
+          <div class="settings-actions">
+            <button class="ghost sm" id="template-repos-add">+ Add repository</button>
+          </div>
+          <div class="template-repo-form hidden" id="template-repo-form">
+            <div class="settings-grid">
+              <div>
+                <label class="muted small" for="repo-id">ID</label>
+                <input autocomplete="off" id="repo-id" placeholder="my-team" spellcheck="false" type="text" />
+                <span class="form-hint">Used in refs like <span class="mono">id:path/to/file.md</span></span>
+              </div>
+              <div>
+                <label class="muted small" for="repo-url">Git URL</label>
+                <input autocomplete="off" id="repo-url" placeholder="https://github.com/org/repo.git" spellcheck="false"
+                  type="text" />
+              </div>
+              <div>
+                <label class="muted small" for="repo-ref">Default ref</label>
+                <input autocomplete="off" id="repo-ref" placeholder="main" spellcheck="false" type="text"
+                  value="main" />
+              </div>
+              <div class="settings-toggle-row">
+                <label class="form-checkbox">
+                  <input id="repo-trusted" type="checkbox" />
+                  <span>Trusted (skip scanning)</span>
+                </label>
+              </div>
+            </div>
+            <div class="settings-actions">
+              <button class="primary sm" id="repo-save">Save</button>
+              <button class="ghost sm" id="repo-cancel">Cancel</button>
+            </div>
+          </div>
+          <span class="form-hint">Edits are written to <span class="mono">codex-autorunner.override.yml</span>.</span>
+        </div>
       </div>
       <div class="modal-actions">
         <button class="ghost" id="repo-settings-close">Close</button>
       </div>
     </div>
   </div>
+  <!-- Notifications Modal -->
+  <div class="modal-overlay hidden" id="notifications-modal">
+    <div aria-labelledby="notifications-modal-title" aria-modal="true" class="modal-dialog notifications-modal-dialog"
+      role="dialog" tabindex="-1">
+      <div class="notifications-modal-header">
+        <span class="label" id="notifications-modal-title">Pending dispatch</span>
+        <button class="ghost sm icon-btn" id="notifications-modal-close" title="Close">×</button>
+      </div>
+      <div class="notifications-modal-body-wrapper" id="notifications-modal-body"></div>
+    </div>
+  </div>
   <!-- Reason Details Modal -->
   <div class="modal-overlay" hidden="" id="reason-modal">
     <div aria-describedby="reason-modal-content" aria-labelledby="reason-modal-title" aria-modal="true"
@@ -953,4 +1232,4 @@
   <script data-car-loader="" src="static/loader.js?v=__CAR_ASSET_VERSION__"></script>
 </body>
 
-</html>
+</html>

codex_autorunner/static/messages.js

@@ -4,6 +4,7 @@ import { subscribe } from "./bus.js";
 import { isRepoHealthy } from "./health.js";
 import { preserveScroll } from "./preserve.js";
 import { createSmartRefresh } from "./smartRefresh.js";
+import { createFileBoxWidget } from "./fileboxUi.js";
 let bellInitialized = false;
 let messagesInitialized = false;
 let activeRunId = null;
@@ -17,8 +18,16 @@ const refreshEl = document.getElementById("messages-refresh");
 const replyBodyEl = document.getElementById("messages-reply-body");
 const replyFilesEl = document.getElementById("messages-reply-files");
 const replySendEl = document.getElementById("messages-reply-send");
+const replyAttachBtn = document.getElementById("messages-reply-attach");
+const replyAttachSummary = document.getElementById("messages-reply-attach-summary");
+const fileBoxInboxEl = document.getElementById("messages-filebox-inbox");
+const fileBoxOutboxEl = document.getElementById("messages-filebox-outbox");
+const fileBoxUploadEl = document.getElementById("messages-filebox-upload");
+const fileBoxUploadBtn = document.getElementById("messages-filebox-upload-btn");
+const fileBoxRefreshBtn = document.getElementById("messages-filebox-refresh");
 let threadListRefreshCount = 0;
 let threadDetailRefreshCount = 0;
+let fileBoxCtrl = null;
 function isMobileViewport() {
     return window.innerWidth <= 640;
 }
@@ -30,6 +39,21 @@ function showThreadDetail() {
         layoutEl?.classList.add("viewing-detail");
     }
 }
+function initFileBox() {
+    if (fileBoxCtrl || (!fileBoxInboxEl && !fileBoxOutboxEl))
+        return;
+    fileBoxCtrl = createFileBoxWidget({
+        scope: "repo",
+        inboxEl: fileBoxInboxEl,
+        outboxEl: fileBoxOutboxEl,
+        uploadInput: fileBoxUploadEl,
+        uploadBtn: fileBoxUploadBtn,
+        refreshBtn: fileBoxRefreshBtn,
+        uploadBox: "inbox",
+        emptyMessage: "No files",
+    });
+    void fileBoxCtrl.refresh();
+}
 function setThreadListRefreshing(active) {
     if (!threadsEl)
         return;
@@ -342,6 +366,27 @@ function formatBytes(size) {
         return `${(size / 1000).toFixed(0)} KB`;
     return `${size} B`;
 }
+function isSafeHref(url) {
+    const trimmed = (url || "").trim();
+    if (!trimmed)
+        return false;
+    const lower = trimmed.toLowerCase();
+    if (lower.startsWith("javascript:"))
+        return false;
+    if (lower.startsWith("data:"))
+        return false;
+    if (lower.startsWith("vbscript:"))
+        return false;
+    if (lower.startsWith("file:"))
+        return false;
+    return (lower.startsWith("http://") ||
+        lower.startsWith("https://") ||
+        trimmed.startsWith("/") ||
+        trimmed.startsWith("./") ||
+        trimmed.startsWith("../") ||
+        trimmed.startsWith("#") ||
+        lower.startsWith("mailto:"));
+}
 export function renderMarkdown(body) {
     if (!body)
         return "";
@@ -365,7 +410,11 @@ export function renderMarkdown(body) {
     text = text.replace(/\*([^*]+)\*/g, "<em>$1</em>");
     // Extract markdown links [text](url) to avoid double-linking
     const links = [];
-    text = text.replace(/\[([^\]]+)\]\((https?:[^)]+)\)/g, (_m, label, url) => {
+    text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, label, rawUrl) => {
+        const url = (rawUrl || "").trim();
+        if (!isSafeHref(url)) {
+            return match;
+        }
         const placeholder = `@@LINK_${links.length}@@`;
         // Note: label and url are already escaped because text is escaped.
         links.push(`<a href="${url}" target="_blank" rel="noopener">${label}</a>`);
@@ -433,7 +482,8 @@ export function renderMarkdown(body) {
             const idx = Number(match[1]);
             return codeBlocks[idx] ?? "";
         }
-        return `<p>${block.replace(/\n/g, "<br>")}</p>`;
+        const content = block.replace(/\n/g, "<br>").replace(/@@CODEBLOCK_(\d+)@@/g, (_m, id) => codeBlocks[Number(id)] ?? "");
+        return `<p>${content}</p>`;
     })
         .join("");
 }
@@ -444,9 +494,12 @@ function renderFiles(files) {
         .map((f) => {
         const size = formatBytes(f.size);
         const href = resolvePath(f.url || "");
+        const isHttp = /^https?:\/\//.test(href);
+        const targetAttrs = isHttp ? ' target="_blank" rel="noopener"' : "";
+        const downloadAttr = isHttp ? "" : " download";
         return `<li class="messages-file">
         <span class="messages-file-icon">📎</span>
-        <a href="${escapeHtml(href)}" target="_blank" rel="noopener">${escapeHtml(f.name)}</a>
+        <a href="${escapeHtml(href)}"${downloadAttr}${targetAttrs}>${escapeHtml(f.name)}</a>
         ${size ? `<span class="messages-file-size muted small">${escapeHtml(size)}</span>` : ""}
       </li>`;
     })
@@ -758,7 +811,7 @@ function renderThreadDetail(detail, runId, ctx) {
         attachCollapseHandlers();
     }
     // Only show reply box for paused runs - replies to other states won't be seen
-    const replyBoxEl = document.querySelector(".messages-reply-box");
+    const replyBoxEl = document.querySelector(".messages-compose");
     if (replyBoxEl) {
         replyBoxEl.classList.toggle("hidden", !isPaused);
     }
@@ -770,6 +823,19 @@ function renderThreadDetail(detail, runId, ctx) {
         });
     }
 }
+function refreshAttachSummary() {
+    if (!replyAttachSummary || !replyFilesEl)
+        return;
+    const files = Array.from(replyFilesEl.files || []);
+    if (!files.length) {
+        replyAttachSummary.textContent = "";
+        replyAttachSummary.classList.add("hidden");
+        return;
+    }
+    const label = files.length > 2 ? `${files.length} files` : files.map((f) => f.name).join(", ");
+    replyAttachSummary.textContent = label;
+    replyAttachSummary.classList.remove("hidden");
+}
 async function sendReply() {
     const runId = selectedRunId;
     if (!runId) {
@@ -795,6 +861,7 @@ async function sendReply() {
             replyBodyEl.value = "";
         if (replyFilesEl)
             replyFilesEl.value = "";
+        refreshAttachSummary();
         flash("Reply sent", "success");
         // Always resume after sending
         await api(`/api/flows/${encodeURIComponent(runId)}/resume`, { method: "POST" });
@@ -812,6 +879,7 @@ export function initMessages() {
     if (!threadsEl || !detailEl)
         return;
     messagesInitialized = true;
+    initFileBox();
     backBtn?.addEventListener("click", showThreadList);
     window.addEventListener("resize", () => {
         if (!isMobileViewport()) {
@@ -827,6 +895,13 @@ export function initMessages() {
     replySendEl?.addEventListener("click", () => {
         void sendReply();
     });
+    replyAttachBtn?.addEventListener("click", () => {
+        replyFilesEl?.click();
+    });
+    replyFilesEl?.addEventListener("change", () => {
+        refreshAttachSummary();
+    });
+    refreshAttachSummary();
     // Load threads immediately, and try to open run_id from URL if present.
     void loadThreads("initial").then(() => {
         const params = getUrlParams();
@@ -868,6 +943,9 @@ export function initMessages() {
             if (selectedRunId) {
                 void loadThread(selectedRunId, "background");
             }
+            if (status === "ok" || status === "degraded") {
+                void fileBoxCtrl?.refresh();
+            }
         }
     });
 }