From 64df17fa7cc4534c87eb5f04d40e15bebf794dae Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Sun, 10 May 2026 18:41:33 +0000
Subject: [PATCH] fix(canvas): focus-visible rings on remaining 7 component
 files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- OrgImportPreflightModal.tsx: Import (accent), 2× Save env (accent)
- SidePanel.tsx: close panel (accent), restart-now banner (accent)
- Toolbar.tsx: audit trail shortcut icon (accent, upgraded /40 → full)
- CreateWorkspaceDialog.tsx: tier radio buttons (accent)
- ConsoleModal.tsx: Copy button (accent, upgraded /60 → full)
- DetailsTab.tsx: Cancel (accent), Restart (accent), Edit (accent),
  View console (accent), peer row (accent), Delete (red)
- ActivityTab.tsx: activity row expand (accent)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/ConsoleModal.tsx            |  2 +-
 canvas/src/components/CreateWorkspaceDialog.tsx   |  2 +-
 canvas/src/components/OrgImportPreflightModal.tsx |  6 +++---
 canvas/src/components/SidePanel.tsx               |  4 ++--
 canvas/src/components/Toolbar.tsx                 |  2 +-
 canvas/src/components/tabs/ActivityTab.tsx        |  2 +-
 canvas/src/components/tabs/DetailsTab.tsx         | 12 ++++++------
 7 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/canvas/src/components/ConsoleModal.tsx b/canvas/src/components/ConsoleModal.tsx
index 31196ae9..f20faa8a 100644
--- a/canvas/src/components/ConsoleModal.tsx
+++ b/canvas/src/components/ConsoleModal.tsx
@@ -165,7 +165,7 @@ export function ConsoleModal({ workspaceId, workspaceName, open, onClose }: Prop
                   showToast("Copy requires HTTPS — please select and copy manually", "info");
                 }
               }}
-              className="px-3 py-1.5 text-[11px] text-ink-mid hover:text-ink bg-surface-card hover:bg-surface-elevated border border-line hover:border-line-soft rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/60 focus-visible:ring-offset-2 focus-visible:ring-offset-surface"
+              className="px-3 py-1.5 text-[11px] text-ink-mid hover:text-ink bg-surface-card hover:bg-surface-elevated border border-line hover:border-line-soft rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
             >
               Copy
             </button>
