Rename workspace

src-web/components/core/Button.tsx

@@ -36,6 +36,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
     children,
     forDropdown,
     color,
+    type = 'button',
     justify = 'center',
     size = 'md',
     ...props
@@ -68,7 +69,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
     );
   } else {
     return (
-      <button ref={ref} className={classes} {...props}>
+      <button ref={ref} type={type} className={classes} {...props}>
         {isLoading && <Icon icon="update" size={size} className="animate-spin mr-1" />}
         {children}
         {forDropdown && <Icon icon="chevronDown" size={size} className="ml-1 -mr-1" />}

src-web/components/core/Dialog.tsx

@@ -76,7 +76,7 @@ export function Dialog({
               {title}
             </Heading>
             {description && <p id={descriptionId}>{description}</p>}
-            <div className="mt-6">{children}</div>
+            <div className="mt-4">{children}</div>
           </motion.div>
         </div>
       </div>

src-web/components/core/Dropdown.tsx

@@ -2,7 +2,15 @@ import classnames from 'classnames';
 import FocusTrap from 'focus-trap-react';
 import { motion } from 'framer-motion';
 import type { CSSProperties, HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
-import { Children, cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  Children,
+  cloneElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useKeyPressEvent } from 'react-use';
 import { Portal } from '../Portal';
 import { Separator } from './Separator';
@@ -17,6 +25,7 @@ export type DropdownItem =
   | {
       type?: 'default';
       label: string;
+      variant?: 'danger';
       disabled?: boolean;
       hidden?: boolean;
       leftSlot?: ReactNode;
@@ -94,6 +103,17 @@ function Menu({ className, items, onClose, triggerRect }: MenuProps) {
     setMenuStyles({ maxHeight: windowBox.height - menuBox.top - 5 });
   }, []);
 
+  // Close menu on space bar
+  const handleMenuKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === ' ') {
+        e.preventDefault();
+        onClose();
+      }
+    },
+    [onClose],
+  );
+
   useKeyPressEvent('Escape', (e) => {
     e.preventDefault();
     onClose();
@@ -181,6 +201,7 @@ function Menu({ className, items, onClose, triggerRect }: MenuProps) {
           <div tabIndex={-1} aria-hidden className="fixed inset-0" onClick={onClose} />
           <motion.div
             tabIndex={0}
+            onKeyDown={handleMenuKeyDown}
             initial={{ opacity: 0, y: -5, scale: 0.98 }}
             animate={{ opacity: 1, y: 0, scale: 1 }}
             role="menu"
@@ -268,6 +289,7 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
         className,
         'min-w-[8rem] outline-none px-2 mx-1.5 h-7 flex items-center text-sm text-gray-700 whitespace-nowrap',
         'focus:bg-highlight focus:text-gray-900 rounded',
+        item.variant === 'danger' && 'text-red-600',
       )}
       {...props}
     >

src-web/components/core/Icon.tsx

@@ -23,6 +23,7 @@ import {
   MagnifyingGlassIcon,
   MoonIcon,
   PaperPlaneIcon,
+  Pencil2Icon,
   PlusCircledIcon,
   PlusIcon,
   QuestionMarkIcon,
@@ -65,6 +66,7 @@ const icons = {
   magnifyingGlass: MagnifyingGlassIcon,
   moon: MoonIcon,
   paperPlane: PaperPlaneIcon,
+  pencil: Pencil2Icon,
   plus: PlusIcon,
   plusCircle: PlusCircledIcon,
   question: QuestionMarkIcon,

src-web/components/core/StatusTag.tsx

@@ -2,11 +2,12 @@ import classnames from 'classnames';
 import type { HttpResponse } from '../../lib/models';
 
 interface Props {
-  response: Pick<HttpResponse, 'status' | 'error'>;
+  response: Pick<HttpResponse, 'status' | 'statusReason' | 'error'>;
   className?: string;
+  showReason?: boolean;
 }
 
-export function StatusTag({ response, className }: Props) {
+export function StatusTag({ response, className, showReason }: Props) {
   const { status, error } = response;
   const label = error ? 'ERR' : status;
   return (
@@ -22,7 +23,7 @@ export function StatusTag({ response, className }: Props) {
         status >= 500 && 'text-red-600',
       )}
     >
-      {label}
+      {label} {showReason && response.statusReason && response.statusReason}
     </span>
   );
 }

src-web/components/core/Tabs/Tabs.tsx

@@ -73,17 +73,17 @@ export function Tabs({
         aria-label={label}
         className={classnames(
           tabListClassName,
-          'flex items-center overflow-x-auto hide-scrollbars mt-1 mb-2',
+          'flex items-center overflow-x-auto overflow-y-visible hide-scrollbars mt-1 mb-2',
           // Give space for button focus states within overflow boundary.
-          'px-2 -mx-2',
+          '-mx-5 pl-3 py-1',
         )}
       >
-        <HStack space={1} className="flex-shrink-0">
+        <HStack space={2} className="flex-shrink-0">
           {tabs.map((t) => {
             const isActive = t.value === value;
             const btnClassName = classnames(
               isActive ? '' : 'text-gray-600 hover:text-gray-800',
-              '!px-0 mr-4 ml-[1px]',
+              '!px-2 ml-[1px]',
             );
 
             if ('options' in t) {