jettypod 4.4.118 → 4.4.121

package/apps/dashboard/contexts/ConnectionStatusContext.tsx

@@ -1,21 +1,42 @@
-'use client';
 
-import { createContext, useContext, useState, type ReactNode } from 'react';
+import { createContext, useContext, useState, useEffect, useRef, useMemo, type ReactNode } from 'react';
 
 export type ConnectionStatus = 'connected' | 'reconnecting' | 'disconnected';
 
+const DISCONNECT_DELAY_MS = 5000;
+
 interface ConnectionStatusContextValue {
   status: ConnectionStatus;
   setStatus: (status: ConnectionStatus) => void;
+  showDisconnected: boolean;
 }
 
 const ConnectionStatusContext = createContext<ConnectionStatusContextValue | null>(null);
 
 export function ConnectionStatusProvider({ children }: { children: ReactNode }) {
   const [status, setStatus] = useState<ConnectionStatus>('disconnected');
+  const [showDisconnected, setShowDisconnected] = useState(false);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (status === 'connected') {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      setShowDisconnected(false);
+    } else {
+      timerRef.current = setTimeout(() => {
+        setShowDisconnected(true);
+      }, DISCONNECT_DELAY_MS);
+    }
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [status]);
+
+  const value = useMemo(() => ({ status, setStatus, showDisconnected }), [status, showDisconnected]);
 
   return (
-    <ConnectionStatusContext.Provider value={{ status, setStatus }}>
+    <ConnectionStatusContext.Provider value={value}>
       {children}
     </ConnectionStatusContext.Provider>
   );
@@ -24,8 +45,7 @@ export function ConnectionStatusProvider({ children }: { children: ReactNode })
 export function useConnectionStatus() {
   const context = useContext(ConnectionStatusContext);
   if (!context) {
-    // Return a safe default when used outside the provider
-    return { status: 'disconnected' as ConnectionStatus, setStatus: () => {} };
+    return { status: 'disconnected' as ConnectionStatus, setStatus: () => {}, showDisconnected: false };
   }
   return context;
 }

package/apps/dashboard/contexts/UsageContext.tsx

@@ -1,9 +1,13 @@
-'use client';
 
-import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
+import { createContext, useContext, useState, useEffect, useCallback, useMemo, useRef, type ReactNode } from 'react';
 import { useWebSocket, type WebSocketMessage } from '../hooks/useWebSocket';
+import { getWebSocketUrl } from '../lib/utils';
+import { isTauri, auth } from '@/lib/tauri-bridge';
+import { invoke } from '@/lib/tauri';
+import { dataBridge } from '@/lib/data-bridge';
 
 const FREE_WEEKLY_LIMIT = 20;
+const API_BASE = 'https://jettypod-update-server.spangbaryn2.workers.dev';
 
 interface UsageState {
   used: number;
@@ -30,15 +34,51 @@ export function UsageProvider({ children }: { children: ReactNode }) {
     loading: true,
   });
 
