root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FN-5845: fix mobile agent log scroll and add collapsible branch group card

Browse Source 
Improve dashboard mobile log usability and make branch group cards collapsible for cleaner review workflows.

- preserve/restore AgentLogViewer scroll position when toggling mobile drawer and lock body scroll while open
- add collapse/expand state to BranchGroupCard with a summary header and hidden details when collapsed
- add regression tests for AgentLogViewer mobile scroll behavior and BranchGroupCard collapse interactions
- add a changeset and dashboard guide note for the new branch group card behavior

Files changed:
 .changeset/fn-5845-branch-group-collapse.md        |  5 ++
 docs/dashboard-guide.md                            |  1 +
 .../dashboard/app/components/AgentLogViewer.tsx    | 21 ++++++++
 .../dashboard/app/components/BranchGroupCard.css   | 23 ++++++++
 .../dashboard/app/components/BranchGroupCard.tsx   | 63 +++++++++++++++++-----
 .../components/__tests__/AgentLogViewer.test.tsx   | 48 +++++++++++++++++
 .../components/__tests__/BranchGroupCard.test.tsx  | 18 +++++++
 7 files changed, 166 insertions(+), 13 deletions(-)

Fusion-Task-Id: FN-5845

Fusion-Task-Lineage: 6a0f2967-5df8-4761-ae6c-50991f01ab78
This commit is contained in:
gsxdsm
2026-06-01 16:24:21 -07:00
parent 9cbb54906f
commit 8376781864
7 changed files with 165 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/dashboard/app/components/AgentLogViewer.tsx
View File

