feat: enhance discovery, vibe sessions, and library enrichment

frontend/src/components/TopBar.tsx

@@ -1,11 +1,13 @@
 import { useEffect, useRef, useState } from 'react';
-import { Search, X, Command, ChevronRight, Wifi, WifiOff } from 'lucide-react';
+import { Search, X, Command, ChevronRight, Wifi, WifiOff, Menu } from 'lucide-react';
 import { useNavigate, useRouterState } from '@tanstack/react-router';
 import { useQuery } from '@tanstack/react-query';
 import { fetchHealthStatus } from '../services/healthService';
 
 interface TopBarProps {
   onToggleCommandPalette: () => void;
+  onToggleNavigation: () => void;
+  navigationOpen: boolean;
 }
 
 /** Page title map for breadcrumbs */
@@ -86,7 +88,7 @@ function ConnectionStatus() {
   );
 }
 
-export function TopBar({ onToggleCommandPalette }: TopBarProps) {
+export function TopBar({ onToggleCommandPalette, onToggleNavigation, navigationOpen }: TopBarProps) {
   const navigate = useNavigate();
   const inputRef = useRef<HTMLInputElement>(null);
   const { pathname, urlQuery } = useRouterState({
@@ -136,14 +138,23 @@ export function TopBar({ onToggleCommandPalette }: TopBarProps) {
   };
 
   return (
-    <header className="glass h-12 border-b border-border flex items-center px-3 gap-3 shrink-0 z-20">
+    <header className="glass h-12 border-b border-border flex items-center px-2.5 gap-2 sm:px-3 sm:gap-3 shrink-0 z-20">
+      <button
+        type="button"
+        onClick={onToggleNavigation}
+        className="rounded-md p-2 text-muted hover:bg-surface0 hover:text-text lg:hidden"
+        aria-label={navigationOpen ? 'Close navigation' : 'Open navigation'}
+        aria-expanded={navigationOpen}
+      >
+        {navigationOpen ? <X size={18} /> : <Menu size={18} />}
+      </button>
       {/* Breadcrumbs */}
-      <div className="flex items-center min-w-0 flex-none max-w-[200px]">
+      <div className="hidden sm:flex items-center min-w-0 flex-none max-w-[200px]">
         <Breadcrumbs pathname={pathname} />
       </div>
 
       {/* Universal search */}
-      <form onSubmit={handleSubmit} className="flex-1 max-w-md">
+      <form onSubmit={handleSubmit} className="min-w-0 flex-1 max-w-md">
         <div className="relative group">
           <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted pointer-events-none transition-colors group-focus-within:text-accent" />
           <input
@@ -172,7 +183,7 @@ export function TopBar({ onToggleCommandPalette }: TopBarProps) {
       </form>
 
       {/* Right section */}
-      <div className="flex items-center gap-2 flex-none">
+      <div className="flex items-center gap-1.5 sm:gap-2 flex-none">
         {/* Connection status */}
         <ConnectionStatus />
 
@@ -184,7 +195,7 @@ export function TopBar({ onToggleCommandPalette }: TopBarProps) {
         >
           <Command size={12} />
           <span className="hidden sm:inline">Commands</span>
-          <kbd className="rounded border border-border bg-bg2 px-1 text-[10px] text-muted">
+          <kbd className="hidden md:inline rounded border border-border bg-bg2 px-1 text-[10px] text-muted">
             Ctrl+K
           </kbd>
         </button>