@oar-sh/oar 0.9.9 → 0.9.10

package/server/public/index.html

@@ -587,6 +587,8 @@
   /* The display rule above outranks the UA [hidden] rule, same trap as the
      other [hidden] overrides in this file. */
   #pinned-messages-btn[hidden] { display: none; }
+  /* Same trap: without this the ⋯ trigger stays drawn as a dead button. */
+  #chat-actions-menu-btn[hidden] { display: none; }
   #cli-dot {
     width: 12px;
     height: 12px;
@@ -868,7 +870,8 @@
   /* The conversation context menu (context-menu.mjs): right-click / long press. */
   .context-menu {
     position: fixed;
-    z-index: 1200;
+    /* Above every modal: the explorer (10001, 12400 as a CWD picker) opens one too. */
+    z-index: 13000;
     min-width: 200px;
     max-width: min(320px, calc(100vw - 8px));
     padding: 4px;
@@ -1442,7 +1445,27 @@
   }
   .empty-state .icon { font-size: 3rem; margin-bottom: 12px; }
   .empty-state h3 { font-size: var(--fs-core-chat-title); margin-bottom: 8px; color: var(--text); }
-  .empty-state p { font-size: var(--fs-meta-md); line-height: 1.5; }
+  .empty-state p { font-size: var(--fs-meta-md); line-height: 1.5; max-width: 36em; }
+  /* The actions of the "no conversation open" screen: Settings, New chat, the
+     list on the phone. Same shapes as .summary-btn and #new-conv-btn. */
+  .empty-state-actions {
+    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;
+    margin-top: 18px;
+  }
+  .empty-state-btn {
+    border: 1px solid var(--border); background: var(--bg2); color: var(--text);
+    border-radius: 8px; height: 36px; padding: 0 14px; font-size: var(--fs-meta-md);
+    cursor: pointer;
+  }
+  .empty-state-btn:hover { border-color: var(--accent); color: var(--accent); }
+  .empty-state-btn.empty-state-btn-accent {
+    background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600;
+  }
+  .empty-state-btn.empty-state-btn-accent:hover { color: #000; opacity: 0.85; }
+  .empty-state-btn.empty-state-link {
+    border-color: transparent; background: transparent; color: var(--muted); text-decoration: underline;
+  }
+  .empty-state-btn.empty-state-link:hover { color: var(--accent); }
 
   .msg {
     display: flex;
@@ -2147,6 +2170,69 @@
     opacity: 1;
     transition: width 0.2s ease, background-size 0.2s ease, box-shadow 0.2s ease;
   }
+  /* Jump to the end of the transcript (transcript-jump-bottom-view.mjs).
+     Anchored to the composer's top edge, so it rides above the composer and
+     the background-task panel at whatever height they have, and above the
+     on-screen keyboard with them. Below the composer popups (z-index 30). */
+  #jump-to-bottom-btn {
+    position: absolute;
+    right: calc(20px + env(safe-area-inset-right, 0px));
+    bottom: calc(100% + 12px);
+    z-index: 25;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border-radius: 50%;
+    border: 1px solid var(--border);
+    background: var(--bg2);
+    color: var(--text);
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(6px);
+    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s, border-color 0.15s ease, color 0.15s ease;
+  }
+  #jump-to-bottom-btn.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s, border-color 0.15s ease, color 0.15s ease;
+  }
+  #jump-to-bottom-btn:hover,
+  #jump-to-bottom-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
+  .jump-to-bottom-icon {
+    font-size: 26px;
+    line-height: 1;
+    /* The arrowhead sits low in its em box. */
+    transform: translateY(-4px);
+  }
+  .jump-to-bottom-badge {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    box-sizing: border-box;
+    border-radius: 9px;
+    background: var(--accent);
+    color: #000;
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 18px;
+    text-align: center;
+  }
+  .jump-to-bottom-badge[hidden] { display: none; }
+  @media (prefers-reduced-motion: reduce) {
+    #jump-to-bottom-btn,
+    #jump-to-bottom-btn.visible { transition: none; }
+  }
   /* ── Context usage modal ── */
   .ctx-usage-model {
     font-size: 0.95rem;
@@ -2994,6 +3080,110 @@
   }
   .bg-task-stop:hover:not(:disabled) { border-color: #f85149; color: #f85149; }
   .bg-task-stop:disabled { opacity: 0.5; cursor: default; }
+  /* Sub-agent rows (reply bubble, viewer): the task panel's row grammar. The
+     title is a button that opens the agent's record in the viewer. */
+  .subagent-rows { display: flex; flex-direction: column; margin-top: 4px; }
+  .subagent-row-bubble { background: var(--bg3); border: 1px solid var(--border); }
+  .subagent-row-timeline { margin-top: 0; background: var(--bg3); border: 1px solid var(--border); }
+  .bg-task-desc.subagent-open {
+    display: block; -webkit-line-clamp: unset; background: none; border: 0; padding: 0; margin: 0;
+    font: inherit; color: var(--text); text-align: left; cursor: pointer;
+    text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
+  }
+  .bg-task-desc.subagent-open:hover, .bg-task-desc.subagent-open:focus-visible {
+    color: var(--accent); text-decoration-color: currentColor; outline: none;
+  }
+  .subagent-row-status.subagent-status-failed { color: #f85149; }
+  .subagent-row-status.subagent-status-completed { color: #3fb950; }
+  /* The sub-agent viewer: one agent's thoughts, tool calls and reply in order.
+     Below the file viewer, so a file opened from the record comes on top. */
+  #subagent-viewer-modal {
+    position: fixed; inset: 0; z-index: 10900; display: none;
+    align-items: center; justify-content: center;
+    background: rgba(0, 0, 0, 0.68); padding: 18px;
+  }
+  #subagent-viewer-modal.visible { display: flex; }
+  .subagent-viewer-dialog {
+    position: relative; width: min(980px, 100%); height: min(90vh, 1000px);
+    display: flex; flex-direction: column; overflow: hidden;
+    background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
+  }
+  .subagent-viewer-header {
+    display: flex; flex-direction: column; gap: 4px; padding: 10px 14px;
+    border-bottom: 1px solid var(--border); background: var(--bg3);
+  }
+  .subagent-viewer-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
+  #subagent-viewer-title { flex: 1; min-width: 0; margin: 0; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
+  #subagent-viewer-meta { color: var(--muted); font-size: var(--fs-meta-sm); overflow-wrap: anywhere; }
+  .subagent-viewer-btn {
+    flex-shrink: 0; border: 1px solid var(--border); background: var(--bg2); color: var(--text);
+    border-radius: 8px; height: 32px; padding: 0 10px; font-size: var(--fs-meta-sm); cursor: pointer;
+  }
+  .subagent-viewer-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+  #subagent-viewer-stop:hover:not(:disabled) { border-color: #f85149; color: #f85149; }
+  .subagent-viewer-btn:disabled { opacity: 0.5; cursor: default; }
+  .subagent-viewer-close { font-size: 1.2rem; line-height: 1; }
+  #subagent-viewer-parent {
+    align-self: flex-start; background: none; border: 0; padding: 0; color: var(--accent);
+    cursor: pointer; font-size: var(--fs-meta-sm);
+  }
+  #subagent-viewer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 14px 28px; }
+  #subagent-viewer-status { color: var(--muted); padding: 14px 0; font-size: var(--fs-meta-sm); }
+  #subagent-viewer-jump {
+    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
+    border: 1px solid var(--accent); background: var(--bg3); color: var(--accent);
+    border-radius: 999px; padding: 5px 14px; font-size: var(--fs-meta-sm); cursor: pointer;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
+  }
+  .sav-entry { margin: 6px 0; min-width: 0; }
+  .sav-entry details > summary {
+    cursor: pointer; display: flex; align-items: baseline; gap: 6px; min-width: 0; list-style: none;
+  }
+  .sav-entry details > summary::-webkit-details-marker { display: none; }
+  .sav-entry details > summary::before { content: '▸'; color: var(--muted); flex-shrink: 0; }
+  .sav-entry details[open] > summary::before { content: '▾'; }
+  .sav-call-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
+  .sav-kind { flex-shrink: 0; }
+  .sav-tool-name { font-weight: 600; flex-shrink: 0; }
+  .sav-summary-text, .sav-tool-summary {
+    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .sav-tool-summary { color: var(--muted); font-family: var(--mono, monospace); font-size: var(--fs-meta-sm); }
+  .sav-pre {
+    margin: 6px 0 0; padding: 8px 10px; max-height: 50vh; overflow: auto;
+    white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono, monospace);
+    font-size: var(--fs-meta-sm); background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
+  }
+  .sav-entry-tool_result { margin-left: 22px; color: var(--muted); font-size: var(--fs-meta-sm); }
+  .sav-entry-tool_result .sav-pre { color: var(--text); }
+  .sav-entry-tool_result.is-error .sav-result-label { color: #f85149; }
+  .sav-entry-thought { color: var(--muted); }
+  .sav-thought-body { padding: 4px 0 0 18px; color: var(--text); opacity: 0.85; }
+  .sav-text {
+    padding: 8px 12px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--border);
+    overflow-wrap: anywhere;
+  }
+  .sav-entry.is-open .sav-text::after,
+  .sav-entry-thought.is-open .sav-thought-body::after {
+    content: '▍'; margin-left: 2px; animation: bg-task-pulse 1s ease-in-out infinite;
+  }
+  /* Markdown in the record reads like a reply bubble. */
+  .sav-text p, .sav-thought-body p { margin: 0 0 0.5em; }
+  .sav-text p:last-child, .sav-thought-body p:last-child { margin-bottom: 0; }
+  .sav-text ul, .sav-text ol, .sav-thought-body ul, .sav-thought-body ol { padding-left: 1.4em; margin: 0 0 0.5em; }
+  .sav-text h1, .sav-text h2, .sav-text h3 { margin: 0.5em 0 0.25em; font-size: 1em; }
+  .sav-text pre, .sav-thought-body pre { margin: 0.5em 0; border-radius: 8px; max-width: 100%; overflow-x: auto; }
+  .sav-text code:not(pre code), .sav-thought-body code:not(pre code) {
+    background: var(--inline-code-bg); padding: 2px 6px; border-radius: 4px; font-size: 0.875em; overflow-wrap: anywhere;
+  }
+  .sav-note { color: var(--muted); font-size: var(--fs-meta-sm); font-style: italic; }
+  .sav-note-failed { color: #f85149; }
+  .sav-muted { color: var(--muted); }
+  @media (max-width: 680px) {
+    #subagent-viewer-modal { padding: 0; }
+    .subagent-viewer-dialog { width: 100%; height: 100%; border: 0; border-radius: 0; }
+    #subagent-viewer-body { padding: 8px 10px 28px; }
+  }
   /* Preview cards: same row grammar as a background task, with a link-shaped
      primary action. Shared by the composer panel and the settings list. */
   .preview-row {
@@ -3115,6 +3305,102 @@
     overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
   }
   #chat-title-origin button.conv-origin-agent { padding: 3px 0; }
+  /* Relay events: the event rows the relay writes into a watcher's
+     conversation (never a bubble of the user's), the "watching" chip with its
+     list, and the "watched" badge. */
+  .msg.relay-event { align-self: stretch; max-width: 100%; align-items: stretch; }
+  .relay-event-row {
+    border: 1px dashed var(--border); border-left: 3px solid var(--accent);
+    border-radius: 6px; background: var(--bg2); color: var(--muted);
+    font-size: var(--fs-meta-xs); padding: 2px 8px;
+  }
+  .relay-event-row.relay-event-urgent { border-left-color: var(--warn); }
+  .relay-event-summary {
+    cursor: pointer; display: flex; gap: 8px; align-items: baseline; min-width: 0;
+    padding: 3px 0; list-style-position: inside;
+  }
+  .relay-event-tag {
+    flex: 0 0 auto; text-transform: uppercase; letter-spacing: 0.04em;
+    font-size: var(--fs-ui-chip); color: var(--accent);
+  }
+  .relay-event-urgent .relay-event-tag { color: var(--warn); }
+  .relay-event-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .relay-event-time { flex: 0 0 auto; }
+  .relay-event-lines { margin: 2px 0 4px; padding-left: 18px; }
+  .relay-event-line { margin: 2px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
+  .relay-event-line.relay-event-question-asked,
+  .relay-event-line.relay-event-error,
+  .relay-event-line.relay-event-task-failed,
+  .relay-event-line.relay-event-stalled { color: var(--text, inherit); }
+  /* Agent exchanges: an agent's prompt and this session's reply folded into
+     one row in the event rows' look (agent-exchange-fold-view.mjs). The row
+     is the first child of the prompt's own node; closed, the prompt's bubble
+     and the exchange's other rows (the reply, the live bubble) are hidden.
+     The prompt's node spans the pane for the row; its bubble keeps a user
+     bubble's width. */
+  .msg.agent-exchange-head { align-self: stretch; max-width: 100%; }
+  .msg.agent-exchange-head > .msg-bubble { max-width: 82%; }
+  .msg.agent-exchange-head.agent-exchange-closed > .msg-bubble,
+  .msg.agent-exchange-head.agent-exchange-closed > .msg-label,
+  #messages > .msg.agent-exchange-member.agent-exchange-closed { display: none; }
+  .agent-exchange-row {
+    align-self: stretch; min-width: 0;
+    border: 1px dashed var(--border); border-left: 3px solid var(--accent);
+    border-radius: 6px; background: var(--bg2); color: var(--muted);
+    font-size: var(--fs-meta-xs); padding: 2px 8px;
+  }
+  .msg.agent-exchange-head:not(.agent-exchange-closed) > .agent-exchange-row { margin-bottom: 6px; }
+  .agent-exchange-summary {
+    cursor: pointer; display: flex; gap: 8px; align-items: baseline; min-width: 0;
+    padding: 3px 0; list-style: none;
+  }
+  .agent-exchange-summary::-webkit-details-marker { display: none; }
+  .agent-exchange-summary::before { content: '▸'; flex: 0 0 auto; color: var(--accent); }
+  .agent-exchange-row[open] > .agent-exchange-summary::before { content: '▾'; }
+  .agent-exchange-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .agent-exchange-status,
+  .agent-exchange-time { flex: 0 0 auto; }
+  .agent-exchange-status { color: var(--text, inherit); }
+  .agent-exchange-row.agent-exchange-failed,
+  .agent-exchange-row.agent-exchange-stopped { border-left-color: var(--warn); }
+  .agent-exchange-failed .agent-exchange-status,
+  .agent-exchange-stopped .agent-exchange-status { color: var(--warn); }
+  @media (max-width: 680px) {
+    .msg.agent-exchange-head > .msg-bubble { max-width: 95%; }
+  }
+  #chat-title-relay-events {
+    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px;
+    font-size: var(--fs-meta-xs); line-height: 1.2; color: var(--muted); position: relative;
+  }
+  #chat-title-relay-events[hidden] { display: none; }
+  .relay-watch-panel[hidden] { display: none; }
+  .relay-watch-chip {
+    font: inherit; color: var(--accent); background: transparent; cursor: pointer;
+    border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px;
+  }
+  .relay-watch-panel {
+    position: fixed; top: 0; left: 0; z-index: 60; overflow-y: auto; box-sizing: border-box;
+    min-width: min(260px, calc(100vw - 16px)); max-width: min(calc(100vw - 16px), 480px);
+    font-size: var(--fs-meta-xs); line-height: 1.2; color: var(--muted);
+    background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); padding: 6px;
+  }
+  .relay-watch-list { list-style: none; margin: 0; padding: 0; }
+  .relay-watch-item {
+    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center;
+    padding: 6px 4px; border-bottom: 1px solid var(--border);
+  }
+  .relay-watch-item:last-child { border-bottom: none; }
+  .relay-watch-what { color: var(--text, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .relay-watch-events { grid-column: 1; font-size: var(--fs-ui-chip); }
+  .relay-watch-unsubscribe {
+    grid-column: 2; grid-row: 1 / span 2; font: inherit; cursor: pointer;
+    color: var(--danger); background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px;
+  }
+  .conv-watched-badge {
+    flex: 0 0 auto; font-size: var(--fs-ui-chip); color: var(--accent);
+    border: 1px solid var(--border); border-radius: 8px; padding: 0 5px;
+  }
   /* Agent sessions (Settings → Relays). The slider spans the row so a thumb
      has room to travel at phone width, with a taller touch area than the
      track itself. */
@@ -4069,6 +4355,28 @@
     border-color: var(--accent);
     color: var(--accent);
   }
+  /* The one main action of a dialog, in #new-conv-btn's colours. */
+  .summary-btn.summary-btn-accent {
+    background: var(--accent);
+    color: #000;
+    border-color: var(--accent);
+    font-weight: 600;
+  }
+  .summary-btn.summary-btn-accent:hover { opacity: 0.85; }
+  #new-conversation-open-settings[hidden] { display: none; }
+  /* New Chat with no provider ready: the note above the buttons. */
+  .new-conversation-setup-note {
+    margin-top: 14px;
+    padding: 10px 12px;
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--accent);
+    border-radius: 8px;
+    background: var(--bg3);
+    color: var(--text);
+    font-size: var(--fs-meta-md);
+    line-height: 1.5;
+  }
+  .new-conversation-setup-note[hidden] { display: none; }
   .summary-close {
     width: 32px;
     padding: 0;
@@ -5050,6 +5358,43 @@
     font-size: var(--fs-meta-md);
     padding: 10px 6px;
   }
