Add reusable FileViewer component for artifacts

Introduces a new FileViewer component that can display various file types:
- Text files (JSON, YAML, CSV, etc.) with syntax highlighting
- Images (PNG, JPEG, SVG)
- PDFs via embedded iframe
- Fallback for unsupported types

This refactors the artifact details view to use the new FileViewer
instead of the old ArtifactFile component, which is now removed.

Components added:
- shared/components/file/ui/file-viewer.tsx - Main viewer component
- shared/components/file/ui/text-file-viewer.tsx - Text content viewer
- shared/components/file/ui/embed-viewer.tsx - Container for embedded content
- shared/components/file/ui/file-viewer-fallback.tsx - Fallback for unsupported types
- shared/components/file/ui/file-info-card.tsx - File metadata display
- shared/components/file/api/ - API layer for fetching file content
- shared/components/file/domain/ - React Query hooks
- shared/components/data-viewer/data-viewer-*-button.tsx - Reusable action buttons
- shared/utils/file.ts - File icon utilities

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: pa-lem

frontend/app/src/entities/artifacts/ui/artifact-details.tsx

@@ -1,12 +1,14 @@
 import { Separator } from "@/shared/components/aria/separator";
 import { Col, Row } from "@/shared/components/container";
+import { CONTENT_TYPE_CONFIG } from "@/shared/components/data-viewer/data-viewer";
 import ErrorScreen from "@/shared/components/errors/error-screen";
+import { FileViewer } from "@/shared/components/file/ui/file-viewer";
 import Content from "@/shared/components/layout/content";
 import { LoadingIndicator } from "@/shared/components/loading/loading-indicator";
 import { Card } from "@/shared/components/ui/card";
+import { CONFIG } from "@/shared/config/config";
 
 import { assertArtifactObject } from "@/entities/artifacts/types";
-import { ArtifactFile } from "@/entities/artifacts/ui/artifact-file";
 import { ArtifactHeader } from "@/entities/artifacts/ui/artifact-header";
 import { NodeEvents } from "@/entities/events/ui/node-details-events";
 import { useGetObject } from "@/entities/nodes/object/domain/get-object.query";
@@ -53,12 +55,13 @@ export function ArtifactsDetails({ artifactId, artifactSchema }: ArtifactsDetail
           </Row>
         </Col>
 
-        <ArtifactFile
-          artifactId={artifactId}
-          storageId={artifact.storage_id.value}
-          contentType={artifact.content_type.value}
-          className="m-1 grow overflow-hidden"
-        />
+        <div className="flex grow overflow-hidden p-1">
+          <FileViewer
+            url={CONFIG.ARTIFACTS_CONTENT_URL(artifact.storage_id.value)}
+            fileName={`${artifactId}.${CONTENT_TYPE_CONFIG[artifact.content_type.value]?.extension ?? "txt"}`}
+            contentType={artifact.content_type.value}
+          />
+        </div>
       </Content.Card>
       <Card className="min-w-90 overflow-auto p-0">
         <div className="border-gray-200 border-b p-2 font-semibold">Activities</div>

frontend/app/src/entities/artifacts/ui/artifact-file.tsx

@@ -0,0 +1,23 @@
+import { DownloadIcon } from "lucide-react";
+
+import { Tooltip } from "@/shared/components/aria/tooltip";
+
+import { DataViewerLinkButton } from "./data-viewer-action-button";
+
+interface DataViewerDownloadLinkButtonProps {
+  href: string;
+  fileName?: string;
+}
+
+export function DataViewerDownloadLinkButton({
+  href,
+  fileName,
+}: DataViewerDownloadLinkButtonProps) {
+  return (
+    <Tooltip message="Download">
+      <DataViewerLinkButton href={href} download={fileName}>
+        <DownloadIcon className="size-4" />
+      </DataViewerLinkButton>
+    </Tooltip>
+  );
+}

frontend/app/src/shared/components/data-viewer/data-viewer-download-link-button.tsx

@@ -0,0 +1,17 @@
+import { Tooltip } from "@/shared/components/aria/tooltip";
+
+import { DataViewerLinkButton } from "./data-viewer-action-button";
+
+interface DataViewerRawButtonProps {
+  href: string;
+}
+
+export function DataViewerRawButton({ href }: DataViewerRawButtonProps) {
+  return (
+    <Tooltip message="Raw">
+      <DataViewerLinkButton href={href} target="_blank" rel="noopener noreferrer">
+        Raw
+      </DataViewerLinkButton>
+    </Tooltip>
+  );
+}

frontend/app/src/shared/components/data-viewer/data-viewer-raw-button.tsx

@@ -0,0 +1,43 @@
+const read = async (reader: ReadableStreamDefaultReader<Uint8Array>): Promise<string> => {
+  const result = await reader.read();
+  const currentValue = new TextDecoder().decode(result.value);
+
+  if (result.done) {
+    return currentValue;
+  }
+
+  const nextResult = await read(reader);
+  return `${currentValue}${nextResult}`;
+};
+
+export interface GetFileContentFromApiParams {
+  url: string;
+}
+
+export async function getFileContentFromApi({
+  url,
+}: GetFileContentFromApiParams): Promise<string | null> {
+  let reader: ReadableStreamDefaultReader<Uint8Array> | null = null;
+
+  try {
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      return null;
+    }
+
+    const stream = response.body;
+    if (!stream) {
+      return null;
+    }
+
+    reader = stream.getReader();
+    return await read(reader);
+  } catch {
+    return null;
+  } finally {
+    if (reader) {
+      reader.releaseLock();
+    }
+  }
+}

