Function ArtifactLibrary

frontend/src/pages/ArtifactLibrary.tsx:29–189

()

};

export function ArtifactLibrary() {
  const [searchQuery, setSearchQuery] = useState('');
  const {
    library,
    libraryLoading,
    libraryError,
    fetchLibrary,
    downloadArtifact,
    downloading,
    deleteArtifact,
    deleting,
  } = useArtifactStore();
  const [copiedRemoteUri, setCopiedRemoteUri] = useState<string | null>(null);
  const [workflows, setWorkflows] = useState<Record<string, string>>({});

  useEffect(() => {
    const loadWorkflows = async () => {
      try {
        const list = await api.workflows.list();
        const map: Record<string, string> = {};
        list.forEach((w) => {
          if (w.id) map[w.id] = w.name;
        });
        setWorkflows(map);
      } catch (err) {
        console.error('Failed to load workflows', err);
      }
    };
    loadWorkflows();
  }, []);

  useEffect(() => {
    void fetchLibrary();
  }, [fetchLibrary]);

  const handleSearch = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    void fetchLibrary({
      search: searchQuery.trim() || undefined,
    });
  };

  const handleRefresh = () => {
    void fetchLibrary({
      search: searchQuery.trim() || undefined,
    });
  };

  return (
    <div className="flex-1 bg-background">
      <div className="container mx-auto py-4 md:py-8 px-3 md:px-4">
        <div className="mb-4 md:mb-8">
          <p className="text-sm md:text-base text-muted-foreground">
            Browse artifacts saved across workflow runs and reuse them in new automations.
          </p>
        </div>

        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between mb-4 md:mb-6">