@xingjisoft/neutrino 0.1.5 → 0.1.7

package/web/app.js

@@ -1,4 +1,5 @@
 import { createSettingsUI } from "./settings.js";
+import { turnAnswerIndex, turnFolds, turnPreview, turnRanges } from "./turns.js";
 
 // Neutrino web UI — a dependency-free single page app.
 //
@@ -105,6 +106,8 @@ function showGate(message = "") {
 }
 
 const el = {
+  app: document.getElementById("app"),
+  back: document.getElementById("back-to-menu"),
   sessions: document.getElementById("sessions"),
   status: document.getElementById("status"),
   refresh: document.getElementById("refresh"),
@@ -128,6 +131,8 @@ const state = {
   collapsed: new Set(),
   expanded: new Set(),
   openTools: new Set(),
+  // Turns the reader expanded; a finished turn is folded unless listed here.
+  openTurns: new Set(),
   openContext: null,
 };
 
@@ -418,12 +423,23 @@ function renderSession(session) {
   item.addEventListener("click", () => {
     if (session.liveKey) selectLive(session.liveKey);
     else if (session.id) selectFile(session.id);
+    else return;
+    setConversationView(true);
   });
   return item;
 }
 
 // ------------------------------------------------------------------- select
 
+// Only explicit navigation changes the mobile pane. Background refreshes and
+// live-to-saved transitions must not take the user away from the menu.
+function setConversationView(open) {
+  el.app.classList.toggle("conversation-open", open);
+  if (!window.matchMedia("(max-width: 760px)").matches) return;
+  if (open) el.back.focus();
+  else (el.sessions.querySelector(".session.selected") || el.refresh).focus();
+}
+
 function resetMessagePane(text) {
   el.messages.innerHTML = "";
   const empty = document.createElement("div");
@@ -439,6 +455,7 @@ async function selectLive(key) {
   state.snapshot = null;
   state.lastSessionId = null;
   state.openTools.clear();
+  state.openTurns.clear();
   state.openContext = null;
   renderSidebar();
   el.controls.innerHTML = "";
@@ -495,6 +512,7 @@ async function selectFile(id) {
   state.selection = { kind: "file", id };
   state.snapshot = null;
   state.openTools.clear();
+  state.openTurns.clear();
   state.openContext = null;
   renderSidebar();
   el.controls.innerHTML = "";
@@ -521,7 +539,7 @@ function renderFile(data) {
   el.title.textContent = firstUserMessage(messages) || "Conversation";
   el.sub.textContent = [data.cwd, data.model, data.provider].filter(Boolean).join(" · ");
   preferences.showConversation(data, `file:${data.id}`);
-  renderMessageList(messages, null, { readOnly: true, context: data.context });
+  renderMessageList(messages, null, { readOnly: true, context: data.context, active: false });
   renderFileControls(data);
 }
 
@@ -728,7 +746,13 @@ function renderLive() {
   preferences.showConversation(snapshot, `live:${snapshot.key}`);
   renderControls(snapshot);
   renderApproval(snapshot);
-  renderMessageList(snapshot.messages ?? [], snapshot.streamingContent, { readOnly: false, context: snapshot.context });
+  renderMessageList(snapshot.messages ?? [], snapshot.streamingContent, {
+    readOnly: false,
+    context: snapshot.context,
+    // The turn in flight must stay readable: only a finished turn folds. A
+    // paused turn is unfinished by the user's own choice, so it stays open too.
+    active: Boolean(snapshot.busy || snapshot.paused),
+  });
 }
 
 async function changeApprovalMode(key, mode) {
@@ -862,9 +886,24 @@ function renderMessageList(messages, streaming, options) {
     });
     el.messages.appendChild(details);
   }
-  original.forEach((message, index) => {
-    if (index >= end) el.messages.appendChild(renderMessage(message, index));
-  });
+  // Render the tail one turn at a time: a finished turn folds its work behind a
+  // summary line and keeps its reply; a running one stays fully open. The turn in
+  // flight is the last one, so `active` decides its state; a turn cut in half by
+  // the compressed prefix is rendered as plain messages instead.
+  const turns = turnRanges(original);
+  const running = options?.active && turns.length > 0 ? turns[turns.length - 1].start : -1;
+  for (const turn of turns) {
+    const from = Math.max(turn.start, end);
+    if (from >= turn.end) continue;
+    const body = original.slice(turn.start, turn.end);
+    if (from === turn.start && turn.start !== running && turnFolds(body)) {
+      el.messages.appendChild(renderTurnFold(turn.start, body));
+      continue;
+    }
+    for (let index = from; index < turn.end; index++) {
+      el.messages.appendChild(renderMessage(original[index], index));
+    }
+  }
 
   if (streaming !== null && streaming !== undefined && streaming !== "") {
     const block = renderMessage({ role: "assistant", content: streaming }, -1);
@@ -918,6 +957,79 @@ function renderMessage(message, index) {
   return article;
 }
 
+/**
+ * A finished turn: its work folded behind one control line, its reply always on
+ * screen below it. The folded messages are rendered on first open and dropped
+ * again on close, so a long transcript costs nothing until the reader asks for
+ * it. Nothing is lost either way: this is presentation only, and the saved
+ * transcript always holds every message.
+ */
+function renderTurnFold(start, messages) {
+  // The reply is never folded away, so a turn renders as a group: the fold (the
+  // prompt line plus the work it hides) and, right below it, the answer itself.
+  const reply = turnAnswerIndex(messages);
+  const group = document.createElement("div");
+  group.className = "turn-group";
+
+  const details = document.createElement("details");
+  details.className = "turn";
+  details.open = state.openTurns.has(start);
+
+  const hidden = reply < 0 ? messages.length : messages.length - 1;
+  const summary = document.createElement("summary");
+  const chevron = document.createElement("span");
+  chevron.className = "turn-chevron";
+  chevron.textContent = "▸";
+  const you = document.createElement("span");
+  you.className = "turn-you";
+  you.textContent = `You: ${truncate(turnPreview(messages, "user"), 110)}`;
+  const meta = document.createElement("span");
+  meta.className = "turn-meta";
+  meta.textContent = `${hidden} of ${messages.length} message${messages.length === 1 ? "" : "s"} folded`;
+  // The hint cannot live in the static text: it says the opposite once open.
+  const hint = document.createElement("span");
+  hint.className = "turn-hint";
+  meta.appendChild(hint);
+  summary.appendChild(chevron);
+  summary.appendChild(you);
+  summary.appendChild(meta);
+  details.appendChild(summary);
+  group.appendChild(details);
+
+  const syncHint = () => {
+    hint.textContent = details.open ? " — click to collapse" : " — click to expand";
+  };
+  syncHint();
+
+  const body = document.createElement("div");
+  body.className = "turn-messages";
+  details.appendChild(body);
+  const populate = () => {
+    if (body.childNodes.length) return;
+    messages.forEach((message, offset) => {
+      if (offset === reply) return; // the answer is never inside the fold
+      body.appendChild(renderMessage(message, start + offset));
+    });
+  };
+  if (details.open) populate();
+  details.addEventListener("toggle", () => {
+    // Detached disclosures can emit a delayed toggle during a stream repaint.
+    if (!details.isConnected) return;
+    if (details.open) {
+      state.openTurns.add(start);
+      populate();
+    } else {
+      state.openTurns.delete(start);
+      body.replaceChildren();
+    }
+    syncHint();
+  });
+  // The answer comes with the fold, so a finished exchange ends on its reply
+  // even while the work that produced it stays hidden.
+  if (reply >= 0) group.appendChild(renderMessage(messages[reply], start + reply));
+  return group;
+}
+
 function firstUserMessage(messages) {
   for (const message of messages) {
     if (message.role === "user" && message.content) {
@@ -983,6 +1095,7 @@ function autosize() {
 // --------------------------------------------------------------------- init
 
 el.refresh.addEventListener("click", () => loadOverview());
+el.back.addEventListener("click", () => setConversationView(false));
 el.send.addEventListener("click", sendMessage);
 el.input.addEventListener("input", autosize);
 el.input.addEventListener("keydown", (event) => {

package/web/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
     <meta name="color-scheme" content="dark" />
     <title>Neutrino</title>
     <link rel="stylesheet" href="style.css" />
@@ -24,6 +24,9 @@
 
       <main id="main">
         <header id="main-header" class="main-header">
+          <button id="back-to-menu" class="icon-btn back-to-menu" type="button" title="Back to conversations" aria-label="Back to conversations" aria-controls="sidebar">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 5-7 7 7 7M5 12h14" /></svg>
+          </button>
           <div class="main-title">
             <h1 id="session-title">Select a conversation</h1>
             <div id="session-sub" class="sub"></div>

package/web/style.css

@@ -51,7 +51,8 @@ button {
 #app {
   display: flex;
   height: 100vh;
-  width: 100vw;
+  height: 100dvh;
+  width: 100%;
 }
 
 /* ---------------------------------------------------------------- sidebar */
@@ -68,6 +69,7 @@ button {
 
 .brand {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   gap: 10px;
   padding: 14px 14px 12px;
@@ -137,6 +139,7 @@ button {
 
 .sessions {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
   padding: 8px 8px 24px;
 }
@@ -239,6 +242,7 @@ button {
 
 .session-meta {
   display: flex;
+  flex-wrap: wrap;
   gap: 10px;
   margin-top: 2px;
   font-size: 10px;
@@ -285,6 +289,7 @@ button {
   display: flex;
   flex-direction: column;
   min-width: 0;
+  min-height: 0;
   background:
     radial-gradient(1200px 500px at 80% -10%, rgba(92, 200, 255, 0.05), transparent 60%),
     var(--bg);
@@ -292,6 +297,7 @@ button {
 
 .main-header {
   display: flex;
+  flex-shrink: 0;
   align-items: flex-start;
   gap: 16px;
   padding: 14px 22px 12px;
@@ -305,6 +311,10 @@ button {
   flex: 1;
 }
 
+.back-to-menu {
+  display: none;
+}
+
 .main-title h1 {
   margin: 0;
   font-size: 14px;
@@ -410,6 +420,7 @@ button {
 
 .messages {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
   padding: 22px clamp(16px, 6vw, 120px) 28px;
 }
@@ -586,10 +597,84 @@ button {
   margin-bottom: 18px;
 }
 
+/* A finished turn: its work behind one control line, its reply always below. */
+.turn-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.turn {
+  border: 1px dashed var(--border-soft);
+  border-radius: var(--radius);
+  padding: 8px 12px;
+  margin-bottom: 14px;
+}
+
+.turn > summary {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.turn > summary::-webkit-details-marker {
+  display: none;
+}
+
+.turn-chevron {
+  flex: none;
+  display: inline-block;
+  color: var(--yellow);
+  transition: transform 0.15s;
+}
+
+.turn-you {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--user);
+}
+
+.turn-meta {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--muted-2);
+  font-size: 11px;
+}
+
+.turn-hint {
+  color: var(--muted);
+}
+
+.turn[open] > summary {
+  margin-bottom: 14px;
+}
+
+.turn[open] .turn-chevron {
+  transform: rotate(90deg);
+}
+
+.turn-messages {
+  display: flex;
+  flex-direction: column;
+}
+
+.turn-messages > .message:last-child {
+  margin-bottom: 0;
+}
+
 /* --------------------------------------------------------------- composer */
 
 .composer {
   display: flex;
+  flex-shrink: 0;
   gap: 10px;
   align-items: flex-end;
   padding: 12px clamp(16px, 6vw, 120px) 16px;
@@ -599,6 +684,7 @@ button {
 
 .composer textarea {
   flex: 1;
+  min-width: 0;
   resize: none;
   min-height: 42px;
   max-height: 220px;
@@ -683,19 +769,6 @@ button {
   }
 }
 
-@media (max-width: 760px) {
-  #sidebar {
-    width: 44vw;
-    min-width: 200px;
-  }
-  .messages,
-  .composer {
-    padding-left: 16px;
-    padding-right: 16px;
-  }
-}
-
-
 /* ---- approval banner ------------------------------------------------- */
 /* Orange, like the TUI: an approval is a stop-the-line event. */
 .approval {
@@ -879,6 +952,7 @@ button {
 /* ----------------------------------------------------- model and settings */
 .model-picker {
   display: flex;
+  flex-shrink: 0;
   flex-wrap: wrap;
   align-items: end;
   gap: 10px;
@@ -920,6 +994,7 @@ select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 .settings-dialog {
   width: min(620px, calc(100vw - 24px));
   max-height: calc(100vh - 24px);
+  max-height: calc(100dvh - 24px);
   padding: 0;
   border: 1px solid var(--border);
   border-radius: var(--radius);
@@ -935,7 +1010,84 @@ select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 .settings-note, .settings-fields .form-feedback { grid-column: 1 / -1; margin: 0; font-size: 11px; color: var(--muted); }
 .settings-fields .form-feedback.error { color: var(--red); }
 .settings-actions { display: flex; justify-content: end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); }
-@media (max-width: 600px) {
-  .model-picker { padding: 10px 12px; }
+/* Phones use one full-width pane: the conversation list opens first. */
+@media (max-width: 760px) {
+  #sidebar {
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    border-right: 0;
+    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+  }
+
+  #main { display: none; }
+  #app.conversation-open #sidebar { display: none; }
+  #app.conversation-open #main { display: flex; }
+
+  #main {
+    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+  }
+
+  .brand { padding: 12px; }
+  .icon-btn { width: 44px; height: 44px; flex: none; }
+  .session { padding: 12px 9px; min-height: 56px; }
+  .session-title { font-size: 13px; }
+  .group-header, .more { min-height: 44px; }
+
+  .main-header {
+    display: grid;
+    grid-template-columns: 44px minmax(0, 1fr);
+    align-items: center;
+    gap: 8px 10px;
+    padding: 8px 12px;
+  }
+  .back-to-menu { display: grid; }
+  .back-to-menu:hover { transform: none; }
+  .back-to-menu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .controls {
+    grid-column: 1 / -1;
+    justify-content: flex-start;
+    max-height: 20vh;
+    max-height: 20dvh;
+    overflow: auto;
+  }
+  .controls:empty { display: none; }
+  .controls .control { min-height: 36px; }
+  .controls label { min-width: 0; max-width: 100%; }
+
+  .model-picker {
+    gap: 8px;
+    padding: 10px 12px;
+    max-height: 30vh;
+    max-height: 30dvh;
+    overflow: auto;
+  }
+  .model-picker label { flex: 1 1 calc(50% - 8px); }
+  .model-picker .control { flex: 1 1 calc(50% - 8px); min-height: 44px; }
+
+  .messages { padding: 16px 12px; }
+  .composer { padding: 10px 12px; gap: 8px; }
+  .composer textarea { max-height: min(220px, 25dvh); }
+  .composer .primary { min-height: 44px; padding: 11px 12px; }
+  .approval { margin: 0 12px 8px; max-height: 35dvh; padding: 10px; }
+  .approval-actions { flex-wrap: wrap; }
+  .approval-actions button { min-height: 44px; }
+
+  /* Keep inputs at 16px to avoid automatic zoom when focused on iOS. */
+  .composer textarea, .gate-card input, .settings-fields input, select { font-size: 16px; }
+  .settings-header, .settings-fields, .settings-actions { padding: 14px 16px; }
   .settings-fields { grid-template-columns: 1fr; }
+  .settings-fields label, .settings-note { overflow-wrap: anywhere; }
+  .settings-actions button { min-height: 44px; }
+  .gate { padding: 16px; overflow-y: auto; }
+  .gate-card { margin: auto; }
+}
+
+/* Short landscape screens and the onscreen keyboard leave less vertical room. */
+@media (max-width: 760px) and (max-height: 600px) {
+  .main-header { flex-shrink: 1; min-height: 60px; overflow-y: auto; }
+  .model-picker { flex-shrink: 1; min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
+  .messages { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
+  .approval { max-height: 30dvh; overflow-y: auto; }
+  .approval-details { min-height: 64px; }
 }

package/web/turns.js

@@ -0,0 +1,66 @@
+// Turn folding for the web UI.
+//
+// A conversation is a sequence of turns: each one starts at a user message and
+// runs until the next one. Once the agent has finished a turn, the browser folds
+// away the work it took — the prompt body, the thinking and the tool calls — and
+// keeps the final reply on screen, so a finished exchange always ends on its
+// answer. The complete round is still one click away.
+//
+// The thresholds mirror TURN_FOLD_MIN_BLOCKS / TURN_FOLD_MIN_CHARS in
+// src/screens/chat.ts, so the terminal and the browser fold the same turns.
+// Short exchanges are left open: hiding two lines behind a click helps nobody.
+
+export const TURN_FOLD_MIN_BLOCKS = 4;
+export const TURN_FOLD_MIN_CHARS = 600;
+
+/** Split a transcript into turns: `{ start, end }` message index ranges. */
+export function turnRanges(messages) {
+  const turns = [];
+  messages.forEach((message, index) => {
+    if (message.role === "user") turns.push({ start: index, end: messages.length });
+  });
+  for (let i = 0; i < turns.length - 1; i++) turns[i].end = turns[i + 1].start;
+  return turns;
+}
+
+/** Index of the turn's reply — its last assistant message (-1 when it has none). */
+export function turnAnswerIndex(messages) {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    if (messages[i].role === "assistant") return i;
+  }
+  return -1;
+}
+
+/**
+ * True when folding the work behind this turn saves more room than it costs.
+ * The reply is never folded away, so it is not counted: a long answer on its own
+ * must never collapse the turn that carries it.
+ */
+export function turnFolds(messages) {
+  const reply = turnAnswerIndex(messages);
+  let blocks = 0;
+  let chars = 0;
+  messages.forEach((message, index) => {
+    if (index === reply) return;
+    if (message.role !== "user" && message.role !== "assistant") return;
+    blocks++;
+    chars += String(message.content ?? "").length;
+  });
+  return blocks >= TURN_FOLD_MIN_BLOCKS || chars >= TURN_FOLD_MIN_CHARS;
+}
+
+/**
+ * The first line of the first message in `role`. One line only: the header is a
+ * signpost, and the full text is one click away.
+ */
+export function turnPreview(messages, role) {
+  for (const message of messages) {
+    if (message.role !== role) continue;
+    const line = String(message.content ?? "")
+      .split(/\r?\n/)
+      .map((part) => part.trim())
+      .find((part) => part.length > 0);
+    if (line) return line;
+  }
+  return "";
+}