frontend/app/src/shared/components/file/api/get-file-content-from-api.ts

@@ -0,0 +1,4 @@
+export const fileContentQueryKeys = {
+  all: ["file-content"] as const,
+  byUrl: (url: string) => [...fileContentQueryKeys.all, url] as const,
+} as const;

frontend/app/src/shared/components/file/domain/file-content.query-keys.ts

@@ -0,0 +1,28 @@
+import { queryOptions, useQuery } from "@tanstack/react-query";
+
+import type { QueryConfig } from "@/shared/api/types";
+
+import { getFileContentFromApi } from "../api/get-file-content-from-api";
+import { fileContentQueryKeys } from "./file-content.query-keys";
+
+export interface GetFileContentParams {
+  url: string;
+}
+
+export function getFileContentQueryOptions({ url }: GetFileContentParams) {
+  return queryOptions({
+    queryKey: fileContentQueryKeys.byUrl(url),
+    queryFn: () => getFileContentFromApi({ url }),
+    enabled: !!url,
+  });
+}
+
+export function useGetFileContent(
+  params: GetFileContentParams,
+  config?: QueryConfig<typeof getFileContentQueryOptions>
+) {
+  return useQuery({
+    ...getFileContentQueryOptions(params),
+    ...config,
+  });
+}

frontend/app/src/shared/components/file/domain/get-file-content.query.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+
+import { Col, Row } from "@/shared/components/container";
+import { DataViewerDownloadLinkButton } from "@/shared/components/data-viewer/data-viewer-download-link-button";
+import { DataViewerRawButton } from "@/shared/components/data-viewer/data-viewer-raw-button";
+
+import type { FileViewerBaseProps } from "./types";
+
+interface EmbedViewerProps extends Partial<FileViewerBaseProps> {
+  title: string;
+  children: ReactNode;
+}
+
+export function EmbedViewer({ title, url, downloadUrl, fileName, children }: EmbedViewerProps) {
+  const hasActions = url || downloadUrl;
+
+  return (
+    <Col className="grow rounded-lg bg-neutral-800 p-2 text-neutral-200">
+      <Row>
+        <span className="grow px-1 font-medium">{title}</span>
+        {hasActions && (
+          <>
+            {url && <DataViewerRawButton href={url} />}
+            {downloadUrl && <DataViewerDownloadLinkButton href={downloadUrl} fileName={fileName} />}
+          </>
+        )}
+      </Row>
+      {children}
+    </Col>
+  );
+}

frontend/app/src/shared/components/file/ui/embed-viewer.tsx

@@ -0,0 +1,28 @@
+import { getFileIcon } from "@/shared/utils/file";
+
+import { EmbedViewer } from "./embed-viewer";
+
+interface FileViewerFallbackProps {
+  url?: string;
+  downloadUrl?: string;
+  fileName: string;
+  contentType?: string;
+}
+
+export function FileViewerFallback({
+  url,
+  downloadUrl,
+  fileName,
+  contentType,
+}: FileViewerFallbackProps) {
+  const FileIconComponent = getFileIcon(contentType);
+
+  return (
+    <EmbedViewer title="Preview" url={url} downloadUrl={downloadUrl} fileName={fileName}>
+      <div className="flex flex-col items-center justify-center rounded-lg border border-neutral-700 py-12 text-center">
+        <FileIconComponent className="mb-3 size-12 text-neutral-500" />
+        <p className="text-neutral-400 text-sm">Preview not available for this file type</p>
+      </div>
+    </EmbedViewer>
+  );
+}

frontend/app/src/shared/components/file/ui/file-viewer-fallback.tsx

@@ -0,0 +1,56 @@
+import { EmbedViewer } from "./embed-viewer";
+import { FileViewerFallback } from "./file-viewer-fallback";
+import { TextFileViewer } from "./text-file-viewer";
+import { getViewerType } from "./utils";
+
+export interface FileViewerProps {
+  url: string;
+  downloadUrl?: string;
+  fileName: string;
+  contentType?: string;
+}
+
+export function FileViewer({ url, downloadUrl, fileName, contentType }: FileViewerProps) {
+  const viewerType = getViewerType(contentType);
+
+  switch (viewerType.type) {
+    case "text":
+      return (
+        <TextFileViewer
+          url={url}
+          fileName={fileName}
+          contentType={viewerType.dataViewerContentType}
+        />
+      );
+
+    case "image":
+      return (
+        <EmbedViewer title="Image" url={url} downloadUrl={downloadUrl} fileName={fileName}>
+          <div className="flex justify-center rounded-lg border border-neutral-700 bg-white p-4">
+            <img src={url} alt={fileName} className="max-h-150 max-w-full rounded" />
+          </div>
+        </EmbedViewer>
+      );
+
+    case "pdf":
+      return (
+        <EmbedViewer title="PDF" url={url} downloadUrl={downloadUrl} fileName={fileName}>
+          <iframe
+            src={url}
+            title={fileName}
+            className="h-150 w-full rounded-lg border border-neutral-700"
+          />
+        </EmbedViewer>
+      );
+
+    case "unsupported":
+      return (
+        <FileViewerFallback
+          url={url}
+          downloadUrl={downloadUrl}
+          fileName={fileName}
+          contentType={contentType}
+        />
+      );
+  }
+}