Skip to content

Commit 719e486

Browse files
roagaroaga
authored
featautofix): Add UI for stopping at RCA (#97820)
By default, runs stop at the root cause step, so adding buttons back to continue to solution from there. Also adding root cause as the default option for automated runs. In the process of adding the necessary controls for the root cause step, it helped to move the main actions on each card to the bottom for clarity: <img width="798" height="1334" alt="Screenshot 2025-08-13 at 4 41 54 PM" src="https://github.com/user-attachments/assets/da53f050-278a-4afc-80bc-85f6d99103ac" />
1 parent 0efb86c commit 719e486

File tree

11 files changed

+570
-336
lines changed

11 files changed

+570
-336
lines changed

‎static/app/components/events/autofix/autofixChanges.tsx

Lines changed: 118 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -271,109 +271,43 @@ export function AutofixChanges({
271271
<AnimatePresence initial={isChangesFirstAppearance}>
272272
<AnimationWrapper key="card" {...cardAnimationProps}>
273273
<ChangesContainer>
274+
<HeaderWrapper>
275+
<HeaderText>
276+
<HeaderIconWrapper ref={iconCodeRef}>
277+
<IconCode size="md" color="blue400" />
278+
</HeaderIconWrapper>
279+
{t('Code Changes')}
280+
<Button
281+
size="zero"
282+
borderless
283+
title={t('Chat with Seer')}
284+
onClick={handleSelectFirstChange}
285+
analyticsEventName="Autofix: Changes Chat"
286+
analyticsEventKey="autofix.changes.chat"
287+
>
288+
<IconChat />
289+
</Button>
290+
</HeaderText>
291+
</HeaderWrapper>
292+
<AnimatePresence>
293+
{agentCommentThread && iconCodeRef.current && (
294+
<AutofixHighlightPopup
295+
selectedText=""
296+
referenceElement={iconCodeRef.current}
297+
groupId={groupId}
298+
runId={runId}
299+
stepIndex={previousDefaultStepIndex ?? 0}
300+
retainInsightCardIndex={
301+
previousInsightCount !== undefined && previousInsightCount >= 0
302+
? previousInsightCount
303+
: null
304+
}
305+
isAgentComment
306+
blockName={t('Seer is uncertain of the code changes...')}
307+
/>
308+
)}
309+
</AnimatePresence>
274310
<ClippedBox clipHeight={408}>
275-
<HeaderWrapper>
276-
<HeaderText>
277-
<HeaderIconWrapper ref={iconCodeRef}>
278-
<IconCode size="md" color="blue400" />
279-
</HeaderIconWrapper>
280-
{t('Code Changes')}
281-
<Button
282-
size="zero"
283-
borderless
284-
title={t('Chat with Seer')}
285-
onClick={handleSelectFirstChange}
286-
analyticsEventName="Autofix: Changes Chat"
287-
analyticsEventKey="autofix.changes.chat"
288-
>
289-
<IconChat />
290-
</Button>
291-
</HeaderText>
292-
{!prsMade && (
293-
<ButtonBar>
294-
{branchesMade ? (
295-
step.changes.length === 1 && step.changes[0] ? (
296-
<BranchButton change={step.changes[0]} />
297-
) : (
298-
<ScrollCarousel aria-label={t('Check out branches')}>
299-
{step.changes.map(
300-
change =>
301-
change.branch_name && (
302-
<BranchButton
303-
key={`${change.repo_external_id}-${Math.random()}`}
304-
change={change}
305-
/>
306-
)
307-
)}
308-
</ScrollCarousel>
309-
)
310-
) : (
311-
<SetupAndCreateBranchButton
312-
changes={step.changes}
313-
groupId={groupId}
314-
runId={runId}
315-
isBusy={isBusy || isPrProcessing}
316-
onProcessingChange={setIsBranchProcessing}
317-
/>
318-
)}
319-
<SetupAndCreatePRsButton
320-
changes={step.changes}
321-
groupId={groupId}
322-
runId={runId}
323-
isBusy={isBusy || isBranchProcessing}
324-
onProcessingChange={setIsPrProcessing}
325-
/>
326-
</ButtonBar>
327-
)}
328-
{prsMade &&
329-
(step.changes.length === 1 && step.changes[0]?.pull_request?.pr_url ? (
330-
<LinkButton
331-
size="xs"
332-
priority="primary"
333-
icon={<IconOpen size="xs" />}
334-
href={step.changes[0].pull_request.pr_url}
335-
external
336-
>
337-
View PR in {step.changes[0].repo_name}
338-
</LinkButton>
339-
) : (
340-
<ScrollCarousel aria-label={t('View pull requests')}>
341-
{step.changes.map(
342-
change =>
343-
change.pull_request?.pr_url && (
344-
<LinkButton
345-
key={`${change.repo_external_id}-${Math.random()}`}
346-
size="xs"
347-
priority="primary"
348-
icon={<IconOpen size="xs" />}
349-
href={change.pull_request.pr_url}
350-
external
351-
>
352-
View PR in {change.repo_name}
353-
</LinkButton>
354-
)
355-
)}
356-
</ScrollCarousel>
357-
))}
358-
</HeaderWrapper>
359-
<AnimatePresence>
360-
{agentCommentThread && iconCodeRef.current && (
361-
<AutofixHighlightPopup
362-
selectedText=""
363-
referenceElement={iconCodeRef.current}
364-
groupId={groupId}
365-
runId={runId}
366-
stepIndex={previousDefaultStepIndex ?? 0}
367-
retainInsightCardIndex={
368-
previousInsightCount !== undefined && previousInsightCount >= 0
369-
? previousInsightCount
370-
: null
371-
}
372-
isAgentComment
373-
blockName={t('Seer is uncertain of the code changes...')}
374-
/>
375-
)}
376-
</AnimatePresence>
377311
{step.changes.map((change, i) => (
378312
<Fragment key={change.repo_external_id}>
379313
{i > 0 && <Separator />}
@@ -388,6 +322,75 @@ export function AutofixChanges({
388322
</Fragment>
389323
))}
390324
</ClippedBox>
325+
<BottomDivider />
326+
<BottomButtonContainer>
327+
{!prsMade && (
328+
<ButtonBar>
329+
{branchesMade ? (
330+
step.changes.length === 1 && step.changes[0] ? (
331+
<BranchButton change={step.changes[0]} />
332+
) : (
333+
<ScrollCarousel aria-label={t('Check out branches')}>
334+
{step.changes.map(
335+
(change, idx) =>
336+
change.branch_name && (
337+
<BranchButton
338+
key={`${change.repo_external_id}-${idx}`}
339+
change={change}
340+
/>
341+
)
342+
)}
343+
</ScrollCarousel>
344+
)
345+
) : (
346+
<SetupAndCreateBranchButton
347+
changes={step.changes}
348+
groupId={groupId}
349+
runId={runId}
350+
isBusy={isBusy || isPrProcessing}
351+
onProcessingChange={setIsBranchProcessing}
352+
/>
353+
)}
354+
<SetupAndCreatePRsButton
355+
changes={step.changes}
356+
groupId={groupId}
357+
runId={runId}
358+
isBusy={isBusy || isBranchProcessing}
359+
onProcessingChange={setIsPrProcessing}
360+
/>
361+
</ButtonBar>
362+
)}
363+
{prsMade &&
364+
(step.changes.length === 1 && step.changes[0]?.pull_request?.pr_url ? (
365+
<LinkButton
366+
size="xs"
367+
priority="primary"
368+
icon={<IconOpen size="xs" />}
369+
href={step.changes[0].pull_request.pr_url}
370+
external
371+
>
372+
View PR in {step.changes[0].repo_name}
373+
</LinkButton>
374+
) : (
375+
<ScrollCarousel aria-label={t('View pull requests')}>
376+
{step.changes.map(
377+
(change, idx) =>
378+
change.pull_request?.pr_url && (
379+
<LinkButton
380+
key={`${change.repo_external_id}-${idx}`}
381+
size="xs"
382+
priority="primary"
383+
icon={<IconOpen size="xs" />}
384+
href={change.pull_request.pr_url}
385+
external
386+
>
387+
View PR in {change.repo_name}
388+
</LinkButton>
389+
)
390+
)}
391+
</ScrollCarousel>
392+
))}
393+
</BottomButtonContainer>
391394
</ChangesContainer>
392395
</AnimationWrapper>
393396
</AnimatePresence>
@@ -411,8 +414,7 @@ const ChangesContainer = styled('div')`
411414
border: 1px solid ${p => p.theme.border};
412415
border-radius: ${p => p.theme.borderRadius};
413416
box-shadow: ${p => p.theme.dropShadowMedium};
414-
padding-left: ${space(2)};
415-
padding-right: ${space(2)};
417+
padding: ${p => p.theme.space.xl};
416418
`;
417419

418420
const Content = styled('div')`
@@ -434,8 +436,6 @@ const PullRequestTitle = styled('div')`
434436
`;
435437

436438
const RepoChangesHeader = styled('div')`
437-
padding-top: ${space(2)};
438-
padding-bottom: 0;
439439
display: grid;
440440
align-items: center;
441441
grid-template-columns: 1fr auto;
@@ -482,6 +482,17 @@ const HeaderIconWrapper = styled('div')`
482482
justify-content: center;
483483
`;
484484

485+
const BottomDivider = styled('div')`
486+
border-top: 1px solid ${p => p.theme.innerBorder};
487+
margin-top: ${p => p.theme.space.xl};
488+
margin-bottom: ${p => p.theme.space.xl};
489+
`;
490+
491+
const BottomButtonContainer = styled('div')`
492+
display: flex;
493+
justify-content: flex-end;
494+
`;
495+
485496
function CreatePRsButton({
486497
changes,
487498
groupId,
@@ -641,7 +652,7 @@ function CreateBranchButton({
641652
analyticsEventKey="autofix.push_to_branch_clicked"
642653
analyticsParams={{group_id: groupId}}
643654
>
644-
Check Out Locally
655+
{t('Check Out Locally')}
645656
</Button>
646657
);
647658
}

‎static/app/components/events/autofix/autofixHighlightPopup.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -778,7 +778,7 @@ const Arrow = styled('div')`
778778
position: absolute;
779779
width: 12px;
780780
height: 12px;
781-
background: ${p => p.theme.backgroundTertiary};
781+
background: ${p => p.theme.backgroundSecondary};
782782
border: 1px dashed ${p => p.theme.border};
783783
border-right: none;
784784
border-bottom: none;

0 commit comments

Comments
 (0)