Skip to content

[Improve] Refine task conversation activity presentation #317

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
brunobergher merged 14 commits into from
Jul 16, 2026
Merged

[Improve] Refine task conversation activity presentation #317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
65a306b
[Improve] Collapse consecutive same-type completed tool calls in chat
roomote Jul 14, 2026
183271c
[Improve] Address PR review on tool-call collapse headers and dedupe
roomote Jul 14, 2026
39ed777
Collapse background conversation activity
brunobergher Jul 16, 2026
eb23c80
Collapse activity after rendered prompt
brunobergher Jul 16, 2026
76d3ea3
Collapse leading conversation activity
brunobergher Jul 16, 2026
303b8f1
Keep todo markers visible in activity groups
brunobergher Jul 16, 2026
984885b
Use todo markers as activity boundaries
brunobergher Jul 16, 2026
ca3ba1b
Update task UI affordances
brunobergher Jul 16, 2026
49ba2a1
Align historical wake input tray
brunobergher Jul 16, 2026
afe03db
Lighten expanded tool details
brunobergher Jul 16, 2026
2343052
Tune ACP message presentation
brunobergher Jul 16, 2026
1651d98
copy
brunobergher Jul 16, 2026
05517c9
[Fix] Keep distinct tool rows and restore failure cues in chat
roomote Jul 16, 2026
83bb101
[Fix] Satisfy tool_call payload typing in activity-group tests
roomote Jul 16, 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
2 changes: 1 addition & 1 deletion apps/web/src/app/(sandbox)/task/[taskId]/ActiveSubtasksList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ function ActiveSubtasksListContent({ taskEntryKey }: ActiveSubtasksListProps) {

return (
<div className="overflow-hidden border-b border-background">
<TodoListPrimitive>
<TodoListPrimitive className="mx-auto w-full max-w-4xl">
<TodoListSection onOpenChange={setIsOpen} open={isOpen}>
<TodoListSectionTrigger>
<TodoListSectionLabel
Expand Down
74 changes: 38 additions & 36 deletions apps/web/src/app/(sandbox)/task/[taskId]/DraftPromptBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,53 +7,55 @@ import { Button, CornerDownLeftIcon, InfoTooltip } from '@/components/system';
interface DraftPromptBannerProps {
draftPrompt: string;
onClick?: () => void;
embedded?: boolean;
}

export function DraftPromptBanner({
draftPrompt,
onClick,
embedded = false,
}: DraftPromptBannerProps) {
const interactive = !!onClick;

return (
<div className="border-t">
<div className="2xl:max-w-5xl mx-auto w-full px-4 pb-5 pt-4">
<div
className={`flex gap-3 items-start ${interactive ? 'cursor-pointer hover:opacity-50' : ''}`}
role={interactive ? 'button' : undefined}
tabIndex={interactive ? 0 : undefined}
onClick={onClick}
onKeyDown={
interactive
? (e) => {
if (e.key === 'Enter' || e.key === ' ') {
onClick();
}
const banner = (
<div className="mx-auto w-full max-w-4xl px-4 pb-5 pt-4">
<div
className={`flex gap-3 items-start ${interactive ? 'cursor-pointer hover:opacity-50' : ''}`}
role={interactive ? 'button' : undefined}
tabIndex={interactive ? 0 : undefined}
onClick={onClick}
onKeyDown={
interactive
? (e) => {
if (e.key === 'Enter' || e.key === ' ') {
onClick();
}
: undefined
}
>
<div className="resize-none font-mono rounded-xl text-sm text-muted-foreground opacity-70 pointer-events-none">
{draftPrompt}
</div>
{interactive && (
<InfoTooltip
iconClassName="mt-1 size-3.5 shrink-0"
content={`${PRODUCT_NAME} is asleep. Wake it up to keep chatting`}
/>
)}
<Button
size="icon"
variant="default"
className="ml-auto"
disabled
aria-label="Submit"
tabIndex={-1}
>
<CornerDownLeftIcon className="size-4" />
</Button>
}
: undefined
}
>
<div className="resize-none font-mono rounded-xl text-sm text-muted-foreground opacity-70 pointer-events-none">
{draftPrompt}
</div>
{interactive && (
<InfoTooltip
iconClassName="mt-1 size-3.5 shrink-0"
content={`${PRODUCT_NAME} is asleep. Wake it up to keep chatting`}
/>
)}
<Button
size="icon"
variant="default"
className="ml-auto"
disabled
aria-label="Submit"
tabIndex={-1}
>
<CornerDownLeftIcon className="size-4" />
</Button>
</div>
</div>
);

return embedded ? banner : <div className="border-t">{banner}</div>;
}
32 changes: 21 additions & 11 deletions apps/web/src/app/(sandbox)/task/[taskId]/HistoricalContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export function HistoricalContent({ session, footer }: HistoricalContentProps) {
<PreviewPaneProvider>
<ClosePreviewOnSleepEffect asleep={isAsleep} />
<div className="flex h-full min-h-0 min-w-0 flex-1">
<FramedSurface surfaceClassName="flex flex-col bg-transparent">
<FramedSurface surfaceClassName="flex flex-col bg-transparent @container">
<PreviewPaneLayout session={session}>
<ArtifactLinkProvider session={session}>
<PreviewCommand
Expand All @@ -94,16 +94,18 @@ export function HistoricalContent({ session, footer }: HistoricalContentProps) {
footer={messagesFooter}
/>
{shouldShowWakeTaskInput && taskRun ? (
<WakeTaskInput
taskRun={taskRun}
initialPrompt={draftPrompt ?? ''}
/>
) : (
isResuming &&
draftPrompt && (
<DraftPromptBanner draftPrompt={draftPrompt} />
)
)}
<HistoricalInputTray>
<WakeTaskInput
taskRun={taskRun}
initialPrompt={draftPrompt ?? ''}
embedded
/>
</HistoricalInputTray>
) : isResuming && draftPrompt ? (
<HistoricalInputTray>
<DraftPromptBanner draftPrompt={draftPrompt} embedded />
</HistoricalInputTray>
) : null}
</div>
</ArtifactLinkProvider>
</PreviewPaneLayout>
Expand All @@ -115,6 +117,14 @@ export function HistoricalContent({ session, footer }: HistoricalContentProps) {
);
}

function HistoricalInputTray({ children }: { children: ReactNode }) {
return (
<div className="mx-auto w-full overflow-clip rounded-t-md bg-card @[56rem]:rounded-t-lg transition-colors border-2 border-background rounded-b-3xl">
{children}
</div>
);
}

function ClosePreviewOnSleepEffect({ asleep }: { asleep: boolean }) {
useClosePreviewOnSleep(asleep);
return null;
Expand Down
24 changes: 10 additions & 14 deletions apps/web/src/app/(sandbox)/task/[taskId]/LiveContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,20 +259,16 @@ function LiveContentInner({
}
/>
<div className="mx-auto w-full overflow-clip rounded-t-md bg-card @[56rem]:rounded-t-lg transition-colors border-2 border-background rounded-b-3xl">
<div className="max-w-4xl mx-auto">
<PendingUserInputRequestStateProvider
taskId={session.taskId}
>
<TaskInputStack
session={session}
promptInputRef={promptInputRef}
onFileSearchOpen={handleFileSearchOpen}
onCommandSearchOpen={handleCommandSearchOpen}
onBootStatusChange={onBootStatusChange}
scrollToBottom={scrollToBottom}
/>
</PendingUserInputRequestStateProvider>
</div>
<PendingUserInputRequestStateProvider taskId={session.taskId}>
<TaskInputStack
session={session}
promptInputRef={promptInputRef}
onFileSearchOpen={handleFileSearchOpen}
onCommandSearchOpen={handleCommandSearchOpen}
onBootStatusChange={onBootStatusChange}
scrollToBottom={scrollToBottom}
/>
</PendingUserInputRequestStateProvider>
</div>
</div>
</ArtifactLinkProvider>
Expand Down
Loading
Loading