diff --git a/apps/web/src/pages/home-page.tsx b/apps/web/src/pages/home-page.tsx
index 91e7dd1b..4e479bb1 100644
--- a/apps/web/src/pages/home-page.tsx
+++ b/apps/web/src/pages/home-page.tsx
@@ -1,11 +1,12 @@
-import { CATEGORIES, TOOLS } from "@ashim/shared";
-import { Loader2 } from "lucide-react";
+import { CATEGORIES, PYTHON_SIDECAR_TOOLS, TOOLS } from "@ashim/shared";
+import { Download, Loader2 } from "lucide-react";
import { useCallback, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { ImageViewer } from "@/components/common/image-viewer";
import { MultiImageViewer } from "@/components/common/multi-image-viewer";
import { AppLayout } from "@/components/layout/app-layout";
import { ICON_MAP } from "@/lib/icon-map";
+import { useFeaturesStore } from "@/stores/features-store";
import { useFileStore } from "@/stores/file-store";
import { useSettingsStore } from "@/stores/settings-store";
@@ -24,10 +25,12 @@ export function HomePage() {
} = useFileStore();
const navigate = useNavigate();
const { fetch: fetchSettings } = useSettingsStore();
+ const { fetch: fetchFeatures, isToolInstalled } = useFeaturesStore();
useEffect(() => {
fetchSettings();
- }, [fetchSettings]);
+ fetchFeatures();
+ }, [fetchSettings, fetchFeatures]);
const handleFiles = useCallback(
(newFiles: File[]) => {
@@ -83,6 +86,8 @@ export function HomePage() {
const Icon =
(ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ??
ICON_MAP.FileImage;
+ const isAi = (PYTHON_SIDECAR_TOOLS as readonly string[]).includes(id);
+ const needsDownload = isAi && !isToolInstalled(id);
return (
{tool.name}
+ {needsDownload && (
+
+ )}
);
})}
@@ -121,6 +129,8 @@ export function HomePage() {
const Icon =
(ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ??
ICON_MAP.FileImage;
+ const isAi = (PYTHON_SIDECAR_TOOLS as readonly string[]).includes(tool.id);
+ const needsDownload = isAi && !isToolInstalled(tool.id);
return (
);
})}