More response info

src-web/components/ResponseHeaders.tsx

@@ -1,26 +1,47 @@
 import classNames from 'classnames';
 import type { HttpResponse } from '../lib/models';
+import { Separator } from './core/Separator';
 import { HStack } from './core/Stacks';
 
 interface Props {
-  headers: HttpResponse['headers'];
+  response: HttpResponse;
 }
 
-export function ResponseHeaders({ headers }: Props) {
+export function ResponseHeaders({ response }: Props) {
   return (
-    <dl className="text-xs w-full h-full font-mono overflow-auto">
-      {headers.map((h, i) => {
-        return (
-          <HStack
-            space={3}
-            key={i}
-            className={classNames(i > 0 ? 'border-t border-highlightSecondary py-1' : 'pb-1')}
-          >
-            <dd className="w-1/3 text-violet-600 select-text cursor-text">{h.name}</dd>
-            <dt className="w-2/3 select-text cursor-text break-all">{h.value}</dt>
-          </HStack>
-        );
-      })}
-    </dl>
+    <div className="overflow-auto h-full pb-4">
+      <dl className="text-xs w-full font-mono flex flex-col">
+        {response.headers.map((h, i) => (
+          <Row key={i} label={h.name} value={h.value} labelClassName="!text-violet-600" />
+        ))}
+      </dl>
+      <Separator className="my-4">Other Info</Separator>
+      <dl className="text-xs w-full font-mono divide-highlightSecondary">
+        <Row label="Version" value={response.version} />
+        <Row label="Remote Address" value={response.remoteAddr} />
+        <Row label="Status" value={response.status} />
+        <Row label="Reason" value={response.statusReason} />
+        <Row label="URL" value={response.url} />
+      </dl>
+    </div>
+  );
+}
+
+function Row({
+  label,
+  value,
+  labelClassName,
+}: {
+  label: string;
+  value: string | number;
+  labelClassName?: string;
+}) {
+  return (
+    <HStack space={3} className="py-0.5">
+      <dd className={classNames(labelClassName, 'w-1/3 text-gray-700 select-text cursor-text')}>
+        {label}
+      </dd>
+      <dt className="w-2/3 select-text cursor-text break-all">{value}</dt>
+    </HStack>
   );
 }

src-web/components/ResponsePane.tsx

@@ -130,7 +130,10 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                     {activeResponse.elapsed > 0 && (
                       <>
                         <span>&bull;</span>
-                        <DurationTag millis={activeResponse.elapsed} />
+                        <DurationTag
+                          headers={activeResponse.elapsedHeaders}
+                          total={activeResponse.elapsed}
+                        />
                       </>
                     )}
                     {!!activeResponse.contentLength && (
@@ -160,7 +163,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
             tabListClassName="mt-1.5"
           >
             <TabContent value="headers">
-              <ResponseHeaders headers={activeResponse?.headers ?? []} />
+              <ResponseHeaders response={activeResponse} />
             </TabContent>
             <TabContent value="body">
               {!activeResponse.contentLength ? (

src-web/components/core/DurationTag.tsx

@@ -1,8 +1,17 @@
 interface Props {
-  millis: number;
+  total: number;
+  headers: number;
 }
 
-export function DurationTag({ millis }: Props) {
+export function DurationTag({ total, headers }: Props) {
+  return (
+    <span title={`HEADER: ${formatMillis(headers)}\nTOTAL: ${formatMillis(total)}`}>
+      {formatMillis(total)}
+    </span>
+  );
+}
+
+function formatMillis(millis: number) {
   let num;
   let unit;
 
@@ -17,9 +26,5 @@ export function DurationTag({ millis }: Props) {
     unit = 'ms';
   }
 
-  return (
-    <span title={`${millis} milliseconds`}>
-      {Math.round(num * 10) / 10} {unit}
-    </span>
-  );
+  return `${Math.round(num * 10) / 10} ${unit}`;
 }

src-web/components/core/Separator.tsx

@@ -15,7 +15,7 @@ export function Separator({
 }: Props) {
   return (
     <div role="separator" className={classNames(className, 'flex items-center')}>
-      {children && <div className="text-xs text-gray-500 mx-2 whitespace-nowrap">{children}</div>}
+      {children && <div className="text-xs text-gray-500 mr-2 whitespace-nowrap">{children}</div>}
       <div
         className={classNames(
           variant === 'primary' && 'bg-highlight',