Review fixes: focus behind a modal, the model tick, a stray tab stop

- A canvas tab's Move to Trash… opens its modal in the top window, and
  Radix then gave focus back to the tab in the canvas's frame, behind it,
  where Escape no longer cancelled. The menu leaves focus alone while a
  dialog is open.
- The tick is the ItemIndicator's to place, so it sits at the row's end
  again rather than against the model's name.
- The agent menu hands focus back to the bar's button, which its stand-in
  anchor cannot take.
- The device filter's grid takes no tab stop of its own, and neither menu
  box draws a focus ring when opened from the keyboard.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: Jing-yilin

canvas/src/ChatPanel.tsx

@@ -1756,8 +1756,8 @@ export function ChatPanel(props: {
                             </small>
                           )}
                         </span>
-                        <DropdownMenu.ItemIndicator>
-                          <Check className="sp-menu-ck" />
+                        <DropdownMenu.ItemIndicator className="sp-menu-ck">
+                          <Check />
                         </DropdownMenu.ItemIndicator>
                       </DropdownMenu.RadioItem>
                     ))}
@@ -1812,7 +1812,11 @@ export function ChatPanel(props: {
             className="sp-chat-agents"
             align="start"
             sideOffset={4}
-            onCloseAutoFocus={(event) => event.preventDefault()}
+            // Back to the bar's button, which the stand-in can't take.
+            onCloseAutoFocus={(event) => {
+              event.preventDefault();
+              document.querySelector<HTMLElement>(".sp-agent-toggle")?.focus();
+            }}
           >
             <DropdownMenu.RadioGroup
               value={agent}
@@ -1830,8 +1834,8 @@ export function ChatPanel(props: {
                     {a.name}
                     {!a.available && <small>{a.missing}</small>}
                   </span>
-                  <DropdownMenu.ItemIndicator>
-                    <Check className="sp-menu-ck" />
+                  <DropdownMenu.ItemIndicator className="sp-menu-ck">
+                    <Check />
                   </DropdownMenu.ItemIndicator>
                 </DropdownMenu.RadioItem>
               ))}

canvas/src/Community.tsx

@@ -264,18 +264,17 @@ export function CommunityCards({
   duplicate?: Duplicate;
   limit: number;
 }) {
+  const all = useCommunity();
   return (
     <ul className="home-grid">
-      {useCommunity()
-        .slice(0, limit)
-        .map((e) => (
-          <Card
-            key={e.id}
-            entry={e}
-            onOpen={() => openInApp(e.id)}
-            menu={cardMenu(e, openInApp, duplicate)}
-          />
-        ))}
+      {all.slice(0, limit).map((e) => (
+        <Card
+          key={e.id}
+          entry={e}
+          onOpen={() => openInApp(e.id)}
+          menu={cardMenu(e, openInApp, duplicate)}
+        />
+      ))}
     </ul>
   );
 }
@@ -445,7 +444,7 @@ export function CommunityPage({
           </div>
         )}
         <Tabs.Content value={family} asChild>
-          <ul className="cm-grid" aria-live="polite">
+          <ul className="cm-grid" aria-live="polite" tabIndex={-1}>
             {shown.map((e) => (
               <Card
                 key={e.id}

canvas/src/contextMenu.tsx

@@ -19,7 +19,16 @@ export function RightClickMenu({
     <ContextMenu.Root>
       <ContextMenu.Trigger asChild>{children}</ContextMenu.Trigger>
       <ContextMenu.Portal>
-        <ContextMenu.Content className="sp-context-menu">
+        <ContextMenu.Content
+          className="sp-context-menu"
+          // An item that asks first (confirmTrash) opens a modal in the top window; handing focus
+          // back to the menu's owner in the canvas's frame would take it from behind that modal,
+          // where Escape no longer cancels.
+          onCloseAutoFocus={(event) => {
+            if (window.top!.document.querySelector("dialog[open]"))
+              event.preventDefault();
+          }}
+        >
           {menu}
         </ContextMenu.Content>
       </ContextMenu.Portal>

canvas/src/index.css

@@ -1064,6 +1064,7 @@ button {
 .sp-context-menu {
   --sp-hover: var(--ds-gray-100);
   z-index: 1000;
+  outline: none;
   min-width: 180px;
   padding: 4px;
   border: 1px solid var(--ds-gray-400);
@@ -1094,6 +1095,7 @@ a.sp-menu-row {
 }
 
 .sp-menu-ck {
+  display: flex;
   flex: none;
   margin-left: auto;
   color: var(--sp-text-2);
@@ -2491,6 +2493,7 @@ a.sp-menu-row {
 .sp-chat-agents,
 .sp-chat-picker {
   z-index: 1000;
+  outline: none;
   margin: 0;
   padding: 4px;
   border: 1px solid var(--sp-line);
@@ -2580,10 +2583,6 @@ a.sp-menu-row {
   padding: 6px 8px;
 }
 
-.sp-chat-agents .sp-menu-row[data-disabled] {
-  color: var(--sp-text-2);
-}
-
 /* A mark in its brand colour beside greyed-out text reads as the available one, and Claude's is
    a fixed terracotta rather than currentColor, so the row dims the mark itself. */
 .sp-chat-agents .sp-menu-row[data-disabled] svg {