+  /* Explorer edits: the New-folder row at the top of the folder pane and the in-place rename. */
+  .repo-tree-summary, .repo-entry-row, .repo-card { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
+  .repo-inline-edit {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    align-items: center;
+    gap: 8px;
+    margin: 0 0 10px;
+    padding: 8px 10px;
+    border: 1px solid var(--accent);
+    border-radius: 10px;
+    background: rgba(88, 166, 255, 0.08);
+  }
+  .repo-inline-edit input,
+  .repo-rename-input,
+  .repo-delete-confirm-input {
+    min-width: 0;
+    width: 100%;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg);
+    color: var(--text);
+    padding: 6px 8px;
+    font: inherit;
+    font-size: var(--fs-meta-md);
+  }
+  .repo-inline-edit input:focus, .repo-rename-input:focus, .repo-delete-confirm-input:focus { outline: none; border-color: var(--accent); }
+  .repo-inline-edit-error { grid-column: 1 / -1; color: var(--danger); font-size: var(--fs-meta-xs); min-height: 0; }
+  .repo-inline-edit-error:empty { display: none; }
+  .repo-rename-input { display: inline-block; width: auto; max-width: 100%; padding: 2px 6px; }
+  .repo-tree-summary .repo-rename-input { width: calc(100% - 2.2em); }
+  .repo-delete-confirm-label { display: block; margin: 10px 0 0; font-size: var(--fs-meta-md); color: var(--muted); }
+  .repo-delete-confirm-input { margin-top: 6px; }
+  @media (max-width: 720px) {
+    .repo-inline-edit { grid-template-columns: auto minmax(0, 1fr); }
+    .repo-inline-edit .repo-browser-btn { grid-column: span 1; }
+  }
 
   .msg-mode {
     display: inline-block; font-size: var(--fs-ui-chip); background: var(--bg3);
@@ -5362,6 +5707,10 @@
       pointer-events: auto;
     }
     #sidebar-resizer { display: none; }
