@atercates/claude-deck 0.2.1

package/hooks/useNotifications.ts

@@ -0,0 +1,257 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { toast } from "sonner";
+import {
+  NotificationSettings,
+  NotificationEvent,
+  defaultSettings,
+  loadSettings,
+  saveSettings,
+  requestNotificationPermission,
+  canSendBrowserNotification,
+  sendBrowserNotification,
+  playNotificationSound,
+  setTabNotificationCount,
+  flashTabTitle,
+  clearTabNotifications,
+} from "@/lib/notifications";
+
+type SessionStatus = "idle" | "running" | "waiting" | "error" | "dead";
+
+interface SessionState {
+  id: string;
+  name: string;
+  status: SessionStatus;
+}
+
+interface UseNotificationsOptions {
+  onSessionClick?: (sessionId: string) => void;
+}
+
+export function useNotifications(options: UseNotificationsOptions = {}) {
+  const { onSessionClick } = options;
+  const [settings, setSettings] =
+    useState<NotificationSettings>(defaultSettings);
+  const [permissionGranted, setPermissionGranted] = useState(false);
+  const previousStates = useRef<Map<string, SessionStatus>>(new Map());
+  const waitingCount = useRef(0);
+  // Track which sessions have been notified to prevent duplicates
+  const notifiedSessions = useRef<Set<string>>(new Set());
+
+  // Load settings on mount
+  useEffect(() => {
+    setSettings(loadSettings());
+    setPermissionGranted(canSendBrowserNotification());
+  }, []);
+
+  // Request permission
+  const requestPermission = useCallback(async () => {
+    const granted = await requestNotificationPermission();
+    setPermissionGranted(granted);
+    return granted;
+  }, []);
+
+  // Update settings
+  const updateSettings = useCallback(
+    (newSettings: Partial<NotificationSettings>) => {
+      setSettings((prev) => {
+        const updated = { ...prev, ...newSettings };
+        saveSettings(updated);
+        return updated;
+      });
+    },
+    []
+  );
+
+  // Toggle a specific event
+  const toggleEvent = useCallback(
+    (event: NotificationEvent, enabled: boolean) => {
+      setSettings((prev) => {
+        const updated = {
+          ...prev,
+          events: { ...prev.events, [event]: enabled },
+        };
+        saveSettings(updated);
+        return updated;
+      });
+    },
+    []
+  );
+
+  // Send notification for an event
+  const notify = useCallback(
+    (
+      event: NotificationEvent,
+      sessionId: string,
+      sessionName: string,
+      message?: string
+    ) => {
+      if (!settings.enabled || !settings.events[event]) return;
+
+      const titles: Record<NotificationEvent, string> = {
+        waiting: `${sessionName} needs input`,
+        error: `${sessionName} encountered an error`,
+        completed: `${sessionName} completed`,
+      };
+
+      const title = titles[event];
+      const body = message || getDefaultMessage(event);
+
+      // In-app toast with click action
+      const toastTypes: Record<
+        NotificationEvent,
+        "warning" | "error" | "success"
+      > = {
+        waiting: "warning",
+        error: "error",
+        completed: "success",
+      };
+      toast[toastTypes[event]](title, {
+        description: body,
+        action: {
+          label: "Go to session",
+          onClick: () => onSessionClick?.(sessionId),
+        },
+      });
+
+      // Browser notification (only if page not focused)
+      if (settings.browserNotifications && permissionGranted) {
+        sendBrowserNotification(
+          title,
+          { body, tag: `agentos-${event}-${sessionName}` },
+          () => onSessionClick?.(sessionId)
+        );
+      }
+
+      // Sound
+      if (settings.sound) {
+        playNotificationSound(event);
+      }
+
+      // Flash tab title
+      if (event === "waiting") {
+        flashTabTitle(`Waiting: ${sessionName}`);
+      }
+    },
+    [settings, permissionGranted, onSessionClick]
+  );
+
+  // Check for state changes and notify
+  const checkStateChanges = useCallback(
+    (sessions: SessionState[], activeSessionId?: string | null) => {
+      if (!settings.enabled) return;
+
+      let newWaitingCount = 0;
+
+      sessions.forEach((session) => {
+        const prevStatus = previousStates.current.get(session.id);
+        const currentStatus = session.status;
+
+        // Track waiting count
+        if (currentStatus === "waiting") {
+          newWaitingCount++;
+        }
+
+        // Skip if no previous state (initial load)
+        if (prevStatus === undefined) {
+          previousStates.current.set(session.id, currentStatus);
+          return;
+        }
+
+        // Skip if status unchanged
+        if (prevStatus === currentStatus) return;
+
+        // Skip notifications for the currently active/focused session
+        if (session.id === activeSessionId) {
+          previousStates.current.set(session.id, currentStatus);
+          return;
+        }
+
+        // Detect transitions and notify (with deduplication)
+        const notifyKey = `${session.id}-${currentStatus}`;
+
+        if (currentStatus === "waiting" && prevStatus !== "waiting") {
+          if (!notifiedSessions.current.has(notifyKey)) {
+            notifiedSessions.current.add(notifyKey);
+            notify("waiting", session.id, session.name);
+          }
+        } else if (currentStatus === "error" && prevStatus !== "error") {
+          if (!notifiedSessions.current.has(notifyKey)) {
+            notifiedSessions.current.add(notifyKey);
+            notify("error", session.id, session.name);
+          }
+        } else if (
+          currentStatus === "idle" &&
+          (prevStatus === "running" || prevStatus === "waiting")
+        ) {
+          const completedKey = `${session.id}-completed`;
+          if (!notifiedSessions.current.has(completedKey)) {
+            notifiedSessions.current.add(completedKey);
+            notify("completed", session.id, session.name);
+          }
+        }
+
+        // Clear notification tracking when status changes away from notified state
+        if (prevStatus !== currentStatus) {
+          notifiedSessions.current.delete(`${session.id}-${prevStatus}`);
+          if (prevStatus === "idle") {
+            notifiedSessions.current.delete(`${session.id}-completed`);
+          }
+        }
+
+        previousStates.current.set(session.id, currentStatus);
+      });
+
+      // Update tab badge
+      if (newWaitingCount !== waitingCount.current) {
+        waitingCount.current = newWaitingCount;
+        setTabNotificationCount(newWaitingCount);
+      }
+    },
+    [settings.enabled, notify]
+  );
+
+  // Clear notifications when focused
+  useEffect(() => {
+    const handleFocus = () => {
+      // Don't clear count, just stop flashing
+    };
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        // User returned to tab
+      }
+    };
+
+    window.addEventListener("focus", handleFocus);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      window.removeEventListener("focus", handleFocus);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      clearTabNotifications();
+    };
+  }, []);
+
+  return {
+    settings,
+    permissionGranted,
+    requestPermission,
+    updateSettings,
+    toggleEvent,
+    notify,
+    checkStateChanges,
+  };
+}
+
+function getDefaultMessage(event: NotificationEvent): string {
+  switch (event) {
+    case "waiting":
+      return "Session is waiting for your input";
+    case "error":
+      return "Something went wrong";
+    case "completed":
+      return "Task has finished";
+  }
+}

