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

codex_autorunner/static/tickets.js

@@ -1,6 +1,6 @@
 // GENERATED FILE - do not edit directly. Source: static_src/
-import { api, flash, getUrlParams, resolvePath, statusPill, getAuthToken, openModal } from "./utils.js";
-import { activateTab } from "./tabs.js";
+import { api, confirmModal, flash, getUrlParams, resolvePath, statusPill, getAuthToken, openModal, inputModal, setButtonLoading, } from "./utils.js";
+// Note: activateTab removed - header now used for collapse, not inbox navigation
 import { registerAutoRefresh } from "./autoRefresh.js";
 import { CONSTANTS } from "./constants.js";
 import { subscribe } from "./bus.js";
@@ -9,15 +9,55 @@ import { closeTicketEditor, initTicketEditor, openTicketEditor } from "./ticketE
 import { parseAppServerEvent } from "./agentEvents.js";
 import { summarizeEvents, renderCompactSummary, COMPACT_MAX_TEXT_LENGTH } from "./eventSummarizer.js";
 import { refreshBell, renderMarkdown } from "./messages.js";
+import { preserveScroll } from "./preserve.js";
+import { createSmartRefresh } from "./smartRefresh.js";
+function formatDispatchTime(ts) {
+    if (!ts)
+        return "";
+    const date = new Date(ts);
+    if (Number.isNaN(date.getTime()))
+        return "";
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffSecs = Math.floor(diffMs / 1000);
+    if (diffSecs < 60)
+        return "now";
+    const diffMins = Math.floor(diffSecs / 60);
+    if (diffMins < 60)
+        return `${diffMins}m`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24)
+        return `${diffHours}h`;
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays < 7)
+        return `${diffDays}d`;
+    return date.toLocaleDateString([], { month: "short", day: "numeric" });
+}
+/**
+ * Format a number for compact display (e.g., 1200 -> "1.2k").
+ */
+function formatNumber(n) {
+    if (n >= 1000000) {
+        return `${(n / 1000000).toFixed(1).replace(/\.0$/, "")}M`;
+    }
+    if (n >= 1000) {
+        return `${(n / 1000).toFixed(1).replace(/\.0$/, "")}k`;
+    }
+    return n.toString();
+}
 let currentRunId = null;
 let ticketsExist = false;
 let currentActiveTicket = null;
 let currentFlowStatus = null;
+let selectedTicketPath = null;
 let elapsedTimerId = null;
 let flowStartedAt = null;
 let eventSource = null;
+let eventSourceRunId = null;
 let lastActivityTime = null;
 let lastActivityTimerId = null;
+let lastKnownEventSeq = null;
+let lastKnownEventAt = null;
 let liveOutputDetailExpanded = false; // Start with summary view, one click for full
 let liveOutputBuffer = [];
 const MAX_OUTPUT_LINES = 200;
@@ -25,12 +65,73 @@ const LIVE_EVENT_MAX = 50;
 let liveOutputEvents = [];
 let liveOutputEventIndex = {};
 let currentReasonFull = null; // Full reason text for modal display
+let dispatchHistoryRunId = null;
+let eventSourceRetryAttempt = 0;
+let eventSourceRetryTimerId = null;
+const lastSeenSeqByRun = {};
+let ticketListCache = null;
+let ticketFlowLoaded = false;
+function isFlowActiveStatus(status) {
+    // Mirror backend FlowRunStatus.is_active(): pending | running | stopping
+    return status === "pending" || status === "running" || status === "stopping";
+}
 // Dispatch panel collapse state (persisted to localStorage)
 const DISPATCH_PANEL_COLLAPSED_KEY = "car-dispatch-panel-collapsed";
 let dispatchPanelCollapsed = false;
+const LAST_SEEN_SEQ_KEY_PREFIX = "car-ticket-flow-last-seq:";
+const EVENT_STREAM_RETRY_DELAYS_MS = [500, 1000, 2000, 5000, 10000];
+const STALE_THRESHOLD_MS = 30000;
 // Throttling state
 let liveOutputRenderPending = false;
 let liveOutputTextPending = false;
+const ticketListRefresh = createSmartRefresh({
+    getSignature: (payload) => {
+        const list = (payload.tickets || []);
+        const pieces = list.map((ticket) => {
+            const fm = (ticket.frontmatter || {});
+            const title = fm?.title ? String(fm.title) : "";
+            const done = fm?.done ? "1" : "0";
+            const agent = fm?.agent ? String(fm.agent) : "";
+            const mtime = ticket.mtime ?? "";
+            const errors = Array.isArray(ticket.errors) ? ticket.errors.join(",") : "";
+            return [ticket.path ?? "", ticket.index ?? "", title, done, agent, mtime, errors].join("|");
+        });
+        return [
+            payload.ticket_dir ?? "",
+            payload.activeTicket ?? "",
+            payload.flowStatus ?? "",
+            pieces.join(";"),
+        ].join("::");
+    },
+    render: (payload) => {
+        const { tickets } = els();
+        preserveScroll(tickets, () => {
+            renderTickets({
+                ticket_dir: payload.ticket_dir,
+                tickets: payload.tickets,
+            });
+        }, { restoreOnNextFrame: true });
+    },
+    onSkip: () => {
+        updateScrollFade();
+    },
+});
+const dispatchHistoryRefresh = createSmartRefresh({
+    getSignature: (payload) => {
+        const entries = payload.history || [];
+        const latestSeq = entries[0]?.seq ?? "";
+        return [payload.runId ?? "", latestSeq, entries.length].join("::");
+    },
+    render: (payload) => {
+        const { history } = els();
+        preserveScroll(history, () => {
+            renderDispatchHistory(payload.runId, { history: payload.history });
+        }, { restoreOnNextFrame: true });
+    },
+    onSkip: () => {
+        updateScrollFade();
+    },
+});
 function scheduleLiveOutputRender() {
     if (liveOutputRenderPending)
         return;
@@ -194,6 +295,77 @@ function stopLastActivityTimer() {
         lastActivityTimerId = null;
     }
 }
