From 6ecd75fbbbc834fafce36b0c8ffb367b89d1beea Mon Sep 17 00:00:00 2001 From: "DESKTOP-RTLN3BA\\$punk" Date: Mon, 6 Apr 2026 21:32:49 -0700 Subject: [PATCH 01/13] refactor: simplify HeroSection component and enhance UI with new features - Removed dynamic import of HeroCarousel and replaced it with a static layout. - Introduced new TAB_ITEMS for showcasing features with descriptions and media. - Enhanced the layout and styling for better responsiveness and visual appeal. - Cleaned up unused code and improved overall readability of the component. --- .../components/homepage/hero-section.tsx | 636 +++++++++--------- 1 file changed, 313 insertions(+), 323 deletions(-) diff --git a/surfsense_web/components/homepage/hero-section.tsx b/surfsense_web/components/homepage/hero-section.tsx index 299cf1032..1bb28e770 100644 --- a/surfsense_web/components/homepage/hero-section.tsx +++ b/surfsense_web/components/homepage/hero-section.tsx @@ -1,39 +1,22 @@ "use client"; import { AnimatePresence, motion } from "motion/react"; -import dynamic from "next/dynamic"; +import { Monitor } from "lucide-react"; import Link from "next/link"; -import type React from "react"; -import { useEffect, useRef, useState } from "react"; +import React, { useCallback, useEffect, useRef, useState, memo } from "react"; import Balancer from "react-wrap-balancer"; import { AUTH_TYPE, BACKEND_URL } from "@/lib/env-config"; import { trackLoginAttempt } from "@/lib/posthog/events"; import { cn } from "@/lib/utils"; +import { + ExpandedMediaOverlay, + useExpandedMedia, +} from "@/components/ui/expanded-gif-overlay"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/components/ui/tooltip"; -const HeroCarousel = dynamic( - () => import("@/components/ui/hero-carousel").then((m) => ({ default: m.HeroCarousel })), - { - ssr: false, - loading: () => ( -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ), - } -); - -// Official Google "G" logo with brand colors const GoogleLogo = ({ className }: { className?: string }) => ( ( ); -function useIsDesktop(breakpoint = 1024) { - const [isDesktop, setIsDesktop] = useState(false); - useEffect(() => { - const mql = window.matchMedia(`(min-width: ${breakpoint}px)`); - setIsDesktop(mql.matches); - const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches); - mql.addEventListener("change", handler); - return () => mql.removeEventListener("change", handler); - }, [breakpoint]); - return isDesktop; -} +const TAB_ITEMS = [ + { + title: "Connect & Sync", + description: + "Connect data sources like Notion, Drive and Gmail. Automatically sync to keep them updated.", + src: "/homepage/hero_tutorial/ConnectorFlowGif.mp4", + featured: true, + }, + { + title: "Upload Documents", + description: "Upload documents directly, from images to massive PDFs.", + src: "/homepage/hero_tutorial/DocUploadGif.mp4", + featured: true, + }, + { + title: "Search & Citation", + description: + "Ask questions and get cited responses from your knowledge base.", + src: "/homepage/hero_tutorial/BSNCGif.mp4", + featured: false, + }, + { + title: "Document Q&A", + description: "Mention specific documents in chat for targeted answers.", + src: "/homepage/hero_tutorial/BQnaGif_compressed.mp4", + featured: false, + }, + { + title: "Reports", + description: "Generate reports from your sources in many formats.", + src: "/homepage/hero_tutorial/ReportGenGif_compressed.mp4", + featured: false, + }, + { + title: "Podcasts", + description: "Turn anything into a podcast in under 20 seconds.", + src: "/homepage/hero_tutorial/PodcastGenGif.mp4", + featured: false, + }, + { + title: "Image Generation", + description: + "Generate high-quality images easily from your conversations.", + src: "/homepage/hero_tutorial/ImageGenGif.mp4", + featured: false, + }, + { + title: "Collaborative Chat", + description: + "Collaborate on AI-powered conversations in realtime with your team.", + src: "/homepage/hero_realtime/RealTimeChatGif.mp4", + featured: false, + }, + { + title: "Comments", + description: "Add comments and tag teammates on any message.", + src: "/homepage/hero_realtime/RealTimeCommentsFlow.mp4", + featured: false, + }, + { + title: "Video Generation", + description: + "Create short videos with AI-generated visuals and narration from your sources.", + src: "/homepage/hero_tutorial/video_gen_surf.mp4", + featured: false, + }, +] as const; export function HeroSection() { - const containerRef = useRef(null); - const parentRef = useRef(null); - const isDesktop = useIsDesktop(); - return ( -
- - {isDesktop && ( - <> - - - - - - )} +
+
+

+ NotebookLM for Teams +

+
+
+

+ An open source, privacy focused alternative to NotebookLM for teams with no data limits. +

-

-
-
- NotebookLM for Teams +
+ +
+
-

-

- Connect any LLM to your internal knowledge sources and chat with it in real time alongside - your team. -

