feat: status bar added

frontend/src/components/ui/combobox.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useRef, useState } from 'react';
+import { Input } from './input';
+import { cn } from '@/lib/utils';
+
+// Searchable combobox: type to filter, click/Enter to pick. On blur it commits
+// only an exact (case-insensitive) match — otherwise it reverts, so the field
+// can't hold a typo'd value that isn't in the list.
+export function Combobox({
+  value, onChange, options, placeholder, className, allowFreeText = false,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  options: string[];
+  placeholder?: string;
+  className?: string;
+  allowFreeText?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function onDoc(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, []);
+
+  const filtered = open
+    ? options.filter((o) => o.toLowerCase().includes(query.toLowerCase())).slice(0, 60)
+    : [];
+
+  function commit(v: string) {
+    onChange(v);
+    setQuery(v);
+    setOpen(false);
+  }
+
+  function onBlur() {
+    // Defer so a click on an option registers first.
+    setTimeout(() => {
+      setOpen(false);
+      const exact = options.find((o) => o.toLowerCase() === query.trim().toLowerCase());
+      if (exact) { onChange(exact); setQuery(exact); }
+      else if (allowFreeText) { onChange(query.trim()); }
+      else { setQuery(value); } // revert typo
+    }, 120);
+  }
+
+  return (
+    <div ref={ref} className={cn('relative', className)}>
+      <Input
+        value={open ? query : value}
+        placeholder={placeholder}
+        // Focus selects the text so a keystroke replaces it — but does NOT
+        // open the list (so tabbing in doesn't pop the dropdown).
+        onFocus={(e) => { setQuery(value); e.currentTarget.select(); }}
+        onChange={(e) => { setQuery(e.target.value); setOpen(true); }}
+        onBlur={onBlur}
+        onKeyDown={(e) => {
+          if ((e.key === 'ArrowDown' || e.key === 'Alt') && !open) { setOpen(true); }
+          else if (e.key === 'Enter' && open && filtered.length > 0) { e.preventDefault(); commit(filtered[0]); }
+          else if (e.key === 'Escape') { setQuery(value); setOpen(false); }
+          // Tab: just let it move on; onBlur commits/closes. Options are
+          // tabIndex=-1 so a single Tab leaves the field.
+        }}
+      />
+      {open && filtered.length > 0 && (
+        <div className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-border bg-card shadow-lg text-xs">
+          {filtered.map((o) => (
+            <button
+              key={o}
+              type="button"
+              tabIndex={-1}
+              className="block w-full text-left px-2 py-1 hover:bg-accent/40"
+              onMouseDown={(e) => { e.preventDefault(); commit(o); }}
+            >
+              {o}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/ui/dialog.tsx

@@ -25,10 +25,10 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { hideClose?: boolean }
->(({ className, children, hideClose, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { hideClose?: boolean; hideOverlay?: boolean }
+>(({ className, children, hideClose, hideOverlay, ...props }, ref) => (
   <DialogPortal>
-    <DialogOverlay />
+    {!hideOverlay && <DialogOverlay />}
     <DialogPrimitive.Content
       ref={ref}
       className={cn(