+function updateLastActivityFromTimestamp(timestamp) {
+    if (timestamp) {
+        const parsed = new Date(timestamp);
+        if (!Number.isNaN(parsed.getTime())) {
+            lastActivityTime = parsed;
+            lastKnownEventAt = parsed;
+            startLastActivityTimer();
+            return;
+        }
+    }
+    lastActivityTime = null;
+    lastKnownEventAt = null;
+    stopLastActivityTimer();
+    const { lastActivity } = els();
+    if (lastActivity)
+        lastActivity.textContent = "–";
+}
+function getLastSeenSeq(runId) {
+    if (lastSeenSeqByRun[runId] !== undefined) {
+        return lastSeenSeqByRun[runId];
+    }
+    const stored = localStorage.getItem(`${LAST_SEEN_SEQ_KEY_PREFIX}${runId}`);
+    if (!stored)
+        return null;
+    const parsed = Number.parseInt(stored, 10);
+    if (Number.isNaN(parsed))
+        return null;
+    lastSeenSeqByRun[runId] = parsed;
+    return parsed;
+}
+function setLastSeenSeq(runId, seq) {
+    if (!Number.isFinite(seq))
+        return;
+    const current = lastSeenSeqByRun[runId];
+    if (current !== undefined && seq <= current)
+        return;
+    lastSeenSeqByRun[runId] = seq;
+    localStorage.setItem(`${LAST_SEEN_SEQ_KEY_PREFIX}${runId}`, String(seq));
+}
+function parseEventSeq(event, lastEventId) {
+    if (typeof event.seq === "number" && Number.isFinite(event.seq)) {
+        return event.seq;
+    }
+    if (lastEventId) {
+        const parsed = Number.parseInt(lastEventId, 10);
+        if (!Number.isNaN(parsed))
+            return parsed;
+    }
+    return null;
+}
+function clearEventStreamRetry() {
+    if (eventSourceRetryTimerId) {
+        clearTimeout(eventSourceRetryTimerId);
+        eventSourceRetryTimerId = null;
+    }
+}
+function scheduleEventStreamReconnect(runId) {
+    if (eventSourceRetryTimerId)
+        return;
+    const index = Math.min(eventSourceRetryAttempt, EVENT_STREAM_RETRY_DELAYS_MS.length - 1);
+    const delay = EVENT_STREAM_RETRY_DELAYS_MS[index];
+    eventSourceRetryAttempt += 1;
+    eventSourceRetryTimerId = setTimeout(() => {
+        eventSourceRetryTimerId = null;
+        if (currentRunId !== runId)
+            return;
+        if (currentFlowStatus !== "running" && currentFlowStatus !== "pending")
+            return;
+        connectEventStream(runId);
+    }, delay);
+}
 function appendToLiveOutput(text) {
     if (!text)
         return;
@@ -418,6 +590,7 @@ function setLiveOutputStatus(status) {
 function handleFlowEvent(event) {
     // Update last activity time
     lastActivityTime = new Date(event.timestamp);
+    lastKnownEventAt = lastActivityTime;
     updateLastActivityDisplay();
     // Handle agent stream delta events
     if (event.event_type === "agent_stream_delta") {
@@ -435,6 +608,20 @@ function handleFlowEvent(event) {
             scheduleLiveOutputRender();
         }
     }
+    // Handle step progress events carrying ticket selection so UI can highlight immediately
+    if (event.event_type === "step_progress") {
+        const nextTicket = event.data?.current_ticket;
+        if (nextTicket) {
+            currentActiveTicket = nextTicket;
+            // Don't force flow status here; it comes from the runs endpoint.
+            const { current } = els();
+            if (current)
+                current.textContent = currentActiveTicket;
+            if (ticketListCache) {
+                renderTickets(ticketListCache);
+            }
+        }
+    }
     // Handle flow lifecycle events
     if (event.event_type === "flow_completed" ||
         event.event_type === "flow_failed" ||
@@ -451,20 +638,38 @@ function handleFlowEvent(event) {
         }
     }
 }
-function connectEventStream(runId) {
+function connectEventStream(runId, afterSeq) {
     disconnectEventStream();
+    clearEventStreamRetry();
+    eventSourceRunId = runId;
     const token = getAuthToken();
-    let url = resolvePath(`/api/flows/${runId}/events`);
+    const url = new URL(resolvePath(`/api/flows/${runId}/events`), window.location.origin);
     if (token) {
-        url += `?token=${encodeURIComponent(token)}`;
+        url.searchParams.set("token", token);
+    }
+    if (typeof afterSeq === "number") {
+        url.searchParams.set("after", String(afterSeq));
+    }
+    else {
+        const lastSeenSeq = getLastSeenSeq(runId);
+        if (typeof lastSeenSeq === "number") {
+            url.searchParams.set("after", String(lastSeenSeq));
+        }
     }
-    eventSource = new EventSource(url);
+    eventSource = new EventSource(url.toString());
     eventSource.onopen = () => {
         setLiveOutputStatus("connected");
+        eventSourceRetryAttempt = 0;
+        clearEventStreamRetry();
     };
     eventSource.onmessage = (event) => {
         try {
             const data = JSON.parse(event.data);
+            const seq = parseEventSeq(data, event.lastEventId);
+            if (currentRunId && typeof seq === "number") {
+                setLastSeenSeq(currentRunId, seq);
+                lastKnownEventSeq = seq;
+            }
             handleFlowEvent(data);
         }
         catch (err) {
@@ -473,7 +678,11 @@ function connectEventStream(runId) {
     };
     eventSource.onerror = () => {
         setLiveOutputStatus("disconnected");
-        // Don't auto-reconnect here - loadTicketFlow will handle it
+        if (eventSource) {
+            eventSource.close();
+            eventSource = null;
+        }
+        scheduleEventStreamReconnect(runId);
     };
 }
 function disconnectEventStream() {
@@ -481,6 +690,8 @@ function disconnectEventStream() {
         eventSource.close();
         eventSource = null;
     }
+    clearEventStreamRetry();
+    eventSourceRunId = null;
     setLiveOutputStatus("disconnected");
 }
 function initLiveOutputPanel() {
@@ -537,6 +748,12 @@ function els() {
         progress: document.getElementById("ticket-flow-progress"),
         reason: document.getElementById("ticket-flow-reason"),
         lastActivity: document.getElementById("ticket-flow-last-activity"),
+        stalePill: document.getElementById("ticket-flow-stale"),
+        reconnectBtn: document.getElementById("ticket-flow-reconnect"),
+        workerStatus: document.getElementById("ticket-flow-worker"),
+        workerPill: document.getElementById("ticket-flow-worker-pill"),
+        recoverBtn: document.getElementById("ticket-flow-recover"),
+        metaDetails: document.getElementById("ticket-meta-details"),
         dir: document.getElementById("ticket-flow-dir"),
         tickets: document.getElementById("ticket-flow-tickets"),
         history: document.getElementById("ticket-dispatch-history"),
@@ -550,41 +767,106 @@ function els() {
         stopBtn: document.getElementById("ticket-flow-stop"),
         restartBtn: document.getElementById("ticket-flow-restart"),
         archiveBtn: document.getElementById("ticket-flow-archive"),
+        overflowToggle: document.getElementById("ticket-overflow-toggle"),
+        overflowDropdown: document.getElementById("ticket-overflow-dropdown"),
+        overflowNew: document.getElementById("ticket-overflow-new"),
+        overflowRestart: document.getElementById("ticket-overflow-restart"),
+        overflowArchive: document.getElementById("ticket-overflow-archive"),
     };
 }
 function setButtonsDisabled(disabled) {
-    const { bootstrapBtn, resumeBtn, refreshBtn, stopBtn, restartBtn, archiveBtn } = els();
-    [bootstrapBtn, resumeBtn, refreshBtn, stopBtn, restartBtn, archiveBtn].forEach((btn) => {
+    const { bootstrapBtn, resumeBtn, refreshBtn, stopBtn, restartBtn, archiveBtn, reconnectBtn, recoverBtn } = els();
+    [bootstrapBtn, resumeBtn, refreshBtn, stopBtn, restartBtn, archiveBtn, reconnectBtn, recoverBtn].forEach((btn) => {
         if (btn)
             btn.disabled = disabled;
     });
 }
+/**
+ * Updates the selected class on ticket items based on selectedTicketPath.
+ */
+function updateSelectedTicket(path) {
+    selectedTicketPath = path;
+    const ticketList = document.getElementById("ticket-flow-tickets");
+    if (!ticketList)
+        return;
+    const items = ticketList.querySelectorAll(".ticket-item");
+    items.forEach((item) => {
+        const ticketPath = item.getAttribute("data-ticket-path");
+        if (ticketPath === path) {
+            item.classList.add("selected");
+        }
+        else {
+            item.classList.remove("selected");
+        }
+    });
+}
+/**
+ * Updates the scroll fade indicator on ticket panels.
+ * Adds 'has-scroll-bottom' class when content is scrollable and not at bottom.
+ */
+function updateScrollFade() {
+    const ticketList = document.getElementById("ticket-flow-tickets");
+    const dispatchHistory = document.getElementById("ticket-dispatch-history");
+    [ticketList, dispatchHistory].forEach((list) => {
+        if (!list)
+            return;
+        const panel = list.closest(".ticket-panel");
+        if (!panel)
+            return;
+        // Check if scrollable and not scrolled to bottom
+        const hasScrollableContent = list.scrollHeight > list.clientHeight;
+        const isNotAtBottom = list.scrollTop + list.clientHeight < list.scrollHeight - 10;
+        if (hasScrollableContent && isNotAtBottom) {
+            panel.classList.add("has-scroll-bottom");
+        }
+        else {
+            panel.classList.remove("has-scroll-bottom");
+        }
+    });
+}
 function truncate(text, max = 100) {
     if (text.length <= max)
         return text;
     return `${text.slice(0, max).trim()}…`;
 }
 function renderTickets(data) {
-    const { tickets, dir, bootstrapBtn } = els();
+    ticketListCache = data;
+    const { tickets, dir } = els();
     if (dir)
         dir.textContent = data?.ticket_dir || "–";
     if (!tickets)
         return;
     tickets.innerHTML = "";
+    // Display lint errors if present
+    if (data?.lint_errors && data.lint_errors.length > 0) {
+        const lintBanner = document.createElement("div");
+        lintBanner.className = "ticket-lint-errors";
+        data.lint_errors.forEach((error) => {
+            const errorLine = document.createElement("div");
+            errorLine.textContent = error;
+            lintBanner.appendChild(errorLine);
+        });
+        tickets.appendChild(lintBanner);
+    }
     const list = (data?.tickets || []);
     ticketsExist = list.length > 0;
-    // Disable start button if no tickets exist
-    if (bootstrapBtn && !bootstrapBtn.disabled) {
-        bootstrapBtn.disabled = !ticketsExist;
-        if (!ticketsExist) {
-            bootstrapBtn.title = "Create a ticket first";
+    // Update progress bar
+    const progressBar = document.getElementById("ticket-progress-bar");
+    const progressFill = document.getElementById("ticket-progress-fill");
+    if (progressBar && progressFill) {
+        if (list.length === 0) {
+            progressBar.classList.add("hidden");
         }
         else {
-            bootstrapBtn.title = "";
+            progressBar.classList.remove("hidden");
+            const doneCount = list.filter((t) => Boolean((t.frontmatter || {})?.done)).length;
+            const percent = Math.round((doneCount / list.length) * 100);
+            progressFill.style.width = `${percent}%`;
+            progressBar.title = `${doneCount} of ${list.length} tickets done`;
         }
     }
     if (!list.length) {
-        tickets.textContent = "No tickets found. Create TICKET-001.md to begin.";
+        tickets.textContent = "No tickets found. Start the ticket flow to create TICKET-001.md.";
         return;
     }
     list.forEach((ticket) => {
@@ -592,12 +874,26 @@ function renderTickets(data) {
         const fm = (ticket.frontmatter || {});
         const done = Boolean(fm?.done);
         // Check if this ticket is currently being worked on
-        const isActive = currentActiveTicket && ticket.path === currentActiveTicket && currentFlowStatus === "running";
-        item.className = `ticket-item ${done ? "done" : ""} ${isActive ? "active" : ""} clickable`;
+        const isActive = Boolean(currentActiveTicket &&
+            ticket.path === currentActiveTicket &&
+            isFlowActiveStatus(currentFlowStatus));
+        item.className = `ticket-item ${done ? "done" : ""} ${isActive ? "active" : ""} ${selectedTicketPath === ticket.path ? "selected" : ""} clickable`;
         item.title = "Click to edit";
+        item.setAttribute("data-ticket-path", ticket.path || "");
         // Make ticket item clickable to open editor
-        item.addEventListener("click", () => {
-            openTicketEditor(ticket);
+        item.addEventListener("click", async () => {
+            updateSelectedTicket(ticket.path || null);
+            try {
+                if (ticket.index == null) {
+                    flash("Invalid ticket: missing index", "error");
+                    return;
+                }
+                const data = (await api(`/api/flows/ticket_flow/tickets/${ticket.index}`));
+                openTicketEditor(data);
+            }
+            catch (err) {
+                flash(`Failed to load ticket: ${err.message}`, "error");
+            }
         });
         const head = document.createElement("div");
         head.className = "ticket-item-head";
@@ -631,20 +927,39 @@ function renderTickets(data) {
         if (isActive) {
             const workingBadge = document.createElement("span");
             workingBadge.className = "ticket-working-badge";
-            workingBadge.textContent = "Working";
+            // Text content used on middle responsive view; CSS hides text on desktop/mobile
+            const workingText = document.createElement("span");
+            workingText.className = "badge-text";
+            workingText.textContent = "Working";
+            workingBadge.appendChild(workingText);
             badges.appendChild(workingBadge);
         }
         // Add DONE badge for completed tickets
         if (done && !isActive) {
             const doneBadge = document.createElement("span");
             doneBadge.className = "ticket-done-badge";
-            doneBadge.textContent = "Done";
+            // Text content used on middle responsive view; CSS hides text on desktop/mobile
+            const doneText = document.createElement("span");
+            doneText.className = "badge-text";
+            doneText.textContent = "Done";
+            doneBadge.appendChild(doneText);
             badges.appendChild(doneBadge);
         }
         const agent = document.createElement("span");
         agent.className = "ticket-agent";
         agent.textContent = fm?.agent || "codex";
         badges.appendChild(agent);
+        // Cumulative diff stats (from FlowStore DIFF_UPDATED aggregation).
+        const diffStats = ticket.diff_stats || null;
+        if (diffStats && (diffStats.insertions > 0 || diffStats.deletions > 0)) {
+            const statsEl = document.createElement("span");
+            statsEl.className = "ticket-diff-stats";
+            const ins = diffStats.insertions || 0;
+            const del = diffStats.deletions || 0;
+            statsEl.innerHTML = `<span class="diff-add">+${formatNumber(ins)}</span><span class="diff-del">-${formatNumber(del)}</span>`;
+            statsEl.title = `${ins} insertions, ${del} deletions${diffStats.files_changed ? `, ${diffStats.files_changed} files` : ""}`;
+            badges.appendChild(statsEl);
+        }
         head.appendChild(badges);
         item.appendChild(head);
         if (ticket.errors && ticket.errors.length) {
@@ -661,6 +976,8 @@ function renderTickets(data) {
         }
         tickets.appendChild(item);
     });
+    // Update scroll fade indicator after rendering
+    updateScrollFade();
 }
 function renderDispatchHistory(runId, data) {
     const { history, dispatchNote } = els();
@@ -689,26 +1006,58 @@ function renderDispatchHistory(runId, data) {
         dispatchNote.textContent = `Latest #${entries[0]?.seq ?? "–"}`;
     // Also render mini list for collapsed panel view
     renderDispatchMiniList(entries);
-    entries.forEach((entry) => {
+    entries.forEach((entry, index) => {
         const dispatch = entry.dispatch;
         const isTurnSummary = dispatch?.mode === "turn_summary" || dispatch?.extra?.is_turn_summary;
         const isHandoff = dispatch?.mode === "pause";
+        const isNotify = dispatch?.mode === "notify";
+        // Expand only the first (newest) dispatch by default - entries are newest-first
+        const isFirst = index === 0;
+        const isCollapsed = !isFirst;
         const container = document.createElement("div");
-        container.className = `dispatch-item${isTurnSummary ? " turn-summary" : ""} clickable`;
-        container.title = isTurnSummary ? "Agent turn output" : "Click to view in Inbox";
-        // Add click handler to navigate to inbox (skip for turn summaries)
-        if (!isTurnSummary) {
-            container.addEventListener("click", () => {
-                if (runId) {
-                    // Update URL with run_id so inbox tab loads the right thread
-                    const url = new URL(window.location.href);
-                    url.searchParams.set("run_id", runId);
-                    window.history.replaceState({}, "", url.toString());
-                    // Switch to inbox tab
-                    activateTab("inbox");
-                }
-            });
-        }
+        container.className = `dispatch-item${isTurnSummary ? " turn-summary" : ""}${isHandoff ? " pause" : ""}${isNotify ? " notify" : ""}${isCollapsed ? " collapsed" : ""}`;
+        // Reddit-style thin collapse bar on the left
+        const collapseBar = document.createElement("div");
+        collapseBar.className = "dispatch-collapse-bar";
+        collapseBar.title = isCollapsed ? "Click to expand" : "Click to collapse";
+        collapseBar.setAttribute("role", "button");
+        collapseBar.setAttribute("tabindex", "0");
+        collapseBar.setAttribute("aria-label", isCollapsed ? "Expand dispatch" : "Collapse dispatch");
+        collapseBar.setAttribute("aria-expanded", String(!isCollapsed));
+        const toggleCollapse = () => {
+            container.classList.toggle("collapsed");
+            const isNowCollapsed = container.classList.contains("collapsed");
+            collapseBar.title = isNowCollapsed ? "Click to expand" : "Click to collapse";
+            collapseBar.setAttribute("aria-expanded", String(!isNowCollapsed));
+            collapseBar.setAttribute("aria-label", isNowCollapsed ? "Expand dispatch" : "Collapse dispatch");
+        };
+        collapseBar.addEventListener("click", (e) => {
+            e.stopPropagation();
+            toggleCollapse();
+        });
+        collapseBar.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                toggleCollapse();
+            }
+        });
+        // Content wrapper for header and body
+        const contentWrapper = document.createElement("div");
+        contentWrapper.className = "dispatch-content-wrapper";
+        // Create collapsible structure
+        const header = document.createElement("div");
+        header.className = "dispatch-header";
+        // Make header clickable to toggle collapse
+        header.addEventListener("click", (e) => {
+            // Don't toggle if clicking on a link or navigating to inbox
+            if (e.target.closest("a"))
+                return;
+            toggleCollapse();
+        });
+        // Header content area
+        const headerContent = document.createElement("div");
+        headerContent.className = "dispatch-header-content";
+        headerContent.title = isTurnSummary ? "Agent turn output" : "Click header to expand/collapse";
         // Determine mode label
         let modeLabel;
         if (isTurnSummary) {
@@ -729,6 +1078,24 @@ function renderDispatchHistory(runId, data) {
         mode.className = `ticket-agent${isTurnSummary ? " turn-summary-badge" : ""}`;
         mode.textContent = modeLabel;
         head.append(seq, mode);
+        headerContent.appendChild(head);
+        header.appendChild(headerContent);
+        contentWrapper.appendChild(header);
+        container.append(collapseBar, contentWrapper);
+        // Add diff stats if present (for turn summaries)
+        // New path: dispatch.diff_stats (from FlowStore DIFF_UPDATED merge)
+        // Legacy fallback: dispatch.extra.diff_stats (DISPATCH.md frontmatter)
+        const diffStats = (dispatch?.diff_stats ||
+            dispatch?.extra?.diff_stats);
+        if (diffStats && (diffStats.insertions || diffStats.deletions)) {
+            const statsEl = document.createElement("span");
+            statsEl.className = "dispatch-diff-stats";
+            const ins = diffStats.insertions || 0;
+            const del = diffStats.deletions || 0;
+            statsEl.innerHTML = `<span class="diff-add">+${formatNumber(ins)}</span><span class="diff-del">-${formatNumber(del)}</span>`;
+            statsEl.title = `${ins} insertions, ${del} deletions${diffStats.files_changed ? `, ${diffStats.files_changed} files` : ""}`;
+            head.appendChild(statsEl);
+        }
         // Add ticket reference if present
         const ticketId = dispatch?.extra?.ticket_id;
         if (ticketId) {
@@ -742,26 +1109,36 @@ function renderDispatchHistory(runId, data) {
                 head.appendChild(ticketLabel);
             }
         }
-        container.appendChild(head);
+        // Add timestamp
+        const timeAgo = formatDispatchTime(entry.created_at);
+        if (timeAgo) {
+            const timeLabel = document.createElement("span");
+            timeLabel.className = "dispatch-time";
+            timeLabel.textContent = timeAgo;
+            head.appendChild(timeLabel);
+        }
+        // Create collapsible body content
+        const bodyWrapper = document.createElement("div");
+        bodyWrapper.className = "dispatch-body-wrapper";
         if (entry.errors && entry.errors.length) {
             const err = document.createElement("div");
             err.className = "ticket-errors";
             err.textContent = entry.errors.join("; ");
-            container.appendChild(err);
+            bodyWrapper.appendChild(err);
         }
         const title = dispatch?.title;
         if (title) {
             const titleEl = document.createElement("div");
             titleEl.className = "ticket-body ticket-dispatch-title";
             titleEl.textContent = title;
-            container.appendChild(titleEl);
+            bodyWrapper.appendChild(titleEl);
         }
         const bodyText = dispatch?.body;
         if (bodyText) {
             const body = document.createElement("div");
             body.className = "ticket-body ticket-dispatch-body messages-markdown";
             body.innerHTML = renderMarkdown(bodyText);
-            container.appendChild(body);
+            bodyWrapper.appendChild(body);
         }
         const attachments = (entry.attachments || []);
         if (attachments.length) {
@@ -771,17 +1148,28 @@ function renderDispatchHistory(runId, data) {
                 if (!att.url)
                     return;
                 const link = document.createElement("a");
-                link.href = resolvePath(att.url);
+                const resolved = new URL(resolvePath(att.url), window.location.origin);
+                link.href = resolved.toString();
                 link.textContent = att.name || att.rel_path || "attachment";
-                link.target = "_blank";
-                link.rel = "noreferrer noopener";
+                // Prefer direct downloads for same-origin attachments.
+                if (resolved.origin === window.location.origin) {
+                    link.download = "";
+                    link.rel = "noopener";
+                }
+                else {
+                    link.target = "_blank";
+                    link.rel = "noreferrer noopener";
+                }
                 link.title = att.path || "";
                 wrap.appendChild(link);
             });
-            container.appendChild(wrap);
+            bodyWrapper.appendChild(wrap);
         }
+        contentWrapper.appendChild(bodyWrapper);
         history.appendChild(container);
     });
+    // Update scroll fade indicator after rendering
+    updateScrollFade();
 }
 const MAX_REASON_LENGTH = 60;
 /**
@@ -814,7 +1202,10 @@ function summarizeReason(run) {
     const engine = (state.ticket_engine || {});
     const fullReason = getFullReason(run);
     currentReasonFull = fullReason;
-    const shortReason = engine.reason ||
+    const reasonSummary = typeof run.reason_summary === "string" ? run.reason_summary : "";
+    const useSummary = run.status === "paused" || run.status === "failed" || run.status === "stopped";
+    const shortReason = (useSummary && reasonSummary ? reasonSummary : "") ||
+        engine.reason ||
         run.error_message ||
         (engine.current_ticket ? `Working on ${engine.current_ticket}` : "") ||
         run.status ||
@@ -825,16 +1216,30 @@ function summarizeReason(run) {
     }
     return shortReason;
 }
-async function loadTicketFiles() {
+async function loadTicketFiles(ctx) {
     const { tickets } = els();
-    if (tickets)
+    const isInitial = ticketListRefresh.getSignature() === null;
+    if (tickets && isInitial) {
         tickets.textContent = "Loading tickets…";
+    }
     try {
-        const data = (await api("/api/flows/ticket_flow/tickets"));
-        renderTickets(data);
+        await ticketListRefresh.refresh(async () => {
+            const data = (await api("/api/flows/ticket_flow/tickets"));
+            return {
+                ticket_dir: data.ticket_dir,
+                tickets: data.tickets,
+                lint_errors: data.lint_errors,
+                activeTicket: currentActiveTicket,
+                flowStatus: currentFlowStatus,
+            };
+        }, { reason: ctx?.reason === "manual" ? "manual" : "background" });
     }
     catch (err) {
-        renderTickets(null);
+        ticketListRefresh.reset();
+        ticketListCache = null;
+        preserveScroll(tickets, () => {
+            renderTickets(null);
+        }, { restoreOnNextFrame: true });
         flash(err.message || "Failed to load tickets", "error");
     }
 }
@@ -843,10 +1248,9 @@ async function loadTicketFiles() {
  */
 async function openTicketByIndex(index) {
     try {
-        const data = (await api("/api/flows/ticket_flow/tickets"));
-        const ticket = data.tickets?.find((t) => t.index === index);
-        if (ticket) {
-            openTicketEditor(ticket);
+        const data = (await api(`/api/flows/ticket_flow/tickets/${index}`));
+        if (data) {
+            openTicketEditor(data);
         }
         else {
             flash(`Ticket TICKET-${String(index).padStart(3, "0")} not found`, "error");
@@ -856,26 +1260,45 @@ async function openTicketByIndex(index) {
         flash(`Failed to open ticket: ${err.message}`, "error");
     }
 }
-async function loadDispatchHistory(runId) {
+async function loadDispatchHistory(runId, ctx) {
     const { history } = els();
-    if (history)
-        history.textContent = "Loading dispatch history…";
+    const runChanged = dispatchHistoryRunId !== runId;
     if (!runId) {
         renderDispatchHistory(null, null);
+        dispatchHistoryRefresh.reset();
+        dispatchHistoryRunId = null;
         return;
     }
+    if (runChanged) {
+        dispatchHistoryRunId = runId;
+        dispatchHistoryRefresh.reset();
+    }
+    const isInitial = dispatchHistoryRefresh.getSignature() === null;
+    if (history && isInitial) {
+        history.textContent = "Loading dispatch history…";
+    }
     try {
-        // Use dispatch_history endpoint
-        const data = (await api(`/api/flows/${runId}/dispatch_history`));
-        renderDispatchHistory(runId, data);
+        await dispatchHistoryRefresh.refresh(async () => {
+            const data = (await api(`/api/flows/${runId}/dispatch_history`));
+            return {
+                runId,
+                history: data.history,
+            };
+        }, {
+            reason: ctx?.reason === "manual" ? "manual" : "background",
+            force: runChanged,
+        });
     }
     catch (err) {
-        renderDispatchHistory(runId, null);
+        dispatchHistoryRefresh.reset();
+        preserveScroll(history, () => {
+            renderDispatchHistory(runId, null);
+        }, { restoreOnNextFrame: true });
         flash(err.message || "Failed to load dispatch history", "error");
     }
 }
-async function loadTicketFlow() {
-    const { status, run, current, turn, elapsed, progress, reason, lastActivity, resumeBtn, bootstrapBtn, stopBtn, archiveBtn } = els();
+async function loadTicketFlow(ctx) {
+    const { status, run, current, turn, elapsed, progress, reason, lastActivity, stalePill, reconnectBtn, workerStatus, workerPill, recoverBtn, resumeBtn, bootstrapBtn, stopBtn, archiveBtn, refreshBtn, } = els();
     if (!isRepoHealthy()) {
         if (status)
             statusPill(status, "error");
@@ -891,14 +1314,29 @@ async function loadTicketFlow() {
             progress.textContent = "–";
         if (lastActivity)
             lastActivity.textContent = "–";
+        if (stalePill)
+            stalePill.style.display = "none";
+        if (reconnectBtn)
+            reconnectBtn.style.display = "none";
+        if (workerStatus)
+            workerStatus.textContent = "–";
+        if (workerPill)
+            workerPill.style.display = "none";
+        if (recoverBtn)
+            recoverBtn.style.display = "none";
         if (reason)
             reason.textContent = "Repo offline or uninitialized.";
         setButtonsDisabled(true);
+        setButtonLoading(refreshBtn, false);
         stopElapsedTimer();
         stopLastActivityTimer();
         disconnectEventStream();
         return;
     }
+    const showRefreshIndicator = ticketFlowLoaded;
+    if (showRefreshIndicator) {
+        setButtonLoading(refreshBtn, true);
+    }
     try {
         const runs = (await api("/api/flows/runs?flow_type=ticket_flow"));
         // Only consider the newest run - if it's terminal, flow is idle.
@@ -911,7 +1349,10 @@ async function loadTicketFlow() {
         currentFlowStatus = latest?.status || null;
         // Extract ticket engine state
         const ticketEngine = latest?.state?.ticket_engine;
-        currentActiveTicket = ticketEngine?.current_ticket || null;
+        // The server now provides an effective current_ticket during in-flight steps.
+        // Trust the API value even when null so we don't show stale DONE+WORKING between steps.
+        const apiActiveTicket = ticketEngine?.current_ticket || null;
+        currentActiveTicket = apiActiveTicket;
         const ticketTurns = ticketEngine?.ticket_turns ?? null;
         const totalTurns = ticketEngine?.total_turns ?? null;
         if (status)
@@ -922,7 +1363,7 @@ async function loadTicketFlow() {
             current.textContent = currentActiveTicket || "–";
         // Display turn counter
         if (turn) {
-            if (ticketTurns !== null && currentFlowStatus === "running") {
+            if (ticketTurns !== null && isFlowActiveStatus(currentFlowStatus)) {
                 turn.textContent = `${ticketTurns}${totalTurns !== null ? ` (${totalTurns} total)` : ""}`;
             }
             else {
@@ -949,6 +1390,37 @@ async function loadTicketFlow() {
                 (currentReasonFull && currentReasonFull.length > MAX_REASON_LENGTH));
             reason.classList.toggle("has-details", hasDetails);
         }
+        lastKnownEventSeq = typeof latest?.last_event_seq === "number" ? latest.last_event_seq : null;
+        if (currentRunId && typeof lastKnownEventSeq === "number") {
+            setLastSeenSeq(currentRunId, lastKnownEventSeq);
+        }
+        updateLastActivityFromTimestamp(latest?.last_event_at || null);
+        const isActive = latest?.status === "running" || latest?.status === "pending";
+        const isStale = Boolean(isActive &&
+            lastKnownEventAt &&
+            Date.now() - lastKnownEventAt.getTime() > STALE_THRESHOLD_MS);
+        if (stalePill)
+            stalePill.style.display = isStale ? "" : "none";
+        if (reconnectBtn) {
+            reconnectBtn.style.display = isStale ? "" : "none";
+            reconnectBtn.disabled = !currentRunId;
+        }
+        const worker = latest?.worker_health;
+        const workerLabel = worker?.status
+            ? `${worker.status}${worker.pid ? ` (pid ${worker.pid})` : ""}`
+            : "–";
+        if (workerStatus)
+            workerStatus.textContent = workerLabel;
+        const workerDead = Boolean(isActive &&
+            worker &&
+            worker.is_alive === false &&
+            worker.status !== "absent");
+        if (workerPill)
+            workerPill.style.display = workerDead ? "" : "none";
+        if (recoverBtn) {
+            recoverBtn.style.display = workerDead ? "" : "none";
+            recoverBtn.disabled = !currentRunId;
+        }
         if (resumeBtn) {
             resumeBtn.disabled = !latest?.id || latest.status !== "paused";
         }
@@ -956,7 +1428,7 @@ async function loadTicketFlow() {
             const stoppable = latest?.status === "running" || latest?.status === "pending";
             stopBtn.disabled = !latest?.id || !stoppable;
         }
-        await loadTicketFiles();
+        await loadTicketFiles(ctx);
         // Calculate and display ticket progress (scoped to tickets container only)
         if (progress) {
             const ticketsContainer = document.getElementById("ticket-flow-tickets");
@@ -972,41 +1444,45 @@ async function loadTicketFlow() {
         // Connect/disconnect event stream based on flow status
         if (currentRunId && (latest?.status === "running" || latest?.status === "pending")) {
             // Only connect if not already connected to this run
-            if (!eventSource || eventSource.url?.indexOf(currentRunId) === -1) {
+            const isSameRun = eventSourceRunId === currentRunId;
+            const isClosed = eventSource?.readyState === EventSource.CLOSED;
+            if (!eventSource || !isSameRun || isClosed) {
                 connectEventStream(currentRunId);
                 startLastActivityTimer();
             }
         }
         else {
             disconnectEventStream();
-            stopLastActivityTimer();
-            if (lastActivity)
-                lastActivity.textContent = "–";
-            lastActivityTime = null;
+            if (!lastKnownEventAt) {
+                stopLastActivityTimer();
+                if (lastActivity)
+                    lastActivity.textContent = "–";
+                lastActivityTime = null;
+            }
         }
         if (bootstrapBtn) {
             const busy = latest?.status === "running" || latest?.status === "pending";
-            // Disable if busy OR if no tickets exist
-            bootstrapBtn.disabled = busy || !ticketsExist;
+            // Disable only if busy; bootstrap will create initial ticket when missing
+            bootstrapBtn.disabled = busy;
             bootstrapBtn.textContent = busy ? "Running…" : "Start Ticket Flow";
-            if (!ticketsExist && !busy) {
-                bootstrapBtn.title = "Create a ticket first";
-            }
-            else {
-                bootstrapBtn.title = "";
-            }
+            bootstrapBtn.title = busy ? "Ticket flow in progress" : "";
         }
         // Show restart button when flow is paused, stopping, or in terminal state (allows starting fresh)
-        const { restartBtn } = els();
+        const { restartBtn, overflowRestart } = els();
         if (restartBtn) {
             const isPaused = latest?.status === "paused";
             const isStopping = latest?.status === "stopping";
             const isTerminal = latest?.status === "completed" ||
                 latest?.status === "stopped" ||
                 latest?.status === "failed";
-            const canRestart = (isPaused || isStopping || isTerminal) && ticketsExist && Boolean(currentRunId);
+            const canRestart = (isPaused || isStopping || isTerminal || workerDead) &&
+                ticketsExist &&
+                Boolean(currentRunId);
             restartBtn.style.display = canRestart ? "" : "none";
             restartBtn.disabled = !canRestart;
+            if (overflowRestart) {
+                overflowRestart.style.display = canRestart ? "" : "none";
+            }
         }
         // Show archive button when flow is paused, stopping, or in terminal state and has tickets
         if (archiveBtn) {
@@ -1018,14 +1494,24 @@ async function loadTicketFlow() {
             const canArchive = (isPaused || isStopping || isTerminal) && ticketsExist && Boolean(currentRunId);
             archiveBtn.style.display = canArchive ? "" : "none";
             archiveBtn.disabled = !canArchive;
+            const { overflowArchive } = els();
+            if (overflowArchive) {
+                overflowArchive.style.display = canArchive ? "" : "none";
+            }
         }
-        await loadDispatchHistory(currentRunId);
+        await loadDispatchHistory(currentRunId, ctx);
     }
     catch (err) {
         if (reason)
             reason.textContent = err.message || "Ticket flow unavailable";
         flash(err.message || "Failed to load ticket flow state", "error");
     }
+    finally {
+        ticketFlowLoaded = true;
+        if (showRefreshIndicator) {
+            setButtonLoading(refreshBtn, false);
+        }
+    }
 }
 async function bootstrapTicketFlow() {
     const { bootstrapBtn } = els();
@@ -1035,13 +1521,9 @@ async function bootstrapTicketFlow() {
         flash("Repo offline; cannot start ticket flow.", "error");
         return;
     }
-    if (!ticketsExist) {
-        flash("Create a ticket first before starting the flow.", "error");
-        return;
-    }
     setButtonsDisabled(true);
-    bootstrapBtn.textContent = "Starting…";
-    try {
+    bootstrapBtn.textContent = "Checking…";
+    const startFlow = async () => {
         const res = (await api("/api/flows/ticket_flow/bootstrap", {
             method: "POST",
             body: {},
@@ -1055,6 +1537,113 @@ async function bootstrapTicketFlow() {
             clearLiveOutput(); // Clear output for new run
         }
         await loadTicketFlow();
+    };
+    const seedIssueFromGithub = async (issueRef) => {
+        await api("/api/flows/ticket_flow/seed-issue", {
+            method: "POST",
+            body: { issue_ref: issueRef },
+        });
+        flash("ISSUE.md created from GitHub", "success");
+    };
+    const seedIssueFromPlan = async (planText) => {
+        await api("/api/flows/ticket_flow/seed-issue", {
+            method: "POST",
+            body: { plan_text: planText },
+        });
+        flash("ISSUE.md created from your input", "success");
+    };
+    const promptIssueRef = async (repo) => {
+        const message = repo
+            ? `Enter GitHub issue number or URL for ${repo}`
+            : "Enter GitHub issue number or URL";
+        const input = await inputModal(message, {
+            placeholder: "#123 or https://github.com/org/repo/issues/123",
+            confirmText: "Fetch issue",
+        });
+        const value = (input || "").trim();
+        return value || null;
+    };
+    const promptPlanText = async () => {
+        // Build a simple textarea modal dynamically to avoid new HTML templates.
+        const overlay = document.createElement("div");
+        overlay.className = "modal-overlay";
+        overlay.hidden = true;
+        const dialog = document.createElement("div");
+        dialog.className = "modal-dialog";
+        dialog.setAttribute("role", "dialog");
+        dialog.setAttribute("aria-modal", "true");
+        dialog.tabIndex = -1;
+        const title = document.createElement("h3");
+        title.textContent = "Describe the work";
+        const textarea = document.createElement("textarea");
+        textarea.placeholder = "Describe the scope/requirements to seed ISSUE.md";
+        textarea.rows = 6;
+        textarea.style.width = "100%";
+        textarea.style.resize = "vertical";
+        const actions = document.createElement("div");
+        actions.className = "modal-actions";
+        const cancel = document.createElement("button");
+        cancel.className = "ghost";
+        cancel.textContent = "Cancel";
+        const submit = document.createElement("button");
+        submit.className = "primary";
+        submit.textContent = "Create ISSUE.md";
+        actions.append(cancel, submit);
+        dialog.append(title, textarea, actions);
+        overlay.append(dialog);
+        document.body.append(overlay);
+        return await new Promise((resolve) => {
+            let closeModal = null;
+            const cleanup = () => {
+                if (closeModal)
+                    closeModal();
+                overlay.remove();
+            };
+            const finalize = (value) => {
+                cleanup();
+                resolve(value);
+            };
+            closeModal = openModal(overlay, {
+                initialFocus: textarea,
+                returnFocusTo: bootstrapBtn,
+                onRequestClose: () => finalize(null),
+            });
+            submit.addEventListener("click", () => {
+                finalize(textarea.value.trim() || null);
+            });
+            cancel.addEventListener("click", () => finalize(null));
+        });
+    };
+    try {
+        const check = (await api("/api/flows/ticket_flow/bootstrap-check", {
+            method: "GET",
+        }));
+        if (check.status === "ready") {
+            await startFlow();
+            return;
+        }
+        if (check.status === "needs_issue") {
+            if (check.github_available) {
+                const issueRef = await promptIssueRef(check.repo);
+                if (!issueRef) {
+                    flash("Bootstrap cancelled (no issue provided)", "info");
+                    return;
+                }
+                await seedIssueFromGithub(issueRef);
+            }
+            else {
+                const planText = await promptPlanText();
+                if (!planText) {
+                    flash("Bootstrap cancelled (no description provided)", "info");
+                    return;
+                }
+                await seedIssueFromPlan(planText);
+            }
+            await startFlow();
+            return;
+        }
+        // Fallback: start normally
+        await startFlow();
     }
     catch (err) {
         flash(err.message || "Failed to start ticket flow", "error");
@@ -1091,6 +1680,17 @@ async function resumeTicketFlow() {
         setButtonsDisabled(false);
     }
 }
+function reconnectTicketFlowStream() {
+    if (!currentRunId) {
+        flash("No ticket flow run to reconnect", "info");
+        return;
+    }
+    const afterSeq = typeof lastKnownEventSeq === "number"
+        ? lastKnownEventSeq
+        : getLastSeenSeq(currentRunId);
+    connectEventStream(currentRunId, afterSeq ?? undefined);
+    flash("Reconnecting event stream", "info");
+}
 async function stopTicketFlow() {
     const { stopBtn } = els();
     if (!stopBtn)
@@ -1118,6 +1718,33 @@ async function stopTicketFlow() {
         setButtonsDisabled(false);
     }
 }
+async function recoverTicketFlow() {
+    const { recoverBtn } = els();
+    if (!recoverBtn)
+        return;
+    if (!isRepoHealthy()) {
+        flash("Repo offline; cannot recover ticket flow.", "error");
+        return;
+    }
+    if (!currentRunId) {
+        flash("No ticket flow run to recover", "info");
+        return;
+    }
+    setButtonsDisabled(true);
+    recoverBtn.textContent = "Recovering…";
+    try {
+        await api(`/api/flows/${currentRunId}/reconcile`, { method: "POST", body: {} });
+        flash("Flow reconciled");
+        await loadTicketFlow();
+    }
+    catch (err) {
+        flash(err.message || "Failed to recover ticket flow", "error");
+    }
+    finally {
+        recoverBtn.textContent = "Recover";
+        setButtonsDisabled(false);
+    }
+}
 async function restartTicketFlow() {
     const { restartBtn } = els();
     if (!restartBtn)
@@ -1130,7 +1757,8 @@ async function restartTicketFlow() {
         flash("Create a ticket first before restarting the flow.", "error");
         return;
     }
-    if (!confirm("Restart ticket flow? This will stop the current run and start a new one.")) {
+    const confirmed = await confirmModal("Restart ticket flow? This will stop the current run and start a new one.");
+    if (!confirmed) {
         return;
     }
     setButtonsDisabled(true);
@@ -1170,7 +1798,8 @@ async function archiveTicketFlow() {
         flash("No ticket flow run to archive", "info");
         return;
     }
-    if (!confirm("Archive all tickets from this flow? They will be moved to the run's artifact directory.")) {
+    const confirmed = await confirmModal("Archive all tickets from this flow? They will be moved to the run's artifact directory.");
+    if (!confirmed) {
         return;
     }
     setButtonsDisabled(true);
@@ -1191,7 +1820,7 @@ async function archiveTicketFlow() {
         currentActiveTicket = null;
         currentReasonFull = null;
         // Reset all UI elements to idle state directly (avoid re-fetching stale data)
-        const { status, run, current, turn, elapsed, progress, lastActivity, bootstrapBtn, resumeBtn, stopBtn, restartBtn } = els();
+        const { status, run, current, turn, elapsed, progress, lastActivity, stalePill, reconnectBtn, workerStatus, workerPill, recoverBtn, bootstrapBtn, resumeBtn, stopBtn, restartBtn, archiveBtn } = els();
         if (status)
             statusPill(status, "idle");
         if (run)
@@ -1206,6 +1835,16 @@ async function archiveTicketFlow() {
             progress.textContent = "–";
         if (lastActivity)
             lastActivity.textContent = "–";
+        if (stalePill)
+            stalePill.style.display = "none";
+        if (reconnectBtn)
+            reconnectBtn.style.display = "none";
+        if (workerStatus)
+            workerStatus.textContent = "–";
+        if (workerPill)
+            workerPill.style.display = "none";
+        if (recoverBtn)
+            recoverBtn.style.display = "none";
         if (reason) {
             reason.textContent = "No ticket flow run yet.";
             reason.classList.remove("has-details");
@@ -1228,8 +1867,13 @@ async function archiveTicketFlow() {
             stopBtn.disabled = true;
         if (restartBtn)
             restartBtn.style.display = "none";
+        const { overflowRestart, overflowArchive } = els();
+        if (overflowRestart)
+            overflowRestart.style.display = "none";
         if (archiveBtn)
             archiveBtn.style.display = "none";
+        if (overflowArchive)
+            overflowArchive.style.display = "none";
         // Refresh inbox badge and ticket list (tickets were archived/moved)
         void refreshBell();
         await loadTicketFiles();
@@ -1245,7 +1889,7 @@ async function archiveTicketFlow() {
     }
 }
 export function initTicketFlow() {
-    const { card, bootstrapBtn, resumeBtn, refreshBtn, stopBtn, restartBtn, archiveBtn } = els();
+    const { card, bootstrapBtn, resumeBtn, refreshBtn, stopBtn, restartBtn, archiveBtn, reconnectBtn, recoverBtn } = els();
     if (!card || card.dataset.ticketInitialized === "1")
         return;
     card.dataset.ticketInitialized = "1";
@@ -1259,14 +1903,73 @@ export function initTicketFlow() {
         restartBtn.addEventListener("click", restartTicketFlow);
     if (archiveBtn)
         archiveBtn.addEventListener("click", archiveTicketFlow);
+    if (reconnectBtn)
+        reconnectBtn.addEventListener("click", reconnectTicketFlowStream);
+    if (recoverBtn)
+        recoverBtn.addEventListener("click", recoverTicketFlow);
     if (refreshBtn)
-        refreshBtn.addEventListener("click", loadTicketFlow);
+        refreshBtn.addEventListener("click", () => {
+            void loadTicketFlow({ reason: "manual" });
+        });
+    const { overflowToggle, overflowDropdown, overflowNew, overflowRestart, overflowArchive } = els();
+    if (overflowToggle && overflowDropdown) {
+        const toggleMenu = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const isHidden = overflowDropdown.classList.contains("hidden");
+            overflowDropdown.classList.toggle("hidden", !isHidden);
+        };
+        const closeMenu = () => overflowDropdown.classList.add("hidden");
+        overflowToggle.addEventListener("pointerdown", toggleMenu);
+        overflowToggle.addEventListener("click", (e) => {
+            e.preventDefault(); // swallow synthetic click after pointerdown
+        });
+        overflowToggle.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" || e.key === " ")
+                toggleMenu(e);
+        });
+        // Close on outside click
+        document.addEventListener("pointerdown", (e) => {
+            if (!overflowDropdown.classList.contains("hidden") &&
+                !overflowToggle.contains(e.target) &&
+                !overflowDropdown.contains(e.target)) {
+                closeMenu();
+            }
+        });
+    }
+    if (overflowNew) {
+        overflowNew.addEventListener("click", () => {
+            const newBtn = document.getElementById("ticket-new-btn");
+            newBtn?.click();
+            overflowDropdown?.classList.add("hidden");
+        });
+    }
+    if (overflowRestart) {
+        overflowRestart.addEventListener("click", () => {
+            void restartTicketFlow();
+            overflowDropdown?.classList.add("hidden");
+        });
+    }
+    if (overflowArchive) {
+        overflowArchive.addEventListener("click", () => {
+            void archiveTicketFlow();
+            overflowDropdown?.classList.add("hidden");
+        });
+    }
     // Initialize reason click handler for modal
     initReasonModal();
     // Initialize live output panel
     initLiveOutputPanel();
     // Initialize dispatch panel toggle for medium screens
     initDispatchPanelToggle();
+    // Set up scroll listeners for fade indicator
+    const ticketList = document.getElementById("ticket-flow-tickets");
+    const dispatchHistory = document.getElementById("ticket-dispatch-history");
+    [ticketList, dispatchHistory].forEach((el) => {
+        if (el) {
+            el.addEventListener("scroll", updateScrollFade, { passive: true });
+        }
+    });
     const newThreadBtn = document.getElementById("ticket-chat-new-thread");
     if (newThreadBtn) {
         newThreadBtn.addEventListener("click", async () => {
@@ -1278,8 +1981,10 @@ export function initTicketFlow() {
     initTicketEditor();
     loadTicketFlow();
     registerAutoRefresh("ticket-flow", {
-        callback: loadTicketFlow,
-        tabId: null,
+        callback: async (ctx) => {
+            await loadTicketFlow(ctx);
+        },
+        tabId: "tickets",
         interval: CONSTANTS.UI?.AUTO_REFRESH_INTERVAL ||
             15000,
         refreshOnActivation: true,
@@ -1295,6 +2000,24 @@ export function initTicketFlow() {
     subscribe("tickets:updated", () => {
         void loadTicketFiles();
     });
+    // Update selection when editor opens a ticket
+    subscribe("ticket-editor:opened", (payload) => {
+        const data = payload;
+        if (data?.path) {
+            updateSelectedTicket(data.path);
+            return;
+        }
+        if (data?.index != null && ticketListCache?.tickets?.length) {
+            const match = ticketListCache.tickets.find((ticket) => ticket.index === data.index);
+            if (match?.path) {
+                updateSelectedTicket(match.path);
+            }
+        }
+    });
+    // Clear selection when editor is closed
+    subscribe("ticket-editor:closed", () => {
+        updateSelectedTicket(null);
+    });
     // Handle browser navigation (back/forward)
     window.addEventListener("popstate", () => {
         const params = getUrlParams();