Merge pull request #1653 from paperclipai/pr/pap-795-ui-polish

fix(ui): polish issue and agent surfaces
2026-03-23 19:28:50 -05:00 · 2026-03-23 19:28:50 -05:00 · fa084e1a16
commit fa084e1a16
parent 3a79d94050 22067c7d1d
39 changed files with 1307 additions and 359 deletions
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@ -535,10 +535,15 @@ export { API_PREFIX, API } from "./api.js";
 export { normalizeAgentUrlKey, deriveAgentUrlKey, isUuidLike } from "./agent-url-key.js";
 export { deriveProjectUrlKey, normalizeProjectUrlKey } from "./project-url-key.js";
 export {
+  AGENT_MENTION_SCHEME,
  PROJECT_MENTION_SCHEME,
+  buildAgentMentionHref,
  buildProjectMentionHref,
+  extractAgentMentionIds,
+  parseAgentMentionHref,
  parseProjectMentionHref,
  extractProjectMentionIds,
+  type ParsedAgentMention,
  type ParsedProjectMention,
 } from "./project-mentions.js";

--- a/packages/shared/src/project-mentions.test.ts
+++ b/packages/shared/src/project-mentions.test.ts
@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildAgentMentionHref,
+  buildProjectMentionHref,
+  extractAgentMentionIds,
+  extractProjectMentionIds,
+  parseAgentMentionHref,
+  parseProjectMentionHref,
+} from "./project-mentions.js";
+
+describe("project-mentions", () => {
+  it("round-trips project mentions with color metadata", () => {
+    const href = buildProjectMentionHref("project-123", "#336699");
+    expect(parseProjectMentionHref(href)).toEqual({
+      projectId: "project-123",
+      color: "#336699",
+    });
+    expect(extractProjectMentionIds(`[@Paperclip App](${href})`)).toEqual(["project-123"]);
+  });
+
+  it("round-trips agent mentions with icon metadata", () => {
+    const href = buildAgentMentionHref("agent-123", "code");
+    expect(parseAgentMentionHref(href)).toEqual({
+      agentId: "agent-123",
+      icon: "code",
+    });
+    expect(extractAgentMentionIds(`[@CodexCoder](${href})`)).toEqual(["agent-123"]);
+  });
+});
--- a/packages/shared/src/project-mentions.ts
+++ b/packages/shared/src/project-mentions.ts
@ -1,16 +1,24 @@
 export const PROJECT_MENTION_SCHEME = "project://";
+export const AGENT_MENTION_SCHEME = "agent://";

 const HEX_COLOR_RE = /^[0-9a-f]{6}$/i;
 const HEX_COLOR_SHORT_RE = /^[0-9a-f]{3}$/i;
 const HEX_COLOR_WITH_HASH_RE = /^#[0-9a-f]{6}$/i;
 const HEX_COLOR_SHORT_WITH_HASH_RE = /^#[0-9a-f]{3}$/i;
 const PROJECT_MENTION_LINK_RE = /\[[^\]]*]\((project:\/\/[^)\s]+)\)/gi;
+const AGENT_MENTION_LINK_RE = /\[[^\]]*]\((agent:\/\/[^)\s]+)\)/gi;
+const AGENT_ICON_NAME_RE = /^[a-z0-9-]+$/i;

 export interface ParsedProjectMention {
  projectId: string;
  color: string | null;
 }

+export interface ParsedAgentMention {
+  agentId: string;
+  icon: string | null;
+}
+
 function normalizeHexColor(input: string | null | undefined): string | null {
  if (!input) return null;
  const trimmed = input.trim();
@ -65,6 +73,36 @@ export function parseProjectMentionHref(href: string): ParsedProjectMention | nu
  };
 }

+export function buildAgentMentionHref(agentId: string, icon?: string | null): string {
+  const trimmedAgentId = agentId.trim();
+  const normalizedIcon = normalizeAgentIcon(icon ?? null);
+  if (!normalizedIcon) {
+    return `${AGENT_MENTION_SCHEME}${trimmedAgentId}`;
+  }
+  return `${AGENT_MENTION_SCHEME}${trimmedAgentId}?i=${encodeURIComponent(normalizedIcon)}`;
+}
+
+export function parseAgentMentionHref(href: string): ParsedAgentMention | null {
+  if (!href.startsWith(AGENT_MENTION_SCHEME)) return null;
+
+  let url: URL;
+  try {
+    url = new URL(href);
+  } catch {
+    return null;
+  }
+
+  if (url.protocol !== "agent:") return null;
+
+  const agentId = `${url.hostname}${url.pathname}`.replace(/^\/+/, "").trim();
+  if (!agentId) return null;
+
+  return {
+    agentId,
+    icon: normalizeAgentIcon(url.searchParams.get("i") ?? url.searchParams.get("icon")),
+  };
+}
+
 export function extractProjectMentionIds(markdown: string): string[] {
  if (!markdown) return [];
  const ids = new Set<string>();
@ -76,3 +114,22 @@ export function extractProjectMentionIds(markdown: string): string[] {
  }
  return [...ids];
 }
+
+export function extractAgentMentionIds(markdown: string): string[] {
+  if (!markdown) return [];
+  const ids = new Set<string>();
+  const re = new RegExp(AGENT_MENTION_LINK_RE);
+  let match: RegExpExecArray | null;
+  while ((match = re.exec(markdown)) !== null) {
+    const parsed = parseAgentMentionHref(match[1]);
+    if (parsed) ids.add(parsed.agentId);
+  }
+  return [...ids];
+}
+
+function normalizeAgentIcon(input: string | null | undefined): string | null {
+  if (!input) return null;
+  const trimmed = input.trim().toLowerCase();
+  if (!trimmed || !AGENT_ICON_NAME_RE.test(trimmed)) return null;
+  return trimmed;
+}
--- a/server/src/services/issues.ts
+++ b/server/src/services/issues.ts
@ -19,7 +19,7 @@ import {
  projectWorkspaces,
  projects,
 } from "@paperclipai/db";