+  // Don't hit DB or WS until a project is actually loaded
+  const [projectLoaded, setProjectLoaded] = useState(false);
+  useEffect(() => {
+    dataBridge.getProjectRoot().then((root) => {
+      if (root) setProjectLoaded(true);
+    });
+  }, []);
+
+  const lastServerCheckRef = useRef<number>(0);
+
   const fetchUsage = useCallback(async () => {
-    // Get plan from auth (if Electron)
+    // Get plan from auth (if Tauri)
     let plan = 'free';
     try {
-      if (window.electronAPI?.isElectron) {
-        const status = await window.electronAPI.auth.getStatus();
+      if (isTauri()) {
+        const status = await auth.getStatus();
         if (status.authenticated && status.user) {
           plan = status.user.plan || 'free';
         }
+
+        // Check server-side plan — the local JWT may be stale
+        // Only check every 10 minutes to avoid unnecessary API calls
+        if (plan === 'free' && (!lastServerCheckRef.current || Date.now() - lastServerCheckRef.current > 600_000)) {
+          const token = await auth.getToken();
+          if (token) {
+            try {
+              const res = await fetch(`${API_BASE}/auth/me`, {
+                headers: { 'Authorization': `Bearer ${token}` },
+              });
+              lastServerCheckRef.current = Date.now();
+              if (res.ok) {
+                const data = await res.json() as { user: { plan: string; email: string }; token?: string };
+                if (data.user.plan !== 'free') {
+                  plan = data.user.plan;
+                  // Server issued a fresh JWT with updated plan — save it locally
+                  if (data.token) {
+                    await auth.saveToken(data.token, data.user);
+                  }
+                }
+              }
+            } catch {
+              // Network error — fall through with local plan
+            }
+          }
+        }
       }
     } catch {
       // Auth unavailable — default to free
@@ -57,58 +97,73 @@ export function UsageProvider({ children }: { children: ReactNode }) {
       return;
     }
 
-    // Free plan — count from local DB via API route
+    // Free plan — count active sessions via Tauri IPC
     try {
-      const res = await fetch('/api/usage');
-      console.log('[usage] UsageContext fetch status:', res.status);
-      if (!res.ok) {
-        console.error('[usage] UsageContext fetch not ok:', res.status, res.statusText);
-        setState(prev => ({ ...prev, allowed: true, loading: false }));
-        return;
-      }
-      const usage = await res.json();
-      console.log('[usage] UsageContext received:', usage);
+      const count = await invoke<number>('db_get_active_session_count');
+      const used = typeof count === 'number' ? count : 0;
+      const remaining = Math.max(0, FREE_WEEKLY_LIMIT - used);
       setState({
-        used: typeof usage.used === 'number' ? usage.used : 0,
-        limit: typeof usage.limit === 'number' ? usage.limit : FREE_WEEKLY_LIMIT,
-        remaining: typeof usage.remaining === 'number' ? usage.remaining : FREE_WEEKLY_LIMIT,
-        allowed: typeof usage.allowed === 'boolean' ? usage.allowed : true,
+        used,
+        limit: FREE_WEEKLY_LIMIT,
+        remaining,
+        allowed: remaining > 0,
         plan,
         loading: false,
       });
     } catch (err) {
-      console.error('[usage] UsageContext fetch error:', err);
+      console.error('[usage] UsageContext IPC error:', err);
       setState(prev => ({ ...prev, allowed: true, loading: false }));
     }
   }, []);
 
-  // Fetch on mount
+  // Fetch on mount (only after project is loaded)
   useEffect(() => {
-    fetchUsage();
-  }, [fetchUsage]);
+    if (projectLoaded) fetchUsage();
+  }, [projectLoaded, fetchUsage]);
 
   // Refresh on window focus
   useEffect(() => {
+    if (!projectLoaded) return;
     const handleFocus = () => fetchUsage();
     window.addEventListener('focus', handleFocus);
     return () => window.removeEventListener('focus', handleFocus);
-  }, [fetchUsage]);
+  }, [projectLoaded, fetchUsage]);
 
-  // Refresh on WebSocket db_change events (e.g., CLI creates a work item)
+  // Refresh on WebSocket db_change events — debounced and throttled.
+  // Skip entirely for paid plans (usage is unlimited).
+  // Minimum 30s between db_change-triggered fetches to avoid IPC storms.
+  const usageDebounceRef = useRef<NodeJS.Timeout | null>(null);
+  const lastDbChangeFetchRef = useRef<number>(0);
   const handleWsMessage = useCallback((message: WebSocketMessage) => {
     if (message.type === 'db_change') {
-      fetchUsage();
+      // Paid plans have unlimited usage — no need to refresh
+      if (state.plan !== 'free') return;
+
+      if (usageDebounceRef.current) clearTimeout(usageDebounceRef.current);
+      usageDebounceRef.current = setTimeout(() => {
+        usageDebounceRef.current = null;
+        // Throttle: skip if we fetched recently
+        const now = Date.now();
+        if (now - lastDbChangeFetchRef.current < 30_000) return;
+        lastDbChangeFetchRef.current = now;
+        fetchUsage();
+      }, 5000);
     }
-  }, [fetchUsage]);
+  }, [fetchUsage, state.plan]);
+
+  useWebSocket({ url: projectLoaded ? getWebSocketUrl() : '', onMessage: handleWsMessage });
 
