feat: implement Phase 9 - Keyboard Shortcuts

Features added:
- Created useKeyboardShortcuts hook for managing keyboard shortcuts
  - Supports modifier keys (Ctrl, Shift, Alt)
  - Automatically ignores shortcuts when input fields are focused
  - ESC key blurs input fields to enable shortcuts
- Added global keyboard shortcuts:
  - / : Focus search field
  - r : Refresh process list
  - a : Select all processes (flat view only)
  - ESC : Clear selection / unfocus
  - ? (Shift+/) : Show keyboard shortcuts help
- Added process navigation shortcuts:
  - j : Select next process
  - k : Select previous process
  - Space : Toggle selection of focused process
  - Auto-scroll to focused process
- Created KeyboardShortcutsHelp modal component:
  - Organized shortcuts by category
  - Visual kbd elements for keys
  - Info about input field behavior
- Added keyboard shortcuts button to processes page header
- Added isFocused prop to ProcessCard with accent ring styling
- Added data-process-id attributes for keyboard navigation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

app/processes/page.tsx

@@ -1,20 +1,25 @@
 'use client';
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import { useProcesses } from '@/lib/hooks/useSupervisor';
 import { ProcessCard } from '@/components/process/ProcessCard';
 import { GroupView } from '@/components/groups/GroupView';
 import { GroupSelector } from '@/components/groups/GroupSelector';
 import { BatchActions } from '@/components/process/BatchActions';
 import { ProcessFilters } from '@/components/process/ProcessFilters';
