mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-22 16:51:28 +02:00
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - The left nav is the main way people move between tasks, the inbox, and Agent Chat > - The nav has separate Inbox and Tasks rows that show overlapping work, and Chat is one row among many > - The side panel beside a chat shows the conversation's own artifacts, not the work the agent did > - People want Chat to be easy to find, and they want one place for their task views > - This pull request moves Chat to the top of Work, shows the agent's tasks and artifacts beside each chat, and adds an experimental flag that folds Inbox into Tasks > - The benefit is a shorter nav and a chat view that shows what the agent is working on. Both changes stay off until an operator enables them ## Linked Issues or Issue Description Refs #14706 (the secondary Agent Chat navigation this change builds on) Refs #14848 (reopen the last visited agent chat) **Subsystem affected** UI navigation (left nav, mobile tab bar), Agent Chat side panel, task list and inbox, and the company artifacts API. **Problem or motivation** Inbox and Tasks are two nav rows for overlapping work. Chat sits in the top group with no clear home. The chat rail lists only agents you already talked to, so you cannot see your other teammates there. The side panel beside a chat shows only the conversation's own artifacts. It does not show the tasks and files the agent made. **Proposed solution** With Agent Chat on, Chat leads the Work section and the rail lists every eligible agent. The chat side panel opens on the agent's tasks as cards, and the agent's artifacts are available from +. A new experimental flag, Combined Inbox + Task List, makes Inbox a set of views inside Tasks. **Alternatives considered** Rebuilding the inbox inside the task list. Instead, `/issues` hosts the existing Inbox component for inbox views and the existing task list for status views, so all inbox behaviour stays the same. **Roadmap alignment** Agent Chat (ROADMAP.md, "Agent Chat (including CEO Chat)"). All changes are behind experimental flags that are off by default. ## What Changed - **Agent Chat nav (streamlined shell):** Chat is the first row of Work, not a top-group row. Workspaces leaves the nav while Agent Chat is on. The mobile tab bar is Home · Chat · + · Tasks · Agents. The legacy shell keeps master's top-group Chat row. - **Chat rail:** `AgentConversationsSidebar` lists every eligible agent. The open chat is first, then conversations by recent activity, then the rest of the roster alphabetically. Terminated agents and agents you left are omitted unless you have history with them. The picker still marks only real conversations as "Open chat". - **Chat side panel:** a new default Tasks tab shows one card per task the agent created, was assigned, commented on, or acted on, newest first. It has the task list's filter popover and a sort control. **+ → Artifacts** shows the agent's artifacts as cards. Cards open in a new tab. Agent Chat off keeps the old Artifacts tab. - **Artifacts API:** `GET /api/companies/:companyId/artifacts` accepts `agentId`. The filter applies to documents, work products, and attachments by the agent each result is attributed to. The shared validator and the UI client carry the new parameter, and the OpenAPI entry picks it up from the shared schema. - **Combined Inbox + Task List flag (`enableCombinedInboxTasks`, off by default):** new card in Settings > Experimental. The Inbox row goes away and its badge moves to Tasks. A Views menu on `/issues` covers Mine, Unread, Blocked, Recent, Everything, All, Active, Backlog, and Done. Bare `/issues` opens the last-used view (default Mine). Links that carry `assignee`, `workspace`, `participantAgentId`, or `q` open All so the filter is kept. `/inbox/*` and `/issues/{all,active,backlog,done,recent}` redirect to the matching view. `/inbox/requests` stays its own page. - **Task detail breadcrumb:** the view key now decides the source, so quick-archive still works after a reload from an inbox view. - **Docs:** `doc/PRODUCT.md` and `doc/SPEC.md` describe the chat rail, the chat side panel, and the new flag. ## Verification - `cd ui && npx vitest run --no-file-parallelism src/components/chat src/components/task-side-panel/TaskSidePanel.test.tsx src/components/AgentConversationsSidebar.test.tsx src/components/Sidebar.test.tsx src/components/SidebarCompanyMenu.test.tsx src/components/Layout.test.tsx src/pages/AgentChats.test.tsx src/pages/InstanceExperimentalSettings.test.tsx src/lib/task-views.test.ts src/lib/issueDetailBreadcrumb.test.ts src/pages/Inbox.test.tsx src/pages/Issues.test.tsx src/App.test.tsx src/App.activity-routing.test.tsx src/components/MobileBottomNav.test.tsx src/components/CommandPalette.test.tsx`: 20 files, 356 tests pass. - `cd server && npx vitest run src/__tests__/company-artifacts-service.test.ts`: 13/13 pass, including the new agent-filter test across all three artifact sources. - The new rail test fails against the unmodified rail. - `pnpm check:token-gates`: all gates clean. - Manual: enable Agent Chat in Settings > Experimental. Open Chat. The rail lists all agents. Open a chat. The side panel shows the agent's tasks. Use **+ → Artifacts** to see the agent's artifacts. Then enable Combined Inbox + Task List. The Inbox row goes away, and Tasks shows a Views menu. - Snapshot baselines are intentionally not updated. See `doc/design/DECISION-SHEET.md`, "Per-change snapshot verification demoted to dormant (Jul 13 2026)". ## Risks - With both flags off, the app behaves like master. The only exception is the API: it accepts a new optional query parameter. - With Agent Chat on, the rail can list many agents in a large company. It uses the agent list the app already loads, and search filters it. - The Tasks panel reads at most 200 recently updated tasks per agent and says so when it reaches the limit. The Artifacts panel reads at most 500 of the agent's artifacts. - Combined Inbox + Task List changes what bare `/issues` opens for people who enable it. Deep links with a task filter still open All. ## Model Used - Claude (Anthropic), model ID `claude-opus-5-5`, through Claude Code with tool use (shell, file edit, test runs). Extended thinking was enabled. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [ ] All Paperclip CI gates are green - [ ] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: scotttong <squadbot000@gmail.com> Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
364 lines
15 KiB
TypeScript
364 lines
15 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
|
|
import { createLocalAgentJwt } from "../../server/src/agent-auth-jwt";
|
|
|
|
import { idle, json, send, setup } from "./agent-chat.shared";
|
|
|
|
test.use({ trace: "retain-on-failure" });
|
|
test.setTimeout(120_000);
|
|
|
|
/**
|
|
* Agent chat session lifecycle coverage: first-open semantics, the feature
|
|
* flag, Stop + queued /new resets, and sidebar discovery. Shared fixtures
|
|
* live in ./agent-chat.shared.ts; project, attachment, and history flows run
|
|
* in agent-chat-projects.spec.ts.
|
|
*/
|
|
test("built chat initializes after service worker takeover and reload with a slow CPU", async ({
|
|
page,
|
|
context,
|
|
request,
|
|
}) => {
|
|
const f = await setup(request);
|
|
try {
|
|
const cdp = await context.newCDPSession(page);
|
|
try {
|
|
await cdp.send("Emulation.setCPUThrottlingRate", { rate: 4 });
|
|
await page.goto(f.route);
|
|
await expect(page.getByTestId("task-chat-composer-input")).toBeVisible();
|
|
// The failed CI traces stopped before React evaluated, while a service
|
|
// worker forwarded the Vite module graph. Keep this test on shipped assets
|
|
// and cover both first takeover and subsequent controlled navigations.
|
|
const scripts = await page.locator('script[type="module"][src]').evaluateAll(
|
|
(elements) => elements.map((element) => element.getAttribute("src")),
|
|
);
|
|
expect(scripts.length).toBeGreaterThan(0);
|
|
expect(scripts.every((src) => src?.startsWith("/assets/"))).toBe(true);
|
|
await page.evaluate(async () => { await navigator.serviceWorker.ready; });
|
|
for (let reload = 0; reload < 3; reload += 1) {
|
|
await page.reload();
|
|
await expect(page.getByTestId("task-chat-composer-input")).toBeVisible();
|
|
expect(await page.evaluate(() => !!navigator.serviceWorker.controller)).toBe(true);
|
|
}
|
|
expect(await json(await request.get(f.chatPath))).toBeNull();
|
|
} finally {
|
|
await cdp.detach();
|
|
}
|
|
} finally {
|
|
await f.restore();
|
|
}
|
|
});
|
|
|
|
test("chat first open is read-only; concurrent first sends and retries share one task", async ({
|
|
page,
|
|
context,
|
|
request,
|
|
}) => {
|
|
const f = await setup(request);
|
|
try {
|
|
await page.goto(f.route);
|
|
await expect(page.getByTestId("task-chat-composer-input")).toBeVisible();
|
|
expect(await json(await request.get(f.chatPath))).toBeNull();
|
|
expect(
|
|
await json(
|
|
await request.get(`/api/companies/${f.company.id}/heartbeat-runs`),
|
|
),
|
|
).toHaveLength(0);
|
|
const other = await context.newPage();
|
|
await other.goto(f.route);
|
|
await Promise.all([send(page, "Same first message"), send(other, "Same first message")]);
|
|
const issue = await idle(request, f.chatPath, 2);
|
|
const initialComments = await json(await request.get(`/api/issues/${issue.id}/comments`));
|
|
expect(initialComments.filter((comment: any) => !comment.authorAgentId && comment.body === "Same first message")).toHaveLength(2);
|
|
const resolved = await Promise.all(
|
|
Array.from({ length: 4 }, () =>
|
|
request.post(f.chatPath, { data: {} }).then(json),
|
|
),
|
|
);
|
|
expect(new Set(resolved.map((row) => row.id))).toEqual(new Set([issue.id]));
|
|
const body = {
|
|
body: "Retry once",
|
|
clientRequestId: "00000000-0000-4000-8000-000000000001",
|
|
};
|
|
const replies = await Promise.all([
|
|
request
|
|
.post(`/api/issues/${issue.id}/comments`, { data: body })
|
|
.then(json),
|
|
request
|
|
.post(`/api/issues/${issue.id}/comments`, { data: body })
|
|
.then(json),
|
|
]);
|
|
expect(replies[0].id).toBe(replies[1].id);
|
|
await idle(request, f.chatPath, 3);
|
|
await page.reload();
|
|
await expect(
|
|
page.getByText("Reply generation 0: Retry once", { exact: true }),
|
|
).toBeVisible();
|
|
expect(
|
|
await json(await request.get(`/api/companies/${f.company.id}/issues`)),
|
|
).toHaveLength(0);
|
|
const dashboard = await json(
|
|
await request.get(`/api/companies/${f.company.id}/dashboard`),
|
|
);
|
|
expect(dashboard.tasks).toEqual({
|
|
open: 0,
|
|
inProgress: 0,
|
|
blocked: 0,
|
|
done: 0,
|
|
});
|
|
const count = (
|
|
await json(
|
|
await request.get(`/api/companies/${f.company.id}/heartbeat-runs`),
|
|
)
|
|
).length;
|
|
await page.goto(`/${f.company.issuePrefix}/issues/${issue.identifier}`);
|
|
await page.goto(f.route);
|
|
expect(
|
|
await json(
|
|
await request.get(`/api/companies/${f.company.id}/heartbeat-runs`),
|
|
),
|
|
).toHaveLength(count);
|
|
await other.close();
|
|
} finally {
|
|
await f.restore();
|
|
}
|
|
});
|
|
|
|
test("feature flag blocks new sends and resets while preserving existing history", async ({
|
|
page,
|
|
request,
|
|
}) => {
|
|
const f = await setup(request);
|
|
try {
|
|
await page.goto(f.route);
|
|
await send(page, "Visible history");
|
|
const issue = await idle(request, f.chatPath);
|
|
await json(
|
|
await request.patch("/api/instance/settings/experimental", {
|
|
data: { enableAgentChat: false },
|
|
}),
|
|
);
|
|
for (const body of ["blocked message", "/new"])
|
|
expect(
|
|
(
|
|
await request.post(`/api/issues/${issue.id}/comments`, {
|
|
data: { body },
|
|
})
|
|
).status(),
|
|
).toBe(404);
|
|
await page.reload();
|
|
await expect(page.getByText(/Agent Chat is disabled/)).toBeVisible();
|
|
expect(
|
|
(await json(await request.get(`/api/issues/${issue.id}/comments`))).some(
|
|
(c: any) => c.body.includes("Visible history"),
|
|
),
|
|
).toBe(true);
|
|
expect((await request.post(f.chatPath, { data: {} })).status()).toBe(404);
|
|
} finally {
|
|
await f.restore();
|
|
}
|
|
});
|
|
|
|
test("Stop then queued /new resets unpause the conversation without losing history", async ({
|
|
page,
|
|
request,
|
|
}) => {
|
|
const f = await setup(request);
|
|
try {
|
|
await page.goto(f.route);
|
|
await send(page, { action: "hold" });
|
|
await expect
|
|
.poll(async () => {
|
|
const chat = await json(await request.get(f.chatPath));
|
|
return (
|
|
chat &&
|
|
(
|
|
await json(await request.get(`/api/issues/${chat.id}/comments`))
|
|
).some(
|
|
(c: any) => c.body === "Provider is streaming and ready to stop.",
|
|
)
|
|
);
|
|
})
|
|
.toBe(true);
|
|
const issue = await json(await request.get(f.chatPath));
|
|
const active = (
|
|
await json(await request.get(`/api/issues/${issue.id}/live-runs`))
|
|
)[0];
|
|
await page.getByTestId("task-chat-composer-stop").click();
|
|
await expect
|
|
.poll(
|
|
async () =>
|
|
(await json(await request.get(`/api/heartbeat-runs/${active.id}`)))
|
|
.status,
|
|
)
|
|
.toBe("cancelled");
|
|
const staleToken = createLocalAgentJwt(
|
|
f.agent.id,
|
|
f.company.id,
|
|
"process",
|
|
active.id,
|
|
);
|
|
expect(staleToken).toBeTruthy();
|
|
const late = await request.post(`/api/issues/${issue.id}/comments`, {
|
|
headers: { Authorization: `Bearer ${staleToken}` },
|
|
data: { body: "Forbidden late response" },
|
|
});
|
|
expect([403, 409]).toContain(late.status());
|
|
const mutation = await request.post(
|
|
`/api/companies/${f.company.id}/projects`,
|
|
{
|
|
headers: { Authorization: `Bearer ${staleToken}` },
|
|
data: { name: "Cancelled project" },
|
|
},
|
|
);
|
|
expect([403, 409]).toContain(mutation.status());
|
|
expect(
|
|
await json(await request.get(`/api/companies/${f.company.id}/projects`)),
|
|
).toHaveLength(0);
|
|
await send(page, "/new");
|
|
await send(page, "/new");
|
|
await send(page, "Fresh followup");
|
|
await idle(request, f.chatPath, 2);
|
|
const fresh = await json(await request.get(f.chatPath));
|
|
expect(fresh.id).toBe(issue.id);
|
|
expect(fresh.conversationSessionGeneration).toBe(2);
|
|
await expect(
|
|
page.getByText("Reply generation 2: Fresh followup", { exact: true }),
|
|
).toBeVisible();
|
|
await page.reload();
|
|
await expect(page.getByText("New session", { exact: true })).toHaveCount(2);
|
|
await expect(
|
|
page.getByRole("separator", { name: "Run completed", exact: true }),
|
|
).toHaveCount(0);
|
|
const runs = await json(
|
|
await request.get(`/api/companies/${f.company.id}/heartbeat-runs`),
|
|
);
|
|
const detailed = await Promise.all(
|
|
runs.map((run: any) =>
|
|
request.get(`/api/heartbeat-runs/${run.id}`).then(json),
|
|
),
|
|
);
|
|
expect(
|
|
detailed.filter((run) => run.contextSnapshot?.conversationReset),
|
|
).toHaveLength(2);
|
|
expect(
|
|
detailed
|
|
.filter((run) => run.contextSnapshot?.conversationReset)
|
|
.every((run) => !run.sessionIdAfter),
|
|
).toBe(true);
|
|
} finally {
|
|
await f.restore();
|
|
}
|
|
});
|
|
|
|
test("secondary chat navigation preserves layout, unique conversations, history, and drafts", async ({
|
|
page,
|
|
request,
|
|
}) => {
|
|
const originalExperimental = await json(await request.get("/api/instance/settings/experimental"));
|
|
const f = await setup(request);
|
|
try {
|
|
await json(await request.patch("/api/instance/settings/experimental", {
|
|
data: { enableStreamlinedUi: true },
|
|
}));
|
|
await page.goto(`/${f.company.issuePrefix}/dashboard`);
|
|
await page.getByRole("link", { name: "Chat", exact: true }).click();
|
|
await expect(page.getByRole("heading", { name: "Who would you like to talk to?" })).toBeVisible();
|
|
const sidebar = page.getByRole("complementary", { name: "Chat", exact: true });
|
|
// The rail lists every eligible agent before any conversation exists.
|
|
const nav = sidebar.getByRole("navigation", { name: "Agent conversations" });
|
|
await expect(nav.getByRole("link")).toHaveText([/^Alpha/, /^Beta/, /^Delta/, /^Epsilon/, /^Gamma/, /^Zeta/]);
|
|
const landingBounds = await sidebar.boundingBox();
|
|
const compose = sidebar.getByRole("button", { name: "Add chat", exact: true });
|
|
const picker = page.getByRole("dialog", { name: "Chat with an agent", exact: true });
|
|
const chatListPath = `/api/companies/${f.company.id}/chats`;
|
|
const betaPath = `${chatListPath}/${f.agents[1].id}`;
|
|
await compose.click();
|
|
await expect(picker.getByRole("option")).toHaveCount(6);
|
|
await picker.getByRole("combobox").fill("Beta");
|
|
await expect(picker.getByRole("option", { name: /^Beta / })).toContainText("New chat");
|
|
await picker.getByRole("combobox").press("Enter");
|
|
await expect(picker).not.toBeVisible();
|
|
await expect(page.getByRole("link", { name: "Configure Beta", exact: true })).toBeVisible();
|
|
expect(await sidebar.boundingBox()).toEqual(landingBounds);
|
|
const beta = await json(await request.get(betaPath));
|
|
expect(beta.conversationAgentId).toBe(f.agents[1].id);
|
|
expect(await json(await request.get(chatListPath))).toHaveLength(1);
|
|
expect(await json(await request.get(`/api/companies/${f.company.id}/heartbeat-runs`))).toHaveLength(0);
|
|
|
|
// Explicitly adding an existing agent must reopen the same conversation.
|
|
await compose.click();
|
|
await expect(picker.getByRole("combobox")).toHaveValue("");
|
|
await picker.getByRole("combobox").fill("Beta");
|
|
await expect(picker.getByRole("option", { name: /^Beta / })).toContainText("Open chat");
|
|
await picker.getByRole("combobox").press("Enter");
|
|
await expect(picker).not.toBeVisible();
|
|
expect((await json(await request.get(betaPath))).id).toBe(beta.id);
|
|
expect(await json(await request.get(chatListPath))).toHaveLength(1);
|
|
|
|
await compose.click();
|
|
await picker.getByRole("combobox").fill("Alpha");
|
|
await picker.getByRole("combobox").press("Enter");
|
|
await expect(picker).not.toBeVisible();
|
|
await expect(page.getByRole("link", { name: "Configure Alpha", exact: true })).toBeVisible();
|
|
const alphaLink = nav.getByRole("link", { name: /^Alpha / });
|
|
const betaLink = nav.getByRole("link", { name: /^Beta / });
|
|
// Open chat first, then other conversations, then the rest alphabetically.
|
|
await expect(nav.getByRole("link")).toHaveText([/^Alpha/, /^Beta/, /^Delta/, /^Epsilon/, /^Gamma/, /^Zeta/]);
|
|
const editor = page.getByTestId("task-chat-composer-input").locator('[contenteditable="true"]');
|
|
await editor.fill("Unsent draft for Alpha");
|
|
await betaLink.click();
|
|
await expect(editor).toHaveText("");
|
|
await alphaLink.click();
|
|
await expect(editor).toContainText("Unsent draft for Alpha");
|
|
|
|
const search = sidebar.getByRole("textbox", { name: "Search agents", exact: true });
|
|
await search.fill("No matching agent");
|
|
await expect(sidebar.getByText("No agents found", { exact: true })).toBeVisible();
|
|
await search.fill("Beta");
|
|
await expect(nav.getByRole("link")).toHaveCount(1);
|
|
await expect(betaLink).toBeVisible();
|
|
await search.press("Escape");
|
|
await expect(nav.getByRole("link")).toHaveCount(6);
|
|
await page.reload();
|
|
await expect(editor).toContainText("Unsent draft for Alpha");
|
|
await expect(nav.getByRole("link")).toHaveCount(6);
|
|
|
|
await page.getByRole("link", { name: "Chat", exact: true }).click();
|
|
await expect(page.getByRole("link", { name: "Configure Alpha", exact: true })).toBeVisible();
|
|
await expect(editor).toContainText("Unsent draft for Alpha");
|
|
expect(await sidebar.boundingBox()).toEqual(landingBounds);
|
|
await page.getByRole("link", { name: "Configure Alpha", exact: true }).click();
|
|
await expect(page).toHaveURL(/\/agents\/.*\/runtime/);
|
|
await json(await request.post(`/api/issues/${beta.id}/comments`, {
|
|
data: {
|
|
body: "Background activity",
|
|
clientRequestId: "00000000-0000-4000-8000-000000000099",
|
|
},
|
|
}));
|
|
await idle(request, betaPath);
|
|
await page.getByRole("link", { name: "Chat", exact: true }).click();
|
|
await expect(page.getByRole("link", { name: "Configure Alpha", exact: true })).toBeVisible();
|
|
await compose.click();
|
|
await picker.getByRole("combobox").fill("Beta");
|
|
await picker.getByRole("combobox").press("Enter");
|
|
await expect(picker).not.toBeVisible();
|
|
await expect(page.getByRole("link", { name: "Configure Beta", exact: true })).toBeVisible();
|
|
await expect(page.getByText("Background activity", { exact: true })).toBeVisible();
|
|
expect((await json(await request.get(betaPath))).id).toBe(beta.id);
|
|
expect(await json(await request.get(chatListPath))).toHaveLength(2);
|
|
await json(await request.post(`/api/agents/${f.agents[1].id}/terminate`));
|
|
await page.goto(`/${f.company.issuePrefix}/chats`);
|
|
await expect(betaLink).toContainText("Terminated");
|
|
await betaLink.click();
|
|
await expect(page).toHaveURL(new RegExp(`/chats/${f.agents[1].id}$`));
|
|
await expect(page.getByText("Background activity", { exact: true })).toBeVisible();
|
|
await page.reload();
|
|
await expect(page.getByText("Background activity", { exact: true })).toBeVisible();
|
|
} finally {
|
|
await f.restore();
|
|
await json(await request.patch("/api/instance/settings/experimental", {
|
|
data: { enableStreamlinedUi: originalExperimental.enableStreamlinedUi },
|
|
}));
|
|
}
|
|
});
|