-  const wsUrl = typeof window !== 'undefined'
-    ? `ws://${window.location.hostname}:47808`
-    : 'ws://localhost:47808';
+  // Cleanup debounce timer
+  useEffect(() => {
+    return () => {
+      if (usageDebounceRef.current) clearTimeout(usageDebounceRef.current);
+    };
+  }, []);
 
-  useWebSocket({ url: wsUrl, onMessage: handleWsMessage });
+  const value = useMemo(() => ({ ...state, refresh: fetchUsage }), [state, fetchUsage]);
 
   return (
-    <UsageContext.Provider value={{ ...state, refresh: fetchUsage }}>
+    <UsageContext.Provider value={value}>
       {children}
     </UsageContext.Provider>
   );

package/apps/dashboard/dev.sh

@@ -0,0 +1,35 @@
+#!/bin/bash
+# Start Vite + Tauri for local development
+# All child processes are killed when this script exits (Ctrl-C, close terminal, etc.)
+set -e
+
+export PATH="$HOME/.cargo/bin:$PATH"
+cd "$(dirname "$0")"
+
+# Kill any leftover processes on port 1420
+lsof -ti:1420 | xargs kill 2>/dev/null || true
+
+# Swap to dev icon and dev identifier for local builds
+# Dev identifier prevents single-instance plugin from conflicting with installed app
+cp src-tauri/icons/icon-dev.png src-tauri/icons/icon.png
+sed -i '' 's/"identifier": "com.jettypod.app"/"identifier": "com.jettypod.app.dev"/' src-tauri/tauri.conf.json
+sed -i '' 's/"productName": "JettyPod"/"productName": "JettyPod Dev"/' src-tauri/tauri.conf.json
+
+# Kill the entire process group on exit — catches Vite, cargo, tauri, rustc, etc.
+# Also restore the production icon and identifier so git stays clean.
+cleanup() {
+  trap - INT TERM EXIT
+  git checkout src-tauri/icons/icon.png src-tauri/tauri.conf.json 2>/dev/null || true
+  kill -- -$$ 2>/dev/null
+}
+trap cleanup INT TERM EXIT
+
+npx vite --port 1420 &
+
+echo "Waiting for Vite on :1420..."
+while ! curl -s http://localhost:1420 > /dev/null 2>&1; do
+  sleep 0.5
+done
+
+echo "Vite ready. Starting Tauri..."
+cargo tauri dev

package/apps/dashboard/eslint.config.mjs

@@ -1,18 +1,18 @@
 import { defineConfig, globalIgnores } from "eslint/config";
-import nextVitals from "eslint-config-next/core-web-vitals";
-import nextTs from "eslint-config-next/typescript";
 
 const eslintConfig = defineConfig([
-  ...nextVitals,
-  ...nextTs,
-  // Override default ignores of eslint-config-next.
   globalIgnores([
-    // Default ignores of eslint-config-next:
-    ".next/**",
-    "out/**",
+    "dist/**",
     "build/**",
-    "next-env.d.ts",
+    "src-tauri/**",
   ]),
+  {
+    files: ["**/*.{ts,tsx,js,jsx,mjs}"],
+    rules: {
+      "no-unused-vars": "off",
+      "no-undef": "off",
+    },
+  },
 ]);
 
 export default eslintConfig;

package/apps/dashboard/hooks/useKanbanAnimation.ts

@@ -0,0 +1,29 @@
+import { useState, useCallback, useRef } from 'react';
+import type { KanbanData } from '@/lib/kanban-utils';
+
+export function useKanbanAnimation() {
+  const [externalAnimatingItemId, setExternalAnimatingItemId] = useState<number | null>(null);
+  const pendingDataRef = useRef<KanbanData | null>(null);
+
+  // Track items animated internally so WebSocket handler skips them
+  const lastInternallyAnimatedIdRef = useRef<number | null>(null);
+
+  const handleExternalAnimationComplete = useCallback(() => {
+    setExternalAnimatingItemId(null);
+    if (pendingDataRef.current) {
+      // Return the pending data for the caller to apply
+      const pending = pendingDataRef.current;
+      pendingDataRef.current = null;
+      return pending;
+    }
+    return null;
+  }, []);
+
+  return {
+    externalAnimatingItemId,
+    setExternalAnimatingItemId,
+    pendingDataRef,
+    lastInternallyAnimatedIdRef,
+    handleExternalAnimationComplete,
+  };
+}

