Async connection management

src-web/components/GrpcConnectionLayout.tsx

@@ -9,7 +9,6 @@ import { useGrpc } from '../hooks/useGrpc';
 import { useGrpcConnections } from '../hooks/useGrpcConnections';
 import { useGrpcMessages } from '../hooks/useGrpcMessages';
 import { useUpdateGrpcRequest } from '../hooks/useUpdateGrpcRequest';
-import { count, pluralize } from '../lib/pluralize';
 import { Banner } from './core/Banner';
 import { Button } from './core/Button';
 import { HotKeyList } from './core/HotKeyList';
@@ -33,10 +32,10 @@ export function GrpcConnectionLayout({ style }: Props) {
   const updateRequest = useUpdateGrpcRequest(activeRequest?.id ?? null);
   const alert = useAlert();
   const [activeMessageId, setActiveMessageId] = useState<string | null>(null);
-  const grpc = useGrpc(activeRequest?.url ?? null, activeRequest?.id ?? null);
   const connections = useGrpcConnections(activeRequest?.id ?? null);
   const activeConnection = connections[0] ?? null;
   const messages = useGrpcMessages(activeConnection?.id ?? null);
+  const grpc = useGrpc(activeRequest, activeConnection);
 
   const activeMethod = useMemo(() => {
     if (grpc.services == null || activeRequest == null) return null;
@@ -59,13 +58,13 @@ export function GrpcConnectionLayout({ style }: Props) {
         });
       }
       if (activeMethod.clientStreaming && activeMethod.serverStreaming) {
-        await grpc.streaming.mutateAsync(activeRequest.id);
+        await grpc.streaming.mutateAsync();
       } else if (!activeMethod.clientStreaming && activeMethod.serverStreaming) {
-        await grpc.serverStreaming.mutateAsync(activeRequest.id);
+        await grpc.serverStreaming.mutateAsync();
       } else if (activeMethod.clientStreaming && !activeMethod.serverStreaming) {
-        await grpc.clientStreaming.mutateAsync(activeRequest.id);
+        await grpc.clientStreaming.mutateAsync();
       } else {
-        const msg = await grpc.unary.mutateAsync(activeRequest.id);
+        const msg = await grpc.unary.mutateAsync();
         setActiveMessageId(msg.id);
       }
     },
@@ -291,7 +290,7 @@ export function GrpcConnectionLayout({ style }: Props) {
                   <div className="w-full grid grid-rows-[auto_minmax(0,1fr)] items-center">
                     <HStack className="pl-3 mb-1 font-mono" alignItems="center">
                       <HStack alignItems="center" space={2}>
-                        {count('message', messages.filter((m) => !m.isInfo).length)}
+                        <span>{messages.filter((m) => !m.isInfo).length} messages</span>
                         {grpc.isStreaming && (
                           <Icon icon="refresh" size="sm" spin className="text-gray-600" />
                         )}

src-web/components/RecentConnectionsDropdown.tsx

@@ -1,3 +1,4 @@
+import { formatDistanceToNow } from 'date-fns';
 import { useDeleteGrpcConnection } from '../hooks/useDeleteGrpcConnection';
 import { useDeleteGrpcConnections } from '../hooks/useDeleteGrpcConnections';
 import type { GrpcConnection } from '../lib/models';
@@ -42,6 +43,7 @@ export const RecentConnectionsDropdown = function ResponsePane({
           key: c.id,
           label: (
             <HStack space={2} alignItems="center">
+              {formatDistanceToNow(c.createdAt)} &bull;{' '}
               <span className="font-mono text-xs">{c.elapsed}ms</span>
             </HStack>
           ),

src-web/components/Sidebar.tsx

@@ -21,6 +21,7 @@ import { useGrpcRequests } from '../hooks/useGrpcRequests';
 import { useHotKey } from '../hooks/useHotKey';
 import { useHttpRequests } from '../hooks/useHttpRequests';
 import { useKeyValue } from '../hooks/useKeyValue';
+import { useLatestGrpcConnection } from '../hooks/useLatestGrpcConnection';
 import { useLatestHttpResponse } from '../hooks/useLatestHttpResponse';
 import { usePrompt } from '../hooks/usePrompt';
 import { useSendManyRequests } from '../hooks/useSendFolder';
@@ -558,7 +559,8 @@ const SidebarItem = forwardRef(function SidebarItem(
   const duplicateGrpcRequest = useDuplicateGrpcRequest({ id: itemId, navigateAfter: true });
   const sendRequest = useSendRequest(itemId);
   const sendManyRequests = useSendManyRequests();
-  const latestResponse = useLatestHttpResponse(itemId);
+  const latestHttpResponse = useLatestHttpResponse(itemId);
+  const latestGrpcConnection = useLatestGrpcConnection(itemId);
   const updateHttpRequest = useUpdateHttpRequest(itemId);
   const updateGrpcRequest = useUpdateGrpcRequest(itemId);
   const updateAnyFolder = useUpdateAnyFolder();
@@ -751,15 +753,19 @@ const SidebarItem = forwardRef(function SidebarItem(
           ) : (
             <span className="truncate">{itemName || itemFallbackName}</span>
           )}
-          {latestResponse && (
+          {latestGrpcConnection ? (
             <div className="ml-auto">
-              {isResponseLoading(latestResponse) ? (
+              {latestGrpcConnection.elapsed === 0 && <Icon spin size="sm" icon="update" />}
+            </div>
+          ) : latestHttpResponse ? (
+            <div className="ml-auto">
+              {isResponseLoading(latestHttpResponse) ? (
                 <Icon spin size="sm" icon="update" />
               ) : (
-                <StatusTag className="text-2xs dark:opacity-80" response={latestResponse} />
+                <StatusTag className="text-2xs dark:opacity-80" response={latestHttpResponse} />
               )}
             </div>
-          )}
+          ) : null}
         </button>
       </div>
       {children}