test(playwright): add functional UI flow coverage

app/scripts/e2e-web-build.sh

@@ -14,6 +14,7 @@ export VITE_OPENHUMAN_TARGET="web"
 export VITE_OPENHUMAN_E2E_DEFAULT_CORE_MODE="cloud"
 export VITE_OPENHUMAN_E2E_RESTART_APP_AS_RELOAD="true"
 export VITE_OPENHUMAN_CORE_RPC_URL="http://127.0.0.1:${OPENHUMAN_CORE_PORT:-17788}/rpc"
+export VITE_CHAT_ATTACHMENTS="true"
 
 if [ -f "$REPO_ROOT/.env" ]; then
   # shellcheck source=/dev/null

app/src/components/settings/panels/AgentEditorPage.tsx

@@ -361,6 +361,7 @@ const AgentEditorPage = () => {
                   )}
                   <button
                     type="button"
+                    aria-label={t('settings.agents.editor.selectTools')}
                     onClick={() => setToolsOpen(true)}
                     className="inline-flex items-center gap-1 rounded-full border border-dashed border-stone-300 px-2.5 py-1 text-xs font-medium text-stone-600 hover:border-ocean-400 hover:text-ocean-600 dark:border-neutral-700 dark:text-neutral-300 dark:hover:border-ocean-500 dark:hover:text-ocean-300">
                     <LuPlus className="h-3 w-3" />

app/test/playwright/specs/chat-management-functional.spec.ts

@@ -0,0 +1,117 @@
+import { expect, type Page, test } from '@playwright/test';
+
+import {
+  bootAuthenticatedPage,
+  callCoreRpc,
+  dismissWalkthroughIfPresent,
+  waitForAppReady,
+} from '../helpers/core-rpc';
+
+const MOCK_BASE = `http://127.0.0.1:${process.env.E2E_MOCK_PORT || '18473'}`;
+
+async function setMockBehavior(behavior: Record<string, unknown>): Promise<void> {
+  await fetch(`${MOCK_BASE}/__admin/behavior`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ behavior }),
+  });
+}
+
+async function resetMock(): Promise<void> {
+  await fetch(`${MOCK_BASE}/__admin/reset`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ keepBehavior: false, keepRequests: false }),
+  });
+}
+
+async function selectedThreadId(page: Page): Promise<string | null> {
+  return page.evaluate(() => {
+    const store = (
+      window as unknown as {
+        __OPENHUMAN_STORE__?: {
+          getState?: () => { thread?: { selectedThreadId?: string | null } };
+        };
+      }
+    ).__OPENHUMAN_STORE__;
+    return store?.getState?.().thread?.selectedThreadId ?? null;
+  });
+}
+
+async function openChat(page: Page, userId: string): Promise<void> {
+  await bootAuthenticatedPage(page, userId, '/chat');
+  await waitForAppReady(page);
+  await dismissWalkthroughIfPresent(page);
+  await expect(page.getByTestId('send-message-button')).toBeVisible();
+}
+
+async function newThread(page: Page): Promise<string> {
+  await page.getByRole('button', { name: /^New$/ }).click();
+  await expect.poll(() => selectedThreadId(page), { timeout: 10_000 }).not.toBeNull();
+  return (await selectedThreadId(page))!;
+}
+
+test.describe('Chat management functional coverage', () => {
+  test('attachment preview, remove, and attachment send path remain interactive', async ({
+    page,
+  }) => {
+    await resetMock();
+    await setMockBehavior({
+      llmForcedResponses: JSON.stringify([{ content: 'Attachment received by the assistant.' }]),
+      llmStreamChunkDelayMs: '5',
+    });
+    await openChat(page, 'pw-chat-attachments');
+    await newThread(page);
+
+    const fileInput = page.locator('input[type="file"]');
+    await expect(fileInput).toHaveCount(1);
+    await fileInput.setInputFiles({
+      name: 'pixel.png',
+      mimeType: 'image/png',
+      buffer: Buffer.from(
+        'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+/p9sAAAAASUVORK5CYII=',
+        'base64'
+      ),
+    });
+
+    await expect(page.getByText('pixel.png')).toBeVisible();
+    await page.getByRole('button', { name: /Remove pixel\.png/ }).click();
+    await expect(page.getByText('pixel.png')).toHaveCount(0);
+
+    await fileInput.setInputFiles({
+      name: 'pixel.png',
+      mimeType: 'image/png',
+      buffer: Buffer.from(
+        'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+/p9sAAAAASUVORK5CYII=',
+        'base64'
+      ),
+    });
+    await page.getByPlaceholder('How can I help you today?').fill('Describe this image');
+    await page.getByTestId('send-message-button').click();
+    await expect(page.getByText("This model can't process images.")).toBeVisible({
+      timeout: 30_000,
+    });
+    await expect(page.getByPlaceholder('How can I help you today?')).toBeEnabled();
+  });
+
+  test('thread rename and delete remain usable from the conversation UI', async ({ page }) => {
+    await resetMock();
+    await openChat(page, 'pw-chat-rename-delete');
+    const threadId = await newThread(page);
+    const title = `Playwright thread ${Date.now()}`;
+
+    await page.getByRole('button', { name: 'Edit thread title' }).click({ force: true });
+    await page.getByRole('textbox', { name: 'Edit thread title' }).fill(title);
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('heading', { name: title })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Show sidebar' }).click();
+    await page
+      .getByTestId(`thread-row-${threadId}`)
+      .getByTitle('Delete thread')
+      .click({ force: true });
+    await expect(page.getByText(/delete/i).last()).toBeVisible();
+    await page.getByRole('button', { name: 'Delete', exact: true }).click();
+    await expect(page.getByTestId(`thread-row-${threadId}`)).toHaveCount(0);
+  });
+});