package/hooks/useProjects.ts

@@ -0,0 +1,53 @@
+import { useCallback } from "react";
+import {
+  useProjectsQuery,
+  useToggleProject,
+  useDeleteProject,
+  useRenameProject,
+} from "@/data/projects";
+
+export function useProjects() {
+  const { data: projects = [], refetch } = useProjectsQuery();
+  const toggleMutation = useToggleProject();
+  const deleteMutation = useDeleteProject();
+  const renameMutation = useRenameProject();
+
+  const toggleProject = useCallback(
+    async (projectId: string, expanded: boolean) => {
+      await toggleMutation.mutateAsync({ projectId, expanded });
+    },
+    [toggleMutation]
+  );
+
+  const deleteProject = useCallback(
+    async (projectId: string) => {
+      if (
+        !confirm(
+          "Delete this project? Sessions will be moved to Uncategorized."
+        )
+      )
+        return;
+      await deleteMutation.mutateAsync(projectId);
+    },
+    [deleteMutation]
+  );
+
+  const renameProject = useCallback(
+    async (projectId: string, newName: string) => {
+      await renameMutation.mutateAsync({ projectId, newName });
+    },
+    [renameMutation]
+  );
+
+  const fetchProjects = useCallback(async () => {
+    await refetch();
+  }, [refetch]);
+
+  return {
+    projects,
+    fetchProjects,
+    toggleProject,
+    deleteProject,
+    renameProject,
+  };
+}

package/hooks/useSessionStatuses.ts

@@ -0,0 +1,30 @@
+import type { Session } from "@/lib/db";
+import type { SessionStatus } from "@/components/views/types";
+import { useSessionStatusesQuery } from "@/data/statuses";
+
+interface UseSessionStatusesOptions {
+  sessions: Session[];
+  activeSessionId?: string | null;
+  checkStateChanges: (
+    states: Array<{
+      id: string;
+      name: string;
+      status: SessionStatus["status"];
+    }>,
+    activeSessionId?: string | null
+  ) => void;
+}
+
+export function useSessionStatuses({
+  sessions,
+  activeSessionId,
+  checkStateChanges,
+}: UseSessionStatusesOptions) {
+  const { sessionStatuses } = useSessionStatusesQuery({
+    sessions,
+    activeSessionId,
+    checkStateChanges,
+  });
+
+  return { sessionStatuses };
+}

package/hooks/useSessions.ts