-import { RefreshCw, AlertCircle, CheckSquare } from 'lucide-react';
+import { RefreshCw, AlertCircle, CheckSquare, Keyboard } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { useKeyboardShortcuts } from '@/lib/hooks/useKeyboardShortcuts';
+import { KeyboardShortcutsHelp } from '@/components/ui/KeyboardShortcutsHelp';
 import type { ProcessInfo } from '@/lib/supervisor/types';
 
 export default function ProcessesPage() {
   const [viewMode, setViewMode] = useState<'flat' | 'grouped'>('flat');
   const [selectedProcesses, setSelectedProcesses] = useState<Set<string>>(new Set());
   const [filteredProcesses, setFilteredProcesses] = useState<ProcessInfo[]>([]);
+  const [showShortcutsHelp, setShowShortcutsHelp] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState<number>(-1);
+  const searchInputRef = useRef<HTMLInputElement>(null);
   const { data: processes, isLoading, isError, refetch } = useProcesses();
 
   const handleFilterChange = useCallback((filtered: ProcessInfo[]) => {
@@ -48,6 +53,111 @@ export default function ProcessesPage() {
     setSelectedProcesses(new Set());
   };
 
+  // Get displayedProcesses for keyboard navigation
+  const displayedProcesses = filteredProcesses.length > 0 || !processes ? filteredProcesses : (processes || []);
+
+  // Keyboard shortcuts
+  useKeyboardShortcuts({
+    shortcuts: [
+      {
+        key: '/',
+        description: 'Focus search',
+        action: () => {
+          // Find and focus the search input
+          const searchInput = document.querySelector('input[type="text"]') as HTMLInputElement;
+          if (searchInput) {
+            searchInput.focus();
+          }
+        },
+      },
+      {
+        key: 'r',
+        description: 'Refresh',
+        action: () => {
+          refetch();
+        },
+      },
+      {
+        key: 'a',
+        description: 'Select all',
+        action: () => {
+          if (viewMode === 'flat') {
+            handleSelectAll();
+          }
+        },
+        enabled: viewMode === 'flat' && displayedProcesses.length > 0,
+      },
+      {
+        key: 'Escape',
+        description: 'Clear selection',
+        action: () => {
+          if (selectedProcesses.size > 0) {
+            handleClearSelection();
+          }
+          setFocusedIndex(-1);
+        },
+      },
+      {
+        key: '?',
+        shift: true,
+        description: 'Show keyboard shortcuts',
+        action: () => {
+          setShowShortcutsHelp(true);
+        },
+      },
+      {
+        key: 'j',
+        description: 'Next process',
+        action: () => {
+          if (viewMode === 'flat' && displayedProcesses.length > 0) {
+            setFocusedIndex((prev) => {
+              const next = prev + 1;
+              return next >= displayedProcesses.length ? 0 : next;
+            });
+          }
+        },
+        enabled: viewMode === 'flat' && displayedProcesses.length > 0,
+      },
+      {
+        key: 'k',
+        description: 'Previous process',
+        action: () => {
+          if (viewMode === 'flat' && displayedProcesses.length > 0) {
+            setFocusedIndex((prev) => {
+              const next = prev - 1;
+              return next < 0 ? displayedProcesses.length - 1 : next;
+            });
+          }
+        },
+        enabled: viewMode === 'flat' && displayedProcesses.length > 0,
+      },
+      {
+        key: ' ',
+        description: 'Toggle selection',
+        action: () => {
+          if (viewMode === 'flat' && focusedIndex >= 0 && focusedIndex < displayedProcesses.length) {
+            const process = displayedProcesses[focusedIndex];
+            const fullName = `${process.group}:${process.name}`;
+            handleSelectionChange(fullName, !selectedProcesses.has(fullName));
+          }
+        },
+        enabled: viewMode === 'flat' && focusedIndex >= 0 && displayedProcesses.length > 0,
+      },
+    ],
+  });
+
+  // Auto-select focused process
+  useEffect(() => {
+    if (focusedIndex >= 0 && focusedIndex < displayedProcesses.length) {
+      const process = displayedProcesses[focusedIndex];
+      const fullName = `${process.group}:${process.name}`;
+      const element = document.querySelector(`[data-process-id="${fullName}"]`);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+    }
+  }, [focusedIndex, displayedProcesses]);
+
   if (isLoading) {
     return (
       <div className="space-y-6">
@@ -80,8 +190,6 @@ export default function ProcessesPage() {
     );
   }
 
-  const displayedProcesses = filteredProcesses.length > 0 || !processes ? filteredProcesses : processes;
-
   return (
     <div className="space-y-6 animate-fade-in">
       <div className="flex items-center justify-between">
@@ -109,6 +217,14 @@ export default function ProcessesPage() {
             <RefreshCw className="h-4 w-4 mr-2" />
             Refresh
           </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setShowShortcutsHelp(true)}
+            title="Keyboard Shortcuts (Shift+?)"
+          >
+            <Keyboard className="h-4 w-4" />
+          </Button>
         </div>
       </div>
 
@@ -130,15 +246,18 @@ export default function ProcessesPage() {
         <GroupView processes={displayedProcesses} />
       ) : (
         <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-          {displayedProcesses.map((process) => {
+          {displayedProcesses.map((process, index) => {
             const fullName = `${process.group}:${process.name}`;
+            const isFocused = index === focusedIndex;
             return (
-              <ProcessCard
-                key={fullName}
-                process={process}
-                isSelected={selectedProcesses.has(fullName)}
-                onSelectionChange={handleSelectionChange}
-              />
+              <div key={fullName} data-process-id={fullName}>
+                <ProcessCard
+                  process={process}
+                  isSelected={selectedProcesses.has(fullName)}
+                  onSelectionChange={handleSelectionChange}
+                  isFocused={isFocused}
+                />
+              </div>
             );
           })}
         </div>
@@ -149,6 +268,11 @@ export default function ProcessesPage() {
         processes={displayedProcesses}
         onClearSelection={handleClearSelection}
       />
+
+      {/* Keyboard Shortcuts Help */}
+      {showShortcutsHelp && (
+        <KeyboardShortcutsHelp onClose={() => setShowShortcutsHelp(false)} />
+      )}
     </div>
   );
 }