feat: lightweight Docker image without AI/ML tools (:lite tag)

Closes #1

apps/web/src/components/common/tool-card.tsx

@@ -1,17 +1,58 @@
 import type { Tool } from "@stirling-image/shared";
 import * as icons from "lucide-react";
-import { FileImage, Star } from "lucide-react";
+import { FileImage, Sparkles, Star } from "lucide-react";
 import { Link } from "react-router-dom";
+import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 
 interface ToolCardProps {
   tool: Tool;
+  variantUnavailable?: boolean;
 }
 
-export function ToolCard({ tool }: ToolCardProps) {
+export function ToolCard({ tool, variantUnavailable }: ToolCardProps) {
   const iconsMap = icons as unknown as Record<string, React.ComponentType<{ className?: string }>>;
   const IconComponent = iconsMap[tool.icon] || FileImage;
 
+  if (variantUnavailable) {
+    return (
+      <div className="group flex items-center gap-3 relative">
+        <button
+          type="button"
+          className="opacity-0 group-hover:opacity-100 transition-opacity absolute -left-5"
+          title="Add to favourites"
+        >
+          <Star className="h-3 w-3 text-muted-foreground hover:text-yellow-500" />
+        </button>
+        <button
+          type="button"
+          onClick={() =>
+            toast("This tool requires the full image.", {
+              description:
+                "Pull stirlingimage/stirling-image:latest for all features including AI tools.",
+              action: {
+                label: "Learn more",
+                onClick: () =>
+                  window.open(
+                    "https://stirling-image.github.io/stirling-image/guide/docker-tags",
+                    "_blank",
+                  ),
+              },
+            })
+          }
+          className="flex items-center gap-3 py-2 px-3 rounded-lg w-full transition-colors hover:bg-muted/50 opacity-50 cursor-pointer"
+        >
+          <IconComponent className="h-5 w-5 text-muted-foreground" />
+          <span className="text-sm font-medium text-foreground">{tool.name}</span>
+          <span className="flex items-center gap-0.5 text-[10px] px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 font-medium">
+            <Sparkles className="h-2.5 w-2.5" />
+            AI
+          </span>
+        </button>
+      </div>
+    );
+  }
+
   return (
     <div className="group flex items-center gap-3 relative">
       <button

apps/web/src/components/layout/tool-panel.tsx

@@ -1,32 +1,28 @@
 import { CATEGORIES, TOOLS } from "@stirling-image/shared";
 import { useEffect, useMemo, useState } from "react";
-import { apiGet } from "@/lib/api";
+import { useSettingsStore } from "@/stores/settings-store";
 import { SearchBar } from "../common/search-bar";
 import { ToolCard } from "../common/tool-card";
 
 export function ToolPanel() {
   const [search, setSearch] = useState("");
-  const [disabledTools, setDisabledTools] = useState<string[]>([]);
-  const [experimentalEnabled, setExperimentalEnabled] = useState(false);
+  const { disabledTools, experimentalEnabled, variantUnavailableTools, loaded, fetch } =
+    useSettingsStore();
 
   useEffect(() => {
-    apiGet<{ settings: Record<string, string> }>("/v1/settings")
-      .then((data) => {
-        setDisabledTools(
-          data.settings.disabledTools ? JSON.parse(data.settings.disabledTools) : [],
-        );
-        setExperimentalEnabled(data.settings.enableExperimentalTools === "true");
-      })
-      .catch(() => {});
-  }, []);
+    fetch();
+  }, [fetch]);
+
+  const unavailableSet = useMemo(() => new Set(variantUnavailableTools), [variantUnavailableTools]);
 
   const visibleTools = useMemo(() => {
+    if (!loaded) return [];
     return TOOLS.filter((t) => {
       if (disabledTools.includes(t.id)) return false;
       if (t.experimental && !experimentalEnabled) return false;
       return true;
     });
-  }, [disabledTools, experimentalEnabled]);
+  }, [disabledTools, experimentalEnabled, loaded]);
 
   const filteredTools = useMemo(() => {
     if (!search) return visibleTools;
@@ -59,7 +55,11 @@ export function ToolPanel() {
             </h3>
             <div className="space-y-0.5">
               {groupedTools.get(category.id)?.map((tool) => (
-                <ToolCard key={tool.id} tool={tool} />
+                <ToolCard
+                  key={tool.id}
+                  tool={tool}
+                  variantUnavailable={unavailableSet.has(tool.id)}
+                />
               ))}
             </div>
           </div>