@@ -0,0 +1,86 @@
+import { useCallback } from "react";
+import type { Session } from "@/lib/db";
+import {
+  useSessionsQuery,
+  useDeleteSession,
+  useRenameSession,
+  useForkSession,
+  useSummarizeSession,
+  useMoveSessionToGroup,
+  useMoveSessionToProject,
+} from "@/data/sessions";
+
+export function useSessions() {
+  const { data, refetch } = useSessionsQuery();
+  const sessions = data?.sessions ?? [];
+  const groups = data?.groups ?? [];
+
+  const deleteMutation = useDeleteSession();
+  const renameMutation = useRenameSession();
+  const forkMutation = useForkSession();
+  const summarizeMutation = useSummarizeSession();
+  const moveToGroupMutation = useMoveSessionToGroup();
+  const moveToProjectMutation = useMoveSessionToProject();
+
+  const fetchSessions = useCallback(async () => {
+    await refetch();
+  }, [refetch]);
+
+  const deleteSession = useCallback(
+    async (sessionId: string) => {
+      if (!confirm("Delete this session? This cannot be undone.")) return;
+      await deleteMutation.mutateAsync(sessionId);
+    },
+    [deleteMutation]
+  );
+
+  const renameSession = useCallback(
+    async (sessionId: string, newName: string) => {
+      await renameMutation.mutateAsync({ sessionId, newName });
+    },
+    [renameMutation]
+  );
+
+  const forkSession = useCallback(
+    async (sessionId: string): Promise<Session | null> => {
+      return await forkMutation.mutateAsync(sessionId);
+    },
+    [forkMutation]
+  );
+
+  const summarizeSession = useCallback(
+    async (sessionId: string): Promise<Session | null> => {
+      return await summarizeMutation.mutateAsync(sessionId);
+    },
+    [summarizeMutation]
+  );
+
+  const moveSessionToGroup = useCallback(
+    async (sessionId: string, groupPath: string) => {
+      await moveToGroupMutation.mutateAsync({ sessionId, groupPath });
+    },
+    [moveToGroupMutation]
+  );
+
+  const moveSessionToProject = useCallback(
+    async (sessionId: string, projectId: string) => {
+      await moveToProjectMutation.mutateAsync({ sessionId, projectId });
+    },
+    [moveToProjectMutation]
+  );
+
+  return {
+    sessions,
+    groups,
+    summarizingSessionId: summarizeMutation.isPending
+      ? (summarizeMutation.variables as string)
+      : null,
+    fetchSessions,
+    deleteSession,
+    renameSession,
+    forkSession,
+    summarizeSession,
+    moveSessionToGroup,
+    moveSessionToProject,
+  };
+}

package/hooks/useSpeechRecognition.ts

@@ -0,0 +1,124 @@
+"use client";
+
+import { useState, useRef, useCallback, useEffect } from "react";
+
+// Web Speech API types
+interface SpeechRecognitionEvent extends Event {
+  results: SpeechRecognitionResultList;
+  resultIndex: number;
+}
+
+interface SpeechRecognitionResultList {
+  length: number;
+  item(index: number): SpeechRecognitionResult;
+  [index: number]: SpeechRecognitionResult;
+}
+
+interface SpeechRecognitionResult {
+  isFinal: boolean;
+  length: number;
+  item(index: number): SpeechRecognitionAlternative;
+  [index: number]: SpeechRecognitionAlternative;
+}
+
+interface SpeechRecognitionAlternative {
+  transcript: string;
+  confidence: number;
+}
+
+interface SpeechRecognition extends EventTarget {
+  continuous: boolean;
+  interimResults: boolean;
+  lang: string;
+  onresult: ((event: SpeechRecognitionEvent) => void) | null;
+  onend: (() => void) | null;
+  onerror: ((event: Event) => void) | null;
+  onstart: (() => void) | null;
+  start(): void;
+  stop(): void;
+  abort(): void;
+}
+
+declare global {
+  interface Window {
+    SpeechRecognition: new () => SpeechRecognition;
+    webkitSpeechRecognition: new () => SpeechRecognition;
+  }
+}
+
+export function useSpeechRecognition(
+  onTranscript: (text: string, isFinal: boolean) => void
+) {
+  const [isListening, setIsListening] = useState(false);
+  const [isSupported, setIsSupported] = useState(false);
+  const recognitionRef = useRef<SpeechRecognition | null>(null);
+  const lastTranscriptRef = useRef("");
+
+  useEffect(() => {
+    // Check for browser support
+    const SpeechRecognitionAPI =
+      window.SpeechRecognition || window.webkitSpeechRecognition;
+    setIsSupported(!!SpeechRecognitionAPI);
+
+    if (SpeechRecognitionAPI) {
+      const recognition = new SpeechRecognitionAPI();
+      recognition.continuous = true;
+      recognition.interimResults = true;
+      recognition.lang = "en-US";
+
+      recognition.onstart = () => {
+        setIsListening(true);
+        lastTranscriptRef.current = "";
+      };
+
+      recognition.onend = () => {
+        setIsListening(false);
+      };
+
+      recognition.onerror = () => {
+        setIsListening(false);
+      };
+
+      recognition.onresult = (event: SpeechRecognitionEvent) => {
+        let finalTranscript = "";
+
+        for (let i = event.resultIndex; i < event.results.length; i++) {
+          const transcript = event.results[i][0].transcript;
+          if (event.results[i].isFinal) {
+            finalTranscript += transcript;
+          }
+        }
+
+        // Only send new final transcripts
+        if (finalTranscript && finalTranscript !== lastTranscriptRef.current) {
+          lastTranscriptRef.current = finalTranscript;
+          onTranscript(finalTranscript, true);
+        }
+      };
+
+      recognitionRef.current = recognition;
+    }
+
+    return () => {
+      if (recognitionRef.current) {
+        recognitionRef.current.abort();
+      }
+    };
+  }, [onTranscript]);
+
+  const toggle = useCallback(() => {
+    if (!recognitionRef.current) return;
+
+    if (isListening) {
+      recognitionRef.current.stop();
+    } else {
+      try {
+        recognitionRef.current.start();
+      } catch {
+        // Already started, ignore
+      }
+    }
+  }, [isListening]);
+
+  return { isListening, isSupported, toggle };
+}

