pilotswarm 0.5.0 → 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,
@@ -2059,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,
@@ -2110,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],
@@ -2128,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",