fix(canvas/mobile): WCAG 2.4.7 focus-visible rings on MobileCanvas buttons

- Add focus-visible outline ring to 3 inline-styled buttons:
  - Reset zoom button (aria-label="Reset zoom")
  - Agent node button (aria-label={Open ${name}})
  - Spawn FAB (aria-label="Spawn new agent")
- Focus ring uses var(--accent, #3b82f6) to match existing design tokens.

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

canvas/src/components/mobile/MobileCanvas.tsx

@@ -171,6 +171,20 @@ export function MobileCanvas({
       onTouchMove={onTouchMove}
       onTouchEnd={onTouchEnd}
     >
+      <style>{`
+        .mobile-canvas__reset-btn:focus-visible {
+          outline: 2px solid var(--accent, #3b82f6);
+          outline-offset: 2px;
+        }
+        .mobile-canvas__node-btn:focus-visible {
+          outline: 2px solid var(--accent, #3b82f6);
+          outline-offset: 2px;
+        }
+        .mobile-canvas__spawn-btn:focus-visible {
+          outline: 2px solid var(--accent, #3b82f6);
+          outline-offset: 2px;
+        }
+      `}</style>
       {/* Dotted grid background — fills the viewport, doesn't transform */}
       <div
         style={{
@@ -205,6 +219,7 @@ export function MobileCanvas({
           type="button"
           onClick={resetView}
           aria-label="Reset zoom"
+          className="mobile-canvas__reset-btn"
           style={{
             position: "absolute",
             right: 14,
@@ -271,6 +286,8 @@ export function MobileCanvas({
           <button
             key={l.agent.id}
             type="button"
+            aria-label={`Open ${l.agent.name}`}
+            className="mobile-canvas__node-btn"
             onClick={() => onOpen(l.agent.id)}
             style={{
               position: "absolute",
@@ -376,6 +393,7 @@ export function MobileCanvas({
         type="button"
         onClick={onSpawn}
         aria-label="Spawn new agent"
+        className="mobile-canvas__spawn-btn"
         style={{
           position: "absolute",
           right: 24,

canvas/src/components/tabs/chat/AttachmentViews.tsx

@@ -33,7 +33,7 @@ export function PendingAttachmentPill({
       <button
         onClick={onRemove}
         aria-label={`Remove ${file.name}`}
-        className="ml-0.5 text-ink-mid hover:text-ink transition-colors shrink-0"
+        className="ml-0.5 text-ink-mid hover:text-ink transition-colors shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
       >
         <svg width="10" height="10" viewBox="0 0 16 16" fill="none" aria-hidden="true">
           <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
@@ -63,7 +63,8 @@ export function AttachmentChip({
     <button
       onClick={() => onDownload(attachment)}
       title={`Download ${attachment.name}`}
-      className={`flex items-center gap-1.5 rounded-md border px-2 py-1 text-[10px] transition-colors max-w-full ${toneClasses}`}
+      aria-label={`Download ${attachment.name}`}
+      className={`flex items-center gap-1.5 rounded-md border px-2 py-1 text-[10px] transition-colors max-w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 ${toneClasses}`}
     >
       <FileGlyph className="shrink-0 opacity-70" />
       <span className="truncate">{attachment.name}</span>