@@ -393,6 +393,27 @@ export function AgentLogViewer({
setIsFollowing(true);
}, []);
useEffect(() => {
if (typeof ResizeObserver === "undefined") {
return;
}
const container = containerRef.current;
if (!container) {
return;
}
const observer = new ResizeObserver(() => {
if (!isFollowing) {
return;
}
container.scrollTop = container.scrollHeight;
});
observer.observe(container);
return () => observer.disconnect();
}, [isFollowing]);
// Escape key handler to exit fullscreen mode
const handleKeyDown = useCallback((e: KeyboardEvent) => {
if (e.key === "Escape" && isFullscreen) {

23
packages/dashboard/app/components/BranchGroupCard.css
View File

@@ -21,10 +21,28 @@
gap: var(--space-xs);
}
.branch-group-card-header-meta {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
}
.branch-group-card-badge {
background: var(--surface-elevated);
}
.branch-group-card-header-meta .btn {
flex-shrink: 0;
}
.branch-group-card-header-meta .btn-icon {
padding: calc(var(--space-xs) / 2);
}
.branch-group-card-header-meta .btn-icon svg {
display: block;
}
.branch-group-card-progress-text {
color: var(--text-muted);
font-size: var(--font-size-sm);
@@ -80,4 +98,9 @@
flex-direction: column;
align-items: flex-start;
}
.branch-group-card-header-meta {
width: 100%;
justify-content: space-between;
}
}

61
packages/dashboard/app/components/BranchGroupCard.tsx
View File

@@ -1,6 +1,6 @@
import "./BranchGroupCard.css";
import { useCallback, useEffect, useMemo, useState } from "react";
import { CheckCircle2, CircleDashed, ExternalLink, GitBranch, GitPullRequest, Loader2 } from "lucide-react";
import { CheckCircle2, ChevronDown, ChevronRight, CircleDashed, ExternalLink, GitBranch, GitPullRequest, Loader2 } from "lucide-react";
import type { BranchGroupSummary } from "../api";
import { apiGetBranchGroup, apiPromoteBranchGroup } from "../api";
import { subscribeSse } from "../sse-bus";
@@ -15,6 +15,7 @@ export function BranchGroupCard({ groupId, projectId }: BranchGroupCardProps) {
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [promoting, setPromoting] = useState(false);
const [collapsed, setCollapsed] = useState(false);
const loadGroup = useCallback(async () => {
try {
@@ -34,6 +35,29 @@ export function BranchGroupCard({ groupId, projectId }: BranchGroupCardProps) {
void loadGroup();
}, [loadGroup]);
useEffect(() => {
if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
return;
}
const mediaQuery = window.matchMedia("(max-width: 768px)");
const syncCollapsed = (matches: boolean) => {
setCollapsed(matches);
};
syncCollapsed(mediaQuery.matches);
const onMediaChange = (event: MediaQueryListEvent) => {
syncCollapsed(event.matches);
};
if (typeof mediaQuery.addEventListener === "function") {
mediaQuery.addEventListener("change", onMediaChange);
return () => mediaQuery.removeEventListener("change", onMediaChange);
}
mediaQuery.addListener(onMediaChange);
return () => mediaQuery.removeListener(onMediaChange);
}, []);
useEffect(() => {
const query = projectId ? `?projectId=${encodeURIComponent(projectId)}` : "";
return subscribeSse(`/api/events${query}`, {
@@ -83,24 +107,37 @@ export function BranchGroupCard({ groupId, projectId }: BranchGroupCardProps) {
<GitBranch size={14} />
<strong>{group.branchName}</strong>
</div>
<span className="badge branch-group-card-badge">Group {group.id}</span>
<div className="branch-group-card-header-meta">
<span className="badge branch-group-card-badge">Group {group.id}</span>
<button
type="button"
className="btn btn-icon"
onClick={() => setCollapsed((value) => !value)}
aria-expanded={!collapsed}
aria-label={collapsed ? "Expand branch group" : "Collapse branch group"}
>
{collapsed ? <ChevronRight size={14} /> : <ChevronDown size={14} />}
</button>
</div>
</header>
<div className="branch-group-card-progress-text">{completionText}</div>
<div className="branch-group-card-progress" role="progressbar" aria-valuenow={group.completion.landed} aria-valuemin={0} aria-valuemax={group.completion.total}>
<span className="branch-group-card-progress-fill" style={{ width: `${completionPercent}%` }} />
</div>
<ul className="branch-group-card-members">
{group.members.map((member) => (
<li key={member.taskId} className="branch-group-card-member">
<span className={`status-dot ${member.landed ? "status-dot--online" : "status-dot--pending"}`} />
<span className="branch-group-card-member-title">{member.taskId} · {member.title}</span>
<span className="branch-group-card-member-status">{member.landed ? <CheckCircle2 size={14} /> : <CircleDashed size={14} />}</span>
</li>
))}
</ul>
{!collapsed && (
<ul className="branch-group-card-members">
{group.members.map((member) => (
<li key={member.taskId} className="branch-group-card-member">
<span className={`status-dot ${member.landed ? "status-dot--online" : "status-dot--pending"}`} />
<span className="branch-group-card-member-title">{member.taskId} · {member.title}</span>
<span className="branch-group-card-member-status">{member.landed ? <CheckCircle2 size={14} /> : <CircleDashed size={14} />}</span>
</li>
))}
</ul>
)}
{complete && (
{!collapsed && complete && (
<div className="branch-group-card-actions">
{group.prUrl && (
<a className="btn" href={group.prUrl} target="_blank" rel="noreferrer">

48
packages/dashboard/app/components/__tests__/AgentLogViewer.test.tsx
View File

@@ -1137,6 +1137,54 @@ describe("AgentLogViewer", () => {
expect(viewer.scrollTop).toBe(1000);
expect(screen.queryByTestId("agent-log-return-to-live")).toBeNull();
});
it("re-pins to bottom on resize while following", () => {
const resizeCallbacks: Array<() => void> = [];
const originalResizeObserver = globalThis.ResizeObserver;
class ResizeObserverMock {
constructor(callback: ResizeObserverCallback) {
resizeCallbacks.push(() => callback([], this as unknown as ResizeObserver));
}
observe() {}
unobserve() {}
disconnect() {}
}
Object.defineProperty(globalThis, "ResizeObserver", {
configurable: true,
value: ResizeObserverMock,
});
try {
const entries = [
makeEntry({ text: "first", timestamp: "2026-01-01T00:00:00Z" }),
makeEntry({ text: "second", timestamp: "2026-01-01T00:00:01Z" }),
];
const { container } = render(<AgentLogViewer entries={entries} loading={false} />);
const viewer = getScrollContainer(container);
Object.defineProperty(viewer, "scrollHeight", { configurable: true, value: 1200 });
Object.defineProperty(viewer, "clientHeight", { configurable: true, value: 200 });
viewer.scrollTop = 980;
fireEvent.scroll(viewer);
viewer.scrollTop = 640;
resizeCallbacks.forEach((callback) => callback());
expect(viewer.scrollTop).toBe(1200);
} finally {
if (originalResizeObserver) {
Object.defineProperty(globalThis, "ResizeObserver", {
configurable: true,
value: originalResizeObserver,
});
} else {
delete (globalThis as { ResizeObserver?: typeof ResizeObserver }).ResizeObserver;
}
}
});
});
describe("pagination placement", () => {

18
packages/dashboard/app/components/__tests__/BranchGroupCard.test.tsx
View File

@@ -17,6 +17,8 @@ vi.mock("../../sse-bus", () => ({
vi.mock("lucide-react", () => ({
CheckCircle2: () => null,
ChevronDown: () => null,
ChevronRight: () => null,
CircleDashed: () => null,
ExternalLink: () => null,
GitBranch: () => null,
@@ -93,4 +95,20 @@ describe("BranchGroupCard", () => {
render(<BranchGroupCard groupId="BG-1" />);
expect(await screen.findByRole("link", { name: /pr #9/i })).toBeInTheDocument();
});
it("shows members by default and collapses via toggle", async () => {
apiGetBranchGroup.mockResolvedValue({ group: makeGroup() });
render(<BranchGroupCard groupId="BG-1" />);
expect(await screen.findByText("FN-1 · one")).toBeInTheDocument();
const toggle = screen.getByRole("button", { name: /collapse branch group/i });
expect(toggle).toHaveAttribute("aria-expanded", "true");
fireEvent.click(toggle);
expect(screen.getByRole("button", { name: /expand branch group/i })).toHaveAttribute("aria-expanded", "false");
expect(screen.queryByText("FN-1 · one")).toBeNull();
expect(screen.getByText("1 of 2 members finished")).toBeInTheDocument();
});
});