Posthog, scarf and url navigation overhaul (#4318)

Added post hog project - always enabled
Added scarf pixel - Always enabled 
Reworked Url navigation 
Forward and back now works without reloading page

---------

Co-authored-by: Connor Yoh <[email protected]>

frontend/src/components/fileEditor/FileEditor.tsx

@@ -412,9 +412,9 @@ const FileEditor = ({
     if (record) {
       // Set the file as selected in context and switch to viewer for preview
       setSelectedFiles([fileId]);
-      navActions.setMode('viewer');
+      navActions.setWorkbench('viewer');
     }
-  }, [activeFileRecords, setSelectedFiles, navActions.setMode]);
+  }, [activeFileRecords, setSelectedFiles, navActions.setWorkbench]);
 
   const handleMergeFromHere = useCallback((fileId: FileId) => {
     const startIndex = activeFileRecords.findIndex(r => r.id === fileId);

frontend/src/components/layout/Workbench.tsx

@@ -6,13 +6,13 @@ import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
 import { useFileHandler } from '../../hooks/useFileHandler';
 import { useFileState, useFileActions } from '../../contexts/FileContext';
 import { useNavigationState, useNavigationActions } from '../../contexts/NavigationContext';
+import { useToolManagement } from '../../hooks/useToolManagement';
 
 import TopControls from '../shared/TopControls';
 import FileEditor from '../fileEditor/FileEditor';
 import PageEditor from '../pageEditor/PageEditor';
 import PageEditorControls from '../pageEditor/PageEditorControls';
 import Viewer from '../viewer/Viewer';
-import ToolRenderer from '../tools/ToolRenderer';
 import LandingPage from '../shared/LandingPage';
 
 // No props needed - component uses contexts directly
@@ -23,9 +23,9 @@ export default function Workbench() {
   // Use context-based hooks to eliminate all prop drilling
   const { state } = useFileState();
   const { actions } = useFileActions();
-  const { currentMode: currentView } = useNavigationState();
+  const { workbench: currentView } = useNavigationState();
   const { actions: navActions } = useNavigationActions();
-  const setCurrentView = navActions.setMode;
+  const setCurrentView = navActions.setWorkbench;
   const activeFiles = state.files.ids;
   const {
     previewFile,
@@ -36,7 +36,14 @@ export default function Workbench() {
     setSidebarsVisible
   } = useToolWorkflow();
 
-  const { selectedToolKey, selectedTool, handleToolSelect } = useToolWorkflow();
+  const { handleToolSelect } = useToolWorkflow();
+  
+  // Get navigation state - this is the source of truth
+  const { selectedTool: selectedToolId } = useNavigationState();
+  
+  // Get tool registry to look up selected tool
+  const { toolRegistry } = useToolManagement();
+  const selectedTool = selectedToolId ? toolRegistry[selectedToolId] : null;
   const { addToActiveFiles } = useFileHandler();
 
   const handlePreviewClose = () => {
@@ -69,11 +76,11 @@ export default function Workbench() {
       case "fileEditor":
         return (
           <FileEditor
-            toolMode={!!selectedToolKey}
+            toolMode={!!selectedToolId}
             showUpload={true}
-            showBulkActions={!selectedToolKey}
+            showBulkActions={!selectedToolId}
             supportedExtensions={selectedTool?.supportedFormats || ["pdf"]}
-            {...(!selectedToolKey && {
+            {...(!selectedToolId && {
               onOpenPageEditor: (file) => {
                 setCurrentView("pageEditor");
               },
@@ -127,14 +134,6 @@ export default function Workbench() {
         );
 
       default:
-        // Check if it's a tool view
-        if (selectedToolKey && selectedTool) {
-          return (
-            <ToolRenderer
-              selectedToolKey={selectedToolKey}
-            />
-          );
-        }
         return (
           <LandingPage/>
         );
@@ -154,7 +153,7 @@ export default function Workbench() {
       <TopControls
         currentView={currentView}
         setCurrentView={setCurrentView}
-        selectedToolKey={selectedToolKey}
+        selectedToolKey={selectedToolId}
       />
 
       {/* Main content area */}

frontend/src/components/pageEditor/PageEditor.tsx

@@ -6,7 +6,6 @@ import {
 } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { useFileState, useFileActions, useCurrentFile, useFileSelection } from "../../contexts/FileContext";
-import { ModeType } from "../../contexts/NavigationContext";
 import { PDFDocument, PDFPage, PageEditorFunctions } from "../../types/pageEditor";
 import { ProcessedFile as EnhancedProcessedFile } from "../../types/processing";
 import { pdfExportService } from "../../services/pdfExportService";

frontend/src/components/shared/RightRail.tsx

@@ -25,7 +25,7 @@ export default function RightRail() {
   const [csvInput, setCsvInput] = useState<string>("");
 
   // Navigation view
-  const { currentMode: currentView } = useNavigationState();
+  const { workbench: currentView } = useNavigationState();
 
   // File state and selection
   const { state, selectors } = useFileState();

frontend/src/components/shared/TopControls.tsx

@@ -5,7 +5,7 @@ import rainbowStyles from '../../styles/rainbow.module.css';
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import EditNoteIcon from "@mui/icons-material/EditNote";
 import FolderIcon from "@mui/icons-material/Folder";
-import { ModeType, isValidMode } from '../../contexts/NavigationContext';
+import { WorkbenchType, isValidWorkbench } from '../../types/workbench';
 import { Tooltip } from "./Tooltip";
 
 const viewOptionStyle = {
@@ -19,7 +19,7 @@ const viewOptionStyle = {
 
 
 // Build view options showing text only for current view; others icon-only with tooltip
-const createViewOptions = (currentView: ModeType, switchingTo: ModeType | null) => [
+const createViewOptions = (currentView: WorkbenchType, switchingTo: WorkbenchType | null) => [
   {
     label: (
       <div style={viewOptionStyle as React.CSSProperties}>
@@ -70,8 +70,8 @@ const createViewOptions = (currentView: ModeType, switchingTo: ModeType | null)
 ];
 
 interface TopControlsProps {
-  currentView: ModeType;
-  setCurrentView: (view: ModeType) => void;
+  currentView: WorkbenchType;
+  setCurrentView: (view: WorkbenchType) => void;
   selectedToolKey?: string | null;
 }
 
@@ -81,25 +81,25 @@ const TopControls = ({
   selectedToolKey,
 }: TopControlsProps) => {
   const { isRainbowMode } = useRainbowThemeContext();
-  const [switchingTo, setSwitchingTo] = useState<ModeType | null>(null);
+  const [switchingTo, setSwitchingTo] = useState<WorkbenchType | null>(null);
 
   const isToolSelected = selectedToolKey !== null;
 
   const handleViewChange = useCallback((view: string) => {
-    if (!isValidMode(view)) {
-      // Ignore invalid values defensively
+    if (!isValidWorkbench(view)) {
       return;
     }
-    const mode = view as ModeType;
+    
+    const workbench = view;
 
     // Show immediate feedback
-    setSwitchingTo(mode as ModeType);
+    setSwitchingTo(workbench);
 
     // Defer the heavy view change to next frame so spinner can render
     requestAnimationFrame(() => {
       // Give the spinner one more frame to show
       requestAnimationFrame(() => {
-        setCurrentView(mode as ModeType);
+        setCurrentView(workbench);
 
         // Clear the loading state after view change completes
         setTimeout(() => setSwitchingTo(null), 300);

frontend/src/components/tools/automate/AutomationCreation.tsx

@@ -11,7 +11,7 @@ import {
   Modal
 } from '@mantine/core';
 import CheckIcon from '@mui/icons-material/Check';
-import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
+import { ToolRegistry } from '../../../data/toolsTaxonomy';
 import ToolConfigurationModal from './ToolConfigurationModal';
 import ToolList from './ToolList';
 import IconSelector from './IconSelector';
@@ -24,7 +24,7 @@ interface AutomationCreationProps {
   existingAutomation?: AutomationConfig;
   onBack: () => void;
   onComplete: (automation: AutomationConfig) => void;
-  toolRegistry: Record<string, ToolRegistryEntry>;
+  toolRegistry: ToolRegistry;
 }
 
 export default function AutomationCreation({ mode, existingAutomation, onBack, onComplete, toolRegistry }: AutomationCreationProps) {

frontend/src/components/tools/automate/AutomationRun.tsx

@@ -33,7 +33,7 @@ export default function AutomationRun({ automation, onComplete, automateOperatio
   React.useEffect(() => {
     if (automation?.operations) {
       const steps = automation.operations.map((op: any, index: number) => {
-        const tool = toolRegistry[op.operation];
+        const tool = toolRegistry[op.operation as keyof typeof toolRegistry];
         return {
           id: `${op.operation}-${index}`,
           operation: op.operation,

frontend/src/components/tools/automate/ToolConfigurationModal.tsx

@@ -35,7 +35,7 @@ export default function ToolConfigurationModal({ opened, tool, onSave, onCancel,
   const [isValid, setIsValid] = useState(true);
 
   // Get tool info from registry
-  const toolInfo = toolRegistry[tool.operation];
+  const toolInfo = toolRegistry[tool.operation as keyof ToolRegistry];
   const SettingsComponent = toolInfo?.settingsComponent;
 
   // Initialize parameters from tool (which should contain defaults from registry)