Release Filter issue and image zoom

.env.example

@@ -2,6 +2,10 @@ APP_NAME="Network Spy (DEV)"
 # APP_NAME="Network Spy (STAGING)"
 # APP_NAME="Network Spy"
 
+API_BASE_URL=
+
+# These env is optional in development
+
 # PostHog Analytics (Provide these in your GitHub Secrets as well)
 VITE_PUBLIC_POSTHOG_KEY="your_posthog_project_api_key"
 VITE_PUBLIC_POSTHOG_HOST="https://app.posthog.com"

src-tauri/src/license.rs

@@ -309,7 +309,8 @@ pub fn license_check_feature(feature: String) -> bool {
     let plan = cache.plan.as_deref().unwrap_or("free");
     let is_personal = plan == "personal";
     let is_pro = plan == "pro";
-    let is_licensed = is_personal || is_pro;
+    let is_lifetime = plan == "lifetime";
+    let is_licensed = is_personal || is_pro || is_lifetime;
 
     // Check dynamic features first if they exist
     if let Some(features) = &cache.features {
@@ -322,7 +323,7 @@ pub fn license_check_feature(feature: String) -> bool {
 
     match feature.as_str() {
         "scripting" | "breakpoints" | "mcp" | "premium" => is_licensed,
-        "custom_viewers" => is_pro,
+        "custom_viewers" => is_pro || is_lifetime,
         _ => false,
     }
 }
@@ -338,7 +339,8 @@ pub fn license_get_limit(limit_name: String) -> i32 {
     let plan = cache.plan.as_deref().unwrap_or("free");
     let is_personal = plan == "personal";
     let is_pro = plan == "pro";
-    let is_licensed = is_personal || is_pro;
+    let is_lifetime = plan == "lifetime";
+    let is_licensed = is_personal || is_pro || is_lifetime;
 
     // Check dynamic features first if they exist
     if let Some(features) = &cache.features {

src-tauri/src/main.rs

@@ -80,7 +80,7 @@ fn main() {
     let app_name = env!("APP_NAME");
 
     let _guard = if let Some(dsn) = option_env!("SENTRY_DSN") {
-        if !dsn.is_empty() {
+        if dsn.starts_with("http") {
             Some(sentry::init((dsn, sentry::ClientOptions {
                 release: sentry::release_name!(),
                 ..Default::default()

src/context/AnalyticsProvider.tsx

@@ -27,7 +27,7 @@ const DevIdentifier: React.FC = () => {
 export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }) => {
   const apiKey = import.meta.env.VITE_PUBLIC_POSTHOG_KEY;
 
-  if (!apiKey) {
+  if (!apiKey || apiKey.startsWith('your_')) {
     return <>{children}</>;
   }
 

src/context/FilterPresetContext.tsx

@@ -3,6 +3,8 @@ import { FilterNode, PredefinedFilter, FilterTypes, FilterOperators } from "../m
 import { invoke } from "@tauri-apps/api/core";
 import { useLicense } from "../hooks/useLicense";
 import { useUpgradeDialog } from "./UpgradeContext";
+import { useAtomValue } from "jotai";
+import { isLicensedAtom } from "../utils/trafficAtoms";
 
 interface FilterPresetContextState {
   predefinedFilters: PredefinedFilter[];
@@ -105,6 +107,7 @@ export const FilterPresetProvider: React.FC<{ children: ReactNode }> = ({ childr
 
   const { getLimit } = useLicense();
   const { openUpgradeDialog } = useUpgradeDialog();
+  const isLicensed = useAtomValue(isLicensedAtom);
 
   // Load from DB on mount
   useEffect(() => {
@@ -149,14 +152,16 @@ export const FilterPresetProvider: React.FC<{ children: ReactNode }> = ({ childr
   };
 
   const addPreset = async (name: string, filters: FilterNode[], description?: string) => {
-    try {
-        const limit = await getLimit('max_filters');
-        if (userFilters.length >= limit) {
-          openUpgradeDialog();
-          return "";
-        }
-    } catch (e) {
-        console.error("Failed to check filter limit", e);
+    if (!isLicensed) {
+      try {
+          const limit = await getLimit('max_filters');
+          if (userFilters.length >= limit) {
+            openUpgradeDialog();
+            return "";
+          }
+      } catch (e) {
+          console.error("Failed to check filter limit", e);
+      }
     }
 
     const newId = `user-${Date.now()}`;

src/layout.tsx

@@ -10,16 +10,24 @@ import { getCurrentWindow } from "@tauri-apps/api/window";
 import { twMerge } from "tailwind-merge";
 import { useAppUpdater } from "./hooks/useAppUpdater";
 
-import { useAtom } from 'jotai';
-import { titleBarContentAtom, osAtom } from '@src/utils/trafficAtoms';
+import { useAtom, useSetAtom } from 'jotai';
+import { titleBarContentAtom, osAtom, isLicensedAtom } from '@src/utils/trafficAtoms';
+import { useLicense } from '@src/hooks/useLicense';
+import { AppPlan } from '@src/models/Plan';
 
 export default function Layout() {
   useAppUpdater();
   const [customContent] = useAtom(titleBarContentAtom);
   const [, setOs] = useAtom(osAtom);
+  const setIsLicensed = useSetAtom(isLicensedAtom);
+  const { getPlan } = useLicense();
 
   useEffect(() => {
     setOs(platform());
+    getPlan().then(plan => {
+      const appPlan = AppPlan.fromString(plan);
+      setIsLicensed(appPlan?.isPro ?? false);
+    });
   }, []);
   const [isProDialogOpen, setIsProDialogOpen] = useState(false);
   const [isMainWindow] = useState(() => {

src/main.tsx

@@ -14,7 +14,8 @@ import { SettingsProvider } from "./context/SettingsProvider";
 import CertificateInstaller from "./routes/certificate-installer";
 import * as Sentry from "@sentry/react";
 
-if (import.meta.env.VITE_SENTRY_DSN) {
+const sentryDsn = import.meta.env.VITE_SENTRY_DSN;
+if (sentryDsn && sentryDsn.startsWith('http')) {
   Sentry.init({
     dsn: import.meta.env.VITE_SENTRY_DSN,
     integrations: [

src/models/Plan.ts

@@ -1,11 +1,13 @@
 export class AppPlan {
     static readonly PERSONAL = new AppPlan("Personal");
     static readonly PRO = new AppPlan("Pro");
+    static readonly LIFETIME = new AppPlan("Lifetime");
 
     constructor(public readonly name: string) {}
 
     get isPro(): boolean {
-        return this.name.toLowerCase() === "pro";
+        const n = this.name.toLowerCase();
+        return n === "pro" || n === "lifetime";
     }
 
     get isPersonal(): boolean {
@@ -21,6 +23,7 @@ export class AppPlan {
         switch (p.toLowerCase()) {
             case 'personal': return AppPlan.PERSONAL;
             case 'pro': return AppPlan.PRO;
+            case 'lifetime': return AppPlan.LIFETIME;
             default: return new AppPlan(p);
         }
     }

src/packages/bottom-pane/BottomPaneComponents/Single/ImageViewerMode.tsx

@@ -26,13 +26,15 @@ export const ImageViewerMode = () => {
 
     return (
         <div className="bg-[#0a0a0a] flex flex-col min-h-full">
-            <div className="flex-grow flex items-center justify-center p-8">
-                {isImage ? (
+            {isImage ? (
+                <div className="flex-grow relative min-h-0">
                     <ImageView data={data?.body as Uint8Array} />
-                ) : (
+                </div>
+            ) : (
+                <div className="flex-grow flex items-center justify-center p-8">
                     <div className="text-zinc-500 text-sm italic">Response is not an image ({data?.content_type || 'Unknown Type'})</div>
-                )}
-            </div>
+                </div>
+            )}
         </div>
     );
 };

src/packages/bottom-pane/TabRenderer/ImageView.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from "react";
+import { useMemo, useEffect, useRef, useState, useCallback } from "react";
 
 export const ImageView = ({ data }: { data: Uint8Array }) => {
   const url = useMemo(() => {
@@ -13,7 +13,76 @@ export const ImageView = ({ data }: { data: Uint8Array }) => {
     };
   }, [url]);
 
+  const containerRef = useRef<HTMLDivElement>(null);
+  const imgRef = useRef<HTMLImageElement>(null);
+  const [scale, setScale] = useState(1);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const dragging = useRef(false);
+  const dragStart = useRef({ x: 0, y: 0 });
+  const offsetAtDragStart = useRef({ x: 0, y: 0 });
+
+  const reset = useCallback(() => {
+    setScale(1);
+    setOffset({ x: 0, y: 0 });
+  }, []);
+
+  const onWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -0.1 : 0.1;
+    setScale(prev => Math.max(0.1, Math.min(prev + delta, 10)));
+  }, []);
+
+  const onMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    dragging.current = true;
+    dragStart.current = { x: e.clientX, y: e.clientY };
+    offsetAtDragStart.current = offset;
+  }, [offset]);
+
+  const onMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!dragging.current) return;
+    const dx = e.clientX - dragStart.current.x;
+    const dy = e.clientY - dragStart.current.y;
+    setOffset({
+      x: offsetAtDragStart.current.x + dx,
+      y: offsetAtDragStart.current.y + dy,
+    });
+  }, []);
+
+  const onMouseUp = useCallback(() => {
+    dragging.current = false;
+  }, []);
+
   if (!url) return <div className="p-4 text-zinc-500 italic">No image data</div>;
 
-  return <img src={url} alt="response" className="max-w-full max-h-full object-contain" />;
+  return (
+    <div
+      ref={containerRef}
+      className="absolute inset-0 overflow-hidden bg-[#0a0a0a]"
+      onWheel={onWheel}
+      onMouseDown={onMouseDown}
+      onMouseMove={onMouseMove}
+      onMouseUp={onMouseUp}
+      onMouseLeave={onMouseUp}
+      onDoubleClick={reset}
+      style={{ cursor: dragging.current ? 'grabbing' : 'grab' }}
+    >
+      <img
+        ref={imgRef}
+        src={url}
+        alt="response"
+        className="max-w-full max-h-full"
+        style={{
+          transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+          transformOrigin: 'center center',
+          transition: dragging.current ? 'none' : 'transform 0.1s ease',
+          pointerEvents: 'none',
+          userSelect: 'none',
+        }}
+      />
+      <div className="absolute bottom-2 right-2 bg-black/60 text-zinc-300 text-[11px] px-2 py-0.5 rounded font-mono select-none pointer-events-none">
+        {Math.round(scale * 100)}%
+      </div>
+    </div>
+  );
 };

src/packages/filter-bar/FilterBar.tsx

@@ -91,7 +91,7 @@ const FilterNodeRenderer = ({
 
           <input
             type='text'
-            className='filter-value-input input input-xs flex-grow rounded bg-[#2a2d2c] border border-zinc-800 text-[11px] focus:outline-none focus:border-blue-500 py-0 h-6'
+            className='filter-value-input input input-xs flex-grow rounded bg-[#2a2d2c] border border-zinc-800 text-[11px] focus:outline-none focus:border-blue-500 py-0 h-6 px-2'
             placeholder={`Search ${node.type}...`}
             value={node.value}
             onChange={(e) => updateNode(node.id, { value: e.target.value })}
@@ -171,7 +171,7 @@ const FilterNodeRenderer = ({
 };
 
 import { useAtom, useAtomValue } from "jotai";
-import { mainTrafficListSearchAtom, activeTabIdAtom } from "@src/utils/trafficAtoms";
+import { mainTrafficListSearchAtom, activeTabIdAtom, isLicensedAtom } from "@src/utils/trafficAtoms";
 
 const countAllRules = (nodes: FilterNode[]): number => {
   return nodes.reduce((acc, node) => {
@@ -200,6 +200,7 @@ export const FilterBar = () => {
   const activeTabId = useAtomValue(activeTabIdAtom);
   const [searchTerm, setSearchTerm] = useAtom(mainTrafficListSearchAtom(activeTabId));
   const [errorMsg, setErrorMsg] = React.useState<string | null>(null);
+  const isLicensed = useAtomValue(isLicensedAtom);
 
   React.useEffect(() => {
     if (errorMsg) {
@@ -208,8 +209,6 @@ export const FilterBar = () => {
     }
   }, [errorMsg]);
 
-
-
   const { appPredefined, userPredefined } = React.useMemo(() => {
     const filtered = predefinedFilters.filter(f =>
       f.name.toLowerCase().includes(searchTerm.toLowerCase())
@@ -221,10 +220,12 @@ export const FilterBar = () => {
   }, [predefinedFilters, searchTerm]);
 
   const addRule = async (parentId: string | null = null) => {
-    const limit = await getLimit('max_filters');
-    if (countAllRules(filters) >= limit) {
-      openUpgradeDialog();
-      return;
+    if (!isLicensed) {
+      const limit = await getLimit('max_filters');
+      if (countAllRules(filters) >= limit) {
+        openUpgradeDialog();
+        return;
+      }
     }
 
     const newRule: FilterRule = {
@@ -256,10 +257,12 @@ export const FilterBar = () => {
   };
 
   const addGroup = async (parentId: string | null = null) => {
-    const limit = await getLimit('max_filters');
-    if (countAllRules(filters) >= limit) {
-      openUpgradeDialog();
-      return;
+    if (!isLicensed) {
+      const limit = await getLimit('max_filters');
+      if (countAllRules(filters) >= limit) {
+        openUpgradeDialog();
+        return;
+      }
     }
 
     const newGroup: FilterGroup = {
@@ -398,7 +401,7 @@ export const FilterBar = () => {
           <input
             type="text"
             placeholder="Search filters..."
-            className="bg-transparent border-none outline-none text-[11px] text-zinc-300 ml-2 w-20 focus:w-32 transition-all duration-300"
+            className="bg-transparent border-none outline-none text-[11px] text-zinc-300 ml-2 px-1 w-20 focus:w-32 transition-all duration-300"
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />

src/utils/trafficAtoms.ts

@@ -38,3 +38,5 @@ export const statusInfoDialogAtom = atom<{
 export const titleBarContentAtom = atom<React.ReactNode | null>(null);
 
 export const osAtom = atom<string>('macos');
+
+export const isLicensedAtom = atom<boolean | null>(null);