-import { extractProjectMentionIds } from "@paperclipai/shared";
+import { extractAgentMentionIds, extractProjectMentionIds } from "@paperclipai/shared";
 import { conflict, notFound, unprocessable } from "../errors.js";
 import {
  defaultIssueExecutionWorkspaceSettingsForProject,
@ -1462,10 +1462,19 @@ export function issueService(db: Db) {
      const tokens = new Set<string>();
      let m: RegExpExecArray | null;
      while ((m = re.exec(body)) !== null) tokens.add(m[1].toLowerCase());
-      if (tokens.size === 0) return [];
+
+      const explicitAgentMentionIds = extractAgentMentionIds(body);
+      if (tokens.size === 0 && explicitAgentMentionIds.length === 0) return [];
+
      const rows = await db.select({ id: agents.id, name: agents.name })
        .from(agents).where(eq(agents.companyId, companyId));
-      return rows.filter(a => tokens.has(a.name.toLowerCase())).map(a => a.id);
+      const resolved = new Set<string>(explicitAgentMentionIds);
+      for (const agent of rows) {
+        if (tokens.has(agent.name.toLowerCase())) {
+          resolved.add(agent.id);
+        }
+      }
+      return [...resolved];
    },

    findMentionedProjectIds: async (issueId: string) => {
--- a/ui/package.json
+++ b/ui/package.json
@ -13,14 +13,16 @@
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
+    "@lexical/link": "0.35.0",
+    "lexical": "0.35.0",
    "@mdxeditor/editor": "^3.52.4",
    "@paperclipai/adapter-claude-local": "workspace:*",
    "@paperclipai/adapter-codex-local": "workspace:*",
    "@paperclipai/adapter-cursor-local": "workspace:*",
    "@paperclipai/adapter-gemini-local": "workspace:*",
+    "@paperclipai/adapter-openclaw-gateway": "workspace:*",
    "@paperclipai/adapter-opencode-local": "workspace:*",
    "@paperclipai/adapter-pi-local": "workspace:*",
-    "@paperclipai/adapter-openclaw-gateway": "workspace:*",
    "@paperclipai/adapter-utils": "workspace:*",
    "@paperclipai/shared": "workspace:*",
    "@radix-ui/react-slot": "^1.2.4",
--- a/ui/src/components/AgentIconPicker.tsx
+++ b/ui/src/components/AgentIconPicker.tsx
@ -1,46 +1,5 @@
 import { useState, useMemo } from "react";
 import {
-  Bot,
-  Cpu,
-  Brain,
-  Zap,
-  Rocket,
-  Code,
-  Terminal,
-  Shield,
-  Eye,
-  Search,
-  Wrench,
-  Hammer,
-  Lightbulb,
-  Sparkles,
-  Star,
-  Heart,
-  Flame,
-  Bug,
-  Cog,
-  Database,
-  Globe,
-  Lock,
-  Mail,
-  MessageSquare,
-  FileCode,
-  GitBranch,
-  Package,
-  Puzzle,
-  Target,
-  Wand2,
-  Atom,
-  CircuitBoard,
-  Radar,
-  Swords,
-  Telescope,
-  Microscope,
-  Crown,
-  Gem,
-  Hexagon,
-  Pentagon,
-  Fingerprint,
  type LucideIcon,
 } from "lucide-react";
 import { AGENT_ICON_NAMES, type AgentIconName } from "@paperclipai/shared";
@ -51,60 +10,10 @@ import {
 } from "@/components/ui/popover";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
-
-export const AGENT_ICONS: Record<AgentIconName, LucideIcon> = {
-  bot: Bot,
-  cpu: Cpu,
-  brain: Brain,
-  zap: Zap,
-  rocket: Rocket,
-  code: Code,
-  terminal: Terminal,
-  shield: Shield,
-  eye: Eye,
-  search: Search,
-  wrench: Wrench,
-  hammer: Hammer,
-  lightbulb: Lightbulb,
-  sparkles: Sparkles,
-  star: Star,
-  heart: Heart,
-  flame: Flame,
-  bug: Bug,
-  cog: Cog,
-  database: Database,
-  globe: Globe,
-  lock: Lock,
-  mail: Mail,
-  "message-square": MessageSquare,
-  "file-code": FileCode,
-  "git-branch": GitBranch,
-  package: Package,
-  puzzle: Puzzle,
-  target: Target,
-  wand: Wand2,
-  atom: Atom,
-  "circuit-board": CircuitBoard,
-  radar: Radar,
-  swords: Swords,
-  telescope: Telescope,
-  microscope: Microscope,
-  crown: Crown,
-  gem: Gem,
-  hexagon: Hexagon,
-  pentagon: Pentagon,
-  fingerprint: Fingerprint,
-};
+import { AGENT_ICONS, getAgentIcon } from "../lib/agent-icons";

 const DEFAULT_ICON: AgentIconName = "bot";

-export function getAgentIcon(iconName: string | null | undefined): LucideIcon {
-  if (iconName && AGENT_ICON_NAMES.includes(iconName as AgentIconName)) {
-    return AGENT_ICONS[iconName as AgentIconName];
-  }
-  return AGENT_ICONS[DEFAULT_ICON];
-}
-
 interface AgentIconProps {
  icon: string | null | undefined;
  className?: string;
--- a/ui/src/components/CommentThread.tsx
+++ b/ui/src/components/CommentThread.tsx
@ -311,8 +311,11 @@ export function CommentThread({
    return Array.from(agentMap.values())
      .filter((a) => a.status !== "terminated")
      .map((a) => ({
-        id: a.id,
+        id: `agent:${a.id}`,
        name: a.name,
+        kind: "agent",
+        agentId: a.id,
+        agentIcon: a.icon,
      }));
  }, [agentMap, providedMentions]);

--- a/ui/src/components/IssueDocumentsSection.tsx
+++ b/ui/src/components/IssueDocumentsSection.tsx
@ -519,21 +519,23 @@ export function IssueDocumentsSection({
  return (
    <div className="space-y-3">
      {isEmpty && !draft?.isNew ? (
-        <div className="flex items-center justify-end gap-2">
+        <div className="flex items-center justify-end gap-2 min-w-0">
          {extraActions}
-          <Button variant="outline" size="sm" onClick={beginNewDocument}>
+          <Button variant="outline" size="sm" onClick={beginNewDocument} className="shrink-0">
            <Plus className="mr-1.5 h-3.5 w-3.5" />
-            New document
+            <span className="hidden sm:inline">New document</span>
+            <span className="sm:hidden">New</span>
          </Button>
        </div>
      ) : (
-        <div className="flex items-center justify-between gap-2">
-          <h3 className="text-sm font-medium text-muted-foreground">Documents</h3>
-          <div className="flex items-center gap-2">
+        <div className="flex items-center justify-between gap-2 min-w-0">
+          <h3 className="text-sm font-medium text-muted-foreground shrink-0">Documents</h3>
+          <div className="flex items-center gap-2 min-w-0">
            {extraActions}
-            <Button variant="outline" size="sm" onClick={beginNewDocument}>
+            <Button variant="outline" size="sm" onClick={beginNewDocument} className="shrink-0">
              <Plus className="mr-1.5 h-3.5 w-3.5" />
-              New document
+              <span className="hidden sm:inline">New document</span>
+              <span className="sm:hidden">New</span>
            </Button>
          </div>
        </div>
@ -634,29 +636,29 @@ export function IssueDocumentsSection({
            >
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-2 min-w-0">
                    <button
                      type="button"
-                      className="inline-flex h-5 w-5 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground"
+                      className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground"
                      onClick={() => toggleFoldedDocument(doc.key)}
                      aria-label={isFolded ? `Expand ${doc.key} document` : `Collapse ${doc.key} document`}
                      aria-expanded={!isFolded}
                    >
                      {isFolded ? <ChevronRight className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
                    </button>
-                    <span className="rounded-full border border-border px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-muted-foreground">
+                    <span className="shrink-0 rounded-full border border-border px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-muted-foreground">
                      {doc.key}
                    </span>
                    <a
                      href={`#document-${encodeURIComponent(doc.key)}`}
-                      className="text-[11px] text-muted-foreground transition-colors hover:text-foreground hover:underline"
+                      className="truncate text-[11px] text-muted-foreground transition-colors hover:text-foreground hover:underline"
                    >
                      rev {doc.latestRevisionNumber} • updated {relativeTime(doc.updatedAt)}
                    </a>
                  </div>
                  {showTitle && <p className="mt-2 text-sm font-medium">{doc.title}</p>}
                </div>
-                <div className="flex items-center gap-1">
+                <div className="flex items-center gap-1 shrink-0">
                  <Button
                    variant="ghost"
                    size="icon-xs"
--- a/ui/src/components/IssueProperties.tsx
+++ b/ui/src/components/IssueProperties.tsx
@ -1,4 +1,5 @@
 import { useCallback, useMemo, useRef, useState } from "react";
+import { pickTextColorForPillBg } from "@/lib/color-contrast";
 import { Link } from "@/lib/router";
 import type { Issue } from "@paperclipai/shared";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@ -329,7 +330,7 @@ export function IssueProperties({ issue, onUpdate, inline }: IssuePropertiesProp
          style={{
            borderColor: label.color,
            backgroundColor: `${label.color}22`,
-            color: label.color,
+            color: pickTextColorForPillBg(label.color, 0.13),
          }}
        >
          {label.name}
--- a/ui/src/components/IssueRow.tsx
+++ b/ui/src/components/IssueRow.tsx
@ -2,7 +2,6 @@ import type { ReactNode } from "react";
 import type { Issue } from "@paperclipai/shared";
 import { Link } from "@/lib/router";
 import { cn } from "../lib/utils";
-import { PriorityIcon } from "./PriorityIcon";
 import { StatusIcon } from "./StatusIcon";

 type UnreadState = "hidden" | "visible" | "fading";
@ -61,9 +60,6 @@ export function IssueRow({
          ) : null}
          {desktopMetaLeading ?? (
            <>
-              <span className="hidden sm:inline-flex">
-                <PriorityIcon priority={issue.priority} />
-              </span>
              <span className="hidden shrink-0 sm:inline-flex">
                <StatusIcon status={issue.status} />
              </span>
--- a/ui/src/components/IssuesList.tsx
+++ b/ui/src/components/IssuesList.tsx
@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState, useCallback, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
+import { pickTextColorForPillBg } from "@/lib/color-contrast";
 import { useDialog } from "../context/DialogContext";
 import { useCompany } from "../context/CompanyContext";
 import { issuesApi } from "../api/issues";
@ -680,9 +681,6 @@ export function IssuesList({
                  )}
                  desktopMetaLeading={(
                    <>
-                      <span className="hidden sm:inline-flex">
-                        <PriorityIcon priority={issue.priority} />
-                      </span>
                      <span
                        className="hidden shrink-0 sm:inline-flex"
                        onClick={(e) => {
@ -722,7 +720,7 @@ export function IssuesList({
                              className="inline-flex items-center rounded-full border px-1.5 py-0.5 text-[10px] font-medium"
                              style={{
                                borderColor: label.color,
-                                color: label.color,
+                                color: pickTextColorForPillBg(label.color, 0.12),
                                backgroundColor: `${label.color}1f`,
                              }}
                            >
--- a/ui/src/components/MarkdownBody.test.tsx
+++ b/ui/src/components/MarkdownBody.test.tsx
@ -2,6 +2,7 @@

 import { describe, expect, it } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
+import { buildAgentMentionHref, buildProjectMentionHref } from "@paperclipai/shared";
 import { ThemeProvider } from "../context/ThemeContext";
 import { MarkdownBody } from "./MarkdownBody";

@ -28,4 +29,21 @@ describe("MarkdownBody", () => {
    expect(html).toContain('src="/resolved/images/org-chart.png"');
    expect(html).toContain('alt="Org chart"');
  });
+
+  it("renders agent and project mentions as chips", () => {
+    const html = renderToStaticMarkup(
+      <ThemeProvider>
+        <MarkdownBody>
+          {`[@CodexCoder](${buildAgentMentionHref("agent-123", "code")}) [@Paperclip App](${buildProjectMentionHref("project-456", "#336699")})`}
+        </MarkdownBody>
+      </ThemeProvider>,
+    );
+
+    expect(html).toContain('href="/agents/agent-123"');
+    expect(html).toContain('data-mention-kind="agent"');
+    expect(html).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");
+  });
 });
--- a/ui/src/components/MarkdownBody.tsx
+++ b/ui/src/components/MarkdownBody.tsx
@ -1,9 +1,9 @@
-import { isValidElement, useEffect, useId, useState, type CSSProperties, type ReactNode } from "react";
+import { isValidElement, useEffect, useId, useState, type ReactNode } from "react";
 import Markdown, { type Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { parseProjectMentionHref } from "@paperclipai/shared";
 import { cn } from "../lib/utils";
 import { useTheme } from "../context/ThemeContext";
+import { mentionChipInlineStyle, parseMentionChipHref } from "../lib/mention-chips";

 interface MarkdownBodyProps {
  children: string;
@ -36,29 +36,6 @@ function extractMermaidSource(children: ReactNode): string | null {
  return flattenText(childProps.children).replace(/\n$/, "");
 }

-function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
-  const match = /^#([0-9a-f]{6})$/i.exec(hex.trim());
-  if (!match) return null;
-  const value = match[1];
-  return {
-    r: parseInt(value.slice(0, 2), 16),
-    g: parseInt(value.slice(2, 4), 16),
-    b: parseInt(value.slice(4, 6), 16),
-  };
-}
-
-function mentionChipStyle(color: string | null): CSSProperties | undefined {
-  if (!color) return undefined;
-  const rgb = hexToRgb(color);
-  if (!rgb) return undefined;
-  const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
-  return {
-    borderColor: color,
-    backgroundColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.22)`,
-    color: luminance > 0.55 ? "#111827" : "#f8fafc",
-  };
-}
-
 function MermaidDiagramBlock({ source, darkMode }: { source: string; darkMode: boolean }) {
  const renderId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
  const [svg, setSvg] = useState<string | null>(null);
@ -125,16 +102,23 @@ export function MarkdownBody({ children, className, resolveImageSrc }: MarkdownB
      return <pre {...preProps}>{preChildren}</pre>;
    },
    a: ({ href, children: linkChildren }) => {
-      const parsed = href ? parseProjectMentionHref(href) : null;
+      const parsed = href ? parseMentionChipHref(href) : null;
      if (parsed) {
-        const label = linkChildren;
+        const targetHref = parsed.kind === "project"
+          ? `/projects/${parsed.projectId}`
+          : `/agents/${parsed.agentId}`;
        return (
          <a
-            href={`/projects/${parsed.projectId}`}
-            className="paperclip-project-mention-chip"
-            style={mentionChipStyle(parsed.color)}
+            href={targetHref}
+            className={cn(
+              "paperclip-mention-chip",
+              `paperclip-mention-chip--${parsed.kind}`,
+              parsed.kind === "project" && "paperclip-project-mention-chip",
+            )}
+            data-mention-kind={parsed.kind}
+            style={mentionChipInlineStyle(parsed)}
          >
-            {label}
+            {linkChildren}
          </a>
        );
      }
@ -160,7 +144,7 @@ export function MarkdownBody({ children, className, resolveImageSrc }: MarkdownB
        className,
      )}
    >
-      <Markdown remarkPlugins={[remarkGfm]} components={components}>
+      <Markdown remarkPlugins={[remarkGfm]} components={components} urlTransform={(url) => url}>
        {children}
      </Markdown>
    </div>
--- a/ui/src/components/MarkdownEditor.tsx
+++ b/ui/src/components/MarkdownEditor.tsx
@ -6,7 +6,6 @@ import {
  useMemo,
  useRef,
  useState,
-  type CSSProperties,
  type DragEvent,
 } from "react";
 import {
@ -27,15 +26,61 @@ import {
  thematicBreakPlugin,
  type RealmPlugin,
 } from "@mdxeditor/editor";
-import { buildProjectMentionHref, parseProjectMentionHref } from "@paperclipai/shared";
+import { LinkNode, type LinkAttributes } from "@lexical/link";
+import { buildAgentMentionHref, buildProjectMentionHref } from "@paperclipai/shared";
+import { AgentIcon } from "./AgentIconPicker";
+import { applyMentionChipDecoration, clearMentionChipDecoration, parseMentionChipHref } from "../lib/mention-chips";
+import { mentionDeletionPlugin } from "../lib/mention-deletion";
 import { cn } from "../lib/utils";

+const CUSTOM_MENTION_URL_RE = /^(agent|project):\/\//;
+
+class MentionAwareLinkNode extends LinkNode {
+  static clone(node: MentionAwareLinkNode): MentionAwareLinkNode {
+    return new MentionAwareLinkNode(
+      node.getURL(),
+      {
+        rel: node.getRel(),
+        target: node.getTarget(),
+        title: node.getTitle(),
+      },
+      node.getKey(),
+    );
+  }
+
+  constructor(url?: string, attributes?: LinkAttributes, key?: string) {
+    super(url, attributes, key);
+  }
+
+  sanitizeUrl(url: string): string {
+    if (CUSTOM_MENTION_URL_RE.test(url)) return url;
+    return super.sanitizeUrl(url);
+  }
+}
+
+const mentionAwareLinkNodeReplacement = {
+  replace: LinkNode,
+  with: (node: LinkNode) =>
+    new MentionAwareLinkNode(
+      node.getURL(),
+      {
+        rel: node.getRel(),
+        target: node.getTarget(),
+        title: node.getTitle(),
+      },
+      node.getKey(),
+    ),
+  withKlass: MentionAwareLinkNode,
+} as const;
+
 /* ---- Mention types ---- */

 export interface MentionOption {
  id: string;
  name: string;
  kind?: "agent" | "project";
+  agentId?: string;
+  agentIcon?: string | null;
  projectId?: string;
  projectColor?: string | null;
 }
@ -65,6 +110,12 @@ function escapeRegExp(value: string): string {
  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }

+function isSafeMarkdownLinkUrl(url: string): boolean {
+  const trimmed = url.trim();
+  if (!trimmed) return true;
+  return !/^(javascript|data|vbscript):/i.test(trimmed);
+}
+
 /* ---- Mention detection helpers ---- */

 interface MentionState {
@ -154,7 +205,8 @@ function mentionMarkdown(option: MentionOption): string {
  if (option.kind === "project" && option.projectId) {
    return `[@${option.name}](${buildProjectMentionHref(option.projectId, option.projectColor ?? null)}) `;
  }
-  return `@${option.name} `;
+  const agentId = option.agentId ?? option.id.replace(/^agent:/, "");
+  return `[@${option.name}](${buildAgentMentionHref(agentId, option.agentIcon ?? null)}) `;
 }

 /** Replace `@<query>` in the markdown string with the selected mention token. */
@ -166,31 +218,6 @@ function applyMention(markdown: string, query: string, option: MentionOption): s
  return markdown.slice(0, idx) + replacement + markdown.slice(idx + search.length);
 }

-function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
-  const trimmed = hex.trim();
-  const match = /^#([0-9a-f]{6})$/i.exec(trimmed);
-  if (!match) return null;
-  const value = match[1];
-  return {
-    r: parseInt(value.slice(0, 2), 16),
-    g: parseInt(value.slice(2, 4), 16),
-    b: parseInt(value.slice(4, 6), 16),
-  };
-}
-
-function mentionChipStyle(color: string | null): CSSProperties | undefined {
-  if (!color) return undefined;
-  const rgb = hexToRgb(color);
-  if (!rgb) return undefined;
-  const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
-  const textColor = luminance > 0.55 ? "#111827" : "#f8fafc";
-  return {
-    borderColor: color,
-    backgroundColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.22)`,
-    color: textColor,
-  };
-}
-
 /* ---- Component ---- */

 export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(function MarkdownEditor({
@ -221,11 +248,15 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
  const mentionStateRef = useRef<MentionState | null>(null);
  const [mentionIndex, setMentionIndex] = useState(0);
  const mentionActive = mentionState !== null && mentions && mentions.length > 0;
-  const projectColorById = useMemo(() => {
-    const map = new Map<string, string | null>();
+  const mentionOptionByKey = useMemo(() => {
+    const map = new Map<string, MentionOption>();
    for (const mention of mentions ?? []) {
+      if (mention.kind === "agent") {
+        const agentId = mention.agentId ?? mention.id.replace(/^agent:/, "");
+        map.set(`agent:${agentId}`, mention);
+      }
      if (mention.kind === "project" && mention.projectId) {
-        map.set(mention.projectId, mention.projectColor ?? null);
+        map.set(`project:${mention.projectId}`, mention);
      }
    }
    return map;
@ -286,8 +317,9 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
      listsPlugin(),
      quotePlugin(),
      tablePlugin(),
-      linkPlugin(),
+      linkPlugin({ validateUrl: isSafeMarkdownLinkUrl }),
      linkDialogPlugin(),
+      mentionDeletionPlugin(),
      thematicBreakPlugin(),
      codeBlockPlugin({
        defaultCodeBlockLanguage: "txt",
@ -315,31 +347,28 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
    const links = editable.querySelectorAll("a");
    for (const node of links) {
      const link = node as HTMLAnchorElement;
-      const parsed = parseProjectMentionHref(link.getAttribute("href") ?? "");
+      const parsed = parseMentionChipHref(link.getAttribute("href") ?? "");
      if (!parsed) {
-        if (link.dataset.projectMention === "true") {
-          link.dataset.projectMention = "false";
-          link.classList.remove("paperclip-project-mention-chip");
-          link.removeAttribute("contenteditable");
-          link.style.removeProperty("border-color");
-          link.style.removeProperty("background-color");
-          link.style.removeProperty("color");
-        }
+        clearMentionChipDecoration(link);
        continue;
      }

-      const color = parsed.color ?? projectColorById.get(parsed.projectId) ?? null;
-      link.dataset.projectMention = "true";
-      link.classList.add("paperclip-project-mention-chip");
-      link.setAttribute("contenteditable", "false");
-      const style = mentionChipStyle(color);
-      if (style) {
-        link.style.borderColor = style.borderColor ?? "";
-        link.style.backgroundColor = style.backgroundColor ?? "";
-        link.style.color = style.color ?? "";
+      if (parsed.kind === "project") {
+        const option = mentionOptionByKey.get(`project:${parsed.projectId}`);
+        applyMentionChipDecoration(link, {
+          ...parsed,
+          color: parsed.color ?? option?.projectColor ?? null,
+        });
+        continue;
      }
+
+      const option = mentionOptionByKey.get(`agent:${parsed.agentId}`);
+      applyMentionChipDecoration(link, {
+        ...parsed,
+        icon: parsed.icon ?? option?.agentIcon ?? null,
+      });
    }
-  }, [projectColorById]);
+  }, [mentionOptionByKey]);

  // Mention detection: listen for selection changes and input events
  const checkMention = useCallback(() => {
@ -395,94 +424,67 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
      // update state between the last render and this callback firing).
      const state = mentionStateRef.current;
      if (!state) return;
-
-      if (option.kind === "project" && option.projectId) {
-        const current = latestValueRef.current;
-        const next = applyMention(current, state.query, option);
-        if (next !== current) {
-          latestValueRef.current = next;
-          ref.current?.setMarkdown(next);
-          onChange(next);
-        }
-        requestAnimationFrame(() => {
-          ref.current?.focus(undefined, { defaultSelection: "rootEnd" });
-          decorateProjectMentions();
-        });
-        mentionStateRef.current = null;
-        setMentionState(null);
-        return;
-      }
-
-      const replacement = mentionMarkdown(option);
-
-      // Replace @query directly via DOM selection so the cursor naturally
-      // lands after the inserted text. Lexical picks up the change through
-      // its normal input-event handling.
-      const sel = window.getSelection();
-      if (sel && state.textNode.isConnected) {
-        const range = document.createRange();
-        range.setStart(state.textNode, state.atPos);
-        range.setEnd(state.textNode, state.endPos);
-        sel.removeAllRanges();
-        sel.addRange(range);
-        document.execCommand("insertText", false, replacement);
-
-        // After Lexical reconciles the DOM, the cursor position set by
-        // execCommand may be lost. Explicitly reposition it after the
-        // inserted mention text.
-        const cursorTarget = state.atPos + replacement.length;
-        requestAnimationFrame(() => {
-          const newSel = window.getSelection();
-          if (!newSel) return;
-          // Try the original text node first (it may still be valid)
-          if (state.textNode.isConnected) {
-            const len = state.textNode.textContent?.length ?? 0;
-            if (cursorTarget <= len) {
-              const r = document.createRange();
-              r.setStart(state.textNode, cursorTarget);
-              r.collapse(true);
-              newSel.removeAllRanges();
-              newSel.addRange(r);
-              return;
-            }
-          }
-          // Fallback: search for the replacement in text nodes
-          const editable = containerRef.current?.querySelector('[contenteditable="true"]');
-          if (!editable) return;
-          const walker = document.createTreeWalker(editable, NodeFilter.SHOW_TEXT);
-          let node: Text | null;
-          while ((node = walker.nextNode() as Text | null)) {
-            const text = node.textContent ?? "";
-            const idx = text.indexOf(replacement);
-            if (idx !== -1) {
-              const pos = idx + replacement.length;
-              if (pos <= text.length) {
-                const r = document.createRange();
-                r.setStart(node, pos);
-                r.collapse(true);
-                newSel.removeAllRanges();
-                newSel.addRange(r);
-                return;
-              }
-            }
-          }
-        });
-      } else {
-        // Fallback: full markdown replacement when DOM node is stale
-        const current = latestValueRef.current;
-        const next = applyMention(current, state.query, option);
-        if (next !== current) {
-          latestValueRef.current = next;
-          ref.current?.setMarkdown(next);
-          onChange(next);
-        }
-        requestAnimationFrame(() => {
-          ref.current?.focus(undefined, { defaultSelection: "rootEnd" });
-        });
+      const current = latestValueRef.current;
+      const next = applyMention(current, state.query, option);
+      if (next !== current) {
+        latestValueRef.current = next;
+        ref.current?.setMarkdown(next);
+        onChange(next);
      }

      requestAnimationFrame(() => {
-        decorateProjectMentions();
+        requestAnimationFrame(() => {
+          const editable = containerRef.current?.querySelector('[contenteditable="true"]');
+          if (!(editable instanceof HTMLElement)) return;
+          decorateProjectMentions();
+          editable.focus();
+
+          const mentionHref = option.kind === "project" && option.projectId
+            ? buildProjectMentionHref(option.projectId, option.projectColor ?? null)
+            : buildAgentMentionHref(
+                option.agentId ?? option.id.replace(/^agent:/, ""),
+                option.agentIcon ?? null,
+              );
+          const matchingMentions = Array.from(editable.querySelectorAll("a"))
+            .filter((node): node is HTMLAnchorElement => node instanceof HTMLAnchorElement)
+            .filter((link) => {
+              const href = link.getAttribute("href") ?? "";
+              return href === mentionHref && link.textContent === `@${option.name}`;
+            });
+          const containerRect = containerRef.current?.getBoundingClientRect();
+          const target = matchingMentions.sort((a, b) => {
+            const rectA = a.getBoundingClientRect();
+            const rectB = b.getBoundingClientRect();
+            const leftA = containerRect ? rectA.left - containerRect.left : rectA.left;
+            const topA = containerRect ? rectA.top - containerRect.top : rectA.top;
+            const leftB = containerRect ? rectB.left - containerRect.left : rectB.left;
+            const topB = containerRect ? rectB.top - containerRect.top : rectB.top;
+            const distA = Math.hypot(leftA - state.left, topA - state.top);
+            const distB = Math.hypot(leftB - state.left, topB - state.top);
+            return distA - distB;
+          })[0] ?? null;
+          if (!target) return;
+
+          const selection = window.getSelection();
+          if (!selection) return;
+          const range = document.createRange();
+          const nextSibling = target.nextSibling;
+          if (nextSibling?.nodeType === Node.TEXT_NODE) {
+            const text = nextSibling.textContent ?? "";
+            if (text.startsWith(" ")) {
+              range.setStart(nextSibling, 1);
+              range.collapse(true);
+              selection.removeAllRanges();
+              selection.addRange(range);
+              return;
+            }
+          }
+
+          range.setStartAfter(target);
+          range.collapse(true);
+          selection.removeAllRanges();
+          selection.addRange(range);
+        });
      });

      mentionStateRef.current = null;
@ -588,6 +590,7 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
          "paperclip-mdxeditor-content focus:outline-none [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:list-item",
          contentClassName,
        )}
+        additionalLexicalNodes={[mentionAwareLinkNodeReplacement]}
        plugins={plugins}
      />

@ -616,7 +619,10 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
                  style={{ backgroundColor: option.projectColor ?? "#64748b" }}
                />
              ) : (
-                <span className="text-muted-foreground">@</span>
+                <AgentIcon
+                  icon={option.agentIcon}
+                  className="h-3.5 w-3.5 shrink-0 text-muted-foreground"
+                />
              )}
              <span>{option.name}</span>
              {option.kind === "project" && option.projectId && (
--- a/ui/src/components/NewIssueDialog.tsx
+++ b/ui/src/components/NewIssueDialog.tsx
@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useCallback, useMemo, type ChangeEvent, type DragEvent } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { pickTextColorForSolidBg } from "@/lib/color-contrast";
 import { useDialog } from "../context/DialogContext";
 import { useCompany } from "../context/CompanyContext";
 import { executionWorkspacesApi } from "../api/execution-workspaces";
@ -56,15 +57,6 @@ import { InlineEntitySelector, type InlineEntityOption } from "./InlineEntitySel
 const DRAFT_KEY = "paperclip:issue-draft";
 const DEBOUNCE_MS = 800;

-/** Return black or white hex based on background luminance (WCAG perceptual weights). */
-function getContrastTextColor(hexColor: string): string {
-  const hex = hexColor.replace("#", "");
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance > 0.5 ? "#000000" : "#ffffff";
-}

 interface IssueDraft {
  title: string;
@ -376,6 +368,8 @@ export function NewIssueDialog() {
        id: `agent:${agent.id}`,
        name: agent.name,
        kind: "agent",
+        agentId: agent.id,
+        agentIcon: agent.icon,
      });
    }
    for (const project of orderedProjects) {
@ -913,7 +907,7 @@ export function NewIssueDialog() {
                    dialogCompany?.brandColor
                      ? {
                          backgroundColor: dialogCompany.brandColor,
-                          color: getContrastTextColor(dialogCompany.brandColor),
+                          color: pickTextColorForSolidBg(dialogCompany.brandColor),
                        }
                      : undefined
                  }
@ -943,7 +937,7 @@ export function NewIssueDialog() {
                        c.brandColor
                          ? {
                              backgroundColor: c.brandColor,
-                              color: getContrastTextColor(c.brandColor),
+                              color: pickTextColorForSolidBg(c.brandColor),
                            }
                          : undefined
                      }
@ -1211,6 +1205,7 @@ export function NewIssueDialog() {
                  <div className="flex items-center justify-between rounded-md border border-border px-2 py-1.5">
                    <div className="text-xs text-muted-foreground">Enable Chrome (--chrome)</div>
                    <button
+                      data-slot="toggle"
                      className={cn(
                        "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
                        assigneeChrome ? "bg-green-600" : "bg-muted"
--- a/ui/src/components/ProjectProperties.tsx
+++ b/ui/src/components/ProjectProperties.tsx
@ -887,6 +887,7 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
                  </div>
                  {onUpdate || onFieldUpdate ? (
                    <button
+                      data-slot="toggle"
                      className={cn(
                        "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
                        executionWorkspacesEnabled ? "bg-green-600" : "bg-muted",
@ -925,6 +926,7 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
                        </div>
                      </div>
                      <button
+                        data-slot="toggle"
                        className={cn(
                          "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
                          executionWorkspaceDefaultMode === "isolated_workspace" ? "bg-green-600" : "bg-muted",
--- a/ui/src/components/agent-config-primitives.tsx
+++ b/ui/src/components/agent-config-primitives.tsx
@ -117,6 +117,7 @@ export function ToggleField({
        {hint && <HintIcon text={hint} />}
      </div>
      <button
+        data-slot="toggle"
        className={cn(
          "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
          checked ? "bg-green-600" : "bg-muted"
@ -165,6 +166,7 @@ export function ToggleWithNumber({
          {hint && <HintIcon text={hint} />}
        </div>
        <button
+          data-slot="toggle"
          className={cn(
            "relative inline-flex h-5 w-9 items-center rounded-full transition-colors shrink-0",
            checked ? "bg-green-600" : "bg-muted"
--- a/ui/src/context/LiveUpdatesProvider.test.ts
+++ b/ui/src/context/LiveUpdatesProvider.test.ts
@ -32,3 +32,85 @@ describe("LiveUpdatesProvider issue invalidation", () => {
    });
  });
 });
+
+describe("LiveUpdatesProvider visible issue toast suppression", () => {
+  it("suppresses activity toasts for the issue page currently in view", () => {
+    const queryClient = {
+      getQueryData: (key: unknown) => {
+        if (JSON.stringify(key) === JSON.stringify(queryKeys.issues.detail("PAP-759"))) {
+          return {
+            id: "issue-1",
+            identifier: "PAP-759",
+            assigneeAgentId: "agent-1",
+          };
+        }
+        return undefined;
+      },
+    };
+
+    expect(
+      __liveUpdatesTestUtils.shouldSuppressActivityToastForVisibleIssue(
+        queryClient as never,
+        "/PAP/issues/PAP-759",
+        {
+          entityType: "issue",
+          entityId: "issue-1",
+          details: { identifier: "PAP-759" },
+        },
+        { isForegrounded: true },
+      ),
+    ).toBe(true);
+
+    expect(
+      __liveUpdatesTestUtils.shouldSuppressActivityToastForVisibleIssue(
+        queryClient as never,
+        "/PAP/issues/PAP-759",
+        {
+          entityType: "issue",
+          entityId: "issue-2",
+          details: { identifier: "PAP-760" },
+        },
+        { isForegrounded: true },
+      ),
+    ).toBe(false);
+  });
+
+  it("suppresses run and agent status toasts for the assignee of the visible issue", () => {
+    const queryClient = {
+      getQueryData: (key: unknown) => {
+        if (JSON.stringify(key) === JSON.stringify(queryKeys.issues.detail("PAP-759"))) {
+          return {
+            id: "issue-1",
+            identifier: "PAP-759",
+            assigneeAgentId: "agent-1",
+          };
+        }
+        return undefined;
+      },
+    };
+
+    expect(
+      __liveUpdatesTestUtils.shouldSuppressRunStatusToastForVisibleIssue(
+        queryClient as never,
+        "/PAP/issues/PAP-759",
+        {
+          runId: "run-1",
+          agentId: "agent-1",
+        },
+        { isForegrounded: true },
+      ),
+    ).toBe(true);
+
+    expect(
+      __liveUpdatesTestUtils.shouldSuppressAgentStatusToastForVisibleIssue(
+        queryClient as never,
+        "/PAP/issues/PAP-759",
+        {
+          agentId: "agent-1",
+          status: "running",
+        },
+        { isForegrounded: true },
+      ),
+    ).toBe(true);
+  });
+});
--- a/ui/src/context/LiveUpdatesProvider.tsx
+++ b/ui/src/context/LiveUpdatesProvider.tsx
@ -1,11 +1,15 @@
 import { useEffect, useRef, type ReactNode } from "react";
 import { useQuery, useQueryClient, type QueryClient } from "@tanstack/react-query";
 import type { Agent, Issue, LiveEvent } from "@paperclipai/shared";
+import type { RunForIssue } from "../api/activity";
+import type { ActiveRunForIssue, LiveRunForIssue } from "../api/heartbeats";
 import { authApi } from "../api/auth";
 import { useCompany } from "./CompanyContext";
 import type { ToastInput } from "./ToastContext";
 import { useToast } from "./ToastContext";
 import { queryKeys } from "../lib/queryKeys";
+import { toCompanyRelativePath } from "../lib/company-routes";
+import { useLocation } from "../lib/router";

 const TOAST_COOLDOWN_WINDOW_MS = 10_000;
 const TOAST_COOLDOWN_MAX = 3;
@ -63,6 +67,16 @@ interface IssueToastContext {
  href: string;
 }

+interface VisibleRouteOptions {
+  isForegrounded?: boolean;
+}
+
+interface VisibleIssueRouteContext {
+  issueRefs: Set<string>;
+  assigneeAgentId: string | null;
+  runIds: Set<string>;
+}
+
 function resolveIssueQueryRefs(
  queryClient: QueryClient,
  companyId: string,
@ -125,6 +139,110 @@ function resolveIssueToastContext(
  };
 }

+function isPageForegrounded(): boolean {
+  if (typeof document === "undefined") return false;
+  if (document.visibilityState !== "visible") return false;
+  if (typeof document.hasFocus === "function" && !document.hasFocus()) return false;
+  return true;
+}
+
+function resolveVisibleIssueRouteContext(
+  queryClient: QueryClient,
+  pathname: string,
+  options?: VisibleRouteOptions,
+): VisibleIssueRouteContext | null {
+  const isForegrounded = options?.isForegrounded ?? isPageForegrounded();
+  if (!isForegrounded) return null;
+
+  const relativePath = toCompanyRelativePath(pathname);
+  const segments = relativePath.split("/").filter(Boolean);
+  if (segments[0] !== "issues" || !segments[1]) return null;
+
+  const issueRef = decodeURIComponent(segments[1]);
+  const issue = queryClient.getQueryData<Issue>(queryKeys.issues.detail(issueRef)) ?? null;
+  const issueRefs = new Set<string>([issueRef]);
+  if (issue?.id) issueRefs.add(issue.id);
+  if (issue?.identifier) issueRefs.add(issue.identifier);
+
+  const runIds = new Set<string>();
+  const activeRun = queryClient.getQueryData<ActiveRunForIssue | null>(queryKeys.issues.activeRun(issueRef));
+  const liveRuns = queryClient.getQueryData<LiveRunForIssue[]>(queryKeys.issues.liveRuns(issueRef)) ?? [];
+  const linkedRuns = queryClient.getQueryData<RunForIssue[]>(queryKeys.issues.runs(issueRef)) ?? [];
+
+  if (activeRun?.id) runIds.add(activeRun.id);
+  for (const run of liveRuns) {
+    if (run.id) runIds.add(run.id);
+  }
+  for (const run of linkedRuns) {
+    if (run.runId) runIds.add(run.runId);
+  }
+
+  return {
+    issueRefs,
+    assigneeAgentId: issue?.assigneeAgentId ?? null,
+    runIds,
+  };
+}
+
+function buildIssueRefsForPayload(entityId: string, details: Record<string, unknown> | null): Set<string> {
+  const refs = new Set<string>([entityId]);
+  const identifier = readString(details?.identifier) ?? readString(details?.issueIdentifier);
+  if (identifier) refs.add(identifier);
+  return refs;
+}
+
+function overlaps(a: Set<string>, b: Set<string>): boolean {
+  for (const value of a) {
+    if (b.has(value)) return true;
+  }
+  return false;
+}
+
+function shouldSuppressActivityToastForVisibleIssue(
+  queryClient: QueryClient,
+  pathname: string,
+  payload: Record<string, unknown>,
+  options?: VisibleRouteOptions,
+): boolean {
+  const entityType = readString(payload.entityType);
+  const entityId = readString(payload.entityId);
+  if (entityType !== "issue" || !entityId) return false;
+
+  const context = resolveVisibleIssueRouteContext(queryClient, pathname, options);
+  if (!context) return false;
+
+  return overlaps(context.issueRefs, buildIssueRefsForPayload(entityId, readRecord(payload.details)));
+}
+
+function shouldSuppressRunStatusToastForVisibleIssue(
+  queryClient: QueryClient,
+  pathname: string,
+  payload: Record<string, unknown>,
+  options?: VisibleRouteOptions,
+): boolean {
+  const context = resolveVisibleIssueRouteContext(queryClient, pathname, options);
+  if (!context) return false;
+
+  const runId = readString(payload.runId);
+  if (runId && context.runIds.has(runId)) return true;
+
+  const agentId = readString(payload.agentId);
+  return !!agentId && !!context.assigneeAgentId && agentId === context.assigneeAgentId;
+}
+
+function shouldSuppressAgentStatusToastForVisibleIssue(
+  queryClient: QueryClient,
+  pathname: string,
+  payload: Record<string, unknown>,
+  options?: VisibleRouteOptions,
+): boolean {
+  const context = resolveVisibleIssueRouteContext(queryClient, pathname, options);
+  if (!context?.assigneeAgentId) return false;
+
+  const agentId = readString(payload.agentId);
+  return !!agentId && agentId === context.assigneeAgentId;
+}
+
 const ISSUE_TOAST_ACTIONS = new Set(["issue.created", "issue.updated", "issue.comment_added"]);
 const AGENT_TOAST_STATUSES = new Set(["running", "error"]);
 const TERMINAL_RUN_STATUSES = new Set(["succeeded", "failed", "timed_out", "cancelled"]);
@ -470,6 +588,7 @@ function gatedPushToast(
 function handleLiveEvent(
  queryClient: QueryClient,
  expectedCompanyId: string,
+  pathname: string,
  event: LiveEvent,
  pushToast: (toast: ToastInput) => string | null,
  gate: ToastGate,
@ -487,7 +606,12 @@ function handleLiveEvent(
    invalidateHeartbeatQueries(queryClient, expectedCompanyId, payload);
    if (event.type === "heartbeat.run.status") {
      const toast = buildRunStatusToast(payload, nameOf);
-      if (toast) gatedPushToast(gate, pushToast, "run-status", toast);
+      if (
+        toast &&
+        !shouldSuppressRunStatusToastForVisibleIssue(queryClient, pathname, payload)
+      ) {
+        gatedPushToast(gate, pushToast, "run-status", toast);
+      }
    }
    return;
  }
@ -503,7 +627,12 @@ function handleLiveEvent(
    const agentId = readString(payload.agentId);
    if (agentId) queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agentId) });
    const toast = buildAgentStatusToast(payload, nameOf, queryClient, expectedCompanyId);
-    if (toast) gatedPushToast(gate, pushToast, "agent-status", toast);
+    if (
+      toast &&
+      !shouldSuppressAgentStatusToastForVisibleIssue(queryClient, pathname, payload)
+    ) {
+      gatedPushToast(gate, pushToast, "agent-status", toast);
+    }
    return;
  }

@ -513,19 +642,29 @@ function handleLiveEvent(
    const toast =
      buildActivityToast(queryClient, expectedCompanyId, payload, currentActor) ??
      buildJoinRequestToast(payload);
-    if (toast) gatedPushToast(gate, pushToast, `activity:${action ?? "unknown"}`, toast);
+    if (
+      toast &&
+      !shouldSuppressActivityToastForVisibleIssue(queryClient, pathname, payload)
+    ) {
+      gatedPushToast(gate, pushToast, `activity:${action ?? "unknown"}`, toast);
+    }
  }
 }

 export const __liveUpdatesTestUtils = {
  invalidateActivityQueries,
+  shouldSuppressActivityToastForVisibleIssue,
+  shouldSuppressRunStatusToastForVisibleIssue,
+  shouldSuppressAgentStatusToastForVisibleIssue,
 };

 export function LiveUpdatesProvider({ children }: { children: ReactNode }) {
  const { selectedCompanyId } = useCompany();
  const queryClient = useQueryClient();
  const { pushToast } = useToast();
+  const location = useLocation();
  const gateRef = useRef<ToastGate>({ cooldownHits: new Map(), suppressUntil: 0 });
+  const pathnameRef = useRef(location.pathname);
  const { data: session } = useQuery({
    queryKey: queryKeys.auth.session,
    queryFn: () => authApi.getSession(),
@ -533,6 +672,10 @@ export function LiveUpdatesProvider({ children }: { children: ReactNode }) {
  });
  const currentUserId = session?.user?.id ?? session?.session?.userId ?? null;

+  useEffect(() => {
+    pathnameRef.current = location.pathname;
+  }, [location.pathname]);
+
  useEffect(() => {
    if (!selectedCompanyId) return;

@ -577,7 +720,7 @@ export function LiveUpdatesProvider({ children }: { children: ReactNode }) {

        try {
          const parsed = JSON.parse(raw) as LiveEvent;
-          handleLiveEvent(queryClient, selectedCompanyId, parsed, pushToast, gateRef.current, {
+          handleLiveEvent(queryClient, selectedCompanyId, pathnameRef.current, parsed, pushToast, gateRef.current, {
            userId: currentUserId,
            agentId: null,
          });
--- a/ui/src/index.css
+++ b/ui/src/index.css
@ -153,6 +153,10 @@
  [data-slot="select-trigger"] {
    min-height: 44px;
  }
+
+  [data-slot="toggle"] {
+    min-height: 0;
+  }
 }

 /* Dark mode scrollbars */
@ -339,6 +343,7 @@
  margin-top: 1.1em;
 }

+.paperclip-mdxeditor-content a.paperclip-mention-chip,
 .paperclip-mdxeditor-content a.paperclip-project-mention-chip {
  display: inline-flex;
  align-items: center;
@ -355,6 +360,35 @@
  user-select: none;
 }

+.paperclip-mdxeditor-content a.paperclip-mention-chip::before,
+a.paperclip-mention-chip::before {
+  content: "";
+  flex: none;
+}
+
+.paperclip-mdxeditor-content a.paperclip-mention-chip[data-mention-kind="project"]::before,
+a.paperclip-mention-chip[data-mention-kind="project"]::before {
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 999px;
+  background-color: var(--paperclip-mention-project-color, currentColor);
+}
+
+.paperclip-mdxeditor-content a.paperclip-mention-chip[data-mention-kind="agent"]::before,
+a.paperclip-mention-chip[data-mention-kind="agent"]::before {
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: currentColor;
+  -webkit-mask-image: var(--paperclip-mention-icon-mask);
+  mask-image: var(--paperclip-mention-icon-mask);
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
 .paperclip-mdxeditor-content ul,
 .paperclip-mdxeditor-content ol {
  margin: 1.1em 0;
@ -415,7 +449,7 @@

 .paperclip-mdxeditor-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 0.78em;
+  font-size: 1em;
 }

 .paperclip-mdxeditor-content pre {
@ -433,7 +467,7 @@
 .paperclip-mdxeditor .cm-editor {
  background-color: #1e1e2e !important;
  color: #cdd6f4 !important;
-  font-size: 0.78em;
+  font-size: 1em;
 }

 .paperclip-mdxeditor .cm-gutters {
@ -513,14 +547,14 @@
  color: #cdd6f4 !important;
  padding: 0.5rem 0.65rem !important;
  margin: 0.4rem 0 !important;
-  font-size: 0.78em !important;
+  font-size: 1em !important;
  overflow-x: auto;
  white-space: pre;
 }

 .paperclip-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 0.78em;
+  font-size: 1em;
 }

 .paperclip-markdown pre code {
@ -543,6 +577,10 @@
  font-weight: 500;
 }

+.dark .prose :not(pre) > code {
+  background-color: #ffffff0f;
+}
+
 .paperclip-markdown {
  color: var(--foreground);
  font-size: 0.9375rem;
@ -696,6 +734,7 @@
 }

 /* Project mention chips rendered inside MarkdownBody */
+a.paperclip-mention-chip,
 a.paperclip-project-mention-chip {
  display: inline-flex;
  align-items: center;
--- a/ui/src/lib/agent-icons.ts
+++ b/ui/src/lib/agent-icons.ts
@ -0,0 +1,98 @@
+import {
+  Atom,
+  Bot,
+  Brain,
+  Bug,
+  CircuitBoard,
+  Code,
+  Cog,
+  Cpu,
+  Crown,
+  Database,
+  Eye,
+  FileCode,
+  Fingerprint,
+  Flame,
+  Gem,
+  GitBranch,
+  Globe,
+  Hammer,
+  Heart,
+  Hexagon,
+  Lightbulb,
+  Lock,
+  Mail,
+  MessageSquare,
+  Microscope,
+  Package,
+  Pentagon,
+  Puzzle,
+  Radar,
+  Rocket,
+  Search,
+  Shield,
+  Sparkles,
+  Star,
+  Swords,
+  Target,
+  Telescope,
+  Terminal,
+  Wand2,
+  Wrench,
+  Zap,
+  type LucideIcon,
+} from "lucide-react";
+import { AGENT_ICON_NAMES, type AgentIconName } from "@paperclipai/shared";
+
+export const AGENT_ICONS: Record<AgentIconName, LucideIcon> = {
+  bot: Bot,
+  cpu: Cpu,
+  brain: Brain,
+  zap: Zap,
+  rocket: Rocket,
+  code: Code,
+  terminal: Terminal,
+  shield: Shield,
+  eye: Eye,
+  search: Search,
+  wrench: Wrench,
+  hammer: Hammer,
+  lightbulb: Lightbulb,
+  sparkles: Sparkles,
+  star: Star,
+  heart: Heart,
+  flame: Flame,
+  bug: Bug,
+  cog: Cog,
+  database: Database,
+  globe: Globe,
+  lock: Lock,
+  mail: Mail,
+  "message-square": MessageSquare,
+  "file-code": FileCode,
+  "git-branch": GitBranch,
+  package: Package,
+  puzzle: Puzzle,
+  target: Target,
+  wand: Wand2,
+  atom: Atom,
+  "circuit-board": CircuitBoard,
+  radar: Radar,
+  swords: Swords,
+  telescope: Telescope,
+  microscope: Microscope,
+  crown: Crown,
+  gem: Gem,
+  hexagon: Hexagon,
+  pentagon: Pentagon,
+  fingerprint: Fingerprint,
+};
+
+const DEFAULT_ICON: AgentIconName = "bot";
+
+export function getAgentIcon(iconName: string | null | undefined): LucideIcon {
+  if (iconName && AGENT_ICON_NAMES.includes(iconName as AgentIconName)) {
+    return AGENT_ICONS[iconName as AgentIconName];
+  }
+  return AGENT_ICONS[DEFAULT_ICON];
+}
--- a/ui/src/lib/color-contrast.ts
+++ b/ui/src/lib/color-contrast.ts
@ -0,0 +1,107 @@
+/**
+ * Shared color-contrast utilities for pill / badge / chip components.
+ *
+ * Uses WCAG 2.1 relative-luminance contrast ratios so text is always
+ * readable, even on semi-transparent backgrounds composited over dark or
+ * light page backgrounds.
+ */
+
+const DARK_BG = { r: 24, g: 24, b: 27 }; // zinc-900 (#18181b)
+const LIGHT_BG = { r: 255, g: 255, b: 255 }; // white
+
+export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  const match = /^#?([0-9a-f]{3,6})$/i.exec(hex.trim());
+  if (!match) return null;
+  let value = match[1];
+  if (value.length === 3) {
+    value = value
+      .split("")
+      .map((c) => `${c}${c}`)
+      .join("");
+  }
+  if (value.length !== 6) return null;
+  return {
+    r: parseInt(value.slice(0, 2), 16),
+    g: parseInt(value.slice(2, 4), 16),
+    b: parseInt(value.slice(4, 6), 16),
+  };
+}
+
+function relativeLuminanceChannel(value: number): number {
+  const normalized = value / 255;
+  return normalized <= 0.03928
+    ? normalized / 12.92
+    : ((normalized + 0.055) / 1.055) ** 2.4;
+}
+
+function relativeLuminance(r: number, g: number, b: number): number {
+  return (
+    0.2126 * relativeLuminanceChannel(r) +
+    0.7152 * relativeLuminanceChannel(g) +
+    0.0722 * relativeLuminanceChannel(b)
+  );
+}
+
+function contrastRatio(l1: number, l2: number): number {
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+function isDarkMode(): boolean {
+  if (typeof document === "undefined") return true;
+  return document.documentElement.classList.contains("dark");
+}
+
+/**
+ * Composite a foreground RGB at the given alpha over a background RGB.
+ */
+function composite(
+  fg: { r: number; g: number; b: number },
+  bg: { r: number; g: number; b: number },
+  alpha: number,
+): { r: number; g: number; b: number } {
+  return {
+    r: Math.round(alpha * fg.r + (1 - alpha) * bg.r),
+    g: Math.round(alpha * fg.g + (1 - alpha) * bg.g),
+    b: Math.round(alpha * fg.b + (1 - alpha) * bg.b),
+  };
+}
+
+const TEXT_LIGHT = "#f8fafc";
+const TEXT_DARK = "#111827";
+
+/**
+ * Pick a readable text color for a solid background.
+ * Uses WCAG contrast ratios to choose between light and dark text.
+ */
+export function pickTextColorForSolidBg(hexColor: string): string {
+  const rgb = hexToRgb(hexColor);
+  if (!rgb) return TEXT_LIGHT;
+  const bgLum = relativeLuminance(rgb.r, rgb.g, rgb.b);
+  const whiteLum = relativeLuminance(248, 250, 252);
+  const blackLum = relativeLuminance(17, 24, 39);
+  return contrastRatio(bgLum, whiteLum) >= contrastRatio(bgLum, blackLum)
+    ? TEXT_LIGHT
+    : TEXT_DARK;
+}
+
+/**
+ * Pick a readable text color for a semi-transparent pill background.
+ *
+ * Composites `rgba(hexColor, alpha)` over the current page background
+ * (dark or light mode) and then picks the text color with better
+ * WCAG contrast ratio.
+ */
+export function pickTextColorForPillBg(hexColor: string, alpha = 0.22): string {
+  const fg = hexToRgb(hexColor);
+  if (!fg) return TEXT_LIGHT;
+  const pageBg = isDarkMode() ? DARK_BG : LIGHT_BG;
+  const effectiveBg = composite(fg, pageBg, alpha);
+  const bgLum = relativeLuminance(effectiveBg.r, effectiveBg.g, effectiveBg.b);
+  const whiteLum = relativeLuminance(248, 250, 252);
+  const blackLum = relativeLuminance(17, 24, 39);
+  return contrastRatio(bgLum, whiteLum) >= contrastRatio(bgLum, blackLum)
+    ? TEXT_LIGHT
+    : TEXT_DARK;
+}
--- a/ui/src/lib/mention-chips.ts
+++ b/ui/src/lib/mention-chips.ts
@ -0,0 +1,167 @@
+import type { CSSProperties } from "react";
+import { parseAgentMentionHref, parseProjectMentionHref } from "@paperclipai/shared";
+import { getAgentIcon } from "./agent-icons";
+import { hexToRgb, pickTextColorForPillBg } from "./color-contrast";
+
+export type ParsedMentionChip =
+  | {
+      kind: "agent";
+      agentId: string;
+      icon: string | null;
+    }
+  | {
+      kind: "project";
+      projectId: string;
+      color: string | null;
+    };
+
+const iconMaskCache = new Map<string, string>();
+
+export function parseMentionChipHref(href: string): ParsedMentionChip | null {
+  const agent = parseAgentMentionHref(href);
+  if (agent) {
+    return {
+      kind: "agent",
+      agentId: agent.agentId,
+      icon: agent.icon,
+    };
+  }
+
+  const project = parseProjectMentionHref(href);
+  if (project) {
+    return {
+      kind: "project",
+      projectId: project.projectId,
+      color: project.color,
+    };
+  }
+
+  return null;
+}
+
+export function mentionChipInlineStyle(mention: ParsedMentionChip): CSSProperties | undefined {
+  const style: CSSProperties & Record<string, string> = {};
+
+  if (mention.kind === "project" && mention.color) {
+    const projectStyle = projectMentionColors(mention.color);
+    Object.assign(style, projectStyle);
+    style["--paperclip-mention-project-color"] = mention.color;
+  }
+
+  if (mention.kind === "agent") {
+    const iconMask = buildAgentIconMask(mention.icon);
+    if (iconMask) {
+      style["--paperclip-mention-icon-mask"] = iconMask;
+    }
+  }
+
+  return Object.keys(style).length > 0 ? (style as CSSProperties) : undefined;
+}
+
+export function applyMentionChipDecoration(element: HTMLElement, mention: ParsedMentionChip) {
+  clearMentionChipDecoration(element);
+  element.dataset.mentionKind = mention.kind;
+  element.setAttribute("contenteditable", "false");
+  element.classList.add("paperclip-mention-chip", `paperclip-mention-chip--${mention.kind}`);
+  if (mention.kind === "project") {
+    element.classList.add("paperclip-project-mention-chip");
+  }
+
+  const style = mentionChipInlineStyle(mention);
+  if (!style) return;
+  for (const [key, value] of Object.entries(style)) {
+    if (typeof value === "string") {
+      if (key.startsWith("--")) {
+        element.style.setProperty(key, value);
+      } else {
+        (element.style as CSSStyleDeclaration & Record<string, string>)[key] = value;
+      }
+    }
+  }
+}
+
+export function clearMentionChipDecoration(element: HTMLElement) {
+  delete element.dataset.mentionKind;
+  element.classList.remove(
+    "paperclip-mention-chip",
+    "paperclip-mention-chip--agent",
+    "paperclip-mention-chip--project",
+    "paperclip-project-mention-chip",
+  );
+  element.removeAttribute("contenteditable");
+  element.style.removeProperty("border-color");
+  element.style.removeProperty("background-color");
+  element.style.removeProperty("color");
+  element.style.removeProperty("--paperclip-mention-project-color");
+  element.style.removeProperty("--paperclip-mention-icon-mask");
+}
+
+function projectMentionColors(color: string): Pick<CSSProperties, "borderColor" | "backgroundColor" | "color"> {
+  const rgb = hexToRgb(color);
+  if (!rgb) return {};
+  return {
+    borderColor: color,
+    backgroundColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.22)`,
+    color: pickTextColorForPillBg(color),
+  };
+}
+
+function buildAgentIconMask(iconName: string | null): string | null {
+  const cacheKey = iconName ?? "__default__";
+  const cached = iconMaskCache.get(cacheKey);
+  if (cached) return cached;
+
+  const Icon = getAgentIcon(iconName);
+  const iconNode = resolveLucideIconNode(Icon);
+  if (!Array.isArray(iconNode) || iconNode.length === 0) return null;
+
+  const body = iconNode.map(([tag, attrs]) => {
+    const attrString = Object.entries(attrs)
+      .filter(([key]) => key !== "key")
+      .map(([key, value]) => `${key}="${escapeAttribute(String(value))}"`)
+      .join(" ");
+    return `<${tag}${attrString ? ` ${attrString}` : ""}></${tag}>`;
+  }).join("");
+
+  const svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ` +
+    `fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" ` +
+    `stroke-linejoin="round">${body}</svg>`;
+  const url = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+  iconMaskCache.set(cacheKey, url);
+  return url;
+}
+
+function resolveLucideIconNode(
+  icon: unknown,
+): Array<[string, Record<string, string>]> | null {
+  const staticIconNode = (
+    icon as {
+      iconNode?: Array<[string, Record<string, string>]>;
+    }
+  ).iconNode;
+  if (Array.isArray(staticIconNode) && staticIconNode.length > 0) {
+    return staticIconNode;
+  }
+
+  const render = (
+    icon as {
+      render?: (props: Record<string, unknown>, ref: unknown) => {
+        props?: { iconNode?: Array<[string, Record<string, string>]> };
+      } | null;
+    }
+  ).render;
+  const rendered = typeof render === "function" ? render({}, null) : null;
+  const renderedIconNode = rendered?.props?.iconNode;
+  return Array.isArray(renderedIconNode) && renderedIconNode.length > 0
+    ? renderedIconNode
+    : null;
+}
+
+function escapeAttribute(value: string): string {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
--- a/ui/src/lib/mention-deletion.test.ts
+++ b/ui/src/lib/mention-deletion.test.ts
@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+import { $createLinkNode, LinkNode } from "@lexical/link";
+import { buildAgentMentionHref } from "@paperclipai/shared";
+import {
+  createEditor,
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  $getSelection,
+  $isRangeSelection,
+} from "lexical";
+import { deleteSelectedMentionChip } from "./mention-deletion";
+
+function createTestEditor() {
+  return createEditor({
+    namespace: "mention-deletion-test",
+    nodes: [LinkNode],
+    onError(error: Error) {
+      throw error;
+    },
+  });
+}
+
+describe("mention deletion", () => {
+  it("removes the full mention when backspacing from inside the chip", () => {
+    const editor = createTestEditor();
+
+    editor.update(() => {
+      const root = $getRoot();
+      const paragraph = $createParagraphNode();
+      const before = $createTextNode("Hello ");
+      const mention = $createLinkNode(buildAgentMentionHref("agent-123", "code"));
+      const mentionText = $createTextNode("@QA");
+      const after = $createTextNode(" world");
+
+      mention.append(mentionText);
+      paragraph.append(before, mention, after);
+      root.append(paragraph);
+
+      mentionText.selectEnd();
+
+      expect(deleteSelectedMentionChip("backward")).toBe(true);
+      expect(root.getTextContent()).toBe("Hello  world");
+
+      const selection = $getSelection();
+      expect($isRangeSelection(selection)).toBe(true);
+      if (!$isRangeSelection(selection)) {
+        throw new Error("Expected range selection after backward mention deletion");
+      }
+      expect(selection.isCollapsed()).toBe(true);
+      expect(selection.anchor.getNode().is(before)).toBe(true);
+      expect(selection.anchor.offset).toBe(before.getTextContentSize());
+    });
+  });
+
+  it("removes the full mention when deleting forward from adjacent text", () => {
+    const editor = createTestEditor();
+
+    editor.update(() => {
+      const root = $getRoot();
+      const paragraph = $createParagraphNode();
+      const before = $createTextNode("Hello ");
+      const mention = $createLinkNode(buildAgentMentionHref("agent-123", "code"));
+      const mentionText = $createTextNode("@QA");
+      const after = $createTextNode(" world");
+
+      mention.append(mentionText);
+      paragraph.append(before, mention, after);
+      root.append(paragraph);
+
+      before.selectEnd();
+
+      expect(deleteSelectedMentionChip("forward")).toBe(true);
+      expect(root.getTextContent()).toBe("Hello  world");
+
+      const selection = $getSelection();
+      expect($isRangeSelection(selection)).toBe(true);
+      if (!$isRangeSelection(selection)) {
+        throw new Error("Expected range selection after forward mention deletion");
+      }
+      expect(selection.isCollapsed()).toBe(true);
+      expect(selection.anchor.getNode().is(after)).toBe(true);
+      expect(selection.anchor.offset).toBe(0);
+    });
+  });
+});
--- a/ui/src/lib/mention-deletion.ts
+++ b/ui/src/lib/mention-deletion.ts
@ -0,0 +1,143 @@
+import { createRootEditorSubscription$, realmPlugin } from "@mdxeditor/editor";
+import { $isLinkNode, type LinkNode } from "@lexical/link";
+import {
+  $getSelection,
+  $isElementNode,
+  $isNodeSelection,
+  $isRangeSelection,
+  $isTextNode,
+  COMMAND_PRIORITY_HIGH,
+  KEY_BACKSPACE_COMMAND,
+  KEY_DELETE_COMMAND,
+  type LexicalNode,
+  type PointType,
+} from "lexical";
+import { parseMentionChipHref } from "./mention-chips";
+
+export type MentionDeletionDirection = "backward" | "forward";
+
+function isMentionLinkNode(node: LexicalNode | null | undefined): node is LinkNode {
+  return Boolean(node && $isLinkNode(node) && parseMentionChipHref(node.getURL()));
+}
+
+function findMentionLinkNode(node: LexicalNode | null | undefined): LinkNode | null {
+  if (!node) return null;
+  if (isMentionLinkNode(node)) return node;
+
+  let parent = node.getParent();
+  while (parent) {
+    if (isMentionLinkNode(parent)) return parent;
+    parent = parent.getParent();
+  }
+
+  return null;
+}
+
+function findMentionLinkNodeAtPoint(point: PointType, direction: MentionDeletionDirection): LinkNode | null {
+  const node = point.getNode();
+  const directMention = findMentionLinkNode(node);
+  if (directMention) return directMention;
+
+  if (point.type === "element" && $isElementNode(node)) {
+    const childIndex = direction === "backward" ? point.offset - 1 : point.offset;
+    if (childIndex < 0) return null;
+    return findMentionLinkNode(node.getChildAtIndex(childIndex));
+  }
+
+  if (point.type === "text" && $isTextNode(node)) {
+    if (direction === "backward" && point.offset === 0) {
+      return findMentionLinkNode(node.getPreviousSibling());
+    }
+
+    if (direction === "forward" && point.offset === node.getTextContentSize()) {
+      return findMentionLinkNode(node.getNextSibling());
+    }
+  }
+
+  return null;
+}
+
+export function findMentionLinkForDeletion(direction: MentionDeletionDirection): LinkNode | null {
+  const selection = $getSelection();
+  if (!selection) return null;
+
+  if ($isNodeSelection(selection)) {
+    const [selectedNode] = selection.getNodes();
+    return selectedNode ? findMentionLinkNode(selectedNode) : null;
+  }
+
+  if (!$isRangeSelection(selection)) return null;
+
+  const anchorMention = findMentionLinkNode(selection.anchor.getNode());
+  const focusMention = findMentionLinkNode(selection.focus.getNode());
+  if (anchorMention && focusMention && anchorMention.is(focusMention)) {
+    return anchorMention;
+  }
+
+  if (!selection.isCollapsed()) return null;
+
+  return findMentionLinkNodeAtPoint(selection.anchor, direction);
+}
+
+export function deleteSelectedMentionChip(direction: MentionDeletionDirection): boolean {
+  const mentionNode = findMentionLinkForDeletion(direction);
+  if (!mentionNode) return false;
+
+  const previousSibling = mentionNode.getPreviousSibling();
+  const nextSibling = mentionNode.getNextSibling();
+  const parent = mentionNode.getParentOrThrow();
+
+  mentionNode.remove();
+
+  if (direction === "backward") {
+    if (previousSibling) {
+      previousSibling.selectEnd();
+      return true;
+    }
+    if (nextSibling) {
+      nextSibling.selectStart();
+      return true;
+    }
+    parent.selectStart();
+    return true;
+  }
+
+  if (nextSibling) {
+    nextSibling.selectStart();
+    return true;
+  }
+  if (previousSibling) {
+    previousSibling.selectEnd();
+    return true;
+  }
+  parent.selectEnd();
+  return true;
+}
+
+function handleMentionDelete(direction: MentionDeletionDirection, event: KeyboardEvent | null): boolean {
+  const didDelete = deleteSelectedMentionChip(direction);
+  if (!didDelete) return false;
+
+  event?.preventDefault();
+  event?.stopPropagation();
+  return true;
+}
+
+export const mentionDeletionPlugin = realmPlugin({
+  init(realm) {
+    realm.pub(createRootEditorSubscription$, [
+      (editor) =>
+        editor.registerCommand(
+          KEY_BACKSPACE_COMMAND,
+          (event) => handleMentionDelete("backward", event as KeyboardEvent | null),
+          COMMAND_PRIORITY_HIGH,
+        ),
+      (editor) =>
+        editor.registerCommand(
+          KEY_DELETE_COMMAND,
+          (event) => handleMentionDelete("forward", event as KeyboardEvent | null),
+          COMMAND_PRIORITY_HIGH,
+        ),
+    ]);
+  },
+});
--- a/ui/src/pages/AgentDetail.tsx
+++ b/ui/src/pages/AgentDetail.tsx
@ -69,6 +69,7 @@ import {
  ChevronDown,
  ArrowLeft,
  HelpCircle,
+  FolderOpen,
 } from "lucide-react";
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";
 import { TooltipProvider } from "@/components/ui/tooltip";
@ -1512,6 +1513,7 @@ function ConfigurationTab({
            <button
              type="button"
              role="switch"
+              data-slot="toggle"
              aria-checked={canCreateAgents}
              className={cn(
                "relative inline-flex h-5 w-9 items-center rounded-full transition-colors shrink-0 disabled:cursor-not-allowed disabled:opacity-50",
@ -1543,6 +1545,7 @@ function ConfigurationTab({
            <button
              type="button"
              role="switch"
+              data-slot="toggle"
              aria-checked={canAssignTasks}
              className={cn(
                "relative inline-flex h-5 w-9 items-center rounded-full transition-colors shrink-0 disabled:cursor-not-allowed disabled:opacity-50",
@ -1589,7 +1592,9 @@ function PromptsTab({
 }) {
  const queryClient = useQueryClient();
  const { selectedCompanyId } = useCompany();
+  const { isMobile } = useSidebar();
  const [selectedFile, setSelectedFile] = useState<string>("AGENTS.md");
+  const [showFilePanel, setShowFilePanel] = useState(false);
  const [draft, setDraft] = useState<string | null>(null);
  const [bundleDraft, setBundleDraft] = useState<{
    mode: "managed" | "external";
@ -2042,21 +2047,38 @@ function PromptsTab({
        </CollapsibleContent>
      </Collapsible>

-      <div ref={containerRef} className="flex gap-0">
-        <div className="border border-border rounded-lg p-3 space-y-3 shrink-0" style={{ width: filePanelWidth }}>
+      <div ref={containerRef} className={cn("flex gap-0", isMobile && "flex-col gap-3")}>
+        <div className={cn(
+          "border border-border rounded-lg p-3 space-y-3 shrink-0",
+          isMobile && showFilePanel && "block",
+          isMobile && !showFilePanel && "hidden",
+        )} style={isMobile ? undefined : { width: filePanelWidth }}>
          <div className="flex items-center justify-between">
            <h4 className="text-sm font-medium">Files</h4>
-            {!showNewFileInput && (
-              <Button
-                type="button"
-                size="icon"
-                variant="outline"
-                className="h-7 w-7"
-                onClick={() => setShowNewFileInput(true)}
-              >
-                +
-              </Button>
-            )}
+            <div className="flex items-center gap-1">
+              {!showNewFileInput && (
+                <Button
+                  type="button"
+                  size="icon"
+                  variant="outline"
+                  className="h-7 w-7"
+                  onClick={() => setShowNewFileInput(true)}
+                >
+                  +
+                </Button>
+              )}
+              {isMobile && (
+                <Button
+                  type="button"
+                  size="icon"
+                  variant="ghost"
+                  className="h-7 w-7"
+                  onClick={() => setShowFilePanel(false)}
+                >
+                  ✕
+                </Button>
+              )}
+            </div>
          </div>
          {showNewFileInput && (
            <div className="space-y-2">
@ -2121,6 +2143,7 @@ function PromptsTab({
            onSelectFile={(filePath) => {
              setSelectedFile(filePath);
              if (!fileOptions.includes(filePath)) setDraft("");
+              if (isMobile) setShowFilePanel(false);
            }}
            onToggleCheck={() => {}}
            showCheckboxes={false}
@ -2151,22 +2174,37 @@ function PromptsTab({
        </div>

        {/* Draggable separator */}
-        <div
-          className="w-1 shrink-0 cursor-col-resize hover:bg-border active:bg-primary/50 rounded transition-colors mx-1"
-          onMouseDown={handleSeparatorDrag}
-        />
+        {!isMobile && (
+          <div
+            className="w-1 shrink-0 cursor-col-resize hover:bg-border active:bg-primary/50 rounded transition-colors mx-1"
+            onMouseDown={handleSeparatorDrag}
+          />
+        )}

-        <div className="border border-border rounded-lg p-4 space-y-3 min-w-0 flex-1">
+        <div className={cn("border border-border rounded-lg p-4 space-y-3 min-w-0 flex-1", isMobile && showFilePanel && "hidden")}>
          <div className="flex items-center justify-between gap-3">
-            <div>
-              <h4 className="text-sm font-medium font-mono">{selectedOrEntryFile}</h4>
-              <p className="text-xs text-muted-foreground">
-                {selectedFileExists
-                  ? selectedFileSummary?.deprecated
-                    ? "Deprecated virtual file"
-                    : `${selectedFileDetail?.language ?? "text"} file`
-                  : "New file in this bundle"}
-              </p>
+            <div className="flex items-center gap-2 min-w-0">
+              {isMobile && (
+                <Button
+                  type="button"
+                  size="icon"
+                  variant="outline"
+                  className="h-7 w-7 shrink-0"
+                  onClick={() => setShowFilePanel(true)}
+                >
+                  <FolderOpen className="h-3.5 w-3.5" />
+                </Button>
+              )}
+              <div className="min-w-0">
+                <h4 className="text-sm font-medium font-mono truncate">{selectedOrEntryFile}</h4>
+                <p className="text-xs text-muted-foreground">
+                  {selectedFileExists
+                    ? selectedFileSummary?.deprecated
+                      ? "Deprecated virtual file"
+                      : `${selectedFileDetail?.language ?? "text"} file`
+                    : "New file in this bundle"}
+                </p>
+              </div>
            </div>
            {selectedFileExists && !selectedFileSummary?.deprecated && selectedOrEntryFile !== currentEntryFile && (
              <Button
--- a/ui/src/pages/Agents.tsx
+++ b/ui/src/pages/Agents.tsx
@ -45,17 +45,21 @@ function matchesFilter(status: string, tab: FilterTab, showTerminated: boolean):
 }

 function filterAgents(agents: Agent[], tab: FilterTab, showTerminated: boolean): Agent[] {
-  return agents.filter((a) => matchesFilter(a.status, tab, showTerminated));
+  return agents
+    .filter((a) => matchesFilter(a.status, tab, showTerminated))
+    .sort((a, b) => a.name.localeCompare(b.name));
 }

 function filterOrgTree(nodes: OrgNode[], tab: FilterTab, showTerminated: boolean): OrgNode[] {
-  return nodes.reduce<OrgNode[]>((acc, node) => {
-    const filteredReports = filterOrgTree(node.reports, tab, showTerminated);
-    if (matchesFilter(node.status, tab, showTerminated) || filteredReports.length > 0) {
-      acc.push({ ...node, reports: filteredReports });
-    }
-    return acc;
-  }, []);
+  return nodes
+    .reduce<OrgNode[]>((acc, node) => {
+      const filteredReports = filterOrgTree(node.reports, tab, showTerminated);
+      if (matchesFilter(node.status, tab, showTerminated) || filteredReports.length > 0) {
+        acc.push({ ...node, reports: filteredReports });
+      }
+      return acc;
+    }, [])
+    .sort((a, b) => a.name.localeCompare(b.name));
 }

 export function Agents() {
--- a/ui/src/pages/Auth.tsx
+++ b/ui/src/pages/Auth.tsx
@ -89,6 +89,8 @@ export function AuthPage() {

          <form
            className="mt-6 space-y-4"
+            method="post"
+            action={mode === "sign_up" ? "/api/auth/sign-up/email" : "/api/auth/sign-in/email"}
            onSubmit={(event) => {
              event.preventDefault();
              if (mutation.isPending) return;
@ -101,8 +103,10 @@ export function AuthPage() {
          >
            {mode === "sign_up" && (
              <div>
-                <label className="text-xs text-muted-foreground mb-1 block">Name</label>
+                <label htmlFor="name" className="text-xs text-muted-foreground mb-1 block">Name</label>
                <input
+                  id="name"
+                  name="name"
                  className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
                  value={name}
                  onChange={(event) => setName(event.target.value)}
@ -112,8 +116,10 @@ export function AuthPage() {
              </div>
            )}
            <div>
-              <label className="text-xs text-muted-foreground mb-1 block">Email</label>
+              <label htmlFor="email" className="text-xs text-muted-foreground mb-1 block">Email</label>
              <input
+                id="email"
+                name="email"
                className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
                type="email"
                value={email}
@ -123,8 +129,10 @@ export function AuthPage() {
              />
            </div>
            <div>
-              <label className="text-xs text-muted-foreground mb-1 block">Password</label>
+              <label htmlFor="password" className="text-xs text-muted-foreground mb-1 block">Password</label>
              <input
+                id="password"
+                name="password"
                className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
                type="password"
                value={password}
--- a/ui/src/pages/Dashboard.tsx
+++ b/ui/src/pages/Dashboard.tsx
@ -14,7 +14,7 @@ import { queryKeys } from "../lib/queryKeys";
 import { MetricCard } from "../components/MetricCard";
 import { EmptyState } from "../components/EmptyState";
 import { StatusIcon } from "../components/StatusIcon";
-import { PriorityIcon } from "../components/PriorityIcon";
+
 import { ActivityRow } from "../components/ActivityRow";
 import { Identity } from "../components/Identity";
 import { timeAgo } from "../lib/timeAgo";
@ -356,7 +356,6 @@ export function Dashboard() {
                            {issue.title}
                          </span>
                          <span className="flex items-center gap-2 sm:order-1 sm:shrink-0">
-                            <span className="hidden sm:inline-flex"><PriorityIcon priority={issue.priority} /></span>
                            <span className="hidden sm:inline-flex"><StatusIcon status={issue.status} /></span>
                            <span className="text-xs font-mono text-muted-foreground">
                              {issue.identifier ?? issue.id.slice(0, 8)}
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@ -15,7 +15,7 @@ import { createIssueDetailLocationState } from "../lib/issueDetailBreadcrumb";
 import { EmptyState } from "../components/EmptyState";
 import { PageSkeleton } from "../components/PageSkeleton";
 import { IssueRow } from "../components/IssueRow";
-import { PriorityIcon } from "../components/PriorityIcon";
+
 import { StatusIcon } from "../components/StatusIcon";
 import { StatusBadge } from "../components/StatusBadge";
 import { approvalLabel, defaultTypeIcon, typeIcon } from "../components/ApprovalPayload";
@ -767,9 +767,6 @@ export function Inbox() {
                    issueLinkState={issueLinkState}
                    desktopMetaLeading={(
                      <>
-                        <span className="hidden sm:inline-flex">
-                          <PriorityIcon priority={issue.priority} />
-                        </span>
                        <span className="hidden shrink-0 sm:inline-flex">
                          <StatusIcon status={issue.status} />
                        </span>
--- a/ui/src/pages/InstanceExperimentalSettings.tsx
+++ b/ui/src/pages/InstanceExperimentalSettings.tsx
@ -84,6 +84,7 @@ export function InstanceExperimentalSettings() {
          </div>
          <button
            type="button"
+            data-slot="toggle"
            aria-label="Toggle isolated workspaces experimental setting"
            disabled={toggleMutation.isPending}
            className={cn(
@ -113,6 +114,7 @@ export function InstanceExperimentalSettings() {
          </div>
          <button
            type="button"
+            data-slot="toggle"
            aria-label="Toggle guarded dev-server auto-restart"
            disabled={toggleMutation.isPending}
            className={cn(
--- a/ui/src/pages/InstanceGeneralSettings.tsx
+++ b/ui/src/pages/InstanceGeneralSettings.tsx
@ -81,6 +81,7 @@ export function InstanceGeneralSettings() {
          </div>
          <button
            type="button"
+            data-slot="toggle"
            aria-label="Toggle username log censoring"
            disabled={toggleMutation.isPending}
            className={cn(
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent } from "react";
+import { pickTextColorForPillBg } from "@/lib/color-contrast";
 import { Link, useLocation, useNavigate, useParams } from "@/lib/router";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { issuesApi } from "../api/issues";
@ -341,6 +342,8 @@ export function IssueDetail() {
        id: `agent:${agent.id}`,
        name: agent.name,
        kind: "agent",
+        agentId: agent.id,
+        agentIcon: agent.icon,
      });
    }
    for (const project of orderedProjects) {
@ -670,7 +673,12 @@ export function IssueDetail() {
        )}
      >
        <Paperclip className="h-3.5 w-3.5 mr-1.5" />
-        {uploadAttachment.isPending || importMarkdownDocument.isPending ? "Uploading..." : "Upload attachment"}
+        {uploadAttachment.isPending || importMarkdownDocument.isPending ? "Uploading..." : (
+          <>
+            <span className="hidden sm:inline">Upload attachment</span>
+            <span className="sm:hidden">Upload</span>
+          </>
+        )}
      </Button>
    </>
  );
@ -760,7 +768,7 @@ export function IssueDetail() {
                  className="inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-medium"
                  style={{
                    borderColor: label.color,
-                    color: label.color,
+                    color: pickTextColorForPillBg(label.color, 0.12),
                    backgroundColor: `${label.color}1f`,
                  }}
                >
--- a/ui/src/pages/MyIssues.tsx
+++ b/ui/src/pages/MyIssues.tsx
@ -5,7 +5,7 @@ import { useCompany } from "../context/CompanyContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { queryKeys } from "../lib/queryKeys";
 import { StatusIcon } from "../components/StatusIcon";
-import { PriorityIcon } from "../components/PriorityIcon";
+
 import { EntityRow } from "../components/EntityRow";
 import { EmptyState } from "../components/EmptyState";
 import { PageSkeleton } from "../components/PageSkeleton";
@ -56,10 +56,7 @@ export function MyIssues() {
              title={issue.title}
              to={`/issues/${issue.identifier ?? issue.id}`}
              leading={
-                <>
-                  <PriorityIcon priority={issue.priority} />
-                  <StatusIcon status={issue.status} />
-                </>
+                <StatusIcon status={issue.status} />
              }
              trailing={
                <span className="text-xs text-muted-foreground">
--- a/ui/src/pages/RoutineDetail.tsx
+++ b/ui/src/pages/RoutineDetail.tsx
@ -647,6 +647,7 @@ export function RoutineDetail() {
          <button
            type="button"
            role="switch"
+            data-slot="toggle"
            aria-checked={automationEnabled}
            aria-label={automationEnabled ? "Pause automatic triggers" : "Enable automatic triggers"}
            disabled={automationToggleDisabled}
--- a/ui/src/pages/Routines.tsx
+++ b/ui/src/pages/Routines.tsx
@ -580,6 +580,7 @@ export function Routines() {
                          <button
                            type="button"
                            role="switch"
+                            data-slot="toggle"
                            aria-checked={enabled}
                            aria-label={enabled ? `Disable ${routine.title}` : `Enable ${routine.title}`}
                            disabled={isStatusPending || isArchived}
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@ -13,7 +13,8 @@
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "lexical": ["./node_modules/lexical/index.d.ts"]
    }
  },
  "include": ["src"]
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@ -8,6 +8,7 @@ export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
+      lexical: path.resolve(__dirname, "./node_modules/lexical/Lexical.mjs"),
    },
  },
  server: {
--- a/ui/vitest.config.ts
+++ b/ui/vitest.config.ts
@ -1,6 +1,13 @@
+import path from "path";
 import { defineConfig } from "vitest/config";

 export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+      lexical: path.resolve(__dirname, "./node_modules/lexical/Lexical.mjs"),
+    },
+  },
  test: {
    environment: "node",
  },