feat: Running tasks and steps UI (#165)

skyvern-frontend/src/routes/tasks/detail/TextArtifact.tsx

@@ -0,0 +1,38 @@
+import { artifactApiClient } from "@/api/AxiosClient";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Textarea } from "@/components/ui/textarea";
+import { useQuery } from "@tanstack/react-query";
+
+type Props = {
+  uri: string;
+};
+
+function TextArtifact({ uri }: Props) {
+  const { data, isFetching, isError, error } = useQuery<string>({
+    queryKey: ["artifact", uri],
+    queryFn: async () => {
+      return artifactApiClient
+        .get(`/artifact/text`, {
+          params: {
+            path: uri.slice(7),
+          },
+        })
+        .then((response) => response.data);
+    },
+  });
+
+  if (isFetching) {
+    return <Skeleton className="w-full h-48" />;
+  }
+
+  return (
+    <Textarea
+      className="w-full"
+      rows={15}
+      value={isError ? JSON.stringify(error) : data}
+      readOnly
+    />
+  );
+}
+
+export { TextArtifact };