@inspectr/ui 0.0.1

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@inspectr/ui",
+  "description": "React UI components for Inspectr",
+  "type": "module",
+  "version": "0.0.1",
+  "author": "Tim Haselaars",
+  "homepage": "https://github.com/thim81/inspectr#readme",
+  "bugs": "https://github.com/thim81/inspectr-ui/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thim81/inspectr-ui.git"
+  },
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "types": "index.d.ts",
+  "files": [
+    "src/components",
+    "src/styles",
+    "src/utils",
+    "src/index.js",
+    "index.d.ts"
+  ],
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "release": "npx np --branch main",
+    "test": "echo 'test completed'"
+  },
+  "dependencies": {
+    "@monaco-editor/react": "^4.7.0-rc.0",
+    "tailwindcss": "^4.0.5"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "postcss": "^8.5.1",
+    "@tailwindcss/postcss": "^4.0.5"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@chromatic-com/storybook": "^3.2.4",
+    "@storybook/addon-essentials": "^8.5.3",
+    "@storybook/addon-interactions": "^8.5.3",
+    "@storybook/addon-onboarding": "^8.5.3",
+    "@storybook/blocks": "^8.5.3",
+    "@storybook/react": "^8.5.3",
+    "@storybook/react-vite": "^8.5.3",
+    "@storybook/test": "^8.5.3",
+    "@tailwindcss/vite": "^4.0.5",
+    "storybook": "^8.5.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/InspectrApp.jsx

@@ -0,0 +1,113 @@
+// src/components/InspectrApp.jsx
+import React, { useState, useEffect } from 'react';
+import RequestList from './RequestList';
+import RequestDetailsPanel from './RequestDetailsPanel';
+import SettingsPanel from "./SettingsPanel";
+
+const InspectrApp = ({ sseEndpoint: propSseEndpoint }) => {
+    const [requests, setRequests] = useState([]);
+    const [selectedRequest, setSelectedRequest] = useState(null);
+    const [currentTab, setCurrentTab] = useState('request');
+    const [sseEndpoint, setSseEndpoint] = useState('/api/sse');
+    const [isConnected, setIsConnected] = useState(false); // Track connection status
+
+    // Ensure localStorage is only accessed on the client
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            const storedSseEndpoint = localStorage.getItem("sseEndpoint");
+            if (!propSseEndpoint && storedSseEndpoint) {
+                setSseEndpoint(storedSseEndpoint);
+            }
+        }
+    }, [sseEndpoint]);
+
+    // Connect to SSE when the component mounts.
+    useEffect(() => {
+        const generateId = () => `req-${Math.random().toString(36).substr(2, 9)}`;
+
+        const eventSource = new EventSource(sseEndpoint);
+        console.log(`EventSource created with URL: ${sseEndpoint}`);
+
+        eventSource.onopen = () => {
+            console.log('SSE connection opened');
+            setIsConnected(true);
+        };
+
+        eventSource.onmessage = (e) => {
+            try {
+                const data = JSON.parse(e.data);
+                // console.log('Received event:', data);
+                // Update the list and, if it's the first event, select it.
+                if (!data.id) data.id = generateId();
+                setRequests((prev) => {
+                    if (prev.length === 0) {
+                        setSelectedRequest(data);
+                    }
+                    return [data, ...prev];
+                });
+            } catch (error) {
+                console.error('Error parsing SSE data:', error);
+            }
+        };
+
+        eventSource.onerror = (err) => {
+            console.error('SSE error:', err);
+            setIsConnected(false);
+            // The EventSource object will try to reconnect automatically.
+        };
+
+        return () => {
+            console.log('Closing EventSource');
+            eventSource.close();
+            setIsConnected(false);
+        };
+    }, [sseEndpoint]); // Run only once on mount
+
+    const clearRequests = () => {
+        setRequests([]);
+        setSelectedRequest(null);
+    };
+
+    const removeRequest = (reqId) => {
+        setRequests((prev) =>
+            prev.filter((req, i) => (req.id ? req.id !== reqId : i !== reqId))
+        );
+        if (selectedRequest && (selectedRequest.id || '') === reqId) {
+            setSelectedRequest(null);
+        }
+    };
+
+    return (
+        <div className="flex flex-col h-screen">
+            <div className="flex flex-grow">
+                {/* Left Panel */}
+                <div className="w-1/3 border-r border-gray-300 overflow-y-auto">
+                    <RequestList
+                        requests={requests}
+                        onSelect={setSelectedRequest}
+                        onRemove={removeRequest}
+                        clearRequests={clearRequests}
+                        selectedRequest={selectedRequest}
+                    />
+                </div>
+
+                {/* Right Panel */}
+                <div className="w-2/3 p-4">
+                    <RequestDetailsPanel
+                        request={selectedRequest}
+                        currentTab={currentTab}
+                        setCurrentTab={setCurrentTab}
+                    />
+                </div>
+            </div>
+            {/* Bottom Panel */}
+            <SettingsPanel
+                sseEndpoint={sseEndpoint}
+                setSseEndpoint={setSseEndpoint}
+                isConnected={isConnected}
+            />
+        </div>
+    );
+};
+
+export default InspectrApp;

