Hacky server streaming done

src-web/components/core/Icon.tsx

@@ -29,6 +29,7 @@ const icons = {
   magicWand: lucide.Wand2Icon,
   moreVertical: lucide.MoreVerticalIcon,
   pencil: lucide.PencilIcon,
+  plug: lucide.Plug,
   plus: lucide.PlusIcon,
   plusCircle: lucide.PlusCircleIcon,
   question: lucide.ShieldQuestionIcon,
@@ -39,6 +40,9 @@ const icons = {
   trash: lucide.TrashIcon,
   update: lucide.RefreshCcwIcon,
   upload: lucide.UploadIcon,
+  arrowUpFromDot: lucide.ArrowUpFromDotIcon,
+  arrowDownToDot: lucide.ArrowDownToDotIcon,
+  arrowUpDown: lucide.ArrowUpDownIcon,
   x: lucide.XIcon,
 
   empty: (props: HTMLAttributes<HTMLSpanElement>) => <span {...props} />,

src-web/components/core/InlineCode.tsx

@@ -6,7 +6,8 @@ export function InlineCode({ className, ...props }: HTMLAttributes<HTMLSpanEleme
     <code
       className={classNames(
         className,
-        'font-mono text-sm bg-highlight border-0 border-gray-200 px-1.5 py-0.5 rounded text-gray-800 shadow-inner',
+        'font-mono text-sm bg-highlight border-0 border-gray-200',
+        'px-1.5 py-0.5 rounded text-gray-800 shadow-inner',
       )}
       {...props}
     />

src-web/components/core/Select.tsx

@@ -6,10 +6,11 @@ interface Props<T extends string> {
   labelPosition?: 'top' | 'left';
   labelClassName?: string;
   hideLabel?: boolean;
-  value: string;
-  options: Record<T, string>;
+  value: T;
+  options: { label: string; value: T }[];
   onChange: (value: T) => void;
   size?: 'xs' | 'sm' | 'md' | 'lg';
+  className?: string;
 }
 
 export function Select<T extends string>({
@@ -21,12 +22,14 @@ export function Select<T extends string>({
   value,
   options,
   onChange,
+  className,
   size = 'md',
 }: Props<T>) {
   const id = `input-${name}`;
   return (
     <div
       className={classNames(
+        className,
         'w-full',
         'pointer-events-auto', // Just in case we're placing in disabled parent
         labelPosition === 'left' && 'flex items-center gap-2',
@@ -48,7 +51,7 @@ export function Select<T extends string>({
         style={selectBackgroundStyles}
         onChange={(e) => onChange(e.target.value as T)}
         className={classNames(
-          'font-mono text-xs border w-full px-2 outline-none bg-transparent',
+          'font-mono text-xs border w-full outline-none bg-transparent pl-2 pr-7',
           'border-highlight focus:border-focus',
           size === 'xs' && 'h-xs',
           size === 'sm' && 'h-sm',
@@ -56,8 +59,8 @@ export function Select<T extends string>({
           size === 'lg' && 'h-lg',
         )}
       >
-        {Object.entries<string>(options).map(([value, label]) => (
-          <option key={value} value={value}>
+        {options.map(({ label, value }) => (
+          <option key={label} value={value}>
             {label}
           </option>
         ))}
@@ -68,7 +71,7 @@ export function Select<T extends string>({
 
 const selectBackgroundStyles = {
   backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`,
-  backgroundPosition: 'right 0.5rem center',
+  backgroundPosition: 'right 0.3rem center',
   backgroundRepeat: 'no-repeat',
   backgroundSize: '1.5em 1.5em',
 };