diff --git a/canvas/src/components/CreateWorkspaceDialog.tsx b/canvas/src/components/CreateWorkspaceDialog.tsx
index 4163d584..3830124b 100644
--- a/canvas/src/components/CreateWorkspaceDialog.tsx
+++ b/canvas/src/components/CreateWorkspaceDialog.tsx
@@ -411,7 +411,7 @@ export function CreateWorkspaceButton() {
                     tabIndex={tier === t.value ? 0 : -1}
                     onClick={() => setTier(t.value)}
                     onKeyDown={(e) => handleRadioKeyDown(e, idx)}
-                    className={`py-2 rounded-lg text-center transition-colors ${
+                    className={`py-2 rounded-lg text-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 ${
                       tier === t.value
                         ? "bg-accent-strong/20 border border-accent/50 text-accent"
                         : "bg-surface-card/60 border border-line/40 text-ink-mid hover:text-ink-mid hover:border-line"
diff --git a/canvas/src/components/OrgImportPreflightModal.tsx b/canvas/src/components/OrgImportPreflightModal.tsx
index 048ad054..3a1b22ad 100644
--- a/canvas/src/components/OrgImportPreflightModal.tsx
+++ b/canvas/src/components/OrgImportPreflightModal.tsx
@@ -308,7 +308,7 @@ export function OrgImportPreflightModal({
               type="button"
               onClick={onProceed}
               disabled={!canProceed}
-              className="px-4 py-1.5 text-[11px] font-semibold rounded bg-accent hover:bg-accent-strong text-white disabled:bg-surface-card disabled:text-white-soft disabled:cursor-not-allowed"
+              className="px-4 py-1.5 text-[11px] font-semibold rounded bg-accent hover:bg-accent-strong text-white disabled:bg-surface-card disabled:text-white-soft disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
             >
               Import
             </button>
@@ -428,7 +428,7 @@ function StrictEnvRow({
             type="button"
             onClick={() => onSave(envKey)}
             disabled={d?.saving || !d?.value.trim()}
-            className="px-2 py-1 text-[10px] rounded bg-accent hover:bg-accent-strong text-white disabled:opacity-40 disabled:cursor-not-allowed"
+            className="px-2 py-1 text-[10px] rounded bg-accent hover:bg-accent-strong text-white disabled:opacity-40 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
           >
             {d?.saving ? "…" : "Save"}
           </button>
@@ -520,7 +520,7 @@ function AnyOfEnvGroup({
                     type="button"
                     onClick={() => onSave(m)}
                     disabled={d?.saving || !d?.value.trim()}
-                    className="px-2 py-1 text-[10px] rounded bg-accent hover:bg-accent-strong text-white disabled:opacity-40 disabled:cursor-not-allowed"
+                    className="px-2 py-1 text-[10px] rounded bg-accent hover:bg-accent-strong text-white disabled:opacity-40 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
                   >
                     {d?.saving ? "…" : "Save"}
                   </button>
diff --git a/canvas/src/components/SidePanel.tsx b/canvas/src/components/SidePanel.tsx
index 39ec5d2b..bb608bf4 100644
--- a/canvas/src/components/SidePanel.tsx
+++ b/canvas/src/components/SidePanel.tsx
@@ -197,7 +197,7 @@ export function SidePanel() {
           type="button"
           onClick={() => selectNode(null)}
           aria-label="Close workspace panel"
-          className="w-7 h-7 flex items-center justify-center rounded-lg text-ink-mid hover:text-ink hover:bg-surface-card/60 transition-colors"
+          className="w-7 h-7 flex items-center justify-center rounded-lg text-ink-mid hover:text-ink hover:bg-surface-card/60 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
         >
           <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
             <path d="M1 1l10 10M11 1L1 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
@@ -268,7 +268,7 @@ export function SidePanel() {
             onClick={() => {
               useCanvasStore.getState().restartWorkspace(selectedNodeId).catch(() => showToast("Restart failed", "error"));
             }}
-            className="text-[11px] px-2 py-1 bg-sky-800/40 hover:bg-sky-700/50 text-sky-200 rounded transition-colors"
+            className="text-[11px] px-2 py-1 bg-sky-800/40 hover:bg-sky-700/50 text-sky-200 rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
           >
             Restart Now
           </button>
diff --git a/canvas/src/components/Toolbar.tsx b/canvas/src/components/Toolbar.tsx
index f7427bd5..1dab7f36 100644
--- a/canvas/src/components/Toolbar.tsx
+++ b/canvas/src/components/Toolbar.tsx
@@ -280,7 +280,7 @@ export function Toolbar() {
         }}
         aria-label="Open audit trail for selected workspace"
         title="Audit — view ledger for the selected workspace"
-        className="flex items-center justify-center w-7 h-7 bg-surface-card hover:bg-surface-card/70 border border-line rounded-lg transition-colors text-ink-mid hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
+        className="flex items-center justify-center w-7 h-7 bg-surface-card hover:bg-surface-card/70 border border-line rounded-lg transition-colors text-ink-mid hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
       >
         {/* Scroll / ledger icon */}
         <svg
diff --git a/canvas/src/components/tabs/ActivityTab.tsx b/canvas/src/components/tabs/ActivityTab.tsx
index 860d85f1..18e605a0 100644
--- a/canvas/src/components/tabs/ActivityTab.tsx
+++ b/canvas/src/components/tabs/ActivityTab.tsx
@@ -247,7 +247,7 @@ function ActivityRow({
           : "bg-surface-card/60 border-line/40"
       }`}
     >
-      <button type="button" onClick={onToggle} className="w-full text-left px-3 py-2">
+      <button type="button" onClick={onToggle} className="w-full text-left px-3 py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1">
         {/* Top row: type badge + method + time */}
         <div className="flex items-center gap-2">
           <span className={`text-[8px] font-mono px-1.5 py-0.5 rounded ${typeStyle.text} ${typeStyle.bg} border ${typeStyle.border}`}>
diff --git a/canvas/src/components/tabs/DetailsTab.tsx b/canvas/src/components/tabs/DetailsTab.tsx
index 2677a2f6..8d659797 100644
--- a/canvas/src/components/tabs/DetailsTab.tsx
+++ b/canvas/src/components/tabs/DetailsTab.tsx
@@ -182,7 +182,7 @@ export function DetailsTab({ workspaceId, data }: Props) {
                   setRole(data.role || "");
                   setTier(data.tier);
                 }}
-                className="px-3 py-1 bg-surface-card hover:bg-surface-card text-xs rounded text-ink-mid"
+                className="px-3 py-1 bg-surface-card hover:bg-surface-card text-xs rounded text-ink-mid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
               >
                 Cancel
               </button>
@@ -211,7 +211,7 @@ export function DetailsTab({ workspaceId, data }: Props) {
                   type="button"
                   onClick={handleRestart}
                   disabled={restarting}
-                  className="px-3 py-1 bg-green-700 hover:bg-green-600 text-xs rounded text-white disabled:opacity-50"
+                  className="px-3 py-1 bg-green-700 hover:bg-green-600 text-xs rounded text-white disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
                 >
                   {restarting ? "Restarting..." : data.status === "failed" ? "Retry" : "Restart"}
                 </button>
@@ -220,7 +220,7 @@ export function DetailsTab({ workspaceId, data }: Props) {
             <button
               type="button"
               onClick={() => setEditing(true)}
-              className="mt-2 px-3 py-1 bg-surface-card hover:bg-surface-card text-xs rounded text-ink-mid"
+              className="mt-2 px-3 py-1 bg-surface-card hover:bg-surface-card text-xs rounded text-ink-mid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
             >
               Edit
             </button>
@@ -247,7 +247,7 @@ export function DetailsTab({ workspaceId, data }: Props) {
           <button
             type="button"
             onClick={() => setConsoleOpen(true)}
-            className="mt-2 px-3 py-1 bg-surface-card hover:bg-surface-card text-xs rounded text-ink-mid border border-line"
+            className="mt-2 px-3 py-1 bg-surface-card hover:bg-surface-card text-xs rounded text-ink-mid border border-line focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
           >
             View console output
           </button>
@@ -293,7 +293,7 @@ export function DetailsTab({ workspaceId, data }: Props) {
                 key={p.id}
                 type="button"
                 onClick={() => selectNode(p.id)}
-                className="w-full flex items-center gap-2 px-2 py-1 rounded hover:bg-surface-card text-left"
+                className="w-full flex items-center gap-2 px-2 py-1 rounded hover:bg-surface-card text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
               >
                 <StatusDot status={p.status} />
                 <span className="text-xs text-ink">{p.name}</span>
@@ -353,7 +353,7 @@ export function DetailsTab({ workspaceId, data }: Props) {
             type="button"
             ref={deleteButtonRef}
             onClick={() => setConfirmDelete(true)}
-            className="px-3 py-1 bg-surface-card hover:bg-red-900 border border-line hover:border-red-700 text-xs rounded text-ink-mid hover:text-bad transition-colors"
+            className="px-3 py-1 bg-surface-card hover:bg-red-900 border border-line hover:border-red-700 text-xs rounded text-ink-mid hover:text-bad transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-1"
           >
             Delete Workspace
           </button>