pilotswarm 0.5.1 → 0.5.3

package/ui/react/src/components.js

@@ -10,6 +10,7 @@ import {
     selectChatPaneChrome,
     selectLiveActivityLines,
     selectChatLines,
+    selectOutboxOverlayLines,
     selectActivityPane,
     selectArtifactUploadModal,
     selectArtifactPickerModal,
@@ -317,6 +318,7 @@ const ChatPane = React.memo(function ChatPane({ controller, width, height, frame
             activeSessionId,
             activeSession: activeSessionId ? state.sessions.byId[activeSessionId] || null : null,
             activeHistory: activeSessionId ? state.history.bySessionId.get(activeSessionId) || null : null,
+            activeOutbox: activeSessionId ? state.outbox?.bySessionId?.[activeSessionId] || null : null,
             branding: state.branding,
             connectionError: state.connection.error,
             connectionMode: state.connection.mode,
@@ -347,11 +349,21 @@ const ChatPane = React.memo(function ChatPane({ controller, width, height, frame
             history: {
                 bySessionId: historyMap,
             },
+            // The queued-prompt overlay reads state.outbox; without it here the
+            // TUI ChatPane's synthetic selectorState always saw an empty outbox
+            // and rendered no "queued prompts: N" even though the item was
+            // durably queued in the real store.
+            outbox: {
+                bySessionId: chatView.activeSessionId && chatView.activeOutbox
+                    ? { [chatView.activeSessionId]: chatView.activeOutbox }
+                    : {},
+            },
         };
     }, [
         chatView.activeHistory,
         chatView.activeSessionId,
         chatView.activeSession,
+        chatView.activeOutbox,
         chatView.branding,
         chatView.chatViewMode,
         chatView.connectionError,
@@ -383,13 +395,19 @@ const ChatPane = React.memo(function ChatPane({ controller, width, height, frame
         () => (startupError ? [] : selectLiveActivityLines(selectorState, { spinnerFrame, maxWidth: contentWidth })),
         [selectorState, startupError, spinnerFrame, contentWidth],
     );
-    // Concat the isolated live-activity block so the spinner tick only recomputes
-    // the small block, not the whole transcript.
-    const chatLines = React.useMemo(
-        () => (liveActivityLines.length > 0
-            ? [...elements, [{ text: "", color: null }], ...liveActivityLines]
-            : elements),
-        [elements, liveActivityLines],
+    const outboxLines = React.useMemo(
+        () => (startupError ? [] : selectOutboxOverlayLines(selectorState, contentWidth)),
+        [selectorState, startupError, contentWidth],
+    );
+    // The queued-prompt overlay and the live "Working" strip are pinned in the
+    // bottom-sticky region (outbox above, strip at the very bottom), so they
+    // stay put at the foot of the pane instead of scrolling inline with the
+    // transcript — matching the portal. The transcript itself stays crisp.
+    const bottomStickyLines = React.useMemo(
+        () => (outboxLines.length > 0 || liveActivityLines.length > 0
+            ? [...outboxLines, ...liveActivityLines]
+            : []),
+        [outboxLines, liveActivityLines],
     );
 
     return React.createElement(platform.Panel, {
@@ -399,7 +417,8 @@ const ChatPane = React.memo(function ChatPane({ controller, width, height, frame
         focused: chatView.focused,
         width,
         height,
-        lines: chatLines,
+        lines: elements,
+        bottomStickyLines,
         scrollOffset: chatView.chatScroll,
         scrollMode: "bottom",
         paneId: "chat",

package/ui/react/src/web-app.js

@@ -431,13 +431,19 @@ function compactTitleRuns(title, maxWidth = 40) {
         return [{ text: text.length > maxWidth ? `${text.slice(0, maxWidth - 1)}…` : text, color: "white", bold: true }];
     }
     const compactRuns = [];
+    // Gray runs are dropped on tight widths as decoration (ids, badges) —
+    // EXCEPT pure separators (" · "). Dropping those fuses adjacent values:
+    // "running · gpt-5.4 · ctx 33%" became "runninggpt-5.4ctx…".
+    const isSeparator = (run) => /^[\s·—-]+$/.test(String(run?.text || ""));
     let remaining = Math.max(8, maxWidth);
     for (const run of title) {
         if (remaining <= 0) break;
         const color = run?.color;
-        if (color === "gray" && compactRuns.length > 0) continue;
+        if (color === "gray" && compactRuns.length > 0 && !isSeparator(run)) continue;
         const text = String(run?.text || "");
         if (!text) continue;
+        // Don't start a separator we can't follow with content.
+        if (isSeparator(run) && remaining < text.length + 2) break;
         const chunk = text.length > remaining && remaining > 1
             ? `${text.slice(0, remaining - 1)}…`
             : text.slice(0, remaining);
@@ -445,6 +451,10 @@ function compactTitleRuns(title, maxWidth = 40) {
         compactRuns.push({ ...run, text: chunk });
         remaining -= chunk.length;
     }
+    // Never end on a dangling separator.
+    while (compactRuns.length > 0 && isSeparator(compactRuns[compactRuns.length - 1])) {
+        compactRuns.pop();
+    }
     return compactRuns.length > 0 ? compactRuns : title;
 }
 
@@ -1715,6 +1725,7 @@ function PortalSequenceLines({ lines, theme, completionByTurn }) {
     );
 }
 
+
 function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, lines, stickyLines = [], bottomStickyLines = [], scrollOffset = 0, scrollMode = "top", paneKey, controller, className = "", panelClassName = "", topContent = null, bottomContent = null, structuredBlocks = false, stickyBottom = false, renderBody = null }) {
     const themeId = useControllerSelector(controller, (state) => state.ui.themeId);
     const theme = getTheme(themeId);
@@ -1736,11 +1747,26 @@ function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, l
         });
     }, []);
 
+    // Edge fades follow real overflow: fade the TOP only when content is
+    // clipped above (scrolled down) and the BOTTOM only when clipped below
+    // (scrolled up). With content that fits, neither fades — the first and
+    // last lines stay crisp.
+    const [scrollShadow, setScrollShadow] = React.useState({ up: false, down: false });
+    const updateScrollShadow = React.useCallback((el) => {
+        if (!el) return;
+        const up = el.scrollHeight - el.scrollTop - el.clientHeight > 4;
+        const down = el.scrollTop > 4;
+        setScrollShadow((cur) => (cur.up === up && cur.down === down ? cur : { up, down }));
+    }, []);
     const handleBodyScroll = React.useCallback((event) => {
         onScroll();
+        updateScrollShadow(event.currentTarget);
         if (!preserveHorizontalScroll || syncingHorizontalRef.current) return;
         syncScrollLeft(event.currentTarget, stickyRef.current);
-    }, [onScroll, preserveHorizontalScroll, syncScrollLeft]);
+    }, [onScroll, preserveHorizontalScroll, syncScrollLeft, updateScrollShadow]);
+    React.useEffect(() => {
+        updateScrollShadow(ref.current);
+    });
 
     const handleStickyScroll = React.useCallback((event) => {
         if (!preserveHorizontalScroll || syncingHorizontalRef.current) return;
@@ -1758,7 +1784,7 @@ function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, l
                 normalizedSticky.map((line, index) => React.createElement(Line, { key: `sticky:${index}`, line, theme })),
             )
             : null,
-        React.createElement("div", { ref, className: `ps-scroll-panel ${className}`.trim(), onScroll: handleBodyScroll, onWheel, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel: onTouchEnd },
+        React.createElement("div", { ref, className: `ps-scroll-panel ${className}${scrollShadow.down ? " is-scrolled-down" : ""}${scrollShadow.up ? " is-scrolled-up" : ""}`.trim(), onScroll: handleBodyScroll, onWheel, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel: onTouchEnd },
             typeof renderBody === "function"
                 ? renderBody(normalizedLines, theme)
                 : structuredBlocks
@@ -1783,25 +1809,27 @@ function SessionRowContent({ row, theme, structured = false }) {
             : row.text;
     }
 
-    const hasMeta = Array.isArray(row.metaRuns) && row.metaRuns.length > 0;
-    const hasBadges = Array.isArray(row.badgeRuns) && row.badgeRuns.length > 0;
-    const hasSelectedMeta = row.active && Array.isArray(row.selectedMetaRuns) && row.selectedMetaRuns.length > 0;
+    // Dense row: the title takes one line (clamped by CSS) and the context %
+    // is pinned to the right. The full id · time · model · ctx detail unfolds
+    // only under the selected row.
+    const ctxRuns = Array.isArray(row.ctxRuns) ? row.ctxRuns : [];
+    const detailRuns = Array.isArray(row.detailRuns)
+        ? row.detailRuns
+        : (Array.isArray(row.selectedMetaRuns) ? row.selectedMetaRuns : []);
+    const hasCtx = ctxRuns.length > 0;
+    const hasDetail = row.active && detailRuns.length > 0;
 
     return React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "ps-session-row-title" },
-            React.createElement(Runs, { runs: row.titleRuns, theme }),
-            // Meta (timestamp / member count) sits inline on the title line.
-            hasMeta
-                ? React.createElement("span", { className: "ps-session-row-meta" },
-                    React.createElement(Runs, { runs: [{ text: " ", color: "gray" }, ...row.metaRuns], theme }))
+        React.createElement("div", { className: "ps-session-row-line" },
+            React.createElement("div", { className: "ps-session-row-title" },
+                React.createElement(Runs, { runs: row.titleRuns, theme })),
+            hasCtx
+                ? React.createElement("div", { className: "ps-session-row-ctx" },
+                    React.createElement(Runs, { runs: ctxRuns, theme }))
                 : null),
-        hasBadges
-            ? React.createElement("div", { className: "ps-session-row-badges" },
-                React.createElement(Runs, { runs: row.badgeRuns, theme }))
-            : null,
-        hasSelectedMeta
-            ? React.createElement("div", { className: "ps-session-row-selected-meta" },
-                React.createElement(Runs, { runs: row.selectedMetaRuns, theme }))
+        hasDetail
+            ? React.createElement("div", { className: "ps-session-row-detail" },
+                React.createElement(Runs, { runs: detailRuns, theme }))
             : null);
 }
 
@@ -2117,19 +2145,18 @@ function ChatPane({ controller, mobile = false, fullWidth = false, showComposer
         () => selectLiveActivityLines(selectorState, { spinnerFrame, maxWidth: viewState.contentWidth }),
         [selectorState, spinnerFrame, viewState.contentWidth],
     );
-    // Concatenate the isolated live-activity block onto the (expensive) message
-    // lines so the spinner tick only recomputes the small block, not the whole
-    // transcript. The block clears itself once the reply lands.
-    const chatLines = React.useMemo(
-        () => (liveActivityLines.length > 0
-            ? [...lines, [{ text: "", color: null }], ...liveActivityLines]
-            : lines),
-        [lines, liveActivityLines],
-    );
+    // The live-activity line is pinned in the bottom-sticky strip (with the
+    // outbox overlay), NOT appended to the transcript — it must stay put while
+    // chat content scrolls, and it drops the instant the turn ends.
+    const pinnedActivityLines = liveActivityLines;
     const outboxLines = React.useMemo(
         () => selectOutboxOverlayLines(selectorState, viewState.contentWidth, { tableMode: "sentinel" }),
         [selectorState, viewState.contentWidth],
     );
+    const stickyBottom = React.useMemo(
+        () => (pinnedActivityLines.length > 0 ? [...outboxLines, ...pinnedActivityLines] : outboxLines),
+        [outboxLines, pinnedActivityLines],
+    );
     const composer = showComposer && !viewState.activeSessionIsGroup && viewState.chatViewMode !== "summary"
         ? React.createElement("div", { className: "ps-chat-composer" },
             React.createElement(PromptComposer, { controller, mobile, active: true }))
@@ -2144,8 +2171,8 @@ function ChatPane({ controller, mobile = false, fullWidth = false, showComposer
         actions: null,
         color: chrome.color,
         focused: viewState.focused,
-        lines: chatLines,
-        bottomStickyLines: outboxLines,
+        lines,
+        bottomStickyLines: stickyBottom,
         scrollOffset: viewState.scroll,
         scrollMode: "bottom",
         paneKey: "chat",
@@ -4105,11 +4132,27 @@ function AdminConsolePanel({ controller }) {
             : null,
         React.createElement("section", { className: "ps-admin-console__section" },
             React.createElement("h3", null, "GitHub Copilot key"),
-            React.createElement("p", { className: "ps-admin-console__hint" },
-                "Per-user override for the GitHub Copilot model provider token. ",
-                "When set, this key is used instead of the worker's env-supplied ",
-                "GITHUB_TOKEN for sessions you own. Clearing the key reverts to ",
-                "the worker default."),
+            view.ghcpKey.storeAsSystem
+                ? React.createElement("p", { className: "ps-admin-console__hint" },
+                    "System-wide key for platform-managed (ownerless) system ",
+                    "sessions — agent tuners, repo cache managers, and other ",
+                    "sessions with no owner resolve this key for GitHub Copilot ",
+                    "models. Clearing it reverts them to the worker default.")
+                : React.createElement("p", { className: "ps-admin-console__hint" },
+                    "Per-user override for the GitHub Copilot model provider token. ",
+                    "When set, this key is used instead of the worker's env-supplied ",
+                    "GITHUB_TOKEN for sessions you own. Clearing the key reverts to ",
+                    "the worker default."),
+            view.isAdmin && view.systemGhcpKey.supported
+                ? React.createElement("label", { className: "ps-admin-console__system-toggle" },
+                    React.createElement("input", {
+                        type: "checkbox",
+                        checked: view.ghcpKey.storeAsSystem,
+                        disabled: view.ghcpKey.saving,
+                        onChange: (event) => controller.setAdminGhcpKeyStoreAsSystem(event.target.checked),
+                    }),
+                    "Store as System key")
+                : null,
             React.createElement("p", { className: `ps-admin-console__status${view.ghcpKey.error ? " is-error" : ""}` },
                 view.ghcpKey.error || view.ghcpKey.statusText),
             view.ghcpKey.editing
@@ -4141,13 +4184,15 @@ function AdminConsolePanel({ controller }) {
                         type: "button",
                         className: "ps-primary-button",
                         onClick: onBeginEdit,
-                    }, view.ghcpKey.configured ? "Replace key" : "Set key"),
-                    view.ghcpKey.configured
+                    }, view.ghcpKey.targetConfigured
+                        ? (view.ghcpKey.storeAsSystem ? "Replace System key" : "Replace key")
+                        : (view.ghcpKey.storeAsSystem ? "Set System key" : "Set key")),
+                    view.ghcpKey.targetConfigured
                         ? React.createElement("button", {
                             type: "button",
                             className: "ps-mini-button",
                             onClick: onClear,
-                        }, "Clear key")
+                        }, view.ghcpKey.storeAsSystem ? "Clear System key" : "Clear key")
                         : null,
                     React.createElement("button", {
                         type: "button",