feat(ui): implement refreshed UX for Composer layout (#21212)

Co-authored-by: Keith Guerin <keithguerin@gmail.com>
This commit is contained in:
Jarrod Whelan
2026-03-23 19:30:48 -07:00
committed by GitHub
parent 1560131f94
commit 271908dc94
50 changed files with 1578 additions and 1362 deletions
@@ -18,9 +18,10 @@ describe('<HookStatusDisplay />', () => {
const props = {
activeHooks: [{ name: 'test-hook', eventName: 'BeforeAgent' }],
};
const { lastFrame, unmount } = await render(
const { lastFrame, unmount, waitUntilReady } = await render(
<HookStatusDisplay {...props} />,
);
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
unmount();
});
@@ -32,9 +33,10 @@ describe('<HookStatusDisplay />', () => {
{ name: 'h2', eventName: 'BeforeAgent' },
],
};
const { lastFrame, unmount } = await render(
const { lastFrame, unmount, waitUntilReady } = await render(
<HookStatusDisplay {...props} />,
);
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
unmount();
});
@@ -45,19 +47,47 @@ describe('<HookStatusDisplay />', () => {
{ name: 'step', eventName: 'BeforeAgent', index: 1, total: 3 },
],
};
const { lastFrame, unmount } = await render(
const { lastFrame, unmount, waitUntilReady } = await render(
<HookStatusDisplay {...props} />,
);
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
unmount();
});
it('should return empty string if no active hooks', async () => {
const props = { activeHooks: [] };
const { lastFrame, unmount } = await render(
const { lastFrame, unmount, waitUntilReady } = await render(
<HookStatusDisplay {...props} />,
);
await waitUntilReady();
expect(lastFrame({ allowEmpty: true })).toBe('');
unmount();
});
it('should show generic message when only system hooks are active', async () => {
const props = {
activeHooks: [
{ name: 'sys-hook', eventName: 'BeforeAgent', source: 'system' },
],
};
const { lastFrame, unmount, waitUntilReady } = await render(
<HookStatusDisplay {...props} />,
);
await waitUntilReady();
expect(lastFrame()).toContain('Working...');
unmount();
});
it('matches SVG snapshot for single hook', async () => {
const props = {
activeHooks: [
{ name: 'test-hook', eventName: 'BeforeAgent', source: 'user' },
],
};
const result = await render(<HookStatusDisplay {...props} />);
await result.waitUntilReady();
await expect(result).toMatchSvgSnapshot();
result.unmount();
});
});