Very basic CSV viewer

src-web/components/ResponsePane.tsx

@@ -25,6 +25,7 @@ import type { TabItem } from './core/Tabs/Tabs';
 import { TabContent, Tabs } from './core/Tabs/Tabs';
 import { EmptyStateText } from './EmptyStateText';
 import { ResponseHeaders } from './ResponseHeaders';
+import { CsvViewer } from './responseViewers/CsvViewer';
 import { ImageViewer } from './responseViewers/ImageViewer';
 import { TextViewer } from './responseViewers/TextViewer';
 import { WebPageViewer } from './responseViewers/WebPageViewer';
@@ -184,6 +185,8 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                 <WebPageViewer response={activeResponse} />
               ) : contentType?.startsWith('image') ? (
                 <ImageViewer className="pb-2" response={activeResponse} />
+              ) : contentType?.match(/csv|tab-separated/) ? (
+                <CsvViewer className="pb-2" response={activeResponse} />
               ) : (
                 <TextViewer response={activeResponse} pretty={viewMode === 'pretty'} />
               )}

src-web/components/responseViewers/CsvViewer.tsx

@@ -0,0 +1,39 @@
+import classnames from 'classnames';
+import Papa from 'papaparse';
+import { useMemo } from 'react';
+import { useResponseBodyText } from '../../hooks/useResponseBodyText';
+import type { HttpResponse } from '../../lib/models';
+
+interface Props {
+  response: HttpResponse;
+  className?: string;
+}
+
+export function CsvViewer({ response, className }: Props) {
+  const body = useResponseBodyText(response);
+
+  const parsed = useMemo(() => {
+    if (body === null) return null;
+    return Papa.parse<string[]>(body);
+  }, [body]);
+
+  if (parsed === null) return null;
+
+  return (
+    <div className="overflow-auto h-full">
+      <table className={classnames(className, 'text-sm')}>
+        <tbody>
+          {parsed.data.map((row, i) => (
+            <tr key={i} className={classnames('border-l border-t', i > 0 && 'border-b')}>
+              {row.map((col, j) => (
+                <td key={j} className="border-r px-1.5">
+                  {col}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}