pilotswarm 0.5.0 → 0.5.2

package/ui/react/src/components.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { appendAnimatedDotsToRuns, useAnimatedDots } from "./chat-status.js";
+import { appendAnimatedDotsToRuns, useAnimatedDots, useSpinnerFrame } from "./chat-status.js";
 import {
     applyActiveHighlightRuns,
     computeLegacyLayout,
@@ -8,6 +8,7 @@ import {
     selectAdminConsole,
     selectAdminGhcpKeyEditorModal,
     selectChatPaneChrome,
+    selectLiveActivityLines,
     selectChatLines,
     selectActivityPane,
     selectArtifactUploadModal,
@@ -27,6 +28,7 @@ import {
     selectSessionOwnerFilterModal,
     selectStatusBar,
     selectThemePickerModal,
+    selectHelpModal,
     selectConfirmModal,
     selectVisibleSessionRows,
 } from "pilotswarm/ui-core";
@@ -375,6 +377,20 @@ const ChatPane = React.memo(function ChatPane({ controller, width, height, frame
             { text: "Check env credentials and model provider config, then relaunch.", color: "yellow" },
         ]
         : selectChatLines(selectorState, contentWidth)), [chatView.branding.splash, chatView.connectionError, contentWidth, selectorState, startupError]);
+    const running = String(chatView.activeSession?.status || "").toLowerCase() === "running";
+    const spinnerFrame = useSpinnerFrame(running);
+    const liveActivityLines = React.useMemo(
+        () => (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],
+    );
 
     return React.createElement(platform.Panel, {
         title: chrome.title,
@@ -383,7 +399,7 @@ const ChatPane = React.memo(function ChatPane({ controller, width, height, frame
         focused: chatView.focused,
         width,
         height,
-        lines: elements,
+        lines: chatLines,
         scrollOffset: chatView.chatScroll,
         scrollMode: "bottom",
         paneId: "chat",
@@ -568,6 +584,8 @@ const InspectorSequencePane = React.memo(function InspectorSequencePane({ contro
             ? state.orchestration.bySessionId?.[state.sessions.activeSessionId] || null
             : null,
         histories: state.history.bySessionId,
+        expandedTurns: state.ui.sequenceExpandedTurns,
+        selectedTurn: state.ui.sequenceSelectedTurn,
     }), shallowEqualObject);
     const selectorState = React.useMemo(() => ({
         sessions: {
@@ -592,8 +610,14 @@ const InspectorSequencePane = React.memo(function InspectorSequencePane({ contro
         sequenceState.histories,
     ]);
     const inspector = React.useMemo(
-        () => selectInspector(selectorState, { width: contentWidth }),
-        [contentWidth, selectorState],
+        () => selectInspector(selectorState, {
+            width: contentWidth,
+            sequenceExpansion: {
+                expandedTurns: sequenceState.expandedTurns || [],
+                selectedTurn: sequenceState.selectedTurn ?? null,
+            },
+        }),
+        [contentWidth, selectorState, sequenceState.expandedTurns, sequenceState.selectedTurn],
     );
 
     return renderInspectorPanel(platform, inspector, meta, width, height, frame);
@@ -1497,6 +1521,41 @@ function ArtifactPickerModalContainer({ controller }) {
     return React.createElement(ArtifactPickerModal, { state });
 }
 
+function HelpModal({ state }) {
+    const platform = useUiPlatform();
+    const modal = selectHelpModal(state);
+    if (!modal) return null;
+    const viewport = typeof platform.getViewport === "function"
+        ? platform.getViewport()
+        : { width: 120, height: 40 };
+    const width = Math.max(56, Math.min(modal.idealWidth || 80, (viewport.width || 120) - 8));
+    const height = Math.max(10, Math.min(modal.rows.length + 2, (viewport.height || 40) - 6));
+    const contentRows = Math.max(1, height - 2);
+    const maxOffset = Math.max(0, modal.rows.length - contentRows);
+    const scrollOffset = Math.max(0, Math.min(modal.selectedRowIndex - Math.floor(contentRows / 2), maxOffset));
+    return React.createElement(platform.Overlay, null,
+        React.createElement(platform.Column, { width },
+            React.createElement(platform.Panel, {
+                title: modal.title,
+                color: "cyan",
+                focused: false,
+                width,
+                height,
+                lines: modal.rows,
+                scrollOffset,
+                scrollMode: "top",
+                fillColor: "surface",
+            }),
+        ));
+}
+
+function HelpModalContainer({ controller }) {
+    const state = useControllerSelector(controller, (rootState) => ({
+        ui: { modal: rootState.ui.modal },
+    }), shallowEqualObject);
+    return React.createElement(HelpModal, { state });
+}
+
 function renderFilterModal(platform, modal) {
     if (!modal) return null;
     const viewport = typeof platform.getViewport === "function"
@@ -1849,6 +1908,8 @@ export function SharedPilotSwarmApp({ controller, versionLabel = null }) {
     const platform = useUiPlatform();
     const layoutState = useControllerSelector(controller, (state) => ({
         paneAdjust: state.ui.layout?.paneAdjust ?? 0,
+        sessionPaneAdjust: state.ui.layout?.sessionPaneAdjust ?? 0,
+        activityPaneAdjust: state.ui.layout?.activityPaneAdjust ?? 0,
         promptRows: getPromptInputRows(state.ui.prompt),
         inspectorTab: state.ui.inspectorTab,
         filesFullscreen: Boolean(state.files?.fullscreen),
@@ -1862,8 +1923,8 @@ export function SharedPilotSwarmApp({ controller, versionLabel = null }) {
     const viewportWidth = layoutState.viewportWidth;
     const viewportHeight = layoutState.viewportHeight;
     const layout = React.useMemo(
-        () => computeLegacyLayout({ width: viewportWidth, height: viewportHeight }, layoutState.paneAdjust, layoutState.promptRows, 0, 0, layoutState.fullscreenPane),
-        [layoutState.fullscreenPane, layoutState.paneAdjust, layoutState.promptRows, viewportHeight, viewportWidth],
+        () => computeLegacyLayout({ width: viewportWidth, height: viewportHeight }, layoutState.paneAdjust, layoutState.promptRows, layoutState.sessionPaneAdjust, layoutState.activityPaneAdjust, layoutState.fullscreenPane),
+        [layoutState.fullscreenPane, layoutState.paneAdjust, layoutState.sessionPaneAdjust, layoutState.activityPaneAdjust, layoutState.promptRows, viewportHeight, viewportWidth],
     );
     const frames = buildWorkspacePaneFrames(layout);
     const sessionRows = Math.max(3, (layout.fullscreenPane === "sessions" ? layout.bodyHeight : layout.sessionPaneHeight) - 2);
@@ -1973,6 +2034,7 @@ export function SharedPilotSwarmApp({ controller, versionLabel = null }) {
         React.createElement(RenameSessionModalContainer, { controller }),
         React.createElement(ArtifactUploadModalContainer, { controller }),
         React.createElement(ArtifactPickerModalContainer, { controller }),
+        React.createElement(HelpModalContainer, { controller }),
         React.createElement(ModelPickerModalContainer, { controller }),
         React.createElement(ReasoningEffortPickerModalContainer, { controller }),
         React.createElement(ThemePickerModalContainer, { controller }),

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { appendAnimatedDotsToRuns, useAnimatedDots } from "./chat-status.js";
+import { appendAnimatedDotsToRuns, useAnimatedDots, useSpinnerFrame } from "./chat-status.js";
 import {
     UI_COMMANDS,
     INSPECTOR_TABS,
@@ -17,6 +17,7 @@ import {
     selectAdminConsole,
     selectArtifactPickerModal,
     selectArtifactUploadModal,
+    selectLiveActivityLines,
     selectChatLines,
     selectChatPaneChrome,
     selectOutboxOverlayLines,
@@ -430,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);
@@ -444,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;
 }
 
@@ -1714,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);
@@ -1735,11 +1747,21 @@ function ScrollLinesPanel({ title, titleRight = null, color, focused, actions, l
         });
     }, []);
 
+    const [scrolledUp, setScrolledUp] = React.useState(false);
+    const updateScrolledUp = React.useCallback((el) => {
+        if (!el) return;
+        const up = el.scrollHeight - el.scrollTop - el.clientHeight > 4;
+        setScrolledUp((current) => (current === up ? current : up));
+    }, []);
     const handleBodyScroll = React.useCallback((event) => {
         onScroll();
+        updateScrolledUp(event.currentTarget);
         if (!preserveHorizontalScroll || syncingHorizontalRef.current) return;
         syncScrollLeft(event.currentTarget, stickyRef.current);
-    }, [onScroll, preserveHorizontalScroll, syncScrollLeft]);
+    }, [onScroll, preserveHorizontalScroll, syncScrollLeft, updateScrolledUp]);
+    React.useEffect(() => {
+        updateScrolledUp(ref.current);
+    });
 
     const handleStickyScroll = React.useCallback((event) => {
         if (!preserveHorizontalScroll || syncingHorizontalRef.current) return;
@@ -1757,7 +1779,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}${scrolledUp ? " is-scrolled-up" : ""}`.trim(), onScroll: handleBodyScroll, onWheel, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel: onTouchEnd },
             typeof renderBody === "function"
                 ? renderBody(normalizedLines, theme)
                 : structuredBlocks
@@ -2059,6 +2081,7 @@ function ChatPane({ controller, mobile = false, fullWidth = false, showComposer
             inspectorTab: state.ui.inspectorTab,
             chatViewMode: state.ui.chatViewMode || "transcript",
             activeSessionIsGroup: Boolean(activeSessionId && state.sessions.byId[activeSessionId]?.isGroup),
+            activeSessionStatus: activeSessionId ? String(state.sessions.byId[activeSessionId]?.status || "").toLowerCase() : "",
             focused: state.ui.focusRegion === "chat",
             scroll: state.ui.scroll.chat,
             contentWidth,
@@ -2110,10 +2133,23 @@ function ChatPane({ controller, mobile = false, fullWidth = false, showComposer
         () => selectChatLines(selectorState, viewState.contentWidth, { tableMode: "sentinel" }),
         [selectorState, viewState.contentWidth],
     );
+    const spinnerFrame = useSpinnerFrame(viewState.activeSessionStatus === "running");
+    const liveActivityLines = React.useMemo(
+        () => selectLiveActivityLines(selectorState, { spinnerFrame, maxWidth: viewState.contentWidth }),
+        [selectorState, spinnerFrame, viewState.contentWidth],
+    );
+    // 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 }))
@@ -2129,7 +2165,7 @@ function ChatPane({ controller, mobile = false, fullWidth = false, showComposer
         color: chrome.color,
         focused: viewState.focused,
         lines,
-        bottomStickyLines: outboxLines,
+        bottomStickyLines: stickyBottom,
         scrollOffset: viewState.scroll,
         scrollMode: "bottom",
         paneKey: "chat",
@@ -4089,11 +4125,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
@@ -4125,13 +4177,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",