fix(minimax-bot): fold the background job queue behind one line, separate the reply bubbles

plugins/minimax-ai/minimax-bot/.minimax-plugin/plugin.json

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "name": "minimax-bot",
   "displayName": "MiniMax Bot",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "description": "Turn MiniMax Code into an always-on team of Bots. A Chief Bot helps you build the team; in group chats the admin answers and @mentions hand work to other members. Every Bot has its own octopus avatar and memory, with scheduled tasks and usage stats.",
   "author": "MiniMax Code",
   "icon": "icon.png",

plugins/minimax-ai/minimax-bot/README.md

@@ -14,7 +14,7 @@ Copy this directory, including the hidden `.minimax-plugin/` directory, into the
 - **Chief Bot**: created on first launch to help you build your team. Chief can create, edit and delete Bots and groups; other Bots are refused when they try to do so.
 - **Group chats**: the group admin answers by default. `@Name` calls on a specific member, and a Bot that `@`-mentions another member in its reply hands the turn over. Members with nothing to add reply `[PASS]` and are skipped. Each member keeps a separate session per group, and groups cannot see private chats. There is no fixed reply cap. Discussions finish naturally, or wait for more instructions after repeated handoffs without tool progress.
 - **Hand-offs between Bots**: `message_bot` hands work to another Bot and immediately returns an admission receipt; the completed result returns to the source chat. `post_group` is **private chat only**: it posts to a group and returns immediately while the discussion continues according to the group's reply mode. From a private chat, Chief can post to any group without joining it; other Bots can only post to groups they belong to. During a group turn, `post_group` is disabled for everyone, including Chief and admins, for both same-group and cross-group posts. Use `@Name` in a reply to hand off within the group; start cross-group work from a private chat.
-- **Background work**: when an isolated execution context is useful, a Bot calls `start_helper` to run it in the background in a fresh, separate session; the Bot's turn ends at once and you can keep chatting. The Bot simply says something like "let me look into it" without internal jargon or IDs. When the job finishes, its report comes back to the Bot as a new turn, and the Bot reviews it and passes it on in its own words (in groups too, where it can keep handing off with `@`). At most 2 background jobs run at once (one slot is always kept free for chat) and the rest queue; each Bot can have at most 4 queued or running. Running jobs are shown above the chat input and can be stopped at any time; tool approvals from a background job appear in its chat; jobs still running when the Mini App restarts are marked interrupted. Bots can also manage jobs with `list_helpers` / `stop_helper`. "Allow background helpers automatically" is on by default in Bot settings; when off, a Bot only does so when you explicitly ask.
+- **Background work**: when an isolated execution context is useful, a Bot calls `start_helper` to run it in the background in a fresh, separate session; the Bot's turn ends at once and you can keep chatting. The Bot simply says something like "let me look into it" without internal jargon or IDs. When the job finishes, its report comes back to the Bot as a new turn, and the Bot reviews it and passes it on in its own words (in groups too, where it can keep handing off with `@`). At most 2 background jobs run at once (one slot is always kept free for chat) and the rest queue; each Bot can have at most 4 queued or running. Running jobs are shown above the chat input and can be stopped at any time; when more than three are queued, the jobs that are already working stay in the open and the rest fold into one line that says how many are left, and one button below the rows opens the whole queue; tool approvals from a background job appear in its chat; jobs still running when the Mini App restarts are marked interrupted. Bots can also manage jobs with `list_helpers` / `stop_helper`. "Allow background helpers automatically" is on by default in Bot settings; when off, a Bot only does so when you explicitly ask.
 - **Per-Bot model and reasoning effort**: pick a model and reasoning effort in Bot settings (only the levels the model supports are listed, and thinking can be turned off where supported; Bots that follow the default model can still set their own effort). Chief can also set them with the `model` (a model ID, `provider/model` or display name; `default` follows the default) and `effort` (`low`, `high`, `off`, ...) parameters of `create_bot` / `update_bot`. Requires a MiniMax Code version with `agent.models()` / `run({ model })`; older versions prompt you to upgrade.
 - **Images and files**: `<media src="…" />` and `![](absolute path)` in a Bot reply render as images, audio/video players or file cards. Local HTML/HTM cards open an isolated preview inside the Mini App; MD/Markdown cards show a formatted reading view (plain text above 2 MiB). The owning Mini App fetches the file so a regular browser tab does not lose Host authentication and show a blank 401 page. Failed loads show an error and Retry; files above 16 MiB can be saved with the preview toolbar’s Download action. Other files still download. Local files are served through `/api/media`, limited to paths the Bot referenced in that conversation. HTML previews allow page scripts and HTTP(S) styles and display resources in an isolated sandbox, without access to Bot storage, fetch API requests or form submissions. Other local files referenced by HTML are not exposed; embed those resources in the document. Remote links follow the destination server response.
 - **Attachments**: attach files to your message; the Bot receives their local paths.