package/apps/dashboard/hooks/useKanbanUndo.ts

@@ -0,0 +1,83 @@
+import { useState, useCallback } from 'react';
+import { UndoStack, type UndoAction } from '@/lib/undoStack';
+
+// Helper to format status for display
+function formatStatus(status: string): string {
+  switch (status) {
+    case 'in_progress': return 'In Flight';
+    case 'backlog': return 'Backlog';
+    case 'done': return 'Done';
+    default: return status;
+  }
+}
+
+interface UseKanbanUndoOptions {
+  onStatusChange: (id: number, newStatus: string, skipUndo?: boolean) => Promise<{ success: boolean; notFound?: boolean }>;
+  showToast: (message: string, type?: 'error' | 'info' | 'success') => void;
+}
+
+export function useKanbanUndo({ onStatusChange, showToast }: UseKanbanUndoOptions) {
+  const [undoStack] = useState(() => new UndoStack());
+  const [undoRedoVersion, setUndoRedoVersion] = useState(0);
+
+  const pushAction = useCallback((action: UndoAction) => {
+    undoStack.push(action);
+    setUndoRedoVersion(v => v + 1);
+  }, [undoStack]);
+
+  const handleUndo = useCallback(async (): Promise<UndoAction | null> => {
+    const action = undoStack.undo();
+    if (!action) return null;
+
+    const result = await onStatusChange(action.itemId, action.before, true);
+    setUndoRedoVersion(v => v + 1);
+
+    if (result.notFound) {
+      showToast(`Item no longer exists: "${action.itemTitle}" was deleted`, 'error');
+      return null;
+    }
+
+    if (!result.success) {
+      undoStack.push({
+        type: action.type,
+        itemId: action.itemId,
+        itemTitle: action.itemTitle,
+        before: action.after,
+        after: action.before,
+      });
+      return null;
+    }
+
+    showToast(`Undone: "${action.itemTitle}" moved back to ${formatStatus(action.before)}`);
+    return action;
+  }, [undoStack, onStatusChange, showToast]);
+
+  const handleRedo = useCallback(async (): Promise<UndoAction | null> => {
+    const action = undoStack.redo();
+    if (!action) return null;
+
+    const result = await onStatusChange(action.itemId, action.after, true);
+    setUndoRedoVersion(v => v + 1);
+
+    if (result.notFound) {
+      showToast(`Item no longer exists: "${action.itemTitle}" was deleted`, 'error');
+      return null;
+    }
+
+    if (!result.success) {
+      return null;
+    }
+
+    showToast(`Redone: "${action.itemTitle}" moved to ${formatStatus(action.after)}`);
+    return action;
+  }, [undoStack, onStatusChange, showToast]);
+
+  return {
+    undoStack,
+    pushAction,
+    handleUndo,
+    handleRedo,
+    canUndo: undoStack.canUndo(),
+    canRedo: undoStack.canRedo(),
+  };
+}

package/apps/dashboard/hooks/useWebSocket.ts

@@ -1,11 +1,14 @@
-'use client';
 
