Refactor into grpc events

src-web/components/core/HotKeyList.tsx

@@ -6,9 +6,10 @@ import { HStack, VStack } from './Stacks';
 
 interface Props {
   hotkeys: HotkeyAction[];
+  bottomSlot?: React.ReactNode;
 }
 
-export const HotKeyList = ({ hotkeys }: Props) => {
+export const HotKeyList = ({ hotkeys, bottomSlot }: Props) => {
   return (
     <div className="mx-auto h-full flex items-center text-gray-700 text-sm">
       <VStack space={2}>
@@ -18,6 +19,7 @@ export const HotKeyList = ({ hotkeys }: Props) => {
             <HotKey className="ml-auto" action={hotkey} />
           </HStack>
         ))}
+        {bottomSlot}
       </VStack>
     </div>
   );

src-web/components/core/Icon.tsx

@@ -4,8 +4,11 @@ import type { HTMLAttributes } from 'react';
 import { memo } from 'react';
 
 const icons = {
+  alert: lucide.AlertTriangleIcon,
   archive: lucide.ArchiveIcon,
   arrowBigDownDash: lucide.ArrowBigDownDashIcon,
+  arrowBigLeftDash: lucide.ArrowBigLeftDashIcon,
+  arrowBigRightDash: lucide.ArrowBigRightDashIcon,
   arrowBigUpDash: lucide.ArrowBigUpDashIcon,
   arrowDown: lucide.ArrowDownIcon,
   arrowDownToDot: lucide.ArrowDownToDotIcon,
@@ -60,12 +63,14 @@ export interface IconProps {
   className?: string;
   size?: 'xs' | 'sm' | 'md' | 'lg';
   spin?: boolean;
+  title?: string;
 }
 
-export const Icon = memo(function Icon({ icon, spin, size = 'md', className }: IconProps) {
+export const Icon = memo(function Icon({ icon, spin, size = 'md', className, title }: IconProps) {
   const Component = icons[icon] ?? icons.question;
   return (
     <Component
+      title={title}
       className={classNames(
         className,
         'text-inherit flex-shrink-0',

src-web/components/core/KeyValueRow.tsx

@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+import { HStack } from './Stacks';
+
+interface Props {
+  label: ReactNode;
+  value: ReactNode;
+  labelClassName?: string;
+}
+
+export function KeyValueRows({ children }: { children: ReactNode }) {
+  return <dl className="text-xs w-full font-mono divide-highlightSecondary">{children}</dl>;
+}
+
+export function KeyValueRow({ label, value, labelClassName }: Props) {
+  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>
+  );
+}