package/hooks/useViewport.ts

@@ -0,0 +1,32 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+/**
+ * Mobile-first viewport detection hook
+ * Breakpoint: 768px (md in Tailwind)
+ */
+export function useViewport() {
+  const [isMobile, setIsMobile] = useState(false);
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  useEffect(() => {
+    const checkViewport = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    // Initial check
+    checkViewport();
+    setIsHydrated(true);
+
+    // Listen for resize
+    window.addEventListener("resize", checkViewport);
+    return () => window.removeEventListener("resize", checkViewport);
+  }, []);
+
+  return {
+    isMobile,
+    isDesktop: !isMobile,
+    isHydrated, // For avoiding hydration mismatches
+  };
+}

package/hooks/useViewportHeight.ts

@@ -0,0 +1,50 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * Hook to set CSS custom property for actual viewport height.
+ * Handles iOS Safari's virtual keyboard by using visualViewport API.
+ *
+ * Sets --app-height CSS variable on document root that updates when:
+ * - Window resizes
+ * - Visual viewport changes (keyboard appears/disappears)
+ * - Orientation changes
+ */
+export function useViewportHeight() {
+  useEffect(() => {
+    const setAppHeight = () => {
+      // Use visualViewport if available (more accurate on mobile with keyboard)
+      const vh = window.visualViewport?.height ?? window.innerHeight;
+      document.documentElement.style.setProperty("--app-height", `${vh}px`);
+    };
+
+    // Set initial value
+    setAppHeight();
+
+    // Update on window resize
+    window.addEventListener("resize", setAppHeight);
+
+    // Visual viewport resize handles keyboard appearance on mobile
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener("resize", setAppHeight);
+      window.visualViewport.addEventListener("scroll", setAppHeight);
+    }
+
+    // Handle orientation changes
+    if ("orientation" in screen) {
+      screen.orientation.addEventListener("change", setAppHeight);
+    }
+
+    return () => {
+      window.removeEventListener("resize", setAppHeight);
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener("resize", setAppHeight);
+        window.visualViewport.removeEventListener("scroll", setAppHeight);
+      }
+      if ("orientation" in screen) {
+        screen.orientation.removeEventListener("change", setAppHeight);
+      }
+    };
+  }, []);
+}

package/lib/async-operations.ts

@@ -0,0 +1,35 @@
+/**
+ * Background operation runner for long-running tasks that shouldn't block UI
+ *
+ * Pattern:
+ * 1. Perform fast DB operations immediately
+ * 2. Return success to client
+ * 3. Run cleanup/slow operations in background
+ * 4. Log errors but don't fail the response
+ */
+
+type BackgroundTask = () => Promise<void>;
+
+/**
+ * Run a task in the background without blocking the response.
+ * Errors are logged but don't affect the caller.
+ */
+export function runInBackground(task: BackgroundTask, taskName: string): void {
+  // Fire and forget - don't await
+  task().catch((error) => {
+    console.error(`[Background Task: ${taskName}] Error:`, error);
+  });
+}
+
+/**
+ * Run multiple tasks in parallel in the background.
+ * All tasks run concurrently for speed.
+ */
+export function runManyInBackground(
+  tasks: BackgroundTask[],
+  taskName: string
+): void {
+  Promise.all(tasks.map((task) => task())).catch((error) => {
+    console.error(`[Background Tasks: ${taskName}] Error:`, error);
+  });
+}