-import { useEffect, useRef, useCallback, useState } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 
 export interface WebSocketMessage {
   type: string;
   timestamp: number;
   event?: string;
+  /** Delta fields — present when type === 'db_delta' */
+  table?: string;
+  rowid?: number;
+  action?: 'insert' | 'update' | 'delete';
 }
 
 interface UseWebSocketOptions {
@@ -22,103 +25,155 @@ interface UseWebSocketReturn {
   manualReconnect: () => void;
 }
 
-export function useWebSocket({
-  url,
-  onMessage,
-  reconnectInterval = 3000,
-  maxReconnectAttempts = 5,
-}: UseWebSocketOptions): UseWebSocketReturn {
-  const [isConnected, setIsConnected] = useState(false);
-  const [isReconnecting, setIsReconnecting] = useState(false);
-  const [reconnectionFailed, setReconnectionFailed] = useState(false);
-  const wsRef = useRef<WebSocket | null>(null);
-  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const reconnectAttemptsRef = useRef(0);
-  const onMessageRef = useRef(onMessage);
+// ---- Shared singleton WebSocket connection ----
 
-  // Keep the ref current without triggering reconnects
-  useEffect(() => {
-    onMessageRef.current = onMessage;
-  }, [onMessage]);
+type Subscriber = (message: WebSocketMessage) => void;
+
+let sharedWs: WebSocket | null = null;
+let sharedUrl: string | null = null;
+let subscribers = new Set<Subscriber>();
+let connectionState: 'disconnected' | 'connected' | 'reconnecting' | 'failed' = 'disconnected';
+let reconnectAttempts = 0;
+let reconnectTimeout: NodeJS.Timeout | null = null;
+let stateListeners = new Set<() => void>();
 
-  const connect = useCallback(() => {
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
+const RECONNECT_INTERVAL = 3000;
+const MAX_RECONNECT_ATTEMPTS = 5;
+
+function notifyStateChange() {
+  for (const listener of stateListeners) listener();
+}
+
+function connectShared(url: string) {
+  if (sharedWs?.readyState === WebSocket.OPEN || sharedWs?.readyState === WebSocket.CONNECTING) return;
+
+  sharedUrl = url;
+  const ws = new WebSocket(url);
+
+  ws.onopen = () => {
+    connectionState = 'connected';
+    reconnectAttempts = 0;
+    // Expose to window for test assertions
+    (window as unknown as { __wsConnection: WebSocket }).__wsConnection = ws;
+    (window as unknown as { __wsReconnecting: boolean }).__wsReconnecting = false;
+    notifyStateChange();
+  };
+
+  ws.onmessage = (event) => {
+    try {
+      const message = JSON.parse(event.data) as WebSocketMessage;
+      for (const sub of subscribers) sub(message);
+    } catch (e) {
+      console.warn('Received malformed WebSocket message:', e);
+    }
+  };
+
+  ws.onclose = () => {
+    // Only clear if this is still the active connection — prevents a stale
+    // WS (closed during CONNECTING by React Strict Mode) from nulling out
+    // the newer replacement connection.
+    if (sharedWs !== ws) return;
+    sharedWs = null;
+
+    if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
+      connectionState = 'failed';
+      notifyStateChange();
       return;
     }
 
-    const ws = new WebSocket(url);
-
-    ws.onopen = () => {
-      setIsConnected(true);
-      setIsReconnecting(false);
-      setReconnectionFailed(false);
-      reconnectAttemptsRef.current = 0;
-      // Expose to window for test assertions
-      if (typeof window !== 'undefined') {
-        (window as unknown as { __wsConnection: WebSocket }).__wsConnection = ws;
-        (window as unknown as { __wsReconnecting: boolean }).__wsReconnecting = false;
-      }
-    };
+    reconnectAttempts += 1;
+    connectionState = 'reconnecting';
+    (window as unknown as { __wsReconnecting: boolean }).__wsReconnecting = true;
+    notifyStateChange();
 
-    ws.onmessage = (event) => {
-      try {
-        const message = JSON.parse(event.data) as WebSocketMessage;
-        onMessageRef.current?.(message);
-      } catch (e) {
-        // Gracefully handle malformed messages - log but don't crash
-        console.warn('Received malformed WebSocket message:', e);
-      }
-    };
+    reconnectTimeout = setTimeout(() => {
+      if (subscribers.size > 0 && sharedUrl) connectShared(sharedUrl);
+    }, RECONNECT_INTERVAL);
+  };
 
-    ws.onclose = () => {
-      setIsConnected(false);
-      wsRef.current = null;
+  ws.onerror = () => {
+    ws.close();
+  };
 
-      // Check if max reconnection attempts reached
-      if (reconnectAttemptsRef.current >= maxReconnectAttempts) {
-        setIsReconnecting(false);
-        setReconnectionFailed(true);
-        return;
-      }
+  sharedWs = ws;
+}
 
-      // Initiate reconnection
-      reconnectAttemptsRef.current += 1;
-      setIsReconnecting(true);
-      if (typeof window !== 'undefined') {
-        (window as unknown as { __wsReconnecting: boolean }).__wsReconnecting = true;
-      }
+function subscribe(url: string, callback: Subscriber): () => void {
+  subscribers.add(callback);
 
-      reconnectTimeoutRef.current = setTimeout(() => {
-        connect();
-      }, reconnectInterval);
-    };
+  // Start connection if this is the first subscriber
+  if (subscribers.size === 1 || (!sharedWs && connectionState !== 'failed')) {
+    connectShared(url);
+  }
 
-    ws.onerror = () => {
-      ws.close();
-    };
+  return () => {
+    subscribers.delete(callback);
 
-    wsRef.current = ws;
-  }, [url, reconnectInterval, maxReconnectAttempts]);
+    // Close connection when last subscriber leaves
+    if (subscribers.size === 0) {
+      if (reconnectTimeout) clearTimeout(reconnectTimeout);
+      if (sharedWs) {
+        sharedWs.close();
+        sharedWs = null;
+      }
+      connectionState = 'disconnected';
+      reconnectAttempts = 0;
+      sharedUrl = null;
+    }
+  };
+}
 
-  const manualReconnect = useCallback(() => {
-    // Reset reconnection state and attempt to connect
-    reconnectAttemptsRef.current = 0;
-    setReconnectionFailed(false);
-    connect();
-  }, [connect]);
+// ---- React hook (thin wrapper over shared connection) ----
+
+// Derive a simple state key from the connection state so we only re-render
+// when the user-visible status actually changes — not on every notifyStateChange
+// (which fires on each reconnect attempt, causing cascade re-renders in all
+// components that use this hook).
+function getStateKey(): string {
+  return connectionState;
+}
+
+export function useWebSocket({
+  url,
+  onMessage,
+}: UseWebSocketOptions): UseWebSocketReturn {
+  const [stateKey, setStateKey] = useState(getStateKey);
+  const onMessageRef = useRef(onMessage);
 
   useEffect(() => {
-    connect();
+    onMessageRef.current = onMessage;
+  }, [onMessage]);
 
-    return () => {
-      if (reconnectTimeoutRef.current) {
-        clearTimeout(reconnectTimeoutRef.current);
-      }
-      if (wsRef.current) {
-        wsRef.current.close();
-      }
+  // Subscribe to state changes — only re-render when the derived state key
+  // actually changes.  Previous implementation used forceRender(n => n+1) which
+  // re-rendered on EVERY notifyStateChange regardless of whether the displayed
+  // status changed.  With 3+ consumers this caused cascade re-renders.
+  useEffect(() => {
+    const listener = () => {
+      const newKey = getStateKey();
+      setStateKey(prev => prev === newKey ? prev : newKey);
     };
-  }, [connect]);
+    stateListeners.add(listener);
+    return () => { stateListeners.delete(listener); };
+  }, []);
 
-  return { isConnected, isReconnecting, reconnectionFailed, manualReconnect };
+  // Subscribe to messages (skip when URL is empty — no project loaded)
+  useEffect(() => {
+    if (!url) return;
+    const callback: Subscriber = (msg) => onMessageRef.current?.(msg);
+    return subscribe(url, callback);
+  }, [url]);
+
+  const manualReconnect = useCallback(() => {
+    reconnectAttempts = 0;
+    connectionState = 'disconnected';
+    if (sharedUrl) connectShared(sharedUrl);
+  }, []);
+
+  return {
+    isConnected: stateKey === 'connected',
+    isReconnecting: stateKey === 'reconnecting',
+    reconnectionFailed: stateKey === 'failed',
+    manualReconnect,
+  };
 }