Add cracker dropin interface

frontend/src/components/CrackerPanel.tsx

@@ -23,9 +23,10 @@ interface CrackerPanelProps {
   packets: RawPacket[];
   channels: Channel[];
   onChannelCreate: (name: string, key: string) => Promise<void>;
+  onRunningChange?: (running: boolean) => void;
 }
 
-export function CrackerPanel({ packets, channels, onChannelCreate }: CrackerPanelProps) {
+export function CrackerPanel({ packets, channels, onChannelCreate, onRunningChange }: CrackerPanelProps) {
   const [isRunning, setIsRunning] = useState(false);
   const [maxLength, setMaxLength] = useState(6);
   const [retryFailedAtNextLength, setRetryFailedAtNextLength] = useState(false);
@@ -113,6 +114,11 @@ export function CrackerPanel({ packets, channels, onChannelCreate }: CrackerPane
     maxLengthRef.current = maxLength;
   }, [maxLength]);
 
+  // Notify parent of running state changes
+  useEffect(() => {
+    onRunningChange?.(isRunning);
+  }, [isRunning, onRunningChange]);
+
   // Stats (cracking count is implicit - if progress is shown, we're cracking one)
   const pendingCount = Array.from(queue.values()).filter(q => q.status === 'pending').length;
   const crackedCount = Array.from(queue.values()).filter(q => q.status === 'cracked').length;

frontend/src/components/Sidebar.tsx

@@ -18,6 +18,9 @@ interface SidebarProps {
   onNewMessage: () => void;
   lastMessageTimes: ConversationTimes;
   unreadCounts: Record<string, number>;
+  showCracker: boolean;
+  crackerRunning: boolean;
+  onToggleCracker: () => void;
 }
 
 // Load sort preference from localStorage
@@ -47,6 +50,9 @@ export function Sidebar({
   onNewMessage,
   lastMessageTimes,
   unreadCounts,
+  showCracker,
+  crackerRunning,
+  onToggleCracker,
 }: SidebarProps) {
   const [sortOrder, setSortOrder] = useState<SortOrder>(loadSortOrder);
   const [searchQuery, setSearchQuery] = useState('');
@@ -219,6 +225,28 @@ export function Sidebar({
           </div>
         )}
 
+        {/* Cracker Toggle */}
+        {!query && (
+          <div
+            className={cn(
+              "px-3 py-2.5 cursor-pointer flex items-center gap-2 border-l-2 border-transparent hover:bg-accent",
+              showCracker && "bg-accent border-l-primary"
+            )}
+            onClick={onToggleCracker}
+          >
+            <span className="text-muted-foreground text-xs">🔓</span>
+            <span className="flex-1 truncate">
+              {showCracker ? 'Hide' : 'Show'} Cracker
+              <span className={cn(
+                "ml-1 text-xs",
+                crackerRunning ? "text-green-500" : "text-muted-foreground"
+              )}>
+                ({crackerRunning ? 'running' : 'stopped'})
+              </span>
+            </span>
+          </div>
+        )}
+
         {/* Channels */}
         {filteredChannels.length > 0 && (
           <>