(() => {
const baseOptions = [{ id: "", label: noneLabel, searchText: noneLabel }, ...options];
- return orderItemsBySelectedAndRecent(baseOptions, value, recentOptionIds);
- }, [noneLabel, options, recentOptionIds, value]);
+ const ordered = orderItemsBySelectedAndRecent(baseOptions, value, recentOptionIds);
+ return noneAtEnd ? [...ordered.filter((option) => option.id), baseOptions[0]!] : ordered;
+ }, [noneAtEnd, noneLabel, options, recentOptionIds, value]);
const filteredOptions = useMemo(() => {
const term = query.trim().toLowerCase();
@@ -215,51 +219,54 @@ export const InlineEntitySelector = forwardRef
- {
- setQuery(event.target.value);
- }}
- onKeyDown={(event) => {
- if (event.key === "ArrowDown") {
- event.preventDefault();
- event.stopPropagation();
- setHighlightedIndexValue((current) =>
- filteredOptions.length === 0 ? 0 : (current + 1) % filteredOptions.length,
- );
- return;
- }
- if (event.key === "ArrowUp") {
- event.preventDefault();
- event.stopPropagation();
- setHighlightedIndexValue((current) => {
- if (filteredOptions.length === 0) return 0;
- return current <= 0 ? filteredOptions.length - 1 : current - 1;
- });
- return;
- }
- if (event.key === "Enter") {
- event.preventDefault();
- event.stopPropagation();
- commitSelection(highlightedIndexRef.current, true);
- return;
- }
- if (event.key === "Tab" && !event.shiftKey) {
- event.preventDefault();
- event.stopPropagation();
- commitSelection(highlightedIndexRef.current, true);
- return;
- }
- if (event.key === "Escape") {
- event.preventDefault();
- event.stopPropagation();
- setOpen(false);
- }
- }}
- />
+
+
+ {
+ setQuery(event.target.value);
+ }}
+ onKeyDown={(event) => {
+ if (event.key === "ArrowDown") {
+ event.preventDefault();
+ event.stopPropagation();
+ setHighlightedIndexValue((current) =>
+ filteredOptions.length === 0 ? 0 : (current + 1) % filteredOptions.length,
+ );
+ return;
+ }
+ if (event.key === "ArrowUp") {
+ event.preventDefault();
+ event.stopPropagation();
+ setHighlightedIndexValue((current) => {
+ if (filteredOptions.length === 0) return 0;
+ return current <= 0 ? filteredOptions.length - 1 : current - 1;
+ });
+ return;
+ }
+ if (event.key === "Enter") {
+ event.preventDefault();
+ event.stopPropagation();
+ commitSelection(highlightedIndexRef.current, true);
+ return;
+ }
+ if (event.key === "Tab" && !event.shiftKey) {
+ event.preventDefault();
+ event.stopPropagation();
+ commitSelection(highlightedIndexRef.current, true);
+ return;
+ }
+ if (event.key === "Escape") {
+ event.preventDefault();
+ event.stopPropagation();
+ setOpen(false);
+ }
+ }}
+ />
+
{filteredOptions.length === 0 ? (
{emptyMessage}
@@ -273,6 +280,7 @@ export const InlineEntitySelector = forwardRef
setHighlightedIndexValue(index)}
diff --git a/ui/src/components/IssueProperties.test.tsx b/ui/src/components/IssueProperties.test.tsx
index 69e36f8bccb..4a6b329a045 100644
--- a/ui/src/components/IssueProperties.test.tsx
+++ b/ui/src/components/IssueProperties.test.tsx
@@ -14,6 +14,7 @@ import type {
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import type { Issue, IssueDocument } from "@paperclipai/shared";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { getLastProjectId } from "../lib/recent-projects";
import { IssueProperties } from "./IssueProperties";
import { queryKeys } from "../lib/queryKeys";
@@ -1787,6 +1788,27 @@ describe("IssueProperties", () => {
act(() => root.unmount());
});
+ it("leaves project memory unchanged until task property edits are persisted", async () => {
+ localStorage.clear();
+ mockProjectsApi.list.mockResolvedValue([createProject({ name: "Remembered Project" })]);
+ const root = renderProperties(container, {
+ issue: createIssue(), childIssues: [], onUpdate: vi.fn(), inline: true,
+ });
+ await flush();
+ await act(() => findRowTrigger(container, "Project")!.click());
+ const option = [...document.querySelectorAll("button")].find((button) => button.textContent?.trim() === "Remembered Project")!;
+ expect(option).toBeDefined();
+ act(() => option.click());
+ expect(getLastProjectId("company-1")).toBeUndefined();
+ await act(() => findRowTrigger(container, "Project")!.click());
+ const none = [...document.querySelectorAll("button")].find((button) => button.textContent?.trim() === "No project")!;
+ act(() => none.click());
+ expect(getLastProjectId("company-1")).toBeUndefined();
+ expect(getLastProjectId("company-2")).toBeUndefined();
+ act(() => root.unmount());
+ localStorage.clear();
+ });
+
it("shows a green service link above the workspace row for a live non-main workspace", async () => {
mockProjectsApi.list.mockResolvedValue([createProject()]);
const serviceUrl = "http://127.0.0.1:62475";
diff --git a/ui/src/components/MarkdownBody.test.tsx b/ui/src/components/MarkdownBody.test.tsx
index 4f5e0124ab6..7d5aba00be0 100644
--- a/ui/src/components/MarkdownBody.test.tsx
+++ b/ui/src/components/MarkdownBody.test.tsx
@@ -11,6 +11,7 @@ import {
buildRoutineMentionHref,
buildSkillMentionHref,
buildUserMentionHref,
+ appearanceForPalette,
} from "@paperclipai/shared";
import { ThemeProvider } from "../context/ThemeContext";
import { MarkdownBody } from "./MarkdownBody";
@@ -51,7 +52,7 @@ vi.mock("../api/issues", () => ({
// Defaults to null (no provider) so the existing suite exercises the permissive
// path unchanged. Gating tests override the return value per-case.
-const mockUseOptionalCompany = vi.hoisted(() => vi.fn<() => { companies: Array<{ issuePrefix: string }> } | null>(() => null));
+const mockUseOptionalCompany = vi.hoisted(() => vi.fn<() => { companies: Array<{ issuePrefix: string }>; selectedCompanyId?: string } | null>(() => null));
vi.mock("../context/CompanyContext", () => ({
useOptionalCompany: mockUseOptionalCompany,
@@ -173,7 +174,8 @@ describe("MarkdownBody", () => {
expect(html).toContain('data-mention-kind="user"');
expect(html).toContain('href="/agents/agent-123"');
expect(html).toContain('data-mention-kind="agent"');
- expect(html).toContain("--paperclip-mention-icon-mask");
+ expect(html).toContain("--paperclip-mention-avatar-image");
+ expect(html).not.toContain("--paperclip-mention-icon-mask");
expect(html).toContain('href="/projects/project-456"');
expect(html).toContain('data-mention-kind="project"');
expect(html).toContain("--paperclip-mention-project-color:#336699");
@@ -191,6 +193,23 @@ describe("MarkdownBody", () => {
expect(html).not.toContain("javascript:");
});
+ it("uses the current company agent appearance for an old saved mention", () => {
+ mockUseOptionalCompany.mockReturnValue({ companies: [{ issuePrefix: "PAP" }], selectedCompanyId: "company-1" });
+ const client = new QueryClient();
+ client.setQueryData(queryKeys.agents.list("company-1"), [
+ { id: "agent-123", appearance: appearanceForPalette("electric-grove") },
+ ]);
+ const html = renderToStaticMarkup(
+
+
+ {`[@CodexCoder](${buildAgentMentionHref("agent-123", "code")})`}
+
+ ,
+ );
+ expect(html).toContain("/cap-v1/electric-grove/rest.png");
+ expect(html).not.toContain("mention-icon-mask");
+ });
+
it("renders raw HTML tags as escaped text", () => {
const html = renderMarkdown(
'\n\nPlain text
',
diff --git a/ui/src/components/MarkdownBody.tsx b/ui/src/components/MarkdownBody.tsx
index feed8630b80..6c4a9f11b45 100644
--- a/ui/src/components/MarkdownBody.tsx
+++ b/ui/src/components/MarkdownBody.tsx
@@ -10,6 +10,7 @@ import { useTheme } from "../context/ThemeContext";
import { useOptionalCompany } from "../context/CompanyContext";
import { mentionChipInlineStyle, parseMentionChipHref } from "../lib/mention-chips";
import { issuesApi } from "../api/issues";
+import { agentsApi } from "../api/agents";
import { getCachedIssueDetail } from "../lib/issueDetailCache";
import { queryKeys } from "../lib/queryKeys";
import { parseIssueReferenceFromHref, remarkLinkIssueReferences } from "../lib/issue-reference";
@@ -41,10 +42,37 @@ import {
import { normalizeExternalObjectHref } from "../lib/external-object-href";
import { copyTextToClipboard } from "../lib/clipboard";
import type {
+ Agent,
ExternalObjectLivenessState,
ExternalObjectStatusCategory,
} from "@paperclipai/shared";
+function MarkdownAgentMention({ agentId, children, style }: {
+ agentId: string;
+ children: ReactNode;
+ style?: React.CSSProperties;
+}) {
+ const companyId = useOptionalCompany()?.selectedCompanyId;
+ // All mentions share the company list cache; never fetch one agent per chip.
+ const { data: agents } = useQuery({
+ queryKey: queryKeys.agents.list(companyId ?? "__none__"),
+ queryFn: () => agentsApi.list(companyId!),
+ enabled: Boolean(companyId),
+ staleTime: 60_000,
+ });
+ const appearance = agents?.find((agent) => agent.id === agentId)?.appearance;
+ return (
+
+ {children}
+
+ );
+}
+
/**
* Host-resolved external-object metadata for inline markdown decoration.
* The renderer only consumes the host normalized fields here — plugin React
@@ -870,6 +898,13 @@ function MarkdownBodyImpl({
const parsed = href ? parseMentionChipHref(href) : null;
if (parsed) {
+ if (parsed.kind === "agent") {
+ return (
+
+ {linkChildren}
+
+ );
+ }
const targetHref = parsed.kind === "project"
? `/projects/${parsed.projectId}`
: parsed.kind === "issue"
@@ -878,9 +913,7 @@ function MarkdownBodyImpl({
? `/skills/${parsed.skillId}`
: parsed.kind === "routine"
? `/routines/${parsed.routineId}`
- : parsed.kind === "user"
- ? "/company/settings/access"
- : `/agents/${parsed.agentId}`;
+ : "/company/settings/access";
return (
{
).toEqual({
top: 100,
left: 250,
+ maxWidth: 542,
});
});
@@ -1019,6 +1020,7 @@ describe("MarkdownEditor", () => {
).toEqual({
top: 340,
left: 154,
+ maxWidth: 182,
});
});
@@ -1031,6 +1033,7 @@ describe("MarkdownEditor", () => {
).toEqual({
top: 12,
left: 92,
+ maxWidth: 180,
});
});
@@ -1043,6 +1046,7 @@ describe("MarkdownEditor", () => {
).toEqual({
top: 372,
left: 210,
+ maxWidth: 582,
});
});
@@ -1056,6 +1060,7 @@ describe("MarkdownEditor", () => {
).toEqual({
top: 160,
left: 130,
+ maxWidth: 182,
});
});
diff --git a/ui/src/components/MarkdownEditor.tsx b/ui/src/components/MarkdownEditor.tsx
index 1b1190939ec..b7d260b26c3 100644
--- a/ui/src/components/MarkdownEditor.tsx
+++ b/ui/src/components/MarkdownEditor.tsx
@@ -492,7 +492,10 @@ export function computeMentionMenuPosition(
const desiredLeft = viewport.offsetLeft + anchor.viewportLeft + MENTION_MENU_CARET_GAP;
const left = Math.max(minLeft, Math.min(desiredLeft, maxLeft));
- return { top, left };
+ // The menu can grow beyond its estimated width for long task names.
+ // Constrain its actual layout to the space remaining beside the caret.
+ const maxWidth = Math.max(0, viewport.offsetLeft + viewport.width - MENTION_MENU_PADDING - left);
+ return { top, left, maxWidth };
}
function getMentionMenuSize(optionCount: number): MentionMenuSize {
@@ -1030,7 +1033,7 @@ export const MarkdownEditor = forwardRef
const option = mentionOptionByKey.get(`agent:${parsed.agentId}`);
applyMentionChipDecoration(link, {
...parsed,
- icon: parsed.icon ?? option?.agentIcon ?? null,
+ appearance: option?.agentAppearance,
});
}
}, [mentionOptionByKey]);
@@ -1534,6 +1537,7 @@ export const MarkdownEditor = forwardRef
style={{
top: mentionMenuPosition.top,
left: mentionMenuPosition.left,
+ maxWidth: mentionMenuPosition.maxWidth,
touchAction: "pan-y",
WebkitOverflowScrolling: "touch",
}}
diff --git a/ui/src/components/NewIssueDialog.test.tsx b/ui/src/components/NewIssueDialog.test.tsx
index 8e168c10f2c..b92e834bf30 100644
--- a/ui/src/components/NewIssueDialog.test.tsx
+++ b/ui/src/components/NewIssueDialog.test.tsx
@@ -6,6 +6,9 @@ import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { queryKeys } from "../lib/queryKeys";
+import { trackRecentAssignee, trackRecentAssigneeUser } from "../lib/recent-assignees";
+import { getLastProjectId, trackRecentProject } from "../lib/recent-projects";
+import { rememberComposerEffort } from "../lib/recent-composer-effort";
import { NewIssueDialog } from "./NewIssueDialog";
const dialogState = vi.hoisted(() => ({
@@ -46,6 +49,7 @@ const toastState = vi.hoisted(() => ({
const navigateMock = vi.hoisted(() => vi.fn());
const mockIssuesApi = vi.hoisted(() => ({
+ list: vi.fn(),
create: vi.fn(),
upsertDocument: vi.fn(),
uploadAttachment: vi.fn(),
@@ -82,6 +86,8 @@ vi.mock("../context/DialogContext", () => ({
useDialog: () => dialogState,
}));
+vi.mock("../context/SidebarContext", () => ({ useSidebar: () => ({ isMobile: false }) }));
+
vi.mock("../context/CompanyContext", () => ({
useCompany: () => companyState,
}));
@@ -143,10 +149,8 @@ vi.mock("../hooks/useProjectOrder", () => ({
}),
}));
-vi.mock("../lib/recent-assignees", () => ({
- getRecentAssigneeIds: () => [],
- sortAgentsByRecency: (agents: unknown[]) => agents,
- trackRecentAssignee: vi.fn(),
+vi.mock("../api/access", () => ({
+ accessApi: { listUserDirectory: async () => ({ users: [] }) },
}));
vi.mock("../lib/assignees", () => ({
@@ -157,7 +161,7 @@ vi.mock("../lib/assignees", () => ({
assigneeAgentId?: string;
assigneeUserId?: string;
}) => assigneeAgentId ? `agent:${assigneeAgentId}` : assigneeUserId ? `user:${assigneeUserId}` : "",
- currentUserAssigneeOption: () => [],
+ currentUserAssigneeOption: (id: string | null) => id ? [{ id: `user:${id}`, label: "Me" }] : [],
parseAssigneeValue: (value: string) => ({
assigneeAgentId: value.startsWith("agent:") ? value.slice("agent:".length) : null,
assigneeUserId: value.startsWith("user:") ? value.slice("user:".length) : null,
@@ -195,11 +199,13 @@ vi.mock("./InlineEntitySelector", async () => {
placeholder?: string;
className?: string;
triggerDataSlot?: string;
+ options?: { id: string; label: string }[];
+ onChange?: (id: string) => void;
renderTriggerValue?: (option: { id: string; label: string } | null) => ReactNode;
}
- >(function InlineEntitySelectorMock({ value, placeholder, className, triggerDataSlot, renderTriggerValue }, ref) {
+ >(function InlineEntitySelectorMock({ value, placeholder, className, triggerDataSlot, renderTriggerValue, options = [], onChange }, ref) {
return (
-