Minor tweaks

src-web/components/GrpcConnectionLayout.tsx

@@ -87,7 +87,6 @@ export function GrpcConnectionLayout({ style }: Props) {
           onCommit={grpc.commit.mutate}
           onCancel={grpc.cancel.mutate}
           onSend={grpc.send.mutate}
-          onReflectRefetch={grpc.reflect.refetch}
           services={services ?? null}
           reflectionError={grpc.reflect.error as string | undefined}
           reflectionLoading={grpc.reflect.isFetching}

src-web/components/GrpcConnectionSetupPane.tsx

@@ -34,7 +34,6 @@ interface Props {
   onClientStreaming: () => void;
   onServerStreaming: () => void;
   onStreaming: () => void;
-  onReflectRefetch: () => void;
   services: ReflectResponseService[] | null;
 }
 
@@ -45,7 +44,6 @@ export function GrpcConnectionSetupPane({
   activeRequest,
   reflectionError,
   reflectionLoading,
-  onReflectRefetch,
   onStreaming,
   onClientStreaming,
   onServerStreaming,
@@ -230,7 +228,6 @@ export function GrpcConnectionSetupPane({
         className="bg-gray-50"
         reflectionError={reflectionError}
         reflectionLoading={reflectionLoading}
-        onReflect={onReflectRefetch}
         request={activeRequest}
       />
     </VStack>

src-web/components/RecentConnectionsDropdown.tsx

@@ -1,8 +1,8 @@
-import { formatDistanceToNow } from 'date-fns';
+import { formatDistanceToNowStrict } from 'date-fns';
 import { useDeleteGrpcConnection } from '../hooks/useDeleteGrpcConnection';
 import { useDeleteGrpcConnections } from '../hooks/useDeleteGrpcConnections';
 import type { GrpcConnection } from '../lib/models';
-import { pluralize } from '../lib/pluralize';
+import { count, pluralize } from '../lib/pluralize';
 import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
@@ -14,27 +14,23 @@ interface Props {
   onPinned: (r: GrpcConnection) => void;
 }
 
-export const RecentConnectionsDropdown = function ResponsePane({
+export function RecentConnectionsDropdown({ activeConnection, connections, onPinned }: Props) {
-  activeConnection,
+  const deleteConnection = useDeleteGrpcConnection(activeConnection?.id ?? null);
-  connections,
+  const deleteAllConnections = useDeleteGrpcConnections(activeConnection?.requestId);
-  onPinned,
-}: Props) {
-  const deleteResponse = useDeleteGrpcConnection(activeConnection?.id ?? null);
-  const deleteAllResponses = useDeleteGrpcConnections(activeConnection?.requestId);
 
   return (
     <Dropdown
       items={[
         {
           key: 'clear-single',
-          label: 'Clear Response',
+          label: 'Clear Connection',
-          onSelect: deleteResponse.mutate,
+          onSelect: deleteConnection.mutate,
           disabled: connections.length === 0,
         },
         {
           key: 'clear-all',
-          label: `Clear ${connections.length} ${pluralize('Response', connections.length)}`,
+          label: `Clear ${count('Connection', connections.length)}`,
-          onSelect: deleteAllResponses.mutate,
+          onSelect: deleteAllConnections.mutate,
           hidden: connections.length <= 1,
           disabled: connections.length === 0,
         },
@@ -43,7 +39,7 @@ export const RecentConnectionsDropdown = function ResponsePane({
           key: c.id,
           label: (
             <HStack space={2} alignItems="center">
-              {formatDistanceToNow(c.createdAt)} &bull;{' '}
+              {formatDistanceToNowStrict(c.createdAt + 'Z')} ago &bull;{' '}
               <span className="font-mono text-xs">{c.elapsed}ms</span>
             </HStack>
           ),
@@ -53,7 +49,7 @@ export const RecentConnectionsDropdown = function ResponsePane({
       ]}
     >
       <IconButton
-        title="Show response history"
+        title="Show connection history"
         icon="chevronDown"
         className="ml-auto"
         size="sm"
@@ -61,4 +57,4 @@ export const RecentConnectionsDropdown = function ResponsePane({
       />
     </Dropdown>
   );
-};
+}

src-web/components/core/FormattedError.tsx

@@ -6,7 +6,6 @@ interface Props {
 }
 
 export function FormattedError({ children }: Props) {
-  console.log('ERROR', children);
   return (
     <pre
       className={classNames(