pilotswarm 0.4.1 → 0.5.1

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,
@@ -342,9 +343,17 @@ function normalizeLines(lines) {
             // Markup lines carry preformatted art (splash screens). Tag them
             // so the chat renderer keeps each line intact: the pane's
             // pre-wrap/overflow-wrap rules would rewrap wide art lines at
-            // arbitrary points and scramble the image.
-            for (const parsedLine of parseTerminalMarkupRuns(line.value || "")) {
-                normalized.push({ kind: "runs", runs: parsedLine, preserve: true });
+            // arbitrary points and scramble the image. When a splashAlt is
+            // present, emit BOTH variants tagged by name — CSS shows exactly
+            // one based on the real device viewport, which beats character
+            // metrics at deciding what actually fits.
+            const variants = line.splashAlt
+                ? [{ text: line.value, variant: "desktop" }, { text: line.splashAlt, variant: "mobile" }]
+                : [{ text: line.value, variant: null }];
+            for (const v of variants) {
+                for (const parsedLine of parseTerminalMarkupRuns(v.text || "")) {
+                    normalized.push({ kind: "runs", runs: parsedLine, preserve: true, splashVariant: v.variant });
+                }
             }
             continue;
         }
@@ -1322,12 +1331,13 @@ function parseStructuredChatBlocks(lines = []) {
         // detection entirely and render as one preserve block, so no line
         // ever rewraps or gets reinterpreted as a structured element.
         if (currentLine?.preserve) {
+            const variant = currentLine.splashVariant || null;
             const preserveLines = [];
-            while (index < lines.length && lines[index]?.preserve) {
+            while (index < lines.length && lines[index]?.preserve && (lines[index].splashVariant || null) === variant) {
                 preserveLines.push(lines[index]);
                 index += 1;
             }
-            blocks.push({ type: "preserve", lines: preserveLines });
+            blocks.push({ type: "preserve", lines: preserveLines, splashVariant: variant });
             continue;
         }
 
@@ -1483,7 +1493,8 @@ function StructuredChatBlocks({ lines, theme }) {
     return React.createElement(React.Fragment, null,
         blocks.map((block, index) => {
             if (block.type === "preserve") {
-                return React.createElement("div", { key: `preserve:${index}`, className: "ps-chat-preserve-block" },
+                const variantClass = block.splashVariant ? ` is-splash-${block.splashVariant}` : "";
+                return React.createElement("div", { key: `preserve:${index}`, className: `ps-chat-preserve-block${variantClass}` },
                     block.lines.map((line, lineIndex) => React.createElement(Line, {
                         key: `preserve:${index}:${lineIndex}`,
                         line,
@@ -2049,6 +2060,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,
@@ -2100,6 +2112,20 @@ 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],
+    );
+    // 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],
+    );
     const outboxLines = React.useMemo(
         () => selectOutboxOverlayLines(selectorState, viewState.contentWidth, { tableMode: "sentinel" }),
         [selectorState, viewState.contentWidth],
@@ -2118,7 +2144,7 @@ function ChatPane({ controller, mobile = false, fullWidth = false, showComposer
         actions: null,
         color: chrome.color,
         focused: viewState.focused,
-        lines,
+        lines: chatLines,
         bottomStickyLines: outboxLines,
         scrollOffset: viewState.scroll,
         scrollMode: "bottom",
@@ -4145,6 +4171,41 @@ export function PilotSwarmWebApp({ controller }) {
     const viewport = useMeasuredViewport(viewportRef);
     const mainGridViewport = useMeasuredViewport(mainGridRef);
     const gridViewport = computeGridViewport(viewport);
+
+    // Publish the real viewport in character cells. Without this the ui-core
+    // layout model runs on its 120×40 fallback everywhere in the browser, so
+    // width-derived behavior (markdown wrap width, render metrics, the
+    // splashMobile width swap) assumed a ~120-column terminal regardless of
+    // device — phones kept getting desktop splash art narrower than ~76 cols.
+    React.useEffect(() => {
+        const publish = () => {
+            const probe = document.createElement("span");
+            probe.style.cssText = "position:absolute;visibility:hidden;white-space:pre;";
+            // Measure with the font real lines render in — an off-context
+            // probe can inherit a different size and skew the column count.
+            const sample = document.querySelector(".ps-scroll-panel .ps-line") || document.querySelector(".ps-line");
+            if (sample) probe.style.font = window.getComputedStyle(sample).font;
+            probe.textContent = "0".repeat(100);
+            (sample?.parentElement || document.body).appendChild(probe);
+            const charWidth = (probe.getBoundingClientRect().width / 100) || 8;
+            probe.remove();
+            controller.dispatch({
+                type: "ui/viewport",
+                width: Math.floor(window.innerWidth / charWidth),
+                height: Math.floor(window.innerHeight / SCROLL_ROW_HEIGHT),
+            });
+        };
+        publish();
+        let timer;
+        const onResize = () => { clearTimeout(timer); timer = setTimeout(publish, 150); };
+        window.addEventListener("resize", onResize);
+        window.addEventListener("orientationchange", onResize);
+        return () => {
+            clearTimeout(timer);
+            window.removeEventListener("resize", onResize);
+            window.removeEventListener("orientationchange", onResize);
+        };
+    }, [controller]);
     const [chatFocusMode, setChatFocusMode] = React.useState(false);
     const [chatFocusPane, setChatFocusPane] = React.useState(null);
     const state = useControllerSelector(controller, (rootState) => ({