Merge branch 'main' into running-agents-list

app/src/hooks/use-keyboard-shortcuts.ts

@@ -1,10 +1,10 @@
 "use client";
 
 import { useEffect, useCallback } from "react";
-import { useAppStore } from "@/store/app-store";
+import { useAppStore, parseShortcut } from "@/store/app-store";
 
 export interface KeyboardShortcut {
-  key: string;
+  key: string;  // Can be simple "K" or with modifiers "Shift+N", "Cmd+K"
   action: () => void;
   description?: string;
 }
@@ -59,9 +59,44 @@ function isInputFocused(): boolean {
   return false;
 }
 
+/**
+ * Check if a keyboard event matches a shortcut definition
+ */
+function matchesShortcut(event: KeyboardEvent, shortcutStr: string): boolean {
+  const shortcut = parseShortcut(shortcutStr);
+
+  // Check if the key matches (case-insensitive)
+  if (event.key.toLowerCase() !== shortcut.key.toLowerCase()) {
+    return false;
+  }
+
+  // Check modifier keys
+  const cmdCtrlPressed = event.metaKey || event.ctrlKey;
+  const shiftPressed = event.shiftKey;
+  const altPressed = event.altKey;
+
+  // If shortcut requires cmdCtrl, it must be pressed
+  if (shortcut.cmdCtrl && !cmdCtrlPressed) return false;
+  // If shortcut doesn't require cmdCtrl, it shouldn't be pressed
+  if (!shortcut.cmdCtrl && cmdCtrlPressed) return false;
+
+  // If shortcut requires shift, it must be pressed
+  if (shortcut.shift && !shiftPressed) return false;
+  // If shortcut doesn't require shift, it shouldn't be pressed
+  if (!shortcut.shift && shiftPressed) return false;
+
+  // If shortcut requires alt, it must be pressed
+  if (shortcut.alt && !altPressed) return false;
+  // If shortcut doesn't require alt, it shouldn't be pressed
+  if (!shortcut.alt && altPressed) return false;
+
+  return true;
+}
+
 /**
  * Hook to manage keyboard shortcuts
  * Shortcuts won't fire when user is typing in inputs, textareas, or when dialogs are open
+ * Supports modifier keys: Shift, Cmd/Ctrl, Alt/Option
  */
 export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[]) {
   const handleKeyDown = useCallback(
@@ -71,14 +106,9 @@ export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[]) {
         return;
       }
 
-      // Don't trigger if any modifier keys are pressed (except for specific combos we want)
-      if (event.ctrlKey || event.altKey || event.metaKey) {
-        return;
-      }
-
       // Find matching shortcut
       const matchingShortcut = shortcuts.find(
-        (shortcut) => shortcut.key.toLowerCase() === event.key.toLowerCase()
+        (shortcut) => matchesShortcut(event, shortcut.key)
       );
 
       if (matchingShortcut) {

app/src/hooks/use-scroll-tracking.ts

@@ -0,0 +1,104 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+
+interface ScrollTrackingItem {
+  id: string;
+}
+
+interface UseScrollTrackingOptions<T extends ScrollTrackingItem> {
+  /** Navigation items with at least an id property */
+  items: T[];
+  /** Optional filter function to determine which items should be tracked */
+  filterFn?: (item: T) => boolean;
+  /** Optional initial active section (defaults to first item's id) */
+  initialSection?: string;
+  /** Optional offset from top when scrolling to section (defaults to 24) */
+  scrollOffset?: number;
+}
+
+/**
+ * Generic custom hook for managing scroll-based navigation tracking
+ * Automatically highlights the active section based on scroll position
+ * and provides smooth scrolling to sections
+ */
+export function useScrollTracking<T extends ScrollTrackingItem>({
+  items,
+  filterFn = () => true,
+  initialSection,
+  scrollOffset = 24,
+}: UseScrollTrackingOptions<T>) {
+  const [activeSection, setActiveSection] = useState(
+    initialSection || items[0]?.id || ""
+  );
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  // Track scroll position to highlight active nav item
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    const handleScroll = () => {
+      const sections = items
+        .filter(filterFn)
+        .map((item) => ({
+          id: item.id,
+          element: document.getElementById(item.id),
+        }))
+        .filter((s) => s.element);
+
+      const containerRect = container.getBoundingClientRect();
+      const scrollTop = container.scrollTop;
+      const scrollHeight = container.scrollHeight;
+      const clientHeight = container.clientHeight;
+
+      // Check if scrolled to bottom (within a small threshold)
+      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 50;
+
+      if (isAtBottom && sections.length > 0) {
+        // If at bottom, highlight the last visible section
+        setActiveSection(sections[sections.length - 1].id);
+        return;
+      }
+
+      for (let i = sections.length - 1; i >= 0; i--) {
+        const section = sections[i];
+        if (section.element) {
+          const rect = section.element.getBoundingClientRect();
+          const relativeTop = rect.top - containerRect.top + scrollTop;
+          if (scrollTop >= relativeTop - 100) {
+            setActiveSection(section.id);
+            break;
+          }
+        }
+      }
+    };
+
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [items, filterFn]);
+
+  // Scroll to a specific section with smooth animation
+  const scrollToSection = useCallback(
+    (sectionId: string) => {
+      const element = document.getElementById(sectionId);
+      if (element && scrollContainerRef.current) {
+        const container = scrollContainerRef.current;
+        const containerRect = container.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        const relativeTop =
+          elementRect.top - containerRect.top + container.scrollTop;
+
+        container.scrollTo({
+          top: relativeTop - scrollOffset,
+          behavior: "smooth",
+        });
+      }
+    },
+    [scrollOffset]
+  );
+
+  return {
+    activeSection,
+    scrollToSection,
+    scrollContainerRef,
+  };
+}

app/src/hooks/use-window-state.ts

@@ -52,3 +52,5 @@ export function useWindowState(): WindowState {
   return windowState;
 }
 
+
+