-
- - {/* */} -
-
- +
); @@ -158,193 +156,155 @@ function GetStartedButton() { if (isGoogleAuth) { return ( - - {/* Animated gradient background on hover */} - - {/* Google logo with subtle animation */} - - - - Continue with Google - + + Continue with Google + ); } return ( - - - Get Started - - + + Get Started + ); } -const BackgroundGrids = () => { - return ( -
-
- - -
-
- - -
-
- - -
-
- - -
-
- ); -}; +const BrowserWindow = () => { + const [selectedIndex, setSelectedIndex] = useState(0); + const selectedItem = TAB_ITEMS[selectedIndex]; + const intervalRef = useRef(null); + const { expanded, open, close } = useExpandedMedia(); -const CollisionMechanism = ({ - parentRef, - beamOptions = {}, -}: { - parentRef: React.RefObject; - beamOptions?: { - initialX?: number; - translateX?: number; - initialY?: number; - translateY?: number; - rotate?: number; - className?: string; - duration?: number; - delay?: number; - repeatDelay?: number; - }; -}) => { - const beamRef = useRef(null); - const [collision, setCollision] = useState<{ - detected: boolean; - coordinates: { x: number; y: number } | null; - }>({ detected: false, coordinates: null }); - const [beamKey, setBeamKey] = useState(0); - const [cycleCollisionDetected, setCycleCollisionDetected] = useState(false); + const startInterval = useCallback(() => { + if (intervalRef.current) { + clearInterval(intervalRef.current); + } + intervalRef.current = setInterval(() => { + setSelectedIndex((prev) => (prev + 1) % TAB_ITEMS.length); + }, 10000); + }, []); useEffect(() => { - const checkCollision = () => { - if (beamRef.current && parentRef.current && !cycleCollisionDetected) { - const beamRect = beamRef.current.getBoundingClientRect(); - const parentRect = parentRef.current.getBoundingClientRect(); - const rightEdge = parentRect.right; - - if (beamRect.right >= rightEdge - 20) { - const relativeX = parentRect.width - 20; - const relativeY = beamRect.top - parentRect.top + beamRect.height / 2; - - setCollision({ - detected: true, - coordinates: { x: relativeX, y: relativeY }, - }); - setCycleCollisionDetected(true); - if (beamRef.current) { - beamRef.current.style.opacity = "0"; - } - } - } - }; - - const animationInterval = setInterval(checkCollision, 100); - - return () => clearInterval(animationInterval); - }, [cycleCollisionDetected, parentRef]); - - useEffect(() => { - if (!collision.detected || !collision.coordinates) return; - - const timer1 = setTimeout(() => { - setCollision({ detected: false, coordinates: null }); - setCycleCollisionDetected(false); - if (beamRef.current) { - beamRef.current.style.opacity = "1"; - } - }, 2000); - - const timer2 = setTimeout(() => { - setBeamKey((prevKey) => prevKey + 1); - }, 2000); - + startInterval(); return () => { - clearTimeout(timer1); - clearTimeout(timer2); + if (intervalRef.current) { + clearInterval(intervalRef.current); + } }; - }, [collision]); + }, [startInterval]); + + const handleTabClick = (index: number) => { + setSelectedIndex(index); + startInterval(); + }; return ( <> - + +
+
+
+
+
+
+
+ {TAB_ITEMS.map((item, index) => ( + + + {index !== TAB_ITEMS.length - 1 && ( +
+ )} + + ))} +
+
+
+ + +
+
+

+ {selectedItem.title} +

+

+ {selectedItem.description} +

+
+
+ {/* biome-ignore lint/a11y/useKeyWithClickEvents: wrapper for video expand */} +
+ +
+ + +
+ + - {collision.detected && collision.coordinates && ( - )} @@ -352,62 +312,92 @@ const CollisionMechanism = ({ ); }; -const Explosion = ({ ...props }: React.HTMLProps) => { - const spans = Array.from({ length: 20 }, (_, index) => ({ - id: index, - initialX: 0, - initialY: 0, - directionX: Math.floor(Math.random() * 80 - 40), - directionY: Math.floor(Math.random() * -50 - 10), - })); +const TabVideo = memo(function TabVideo({ src }: { src: string }) { + const videoRef = useRef(null); + const [hasLoaded, setHasLoaded] = useState(false); + + useEffect(() => { + setHasLoaded(false); + const video = videoRef.current; + if (!video) return; + video.currentTime = 0; + video.play().catch(() => { }); + }, [src]); + + const handleCanPlay = useCallback(() => { + setHasLoaded(true); + }, []); return ( -
- - {spans.map((span) => ( - - ))} +
+
+ ); +} diff --git a/surfsense_web/app/desktop/permissions/page.tsx b/surfsense_web/app/desktop/permissions/page.tsx index 6c08e35b5..178b6a533 100644 --- a/surfsense_web/app/desktop/permissions/page.tsx +++ b/surfsense_web/app/desktop/permissions/page.tsx @@ -5,6 +5,7 @@ import { useRouter } from "next/navigation"; import { Logo } from "@/components/Logo"; import { Button } from "@/components/ui/button"; import { Spinner } from "@/components/ui/spinner"; +import { useElectronAPI } from "@/hooks/use-platform"; type PermissionStatus = "authorized" | "denied" | "not determined" | "restricted" | "limited"; @@ -57,19 +58,18 @@ function StatusBadge({ status }: { status: PermissionStatus }) { export default function DesktopPermissionsPage() { const router = useRouter(); + const api = useElectronAPI(); const [permissions, setPermissions] = useState(null); - const [isElectron, setIsElectron] = useState(false); useEffect(() => { - if (!window.electronAPI) return; - setIsElectron(true); + if (!api) return; let interval: ReturnType | null = null; const isResolved = (s: string) => s === "authorized" || s === "restricted"; const poll = async () => { - const status = await window.electronAPI!.getPermissionsStatus(); + const status = await api.getPermissionsStatus(); setPermissions(status); if (isResolved(status.accessibility) && isResolved(status.screenRecording)) { @@ -80,9 +80,9 @@ export default function DesktopPermissionsPage() { poll(); interval = setInterval(poll, 2000); return () => { if (interval) clearInterval(interval); }; - }, []); + }, [api]); - if (!isElectron) { + if (!api) { return (

This page is only available in the desktop app.

@@ -102,15 +102,15 @@ export default function DesktopPermissionsPage() { const handleRequest = async (action: string) => { if (action === "requestScreenRecording") { - await window.electronAPI!.requestScreenRecording(); + await api.requestScreenRecording(); } else if (action === "requestAccessibility") { - await window.electronAPI!.requestAccessibility(); + await api.requestAccessibility(); } }; const handleContinue = () => { if (allGranted) { - window.electronAPI!.restartApp(); + api.restartApp(); } }; diff --git a/surfsense_web/app/desktop/suggestion/page.tsx b/surfsense_web/app/desktop/suggestion/page.tsx index 097047bb1..fb83e2113 100644 --- a/surfsense_web/app/desktop/suggestion/page.tsx +++ b/surfsense_web/app/desktop/suggestion/page.tsx @@ -1,6 +1,7 @@ "use client"; import { useCallback, useEffect, useRef, useState } from "react"; +import { useElectronAPI } from "@/hooks/use-platform"; import { getBearerToken, ensureTokensFromElectron } from "@/lib/auth-utils"; type SSEEvent = @@ -34,26 +35,27 @@ function friendlyError(raw: string | number): string { const AUTO_DISMISS_MS = 3000; export default function SuggestionPage() { + const api = useElectronAPI(); const [suggestion, setSuggestion] = useState(""); const [isLoading, setIsLoading] = useState(true); - const [isDesktop, setIsDesktop] = useState(true); const [error, setError] = useState(null); const abortRef = useRef(null); + const isDesktop = !!api?.onAutocompleteContext; + useEffect(() => { - if (!window.electronAPI?.onAutocompleteContext) { - setIsDesktop(false); + if (!api?.onAutocompleteContext) { setIsLoading(false); } - }, []); + }, [api]); useEffect(() => { if (!error) return; const timer = setTimeout(() => { - window.electronAPI?.dismissSuggestion?.(); + api?.dismissSuggestion?.(); }, AUTO_DISMISS_MS); return () => clearTimeout(timer); - }, [error]); + }, [error, api]); const fetchSuggestion = useCallback( async (screenshot: string, searchSpaceId: string, appName?: string, windowTitle?: string) => { @@ -153,9 +155,9 @@ export default function SuggestionPage() { ); useEffect(() => { - if (!window.electronAPI?.onAutocompleteContext) return; + if (!api?.onAutocompleteContext) return; - const cleanup = window.electronAPI.onAutocompleteContext((data) => { + const cleanup = api.onAutocompleteContext((data) => { const searchSpaceId = data.searchSpaceId || "1"; if (data.screenshot) { fetchSuggestion(data.screenshot, searchSpaceId, data.appName, data.windowTitle); @@ -163,7 +165,7 @@ export default function SuggestionPage() { }); return cleanup; - }, [fetchSuggestion]); + }, [fetchSuggestion, api]); if (!isDesktop) { return ( @@ -197,12 +199,12 @@ export default function SuggestionPage() { const handleAccept = () => { if (suggestion) { - window.electronAPI?.acceptSuggestion?.(suggestion); + api?.acceptSuggestion?.(suggestion); } }; const handleDismiss = () => { - window.electronAPI?.dismissSuggestion?.(); + api?.dismissSuggestion?.(); }; if (!suggestion) return null; diff --git a/surfsense_web/app/layout.tsx b/surfsense_web/app/layout.tsx index 784fd3bcf..8ebb0e848 100644 --- a/surfsense_web/app/layout.tsx +++ b/surfsense_web/app/layout.tsx @@ -10,6 +10,7 @@ import { ZeroProvider } from "@/components/providers/ZeroProvider"; import { ThemeProvider } from "@/components/theme/theme-provider"; import { Toaster } from "@/components/ui/sonner"; import { LocaleProvider } from "@/contexts/LocaleContext"; +import { PlatformProvider } from "@/contexts/platform-context"; import { ReactQueryClientProvider } from "@/lib/query-client/query-client.provider"; import { cn } from "@/lib/utils"; @@ -139,15 +140,17 @@ export default function RootLayout({ disableTransitionOnChange defaultTheme="system" > - - - - {children} - - - - - + + + + + {children} + + + + + + diff --git a/surfsense_web/components/UserDropdown.tsx b/surfsense_web/components/UserDropdown.tsx index 197db6287..19dceb06b 100644 --- a/surfsense_web/components/UserDropdown.tsx +++ b/surfsense_web/components/UserDropdown.tsx @@ -15,7 +15,7 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Spinner } from "@/components/ui/spinner"; -import { logout } from "@/lib/auth-utils"; +import { getLoginPath, logout } from "@/lib/auth-utils"; import { resetUser, trackLogout } from "@/lib/posthog/events"; export function UserDropdown({ @@ -33,22 +33,19 @@ export function UserDropdown({ if (isLoggingOut) return; setIsLoggingOut(true); try { - // Track logout event and reset PostHog identity trackLogout(); resetUser(); - // Revoke refresh token on server and clear all tokens from localStorage await logout(); if (typeof window !== "undefined") { - window.location.href = "/"; + window.location.href = getLoginPath(); } } catch (error) { console.error("Error during logout:", error); - // Even if there's an error, try to clear tokens and redirect await logout(); if (typeof window !== "undefined") { - window.location.href = "/"; + window.location.href = getLoginPath(); } } }; diff --git a/surfsense_web/components/assistant-ui/assistant-message.tsx b/surfsense_web/components/assistant-ui/assistant-message.tsx index 0dcaf6350..d0cada0bd 100644 --- a/surfsense_web/components/assistant-ui/assistant-message.tsx +++ b/surfsense_web/components/assistant-ui/assistant-message.tsx @@ -87,6 +87,7 @@ import { } from "@/components/ui/drawer"; import { useComments } from "@/hooks/use-comments"; import { useMediaQuery } from "@/hooks/use-media-query"; +import { useElectronAPI } from "@/hooks/use-platform"; import { cn } from "@/lib/utils"; // Dynamically import video presentation tool to avoid loading Babel and Remotion in main bundle @@ -463,16 +464,17 @@ export const AssistantMessage: FC = () => { const AssistantActionBar: FC = () => { const isLast = useAuiState((s) => s.message.isLast); const aui = useAui(); + const api = useElectronAPI(); const [quickAskMode, setQuickAskMode] = useState(""); useEffect(() => { - if (!isLast || !window.electronAPI?.getQuickAskMode) return; - window.electronAPI.getQuickAskMode().then((mode) => { + if (!isLast || !api?.getQuickAskMode) return; + api.getQuickAskMode().then((mode) => { if (mode) setQuickAskMode(mode); }); - }, [isLast]); + }, [isLast, api]); - const isTransform = isLast && !!window.electronAPI?.replaceText && quickAskMode === "transform"; + const isTransform = isLast && !!api?.replaceText && quickAskMode === "transform"; return ( { type="button" onClick={() => { const text = aui.message().getCopyText(); - window.electronAPI?.replaceText(text); + api?.replaceText(text); }} className="ml-1 inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90" > diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx index 3e8aad620..4a97863fb 100644 --- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx @@ -3,6 +3,7 @@ import type { FC } from "react"; import { EnumConnectorName } from "@/contracts/enums/connector"; import type { SearchSourceConnector } from "@/contracts/types/connector.types"; +import { usePlatform } from "@/hooks/use-platform"; import { isSelfHosted } from "@/lib/env-config"; import { ConnectorCard } from "../components/connector-card"; import { @@ -74,9 +75,8 @@ export const AllConnectorsTab: FC = ({ onManage, onViewAccountsList, }) => { - // Check if self-hosted mode (for showing self-hosted only connectors) const selfHosted = isSelfHosted(); - const isDesktop = typeof window !== "undefined" && !!window.electronAPI; + const { isDesktop } = usePlatform(); const matchesSearch = (title: string, description: string) => title.toLowerCase().includes(searchQuery.toLowerCase()) || diff --git a/surfsense_web/components/assistant-ui/inline-mention-editor.tsx b/surfsense_web/components/assistant-ui/inline-mention-editor.tsx index af7a8397c..2d55f4d20 100644 --- a/surfsense_web/components/assistant-ui/inline-mention-editor.tsx +++ b/surfsense_web/components/assistant-ui/inline-mention-editor.tsx @@ -24,6 +24,7 @@ export interface MentionedDocument { export interface InlineMentionEditorRef { focus: () => void; clear: () => void; + setText: (text: string) => void; getText: () => string; getMentionedDocuments: () => MentionedDocument[]; insertDocumentChip: (doc: Pick) => void; @@ -397,6 +398,19 @@ export const InlineMentionEditor = forwardRef { + if (!editorRef.current) return; + editorRef.current.innerText = text; + const empty = text.length === 0; + setIsEmpty(empty); + onChange?.(text, Array.from(mentionedDocs.values())); + focusAtEnd(); + }, + [focusAtEnd, onChange, mentionedDocs] + ); + const setDocumentChipStatus = useCallback( ( docId: number, @@ -469,6 +483,7 @@ export const InlineMentionEditor = forwardRef ({ focus: () => editorRef.current?.focus(), clear, + setText, getText, getMentionedDocuments, insertDocumentChip, diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx index 597fcce39..7d8765399 100644 --- a/surfsense_web/components/assistant-ui/thread.tsx +++ b/surfsense_web/components/assistant-ui/thread.tsx @@ -89,6 +89,7 @@ import type { Document } from "@/contracts/types/document.types"; import { useBatchCommentsPreload } from "@/hooks/use-comments"; import { useCommentsSync } from "@/hooks/use-comments-sync"; import { useMediaQuery } from "@/hooks/use-media-query"; +import { useElectronAPI } from "@/hooks/use-platform"; import { cn } from "@/lib/utils"; /** Placeholder texts that cycle in new chats when input is empty */ @@ -362,18 +363,19 @@ const Composer: FC = () => { }; }, []); + const electronAPI = useElectronAPI(); const [clipboardInitialText, setClipboardInitialText] = useState(); const clipboardLoadedRef = useRef(false); useEffect(() => { - if (!window.electronAPI || clipboardLoadedRef.current) return; + if (!electronAPI || clipboardLoadedRef.current) return; clipboardLoadedRef.current = true; - window.electronAPI.getQuickAskText().then((text) => { + electronAPI.getQuickAskText().then((text) => { if (text) { setClipboardInitialText(text); setShowPromptPicker(true); } }); - }, []); + }, [electronAPI]); const isThreadEmpty = useAuiState(({ thread }) => thread.isEmpty); const isThreadRunning = useAuiState(({ thread }) => thread.isRunning); @@ -504,34 +506,28 @@ const Composer: FC = () => { : userText ? `${action.prompt}\n\n${userText}` : action.prompt; + editorRef.current?.setText(finalPrompt); aui.composer().setText(finalPrompt); - aui.composer().send(); - editorRef.current?.clear(); setShowPromptPicker(false); setActionQuery(""); - setMentionedDocuments([]); - setSidebarDocs([]); }, - [actionQuery, aui, setMentionedDocuments, setSidebarDocs] + [actionQuery, aui] ); const handleQuickAskSelect = useCallback( (action: { name: string; prompt: string; mode: "transform" | "explore" }) => { if (!clipboardInitialText) return; - window.electronAPI?.setQuickAskMode(action.mode); + electronAPI?.setQuickAskMode(action.mode); const finalPrompt = action.prompt.includes("{selection}") ? action.prompt.replace("{selection}", () => clipboardInitialText) : `${action.prompt}\n\n${clipboardInitialText}`; + editorRef.current?.setText(finalPrompt); aui.composer().setText(finalPrompt); - aui.composer().send(); - editorRef.current?.clear(); setShowPromptPicker(false); setActionQuery(""); setClipboardInitialText(undefined); - setMentionedDocuments([]); - setSidebarDocs([]); }, - [clipboardInitialText, aui, setMentionedDocuments, setSidebarDocs] + [clipboardInitialText, electronAPI, aui] ); // Keyboard navigation for document/action picker (arrow keys, Enter, Escape) diff --git a/surfsense_web/components/desktop/shortcut-recorder.tsx b/surfsense_web/components/desktop/shortcut-recorder.tsx new file mode 100644 index 000000000..0c0012002 --- /dev/null +++ b/surfsense_web/components/desktop/shortcut-recorder.tsx @@ -0,0 +1,168 @@ +"use client"; + +import { RotateCcw } from "lucide-react"; +import { useCallback, useRef, useState } from "react"; +import { Button } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; + +// --------------------------------------------------------------------------- +// Accelerator ↔ display helpers +// --------------------------------------------------------------------------- + +export function keyEventToAccelerator(e: React.KeyboardEvent): string | null { + const parts: string[] = []; + if (e.ctrlKey || e.metaKey) parts.push("CommandOrControl"); + if (e.altKey) parts.push("Alt"); + if (e.shiftKey) parts.push("Shift"); + + const key = e.key; + if (["Control", "Meta", "Alt", "Shift"].includes(key)) return null; + + if (key === " ") parts.push("Space"); + else if (key.length === 1) parts.push(key.toUpperCase()); + else parts.push(key); + + if (parts.length < 2) return null; + return parts.join("+"); +} + +export function acceleratorToDisplay(accel: string): string[] { + if (!accel) return []; + return accel.split("+").map((part) => { + if (part === "CommandOrControl") return "Ctrl"; + if (part === "Space") return "Space"; + return part; + }); +} + +export const DEFAULT_SHORTCUTS = { + quickAsk: "CommandOrControl+Alt+S", + autocomplete: "CommandOrControl+Shift+Space", +}; + +// --------------------------------------------------------------------------- +// Kbd pill component +// --------------------------------------------------------------------------- + +export function Kbd({ + keys, + className, +}: { + keys: string[]; + className?: string; +}) { + return ( + + {keys.map((key) => ( + 3 && "px-2" + )} + > + {key} + + ))} + + ); +} + +// --------------------------------------------------------------------------- +// Shortcut recorder component +// --------------------------------------------------------------------------- + +export function ShortcutRecorder({ + value, + onChange, + onReset, + defaultValue, + label, + description, + icon: Icon, +}: { + value: string; + onChange: (accelerator: string) => void; + onReset: () => void; + defaultValue: string; + label: string; + description: string; + icon: React.ElementType; +}) { + const [recording, setRecording] = useState(false); + const inputRef = useRef(null); + + const handleKeyDown = useCallback( + (e: React.KeyboardEvent) => { + if (!recording) return; + e.preventDefault(); + e.stopPropagation(); + + if (e.key === "Escape") { + setRecording(false); + return; + } + + const accel = keyEventToAccelerator(e); + if (accel) { + onChange(accel); + setRecording(false); + } + }, + [recording, onChange] + ); + + const displayKeys = acceleratorToDisplay(value); + const isDefault = value === defaultValue; + + return ( +
+
+
+ +
+
+

{label}

+

+ {description} +

+
+
+ +
+ {!isDefault && ( + + )} + +
+
+ ); +} diff --git a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx index 6138b67fb..380ffa656 100644 --- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx +++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx @@ -55,7 +55,7 @@ import { useInbox } from "@/hooks/use-inbox"; import { useIsMobile } from "@/hooks/use-mobile"; import { notificationsApiService } from "@/lib/apis/notifications-api.service"; import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service"; -import { logout } from "@/lib/auth-utils"; +import { getLoginPath, logout } from "@/lib/auth-utils"; import { deleteThread, fetchThreads, updateThread } from "@/lib/chat/thread-persistence"; import { resetUser, trackLogout } from "@/lib/posthog/events"; import { cacheKeys } from "@/lib/query-client/cache-keys"; @@ -600,12 +600,12 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid await logout(); if (typeof window !== "undefined") { - router.push("/"); + router.push(getLoginPath()); } } catch (error) { console.error("Error during logout:", error); await logout(); - router.push("/"); + router.push(getLoginPath()); } }, [router]); diff --git a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx index aa409e179..f19b20971 100644 --- a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx +++ b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx @@ -41,6 +41,7 @@ import { getConnectorIcon } from "@/contracts/enums/connectorIcons"; import type { DocumentTypeEnum } from "@/contracts/types/document.types"; import { useDebouncedValue } from "@/hooks/use-debounced-value"; import { useMediaQuery } from "@/hooks/use-media-query"; +import { useElectronAPI } from "@/hooks/use-platform"; import { documentsApiService } from "@/lib/apis/documents-api.service"; import { foldersApiService } from "@/lib/apis/folders-api.service"; import { authenticatedFetch } from "@/lib/auth-utils"; @@ -84,6 +85,7 @@ export function DocumentsSidebar({ const tSidebar = useTranslations("sidebar"); const params = useParams(); const isMobile = !useMediaQuery("(min-width: 640px)"); + const electronAPI = useElectronAPI(); const searchSpaceId = Number(params.search_space_id); const setConnectorDialogOpen = useSetAtom(connectorDialogOpenAtom); const setRightPanelCollapsed = useSetAtom(rightPanelCollapsedAtom); @@ -97,11 +99,11 @@ export function DocumentsSidebar({ const [watchedFolderIds, setWatchedFolderIds] = useState>(new Set()); useEffect(() => { - const api = typeof window !== "undefined" ? window.electronAPI : null; - if (!api?.getWatchedFolders) return; + if (!electronAPI?.getWatchedFolders) return; + const api = electronAPI; async function loadWatchedIds() { - const folders = await api!.getWatchedFolders(); + const folders = await api.getWatchedFolders(); if (folders.length === 0) { try { @@ -109,7 +111,7 @@ export function DocumentsSidebar({ for (const bf of backendFolders) { const meta = bf.metadata as Record | null; if (!meta?.watched || !meta.folder_path) continue; - await api!.addWatchedFolder({ + await api.addWatchedFolder({ path: meta.folder_path as string, name: bf.name, rootFolderId: bf.id, @@ -119,7 +121,7 @@ export function DocumentsSidebar({ active: true, }); } - const recovered = await api!.getWatchedFolders(); + const recovered = await api.getWatchedFolders(); const ids = new Set( recovered.filter((f) => f.rootFolderId != null).map((f) => f.rootFolderId as number) ); @@ -137,7 +139,7 @@ export function DocumentsSidebar({ } loadWatchedIds(); - }, [searchSpaceId]); + }, [searchSpaceId, electronAPI]); const { mutateAsync: deleteDocumentMutation } = useAtomValue(deleteDocumentMutationAtom); const [sidebarDocs, setSidebarDocs] = useAtom(sidebarSelectedDocumentsAtom); @@ -276,10 +278,9 @@ export function DocumentsSidebar({ const handleRescanFolder = useCallback( async (folder: FolderDisplay) => { - const api = window.electronAPI; - if (!api) return; + if (!electronAPI) return; - const watchedFolders = await api.getWatchedFolders(); + const watchedFolders = await electronAPI.getWatchedFolders(); const matched = watchedFolders.find((wf) => wf.rootFolderId === folder.id); if (!matched) { toast.error("This folder is not being watched"); @@ -298,28 +299,27 @@ export function DocumentsSidebar({ toast.error((err as Error)?.message || "Failed to re-scan folder"); } }, - [searchSpaceId] + [searchSpaceId, electronAPI] ); const handleStopWatching = useCallback(async (folder: FolderDisplay) => { - const api = window.electronAPI; - if (!api) return; + if (!electronAPI) return; - const watchedFolders = await api.getWatchedFolders(); + const watchedFolders = await electronAPI.getWatchedFolders(); const matched = watchedFolders.find((wf) => wf.rootFolderId === folder.id); if (!matched) { toast.error("This folder is not being watched"); return; } - await api.removeWatchedFolder(matched.path); + await electronAPI.removeWatchedFolder(matched.path); try { await foldersApiService.stopWatching(folder.id); } catch (err) { console.error("[DocumentsSidebar] Failed to clear watched metadata:", err); } toast.success(`Stopped watching: ${matched.name}`); - }, []); + }, [electronAPI]); const handleRenameFolder = useCallback(async (folder: FolderDisplay, newName: string) => { try { @@ -333,12 +333,11 @@ export function DocumentsSidebar({ const handleDeleteFolder = useCallback(async (folder: FolderDisplay) => { if (!confirm(`Delete folder "${folder.name}" and all its contents?`)) return; try { - const api = window.electronAPI; - if (api) { - const watchedFolders = await api.getWatchedFolders(); + if (electronAPI) { + const watchedFolders = await electronAPI.getWatchedFolders(); const matched = watchedFolders.find((wf) => wf.rootFolderId === folder.id); if (matched) { - await api.removeWatchedFolder(matched.path); + await electronAPI.removeWatchedFolder(matched.path); } } await foldersApiService.deleteFolder(folder.id); @@ -346,7 +345,7 @@ export function DocumentsSidebar({ } catch (e: unknown) { toast.error((e as Error)?.message || "Failed to delete folder"); } - }, []); + }, [electronAPI]); const handleMoveFolder = useCallback( (folder: FolderDisplay) => { diff --git a/surfsense_web/components/platform-gate.tsx b/surfsense_web/components/platform-gate.tsx new file mode 100644 index 000000000..6908c6d32 --- /dev/null +++ b/surfsense_web/components/platform-gate.tsx @@ -0,0 +1,16 @@ +"use client"; + +import type { ReactNode } from "react"; +import { usePlatform } from "@/hooks/use-platform"; + +export function DesktopOnly({ children }: { children: ReactNode }) { + const { isDesktop } = usePlatform(); + if (!isDesktop) return null; + return <>{children}; +} + +export function WebOnly({ children }: { children: ReactNode }) { + const { isWeb } = usePlatform(); + if (!isWeb) return null; + return <>{children}; +} diff --git a/surfsense_web/components/settings/user-settings-dialog.tsx b/surfsense_web/components/settings/user-settings-dialog.tsx index b74ff973b..919b08174 100644 --- a/surfsense_web/components/settings/user-settings-dialog.tsx +++ b/surfsense_web/components/settings/user-settings-dialog.tsx @@ -3,6 +3,7 @@ import { useAtom } from "jotai"; import { Globe, KeyRound, Monitor, Receipt, Sparkles, User } from "lucide-react"; import { useTranslations } from "next-intl"; +import { useMemo } from "react"; import { ApiKeyContent } from "@/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent"; import { CommunityPromptsContent } from "@/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent"; import { ProfileContent } from "@/app/dashboard/[search_space_id]/user-settings/components/ProfileContent"; @@ -11,37 +12,42 @@ import { PurchaseHistoryContent } from "@/app/dashboard/[search_space_id]/user-s import { DesktopContent } from "@/app/dashboard/[search_space_id]/user-settings/components/DesktopContent"; import { userSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms"; import { SettingsDialog } from "@/components/settings/settings-dialog"; +import { usePlatform } from "@/hooks/use-platform"; export function UserSettingsDialog() { const t = useTranslations("userSettings"); const [state, setState] = useAtom(userSettingsDialogAtom); + const { isDesktop } = usePlatform(); - const navItems = [ - { value: "profile", label: t("profile_nav_label"), icon: }, - { - value: "api-key", - label: t("api_key_nav_label"), - icon: , - }, - { - value: "prompts", - label: "My Prompts", - icon: , - }, - { - value: "community-prompts", - label: "Community Prompts", - icon: , - }, - { - value: "purchases", - label: "Purchase History", - icon: , - }, - ...(typeof window !== "undefined" && window.electronAPI - ? [{ value: "desktop", label: "Desktop", icon: }] - : []), - ]; + const navItems = useMemo( + () => [ + { value: "profile", label: t("profile_nav_label"), icon: }, + { + value: "api-key", + label: t("api_key_nav_label"), + icon: , + }, + { + value: "prompts", + label: "My Prompts", + icon: , + }, + { + value: "community-prompts", + label: "Community Prompts", + icon: , + }, + { + value: "purchases", + label: "Purchase History", + icon: , + }, + ...(isDesktop + ? [{ value: "desktop", label: "Desktop", icon: }] + : []), + ], + [t, isDesktop] + ); return ( (null); const [watchFolder, setWatchFolder] = useState(true); const [folderSubmitting, setFolderSubmitting] = useState(false); - const isElectron = typeof window !== "undefined" && !!window.electronAPI?.browseFiles; + const isElectron = !!electronAPI?.browseFiles; const acceptedFileTypes = useMemo(() => { const etlService = process.env.NEXT_PUBLIC_ETL_SERVICE; @@ -216,33 +218,31 @@ export function DocumentUploadTab({ }, []); const handleBrowseFiles = useCallback(async () => { - const api = window.electronAPI; - if (!api?.browseFiles) return; + if (!electronAPI?.browseFiles) return; - const paths = await api.browseFiles(); + const paths = await electronAPI.browseFiles(); if (!paths || paths.length === 0) return; setSelectedFolder(null); - const fileDataList = await api.readLocalFiles(paths); + const fileDataList = await electronAPI.readLocalFiles(paths); const newFiles: FileWithId[] = fileDataList.map((fd) => ({ id: crypto.randomUUID?.() ?? `file-${Date.now()}-${Math.random().toString(36)}`, file: new File([fd.data], fd.name, { type: fd.mimeType }), })); setFiles((prev) => [...prev, ...newFiles]); - }, []); + }, [electronAPI]); const handleBrowseFolder = useCallback(async () => { - const api = window.electronAPI; - if (!api?.selectFolder) return; + if (!electronAPI?.selectFolder) return; - const folderPath = await api.selectFolder(); + const folderPath = await electronAPI.selectFolder(); if (!folderPath) return; const folderName = folderPath.split("/").pop() || folderPath.split("\\").pop() || folderPath; setFiles([]); setSelectedFolder({ path: folderPath, name: folderName }); setWatchFolder(true); - }, []); + }, [electronAPI]); const handleFolderChange = useCallback( (e: ChangeEvent) => { @@ -287,9 +287,7 @@ export function DocumentUploadTab({ ); const handleFolderSubmit = useCallback(async () => { - if (!selectedFolder) return; - const api = window.electronAPI; - if (!api) return; + if (!selectedFolder || !electronAPI) return; setFolderSubmitting(true); try { @@ -304,7 +302,7 @@ export function DocumentUploadTab({ const rootFolderId = (result as { root_folder_id?: number })?.root_folder_id ?? null; if (watchFolder) { - await api.addWatchedFolder({ + await electronAPI.addWatchedFolder({ path: selectedFolder.path, name: selectedFolder.name, excludePatterns: [ @@ -332,7 +330,7 @@ export function DocumentUploadTab({ } finally { setFolderSubmitting(false); } - }, [selectedFolder, watchFolder, searchSpaceId, shouldSummarize, onSuccess]); + }, [selectedFolder, watchFolder, searchSpaceId, shouldSummarize, onSuccess, electronAPI]); const handleUpload = async () => { setUploadProgress(0); diff --git a/surfsense_web/contexts/platform-context.tsx b/surfsense_web/contexts/platform-context.tsx new file mode 100644 index 000000000..bb3e3800d --- /dev/null +++ b/surfsense_web/contexts/platform-context.tsx @@ -0,0 +1,31 @@ +"use client"; + +import { createContext, useEffect, useState, type ReactNode } from "react"; + +export interface PlatformContextValue { + isDesktop: boolean; + isWeb: boolean; + electronAPI: ElectronAPI | null; +} + +const SSR_VALUE: PlatformContextValue = { + isDesktop: false, + isWeb: false, + electronAPI: null, +}; + +export const PlatformContext = createContext(SSR_VALUE); + +export function PlatformProvider({ children }: { children: ReactNode }) { + const [value, setValue] = useState(SSR_VALUE); + + useEffect(() => { + const api = window.electronAPI ?? null; + const isDesktop = !!api; + setValue({ isDesktop, isWeb: !isDesktop, electronAPI: api }); + }, []); + + return ( + {children} + ); +} diff --git a/surfsense_web/hooks/use-folder-sync.ts b/surfsense_web/hooks/use-folder-sync.ts index ef3326556..847d0081b 100644 --- a/surfsense_web/hooks/use-folder-sync.ts +++ b/surfsense_web/hooks/use-folder-sync.ts @@ -1,6 +1,7 @@ "use client"; import { useEffect, useRef } from "react"; +import { useElectronAPI } from "@/hooks/use-platform"; import { documentsApiService } from "@/lib/apis/documents-api.service"; interface FileChangedEvent { @@ -29,6 +30,7 @@ interface BatchItem { } export function useFolderSync() { + const electronAPI = useElectronAPI(); const queueRef = useRef([]); const processingRef = useRef(false); const debounceTimers = useRef>>(new Map()); @@ -49,9 +51,8 @@ export function useFolderSync() { target_file_paths: batch.filePaths, root_folder_id: batch.rootFolderId, }); - const api = typeof window !== "undefined" ? window.electronAPI : null; - if (api?.acknowledgeFileEvents && batch.ackIds.length > 0) { - await api.acknowledgeFileEvents(batch.ackIds); + if (electronAPI?.acknowledgeFileEvents && batch.ackIds.length > 0) { + await electronAPI.acknowledgeFileEvents(batch.ackIds); } } catch (err) { console.error("[FolderSync] Failed to trigger batch re-index:", err); @@ -117,25 +118,22 @@ export function useFolderSync() { useEffect(() => { isMountedRef.current = true; - const api = typeof window !== "undefined" ? window.electronAPI : null; - if (!api?.onFileChanged) { + if (!electronAPI?.onFileChanged) { return () => { isMountedRef.current = false; }; } - // Signal to main process that the renderer is ready to receive events - api.signalRendererReady?.(); + electronAPI.signalRendererReady?.(); - // Drain durable outbox first so events survive renderer startup gaps and restarts - void api.getPendingFileEvents?.().then((pendingEvents) => { + void electronAPI.getPendingFileEvents?.().then((pendingEvents) => { if (!isMountedRef.current || !pendingEvents?.length) return; for (const event of pendingEvents) { enqueueWithDebounce(event); } }); - const cleanup = api.onFileChanged((event: FileChangedEvent) => { + const cleanup = electronAPI.onFileChanged((event: FileChangedEvent) => { enqueueWithDebounce(event); }); @@ -149,5 +147,5 @@ export function useFolderSync() { pendingByFolder.current.clear(); firstEventTime.current.clear(); }; - }, []); + }, [electronAPI]); } diff --git a/surfsense_web/hooks/use-platform.ts b/surfsense_web/hooks/use-platform.ts new file mode 100644 index 000000000..dc1f7e914 --- /dev/null +++ b/surfsense_web/hooks/use-platform.ts @@ -0,0 +1,12 @@ +import { useContext } from "react"; +import { PlatformContext, type PlatformContextValue } from "@/contexts/platform-context"; + +export function usePlatform(): Pick { + const { isDesktop, isWeb } = useContext(PlatformContext); + return { isDesktop, isWeb }; +} + +export function useElectronAPI(): ElectronAPI | null { + const { electronAPI } = useContext(PlatformContext); + return electronAPI; +} diff --git a/surfsense_web/lib/auth-utils.ts b/surfsense_web/lib/auth-utils.ts index f7d1c5b09..d66934c3b 100644 --- a/surfsense_web/lib/auth-utils.ts +++ b/surfsense_web/lib/auth-utils.ts @@ -15,6 +15,7 @@ const PUBLIC_ROUTE_PREFIXES = [ "/login", "/register", "/auth", + "/desktop/login", "/docs", "/public", "/invite", @@ -34,6 +35,11 @@ export function isPublicRoute(pathname: string): boolean { return PUBLIC_ROUTE_PREFIXES.some((prefix) => pathname.startsWith(prefix)); } +export function getLoginPath(): string { + if (typeof window !== "undefined" && window.electronAPI) return "/desktop/login"; + return "/login"; +} + /** * Clears tokens and optionally redirects to login. * Call this when a 401 response is received. @@ -55,7 +61,7 @@ export function handleUnauthorized(): void { if (!excludedPaths.includes(pathname)) { localStorage.setItem(REDIRECT_PATH_KEY, currentPath); } - window.location.href = "/login"; + window.location.href = getLoginPath(); } } @@ -221,13 +227,12 @@ export function redirectToLogin(): void { const currentPath = window.location.pathname + window.location.search + window.location.hash; // Don't save auth-related paths or home page - const excludedPaths = ["/auth", "/auth/callback", "/", "/login", "/register"]; + const excludedPaths = ["/auth", "/auth/callback", "/", "/login", "/register", "/desktop/login"]; if (!excludedPaths.includes(window.location.pathname)) { localStorage.setItem(REDIRECT_PATH_KEY, currentPath); } - // Redirect to login page - window.location.href = "/login"; + window.location.href = getLoginPath(); } /** diff --git a/surfsense_web/types/window.d.ts b/surfsense_web/types/window.d.ts index 5e45635a2..615b861ea 100644 --- a/surfsense_web/types/window.d.ts +++ b/surfsense_web/types/window.d.ts @@ -81,6 +81,9 @@ interface ElectronAPI { // Auth token sync across windows getAuthTokens: () => Promise<{ bearer: string; refresh: string } | null>; setAuthTokens: (bearer: string, refresh: string) => Promise; + // Keyboard shortcut configuration + getShortcuts: () => Promise<{ quickAsk: string; autocomplete: string }>; + setShortcuts: (config: Partial<{ quickAsk: string; autocomplete: string }>) => Promise<{ quickAsk: string; autocomplete: string }>; } declare global { From bb1dcd32b6b89ca8bcfed3c606ff227759614904 Mon Sep 17 00:00:00 2001 From: "DESKTOP-RTLN3BA\\$punk" Date: Tue, 7 Apr 2026 02:49:24 -0700 Subject: [PATCH 06/13] feat: enhance vision autocomplete service and UI feedback - Optimized the vision autocomplete service by starting the SSE stream immediately and deriving KB search queries directly from window titles. - Refactored the service to run KB filesystem pre-computation and agent graph compilation in parallel, improving performance. - Updated the SuggestionPage component to handle new agent step data, displaying progress indicators for each step. - Enhanced the CSS for the suggestion tooltip and agent activity indicators, improving the user interface and experience. --- .../app/agents/autocomplete/__init__.py | 11 + .../agents/autocomplete/autocomplete_agent.py | 429 ++++++++++++++++++ .../services/vision_autocomplete_service.py | 258 ++++------- surfsense_web/app/desktop/suggestion/page.tsx | 68 ++- .../app/desktop/suggestion/suggestion.css | 114 ++++- .../components/assistant-ui/thread.tsx | 34 +- 6 files changed, 686 insertions(+), 228 deletions(-) create mode 100644 surfsense_backend/app/agents/autocomplete/__init__.py create mode 100644 surfsense_backend/app/agents/autocomplete/autocomplete_agent.py diff --git a/surfsense_backend/app/agents/autocomplete/__init__.py b/surfsense_backend/app/agents/autocomplete/__init__.py new file mode 100644 index 000000000..55d7a692d --- /dev/null +++ b/surfsense_backend/app/agents/autocomplete/__init__.py @@ -0,0 +1,11 @@ +"""Agent-based vision autocomplete with scoped filesystem exploration.""" + +from app.agents.autocomplete.autocomplete_agent import ( + create_autocomplete_agent, + stream_autocomplete_agent, +) + +__all__ = [ + "create_autocomplete_agent", + "stream_autocomplete_agent", +] diff --git a/surfsense_backend/app/agents/autocomplete/autocomplete_agent.py b/surfsense_backend/app/agents/autocomplete/autocomplete_agent.py new file mode 100644 index 000000000..928a133cc --- /dev/null +++ b/surfsense_backend/app/agents/autocomplete/autocomplete_agent.py @@ -0,0 +1,429 @@ +"""Vision autocomplete agent with scoped filesystem exploration. + +Converts the stateless single-shot vision autocomplete into an agent that +seeds a virtual filesystem from KB search results and lets the vision LLM +explore documents via ``ls``, ``read_file``, ``glob``, ``grep``, etc. +before generating the final completion. + +Performance: KB search and agent graph compilation run in parallel so +the only sequential latency is KB-search (or agent compile, whichever is +slower) + the agent's LLM turns. There is no separate "query extraction" +LLM call — the window title is used directly as the KB search query. +""" + +from __future__ import annotations + +import asyncio +import logging +import uuid +from typing import Any, AsyncGenerator + +from deepagents.graph import BASE_AGENT_PROMPT +from deepagents.middleware.patch_tool_calls import PatchToolCallsMiddleware +from langchain.agents import create_agent +from langchain_anthropic.middleware import AnthropicPromptCachingMiddleware +from langchain_core.language_models import BaseChatModel +from langchain_core.messages import AIMessage, ToolMessage + +from app.agents.new_chat.middleware.filesystem import SurfSenseFilesystemMiddleware +from app.agents.new_chat.middleware.knowledge_search import ( + build_scoped_filesystem, + search_knowledge_base, +) +from app.services.new_streaming_service import VercelStreamingService + +logger = logging.getLogger(__name__) + +KB_TOP_K = 10 + +# --------------------------------------------------------------------------- +# System prompt +# --------------------------------------------------------------------------- + +AUTOCOMPLETE_SYSTEM_PROMPT = """You are a smart writing assistant that analyzes the user's screen to draft or complete text. + +You will receive a screenshot of the user's screen. Your PRIMARY source of truth is the screenshot itself — the visual context determines what to write. + +Your job: +1. Analyze the ENTIRE screenshot to understand what the user is working on (email thread, chat conversation, document, code editor, form, etc.). +2. Identify the text area where the user will type. +3. Generate the text the user most likely wants to write based on the visual context. + +You also have access to the user's knowledge base documents via filesystem tools. However: +- ONLY consult the knowledge base if the screenshot clearly involves a topic where your KB documents are DIRECTLY relevant (e.g., the user is writing about a specific project/topic that matches a document title). +- Do NOT explore documents just because they exist. Most autocomplete requests can be answered purely from the screenshot. +- If you do read a document, only incorporate information that is 100% relevant to what the user is typing RIGHT NOW. Do not add extra details, background, or tangential information from the KB. +- Keep your output SHORT — autocomplete should feel like a natural continuation, not an essay. + +Key behavior: +- If the text area is EMPTY, draft a concise response or message based on what you see on screen (e.g., reply to an email, respond to a chat message, continue a document). +- If the text area already has text, continue it naturally — typically just a sentence or two. + +Rules: +- Output ONLY the text to be inserted. No quotes, no explanations, no meta-commentary. +- Be CONCISE. Prefer a single paragraph or a few sentences. Autocomplete is a quick assist, not a full draft. +- Match the tone and formality of the surrounding context. +- If the screen shows code, write code. If it shows a casual chat, be casual. If it shows a formal email, be formal. +- Do NOT describe the screenshot or explain your reasoning. +- Do NOT cite or reference documents explicitly — just let the knowledge inform your writing naturally. +- If you cannot determine what to write, output nothing. + +## Filesystem Tools `ls`, `read_file`, `write_file`, `edit_file`, `glob`, `grep` + +All file paths must start with a `/`. +- ls: list files and directories at a given path. +- read_file: read a file from the filesystem. +- write_file: create a temporary file in the session (not persisted). +- edit_file: edit a file in the session (not persisted for /documents/ files). +- glob: find files matching a pattern (e.g., "**/*.xml"). +- grep: search for text within files. + +## When to Use Filesystem Tools + +BEFORE reaching for any tool, ask yourself: "Can I write a good completion purely from the screenshot?" If yes, just write it — do NOT explore the KB. + +Only use tools when: +- The user is clearly writing about a specific topic that likely has detailed information in their KB. +- You need a specific fact, name, number, or reference that the screenshot doesn't provide. + +When you do use tools, be surgical: +- Check the `ls` output first. If no document title looks relevant, stop — do not read files just to see what's there. +- If a title looks relevant, read only the `` (first ~20 lines) and jump to matched chunks. Do not read entire documents. +- Extract only the specific information you need and move on to generating the completion. + +## Reading Documents Efficiently + +Documents are formatted as XML. Each document contains: +- `` — title, type, URL, etc. +- `` — a table of every chunk with its **line range** and a + `matched="true"` flag for chunks that matched the search query. +- `` — the actual chunks in original document order. + +**Workflow**: read the first ~20 lines to see the ``, identify +chunks marked `matched="true"`, then use `read_file(path, offset=, +limit=)` to jump directly to those sections.""" + +APP_CONTEXT_BLOCK = """ + +The user is currently working in "{app_name}" (window: "{window_title}"). Use this to understand the type of application and adapt your tone and format accordingly.""" + + +def _build_autocomplete_system_prompt(app_name: str, window_title: str) -> str: + prompt = AUTOCOMPLETE_SYSTEM_PROMPT + if app_name: + prompt += APP_CONTEXT_BLOCK.format(app_name=app_name, window_title=window_title) + return prompt + + +# --------------------------------------------------------------------------- +# Pre-compute KB filesystem (runs in parallel with agent compilation) +# --------------------------------------------------------------------------- + + +class _KBResult: + """Container for pre-computed KB filesystem results.""" + __slots__ = ("files", "ls_ai_msg", "ls_tool_msg") + + def __init__( + self, + files: dict[str, Any] | None = None, + ls_ai_msg: AIMessage | None = None, + ls_tool_msg: ToolMessage | None = None, + ) -> None: + self.files = files + self.ls_ai_msg = ls_ai_msg + self.ls_tool_msg = ls_tool_msg + + @property + def has_documents(self) -> bool: + return bool(self.files) + + +async def precompute_kb_filesystem( + search_space_id: int, + query: str, + top_k: int = KB_TOP_K, +) -> _KBResult: + """Search the KB and build the scoped filesystem outside the agent. + + This is designed to be called via ``asyncio.gather`` alongside agent + graph compilation so the two run concurrently. + """ + if not query: + return _KBResult() + + try: + search_results = await search_knowledge_base( + query=query, + search_space_id=search_space_id, + top_k=top_k, + ) + + if not search_results: + return _KBResult() + + new_files, _ = await build_scoped_filesystem( + documents=search_results, + search_space_id=search_space_id, + ) + + if not new_files: + return _KBResult() + + doc_paths = [ + p for p, v in new_files.items() + if p.startswith("/documents/") and v is not None + ] + tool_call_id = f"auto_ls_{uuid.uuid4().hex[:12]}" + ai_msg = AIMessage( + content="", + tool_calls=[{"name": "ls", "args": {"path": "/documents"}, "id": tool_call_id}], + ) + tool_msg = ToolMessage( + content=str(doc_paths) if doc_paths else "No documents found.", + tool_call_id=tool_call_id, + ) + return _KBResult(files=new_files, ls_ai_msg=ai_msg, ls_tool_msg=tool_msg) + + except Exception: + logger.warning("KB pre-computation failed, proceeding without KB", exc_info=True) + return _KBResult() + + +# --------------------------------------------------------------------------- +# Filesystem middleware — no save_document, no persistence +# --------------------------------------------------------------------------- + + +class AutocompleteFilesystemMiddleware(SurfSenseFilesystemMiddleware): + """Filesystem middleware for autocomplete — read-only exploration only. + + Strips ``save_document`` (permanent KB persistence) and passes + ``search_space_id=None`` so ``write_file`` / ``edit_file`` stay ephemeral. + """ + + def __init__(self) -> None: + super().__init__(search_space_id=None, created_by_id=None) + self.tools = [t for t in self.tools if t.name != "save_document"] + + +# --------------------------------------------------------------------------- +# Agent factory +# --------------------------------------------------------------------------- + + +async def _compile_agent( + llm: BaseChatModel, + app_name: str, + window_title: str, +) -> Any: + """Compile the agent graph (CPU-bound, runs in a thread).""" + system_prompt = _build_autocomplete_system_prompt(app_name, window_title) + final_system_prompt = system_prompt + "\n\n" + BASE_AGENT_PROMPT + + middleware = [ + AutocompleteFilesystemMiddleware(), + PatchToolCallsMiddleware(), + AnthropicPromptCachingMiddleware(unsupported_model_behavior="ignore"), + ] + + agent = await asyncio.to_thread( + create_agent, + llm, + system_prompt=final_system_prompt, + tools=[], + middleware=middleware, + ) + return agent.with_config({"recursion_limit": 200}) + + +async def create_autocomplete_agent( + llm: BaseChatModel, + *, + search_space_id: int, + kb_query: str, + app_name: str = "", + window_title: str = "", +) -> tuple[Any, _KBResult]: + """Create the autocomplete agent and pre-compute KB in parallel. + + Returns ``(agent, kb_result)`` so the caller can inject the pre-computed + filesystem into the agent's initial state without any middleware delay. + """ + agent, kb = await asyncio.gather( + _compile_agent(llm, app_name, window_title), + precompute_kb_filesystem(search_space_id, kb_query), + ) + return agent, kb + + +# --------------------------------------------------------------------------- +# Streaming helper +# --------------------------------------------------------------------------- + + +async def stream_autocomplete_agent( + agent: Any, + input_data: dict[str, Any], + streaming_service: VercelStreamingService, + *, + emit_message_start: bool = True, +) -> AsyncGenerator[str, None]: + """Stream agent events as Vercel SSE, with thinking steps for tool calls. + + When ``emit_message_start`` is False the caller has already sent the + ``message_start`` event (e.g. to show preparation steps before the agent + runs). + """ + thread_id = uuid.uuid4().hex + config = {"configurable": {"thread_id": thread_id}} + + current_text_id: str | None = None + active_tool_depth = 0 + thinking_step_counter = 0 + tool_step_ids: dict[str, str] = {} + step_titles: dict[str, str] = {} + completed_step_ids: set[str] = set() + last_active_step_id: str | None = None + + def next_thinking_step_id() -> str: + nonlocal thinking_step_counter + thinking_step_counter += 1 + return f"autocomplete-step-{thinking_step_counter}" + + def complete_current_step() -> str | None: + nonlocal last_active_step_id + if last_active_step_id and last_active_step_id not in completed_step_ids: + completed_step_ids.add(last_active_step_id) + title = step_titles.get(last_active_step_id, "Done") + event = streaming_service.format_thinking_step( + step_id=last_active_step_id, + title=title, + status="complete", + ) + last_active_step_id = None + return event + return None + + if emit_message_start: + yield streaming_service.format_message_start() + + # Emit an initial "Generating completion" step so the UI immediately + # shows activity once the agent starts its first LLM call. + gen_step_id = next_thinking_step_id() + last_active_step_id = gen_step_id + step_titles[gen_step_id] = "Generating completion" + yield streaming_service.format_thinking_step( + step_id=gen_step_id, + title="Generating completion", + status="in_progress", + ) + + try: + async for event in agent.astream_events(input_data, config=config, version="v2"): + event_type = event.get("event", "") + + if event_type == "on_chat_model_stream": + if active_tool_depth > 0: + continue + if "surfsense:internal" in event.get("tags", []): + continue + chunk = event.get("data", {}).get("chunk") + if chunk and hasattr(chunk, "content"): + content = chunk.content + if content and isinstance(content, str): + if current_text_id is None: + step_event = complete_current_step() + if step_event: + yield step_event + current_text_id = streaming_service.generate_text_id() + yield streaming_service.format_text_start(current_text_id) + yield streaming_service.format_text_delta(current_text_id, content) + + elif event_type == "on_tool_start": + active_tool_depth += 1 + tool_name = event.get("name", "unknown_tool") + run_id = event.get("run_id", "") + tool_input = event.get("data", {}).get("input", {}) + + if current_text_id is not None: + yield streaming_service.format_text_end(current_text_id) + current_text_id = None + + step_event = complete_current_step() + if step_event: + yield step_event + + tool_step_id = next_thinking_step_id() + tool_step_ids[run_id] = tool_step_id + last_active_step_id = tool_step_id + + title, items = _describe_tool_call(tool_name, tool_input) + step_titles[tool_step_id] = title + yield streaming_service.format_thinking_step( + step_id=tool_step_id, + title=title, + status="in_progress", + items=items, + ) + + elif event_type == "on_tool_end": + active_tool_depth = max(0, active_tool_depth - 1) + run_id = event.get("run_id", "") + step_id = tool_step_ids.pop(run_id, None) + if step_id and step_id not in completed_step_ids: + completed_step_ids.add(step_id) + title = step_titles.get(step_id, "Done") + yield streaming_service.format_thinking_step( + step_id=step_id, + title=title, + status="complete", + ) + if last_active_step_id == step_id: + last_active_step_id = None + + if current_text_id is not None: + yield streaming_service.format_text_end(current_text_id) + step_event = complete_current_step() + if step_event: + yield step_event + + yield streaming_service.format_finish() + yield streaming_service.format_done() + + except Exception as e: + logger.error(f"Autocomplete agent streaming error: {e}", exc_info=True) + if current_text_id is not None: + yield streaming_service.format_text_end(current_text_id) + yield streaming_service.format_error("Autocomplete failed. Please try again.") + yield streaming_service.format_done() + + +def _describe_tool_call(tool_name: str, tool_input: Any) -> tuple[str, list[str]]: + """Return a human-readable (title, items) for a tool call thinking step.""" + inp = tool_input if isinstance(tool_input, dict) else {} + if tool_name == "ls": + path = inp.get("path", "/") + return "Listing files", [path] + if tool_name == "read_file": + fp = inp.get("file_path", "") + display = fp if len(fp) <= 80 else "…" + fp[-77:] + return "Reading file", [display] + if tool_name == "write_file": + fp = inp.get("file_path", "") + display = fp if len(fp) <= 80 else "…" + fp[-77:] + return "Writing file", [display] + if tool_name == "edit_file": + fp = inp.get("file_path", "") + display = fp if len(fp) <= 80 else "…" + fp[-77:] + return "Editing file", [display] + if tool_name == "glob": + pat = inp.get("pattern", "") + base = inp.get("path", "/") + return "Searching files", [f"{pat} in {base}"] + if tool_name == "grep": + pat = inp.get("pattern", "") + path = inp.get("path", "") + display_pat = pat[:60] + ("…" if len(pat) > 60 else "") + return "Searching content", [f'"{display_pat}"' + (f" in {path}" if path else "")] + return f"Using {tool_name}", [] diff --git a/surfsense_backend/app/services/vision_autocomplete_service.py b/surfsense_backend/app/services/vision_autocomplete_service.py index f24a5c848..7d16c5864 100644 --- a/surfsense_backend/app/services/vision_autocomplete_service.py +++ b/surfsense_backend/app/services/vision_autocomplete_service.py @@ -1,139 +1,40 @@ +"""Vision autocomplete service — agent-based with scoped filesystem. + +Optimized pipeline: +1. Start the SSE stream immediately so the UI shows progress. +2. Derive a KB search query from window_title (no separate LLM call). +3. Run KB filesystem pre-computation and agent graph compilation in PARALLEL. +4. Inject pre-computed KB files as initial state and stream the agent. +""" + import logging from typing import AsyncGenerator -from langchain_core.messages import HumanMessage, SystemMessage +from langchain_core.messages import HumanMessage from sqlalchemy.ext.asyncio import AsyncSession -from app.retriever.chunks_hybrid_search import ChucksHybridSearchRetriever +from app.agents.autocomplete import create_autocomplete_agent, stream_autocomplete_agent from app.services.llm_service import get_vision_llm from app.services.new_streaming_service import VercelStreamingService logger = logging.getLogger(__name__) -KB_TOP_K = 5 -KB_MAX_CHARS = 4000 - -EXTRACT_QUERY_PROMPT = """Look at this screenshot and describe in 1-2 short sentences what the user is working on and what topic they need to write about. Be specific about the subject matter. Output ONLY the description, nothing else.""" - -EXTRACT_QUERY_PROMPT_WITH_APP = """The user is currently in the application "{app_name}" with the window titled "{window_title}". - -Look at this screenshot and describe in 1-2 short sentences what the user is working on and what topic they need to write about. Be specific about the subject matter. Output ONLY the description, nothing else.""" - -VISION_SYSTEM_PROMPT = """You are a smart writing assistant that analyzes the user's screen to draft or complete text. - -You will receive a screenshot of the user's screen. Your job: -1. Analyze the ENTIRE screenshot to understand what the user is working on (email thread, chat conversation, document, code editor, form, etc.). -2. Identify the text area where the user will type. -3. Based on the full visual context, generate the text the user most likely wants to write. - -Key behavior: -- If the text area is EMPTY, draft a full response or message based on what you see on screen (e.g., reply to an email, respond to a chat message, continue a document). -- If the text area already has text, continue it naturally. - -Rules: -- Output ONLY the text to be inserted. No quotes, no explanations, no meta-commentary. -- Be concise but complete — a full thought, not a fragment. -- Match the tone and formality of the surrounding context. -- If the screen shows code, write code. If it shows a casual chat, be casual. If it shows a formal email, be formal. -- Do NOT describe the screenshot or explain your reasoning. -- If you cannot determine what to write, output nothing.""" - -APP_CONTEXT_BLOCK = """ - -The user is currently working in "{app_name}" (window: "{window_title}"). Use this to understand the type of application and adapt your tone and format accordingly.""" - -KB_CONTEXT_BLOCK = """ - -You also have access to the user's knowledge base documents below. Use them to write more accurate, informed, and contextually relevant text. Do NOT cite or reference the documents explicitly — just let the knowledge inform your writing naturally. - - -{kb_context} -""" +PREP_STEP_ID = "autocomplete-prep" -def _build_system_prompt(app_name: str, window_title: str, kb_context: str) -> str: - """Assemble the system prompt from optional context blocks.""" - prompt = VISION_SYSTEM_PROMPT - if app_name: - prompt += APP_CONTEXT_BLOCK.format(app_name=app_name, window_title=window_title) - if kb_context: - prompt += KB_CONTEXT_BLOCK.format(kb_context=kb_context) - return prompt +def _derive_kb_query(app_name: str, window_title: str) -> str: + parts = [p for p in (window_title, app_name) if p] + return " ".join(parts) def _is_vision_unsupported_error(e: Exception) -> bool: - """Check if an exception indicates the model doesn't support vision/images.""" msg = str(e).lower() return "content must be a string" in msg or "does not support image" in msg -async def _extract_query_from_screenshot( - llm, screenshot_data_url: str, - app_name: str = "", window_title: str = "", -) -> str | None: - """Ask the Vision LLM to describe what the user is working on. - - Raises vision-unsupported errors so the caller can return a - friendly message immediately instead of retrying with astream. - """ - if app_name: - prompt_text = EXTRACT_QUERY_PROMPT_WITH_APP.format( - app_name=app_name, window_title=window_title, - ) - else: - prompt_text = EXTRACT_QUERY_PROMPT - - try: - response = await llm.ainvoke([ - HumanMessage(content=[ - {"type": "text", "text": prompt_text}, - {"type": "image_url", "image_url": {"url": screenshot_data_url}}, - ]), - ]) - query = response.content.strip() if hasattr(response, "content") else "" - return query if query else None - except Exception as e: - if _is_vision_unsupported_error(e): - raise - logger.warning(f"Failed to extract query from screenshot: {e}") - return None - - -async def _search_knowledge_base( - session: AsyncSession, search_space_id: int, query: str -) -> str: - """Search the KB and return formatted context string.""" - try: - retriever = ChucksHybridSearchRetriever(session) - results = await retriever.hybrid_search( - query_text=query, - top_k=KB_TOP_K, - search_space_id=search_space_id, - ) - - if not results: - return "" - - parts: list[str] = [] - char_count = 0 - for doc in results: - title = doc.get("document", {}).get("title", "Untitled") - for chunk in doc.get("chunks", []): - content = chunk.get("content", "").strip() - if not content: - continue - entry = f"[{title}]\n{content}" - if char_count + len(entry) > KB_MAX_CHARS: - break - parts.append(entry) - char_count += len(entry) - if char_count >= KB_MAX_CHARS: - break - - return "\n\n---\n\n".join(parts) - except Exception as e: - logger.warning(f"KB search failed, proceeding without context: {e}") - return "" +# --------------------------------------------------------------------------- +# Main entry point +# --------------------------------------------------------------------------- async def stream_vision_autocomplete( @@ -144,13 +45,7 @@ async def stream_vision_autocomplete( app_name: str = "", window_title: str = "", ) -> AsyncGenerator[str, None]: - """Analyze a screenshot with the vision LLM and stream a text completion. - - Pipeline: - 1. Extract a search query from the screenshot (non-streaming) - 2. Search the knowledge base for relevant context - 3. Stream the final completion with screenshot + KB + app context - """ + """Analyze a screenshot with a vision-LLM agent and stream a text completion.""" streaming = VercelStreamingService() vision_error_msg = ( "The selected model does not support vision. " @@ -164,62 +59,89 @@ async def stream_vision_autocomplete( yield streaming.format_done() return - kb_context = "" + # Start SSE stream immediately so the UI has something to show + yield streaming.format_message_start() + + kb_query = _derive_kb_query(app_name, window_title) + + # Show a preparation step while KB search + agent compile run + yield streaming.format_thinking_step( + step_id=PREP_STEP_ID, + title="Searching knowledge base", + status="in_progress", + items=[kb_query] if kb_query else [], + ) + try: - query = await _extract_query_from_screenshot( - llm, screenshot_data_url, app_name=app_name, window_title=window_title, + agent, kb = await create_autocomplete_agent( + llm, + search_space_id=search_space_id, + kb_query=kb_query, + app_name=app_name, + window_title=window_title, ) except Exception as e: - logger.warning(f"Vision autocomplete: selected model does not support vision: {e}") - yield streaming.format_message_start() - yield streaming.format_error(vision_error_msg) + if _is_vision_unsupported_error(e): + logger.warning("Vision autocomplete: model does not support vision: %s", e) + yield streaming.format_error(vision_error_msg) + yield streaming.format_done() + return + logger.error("Failed to create autocomplete agent: %s", e, exc_info=True) + yield streaming.format_error("Autocomplete failed. Please try again.") yield streaming.format_done() return - if query: - kb_context = await _search_knowledge_base(session, search_space_id, query) + has_kb = kb.has_documents + doc_count = len(kb.files) if has_kb else 0 # type: ignore[arg-type] - system_prompt = _build_system_prompt(app_name, window_title, kb_context) + yield streaming.format_thinking_step( + step_id=PREP_STEP_ID, + title="Searching knowledge base", + status="complete", + items=[f"Found {doc_count} document{'s' if doc_count != 1 else ''}"] if kb_query else ["Skipped"], + ) - messages = [ - SystemMessage(content=system_prompt), - HumanMessage(content=[ - { - "type": "text", - "text": "Analyze this screenshot. Understand the full context of what the user is working on, then generate the text they most likely want to write in the active text area.", - }, - { - "type": "image_url", - "image_url": {"url": screenshot_data_url}, - }, - ]), - ] + # Build agent input with pre-computed KB as initial state + if has_kb: + instruction = ( + "Analyze this screenshot, then explore the knowledge base documents " + "listed above — read the chunk index of any document whose title " + "looks relevant and check matched chunks for useful facts. " + "Finally, generate a concise autocomplete for the active text area, " + "enhanced with any relevant KB information you found." + ) + else: + instruction = ( + "Analyze this screenshot and generate a concise autocomplete " + "for the active text area based on what you see." + ) - text_started = False - text_id = "" + user_message = HumanMessage(content=[ + {"type": "text", "text": instruction}, + {"type": "image_url", "image_url": {"url": screenshot_data_url}}, + ]) + + input_data: dict = {"messages": [user_message]} + + if has_kb: + input_data["files"] = kb.files + input_data["messages"] = [kb.ls_ai_msg, kb.ls_tool_msg, user_message] + logger.info("Autocomplete: injected %d KB files into agent initial state", doc_count) + else: + logger.info("Autocomplete: no KB documents found, proceeding with screenshot only") + + # Stream the agent (message_start already sent above) try: - yield streaming.format_message_start() - text_id = streaming.generate_text_id() - yield streaming.format_text_start(text_id) - text_started = True - - async for chunk in llm.astream(messages): - token = chunk.content if hasattr(chunk, "content") else str(chunk) - if token: - yield streaming.format_text_delta(text_id, token) - - yield streaming.format_text_end(text_id) - yield streaming.format_finish() - yield streaming.format_done() - + async for sse in stream_autocomplete_agent( + agent, input_data, streaming, emit_message_start=False, + ): + yield sse except Exception as e: - if text_started: - yield streaming.format_text_end(text_id) - if _is_vision_unsupported_error(e): - logger.warning(f"Vision autocomplete: selected model does not support vision: {e}") + logger.warning("Vision autocomplete: model does not support vision: %s", e) yield streaming.format_error(vision_error_msg) + yield streaming.format_done() else: - logger.error(f"Vision autocomplete streaming error: {e}", exc_info=True) + logger.error("Vision autocomplete streaming error: %s", e, exc_info=True) yield streaming.format_error("Autocomplete failed. Please try again.") - yield streaming.format_done() + yield streaming.format_done() diff --git a/surfsense_web/app/desktop/suggestion/page.tsx b/surfsense_web/app/desktop/suggestion/page.tsx index fb83e2113..42ce025a8 100644 --- a/surfsense_web/app/desktop/suggestion/page.tsx +++ b/surfsense_web/app/desktop/suggestion/page.tsx @@ -10,7 +10,18 @@ type SSEEvent = | { type: "text-end"; id: string } | { type: "start"; messageId: string } | { type: "finish" } - | { type: "error"; errorText: string }; + | { type: "error"; errorText: string } + | { + type: "data-thinking-step"; + data: { id: string; title: string; status: string; items: string[] }; + }; + +interface AgentStep { + id: string; + title: string; + status: string; + items: string[]; +} function friendlyError(raw: string | number): string { if (typeof raw === "number") { @@ -34,11 +45,24 @@ function friendlyError(raw: string | number): string { const AUTO_DISMISS_MS = 3000; +function StepIcon({ status }: { status: string }) { + if (status === "complete") { + return ( + + + + + ); + } + return ; +} + export default function SuggestionPage() { const api = useElectronAPI(); const [suggestion, setSuggestion] = useState(""); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); + const [steps, setSteps] = useState([]); const abortRef = useRef(null); const isDesktop = !!api?.onAutocompleteContext; @@ -66,6 +90,7 @@ export default function SuggestionPage() { setIsLoading(true); setSuggestion(""); setError(null); + setSteps([]); let token = getBearerToken(); if (!token) { @@ -137,6 +162,17 @@ export default function SuggestionPage() { setSuggestion((prev) => prev + parsed.delta); } else if (parsed.type === "error") { setError(friendlyError(parsed.errorText)); + } else if (parsed.type === "data-thinking-step") { + const { id, title, status, items } = parsed.data; + setSteps((prev) => { + const existing = prev.findIndex((s) => s.id === id); + if (existing >= 0) { + const updated = [...prev]; + updated[existing] = { id, title, status, items }; + return updated; + } + return [...prev, { id, title, status, items }]; + }); } } catch { continue; @@ -185,13 +221,33 @@ export default function SuggestionPage() { ); } - if (isLoading && !suggestion) { + const showLoading = isLoading && !suggestion; + + if (showLoading) { return (
-
- - - +
+ {steps.length === 0 && ( +
+ + Preparing… +
+ )} + {steps.length > 0 && ( +
+ {steps.map((step) => ( +
+ + + {step.title} + {step.items.length > 0 && ( + · {step.items[0]} + )} + +
+ ))} +
+ )}
); diff --git a/surfsense_web/app/desktop/suggestion/suggestion.css b/surfsense_web/app/desktop/suggestion/suggestion.css index 62f4d2ea7..d2213fefd 100644 --- a/surfsense_web/app/desktop/suggestion/suggestion.css +++ b/surfsense_web/app/desktop/suggestion/suggestion.css @@ -19,13 +19,21 @@ body:has(.suggestion-body) { } .suggestion-tooltip { + box-sizing: border-box; background: #1e1e1e; border: 1px solid #3c3c3c; border-radius: 8px; padding: 8px 12px; margin: 4px; max-width: 400px; + /* MAX_HEIGHT in suggestion-window.ts is 400px. Subtract 8px for margin + (4px * 2) so the tooltip + margin fits within the Electron window. + box-sizing: border-box ensures padding + border are included. */ + max-height: 392px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); + display: flex; + flex-direction: column; + overflow: hidden; } .suggestion-text { @@ -35,6 +43,26 @@ body:has(.suggestion-body) { margin: 0 0 6px 0; word-wrap: break-word; white-space: pre-wrap; + overflow-y: auto; + flex: 1 1 auto; + min-height: 0; +} + +.suggestion-text::-webkit-scrollbar { + width: 5px; +} + +.suggestion-text::-webkit-scrollbar-track { + background: transparent; +} + +.suggestion-text::-webkit-scrollbar-thumb { + background: #555; + border-radius: 3px; +} + +.suggestion-text::-webkit-scrollbar-thumb:hover { + background: #777; } .suggestion-actions { @@ -43,6 +71,7 @@ body:has(.suggestion-body) { gap: 4px; border-top: 1px solid #2a2a2a; padding-top: 6px; + flex-shrink: 0; } .suggestion-btn { @@ -86,36 +115,77 @@ body:has(.suggestion-body) { font-size: 12px; } -.suggestion-loading { +/* --- Agent activity indicator --- */ + +.agent-activity { display: flex; - gap: 5px; + flex-direction: column; + gap: 4px; + overflow-y: auto; + max-height: 340px; +} + +.activity-initial { + display: flex; + align-items: center; + gap: 8px; padding: 2px 0; - justify-content: center; } -.suggestion-dot { - width: 4px; - height: 4px; +.activity-label { + color: #a1a1aa; + font-size: 12px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.activity-steps { + display: flex; + flex-direction: column; + gap: 3px; +} + +.activity-step { + display: flex; + align-items: center; + gap: 6px; + min-height: 18px; +} + +.step-label { + color: #d4d4d4; + font-size: 12px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.step-detail { + color: #71717a; + font-size: 11px; +} + +/* Spinner (in_progress) */ +.step-spinner { + width: 14px; + height: 14px; + flex-shrink: 0; + border: 1.5px solid #3f3f46; + border-top-color: #a78bfa; border-radius: 50%; - background: #666; - animation: suggestion-pulse 1.2s infinite ease-in-out; + animation: step-spin 0.7s linear infinite; } -.suggestion-dot:nth-child(2) { - animation-delay: 0.15s; +/* Checkmark icon (complete) */ +.step-icon { + width: 14px; + height: 14px; + flex-shrink: 0; } -.suggestion-dot:nth-child(3) { - animation-delay: 0.3s; -} - -@keyframes suggestion-pulse { - 0%, 80%, 100% { - opacity: 0.3; - transform: scale(0.8); - } - 40% { - opacity: 1; - transform: scale(1.1); +@keyframes step-spin { + to { + transform: rotate(360deg); } } diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx index 7d8765399..6c8c619b2 100644 --- a/surfsense_web/components/assistant-ui/thread.tsx +++ b/surfsense_web/components/assistant-ui/thread.tsx @@ -92,15 +92,7 @@ import { useMediaQuery } from "@/hooks/use-media-query"; import { useElectronAPI } from "@/hooks/use-platform"; import { cn } from "@/lib/utils"; -/** Placeholder texts that cycle in new chats when input is empty */ -const CYCLING_PLACEHOLDERS = [ - "Ask SurfSense anything or @mention docs", - "Generate a podcast from my vacation ideas in Notion", - "Sum up last week's meeting notes from Drive in a bulleted list", - "Give me a brief overview of the most urgent tickets in Jira and Linear", - "Briefly, what are today's top ten important emails and calendar events?", - "Check if this week's Slack messages reference any GitHub issues", -]; +const COMPOSER_PLACEHOLDER = "Ask anything · Type / for prompts · Type @ to mention docs"; export const Thread: FC = () => { return ; @@ -380,29 +372,7 @@ const Composer: FC = () => { const isThreadEmpty = useAuiState(({ thread }) => thread.isEmpty); const isThreadRunning = useAuiState(({ thread }) => thread.isRunning); - // Cycling placeholder state - only cycles in new chats - const [placeholderIndex, setPlaceholderIndex] = useState(0); - - // Cycle through placeholders every 4 seconds when thread is empty (new chat) - useEffect(() => { - // Only cycle when thread is empty (new chat) - if (!isThreadEmpty) { - // Reset to first placeholder when chat becomes active - setPlaceholderIndex(0); - return; - } - - const intervalId = setInterval(() => { - setPlaceholderIndex((prev) => (prev + 1) % CYCLING_PLACEHOLDERS.length); - }, 6000); - - return () => clearInterval(intervalId); - }, [isThreadEmpty]); - - // Compute current placeholder - only cycle in new chats - const currentPlaceholder = isThreadEmpty - ? CYCLING_PLACEHOLDERS[placeholderIndex] - : CYCLING_PLACEHOLDERS[0]; + const currentPlaceholder = COMPOSER_PLACEHOLDER; // Live collaboration state const { data: currentUser } = useAtomValue(currentUserAtom); From 91ea293fa214bd1290f14c0f125a6ca66c4a875a Mon Sep 17 00:00:00 2001 From: "DESKTOP-RTLN3BA\\$punk" Date: Tue, 7 Apr 2026 03:10:06 -0700 Subject: [PATCH 07/13] chore: linting --- .../agents/autocomplete/autocomplete_agent.py | 27 +++- .../services/vision_autocomplete_service.py | 27 +++- .../components/DesktopContent.tsx | 36 ++--- surfsense_web/app/dashboard/layout.tsx | 2 +- surfsense_web/app/desktop/login/page.tsx | 54 ++----- .../app/desktop/permissions/page.tsx | 5 +- surfsense_web/app/desktop/suggestion/page.tsx | 17 +- .../app/desktop/suggestion/suggestion.css | 148 +++++++++--------- .../components/desktop/shortcut-recorder.tsx | 16 +- .../components/homepage/hero-section.tsx | 139 ++++++++-------- .../layout/ui/sidebar/DocumentsSidebar.tsx | 66 ++++---- .../components/sources/DocumentUploadTab.tsx | 2 +- surfsense_web/contexts/platform-context.tsx | 6 +- surfsense_web/types/window.d.ts | 4 +- 14 files changed, 285 insertions(+), 264 deletions(-) diff --git a/surfsense_backend/app/agents/autocomplete/autocomplete_agent.py b/surfsense_backend/app/agents/autocomplete/autocomplete_agent.py index 928a133cc..c6a071b0f 100644 --- a/surfsense_backend/app/agents/autocomplete/autocomplete_agent.py +++ b/surfsense_backend/app/agents/autocomplete/autocomplete_agent.py @@ -16,7 +16,8 @@ from __future__ import annotations import asyncio import logging import uuid -from typing import Any, AsyncGenerator +from collections.abc import AsyncGenerator +from typing import Any from deepagents.graph import BASE_AGENT_PROMPT from deepagents.middleware.patch_tool_calls import PatchToolCallsMiddleware @@ -122,6 +123,7 @@ def _build_autocomplete_system_prompt(app_name: str, window_title: str) -> str: class _KBResult: """Container for pre-computed KB filesystem results.""" + __slots__ = ("files", "ls_ai_msg", "ls_tool_msg") def __init__( @@ -171,13 +173,16 @@ async def precompute_kb_filesystem( return _KBResult() doc_paths = [ - p for p, v in new_files.items() + p + for p, v in new_files.items() if p.startswith("/documents/") and v is not None ] tool_call_id = f"auto_ls_{uuid.uuid4().hex[:12]}" ai_msg = AIMessage( content="", - tool_calls=[{"name": "ls", "args": {"path": "/documents"}, "id": tool_call_id}], + tool_calls=[ + {"name": "ls", "args": {"path": "/documents"}, "id": tool_call_id} + ], ) tool_msg = ToolMessage( content=str(doc_paths) if doc_paths else "No documents found.", @@ -186,7 +191,9 @@ async def precompute_kb_filesystem( return _KBResult(files=new_files, ls_ai_msg=ai_msg, ls_tool_msg=tool_msg) except Exception: - logger.warning("KB pre-computation failed, proceeding without KB", exc_info=True) + logger.warning( + "KB pre-computation failed, proceeding without KB", exc_info=True + ) return _KBResult() @@ -320,7 +327,9 @@ async def stream_autocomplete_agent( ) try: - async for event in agent.astream_events(input_data, config=config, version="v2"): + async for event in agent.astream_events( + input_data, config=config, version="v2" + ): event_type = event.get("event", "") if event_type == "on_chat_model_stream": @@ -338,7 +347,9 @@ async def stream_autocomplete_agent( yield step_event current_text_id = streaming_service.generate_text_id() yield streaming_service.format_text_start(current_text_id) - yield streaming_service.format_text_delta(current_text_id, content) + yield streaming_service.format_text_delta( + current_text_id, content + ) elif event_type == "on_tool_start": active_tool_depth += 1 @@ -425,5 +436,7 @@ def _describe_tool_call(tool_name: str, tool_input: Any) -> tuple[str, list[str] pat = inp.get("pattern", "") path = inp.get("path", "") display_pat = pat[:60] + ("…" if len(pat) > 60 else "") - return "Searching content", [f'"{display_pat}"' + (f" in {path}" if path else "")] + return "Searching content", [ + f'"{display_pat}"' + (f" in {path}" if path else "") + ] return f"Using {tool_name}", [] diff --git a/surfsense_backend/app/services/vision_autocomplete_service.py b/surfsense_backend/app/services/vision_autocomplete_service.py index 2c2cd65d2..c28962b31 100644 --- a/surfsense_backend/app/services/vision_autocomplete_service.py +++ b/surfsense_backend/app/services/vision_autocomplete_service.py @@ -98,7 +98,9 @@ async def stream_vision_autocomplete( step_id=PREP_STEP_ID, title="Searching knowledge base", status="complete", - items=[f"Found {doc_count} document{'s' if doc_count != 1 else ''}"] if kb_query else ["Skipped"], + items=[f"Found {doc_count} document{'s' if doc_count != 1 else ''}"] + if kb_query + else ["Skipped"], ) # Build agent input with pre-computed KB as initial state @@ -116,24 +118,33 @@ async def stream_vision_autocomplete( "for the active text area based on what you see." ) - user_message = HumanMessage(content=[ - {"type": "text", "text": instruction}, - {"type": "image_url", "image_url": {"url": screenshot_data_url}}, - ]) + user_message = HumanMessage( + content=[ + {"type": "text", "text": instruction}, + {"type": "image_url", "image_url": {"url": screenshot_data_url}}, + ] + ) input_data: dict = {"messages": [user_message]} if has_kb: input_data["files"] = kb.files input_data["messages"] = [kb.ls_ai_msg, kb.ls_tool_msg, user_message] - logger.info("Autocomplete: injected %d KB files into agent initial state", doc_count) + logger.info( + "Autocomplete: injected %d KB files into agent initial state", doc_count + ) else: - logger.info("Autocomplete: no KB documents found, proceeding with screenshot only") + logger.info( + "Autocomplete: no KB documents found, proceeding with screenshot only" + ) # Stream the agent (message_start already sent above) try: async for sse in stream_autocomplete_agent( - agent, input_data, streaming, emit_message_start=False, + agent, + input_data, + streaming, + emit_message_start=False, ): yield sse except Exception as e: diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx index 07b746a19..a2f9da0f8 100644 --- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx +++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx @@ -3,10 +3,7 @@ import { Clipboard, Sparkles } from "lucide-react"; import { useCallback, useEffect, useState } from "react"; import { toast } from "sonner"; -import { - DEFAULT_SHORTCUTS, - ShortcutRecorder, -} from "@/components/desktop/shortcut-recorder"; +import { DEFAULT_SHORTCUTS, ShortcutRecorder } from "@/components/desktop/shortcut-recorder"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Label } from "@/components/ui/label"; import { Spinner } from "@/components/ui/spinner"; @@ -29,22 +26,23 @@ export function DesktopContent() { let mounted = true; - Promise.all([ - api.getAutocompleteEnabled(), - api.getShortcuts?.() ?? Promise.resolve(null), - ]).then(([autoEnabled, config]) => { - if (!mounted) return; - setEnabled(autoEnabled); - if (config) setShortcuts(config); - setLoading(false); - setShortcutsLoaded(true); - }).catch(() => { - if (!mounted) return; - setLoading(false); - setShortcutsLoaded(true); - }); + Promise.all([api.getAutocompleteEnabled(), api.getShortcuts?.() ?? Promise.resolve(null)]) + .then(([autoEnabled, config]) => { + if (!mounted) return; + setEnabled(autoEnabled); + if (config) setShortcuts(config); + setLoading(false); + setShortcutsLoaded(true); + }) + .catch(() => { + if (!mounted) return; + setLoading(false); + setShortcutsLoaded(true); + }); - return () => { mounted = false; }; + return () => { + mounted = false; + }; }, [api]); if (!api) { diff --git a/surfsense_web/app/dashboard/layout.tsx b/surfsense_web/app/dashboard/layout.tsx index 25bea5467..1f5481b15 100644 --- a/surfsense_web/app/dashboard/layout.tsx +++ b/surfsense_web/app/dashboard/layout.tsx @@ -3,7 +3,7 @@ import { useEffect, useState } from "react"; import { USER_QUERY_KEY } from "@/atoms/user/user-query.atoms"; import { useGlobalLoadingEffect } from "@/hooks/use-global-loading"; -import { getBearerToken, ensureTokensFromElectron, redirectToLogin } from "@/lib/auth-utils"; +import { ensureTokensFromElectron, getBearerToken, redirectToLogin } from "@/lib/auth-utils"; import { queryClient } from "@/lib/query-client/client"; interface DashboardLayoutProps { diff --git a/surfsense_web/app/desktop/login/page.tsx b/surfsense_web/app/desktop/login/page.tsx index 529577b59..c81e284ba 100644 --- a/surfsense_web/app/desktop/login/page.tsx +++ b/surfsense_web/app/desktop/login/page.tsx @@ -2,30 +2,15 @@ import { IconBrandGoogleFilled } from "@tabler/icons-react"; import { useAtom } from "jotai"; -import { - Eye, - EyeOff, - Keyboard, - Clipboard, - Sparkles, -} from "lucide-react"; +import { Clipboard, Eye, EyeOff, Keyboard, Sparkles } from "lucide-react"; import Image from "next/image"; import { useRouter } from "next/navigation"; import { useCallback, useEffect, useState } from "react"; import { toast } from "sonner"; import { loginMutationAtom } from "@/atoms/auth/auth-mutation.atoms"; -import { - DEFAULT_SHORTCUTS, - ShortcutRecorder, -} from "@/components/desktop/shortcut-recorder"; +import { DEFAULT_SHORTCUTS, ShortcutRecorder } from "@/components/desktop/shortcut-recorder"; import { Button } from "@/components/ui/button"; -import { - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from "@/components/ui/card"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Separator } from "@/components/ui/separator"; @@ -38,8 +23,7 @@ const isGoogleAuth = AUTH_TYPE === "GOOGLE"; export default function DesktopLoginPage() { const router = useRouter(); const api = useElectronAPI(); - const [{ mutateAsync: login, isPending: isLoggingIn }] = - useAtom(loginMutationAtom); + const [{ mutateAsync: login, isPending: isLoggingIn }] = useAtom(loginMutationAtom); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); @@ -54,10 +38,13 @@ export default function DesktopLoginPage() { setShortcutsLoaded(true); return; } - api.getShortcuts().then((config) => { - if (config) setShortcuts(config); - setShortcutsLoaded(true); - }).catch(() => setShortcutsLoaded(true)); + api + .getShortcuts() + .then((config) => { + if (config) setShortcuts(config); + setShortcutsLoaded(true); + }) + .catch(() => setShortcutsLoaded(true)); }, [api]); const updateShortcut = useCallback( @@ -118,8 +105,7 @@ export default function DesktopLoginPage() {
@@ -135,9 +121,7 @@ export default function DesktopLoginPage() { priority /> Welcome to SurfSense Desktop App - - Configure your shortcuts, then sign in to get started. - + Configure your shortcuts, then sign in to get started. @@ -181,11 +165,7 @@ export default function DesktopLoginPage() { {/* ---- Auth Section (second) ---- */} {isGoogleAuth ? ( - @@ -230,11 +210,7 @@ export default function DesktopLoginPage() { className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground" tabIndex={-1} > - {showPassword ? ( - - ) : ( - - )} + {showPassword ? : }
diff --git a/surfsense_web/app/desktop/permissions/page.tsx b/surfsense_web/app/desktop/permissions/page.tsx index b636fcd7c..a2fadc8ff 100644 --- a/surfsense_web/app/desktop/permissions/page.tsx +++ b/surfsense_web/app/desktop/permissions/page.tsx @@ -80,7 +80,9 @@ export default function DesktopPermissionsPage() { poll(); interval = setInterval(poll, 2000); - return () => { if (interval) clearInterval(interval); }; + return () => { + if (interval) clearInterval(interval); + }; }, [api]); if (!api) { @@ -204,6 +206,7 @@ export default function DesktopPermissionsPage() { Grant permissions to continue

{label}

-

- {description} -

+

{description}

@@ -155,9 +147,7 @@ export function ShortcutRecorder({ )} > {recording ? ( - - Press keys... - + Press keys... ) : ( )} diff --git a/surfsense_web/components/homepage/hero-section.tsx b/surfsense_web/components/homepage/hero-section.tsx index 60f293005..c8dde97ee 100644 --- a/surfsense_web/components/homepage/hero-section.tsx +++ b/surfsense_web/components/homepage/hero-section.tsx @@ -1,21 +1,14 @@ "use client"; -import { AnimatePresence, motion } from "motion/react"; import { Monitor } from "lucide-react"; +import { AnimatePresence, motion } from "motion/react"; import Link from "next/link"; -import React, { useCallback, useEffect, useRef, useState, memo } from "react"; +import React, { memo, useCallback, useEffect, useRef, useState } from "react"; import Balancer from "react-wrap-balancer"; +import { ExpandedMediaOverlay, useExpandedMedia } from "@/components/ui/expanded-gif-overlay"; +import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { AUTH_TYPE, BACKEND_URL } from "@/lib/env-config"; import { trackLoginAttempt } from "@/lib/posthog/events"; import { cn } from "@/lib/utils"; -import { - ExpandedMediaOverlay, - useExpandedMedia, -} from "@/components/ui/expanded-gif-overlay"; -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from "@/components/ui/tooltip"; const GoogleLogo = ({ className }: { className?: string }) => (

NotebookLM for Teams @@ -128,10 +117,11 @@ export function HeroSection() {

- An open source, privacy focused alternative to NotebookLM for teams with no data limits. + An open source, privacy focused alternative to NotebookLM for teams with no data + limits.

@@ -194,33 +184,34 @@ const BrowserWindow = () => {
{TAB_ITEMS.map((item, index) => ( - + {item.featured && ( + + + + + + + Desktop app only + + )} + {index !== TAB_ITEMS.length - 1 && (
)} @@ -263,13 +254,13 @@ const BrowserWindow = () => {

- {/* biome-ignore lint/a11y/useKeyWithClickEvents: wrapper for video expand */} -
-
+
@@ -277,11 +268,7 @@ const BrowserWindow = () => { {expanded && ( - + )} @@ -297,7 +284,7 @@ const TabVideo = memo(function TabVideo({ src }: { src: string }) { const video = videoRef.current; if (!video) return; video.currentTime = 0; - video.play().catch(() => { }); + video.play().catch(() => {}); }, [src]); const handleCanPlay = useCallback(() => { @@ -324,8 +311,7 @@ const TabVideo = memo(function TabVideo({ src }: { src: string }) { ); }); -const GITHUB_RELEASES_URL = - "https://github.com/MODSetter/SurfSense/releases/latest"; +const GITHUB_RELEASES_URL = "https://github.com/MODSetter/SurfSense/releases/latest"; const DownloadApp = memo(function DownloadApp() { return ( @@ -340,7 +326,16 @@ const DownloadApp = memo(function DownloadApp() { rel="noopener noreferrer" className="flex items-center gap-2 rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800" > - + @@ -353,7 +348,16 @@ const DownloadApp = memo(function DownloadApp() { rel="noopener noreferrer" className="flex items-center gap-2 rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800" > - + @@ -366,7 +370,16 @@ const DownloadApp = memo(function DownloadApp() { rel="noopener noreferrer" className="flex items-center gap-2 rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800" > - + diff --git a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx index 35489fe32..6de235d17 100644 --- a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx +++ b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx @@ -302,24 +302,27 @@ export function DocumentsSidebar({ [searchSpaceId, electronAPI] ); - const handleStopWatching = useCallback(async (folder: FolderDisplay) => { - if (!electronAPI) return; + const handleStopWatching = useCallback( + async (folder: FolderDisplay) => { + if (!electronAPI) return; - const watchedFolders = await electronAPI.getWatchedFolders(); - const matched = watchedFolders.find((wf) => wf.rootFolderId === folder.id); - if (!matched) { - toast.error("This folder is not being watched"); - return; - } + const watchedFolders = await electronAPI.getWatchedFolders(); + const matched = watchedFolders.find((wf) => wf.rootFolderId === folder.id); + if (!matched) { + toast.error("This folder is not being watched"); + return; + } - await electronAPI.removeWatchedFolder(matched.path); - try { - await foldersApiService.stopWatching(folder.id); - } catch (err) { - console.error("[DocumentsSidebar] Failed to clear watched metadata:", err); - } - toast.success(`Stopped watching: ${matched.name}`); - }, [electronAPI]); + await electronAPI.removeWatchedFolder(matched.path); + try { + await foldersApiService.stopWatching(folder.id); + } catch (err) { + console.error("[DocumentsSidebar] Failed to clear watched metadata:", err); + } + toast.success(`Stopped watching: ${matched.name}`); + }, + [electronAPI] + ); const handleRenameFolder = useCallback(async (folder: FolderDisplay, newName: string) => { try { @@ -330,22 +333,25 @@ export function DocumentsSidebar({ } }, []); - const handleDeleteFolder = useCallback(async (folder: FolderDisplay) => { - if (!confirm(`Delete folder "${folder.name}" and all its contents?`)) return; - try { - if (electronAPI) { - const watchedFolders = await electronAPI.getWatchedFolders(); - const matched = watchedFolders.find((wf) => wf.rootFolderId === folder.id); - if (matched) { - await electronAPI.removeWatchedFolder(matched.path); + const handleDeleteFolder = useCallback( + async (folder: FolderDisplay) => { + if (!confirm(`Delete folder "${folder.name}" and all its contents?`)) return; + try { + if (electronAPI) { + const watchedFolders = await electronAPI.getWatchedFolders(); + const matched = watchedFolders.find((wf) => wf.rootFolderId === folder.id); + if (matched) { + await electronAPI.removeWatchedFolder(matched.path); + } } + await foldersApiService.deleteFolder(folder.id); + toast.success("Folder deleted"); + } catch (e: unknown) { + toast.error((e as Error)?.message || "Failed to delete folder"); } - await foldersApiService.deleteFolder(folder.id); - toast.success("Folder deleted"); - } catch (e: unknown) { - toast.error((e as Error)?.message || "Failed to delete folder"); - } - }, [electronAPI]); + }, + [electronAPI] + ); const handleMoveFolder = useCallback( (folder: FolderDisplay) => { diff --git a/surfsense_web/components/sources/DocumentUploadTab.tsx b/surfsense_web/components/sources/DocumentUploadTab.tsx index 28e160261..76af48c45 100644 --- a/surfsense_web/components/sources/DocumentUploadTab.tsx +++ b/surfsense_web/components/sources/DocumentUploadTab.tsx @@ -25,8 +25,8 @@ import { import { Progress } from "@/components/ui/progress"; import { Spinner } from "@/components/ui/spinner"; import { Switch } from "@/components/ui/switch"; -import { documentsApiService } from "@/lib/apis/documents-api.service"; import { useElectronAPI } from "@/hooks/use-platform"; +import { documentsApiService } from "@/lib/apis/documents-api.service"; import { trackDocumentUploadFailure, trackDocumentUploadStarted, diff --git a/surfsense_web/contexts/platform-context.tsx b/surfsense_web/contexts/platform-context.tsx index bb3e3800d..578901214 100644 --- a/surfsense_web/contexts/platform-context.tsx +++ b/surfsense_web/contexts/platform-context.tsx @@ -1,6 +1,6 @@ "use client"; -import { createContext, useEffect, useState, type ReactNode } from "react"; +import { createContext, type ReactNode, useEffect, useState } from "react"; export interface PlatformContextValue { isDesktop: boolean; @@ -25,7 +25,5 @@ export function PlatformProvider({ children }: { children: ReactNode }) { setValue({ isDesktop, isWeb: !isDesktop, electronAPI: api }); }, []); - return ( - {children} - ); + return {children}; } diff --git a/surfsense_web/types/window.d.ts b/surfsense_web/types/window.d.ts index 961ad9066..3f228066a 100644 --- a/surfsense_web/types/window.d.ts +++ b/surfsense_web/types/window.d.ts @@ -90,7 +90,9 @@ interface ElectronAPI { setAuthTokens: (bearer: string, refresh: string) => Promise; // Keyboard shortcut configuration getShortcuts: () => Promise<{ quickAsk: string; autocomplete: string }>; - setShortcuts: (config: Partial<{ quickAsk: string; autocomplete: string }>) => Promise<{ quickAsk: string; autocomplete: string }>; + setShortcuts: ( + config: Partial<{ quickAsk: string; autocomplete: string }> + ) => Promise<{ quickAsk: string; autocomplete: string }>; } declare global { From e574b5ec4a5fcc46b4ef6104138fe078ab027b3b Mon Sep 17 00:00:00 2001 From: "DESKTOP-RTLN3BA\\$punk" Date: Tue, 7 Apr 2026 03:17:10 -0700 Subject: [PATCH 08/13] refactor: remove prompt picker display on quick ask text retrieval - Eliminated the automatic display of the prompt picker when quick ask text is retrieved from the Electron API, streamlining the user experience. --- surfsense_web/components/assistant-ui/thread.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx index 6c8c619b2..e0086cd66 100644 --- a/surfsense_web/components/assistant-ui/thread.tsx +++ b/surfsense_web/components/assistant-ui/thread.tsx @@ -364,7 +364,6 @@ const Composer: FC = () => { electronAPI.getQuickAskText().then((text) => { if (text) { setClipboardInitialText(text); - setShowPromptPicker(true); } }); }, [electronAPI]); From 27e9e8d8736e0b71d4082010f125e4b477e81b1d Mon Sep 17 00:00:00 2001 From: "DESKTOP-RTLN3BA\\$punk" Date: Tue, 7 Apr 2026 03:42:46 -0700 Subject: [PATCH 09/13] feat: add general assist feature and enhance shortcut management - Introduced a new "General Assist" shortcut, allowing users to open SurfSense from anywhere. - Updated shortcut management to include the new general assist functionality in both the desktop and web applications. - Enhanced the UI to reflect changes in shortcut labels and descriptions for better clarity. - Improved the Electron API to support the new shortcut configuration. --- surfsense_desktop/electron-builder.yml | 3 + surfsense_desktop/src/ipc/handlers.ts | 2 + surfsense_desktop/src/main.ts | 34 ++++++-- surfsense_desktop/src/modules/quick-ask.ts | 2 +- surfsense_desktop/src/modules/shortcuts.ts | 2 + surfsense_desktop/src/modules/tray.ts | 77 +++++++++++++++++++ .../components/DesktopContent.tsx | 44 +++++++---- surfsense_web/app/desktop/login/page.tsx | 21 +++-- .../components/desktop/shortcut-recorder.tsx | 1 + surfsense_web/types/window.d.ts | 6 +- 10 files changed, 159 insertions(+), 33 deletions(-) create mode 100644 surfsense_desktop/src/modules/tray.ts diff --git a/surfsense_desktop/electron-builder.yml b/surfsense_desktop/electron-builder.yml index 4d6f0b283..2c46c827a 100644 --- a/surfsense_desktop/electron-builder.yml +++ b/surfsense_desktop/electron-builder.yml @@ -19,6 +19,9 @@ files: - "!scripts" - "!release" extraResources: + - from: assets/ + to: assets/ + filter: ["*.ico", "*.png", "*.icns"] - from: ../surfsense_web/.next/standalone/surfsense_web/ to: standalone/ filter: diff --git a/surfsense_desktop/src/ipc/handlers.ts b/surfsense_desktop/src/ipc/handlers.ts index 7872e7a42..a583e5afc 100644 --- a/surfsense_desktop/src/ipc/handlers.ts +++ b/surfsense_desktop/src/ipc/handlers.ts @@ -23,6 +23,7 @@ import { import { getShortcuts, setShortcuts, type ShortcutConfig } from '../modules/shortcuts'; import { reregisterQuickAsk } from '../modules/quick-ask'; import { reregisterAutocomplete } from '../modules/autocomplete'; +import { reregisterGeneralAssist } from '../modules/tray'; let authTokens: { bearer: string; refresh: string } | null = null; @@ -107,6 +108,7 @@ export function registerIpcHandlers(): void { ipcMain.handle(IPC_CHANNELS.SET_SHORTCUTS, async (_event, config: Partial) => { const updated = await setShortcuts(config); + if (config.generalAssist) await reregisterGeneralAssist(); if (config.quickAsk) await reregisterQuickAsk(); if (config.autocomplete) await reregisterAutocomplete(); return updated; diff --git a/surfsense_desktop/src/main.ts b/surfsense_desktop/src/main.ts index 9eae8a4db..95b0359c8 100644 --- a/surfsense_desktop/src/main.ts +++ b/surfsense_desktop/src/main.ts @@ -1,7 +1,9 @@ import { app, BrowserWindow } from 'electron'; + +let isQuitting = false; import { registerGlobalErrorHandlers, showErrorDialog } from './modules/errors'; import { startNextServer } from './modules/server'; -import { createMainWindow } from './modules/window'; +import { createMainWindow, getMainWindow } from './modules/window'; import { setupDeepLinks, handlePendingDeepLink } from './modules/deep-links'; import { setupAutoUpdater } from './modules/auto-updater'; import { setupMenu } from './modules/menu'; @@ -9,6 +11,7 @@ import { registerQuickAsk, unregisterQuickAsk } from './modules/quick-ask'; import { registerAutocomplete, unregisterAutocomplete } from './modules/autocomplete'; import { registerFolderWatcher, unregisterFolderWatcher } from './modules/folder-watcher'; import { registerIpcHandlers } from './ipc/handlers'; +import { createTray, destroyTray } from './modules/tray'; registerGlobalErrorHandlers(); @@ -28,7 +31,18 @@ app.whenReady().then(async () => { return; } - createMainWindow('/dashboard'); + await createTray(); + + const win = createMainWindow('/dashboard'); + + // Minimize to tray instead of closing the app + win.on('close', (e) => { + if (!isQuitting) { + e.preventDefault(); + win.hide(); + } + }); + await registerQuickAsk(); await registerAutocomplete(); registerFolderWatcher(); @@ -37,20 +51,28 @@ app.whenReady().then(async () => { handlePendingDeepLink(); app.on('activate', () => { - if (BrowserWindow.getAllWindows().length === 0) { + const mw = getMainWindow(); + if (!mw || mw.isDestroyed()) { createMainWindow('/dashboard'); + } else { + mw.show(); + mw.focus(); } }); }); +// Keep running in the background — the tray "Quit" calls app.exit() app.on('window-all-closed', () => { - if (process.platform !== 'darwin') { - app.quit(); - } + // Do nothing: the app stays alive in the tray +}); + +app.on('before-quit', () => { + isQuitting = true; }); app.on('will-quit', () => { unregisterQuickAsk(); unregisterAutocomplete(); unregisterFolderWatcher(); + destroyTray(); }); diff --git a/surfsense_desktop/src/modules/quick-ask.ts b/surfsense_desktop/src/modules/quick-ask.ts index a015bfabf..224444be6 100644 --- a/surfsense_desktop/src/modules/quick-ask.ts +++ b/surfsense_desktop/src/modules/quick-ask.ts @@ -114,7 +114,7 @@ async function quickAskHandler(): Promise { const text = selected || savedClipboard.trim(); sourceApp = getFrontmostApp(); - console.log('[quick-ask] Source app:', sourceApp, '| Opening Quick Ask with', text.length, 'chars', selected ? '(selected)' : text ? '(clipboard fallback)' : '(empty)'); + console.log('[quick-ask] Source app:', sourceApp, '| Opening Quick Assist with', text.length, 'chars', selected ? '(selected)' : text ? '(clipboard fallback)' : '(empty)'); openQuickAsk(text); } diff --git a/surfsense_desktop/src/modules/shortcuts.ts b/surfsense_desktop/src/modules/shortcuts.ts index 8173b96c1..6948a005e 100644 --- a/surfsense_desktop/src/modules/shortcuts.ts +++ b/surfsense_desktop/src/modules/shortcuts.ts @@ -1,9 +1,11 @@ export interface ShortcutConfig { + generalAssist: string; quickAsk: string; autocomplete: string; } const DEFAULTS: ShortcutConfig = { + generalAssist: 'CommandOrControl+Shift+S', quickAsk: 'CommandOrControl+Alt+S', autocomplete: 'CommandOrControl+Shift+Space', }; diff --git a/surfsense_desktop/src/modules/tray.ts b/surfsense_desktop/src/modules/tray.ts new file mode 100644 index 000000000..1749145a1 --- /dev/null +++ b/surfsense_desktop/src/modules/tray.ts @@ -0,0 +1,77 @@ +import { app, globalShortcut, Menu, nativeImage, Tray } from 'electron'; +import path from 'path'; +import { getMainWindow, createMainWindow } from './window'; +import { getShortcuts } from './shortcuts'; + +let tray: Tray | null = null; +let currentShortcut: string | null = null; + +function getTrayIcon(): nativeImage { + const iconName = process.platform === 'win32' ? 'icon.ico' : 'icon.png'; + const iconPath = app.isPackaged + ? path.join(process.resourcesPath, 'assets', iconName) + : path.join(__dirname, '..', 'assets', iconName); + const img = nativeImage.createFromPath(iconPath); + return img.resize({ width: 16, height: 16 }); +} + +function showMainWindow(): void { + let win = getMainWindow(); + if (!win || win.isDestroyed()) { + win = createMainWindow('/dashboard'); + } else { + win.show(); + win.focus(); + } +} + +function registerShortcut(accelerator: string): void { + if (currentShortcut) { + globalShortcut.unregister(currentShortcut); + currentShortcut = null; + } + if (!accelerator) return; + try { + const ok = globalShortcut.register(accelerator, showMainWindow); + if (ok) { + currentShortcut = accelerator; + } else { + console.warn(`[tray] Failed to register General Assist shortcut: ${accelerator}`); + } + } catch (err) { + console.error(`[tray] Error registering General Assist shortcut:`, err); + } +} + +export async function createTray(): Promise { + if (tray) return; + + tray = new Tray(getTrayIcon()); + tray.setToolTip('SurfSense'); + + const contextMenu = Menu.buildFromTemplate([ + { label: 'Open SurfSense', click: showMainWindow }, + { type: 'separator' }, + { label: 'Quit', click: () => { app.exit(0); } }, + ]); + + tray.setContextMenu(contextMenu); + tray.on('double-click', showMainWindow); + + const shortcuts = await getShortcuts(); + registerShortcut(shortcuts.generalAssist); +} + +export async function reregisterGeneralAssist(): Promise { + const shortcuts = await getShortcuts(); + registerShortcut(shortcuts.generalAssist); +} + +export function destroyTray(): void { + if (currentShortcut) { + globalShortcut.unregister(currentShortcut); + currentShortcut = null; + } + tray?.destroy(); + tray = null; +} diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx index a2f9da0f8..eaf015740 100644 --- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx +++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx @@ -1,12 +1,13 @@ "use client"; -import { Clipboard, Sparkles } from "lucide-react"; +import { AppWindow, Clipboard, Sparkles } from "lucide-react"; import { useCallback, useEffect, useState } from "react"; import { toast } from "sonner"; import { DEFAULT_SHORTCUTS, ShortcutRecorder } from "@/components/desktop/shortcut-recorder"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Label } from "@/components/ui/label"; import { Spinner } from "@/components/ui/spinner"; +import { Switch } from "@/components/ui/switch"; import { useElectronAPI } from "@/hooks/use-platform"; export function DesktopContent() { @@ -68,7 +69,7 @@ export function DesktopContent() { await api.setAutocompleteEnabled(checked); }; - const updateShortcut = (key: "quickAsk" | "autocomplete", accelerator: string) => { + const updateShortcut = (key: "generalAssist" | "quickAsk" | "autocomplete", accelerator: string) => { setShortcuts((prev) => { const updated = { ...prev, [key]: accelerator }; api.setShortcuts?.({ [key]: accelerator }).catch(() => { @@ -79,7 +80,7 @@ export function DesktopContent() { toast.success("Shortcut updated"); }; - const resetShortcut = (key: "quickAsk" | "autocomplete") => { + const resetShortcut = (key: "generalAssist" | "quickAsk" | "autocomplete") => { updateShortcut(key, DEFAULT_SHORTCUTS[key]); }; @@ -95,23 +96,32 @@ export function DesktopContent() { {shortcutsLoaded ? ( -
- updateShortcut("quickAsk", accel)} - onReset={() => resetShortcut("quickAsk")} - defaultValue={DEFAULT_SHORTCUTS.quickAsk} - label="Quick Ask" +
+ updateShortcut("generalAssist", accel)} + onReset={() => resetShortcut("generalAssist")} + defaultValue={DEFAULT_SHORTCUTS.generalAssist} + label="General Assist" + description="Open SurfSense from anywhere" + icon={AppWindow} + /> + updateShortcut("quickAsk", accel)} + onReset={() => resetShortcut("quickAsk")} + defaultValue={DEFAULT_SHORTCUTS.quickAsk} + label="Quick Assist" description="Copy selected text and ask AI about it" - icon={Clipboard} - /> + icon={Clipboard} + /> updateShortcut("autocomplete", accel)} onReset={() => resetShortcut("autocomplete")} defaultValue={DEFAULT_SHORTCUTS.autocomplete} - label="Autocomplete" - description="Get AI writing suggestions from a screenshot" + label="Extreme Assist" + description="AI writing powered by your screen and knowledge base" icon={Sparkles} />

@@ -126,10 +136,10 @@ export function DesktopContent() { - {/* Autocomplete Toggle */} + {/* Extreme Assist Toggle */} - Autocomplete + Extreme Assist Get inline writing suggestions powered by your knowledge base as you type in any app. @@ -138,7 +148,7 @@ export function DesktopContent() {

Show suggestions while typing in other applications. diff --git a/surfsense_web/app/desktop/login/page.tsx b/surfsense_web/app/desktop/login/page.tsx index c81e284ba..f442b5d26 100644 --- a/surfsense_web/app/desktop/login/page.tsx +++ b/surfsense_web/app/desktop/login/page.tsx @@ -2,7 +2,7 @@ import { IconBrandGoogleFilled } from "@tabler/icons-react"; import { useAtom } from "jotai"; -import { Clipboard, Eye, EyeOff, Keyboard, Sparkles } from "lucide-react"; +import { AppWindow, Clipboard, Eye, EyeOff, Keyboard, Sparkles } from "lucide-react"; import Image from "next/image"; import { useRouter } from "next/navigation"; import { useCallback, useEffect, useState } from "react"; @@ -48,7 +48,7 @@ export default function DesktopLoginPage() { }, [api]); const updateShortcut = useCallback( - (key: "quickAsk" | "autocomplete", accelerator: string) => { + (key: "generalAssist" | "quickAsk" | "autocomplete", accelerator: string) => { setShortcuts((prev) => { const updated = { ...prev, [key]: accelerator }; api?.setShortcuts?.({ [key]: accelerator }).catch(() => { @@ -62,7 +62,7 @@ export default function DesktopLoginPage() { ); const resetShortcut = useCallback( - (key: "quickAsk" | "autocomplete") => { + (key: "generalAssist" | "quickAsk" | "autocomplete") => { updateShortcut(key, DEFAULT_SHORTCUTS[key]); }, [updateShortcut] @@ -132,12 +132,21 @@ export default function DesktopLoginPage() { Keyboard Shortcuts

+ updateShortcut("generalAssist", accel)} + onReset={() => resetShortcut("generalAssist")} + defaultValue={DEFAULT_SHORTCUTS.generalAssist} + label="General Assist" + description="Open SurfSense from anywhere" + icon={AppWindow} + /> updateShortcut("quickAsk", accel)} onReset={() => resetShortcut("quickAsk")} defaultValue={DEFAULT_SHORTCUTS.quickAsk} - label="Quick Ask" + label="Quick Assist" description="Copy selected text and ask AI about it" icon={Clipboard} /> @@ -146,8 +155,8 @@ export default function DesktopLoginPage() { onChange={(accel) => updateShortcut("autocomplete", accel)} onReset={() => resetShortcut("autocomplete")} defaultValue={DEFAULT_SHORTCUTS.autocomplete} - label="Autocomplete" - description="Get AI writing suggestions from a screenshot" + label="Extreme Assist" + description="AI writing powered by your screen and knowledge base" icon={Sparkles} />

diff --git a/surfsense_web/components/desktop/shortcut-recorder.tsx b/surfsense_web/components/desktop/shortcut-recorder.tsx index 6d5e93a65..751579e50 100644 --- a/surfsense_web/components/desktop/shortcut-recorder.tsx +++ b/surfsense_web/components/desktop/shortcut-recorder.tsx @@ -36,6 +36,7 @@ export function acceleratorToDisplay(accel: string): string[] { } export const DEFAULT_SHORTCUTS = { + generalAssist: "CommandOrControl+Shift+S", quickAsk: "CommandOrControl+Alt+S", autocomplete: "CommandOrControl+Shift+Space", }; diff --git a/surfsense_web/types/window.d.ts b/surfsense_web/types/window.d.ts index 3f228066a..25077d1da 100644 --- a/surfsense_web/types/window.d.ts +++ b/surfsense_web/types/window.d.ts @@ -89,10 +89,10 @@ interface ElectronAPI { getAuthTokens: () => Promise<{ bearer: string; refresh: string } | null>; setAuthTokens: (bearer: string, refresh: string) => Promise; // Keyboard shortcut configuration - getShortcuts: () => Promise<{ quickAsk: string; autocomplete: string }>; + getShortcuts: () => Promise<{ generalAssist: string; quickAsk: string; autocomplete: string }>; setShortcuts: ( - config: Partial<{ quickAsk: string; autocomplete: string }> - ) => Promise<{ quickAsk: string; autocomplete: string }>; + config: Partial<{ generalAssist: string; quickAsk: string; autocomplete: string }> + ) => Promise<{ generalAssist: string; quickAsk: string; autocomplete: string }>; } declare global { From b74ac8a608fe5b5ad1e0ac0e76fb2d98d71230aa Mon Sep 17 00:00:00 2001 From: "DESKTOP-RTLN3BA\\$punk" Date: Tue, 7 Apr 2026 04:22:22 -0700 Subject: [PATCH 10/13] feat: update shortcut icons and descriptions for improved clarity - Replaced icons for "General Assist," "Quick Assist," and "Extreme Assist" shortcuts to better represent their functionalities. - Updated descriptions for each shortcut to enhance user understanding of their actions. - Refactored the layout of the shortcut recorder for a more streamlined user experience. --- .../components/DesktopContent.tsx | 30 +- surfsense_web/app/desktop/login/page.tsx | 265 ++++++++++-------- .../components/desktop/shortcut-recorder.tsx | 44 +-- 3 files changed, 182 insertions(+), 157 deletions(-) diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx index eaf015740..5ecea6708 100644 --- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx +++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx @@ -1,6 +1,6 @@ "use client"; -import { AppWindow, Clipboard, Sparkles } from "lucide-react"; +import { BrainCog, Rocket, Zap } from "lucide-react"; import { useCallback, useEffect, useState } from "react"; import { toast } from "sonner"; import { DEFAULT_SHORTCUTS, ShortcutRecorder } from "@/components/desktop/shortcut-recorder"; @@ -103,27 +103,27 @@ export function DesktopContent() { onReset={() => resetShortcut("generalAssist")} defaultValue={DEFAULT_SHORTCUTS.generalAssist} label="General Assist" - description="Open SurfSense from anywhere" - icon={AppWindow} + description="Launch SurfSense instantly from any application" + icon={Rocket} /> updateShortcut("quickAsk", accel)} onReset={() => resetShortcut("quickAsk")} defaultValue={DEFAULT_SHORTCUTS.quickAsk} - label="Quick Assist" - description="Copy selected text and ask AI about it" - icon={Clipboard} + label="Quick Assist" + description="Select text anywhere, then ask AI to explain, rewrite, or act on it" + icon={Zap} + /> + updateShortcut("autocomplete", accel)} + onReset={() => resetShortcut("autocomplete")} + defaultValue={DEFAULT_SHORTCUTS.autocomplete} + label="Extreme Assist" + description="AI drafts text using your screen context and knowledge base" + icon={BrainCog} /> - updateShortcut("autocomplete", accel)} - onReset={() => resetShortcut("autocomplete")} - defaultValue={DEFAULT_SHORTCUTS.autocomplete} - label="Extreme Assist" - description="AI writing powered by your screen and knowledge base" - icon={Sparkles} - />

Click a shortcut and press a new key combination to change it.

diff --git a/surfsense_web/app/desktop/login/page.tsx b/surfsense_web/app/desktop/login/page.tsx index f442b5d26..5d931b5c2 100644 --- a/surfsense_web/app/desktop/login/page.tsx +++ b/surfsense_web/app/desktop/login/page.tsx @@ -2,7 +2,7 @@ import { IconBrandGoogleFilled } from "@tabler/icons-react"; import { useAtom } from "jotai"; -import { AppWindow, Clipboard, Eye, EyeOff, Keyboard, Sparkles } from "lucide-react"; +import { BrainCog, Eye, EyeOff, Rocket, Zap } from "lucide-react"; import Image from "next/image"; import { useRouter } from "next/navigation"; import { useCallback, useEffect, useState } from "react"; @@ -10,7 +10,6 @@ import { toast } from "sonner"; import { loginMutationAtom } from "@/atoms/auth/auth-mutation.atoms"; import { DEFAULT_SHORTCUTS, ShortcutRecorder } from "@/components/desktop/shortcut-recorder"; import { Button } from "@/components/ui/button"; -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Separator } from "@/components/ui/separator"; @@ -100,8 +99,9 @@ export default function DesktopLoginPage() { }; return ( -
-
+
+ {/* Subtle radial glow */} +
- - +
+ {/* Header */} +
SurfSense - Welcome to SurfSense Desktop App - Configure your shortcuts, then sign in to get started. - - - - {/* ---- Shortcuts Section (first) ---- */} - {shortcutsLoaded ? ( -
-
- - Keyboard Shortcuts -
- updateShortcut("generalAssist", accel)} - onReset={() => resetShortcut("generalAssist")} - defaultValue={DEFAULT_SHORTCUTS.generalAssist} - label="General Assist" - description="Open SurfSense from anywhere" - icon={AppWindow} - /> - updateShortcut("quickAsk", accel)} - onReset={() => resetShortcut("quickAsk")} - defaultValue={DEFAULT_SHORTCUTS.quickAsk} - label="Quick Assist" - description="Copy selected text and ask AI about it" - icon={Clipboard} - /> - updateShortcut("autocomplete", accel)} - onReset={() => resetShortcut("autocomplete")} - defaultValue={DEFAULT_SHORTCUTS.autocomplete} - label="Extreme Assist" - description="AI writing powered by your screen and knowledge base" - icon={Sparkles} - /> -

- Click a shortcut and press a new key combination to change it. -

-
- ) : ( -
- -
- )} - - {/* ---- Divider ---- */} - - - {/* ---- Auth Section (second) ---- */} - {isGoogleAuth ? ( - - ) : ( -
- {loginError && ( -
- {loginError} -
- )} +

+ Welcome to SurfSense Desktop +

+

+ Configure shortcuts, then sign in to get started. +

+
+ {/* Scrollable content */} +
+
+ {/* ---- Shortcuts ---- */} + {shortcutsLoaded ? (
- - setEmail(e.target.value)} - disabled={isLoggingIn} - autoFocus - /> -
- -
- -
- setPassword(e.target.value)} - disabled={isLoggingIn} - className="pr-10" +

+ Keyboard Shortcuts +

+
+ updateShortcut("generalAssist", accel)} + onReset={() => resetShortcut("generalAssist")} + defaultValue={DEFAULT_SHORTCUTS.generalAssist} + label="General Assist" + description="Launch SurfSense instantly from any application" + icon={Rocket} + /> + updateShortcut("quickAsk", accel)} + onReset={() => resetShortcut("quickAsk")} + defaultValue={DEFAULT_SHORTCUTS.quickAsk} + label="Quick Assist" + description="Select text anywhere, then ask AI to explain, rewrite, or act on it" + icon={Zap} + /> + updateShortcut("autocomplete", accel)} + onReset={() => resetShortcut("autocomplete")} + defaultValue={DEFAULT_SHORTCUTS.autocomplete} + label="Extreme Assist" + description="AI drafts text using your screen context and knowledge base" + icon={BrainCog} /> -
+

+ Click a shortcut and press a new key combination to change it. +

+ ) : ( +
+ +
+ )} - - - )} - - + + + {/* ---- Auth ---- */} +
+

+ Sign In +

+ + {isGoogleAuth ? ( + + ) : ( +
+ {loginError && ( +
+ {loginError} +
+ )} + +
+ + setEmail(e.target.value)} + disabled={isLoggingIn} + autoFocus + className="h-9" + /> +
+ +
+ +
+ setPassword(e.target.value)} + disabled={isLoggingIn} + className="h-9 pr-9" + /> + +
+
+ + +
+ )} +
+
+
+
); } diff --git a/surfsense_web/components/desktop/shortcut-recorder.tsx b/surfsense_web/components/desktop/shortcut-recorder.tsx index 751579e50..ec4e5a528 100644 --- a/surfsense_web/components/desktop/shortcut-recorder.tsx +++ b/surfsense_web/components/desktop/shortcut-recorder.tsx @@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; // --------------------------------------------------------------------------- -// Accelerator ↔ display helpers +// Accelerator <-> display helpers // --------------------------------------------------------------------------- export function keyEventToAccelerator(e: React.KeyboardEvent): string | null { @@ -47,13 +47,13 @@ export const DEFAULT_SHORTCUTS = { export function Kbd({ keys, className }: { keys: string[]; className?: string }) { return ( - - {keys.map((key) => ( + + {keys.map((key, i) => ( 3 && "px-2" + "inline-flex h-6 min-w-6 items-center justify-center rounded border bg-muted px-1 font-mono text-[11px] font-medium text-muted-foreground", + key.length > 3 && "px-1.5" )} > {key} @@ -111,27 +111,29 @@ export function ShortcutRecorder({ const isDefault = value === defaultValue; return ( -
-
-
- -
-
-

{label}

-

{description}

-
+
+ {/* Icon */} +
+
-
+ {/* Label + description */} +
+

{label}

+

{description}

+
+ + {/* Actions */} +
{!isDefault && ( )} + + )} ); From 80f775581bd44dd980c1d75cdbc125dcc7b41f56 Mon Sep 17 00:00:00 2001 From: "DESKTOP-RTLN3BA\\$punk" Date: Tue, 7 Apr 2026 05:11:41 -0700 Subject: [PATCH 13/13] feat: implement quick assist mode detection in AssistantActionBar - Added state management for quick assist mode using the Electron API. - Introduced a useEffect hook to asynchronously check and set the quick assist mode based on the API response, enhancing the component's interactivity. --- .../components/assistant-ui/assistant-message.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/surfsense_web/components/assistant-ui/assistant-message.tsx b/surfsense_web/components/assistant-ui/assistant-message.tsx index 5567cfca8..49853b0b5 100644 --- a/surfsense_web/components/assistant-ui/assistant-message.tsx +++ b/surfsense_web/components/assistant-ui/assistant-message.tsx @@ -465,8 +465,14 @@ const AssistantActionBar: FC = () => { const isLast = useAuiState((s) => s.message.isLast); const aui = useAui(); const api = useElectronAPI(); + const [isQuickAssist, setIsQuickAssist] = useState(false); - const isQuickAssist = !!api?.replaceText && !!api?.getQuickAskMode; + useEffect(() => { + if (!api?.getQuickAskMode) return; + api.getQuickAskMode().then((mode) => { + if (mode) setIsQuickAssist(true); + }); + }, [api]); return (