Skip to content

fix(flows): show "awaiting approval" state in runs lists when a run is halted at an approval gate #4932

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
graycyrus merged 2 commits into from
Jul 15, 2026
Merged

fix(flows): show "awaiting approval" state in runs lists when a run is halted at an approval gate #4932

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e1ab995
fix(flows): show "awaiting approval" state in runs lists when a run i…
graycyrus Jul 15, 2026
d737a08
fix(flows): add grep-friendly lifecycle logs and sanitize error loggi…
graycyrus Jul 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions app/src/components/flows/FlowRunsDrawer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ import { FlowRunsDrawer } from './FlowRunsDrawer';
const listFlowRuns = vi.hoisted(() => vi.fn());
vi.mock('../../services/api/flowsApi', () => ({ listFlowRuns }));

const fetchPendingApprovals = vi.hoisted(() => vi.fn());
vi.mock('../../services/api/approvalApi', () => ({ fetchPendingApprovals }));

const FlowRunInspectorDrawer = vi.hoisted(() => vi.fn());
vi.mock('./FlowRunInspectorDrawer', () => ({
FLOW_RUN_STATUS_ACCENT: {
Expand Down Expand Up @@ -87,6 +90,7 @@ function renderDrawer(flowId: string | null, onClose: () => void, flowName?: str
describe('FlowRunsDrawer', () => {
beforeEach(() => {
vi.clearAllMocks();
fetchPendingApprovals.mockResolvedValue([]);
});

it('renders null when flowId is null', () => {
Expand Down Expand Up @@ -123,6 +127,41 @@ describe('FlowRunsDrawer', () => {
expect(row).toHaveTextContent('Completed with warnings');
});

it('shows "Awaiting approval" for a running run halted at a matching flow approval gate', async () => {
listFlowRuns.mockResolvedValue([makeRun({ id: 'run-1', status: 'running' })]);
fetchPendingApprovals.mockResolvedValue([
{
request_id: 'req-1',
tool_name: 'SLACK_SEND_MESSAGE',
action_summary: 'Send Slack message',
args_redacted: {},
session_id: 'session-1',
created_at: '2026-01-01T00:00:00Z',
expires_at: null,
source_context: { kind: 'flow', flow_id: 'flow-1', run_id: 'run-1' },
},
]);
renderDrawer('flow-1', vi.fn());

const row = await screen.findByTestId('flow-run-row-run-1');
await waitFor(() => expect(row).toHaveTextContent('Awaiting approval'));
expect(screen.getByTestId('flow-run-row-dot-run-1').className.includes('dot-pending')).toBe(
true
);
});

it('leaves a running run without a matching flow approval labeled "Running"', async () => {
listFlowRuns.mockResolvedValue([makeRun({ id: 'run-1', status: 'running' })]);
fetchPendingApprovals.mockResolvedValue([]);
renderDrawer('flow-1', vi.fn());

const row = await screen.findByTestId('flow-run-row-run-1');
await waitFor(() => expect(row).toHaveTextContent('Running'));
expect(screen.getByTestId('flow-run-row-dot-run-1').className.includes('dot-running')).toBe(
true
);
});

it('falls back to a generic title when no flowName is given', async () => {
listFlowRuns.mockResolvedValue([]);
renderDrawer('flow-1', vi.fn());
Expand Down
12 changes: 9 additions & 3 deletions app/src/components/flows/FlowRunsDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ import { useCallback, useEffect, useRef, useState } from 'react';

import { useEscapeKey } from '../../hooks/useEscapeKey';
import { useFlowRunsLiveRefresh } from '../../hooks/useFlowRunsLiveRefresh';
import {
resolveDisplayStatus,
useRunsPendingApprovalSet,
} from '../../hooks/useRunsPendingApprovalSet';
import { useT } from '../../lib/i18n/I18nContext';
import { type FlowRun, listFlowRuns } from '../../services/api/flowsApi';
import {
Expand Down Expand Up @@ -142,6 +146,7 @@ export function FlowRunsDrawer({ flowId, flowName, onClose, onFixWithAgent }: Pr
}, [flowId]);

useFlowRunsLiveRefresh(runs, refetch);
const pendingRunIds = useRunsPendingApprovalSet(runs);

useEscapeKey(
() => {
Expand Down Expand Up @@ -213,6 +218,7 @@ export function FlowRunsDrawer({ flowId, flowName, onClose, onFixWithAgent }: Pr
<ul className="space-y-2" data-testid="flow-runs-list">
{runs.map(run => {
const startedAt = formatTimestamp(run.started_at);
const displayStatus = resolveDisplayStatus(run, pendingRunIds);
return (
<li key={run.id}>
<button
Expand All @@ -222,12 +228,12 @@ export function FlowRunsDrawer({ flowId, flowName, onClose, onFixWithAgent }: Pr
className="flex w-full items-center gap-2 rounded-lg border border-line bg-surface-muted px-3 py-2 text-left text-xs hover:bg-surface-hover">
<span
data-testid={`flow-run-row-dot-${run.id}`}
className={`h-2 w-2 shrink-0 rounded-full ${FLOW_RUN_STATUS_DOT[run.status]}`}
className={`h-2 w-2 shrink-0 rounded-full ${FLOW_RUN_STATUS_DOT[displayStatus]}`}
aria-hidden
/>
<span
className={`inline-flex shrink-0 items-center rounded-full border px-2 py-0.5 font-medium ${FLOW_RUN_STATUS_ACCENT[run.status]}`}>
{t(FLOW_RUN_STATUS_KEY[run.status])}
className={`inline-flex shrink-0 items-center rounded-full border px-2 py-0.5 font-medium ${FLOW_RUN_STATUS_ACCENT[displayStatus]}`}>
{t(FLOW_RUN_STATUS_KEY[displayStatus])}
</span>
{startedAt && (
<span className="truncate text-content-muted">{startedAt}</span>
Expand Down
33 changes: 33 additions & 0 deletions app/src/components/flows/FlowRunsSidebar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ import FlowRunsSidebar from './FlowRunsSidebar';
const listFlowRuns = vi.hoisted(() => vi.fn());
vi.mock('../../services/api/flowsApi', () => ({ listFlowRuns }));

const fetchPendingApprovals = vi.hoisted(() => vi.fn());
vi.mock('../../services/api/approvalApi', () => ({ fetchPendingApprovals }));

// Capture the props handed to the drawer so "Fix with agent" can be invoked
// directly without standing up the drawer's own run-polling machinery
// (mirrors `FlowApprovalCard.test.tsx`'s stub pattern).
Expand Down Expand Up @@ -97,6 +100,7 @@ describe('FlowRunsSidebar', () => {
beforeEach(() => {
vi.clearAllMocks();
inspectorDrawerProps.current = null;
fetchPendingApprovals.mockResolvedValue([]);
});

it('lists runs and opens the inspector drawer for the clicked run', async () => {
Expand Down Expand Up @@ -179,4 +183,33 @@ describe('FlowRunsSidebar', () => {

expect(await screen.findByTestId('flow-runs-sidebar-empty')).toBeInTheDocument();
});

it('shows "Awaiting approval" for a running run halted at an approval gate', async () => {
listFlowRuns.mockResolvedValue([makeRun({ status: 'running' })]);
fetchPendingApprovals.mockResolvedValue([
{
request_id: 'req-1',
tool_name: 'SLACK_SEND_MESSAGE',
action_summary: 'Send Slack message',
args_redacted: {},
session_id: 'session-1',
created_at: '2026-07-13T18:23:00Z',
expires_at: null,
source_context: { kind: 'flow', flow_id: 'flow-1', run_id: 'run-1' },
},
]);
renderSidebar();

const runRow = await screen.findByTestId('flow-runs-sidebar-run-run-1');
await waitFor(() => expect(runRow).toHaveTextContent('Awaiting approval'));
});

it('leaves a running run without a matching approval labeled "Running"', async () => {
listFlowRuns.mockResolvedValue([makeRun({ status: 'running' })]);
fetchPendingApprovals.mockResolvedValue([]);
renderSidebar();

const runRow = await screen.findByTestId('flow-runs-sidebar-run-run-1');
await waitFor(() => expect(runRow).toHaveTextContent('Running'));
});
});
54 changes: 31 additions & 23 deletions app/src/components/flows/FlowRunsSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ import { useCallback, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

import { useFlowRunsLiveRefresh } from '../../hooks/useFlowRunsLiveRefresh';
import {
resolveDisplayStatus,
useRunsPendingApprovalSet,
} from '../../hooks/useRunsPendingApprovalSet';
import { useT } from '../../lib/i18n/I18nContext';
import { type FlowRun, listFlowRuns } from '../../services/api/flowsApi';
import { CenteredLoadingState, ErrorBanner } from '../ui/LoadingState';
Expand Down Expand Up @@ -101,6 +105,7 @@ export default function FlowRunsSidebar({ flowId }: FlowRunsSidebarProps) {
}, [load]);

useFlowRunsLiveRefresh(runs, load);
const pendingRunIds = useRunsPendingApprovalSet(runs);

return (
<div className="flex h-full flex-col" data-testid="flow-runs-sidebar">
Expand Down Expand Up @@ -150,31 +155,34 @@ export default function FlowRunsSidebar({ flowId }: FlowRunsSidebarProps) {
)}

<ul className="space-y-1">
{runs.map(run => (
<li key={run.id}>
<button
type="button"
data-testid={`flow-runs-sidebar-run-${run.id}`}
onClick={() => setSelectedRunId(run.id)}
className={`flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-surface-hover ${
selectedRunId === run.id ? 'bg-surface-hover' : ''
}`}>
<span
className={`h-2 w-2 shrink-0 rounded-full ${FLOW_RUN_STATUS_DOT[run.status]}`}
aria-hidden="true"
/>
<span className="min-w-0 flex-1">
{runs.map(run => {
const displayStatus = resolveDisplayStatus(run, pendingRunIds);
return (
<li key={run.id}>
<button
type="button"
data-testid={`flow-runs-sidebar-run-${run.id}`}
onClick={() => setSelectedRunId(run.id)}
className={`flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-surface-hover ${
selectedRunId === run.id ? 'bg-surface-hover' : ''
}`}>
<span
className={`inline-flex items-center rounded-full border px-1.5 py-0.5 text-[10px] font-medium ${FLOW_RUN_STATUS_ACCENT[run.status]}`}>
{t(FLOW_RUN_STATUS_KEY[run.status])}
</span>
<span className="mt-0.5 block truncate text-[11px] text-content-faint">
{relativeTime(run.started_at, t)}
className={`h-2 w-2 shrink-0 rounded-full ${FLOW_RUN_STATUS_DOT[displayStatus]}`}
aria-hidden="true"
/>
<span className="min-w-0 flex-1">
<span
className={`inline-flex items-center rounded-full border px-1.5 py-0.5 text-[10px] font-medium ${FLOW_RUN_STATUS_ACCENT[displayStatus]}`}>
{t(FLOW_RUN_STATUS_KEY[displayStatus])}
</span>
<span className="mt-0.5 block truncate text-[11px] text-content-faint">
{relativeTime(run.started_at, t)}
</span>
</span>
</span>
</button>
</li>
))}
</button>
</li>
);
})}
</ul>
</div>

Expand Down
Loading
Loading