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>

components/ui/KeyboardShortcutsHelp.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { X, Keyboard } from 'lucide-react';
+
+interface KeyboardShortcutsHelpProps {
+  onClose: () => void;
+}
+
+interface ShortcutGroup {
+  title: string;
+  shortcuts: Array<{
+    keys: string[];
+    description: string;
+  }>;
+}
+
+const SHORTCUT_GROUPS: ShortcutGroup[] = [
+  {
+    title: 'Navigation',
+    shortcuts: [
+      { keys: ['/'], description: 'Focus search field' },
+      { keys: ['j'], description: 'Select next process' },
+      { keys: ['k'], description: 'Select previous process' },
+      { keys: ['Esc'], description: 'Clear selection / Close modals' },
+    ],
+  },
+  {
+    title: 'Actions',
+    shortcuts: [
+      { keys: ['r'], description: 'Refresh process list' },
+      { keys: ['Space'], description: 'Toggle process selection' },
+      { keys: ['a'], description: 'Select all processes' },
+      { keys: ['s'], description: 'Start selected processes' },
+      { keys: ['x'], description: 'Stop selected processes' },
+      { keys: ['t'], description: 'Restart selected processes' },
+    ],
+  },
+  {
+    title: 'General',
+    shortcuts: [
+      { keys: ['?'], description: 'Show keyboard shortcuts (this dialog)' },
+    ],
+  },
+];
+
+export function KeyboardShortcutsHelp({ onClose }: KeyboardShortcutsHelpProps) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+      <Card className="w-full max-w-2xl shadow-2xl max-h-[80vh] overflow-y-auto">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="flex items-center gap-2">
+                <Keyboard className="h-5 w-5" />
+                Keyboard Shortcuts
+              </CardTitle>
+              <CardDescription className="mt-1">
+                Use these keyboard shortcuts to navigate and control processes
+              </CardDescription>
+            </div>
+            <Button variant="ghost" size="icon" onClick={onClose}>
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          {SHORTCUT_GROUPS.map((group) => (
+            <div key={group.title}>
+              <h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
+                {group.title}
+              </h3>
+              <div className="space-y-2">
+                {group.shortcuts.map((shortcut, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between py-2 px-3 rounded-md hover:bg-accent/5"
+                  >
+                    <span className="text-sm">{shortcut.description}</span>
+                    <div className="flex gap-1">
+                      {shortcut.keys.map((key, keyIndex) => (
+                        <kbd
+                          key={keyIndex}
+                          className="px-2 py-1 text-xs font-semibold text-foreground bg-muted border border-border rounded shadow-sm min-w-[2rem] text-center"
+                        >
+                          {key}
+                        </kbd>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+
+          <div className="pt-4 border-t border-border">
+            <p className="text-xs text-muted-foreground">
+              Note: Most shortcuts are disabled when typing in input fields. Press{' '}
+              <kbd className="px-1 py-0.5 text-xs font-semibold bg-muted border border-border rounded">
+                Esc
+              </kbd>{' '}
+              to exit input fields and enable shortcuts.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}