+    /* The "no conversation open" actions stack on the phone. */
+    .empty-state { padding: 16px; }
+    .empty-state-actions { flex-direction: column; align-items: stretch; width: min(100%, 320px); }
+    .empty-state-btn { height: 40px; }
     #fullscreen-btn { display: inline-flex; align-items: center; justify-content: center; }
     #sidebar-overlay { display: block; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
     #sidebar-overlay.visible { opacity: 1; pointer-events: all; }
@@ -5542,6 +5891,7 @@
     .chat-actions-menu-item,
     .chat-actions-menu-meta { min-height: 30px; }
     #input-area { padding: 2px 10px calc(6px + env(safe-area-inset-bottom, 0px)); }
+    #jump-to-bottom-btn { width: 44px; height: 44px; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(100% + 10px); }
     .input-row {
       display: flex;
       flex-wrap: wrap;
@@ -6058,7 +6408,7 @@
         <button id="message-search-btn" class="header-icon-btn" onclick="openMessageSearchModal()" title="Search messages" aria-label="Search messages">🔍</button>
         <button id="context-btn" class="header-icon-btn" onclick="showContext()" title="Check current context" aria-label="Check current context">🧠</button>
         <div id="chat-actions-menu-wrap">
-          <button id="chat-actions-menu-btn" class="header-icon-btn" type="button" title="Conversation actions" aria-label="Conversation actions" aria-haspopup="menu" aria-expanded="false">⋯</button>
+          <button id="chat-actions-menu-btn" class="header-icon-btn" type="button" title="Menu" aria-label="Menu" aria-haspopup="menu" aria-expanded="false">⋯</button>
           <div id="chat-actions-menu" role="menu" hidden>
             <div id="chat-menu-pwa-version" class="chat-actions-menu-meta chat-actions-menu-meta-stacked" aria-hidden="true"><span class="chat-actions-menu-meta-primary">PWA shell version</span><span class="chat-actions-menu-meta-secondary" id="chat-menu-pwa-version-value">v?</span></div>
             <div id="chat-menu-queue-status" class="chat-actions-menu-meta chat-actions-menu-meta-stacked" aria-hidden="true"><div class="chat-actions-menu-meta-top"><span class="chat-actions-menu-meta-primary">Queue</span><button id="chat-menu-empty-queue" class="chat-actions-menu-meta-label" type="button">🚮 Empty queue</button></div><span class="chat-actions-menu-meta-secondary" id="chat-menu-queue-status-value">pending=?, processing=?, parked=?</span></div>
@@ -6085,13 +6435,15 @@
       <button id="pending-question-banner" onclick="openPendingQuestionFromBanner()" title="Open pending question"></button>
     </div>
     <div id="messages">
+      <!-- Replaced on start by conversation-view.js (no-conversation-state.mjs),
+           which knows whether a provider is ready and whether chats exist. -->
       <div class="empty-state">
         <div class="icon">💬</div>
-        <h3>No conversation selected</h3>
-        <p>Click <b>+ New Conversation</b> to start chatting with your Copilot CLI</p>
+        <h3>No conversation open</h3>
       </div>
     </div>
     <div id="input-area">
+      <button id="jump-to-bottom-btn" type="button" title="Jump to the latest message" aria-label="Jump to the latest message"><span class="jump-to-bottom-icon" aria-hidden="true">⌄</span><span class="jump-to-bottom-badge" hidden></span></button>
       <div id="offline-banner">⚠️ CLI is offline — messages will queue until it reconnects</div>
       <div id="model-banner"></div>
       <div id="usage-limit-banner" role="status" aria-live="polite" hidden></div>
@@ -6167,6 +6519,7 @@
       <button id="repo-toggle-hidden-btn" class="repo-browser-btn" onclick="toggleRepoBrowserHidden()">Hidden: Off</button>
       <button id="repo-toggle-heavy-btn" class="repo-browser-btn" onclick="toggleRepoBrowserHeavy()">Heavy: Off</button>
       <button class="repo-browser-btn" onclick="refreshRepoBrowser()">Refresh</button>
+      <button id="repo-new-folder-btn" class="repo-browser-btn" onclick="startRepoNewFolder()" title="Create a folder inside the open folder">📁+ New folder</button>
     </div>
     <div class="repo-browser-layout">
       <section class="repo-pane">
@@ -6356,6 +6709,17 @@
           >
         </div>
         <div class="settings-help" style="margin-top: 6px;">How long background tasks may keep a session alive after its turn ends: backgrounded commands, subagents and monitors on Claude; background agents and detached shells on Copilot's SDK engine. When the limit is reached the tasks are stopped. Set to 0 for no limit — tasks then run until they finish or you stop them from the composer panel.</div>
+        <div class="settings-row" style="margin-top: 12px; margin-bottom: 0;">
+          <label for="subagent-record-retention-select">Keep sub-agent tool output</label>
+          <select id="subagent-record-retention-select" onchange="updateSubagentRecordRetentionSetting(this.value)" aria-label="Keep sub-agent tool output">
+            <option value="7">7 days</option>
+            <option value="14">14 days</option>
+            <option value="30">30 days</option>
+            <option value="90" selected>90 days</option>
+            <option value="0">Always</option>
+          </select>
+        </div>
+        <div class="settings-help" style="margin-top: 6px;">A sub-agent's record keeps every tool call's full input and the first 4 KB of each result. After this many days the relay removes them from finished agents, once a day; the thoughts, the reply, notes and the one-line summary of each call stay. Always keeps everything.</div>
         <div id="windows-autostart-setting" hidden>
           <div class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
             <label>Autostart (Windows)</label>
@@ -7215,8 +7579,13 @@
         <select id="new-conversation-size-select"></select>
         <div id="new-conversation-size-status" style="margin-top:8px;font-size:0.78rem;color:var(--muted);">Image size used for generated outputs in this chat.</div>
       </div>
+      <!-- No provider known to be ready (journal-view.js): the note says so and
+           Settings is the main button; Start stays as "anyway", because the
+           Copilot signal can be wrong. -->
+      <div id="new-conversation-setup-note" class="new-conversation-setup-note" role="status" hidden></div>
       <div class="summary-modal-actions">
         <button type="button" class="summary-btn" onclick="closeNewConversationModelModal()">Cancel</button>
+        <button id="new-conversation-open-settings" type="button" class="summary-btn summary-btn-accent" hidden>Open Settings → Providers</button>
         <button id="new-conversation-model-confirm" type="button" class="summary-btn" onclick="confirmNewConversationModel()">Start chat</button>
       </div>
     </div>
@@ -7267,6 +7636,28 @@
   </div>
 </div>
 
+<!-- Sub-agent viewer: one sub-agent's thoughts, tool calls with their results
+     and reply, in order, live while it runs (subagent-viewer.mjs). -->
+<div id="subagent-viewer-modal" aria-hidden="true">
+  <div class="subagent-viewer-dialog" role="dialog" aria-modal="true" aria-labelledby="subagent-viewer-title">
+    <div class="subagent-viewer-header">
+      <button id="subagent-viewer-parent" type="button" hidden></button>
+      <div class="subagent-viewer-title-row">
+        <span aria-hidden="true">🤖</span>
+        <h2 id="subagent-viewer-title">Sub-agent</h2>
+        <button id="subagent-viewer-stop" class="subagent-viewer-btn" type="button" hidden>Stop</button>
+        <button class="subagent-viewer-btn subagent-viewer-close" type="button" aria-label="Close">×</button>
+      </div>
+      <div id="subagent-viewer-meta"></div>
+    </div>
+    <div id="subagent-viewer-body">
+      <div id="subagent-viewer-timeline"></div>
+      <div id="subagent-viewer-status"></div>
+    </div>
+    <button id="subagent-viewer-jump" type="button" hidden>New entries ↓</button>
+  </div>
+</div>
+
 <!-- Fullscreen file viewer. The content fills the screen; the chrome bars
      float over it and a tap on the content shows or hides them. -->
 <div id="file-preview-modal" aria-hidden="true">

package/server/repositories/message-repository.mjs

@@ -346,6 +346,12 @@ export function createMessageRepository(db) {
         //
         // A turn blocked on an unanswered AskUserQuestion is never stale — it is
         // waiting on the human, and relay_questions carries its own expiry.
+        //
+        // The ceiling counts from the last human interaction with the turn, not
+        // from its start: answering a question restarts the clock. Otherwise an
+        // interview that waited hours for its answers would be cut off by the
+        // ceiling the moment the last answer arrived (live 2026-10-10: a
+        // five-question interview lost its reply that way).
         listRecoverableProcessing: db.prepare(`
           SELECT id, conversation_id, kind, relay_mode, model, retry_count, consumed_at
           FROM queue
@@ -353,7 +359,13 @@ export function createMessageRepository(db) {
             AND COALESCE(kind, '') != 'continuation'
             AND (
               COALESCE(owner_last_claimed_at, processing_at, timestamp) < @inactiveBefore
-              OR (@ceilingBefore IS NOT NULL AND COALESCE(processing_at, timestamp) < @ceilingBefore)
+              OR (
+                @ceilingBefore IS NOT NULL
+                AND MAX(
+                  COALESCE(processing_at, timestamp),
+                  COALESCE((SELECT MAX(answered_at) FROM relay_questions WHERE queue_id = queue.id), '')
+                ) < @ceilingBefore
+              )
             )
             AND id NOT IN (SELECT queue_id FROM relay_questions WHERE status = 'pending')
         `),
@@ -431,15 +443,29 @@ export function createMessageRepository(db) {
         // A continuation with no live worker can only be torn down — replaying
         // it as deliverable work would send the CLI's own bookkeeping text back
         // to the CLI as a user prompt.
+        //
+        // Same staleness rules as listRecoverableProcessing: a continuation
+        // waiting on an unanswered question is never stale, and an answer
+        // restarts the ceiling clock. A background-agent interview hangs its
+        // question cards on the continuation row, so without this a long
+        // interview was torn down by the ceiling while the human was still
+        // answering (live 2026-10-10).
         listStaleProcessingContinuations: db.prepare(`
-          SELECT id, conversation_id
+          SELECT id, conversation_id, timestamp, processing_at, owner_last_claimed_at
           FROM queue
           WHERE status = 'processing'
             AND kind = 'continuation'
             AND (
               COALESCE(owner_last_claimed_at, processing_at, timestamp) < @inactiveBefore
-              OR (@ceilingBefore IS NOT NULL AND COALESCE(processing_at, timestamp) < @ceilingBefore)
+              OR (
+                @ceilingBefore IS NOT NULL
+                AND MAX(
+                  COALESCE(processing_at, timestamp),
+                  COALESCE((SELECT MAX(answered_at) FROM relay_questions WHERE queue_id = queue.id), '')
+                ) < @ceilingBefore
+              )
             )
+            AND id NOT IN (SELECT queue_id FROM relay_questions WHERE status = 'pending')
         `),
         listQueueForPauseDrop: db.prepare(`SELECT id, conversation_id FROM queue WHERE status IN ('pending', 'processing', 'parked')`),
         // Authoritative "is a turn in flight" signal for the conversation list.

package/server/repositories/question-repository.mjs

@@ -1,7 +1,13 @@
 'use strict';
 
+import { createSubagentTimelineStatements } from './subagent-timeline-statements.mjs';
+
 export function createQuestionRepository(db) {
+    const subagentTimeline = createSubagentTimelineStatements(db);
+    const runColumns = subagentTimeline.subagentRunSelectColumns;
+    const runColumnsAs = (alias) => runColumns.split(', ').map((column) => `${alias}.${column}`).join(', ');
     return {
+        ...subagentTimeline,
         // relay questions
         insertQuestion: db.prepare(`INSERT INTO relay_questions (id, queue_id, conversation_id, message_id, relay_mode, prompt, choices, request, request_schema, status, answer, structured_answer, sdk_session_id, owner_worker_id, continuation_id, continuation_question_id, created_at, answered_at, expires_at, attempt_id) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, 'pending', NULL, NULL, ?, ?, ?, ?, ?, NULL, ?, ?)`),
         getQuestion:    db.prepare(`SELECT * FROM relay_questions WHERE id = ?`),
@@ -99,7 +105,7 @@ export function createQuestionRepository(db) {
           WHERE id = ?
         `),
         listSubagentRunsByQueueMessage: db.prepare(`
-          SELECT id, queue_message_id, conversation_id, parent_subagent_id, display_name, status, started_at, updated_at, completed_at
+          SELECT ${runColumns}
           FROM subagent_runs
           WHERE queue_message_id = ?
           ORDER BY started_at ASC, id ASC
@@ -108,7 +114,7 @@ export function createQuestionRepository(db) {
         // abort) also ends its subagent runs — nothing else ever will, and an
         // un-reconciled row renders as a bubble stuck "running" forever.
         listRunningSubagentRunsByQueueMessage: db.prepare(`
-          SELECT id, conversation_id, parent_subagent_id, display_name
+          SELECT ${runColumns}
           FROM subagent_runs
           WHERE queue_message_id = ? AND status = 'running'
         `),
@@ -121,7 +127,7 @@ export function createQuestionRepository(db) {
           WHERE queue_message_id = ? AND status = 'running'
         `),
         listSubagentRunsByResponse: db.prepare(`
-          SELECT sr.id, sr.queue_message_id, sr.conversation_id, sr.parent_subagent_id, sr.display_name, sr.status, sr.started_at, sr.updated_at, sr.completed_at
+          SELECT ${runColumnsAs('sr')}
           FROM subagent_runs sr
           WHERE sr.queue_message_id IN (
             SELECT id FROM queue WHERE response_message_id = ?

package/server/repositories/remote-relay-repository.mjs

@@ -29,7 +29,10 @@ export function createRemoteRelayRepository(db) {
   const hasUnlock = db.prepare(`SELECT 1 FROM conversation_remote_relay_unlocks WHERE conversation_id = ? AND remote_relay_id = ?`);
   const listUnlocks = db.prepare(`SELECT remote_relay_id, message_id, created_at FROM conversation_remote_relay_unlocks WHERE conversation_id = ? ORDER BY created_at ASC`);
   const insertUnlock = db.prepare(`INSERT OR IGNORE INTO conversation_remote_relay_unlocks (conversation_id, remote_relay_id, message_id, created_at) VALUES (?, ?, ?, ?)`);
-  const deleteUnlocksForRelay = db.prepare(`DELETE FROM conversation_remote_relay_unlocks WHERE remote_relay_id = ?`);
+  // The relay's unlocks and the approvals stored under its id (`<id>:watch`).
+  const deleteUnlocksForRelay = db.prepare(`
+    DELETE FROM conversation_remote_relay_unlocks WHERE remote_relay_id = ? OR substr(remote_relay_id, 1, length(?) + 1) = ? || ':'
+  `);
   const deleteUnlocksForConversation = db.prepare(`DELETE FROM conversation_remote_relay_unlocks WHERE conversation_id = ?`);
   const setMessageOrigin = db.prepare(`UPDATE messages SET origin_json = ? WHERE id = ?`);
   const getMessageOrigin = db.prepare(`SELECT origin_json FROM messages WHERE id = ?`);
@@ -101,7 +104,8 @@ export function createRemoteRelayRepository(db) {
         .map((row) => String(row.id));
     },
     forgetRelay(remoteRelayId) {
-      return deleteUnlocksForRelay.run(String(remoteRelayId || '')).changes;
+      const id = String(remoteRelayId || '');
+      return deleteUnlocksForRelay.run(id, id, id).changes;
     },
     forgetConversation(conversationId) {
       return deleteUnlocksForConversation.run(String(conversationId || '')).changes;