app/test/playwright/specs/connector-session-guard-matrix.spec.ts

@@ -0,0 +1,186 @@
+import { expect, type Page, test } from '@playwright/test';
+
+import {
+  bootRuntimeReadyGuestPage,
+  callCoreRpc,
+  dismissWalkthroughIfPresent,
+  signInViaCallbackToken,
+  waitForAppReady,
+} from '../helpers/core-rpc';
+
+const MOCK_BASE = `http://127.0.0.1:${process.env.E2E_MOCK_PORT || '18473'}`;
+
+type Toolkit = {
+  slug: 'discord' | 'github' | 'jira';
+  name: string;
+  action: string;
+  connectionId: string;
+};
+
+const TOOLKITS: Toolkit[] = [
+  {
+    slug: 'discord',
+    name: 'Discord',
+    action: 'DISCORD_FETCH_MESSAGES',
+    connectionId: 'c-discord-pw',
+  },
+  { slug: 'github', name: 'GitHub', action: 'GITHUB_LIST_REPOS', connectionId: 'c-github-pw' },
+  { slug: 'jira', name: 'Jira', action: 'JIRA_SEARCH_ISSUES', connectionId: 'c-jira-pw' },
+];
+
+async function mockFetch(path: string, init?: RequestInit): Promise<{ data?: unknown }> {
+  const response = await fetch(`${MOCK_BASE}${path}`, init);
+  if (!response.ok) throw new Error(`mock ${path} failed: ${response.status}`);
+  return response.json() as Promise<{ data?: unknown }>;
+}
+
+async function resetMock(): Promise<void> {
+  await mockFetch('/__admin/reset', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ keepBehavior: false, keepRequests: false }),
+  });
+}
+
+async function setMockBehavior(behavior: Record<string, unknown>): Promise<void> {
+  await mockFetch('/__admin/behavior', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ behavior }),
+  });
+}
+
+async function getRequestLog(): Promise<Array<{ method?: string; url?: string; body?: string }>> {
+  const payload = await mockFetch('/__admin/requests');
+  return (payload.data as Array<{ method?: string; url?: string; body?: string }>) ?? [];
+}
+
+async function seedToolkits(status: 'ACTIVE' | 'FAILED' | 'EXPIRED' = 'ACTIVE'): Promise<void> {
+  await setMockBehavior({
+    composioToolkits: JSON.stringify(TOOLKITS.map(toolkit => toolkit.slug)),
+    composioConnections: JSON.stringify(
+      TOOLKITS.map(toolkit => ({ id: toolkit.connectionId, toolkit: toolkit.slug, status }))
+    ),
+  });
+}
+
+async function bootSkills(page: Page, userId: string): Promise<void> {
+  await resetMock();
+  await seedToolkits('ACTIVE');
+  await bootRuntimeReadyGuestPage(page);
+  await signInViaCallbackToken(page, userId);
+  await page.goto('/#/skills');
+  await waitForAppReady(page);
+  await dismissWalkthroughIfPresent(page);
+  await expect(page.getByRole('heading', { name: 'Composio Integrations' })).toBeVisible({
+    timeout: 20_000,
+  });
+}
+
+async function assertSessionAlive(page: Page): Promise<void> {
+  await expect
+    .poll(async () =>
+      page.evaluate(() => {
+        const snapshot = (
+          window as unknown as {
+            __OPENHUMAN_CORE_STATE__?: () => {
+              snapshot?: {
+                currentUser?: { _id?: string | null } | null;
+                sessionToken?: string | null;
+              };
+            };
+          }
+        ).__OPENHUMAN_CORE_STATE__?.()?.snapshot;
+        return {
+          hash: window.location.hash,
+          hasUser: Boolean(snapshot?.currentUser?._id),
+          hasToken: Boolean(snapshot?.sessionToken),
+        };
+      })
+    )
+    .toEqual({ hash: '#/skills', hasUser: true, hasToken: true });
+}
+
+test.describe('Connector session guard matrix', () => {
+  test.beforeEach(async ({ page }, testInfo) => {
+    const slug = testInfo.title.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+    await bootSkills(page, `pw-connector-matrix-${slug}`);
+  });
+
+  for (const toolkit of TOOLKITS) {
+    test(`${toolkit.name} card opens management UI and authorize routes through mock backend`, async ({
+      page,
+    }) => {
+      const card = page.getByTestId(`skill-install-composio-${toolkit.slug}`);
+      await expect(card).toContainText(toolkit.name);
+      await card.click();
+      await expect(page.getByRole('dialog', { name: new RegExp(toolkit.name, 'i') })).toBeVisible();
+      await page.keyboard.press('Escape');
+
+      await callCoreRpc('openhuman.composio_authorize', { toolkit: toolkit.slug });
+      const requests = await getRequestLog();
+      const auth = requests.find(
+        request =>
+          request.method === 'POST' &&
+          request.url?.includes('/agent-integrations/composio/authorize') &&
+          JSON.parse(request.body || '{}').toolkit === toolkit.slug
+      );
+      expect(auth).toBeDefined();
+      await assertSessionAlive(page);
+    });
+  }
+
+  test('Jira connect modal exposes the required site/subdomain input', async ({ page }) => {
+    await setMockBehavior({
+      composioConnections: JSON.stringify(
+        TOOLKITS.filter(toolkit => toolkit.slug !== 'jira').map(toolkit => ({
+          id: toolkit.connectionId,
+          toolkit: toolkit.slug,
+          status: 'ACTIVE',
+        }))
+      ),
+    });
+    await page.reload();
+    await waitForAppReady(page);
+    await page.getByTestId('skill-install-composio-jira').click();
+    const dialog = page.getByRole('dialog', { name: /Jira/i });
+    await expect(dialog).toBeVisible();
+    await expect(dialog.getByRole('textbox', { name: /Atlassian subdomain/i })).toBeVisible();
+  });
+
+  test('failed and expired connector states keep the user signed in and page usable', async ({
+    page,
+  }) => {
+    await seedToolkits('FAILED');
+    await page.reload();
+    await waitForAppReady(page);
+    await expect(page.getByTestId('skill-install-composio-discord')).toContainText('Discord');
+    await assertSessionAlive(page);
+
+    await seedToolkits('EXPIRED');
+    await page.reload();
+    await waitForAppReady(page);
+    await expect(page.getByTestId('skill-install-composio-github')).toContainText(
+      /Reconnect|GitHub/
+    );
+    await assertSessionAlive(page);
+  });
+
+  test('Composio execute and disconnect errors do not clear auth session', async ({ page }) => {
+    await setMockBehavior({ composioExecuteFails: '500' });
+    await expect(
+      callCoreRpc('openhuman.composio_execute', {
+        connection_id: 'c-github-pw',
+        tool: 'GITHUB_LIST_REPOS',
+        arguments: {},
+      })
+    ).rejects.toThrow(/failed/i);
+    await assertSessionAlive(page);
+
+    await setMockBehavior({ composioDeleteFails: '500' });
+    await expect(
+      callCoreRpc('openhuman.composio_delete_connection', { connection_id: 'c-discord-pw' })
+    ).rejects.toThrow(/failed/i);
+    await assertSessionAlive(page);
+  });
+});