fix(artifacts): render images natively and add filename to downloads

- Render image content types with img tag instead of raw text
- Use isFetching instead of isLoading to fix spinner for images
- Add artifactDownloadURL helper with filename query param
- Update all download URL call sites to include filename

Author: moshloop

src/App.tsx

@@ -7,7 +7,7 @@ import React, { ReactNode, useEffect, useState, useMemo } from "react";
 import { IconType } from "react-icons";
 import { AiFillHeart } from "react-icons/ai";
 import { BsLink, BsToggles } from "react-icons/bs";
-import { FaBell, FaCrosshairs, FaTasks } from "react-icons/fa";
+import { FaArchive, FaBell, FaCrosshairs, FaTasks } from "react-icons/fa";
 import { HiUser } from "react-icons/hi";
 import { ImLifebuoy } from "react-icons/im";
 import {
@@ -46,6 +46,7 @@ import { IncidentPageContextProvider } from "./context/IncidentPageContext";
 import { UserAccessStateContextProvider } from "./context/UserAccessContext/UserAccessContext";
 import { tables } from "./context/UserAccessContext/permissions";
 
+import { ArtifactsPage } from "./pages/Settings/ArtifactsPage";
 import { PermissionsPage } from "./pages/Settings/PermissionsPage";
 import { PermissionsSubjectsPage } from "./pages/Settings/PermissionsSubjectsPage";
 import McpOverviewPage from "./pages/Settings/mcp/McpOverviewPage";
@@ -391,6 +392,13 @@ const settingsNav: SettingsNavigationItems = {
   icon: AdjustmentsIcon,
   checkPath: false,
   submenu: [
+    {
+      name: "Artifacts",
+      href: "/settings/artifacts",
+      icon: FaArchive,
+      featureName: features["settings.artifacts"],
+      resourceName: tables.artifacts
+    },
     {
       name: "Connections",
       href: "/settings/connections",
@@ -737,6 +745,15 @@ export function IncidentManagerRoutes({ sidebar }: { sidebar: ReactNode }) {
       </Route>
 
       <Route path="settings" element={sidebar}>
+        <Route
+          path="artifacts"
+          element={withAuthorizationAccessCheck(
+            <ArtifactsPage />,
+            tables.artifacts,
+            "read",
+            true
+          )}
+        />
         <Route
           path="connections"
           element={withAuthorizationAccessCheck(

src/api/services/artifacts.ts

@@ -1,8 +1,67 @@
-import { ArtifactAPI } from "../axios";
+import { SortingState } from "@tanstack/react-table";
+import { Artifact, ArtifactSummary } from "../types/artifacts";
+import { ArtifactAPI, IncidentCommander } from "../axios";
+import { resolvePostGrestRequestWithPagination } from "../resolve";
+
+export function artifactDownloadURL(artifactId: string, filename?: string) {
+  const params = filename ? `?filename=${encodeURIComponent(filename)}` : "";
+  return `/api/artifacts/download/${artifactId}${params}`;
+}
 
 export async function downloadArtifact(artifactId: string) {
   const response = await ArtifactAPI.get(`/download/${artifactId}`, {
     responseType: "text"
   });
   return response.data;
 }
+
+export async function fetchArtifacts({
+  pageIndex = 0,
+  pageSize = 50,
+  sortBy,
+  contentType,
+  filenameSearch
+}: {
+  pageIndex?: number;
+  pageSize?: number;
+  sortBy?: SortingState;
+  contentType?: string;
+  filenameSearch?: string;
+}) {
+  const query = new URLSearchParams({
+    select:
+      "*,playbook_run_action:playbook_run_actions(id,name,playbook_run_id),config_change:config_changes(id,config_id,change_type)"
+  });
+
+  query.set("limit", pageSize.toString());
+  query.set("offset", (pageIndex * pageSize).toString());
+
+  if (sortBy && sortBy.length > 0) {
+    query.set("order", `${sortBy[0].id}.${sortBy[0].desc ? "desc" : "asc"}`);
+  } else {
+    query.set("order", "created_at.desc");
+  }
+
+  if (contentType && contentType !== "all") {
+    query.set("content_type", `eq.${contentType}`);
+  }
+
+  if (filenameSearch) {
+    query.set("filename", `ilike.*${filenameSearch}*`);
+  }
+
+  return resolvePostGrestRequestWithPagination(
+    IncidentCommander.get<Artifact[]>(`/artifacts?${query.toString()}`, {
+      headers: {
+        Prefer: "count=exact"
+      }
+    })
+  );
+}
+
+export async function fetchArtifactSummary() {
+  const res = await IncidentCommander.get<ArtifactSummary[]>(
+    "/artifact_summary?select=*"
+  );
+  return res.data ?? [];
+}

src/api/services/configs.ts

@@ -382,7 +382,7 @@ export const getConfigListFilteredByType = (types: string[]) => {
 
 export const getConfigChangeById = async (id: string) => {
   const res = await ConfigDB.get<ConfigChange[] | null>(
-    `/config_changes?id=eq.${id}&select=id,config_id,change_type,created_at,external_created_by,source,diff,details,patches,created_by,config:configs(id,name,type,config_class)`
+    `/config_changes?id=eq.${id}&select=id,config_id,change_type,created_at,external_created_by,source,diff,details,patches,created_by,config:configs(id,name,type,config_class),artifacts:artifacts(*)::jsonb`
   );
   return res.data?.[0] ?? null;
 };

src/api/types/artifacts.ts

@@ -0,0 +1,25 @@
+export type Artifact = {
+  id: string;
+  filename: string;
+  path: string;
+  content_type: string;
+  checksum: string;
+  size: number;
+  playbook_run_action_id?: string;
+  config_change_id?: string;
+  connection_id?: string;
+  created_at: string;
+  // PostgREST embedded joins
+  playbook_run_action?: { id: string; name: string; playbook_run_id: string };
+  config_change?: { id: string; config_id: string; change_type: string };
+};
+
+export type ArtifactSummary = {
+  content_type: string;
+  storage: "inline" | "external";
+  connection_id: string | null;
+  connection_name: string | null;
+  connection_type: string | null;
+  total_count: number;
+  total_size: number;
+};

src/api/types/configs.ts

@@ -1,5 +1,6 @@
 import { Agent, Avatar, CreatedAt, Timestamped } from "../traits";
 import { HealthCheckSummary } from "./health";
+import { PlaybookArtifact } from "./playbooks";
 import { Property } from "./topology";
 
 export interface ConfigChange extends CreatedAt {
@@ -24,6 +25,7 @@ export interface ConfigChange extends CreatedAt {
   first_observed?: string;
   count?: number;
   inserted_at?: string;
+  artifacts?: PlaybookArtifact[];
 }
 
 export interface Change {

src/components/Artifacts/ArtifactPreviewModal.tsx

@@ -0,0 +1,161 @@
+import { Artifact } from "@flanksource-ui/api/types/artifacts";
+import {
+  artifactDownloadURL,
+  downloadArtifact
+} from "@flanksource-ui/api/services/artifacts";
+import { formatBytes } from "@flanksource-ui/utils/common";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@flanksource-ui/components/ui/dialog";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
+import CodeBlock from "@flanksource-ui/ui/Code/CodeBlock";
+import { darkTheme } from "@flanksource-ui/ui/Code/JSONViewerTheme";
+import { JSONViewer } from "@flanksource-ui/ui/Code/JSONViewer";
+import { DisplayMarkdown } from "@flanksource-ui/components/Utils/Markdown";
+import { useQuery } from "@tanstack/react-query";
+import { IoMdDownload } from "react-icons/io";
+
+type ArtifactPreviewModalProps = {
+  artifact: Artifact | undefined;
+  onClose: () => void;
+};
+
+const MAX_PREVIEW_SIZE = 50 * 1024 * 1024; // 50MB
+
+function isImageContentType(contentType: string) {
+  return contentType.startsWith("image/");
+}
+
+export function ArtifactPreviewModal({
+  artifact,
+  onClose
+}: ArtifactPreviewModalProps) {
+  const isSmallFile = artifact ? artifact.size < MAX_PREVIEW_SIZE : false;
+
+  const isImage = artifact ? isImageContentType(artifact.content_type) : false;
+
+  const { data: content, isFetching: isLoading } = useQuery({
+    queryKey: ["artifact", artifact?.id],
+    queryFn: () => downloadArtifact(artifact!.id),
+    enabled: !!artifact && isSmallFile && !isImage,
+    staleTime: Infinity,
+    cacheTime: 1000 * 60 * 60 * 24
+  });
+
+  const downloadURL = artifact
+    ? artifactDownloadURL(artifact.id, artifact.filename)
+    : undefined;
+
+  return (
+    <Dialog open={!!artifact} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-h-[80vh] max-w-4xl overflow-hidden">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <span>{artifact?.filename}</span>
+            {artifact && (
+              <span className="text-sm font-normal text-gray-500">
+                ({formatBytes(artifact.size)})
+              </span>
+            )}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="max-h-[60vh] overflow-auto">
+          {artifact && !isSmallFile && (
+            <div className="py-8 text-center text-gray-500">
+              <p className="mb-4">
+                File is too large to preview. Maximum file size is 50MB.
+              </p>
+              <a href={downloadURL} target="_blank" rel="noreferrer">
+                <Button text="Download" icon={<IoMdDownload />} />
+              </a>
+            </div>
+          )}
+
+          {isLoading && (
+            <div className="flex items-center justify-center py-8">
+              <div className="h-6 w-6 animate-spin rounded-full border-b-2 border-blue-500" />
+              <span className="ml-2">Loading...</span>
+            </div>
+          )}
+
+          {isImage && artifact && downloadURL && (
+            <img
+              src={downloadURL}
+              alt={artifact.filename}
+              className="max-h-[60vh] max-w-full object-contain"
+            />
+          )}
+
+          {content &&
+            artifact &&
+            !isImage &&
+            renderContent(artifact.content_type, content)}
+        </div>
+
+        <DialogFooter className="pt-2">
+          {downloadURL && (
+            <a href={downloadURL} target="_blank" rel="noreferrer">
+              <Button
+                text="Download"
+                icon={<IoMdDownload />}
+                className="btn-secondary"
+              />
+            </a>
+          )}
+          <Button text="Close" onClick={onClose} className="btn-primary" />
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function renderContent(contentType: string, content: string) {
+  switch (contentType) {
+    case "text/x-shellscript":
+      return (
+        <CodeBlock
+          code={content}
+          language="bash"
+          className="bg-black text-white"
+          codeBlockClassName="whitespace-pre"
+          theme={darkTheme}
+        />
+      );
+
+    case "application/sql":
+      return (
+        <CodeBlock
+          code={content}
+          language="sql"
+          className="bg-black text-white"
+          codeBlockClassName="whitespace-pre"
+          theme={darkTheme}
+        />
+      );
+
+    case "text/markdown":
+    case "markdown":
+      return <DisplayMarkdown md={content} />;
+
+    case "application/yaml":
+    case "application/json":
+      return (
+        <pre>
+          <JSONViewer format="json" code={content} convertToYaml />
+        </pre>
+      );
+
+    case "text/plain":
+    default:
+      return (
+        <pre className="whitespace-pre-wrap bg-gray-50 p-4 text-sm">
+          {content}
+        </pre>
+      );
+  }
+}