nav.selectWorkflow(w.id)}
+ onMouseEnter={() => setHovered(w.id)}
+ onMouseLeave={() => setHovered((h) => (h === w.id ? null : h))}
style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '5px 9px', borderRadius: 8, cursor: 'pointer', background: isSel ? WC.selBg : 'transparent' }}
>
@@ -104,6 +108,22 @@ const LeftRail: React.FC<{ nav: AppNav }> = ({ nav }) => {
{active ? describeSchedule(w.schedule) : 'Paused'}
{ e.stopPropagation(); onDelete(w.id); }}
style={{ width: 22, height: 22, borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: WC.faint, flex: 'none' }}
diff --git a/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx b/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
index 60c150ad..88aab2f6 100644
--- a/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
+++ b/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx
@@ -1,11 +1,7 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useAppDispatch } from '@/shared/hooks';
-import { closeWorkflowsApp, setWorkflowsHubPosition, setWorkflowsHubSize } from '@/shared/state/dashboardLayoutSlice';
-import EventRepeatIcon from '@mui/icons-material/EventRepeat';
-import IconButton from '@mui/material/IconButton';
-import CloseIcon from '@mui/icons-material/Close';
-import { useClaudeTokens } from '@/shared/styles/ThemeContext';
-import { useWC, FONT_SERIF } from './uiKit';
+import { setWorkflowsHubPosition, setWorkflowsHubSize } from '@/shared/state/dashboardLayoutSlice';
+import { useWC } from './uiKit';
import WorkflowsAppContent from './WorkflowsAppContent';
type ResizeDir = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
@@ -58,7 +54,6 @@ const WorkflowsAppCard: React.FC
= ({
onCardSelect, onDragStart, onDragMove, onDragEnd, onBringToFront,
}) => {
const WC = useWC();
- const c = useClaudeTokens();
const dispatch = useAppDispatch();
const panRef = useRef({ panX, panY });
@@ -216,31 +211,14 @@ const WorkflowsAppCard: React.FC = ({
transition: noTransition ? 'none' : 'box-shadow 0.3s ease, border-color 0.2s ease',
}}
>
- {/* TITLE BAR (drag handle) */}
-
-
-
- Workflows
-
-
-
{ e.stopPropagation(); dispatch(closeWorkflowsApp()); }}
- onPointerDown={(e) => e.stopPropagation()}
- sx={{ color: c.text.tertiary, '&:hover': { color: c.status.error, bgcolor: `${c.status.error}14` } }}
- >
-
-
-
{
+// The three-pane Workflows body plus its title bar. The card wraps this with drag/resize geometry and passes the drag handlers in; the title bar lives here because Share needs to know which workflow is open.
+const WorkflowsAppContent: React.FC<{ header: CardHeader }> = ({ header }) => {
const WC = useWC();
+ const c = useClaudeTokens();
const dispatch = useAppDispatch();
const target = useAppSelector((s) => s.dashboardLayout.workflowsAppTarget);
const dashboardId = useAppSelector((s) => s.tempState.lastDashboardId) || undefined;
@@ -26,6 +32,10 @@ const WorkflowsAppContent: React.FC = () => {
const [calView, setCalView] = useState
('month');
const [refDate, setRefDate] = useState(() => new Date());
+ // goHome leaves selectedId set, so gate on the mode too or Share lingers in the title bar after leaving the workflow.
+ const shared = useAppSelector((s) => (selectedId ? s.workflows.items[selectedId] : undefined));
+ const selected = mode === 'detail' ? shared : undefined;
+
useEffect(() => {
dispatch(fetchWorkflows(dashboardId));
dispatch(fetchAllRuns(200));
@@ -56,13 +66,53 @@ const WorkflowsAppContent: React.FC = () => {
}), [mode, selectedId, calView, refDate, dashboardId, dispatch]);
return (
-
-
- {mode === 'home' &&
}
- {mode === 'calendar' &&
}
- {mode === 'detail' && selectedId &&
}
- {mode === 'new' &&
}
- {mode === 'trash' &&
}
+
+ {/* TITLE BAR (drag handle) */}
+
+
+
+ Workflows
+
+
+ {selected && (
+ // The share dialog portals to the body but its events still bubble the React tree, so stop them here or dragging the card follows a click inside the modal.
+
e.stopPropagation()}
+ onClick={(e) => e.stopPropagation()}
+ style={{ display: 'flex' }}
+ >
+
+
+ )}
+
{ e.stopPropagation(); dispatch(closeWorkflowsApp()); }}
+ onPointerDown={(e) => e.stopPropagation()}
+ sx={{ color: c.text.tertiary, '&:hover': { color: c.status.error, bgcolor: `${c.status.error}14` } }}
+ >
+
+
+
+
+
+
+ {mode === 'home' && }
+ {mode === 'calendar' && }
+ {mode === 'detail' && selectedId && }
+ {mode === 'new' && }
+ {mode === 'trash' && }
+
);
};
diff --git a/frontend/src/app/pages/Workflows/app/types.ts b/frontend/src/app/pages/Workflows/app/types.ts
index ca086556..6340614b 100644
--- a/frontend/src/app/pages/Workflows/app/types.ts
+++ b/frontend/src/app/pages/Workflows/app/types.ts
@@ -1,6 +1,16 @@
+import type { PointerEvent } from 'react';
+
export type AppMode = 'home' | 'calendar' | 'detail' | 'new' | 'trash';
export type CalView = 'week' | 'month';
+// The card owns drag geometry but the title bar renders inside the content (it needs nav state to know which workflow to share), so the card hands its drag handlers down.
+export interface CardHeader {
+ onPointerDown: (e: PointerEvent) => void;
+ onPointerMove: (e: PointerEvent) => void;
+ onPointerUp: (e: PointerEvent) => void;
+ dragging: boolean;
+}
+
// Navigation + ephemeral UI state for the Workflows app window. Data lives in Redux; this is only "where am I looking right now".
export interface AppNav {
mode: AppMode;
diff --git a/frontend/src/shared/cardContentScroll.ts b/frontend/src/shared/cardContentScroll.ts
new file mode 100644
index 00000000..4cda2236
--- /dev/null
+++ b/frontend/src/shared/cardContentScroll.ts
@@ -0,0 +1,67 @@
+import { getWebview } from './browserRegistry';
+import { getViewWebview } from './viewWebviewRegistry';
+import { getViewFrame } from './viewFrameRegistry';
+
+// One arrow press moves the content about a wheel notch, so a held key and a trackpad flick cover ground at a comparable rate.
+const ARROW_STEP_PX = 120;
+
+// Walks up from whatever sits at the middle of the view (a key press has no cursor to aim with) to the first ancestor that can still scroll horizontally the way dx points, nudges it, and reports whether anything actually moved. The boundary test is the same one the wheel path uses in useCanvasControls, so keys and trackpad hand the gesture back to the canvas at the same moment.
+// This runs in two worlds: stringified into a
guest renderer, and called directly on a same-origin srcdoc iframe. Keep it self-contained - no imports, no closure references - or the stringified copy lands in the guest with dangling names.
+function scrollContentX(doc: Document, win: Window, dx: number): boolean {
+ const nudge = (node: Element | null): boolean => {
+ if (!node) return false;
+ const el = node as HTMLElement;
+ if (el.scrollWidth <= el.clientWidth) return false;
+ // The document's own scroller reports overflowX 'visible' yet still scrolls, so it skips the overflow test the way a real browser does.
+ const isViewport = el === doc.scrollingElement;
+ const overflowX = win.getComputedStyle(el).overflowX;
+ if (!isViewport && overflowX !== 'auto' && overflowX !== 'scroll') return false;
+ const atRight = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
+ const atLeft = el.scrollLeft <= 1;
+ if ((dx > 0 && atRight) || (dx < 0 && atLeft)) return false;
+ // Instant, not smooth: a page with scroll-behavior smooth would otherwise still be animating when the next key repeat arrives.
+ el.scrollBy({ left: dx, behavior: 'instant' });
+ return true;
+ };
+
+ let node: Element | null = doc.elementFromPoint(
+ Math.floor(win.innerWidth / 2),
+ Math.floor(win.innerHeight / 2),
+ );
+ while (node) {
+ if (nudge(node)) return true;
+ node = node.parentElement;
+ }
+ return nudge(doc.scrollingElement);
+}
+
+// Present on real Electron webviews; a browser card falls back to a plain iframe on locked-out Windows builds, which has none of this.
+interface GuestWebview {
+ executeJavaScript?: (code: string) => Promise;
+}
+
+/** Scrolls a card's own content sideways. True means the card absorbed the arrow, so the dashboard must not also navigate to a neighbor. */
+export async function scrollCardContentX(cardId: string, direction: 'left' | 'right'): Promise {
+ const dx = direction === 'right' ? ARROW_STEP_PX : -ARROW_STEP_PX;
+
+ const guest = (getWebview(cardId) ?? getViewWebview(cardId)) as GuestWebview | undefined;
+ if (guest?.executeJavaScript) {
+ // A guest is a separate renderer: the host can't read its scrollLeft, so the whole scroll-or-boundary decision has to be made over there and come back as a yes/no.
+ try {
+ const scrolled = await guest.executeJavaScript(`(${scrollContentX})(document, window, ${dx})`);
+ return scrolled === true;
+ } catch {
+ return false;
+ }
+ }
+
+ // Srcdoc app card: same-origin, so the host can walk the frame's DOM directly. A cross-origin frame throws on contentWindow access; treat that as "didn't scroll" and let the arrow navigate.
+ const frame = getViewFrame(cardId);
+ try {
+ const win = frame?.contentWindow;
+ if (!win) return false;
+ return scrollContentX(win.document, win, dx);
+ } catch {
+ return false;
+ }
+}
diff --git a/frontend/src/shared/state/agentsSlice.ts b/frontend/src/shared/state/agentsSlice.ts
index 18c72f5b..f5a21cb1 100644
--- a/frontend/src/shared/state/agentsSlice.ts
+++ b/frontend/src/shared/state/agentsSlice.ts
@@ -84,6 +84,10 @@ export interface AgentSession {
cost_usd: number;
tokens: { input: number; output: number };
messages: AgentMessage[];
+ /** Compact dashboard-list metadata; full messages are fetched when a chat opens. */
+ last_message_preview?: string;
+ first_user_message?: string;
+ message_count?: number;
pending_approvals: ApprovalRequest[];
branches: Record;
active_branch_id: string;
@@ -342,25 +346,42 @@ export const fetchSession = createAsyncThunk(
export const launchAndSendFirstMessage = createAsyncThunk(
'agents/launchAndSendFirstMessage',
- async ({ draftId, config, prompt, mode, model, provider, images, contextPaths, forcedTools, attachedSkills, selectedBrowserIds, selectedAppIds, selectedSettingIds }: LaunchAndSendPayload) => {
- const launchRes = await fetch(`${AGENTS_API}/launch`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(config),
- });
- const launchData = await launchRes.json();
- const session = launchData.session as AgentSession;
+ async ({ draftId, config, prompt, mode, model, provider, images, contextPaths, forcedTools, attachedSkills, selectedBrowserIds, selectedAppIds, selectedSettingIds }: LaunchAndSendPayload, { dispatch }) => {
+ // Optimistic bubble on the DRAFT before the three round-trips (launch/message/refetch): without it the first message of every fresh chat rendered nothing until the network came back. The fulfilled rekey swaps in the server session, which carries the real turn by then.
+ const clientMessageId = _genOptimisticId();
+ dispatch(addOptimisticMessage({
+ sessionId: draftId,
+ clientMessageId,
+ prompt,
+ contextPaths,
+ forcedTools,
+ attachedSkills: attachedSkills?.map((s) => ({ id: s.id, name: s.name })),
+ images: images?.map((img) => ({ data: img.data, media_type: img.media_type })),
+ hidden: false,
+ }));
+ try {
+ const launchRes = await fetch(`${AGENTS_API}/launch`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(config),
+ });
+ const launchData = await launchRes.json();
+ const session = launchData.session as AgentSession;
- await fetch(`${AGENTS_API}/sessions/${session.id}/message`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ prompt, mode, model, provider, images, context_paths: contextPaths, forced_tools: forcedTools, attached_skills: attachedSkills, selected_browser_ids: selectedBrowserIds, selected_app_output_ids: selectedAppIds, selected_setting_ids: selectedSettingIds }),
- });
+ await fetch(`${AGENTS_API}/sessions/${session.id}/message`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ prompt, mode, model, provider, images, context_paths: contextPaths, forced_tools: forcedTools, attached_skills: attachedSkills, selected_browser_ids: selectedBrowserIds, selected_app_output_ids: selectedAppIds, selected_setting_ids: selectedSettingIds, client_message_id: clientMessageId }),
+ });
- const refreshRes = await fetch(`${AGENTS_API}/sessions/${session.id}`);
- const updatedSession = await refreshRes.json() as AgentSession;
+ const refreshRes = await fetch(`${AGENTS_API}/sessions/${session.id}`);
+ const updatedSession = await refreshRes.json() as AgentSession;
- return { draftId, session: updatedSession };
+ return { draftId, session: updatedSession };
+ } catch (err) {
+ dispatch(markOptimisticFailed({ sessionId: draftId, clientMessageId }));
+ throw err;
+ }
}
);
@@ -1385,10 +1406,20 @@ const agentsSlice = createSlice({
else mergedMessages.splice(at, 0, m);
}
delete (session as AgentSession & { _streamingActive?: boolean })._streamingActive;
+ // Keep the EXISTING object for any message the snapshot didn't change: this refetch runs every 5s while a session is live, and fresh JSON clones of identical messages broke every bubble's React.memo (a whole-transcript re-render hitch per tick).
+ const prevById = new Map((existing?.messages ?? []).map((m) => [m.id, m]));
+ const contentUnchanged = (a: AgentMessage, b: AgentMessage): boolean =>
+ typeof a.content === 'string' && typeof b.content === 'string'
+ ? a.content === b.content
+ : Array.isArray(a.content) && Array.isArray(b.content) && a.content.length === b.content.length;
+ const stableMessages = mergedMessages.map((m) => {
+ const prev = prevById.get(m.id);
+ return prev && prev.timestamp === m.timestamp && prev.role === m.role && contentUnchanged(prev, m) ? prev : m;
+ });
state.sessions[session.id] = {
...session,
name: normalizeSessionName(session.name),
- messages: mergedMessages,
+ messages: stableMessages,
pending_approvals: session.pending_approvals ?? existing?.pending_approvals ?? [],
tool_group_meta: session.tool_group_meta ?? existing?.tool_group_meta ?? {},
// mcp_suggestions live in client state only (the backend never returns them in the session payload). Preserve them across refresh so the suggestion banner stays put until the user dismisses it or activates one.
@@ -1412,13 +1443,17 @@ const agentsSlice = createSlice({
})
.addCase(fetchBrowserAgentChildren.fulfilled, (state, action) => {
for (const session of action.payload) {
- if (!state.sessions[session.id]) {
+ const existing = state.sessions[session.id];
+ if (!existing) {
state.sessions[session.id] = {
...session,
name: normalizeSessionName(session.name),
tool_group_meta: session.tool_group_meta ?? {},
pending_approvals: session.pending_approvals ?? [],
};
+ } else if (existing.messages.length === 0 && session.messages.length > 0) {
+ // Hydrate a child the trimmed session-list poll left message-less; don't touch one mid-stream (already has messages).
+ existing.messages = session.messages;
}
}
})
diff --git a/frontend/src/shared/state/dashboardLayoutSlice.ts b/frontend/src/shared/state/dashboardLayoutSlice.ts
index 772607b1..cc99043c 100644
--- a/frontend/src/shared/state/dashboardLayoutSlice.ts
+++ b/frontend/src/shared/state/dashboardLayoutSlice.ts
@@ -505,8 +505,14 @@ export function computeSpawnPosition(
return placeBesideCard(state, anchor.beside, newW, newH, expandedSessionIds);
}
if (anchor.viewportCenter) {
- // Land dead-center, "in front of you", even if a card is already there. Overlap is intentional (new card sits on top via its higher zOrder); dodging to free space is exactly the "spawned off to the side" behavior we're removing.
- return { x: anchor.viewportCenter.x - newW / 2, y: anchor.viewportCenter.y - newH / 2 };
+ // Closest open gap to the viewport center: dead-center-with-overlap stacked spawns invisibly on top of each other (two center spawns in a row = the second fully covers the first). The spiral stays center-biased so it still reads as "in front of you".
+ return findOpenSpotNear(
+ anchor.viewportCenter.x - newW / 2,
+ anchor.viewportCenter.y - newH / 2,
+ collectOccupiedRects(state, expandedSessionIds),
+ newW,
+ newH,
+ );
}
return findOpenGridCell(collectOccupiedRects(state, expandedSessionIds), newW, newH);
}
diff --git a/frontend/src/shared/state/sessionDisplay.ts b/frontend/src/shared/state/sessionDisplay.ts
index 1ecc7db7..c68c5af3 100644
--- a/frontend/src/shared/state/sessionDisplay.ts
+++ b/frontend/src/shared/state/sessionDisplay.ts
@@ -36,8 +36,13 @@ export function displayChatTitle(session: AgentSession | null | undefined): stri
return session.name;
}
const firstUserMsg = session.messages?.find((m) => m.role === 'user');
- if (firstUserMsg && typeof firstUserMsg.content === 'string') {
- const truncated = truncateForTitle(firstUserMsg.content);
+ const firstUserContent = firstUserMsg && typeof firstUserMsg.content === 'string'
+ ? firstUserMsg.content
+ : session.messages.length === 0
+ ? session.first_user_message
+ : undefined;
+ if (firstUserContent) {
+ const truncated = truncateForTitle(firstUserContent);
if (truncated) return truncated;
}
return session.mode === 'view-builder' ? 'Untitled App' : SESSION_NAME_PLACEHOLDER;
diff --git a/frontend/src/shared/viewFrameRegistry.ts b/frontend/src/shared/viewFrameRegistry.ts
new file mode 100644
index 00000000..8cf228cb
--- /dev/null
+++ b/frontend/src/shared/viewFrameRegistry.ts
@@ -0,0 +1,14 @@
+// Srcdoc app-card iframes keyed by card key. Mirror of viewWebviewRegistry for the outputs that render as an iframe instead of a (no serve URL): the dashboard's arrow-key handler needs a handle on the card's content to scroll it, and a srcdoc frame is same-origin, so no IPC is involved.
+const registry = new Map();
+
+export function registerViewFrame(cardKey: string, frame: HTMLIFrameElement): void {
+ registry.set(cardKey, frame);
+}
+
+export function unregisterViewFrame(cardKey: string): void {
+ registry.delete(cardKey);
+}
+
+export function getViewFrame(cardKey: string): HTMLIFrameElement | undefined {
+ return registry.get(cardKey);
+}
diff --git a/frontend/src/shared/viewWebviewRegistry.ts b/frontend/src/shared/viewWebviewRegistry.ts
index 2f6d0e23..866825e0 100644
--- a/frontend/src/shared/viewWebviewRegistry.ts
+++ b/frontend/src/shared/viewWebviewRegistry.ts
@@ -1,6 +1,8 @@
// Live app-card preview webviews keyed by output id. The delete path looks a card's up here to quiesce its GPU surface BEFORE React rips the element out; without it, deleting a couple of large app cards at once tears down several live SharedImage surfaces in one frame, which piles up "non-existent mailbox" errors and kills the GPU process (taking the whole app down with no dump). Mirror of browserRegistry, for the non-CDP preview webviews.
export interface ViewWebview extends HTMLElement {
loadURL: (url: string) => Promise;
+ // Optional: present on real Electron webviews, absent on any non-Electron stand-in, so callers must ?.() it.
+ executeJavaScript?: (code: string) => Promise;
}
const registry = new Map();