[eric] canvas: the translucent arrow-nav chevrons are gone, arrow keys still navigate

frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx

@@ -506,8 +506,6 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         workflowCards={workflowCards}
         workflowsHub={workflowsHub}
         focusedCardId={focusedCardId}
-        shakeDirection={shakeDirection}
-        neighborDirections={neighborDirections}
         toolbarOpen={toolbarOpen}
         searchPaletteOpen={searchPaletteOpen}
         newAgentBounce={newAgentBounce}

frontend/src/app/pages/Dashboard/canvas/DashboardOverlays.tsx

@@ -4,7 +4,6 @@ import DashboardToolbar from '../DashboardToolbar';
 import CanvasControls from '../controls/CanvasControls';
 import HelpPill from '../desktop/HelpPill';
 import CardSearchPalette from '../controls/CardSearchPalette';
-import DirectionHints from '../controls/DirectionHints';
 import WorkflowRunningToast from '@/app/pages/Workflows/WorkflowRunningToast';
 import WorkflowNoticeToast from '@/app/pages/Workflows/WorkflowNoticeToast';
 import MissedRunsToast from '@/app/pages/Workflows/MissedRunsToast';
@@ -22,8 +21,6 @@ import type {
 import type { useCanvasControls } from '../hooks/interaction/useCanvasControls';
 
 type Canvas = ReturnType<typeof useCanvasControls>;
-type Direction = 'left' | 'right' | 'up' | 'down';
-type NeighborDirections = { left: boolean; right: boolean; up: boolean; down: boolean };
 
 interface DashboardOverlaysProps {
   anyFullscreen: boolean;
@@ -36,8 +33,6 @@ interface DashboardOverlaysProps {
   workflowCards: Record<string, WorkflowCardPosition>;
   workflowsHub: WorkflowsHubPosition | null;
   focusedCardId: string | null;
-  shakeDirection: Direction | null;
-  neighborDirections: NeighborDirections;
   toolbarOpen: boolean;
   searchPaletteOpen: boolean;
   newAgentBounce: boolean;
@@ -70,8 +65,6 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
   workflowCards,
   workflowsHub,
   focusedCardId,
-  shakeDirection,
-  neighborDirections,
   toolbarOpen,
   searchPaletteOpen,
   newAgentBounce,
@@ -123,16 +116,7 @@ const DashboardOverlays: React.FC<DashboardOverlaysProps> = ({
       </Box>
       )}
 
-      {/* Arrow navigation hints when zoomed in on a card */}
-      {focusedCardId && canvas.zoom >= 0.4 && (
-        <DirectionHints
-          hasLeft={neighborDirections.left}
-          hasRight={neighborDirections.right}
-          hasUp={neighborDirections.up}
-          hasDown={neighborDirections.down}
-          shakeDirection={shakeDirection}
-        />
-      )}
+      {/* Arrow-key nav still works; its translucent chevron hints are gone by Eric's call (2026-08-06). */}
 
       {/* Floating zoom controls + minimap */}
       {!anyFullscreen && (

frontend/src/app/pages/Dashboard/controls/DirectionHints.tsx

@@ -1,106 +0,0 @@
-import React from 'react';
-import Box from '@mui/material/Box';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import { useClaudeTokens } from '@/shared/styles/ThemeContext';
-
-interface Props {
-  hasLeft: boolean;
-  hasRight: boolean;
-  hasUp: boolean;
-  hasDown: boolean;
-  shakeDirection: 'left' | 'right' | 'up' | 'down' | null;
-}
-
-const shakeKeyframes: Record<string, string> = {
-  left: `
-    @keyframes shake-left { 0%,100% { transform: translateY(-50%) translateX(0); } 25% { transform: translateY(-50%) translateX(-6px); } 75% { transform: translateY(-50%) translateX(4px); } }
-  `,
-  right: `
-    @keyframes shake-right { 0%,100% { transform: translateY(-50%) translateX(0); } 25% { transform: translateY(-50%) translateX(6px); } 75% { transform: translateY(-50%) translateX(-4px); } }
-  `,
-  up: `
-    @keyframes shake-up { 0%,100% { transform: translateX(-50%) translateY(0); } 25% { transform: translateX(-50%) translateY(-6px); } 75% { transform: translateX(-50%) translateY(4px); } }
-  `,
-  down: `
-    @keyframes shake-down { 0%,100% { transform: translateX(-50%) translateY(0); } 25% { transform: translateX(-50%) translateY(6px); } 75% { transform: translateX(-50%) translateY(-4px); } }
-  `,
-};
-
-const DirectionHints: React.FC<Props> = ({ hasLeft, hasRight, hasUp, hasDown, shakeDirection }) => {
-  const c = useClaudeTokens();
-
-  const hintSx = {
-    position: 'absolute' as const,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 28,
-    height: 28,
-    borderRadius: '50%',
-    bgcolor: c.bg.surface,
-    border: `1px solid ${c.border.medium}`,
-    boxShadow: c.shadow.sm,
-    color: c.text.muted,
-    opacity: 0.5,
-    transition: 'opacity 0.2s',
-    pointerEvents: 'none' as const,
-  };
-
-  const shakingSx = (dir: string) => ({
-    ...hintSx,
-    opacity: 1,
-    color: c.accent.primary,
-    animation: `shake-${dir} 0.3s ease 2`,
-  });
-
-  const showLeft = hasLeft || shakeDirection === 'left';
-  const showRight = hasRight || shakeDirection === 'right';
-  const showUp = hasUp || shakeDirection === 'up';
-  const showDown = hasDown || shakeDirection === 'down';
-
-  return (
-    <>
-      {shakeDirection && (
-        <style>{shakeKeyframes[shakeDirection]}</style>
-      )}
-
-      {showLeft && (
-        <Box sx={{
-          ...(shakeDirection === 'left' ? shakingSx('left') : hintSx),
-          left: 16, top: '50%', transform: 'translateY(-50%)',
-        }}>
-          <ChevronLeftIcon sx={{ fontSize: '1.125rem' }} />
-        </Box>
-      )}
-      {showRight && (
-        <Box sx={{
-          ...(shakeDirection === 'right' ? shakingSx('right') : hintSx),
-          right: 16, top: '50%', transform: 'translateY(-50%)',
-        }}>
-          <ChevronRightIcon sx={{ fontSize: '1.125rem' }} />
-        </Box>
-      )}
-      {showUp && (
-        <Box sx={{
-          ...(shakeDirection === 'up' ? shakingSx('up') : hintSx),
-          top: 16, left: '50%', transform: 'translateX(-50%)',
-        }}>
-          <KeyboardArrowUpIcon sx={{ fontSize: '1.125rem' }} />
-        </Box>
-      )}
-      {showDown && (
-        <Box sx={{
-          ...(shakeDirection === 'down' ? shakingSx('down') : hintSx),
-          bottom: 56, left: '50%', transform: 'translateX(-50%)',
-        }}>
-          <KeyboardArrowDownIcon sx={{ fontSize: '1.125rem' }} />
-        </Box>
-      )}
-    </>
-  );
-};
-
-export default DirectionHints;