package/src/components/RequestContent.jsx

@@ -0,0 +1,113 @@
+// src/components/RequestContent.jsx
+import React, { useState } from 'react';
+import Editor from '@monaco-editor/react';
+
+const RequestContent = ({ request }) => {
+    const [showQueryParams, setShowQueryParams] = useState(false);
+    const [showRequestHeaders, setShowRequestHeaders] = useState(false);
+
+    const renderTableRows = (data) =>
+        Object.entries(data || {}).map(([key, value]) => (
+            <tr key={key}>
+                <td className="border border-slate-200 px-2 py-1 font-mono text-slate-500 text-xs">
+                    {key}
+                </td>
+                <td className="border border-slate-200 px-2 py-1 font-mono text-xs">{value}</td>
+            </tr>
+        ));
+
+    // Check if the request body has content.
+    const payload = request.request.payload;
+    const isEmptyPayload =
+        !payload ||
+        (typeof payload === 'object' && Object.keys(payload).length === 0) ||
+        (typeof payload === 'string' &&
+            (payload.trim() === '' || payload.trim() === '{}'));
+
+    const formatPayload = (payload) => {
+        try {
+            const parsed = JSON.parse(payload);
+            return JSON.stringify(parsed, null, 2);
+        } catch (e) {
+            return payload;
+        }
+    }
+
+    return (
+        <div>
+            {/* Query Parameters Section */}
+            <div className="mb-4">
+                <button
+                    className="w-full p-2 text-left font-bold bg-gray-200"
+                    onClick={() => setShowQueryParams(!showQueryParams)}
+                >
+                    Query Parameters ({Object.keys(request.request.queryParams || {}).length})
+                </button>
+                {showQueryParams && (
+                    <div className="p-0">
+                        <table className="w-full border-collapse border border-gray-300">
+                            <thead>
+                            <tr className="bg-gray-100">
+                                <th className="border border-slate-200 px-2 py-1 w-1/4 text-left">Key</th>
+                                <th className="border border-slate-200 px-2 py-1 text-left">Value</th>
+                            </tr>
+                            </thead>
+                            <tbody>{renderTableRows(request.request.queryParams)}</tbody>
+                        </table>
+                    </div>
+                )}
+            </div>
+
+            {/* Request Headers Section */}
+            <div className="mb-4">
+                <button
+                    className="w-full p-2 text-left font-bold bg-gray-200"
+                    onClick={() => setShowRequestHeaders(!showRequestHeaders)}
+                >
+                    Headers ({Object.keys(request.request.headers || {}).length})
+                </button>
+                {showRequestHeaders && (
+                    <div className="p-0">
+                        <table className="w-full border-collapse border border-gray-300">
+                            <thead>
+                            <tr className="bg-gray-100">
+                                <th className="border border-slate-200 px-2 py-1 w-1/4 text-left">Header</th>
+                                <th className="border border-slate-200 px-2 py-1 text-left">Value</th>
+                            </tr>
+                            </thead>
+                            <tbody>{renderTableRows(request.request.headers)}</tbody>
+                        </table>
+                    </div>
+                )}
+            </div>
+
+            {/* Request Body Section */}
+            <div>
+                <button className="w-full p-2 text-left font-bold bg-gray-200">
+                    Request Body
+                </button>
+                {isEmptyPayload ? (
+                    <div className="hidden"></div>
+                ) : (
+                    <div className="bg-white rounded-b shadow p-0 h-100">
+                        <Editor
+                            height="100%"
+                            defaultLanguage="json"
+                            value={formatPayload(payload)}
+                            options={{
+                                readOnly: true,
+                                minimap: { enabled: false },
+                                automaticLayout: true,
+                                fontFamily: '"Cascadia Code", "Jetbrains Mono", "Fira Code", "Menlo", "Consolas", monospace',
+                                tabSize: 2,
+                                scrollBeyondLastLine: false
+                            }}
+                        />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default RequestContent;

package/src/components/RequestDetail.jsx

@@ -0,0 +1,51 @@
+// src/components/RequestDetail.jsx
+import React from 'react';
+import {getStatusClass} from "../utils/getStatusClass.js";
+
+const RequestDetail = ({ request }) => {
+
+    const formatTimestamp = (isoString) => {
+        if (!isoString) return "N/A"; // Handle missing timestamp
+        const date = new Date(isoString);
+
+        const formattedDate = date.toLocaleDateString("en-CA", { // YYYY-MM-DD format
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+        });
+
+        const formattedTime = date.toLocaleTimeString([], { // HH:MM:SS in local time
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+            hour12: false, // 24-hour format
+        });
+
+        return `${formattedDate} at ${formattedTime}`;
+    };
+
+    return (
+        <div className="mb-4 p-4 bg-white rounded shadow">
+            <h2 className="font-bold text-lg mb-2">Request Details</h2>
+            <div className="flex flex-col space-y-1">
+                <div className="flex items-center space-x-2 font-mono text-lg">
+                    <span className="font-bold">{request.request.method}</span>
+                    <span className="text-blue-600">{request.endpoint}</span>
+                    <span
+                        className={`inline-flex px-3 py-1 text-xs font-semibold rounded-full ${getStatusClass(
+                            request.response.status
+                        )}`}
+                    >
+            {request.response.status}
+          </span>
+                </div>
+                <div className="text-gray-600">{request.url}</div>
+                <div className="text-gray-500 text-xs">
+                    Received on {formatTimestamp(request.timestamp)} • Took {request.latency}ms to respond
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default RequestDetail;

package/src/components/RequestDetailsPanel.jsx

@@ -0,0 +1,52 @@
+// src/components/RequestDetailsPanel.jsx
+import React from 'react';
+import RequestDetail from './RequestDetail';
+import RequestContent from './RequestContent';
+import ResponseContent from './ResponseContent';
+
+const RequestDetailsPanel = ({ request, currentTab, setCurrentTab }) => {
+    if (!request) {
+        return <div className="text-gray-500">No request selected.</div>;
+    }
+
+    return (
+        <div>
+            <RequestDetail request={request} />
+
+            {/* Tabs for Request and Response */}
+            <div className="flex space-x-2">
+                <button
+                    className={`px-4 py-2 rounded-t ${
+                        currentTab === 'request'
+                            ? 'bg-blue-600 text-white'
+                            : 'bg-gray-200 text-gray-700'
+                    }`}
+                    onClick={() => setCurrentTab('request')}
+                >
+                    Request
+                </button>
+                <button
+                    className={`px-4 py-2 rounded-t ${
+                        currentTab === 'response'
+                            ? 'bg-blue-600 text-white'
+                            : 'bg-gray-200 text-gray-700'
+                    }`}
+                    onClick={() => setCurrentTab('response')}
+                >
+                    Response
+                </button>
+            </div>
+
+            {/* Tab Content */}
+            <div className="p-4 bg-white rounded-b shadow">
+                {currentTab === 'request' ? (
+                    <RequestContent request={request} />
+                ) : (
+                    <ResponseContent request={request} />
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default RequestDetailsPanel;

package/src/components/RequestList.jsx

@@ -0,0 +1,48 @@
+// src/components/RequestList.jsx
+import React, {useState} from 'react';
+import RequestListItem from './RequestListItem';
+
+const RequestList = ({requests, onSelect, onRemove, clearRequests, selectedRequest}) => {
+    return (
+        <div className="flex flex-col h-full">
+            <div className="p-4 flex justify-between items-center">
+                <span className="font-bold text-xl">
+                  Requests ({requests.length})
+                </span>
+                <button
+                    className="px-3 py-1 bg-red-500 text-white rounded text-xs"
+                    onClick={clearRequests}
+                >
+                    Clear All
+                </button>
+            </div>
+
+            {/* Table Header */}
+            <div className="flex items-center bg-gray-200 p-2 border-b border-gray-300 text-sm font-bold">
+                <div className="w-16 text-center">Status</div>
+                <div className="w-20 text-center">Method</div>
+                <div className="flex-grow text-left">URL</div>
+                <div className="w-20 text-center">Duration</div>
+                <div className="w-10"></div>
+            </div>
+
+            <ul className="overflow-y-auto flex-grow" style={{ maxHeight: "calc(100vh - 40px - 100px)" }}>
+                {requests.map((req, index) => {
+                    const reqId = req.id || index;
+                    return (
+                        <RequestListItem
+                            key={reqId}
+                            reqId={reqId}
+                            request={req}
+                            onSelect={onSelect}
+                            onRemove={onRemove}
+                            selected={selectedRequest && selectedRequest.id === reqId}
+                        />
+                    );
+                })}
+            </ul>
+        </div>
+    );
+};
+
+export default RequestList;

package/src/components/RequestListItem.jsx

@@ -0,0 +1,52 @@
+// src/components/RequestListItem.jsx
+import React from 'react';
+import {getStatusClass} from "../utils/getStatusClass.js";
+
+const selectedClass = ["bg-blue-100", "border-l-4", "border-blue-700"].join(" ");
+
+const RequestListItem = ({request, reqId, onSelect, onRemove, selected}) => {
+    const handleSelect = (request) => {
+        onSelect(request);
+    };
+
+    return (
+        <li
+            className={`flex items-center cursor-pointer hover:bg-gray-200 ${selected ? selectedClass : ""}`}
+            onClick={() => {
+                handleSelect(request);
+            }}
+        >
+            <div className="flex items-center p-2 w-full">
+                <div className="w-16 flex justify-center">
+                  <span
+                      className={`inline-flex px-3 py-1 text-xs font-semibold rounded-full ${getStatusClass(
+                          request.response.status
+                      )}`}
+                  >
+                    {request.response.status || 'N/A'}
+                  </span>
+                </div>
+                <div className="w-20 text-center font-medium">
+                    {request.request.method || 'GET'}
+                </div>
+                <div className="flex-grow truncate text-left">
+                    {request.endpoint || request.url}
+                </div>
+                <div className="w-20 text-gray-500 text-center">
+                    {request.latency}ms
+                </div>
+                <button
+                    className="w-8 h-8 flex items-center justify-center text-red-500 hover:text-red-700"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onRemove(reqId);
+                    }}
+                >
+                    ✕
+                </button>
+            </div>
+        </li>
+    );
+};
+
+export default RequestListItem;

package/src/components/ResponseContent.jsx

@@ -0,0 +1,89 @@
+// src/components/ResponseContent.jsx
+import React, { useState } from 'react';
+import Editor from '@monaco-editor/react';
+
+const ResponseContent = ({ request }) => {
+    const [showResponseHeaders, setShowResponseHeaders] = useState(false);
+
+    const renderTableRows = (data) =>
+        Object.entries(data || {}).map(([key, value]) => (
+            <tr key={key}>
+                <td className="border border-slate-200 px-2 py-1 font-mono text-slate-500 text-xs">
+                    {key}
+                </td>
+                <td className="border border-slate-200 px-2 py-1 font-mono text-xs">{value}</td>
+            </tr>
+        ));
+
+    // Check if the response body has content.
+    const payload = request.response.payload;
+    const isEmptyPayload =
+        !payload ||
+        (typeof payload === 'object' && Object.keys(payload).length === 0) ||
+        (typeof payload === 'string' &&
+            (payload.trim() === '' || payload.trim() === '{}'));
+
+    const formatPayload = (payload) => {
+        try {
+            const parsed = JSON.parse(payload);
+            return JSON.stringify(parsed, null, 2);
+        } catch (e) {
+            return payload;
+        }
+    }
+
+    return (
+        <div>
+            {/* Response Headers Section */}
+            <div className="mb-4">
+                <button
+                    className="w-full p-2 text-left font-bold bg-gray-200"
+                    onClick={() => setShowResponseHeaders(!showResponseHeaders)}
+                >
+                    Headers ({Object.keys(request.response.headers || {}).length})
+                </button>
+                {showResponseHeaders && (
+                    <div className="p-0">
+                        <table className="w-full border-collapse border border-gray-300">
+                            <thead>
+                            <tr className="bg-gray-100">
+                                <th className="border border-slate-200 px-2 py-1 w-1/4 text-left">Header</th>
+                                <th className="border border-slate-200 px-2 py-1 text-left">Value</th>
+                            </tr>
+                            </thead>
+                            <tbody>{renderTableRows(request.response.headers)}</tbody>
+                        </table>
+                    </div>
+                )}
+            </div>
+
+            {/* Response Body Section */}
+            <div>
+                <button className="w-full p-2 text-left font-bold bg-gray-200">
+                    Response Body
+                </button>
+                {isEmptyPayload ? (
+                    <div className="hidden"></div>
+                ) : (
+                    <div className="bg-white rounded-b shadow p-0 h-100">
+                        <Editor
+                            height="100%"
+                            defaultLanguage="json"
+                            value={formatPayload(payload)}
+                            options={{
+                                readOnly: true,
+                                minimap: { enabled: false },
+                                automaticLayout: true,
+                                fontFamily: '"Cascadia Code", "Jetbrains Mono", "Fira Code", "Menlo", "Consolas", monospace',
+                                tabSize: 2,
+                                scrollBeyondLastLine: false
+                            }}
+                        />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default ResponseContent;

package/src/components/SSETest.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import useSSE from '../hooks/useSSE';
+
+const SSETest = () => {
+    const { data, error } = useSSE('http://localhost:4321/api/events');
+
+    console.log("test", "test")
+
+    return (
+        <div>
+            <h1>SSE Test Component</h1>
+            {error && <p style={{color: 'red'}}>Error: {error}</p>}
+            {data ? (
+                <pre>{JSON.stringify(data, null, 2)}</pre>
+            ) : (
+                <p>No data received yet</p>
+            )}
+        </div>
+    );
+};
+
+export default SSETest;