@@ -28,7 +28,7 @@ Copy this directory, including the hidden `.minimax-plugin/` directory, into the
 - **Language**: English and Chinese. By default it follows the operating system's preferred language (the first English or Chinese entry in `navigator.languages`; other languages fall back to English), or you can fix it under Settings → General → Language. The interface, errors, system notices, Chief's default setup, the context Bots receive and the MCP tool descriptions all switch; replies the Bots wrote and text you entered stay as they are.
 - **Reactions**: react to finished Bot replies in private and group chats. The quick bar offers 👍 ❤️ 🙌 😂 😭 😮, and more emoji can be browsed by category or searched in English or Chinese. Each message holds one reaction: picking a new one replaces it, and picking the same one again removes it. Reactions are saved locally, survive refreshes and restarts, and sync to other open windows. They do not trigger a Bot reply and are not sent to the model.
 - **Reply actions**: the reaction, copy, quote-reply and open-session buttons sit at the bottom-left of a reply, under its last line. A long reply therefore keeps its actions within reach at the end of the text instead of pushing them off the top of the message. The reaction indicator sits directly above that row and is painted with the app's own tag colours, so it follows the light and dark themes.
-- **Folded working messages**: the Host records a text part for every turn a Bot takes between two tool calls, so a reply that worked for a while arrives with many parts. The newest three bubbles stay in the open, exactly where the flat layout put them, the answer among them. The earlier ones keep their own shape but move into a folded area above them: one line says how many of them there are, and opening it shows them in a fixed height area with its own scrollbar, so the conversation above stays in reach. Hovering a bubble of such a reply tells what that bubble said, the way the task rows and the attachments do.
+- **Working messages of one reply**: the Host records a text part for every turn a Bot takes between two tool calls, so a reply that worked for a while arrives with many parts, and the page draws one bubble per part. The bubbles keep the official shape and order, and a small gap between them tells them apart instead of letting them read as one block of text.
 
 ## 0.7.0 Reliable delegation and result delivery
 

plugins/minimax-ai/minimax-bot/miniapp/client/app.css

@@ -819,55 +819,14 @@ button {
   max-width: 100%;
 }
 
-/* The earlier bubbles of a long reply. The Host records a text part per assistant turn, so a
-   reply that ran a dozen tools arrives with dozens of bubbles; they live here instead, behind a
-   one line summary. The area that opens has a fixed height and its own scrollbar, so opening
-   it never makes the feed grow. */
-.bubble-fold {
-  max-width: min(88%, 680px);
-  margin: 2px 0;
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  background: var(--tag);
-  overflow: hidden;
-}
-
-.bubble-fold > summary {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  font-size: 12.5px;
-  color: var(--muted);
-  cursor: pointer;
-  list-style: none;
-  user-select: none;
-}
-
-.bubble-fold > summary::-webkit-details-marker { display: none; }
-.bubble-fold > summary:hover { color: var(--ink); background: var(--hover); }
-.bubble-fold > summary svg { flex: none; transition: transform 120ms ease; }
-.bubble-fold[open] > summary svg { transform: rotate(180deg); }
-
-.bubble-fold-closed { display: inline; }
-.bubble-fold-open { display: none; }
-.bubble-fold[open] > summary .bubble-fold-closed { display: none; }
-.bubble-fold[open] > summary .bubble-fold-open { display: inline; }
-
-/* The fixed height with a scrollbar is the point of the fold: the bubbles inside it scroll,
-   the feed around it does not. */
-.bubble-fold-body {
-  max-height: min(320px, 40vh);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding: 2px 10px 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+/* One reply can carry many bubbles, one per recorded part. When they touch they read as one
+   block of text, so the bubbles that follow each other get a small gap, the way the task rows
+   do. The rule names the bubbles alone: the notes, the event lines and the action row keep the
+   spacing the official build gave them. */
+.bubble-wrap > .bubble + .bubble {
+  margin-top: 4px;
 }
 
-.bubble-fold-body .bubble { max-width: 100%; }
-
 .msg.user .bubble-wrap {
   align-items: flex-end;
   /* The width bound belongs here, not on .bubble: this wrapper is shrink-to-fit, so a
@@ -2765,14 +2724,34 @@ fieldset.field {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  /* A few rows stay fully visible. More than the cap scrolls here instead of pushing the transcript off screen. */
   flex: 0 1 auto;
   min-height: 0;
-  max-height: min(280px, 40%);
+  /* The height budget the official strip had, and the row the fold button takes from it: the
+     button itself (28px) plus the gap above it. */
+  --helper-rows-max: 280px;
+  --helper-fold-row: 32px;
+}
+
+/* The rows keep the scroll area the official strip had: a few of them stay fully visible, the
+   rest scroll here instead of pushing the transcript off screen. The cap is a viewport share
+   because the strip sits inside a box that has no height of its own. */
+.helper-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 0 1 auto;
+  min-height: 0;
+  max-height: min(var(--helper-rows-max), 40vh);
   overflow-y: auto;
   overscroll-behavior: contain;
 }
 
