jettypod 4.4.120 → 4.4.121

package/apps/dashboard/contexts/ConnectionStatusContext.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { createContext, useContext, useState, useEffect, useRef, useMemo, type ReactNode } from 'react';
 

package/apps/dashboard/contexts/UsageContext.tsx

@@ -1,8 +1,10 @@
-'use client';
 
-import { createContext, useContext, useState, useEffect, useCallback, useMemo, 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';
@@ -32,31 +34,43 @@ 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
-        if (plan === 'free') {
-          const token = await window.electronAPI.auth.getToken();
+        // 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 window.electronAPI.auth.saveToken(data.token, data.user);
+                    await auth.saveToken(data.token, data.user);
                   }
                 }
               }
@@ -83,51 +97,68 @@ 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: getWebSocketUrl(), onMessage: handleWsMessage });
+  useWebSocket({ url: projectLoaded ? getWebSocketUrl() : '', onMessage: handleWsMessage });
+
+  // Cleanup debounce timer
+  useEffect(() => {
+    return () => {
+      if (usageDebounceRef.current) clearTimeout(usageDebounceRef.current);
+    };
+  }, []);
 
   const value = useMemo(() => ({ ...state, refresh: fetchUsage }), [state, fetchUsage]);
 

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/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,
+  };
 }

package/apps/dashboard/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JettyPod</title>
+    <link rel="preload" href="/fonts/Satoshi-Variable.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="preconnect" href="ws://localhost:3456" />
+    <link rel="dns-prefetch" href="ws://localhost:3456" />
+  </head>
+  <body class="antialiased">
+    <div id="root">
+      <!-- Static skeleton — visible in <200ms before React loads, replaced on mount -->
+      <style>
+        @keyframes sk-pulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
+        .sk { animation: sk-pulse 1.5s ease-in-out infinite; }
+        @media (prefers-color-scheme: dark) {
+          .sk-bg  { background: #18181b; }
+          .sk-nav { background: #18181b; border-color: #27272a; }
+          .sk-col { background: #18181b; }
+          .sk-el  { background: #27272a; }
+        }
+      </style>
+      <div style="display:flex;flex-direction:column;height:100vh;background:#fafafa" class="sk-bg">
+        <!-- Nav skeleton -->
+        <header style="padding:20px;border-bottom:1px solid #e4e4e7;background:#fff;flex-shrink:0" class="sk-nav">
+          <div style="display:flex;align-items:center;gap:16px">
+            <div style="width:36px;height:36px;border-radius:50%;background:#e4e4e7" class="sk-el sk"></div>
+            <div style="width:100px;height:20px;border-radius:6px;background:#e4e4e7" class="sk-el sk"></div>
+            <div style="width:60px;height:20px;border-radius:6px;background:#e4e4e7" class="sk-el sk"></div>
+            <div style="width:48px;height:20px;border-radius:6px;background:#e4e4e7" class="sk-el sk"></div>
+          </div>
+        </header>
+        <!-- Kanban skeleton -->
+        <div style="flex:1;max-width:80rem;width:100%;margin:0 auto;padding:16px;display:flex;gap:16px;min-height:0">
+          <!-- Backlog column -->
+          <div style="flex:1;max-width:600px;display:flex;flex-direction:column;min-height:0">
+            <div style="background:#f4f4f5;border-radius:12px;padding:16px;flex:1;min-height:0" class="sk-col">
+              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+                <div style="width:96px;height:24px;border-radius:6px;background:#e4e4e7" class="sk-el sk"></div>
+                <div style="width:40px;height:24px;border-radius:12px;background:#e4e4e7" class="sk-el sk"></div>
+              </div>
+              <div style="display:flex;flex-direction:column;gap:12px">
+                <div style="height:80px;border-radius:12px;background:#e4e4e7" class="sk-el sk"></div>
+                <div style="height:80px;border-radius:12px;background:#e4e4e7" class="sk-el sk"></div>
+                <div style="height:80px;border-radius:12px;background:#e4e4e7" class="sk-el sk"></div>
+                <div style="height:80px;border-radius:12px;background:#e4e4e7" class="sk-el sk"></div>
+                <div style="height:80px;border-radius:12px;background:#e4e4e7" class="sk-el sk"></div>
+              </div>
+            </div>
+          </div>
+          <!-- Done column -->
+          <div style="flex:1;max-width:600px;display:flex;flex-direction:column;min-height:0">
+            <div style="background:#f4f4f5;border-radius:12px;padding:16px;flex:1;min-height:0" class="sk-col">
+              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+                <div style="width:64px;height:24px;border-radius:6px;background:#e4e4e7" class="sk-el sk"></div>
+                <div style="width:40px;height:24px;border-radius:12px;background:#e4e4e7" class="sk-el sk"></div>
+              </div>
+              <div style="display:flex;flex-direction:column;gap:12px">
+                <div style="height:64px;border-radius:12px;background:#e4e4e7" class="sk-el sk"></div>
+                <div style="height:64px;border-radius:12px;background:#e4e4e7" class="sk-el sk"></div>
+                <div style="height:64px;border-radius:12px;background:#e4e4e7" class="sk-el sk"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="tooltip-root" style="position: relative; z-index: 99999"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>