+
+
+
+
+
+
+
+
+
+`;
+
+const CONFIG_KEY = 'forgewisp.planning-demo.config';
+const PLANS_KEY = 'forgewisp.plans';
+const VALID_CONFIG = { endpoint: 'https://llm.example/v1/chat', model: 'gpt-4o', apiKey: 'k' };
+
+afterEach(() => {
+ localStorage.removeItem(PLANS_KEY);
+});
+
+describe('submit race guard', () => {
+ beforeAll(async () => {
+ vi.resetModules();
+ localStorage.setItem(CONFIG_KEY, JSON.stringify(VALID_CONFIG));
+ document.body.innerHTML = DEMO_BODY;
+
+ // Stub fetch with a never-resolving promise so agent.run stays in flight.
+ globalThis.fetch = vi.fn().mockReturnValue(new Promise(() => {})) as typeof fetch;
+
+ await import('../src/main.js');
+ });
+
+ afterAll(() => {
+ vi.restoreAllMocks();
+ });
+
+ it('blocks a second submit while a run is in flight', async () => {
+ const form = document.getElementById('chat-form') as HTMLFormElement;
+ const input = document.getElementById('chat-input') as HTMLInputElement;
+ const chat = document.getElementById('chat-messages');
+
+ input.value = 'first message';
+ form.dispatchEvent(new SubmitEvent('submit', { cancelable: true, bubbles: true }));
+
+ // Let the synchronous portion of the handler run (sets inFlightController).
+ await Promise.resolve();
+
+ expect(chat!.querySelectorAll('.message-user').length).toBe(1);
+
+ // Second submit while the first is still in flight.
+ input.value = 'second message';
+ form.dispatchEvent(new SubmitEvent('submit', { cancelable: true, bubbles: true }));
+ await Promise.resolve();
+
+ // Race guard prevented the second message from being appended.
+ expect(chat!.querySelectorAll('.message-user').length).toBe(1);
+ expect(input.disabled).toBe(true);
+ });
+});
+
+describe('chat history', () => {
+ const recordedBodies: Array<{ messages: Array<{ role: string; content: string }> }> = [];
+
+ beforeAll(async () => {
+ vi.resetModules();
+ localStorage.setItem(CONFIG_KEY, JSON.stringify(VALID_CONFIG));
+ document.body.innerHTML = DEMO_BODY;
+
+ const fetchMock = vi.fn().mockImplementation((_url, init: RequestInit) => {
+ const body = JSON.parse(init.body as string) as {
+ messages: Array<{ role: string; content: string }>;
+ };
+ recordedBodies.push(body);
+ const lastUser = body.messages[body.messages.length - 1];
+ const reply = lastUser ? `reply to: ${lastUser.content}` : 'reply';
+ return Promise.resolve(sseResponse(reply));
+ });
+ globalThis.fetch = fetchMock as typeof fetch;
+
+ await import('../src/main.js');
+ });
+
+ afterAll(() => {
+ vi.restoreAllMocks();
+ });
+
+ it('threads prior turns into the next request as history', async () => {
+ const form = document.getElementById('chat-form') as HTMLFormElement;
+ const input = document.getElementById('chat-input') as HTMLInputElement;
+
+ input.value = 'turn one';
+ form.dispatchEvent(new SubmitEvent('submit', { cancelable: true, bubbles: true }));
+ await vi.waitFor(() => {
+ expect(document.querySelectorAll('.message-assistant:not(.thinking-indicator)').length).toBe(
+ 1,
+ );
+ });
+
+ input.value = 'turn two';
+ form.dispatchEvent(new SubmitEvent('submit', { cancelable: true, bubbles: true }));
+ await vi.waitFor(() => {
+ expect(recordedBodies.length).toBeGreaterThanOrEqual(2);
+ expect(document.querySelectorAll('.message-user').length).toBe(2);
+ });
+
+ const second = recordedBodies[recordedBodies.length - 1]!.messages;
+ expect(second[0]!.role).toBe('system');
+ expect(second).toContainEqual({ role: 'user', content: 'turn one' });
+ expect(second).toContainEqual({ role: 'assistant', content: 'reply to: turn one' });
+ expect(second[second.length - 1]).toEqual({ role: 'user', content: 'turn two' });
+ });
+});
+
+describe('createPlan runs directly (read-tier, no confirmation)', () => {
+ beforeAll(async () => {
+ vi.resetModules();
+ localStorage.setItem(CONFIG_KEY, JSON.stringify(VALID_CONFIG));
+ document.body.innerHTML = DEMO_BODY;
+
+ // First request returns two read-tier tools (listPlans + createPlan) in one
+ // assistant turn; subsequent requests return a plain final reply so the
+ // tool loop terminates. Both tools are read-tier, so neither triggers a
+ // confirmation — the agent self-manages its scratchpad without prompts.
+ let callCount = 0;
+ const fetchMock = vi.fn().mockImplementation(() => {
+ callCount += 1;
+ if (callCount === 1) {
+ return Promise.resolve(
+ sseToolCallsResponse([
+ { name: 'listPlans', arguments: JSON.stringify({}) },
+ {
+ name: 'createPlan',
+ arguments: JSON.stringify({
+ title: 'Saturday',
+ items: [{ title: 'gym' }, { title: 'groceries', priority: 'high' }],
+ }),
+ },
+ ]),
+ );
+ }
+ return Promise.resolve(sseResponse('Plan created and tracked.'));
+ });
+ globalThis.fetch = fetchMock as typeof fetch;
+
+ await import('../src/main.js');
+ });
+
+ afterAll(() => {
+ vi.restoreAllMocks();
+ });
+
+ it('runs createPlan with no confirm dialog and persists the plan', async () => {
+ const form = document.getElementById('chat-form') as HTMLFormElement;
+ const input = document.getElementById('chat-input') as HTMLInputElement;
+ const overlay = document.getElementById('confirm-overlay') as HTMLDivElement;
+ const artifacts = document.getElementById('artifacts-list') as HTMLUListElement;
+
+ input.value = 'plan my Saturday';
+ form.dispatchEvent(new SubmitEvent('submit', { cancelable: true, bubbles: true }));
+
+ // The confirm overlay must stay hidden — createPlan is read-tier, so the
+ // agent runs it directly with no user prompt.
+ await vi.waitFor(() => {
+ // The live plan card renders in place (one