+/* The fold button sits below the scroll area and takes a row of its own, so the strip keeps
+   the height budget the official one had. */
+.helpers.has-fold .helper-rows {
+  max-height: min(calc(var(--helper-rows-max) - var(--helper-fold-row)), calc(40vh - var(--helper-fold-row)));
+}
+
 .helpers:empty {
   display: none;
 }
@@ -2821,6 +2800,11 @@ fieldset.field {
   flex: none;
 }
 
+/* The fold of a long queue: the same small button as the stop action, under the rows it folds. */
+.helper-more {
+  align-self: flex-start;
+}
+
 /* attachments waiting to be sent, above the input */
 .attach-btn {
   width: 32px;

plugins/minimax-ai/minimax-bot/miniapp/client/app.js

@@ -447,6 +447,7 @@ async function mountChat(chatId) {
   const revision = ++mountRevision;
   closeReactionPicker();
   mounted = chatId;
+  helpersExpanded = false;
   const target = targetOf(chatId);
   ui.pillBar = h('div', { class: 'pill-bar' });
   ui.feedInner = h('div', { class: 'feed-inner' });
@@ -938,90 +939,21 @@ function legacyParts(m) {
   return parts;
 }
 
-/**
- * The Host opens a text part for every assistant turn between two tool calls, so a reply that
- * worked for a while arrives with dozens of them, and one bubble per part filled the screen.
- * The newest bubbles stay in the open, exactly where the flat layout put them; the earlier ones
- * fold away behind a one line summary.
- */
-const FOLD_AFTER_PARTS = 3;
-
-/** The bubble's own text, short enough to be a hover hint. */
-function hintOf(text) {
-  const flat = String(text ?? '').replace(/\s+/g, ' ').trim();
-  return flat.length > 160 ? `${flat.slice(0, 160)}…` : flat;
-}
-
-/**
- * The earlier bubbles of a long reply: folded behind a one line summary, and the area that
- * opens has a fixed height with its own scrollbar, so the feed keeps its length.
- */
-function foldView(m, parts, presentation) {
-  const inner = () =>
-    parts.map((part, index) => ({
-      key: `text:${index}`,
-      signature: JSON.stringify([part.text, presentation]),
-      create: () => h('div', { class: 'bubble', title: hintOf(part.text) }, markdownNode(part.text, m.chatId)),
-      update: (bubble) => {
-        markdownNode(part.text, m.chatId, bubble.firstElementChild);
-        bubble.title = hintOf(part.text);
-        return bubble;
-      },
-    }));
-  const body = h('div', { class: 'bubble-fold-body' });
-  reconcileChildren(body, inner());
-  return {
-    key: 'fold',
-    signature: JSON.stringify([parts.map((part) => part.text), presentation, locale()]),
-    create: () =>
-      h(
-        'details',
-        { class: 'bubble-fold' },
-        h(
-          'summary',
-          { class: 'bubble-fold-summary', title: t('fold.hint', { n: parts.length }) },
-          icon('down', 12),
-          h('span', { class: 'bubble-fold-closed' }, t('fold.show', { n: parts.length })),
-          h('span', { class: 'bubble-fold-open' }, t('fold.hide')),
-        ),
-        body,
-      ),
-    update: (node) => {
-      reconcileChildren(node.querySelector('.bubble-fold-body'), inner());
-      const summary = node.querySelector('.bubble-fold-summary');
-      if (summary) summary.title = t('fold.hint', { n: parts.length });
-      const closed = node.querySelector('.bubble-fold-closed');
-      if (closed) closed.textContent = t('fold.show', { n: parts.length });
-      return node;
-    },
-  };
-}
-
 /** Keep part order exactly as recorded; matching prefixes are not evidence of duplication. */
 function partViews(m, inGroup) {
   const parts = m.key ? [{ type: 'text', text: displayText(m) }] : m.parts ?? legacyParts(m);
   const lastText = parts.findLastIndex((part) => part.type === 'text' && part.text?.trim());
   const views = [];
   const presentation = presentationKey();
-  const textParts = [];
-  parts.forEach((part, index) => {
-    if (part.type === 'text' && part.text?.trim()) textParts.push(index);
-  });
-  // The newest bubbles stay in the open, where the flat layout had them; the earlier ones fold.
-  const folded = textParts.length > FOLD_AFTER_PARTS ? textParts.slice(0, -FOLD_AFTER_PARTS) : [];
-  const foldedSet = new Set(folded);
-  if (folded.length) views.push(foldView(m, folded.map((index) => parts[index]), presentation));
   parts.forEach((part, index) => {
     const key = `part:${index}`;
     if (part.type === 'text' && part.text?.trim()) {
-      if (foldedSet.has(index)) return;
       views.push({
         key,
         signature: JSON.stringify([part.text, presentation, index === lastText ? [m.status, m.userReactions, m.reactionsRevision, displayText(m), m.sessionId, botById(m.botId)?.name] : null]),
-        create: () => updateBubbleControls(h('div', { class: 'bubble', title: folded.length ? hintOf(part.text) : undefined }, markdownNode(part.text, m.chatId)), m, index === lastText),
+        create: () => updateBubbleControls(h('div', { class: 'bubble' }, markdownNode(part.text, m.chatId)), m, index === lastText),
         update: (bubble) => {
           markdownNode(part.text, m.chatId, bubble.firstElementChild);
-          if (folded.length) bubble.title = hintOf(part.text);
           return updateBubbleControls(bubble, m, index === lastText);
         },
       });
@@ -1298,12 +1230,49 @@ function helperElapsed(helper) {
   return minutes < 1 ? t('helper.justStarted') : t('helper.minutes', { n: minutes });
 }
 
+/** How many job rows stay in the open before the rest folds into one line. */
+const HELPER_ROWS_PREVIEW = 3;
+let helpersExpanded = false;
+
+/** A job that is already working comes first; one that still waits can wait a little longer. */
+const HELPER_STATUS_ORDER = { running: 0, waiting_for_tasks: 1, queued: 2 };
+
+/**
+ * The rows that stay in the open. Which rows those are is our choice, the order they appear in
+ * is not: a job that is already working comes first, so the row the reader cares about is never
+ * the one that folds away, and the rows keep the order the official build gives them.
+ */
+function visibleHelperRows(items) {
+  const ranked = [...items].sort((a, b) => HELPER_STATUS_ORDER[a.status] - HELPER_STATUS_ORDER[b.status]);
+  const keep = new Set(ranked.slice(0, HELPER_ROWS_PREVIEW));
+  return items.filter((item) => keep.has(item));
+}
+
 /** Background helpers working for this chat: one line each, with a stop button. */
 function renderHelpers() {
   if (!ui.helpers) return;
   const items = [...state.helpers, ...state.tasks].filter((x) => [x.chatId, x.originChatId, x.resultChatId].includes(mounted) && ['queued', 'running', 'waiting_for_tasks'].includes(x.status));
-  ui.helpers.replaceChildren(
-    ...items.map((helper) => {
+  if (!items.length) {
+    ui.helpers.replaceChildren();
+    ui.helpers.classList.remove('has-fold');
+    helpersExpanded = false;
+    return;
+  }
+  // A queue that fits in the open rows has nothing to fold, so an open queue ends with it and
+  // the next busy chat starts folded again.
+  if (items.length <= HELPER_ROWS_PREVIEW) helpersExpanded = false;
+  const preview = helpersExpanded ? items : visibleHelperRows(items);
+  const hidden = items.length - preview.length;
+  const foldable = items.length > HELPER_ROWS_PREVIEW;
+  // The rows keep the scroll area they had, and the fold button sits below it, so the button
+  // stays reachable however long the queue is.
+  let rows = ui.helpers.querySelector('.helper-rows');
+  if (!rows) {
+    rows = h('div', { class: 'helper-rows' });
+    ui.helpers.replaceChildren(rows);
+  }
+  rows.replaceChildren(
+    ...preview.map((helper) => {
       const bot = botById(helper.botId);
       return h(
         'div',
@@ -1329,6 +1298,31 @@ function renderHelpers() {
       );
     }),
   );
+  ui.helpers.classList.toggle('has-fold', foldable);
+  // The fold button is the same node from one render to the next, so the keyboard focus stays
+  // on it when a new job arrives, when the clock ticks or when the button itself is pressed.
+  let more = ui.helpers.querySelector('.helper-more');
+  if (!foldable) {
+    more?.remove();
+    return;
+  }
+  if (!more) {
+    more = h(
+      'button',
+      {
+        type: 'button',
+        class: 'btn sm helper-more',
+        'aria-expanded': String(helpersExpanded),
+        onclick: () => {
+          helpersExpanded = !helpersExpanded;
+          renderHelpers();
+        },
+      },
+    );
+    ui.helpers.append(more);
+  }
+  more.textContent = hidden > 0 ? t('helper.more', { n: hidden }) : t('helper.collapse');
+  more.setAttribute('aria-expanded', String(helpersExpanded));
 }
 setInterval(() => {
   if (mounted && state.helpers.some((x) => x.chatId === mounted && x.status === 'running')) renderHelpers();