Repository: mediar-ai/screenpipe
File: screenpipe-app-tauri/components/pipe-store/pipe-card.tsx (TypeScript)

Code before:
  const { settings } = useSettings();
  const startEnableRef = useRef(true);
  const handleOpenWindow = async (e: React.MouseEvent) => {
    e.stopPropagation();
    try {
      if (pipe.installed_config?.port) {
        await invoke("open_pipe_window", {
          port: pipe.installed_config.port,
          title: pipe.name, // atm we don't support pipes with same name
        });
      }
    } catch (err) {
      console.error("failed to open pipe window:", err);
      toast({
        title: "error opening pipe window",
        description: "please try again or check the logs",
        variant: "destructive",
      });
    }
  };

  useEffect(() => {
    const pollBuildStatus = async () => {
      try {
        const response = await fetch(
          `http://localhost:3030/pipes/info/${pipe.name}`,
        );

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();

        if (
          data.success &&
          data.data.config.buildStatus !== pipe.installed_config?.buildStatus
        ) {
          // Update pipe with new build status
          setPipe({
            ...pipe,
            installed_config: {
              ...pipe.installed_config,
              is_nextjs: pipe.installed_config?.is_nextjs ?? false,
              source: pipe.installed_config?.source ?? "",
              buildStatus: data.data.config.buildStatus as BuildStatus,
            },
          });
        }
      } catch (error) {
        console.error("Error polling build status:", error);

Review comment (suggestion):
@louis030195 
we'd use these directly from `screenpipe-js` if you'd have merge this pr!!
https://github.com/mediar-ai/screenpipe/pull/1295

`pipe.pipes.info()` something like this, it'd be a best practice to avoid these boilerplates


Code after:
  const handleOpenWindow = async (e: React.MouseEvent) => {
    e.stopPropagation();
    try {
      if (pipe.installed_config?.port) {
        await invoke("open_pipe_window", {
          port: pipe.installed_config.port,
          title: pipe.name, // atm we don't support pipes with same name
        });
      }
    } catch (err) {
      console.error("failed to open pipe window:", err);
      toast({
        title: "error opening pipe window",
        description: "please try again or check the logs",
        variant: "destructive",
      });
    }
  };

  useEffect(() => {
    const pollBuildStatus = async () => {
      const id = pipe.is_local ? pipe.id : pipe.name;
      try {
        const response = await fetch(`http://localhost:3030/pipes/info/${id}`);

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();

        if (
          data.success &&
          data.data.config.buildStatus !== pipe.installed_config?.buildStatus
        ) {
          // Update pipe with new build status
          setPipe({
            ...pipe,
            installed_config: {
              ...pipe.installed_config,
              is_nextjs: pipe.installed_config?.is_nextjs ?? false,
              source: pipe.installed_config?.source ?? "",
              buildStatus: data.data.config.buildStatus as BuildStatus,
            },
          });
        }
      } catch (error) {
        console.error("Error polling build status:", error);
        setPipe({
          ...pipe,
          installed_config: {