gloomberb 0.5.1 → 0.6.1

package/src/components/ui/message-composer.test.tsx

@@ -0,0 +1,81 @@
+import { afterEach, expect, test } from "bun:test";
+import { act, useRef, useState } from "react";
+import { testRender } from "../../renderers/opentui/test-utils";
+import { type TextareaRenderable } from "../../ui";
+import { MessageComposer } from "./message-composer";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+
+afterEach(() => {
+  if (testSetup) {
+    testSetup.renderer.destroy();
+    testSetup = undefined;
+  }
+});
+
+test("renders a terminal prefix, focuses on click, types, and submits", async () => {
+  let focusRequests = 0;
+  let submitted = "";
+
+  function Harness() {
+    const [focused, setFocused] = useState(false);
+    const inputRef = useRef<TextareaRenderable>(null);
+
+    return (
+      <MessageComposer
+        inputRef={inputRef}
+        initialValue=""
+        focused={focused}
+        placeholder="Say something..."
+        width={32}
+        height={1}
+        terminalPrefix=" > "
+        onFocusRequest={() => {
+          focusRequests += 1;
+          setFocused(true);
+        }}
+        keyBindings={[{ name: "return", action: "submit" }]}
+        onSubmit={() => {
+          submitted = inputRef.current?.editBuffer.getText() ?? "";
+        }}
+      />
+    );
+  }
+
+  await act(async () => {
+    testSetup = await testRender(<Harness />, { width: 32, height: 3 });
+  });
+
+  await act(async () => {
+    await testSetup!.renderOnce();
+  });
+
+  const initialLines = testSetup.captureCharFrame().split("\n");
+  const inputRow = initialLines.findIndex((line) => line.includes("Say something..."));
+  const inputCol = initialLines[inputRow]?.indexOf("Say something...") ?? -1;
+
+  expect(inputRow).toBeGreaterThanOrEqual(0);
+  expect(inputCol).toBeGreaterThanOrEqual(0);
+  expect(initialLines[inputRow]).toContain("> Say something...");
+
+  await act(async () => {
+    await testSetup!.mockMouse.click(inputCol + 1, inputRow);
+    await testSetup!.renderOnce();
+  });
+
+  expect(focusRequests).toBe(1);
+
+  await act(async () => {
+    await testSetup!.mockInput.typeText("hello");
+    await testSetup!.renderOnce();
+  });
+
+  expect(testSetup.captureCharFrame()).toContain("> hello");
+
+  await act(async () => {
+    testSetup!.mockInput.pressEnter();
+    await testSetup!.renderOnce();
+  });
+
+  expect(submitted).toBe("hello");
+});

package/src/components/ui/message-composer.tsx

@@ -0,0 +1,139 @@
+import { Box, Text, Textarea, useUiHost } from "../../ui";
+import { type ComponentType, type RefObject } from "react";
+import { type TextareaRenderable } from "../../ui";
+import { colors } from "../../theme/colors";
+
+export interface MessageComposerProps {
+  inputRef?: RefObject<TextareaRenderable | null>;
+  initialValue?: string;
+  focused?: boolean;
+  placeholder?: string;
+  width?: number | string;
+  height?: number | string;
+  terminalPrefix?: string;
+  terminalDivider?: boolean;
+  terminalBottomInset?: number;
+  onFocusRequest?: () => void;
+  onInput?: (value: string) => void;
+  onSubmit?: () => void;
+  keyBindings?: Array<Record<string, unknown>>;
+  wrapText?: boolean;
+}
+
+export interface MessageComposerBlockHeightOptions {
+  height?: MessageComposerProps["height"];
+  nativePaneChrome?: boolean;
+  terminalDivider?: boolean;
+  terminalBottomInset?: number;
+}
+
+export function getMessageComposerBlockHeight({
+  height = 1,
+  nativePaneChrome = false,
+  terminalDivider = true,
+  terminalBottomInset = 0,
+}: MessageComposerBlockHeightOptions = {}) {
+  const inputHeight = typeof height === "number" ? height : 1;
+  if (nativePaneChrome) return inputHeight;
+  return inputHeight + (terminalDivider ? 1 : 0) + Math.max(0, Math.floor(terminalBottomInset));
+}
+
+export function MessageComposer({
+  inputRef,
+  initialValue = "",
+  focused = false,
+  placeholder = "",
+  width,
+  height = 1,
+  terminalPrefix = " > ",
+  terminalDivider = true,
+  terminalBottomInset = 0,
+  onFocusRequest,
+  onInput,
+  onSubmit,
+  keyBindings,
+  wrapText = false,
+}: MessageComposerProps) {
+  const HostMessageComposer = useUiHost().MessageComposer as ComponentType<MessageComposerProps> | undefined;
+  if (HostMessageComposer) {
+    return (
+      <HostMessageComposer
+        inputRef={inputRef}
+        initialValue={initialValue}
+        focused={focused}
+        placeholder={placeholder}
+        width={width}
+        height={height}
+        terminalPrefix={terminalPrefix}
+        terminalDivider={terminalDivider}
+        terminalBottomInset={terminalBottomInset}
+        onFocusRequest={onFocusRequest}
+        onInput={onInput}
+        onSubmit={onSubmit}
+        keyBindings={keyBindings}
+        wrapText={wrapText}
+      />
+    );
+  }
+
+  const prefixWidth = terminalPrefix.length;
+  const textWidth = typeof width === "number" ? Math.max(width - prefixWidth, 1) : undefined;
+  const bottomInsetHeight = Math.max(0, Math.floor(terminalBottomInset));
+  const totalHeight = typeof height === "number"
+    ? getMessageComposerBlockHeight({ height, terminalDivider, terminalBottomInset })
+    : height;
+  const requestFocus = () => {
+    onFocusRequest?.();
+    inputRef?.current?.focus?.();
+  };
+  const handleInput = (value: string) => {
+    if (!focused) onFocusRequest?.();
+    onInput?.(value);
+  };
+
+  return (
+    <Box
+      flexDirection="column"
+      width={width}
+      height={totalHeight}
+    >
+      {terminalDivider && (
+        <Box height={1} width={width} overflow="hidden">
+          <Text fg={colors.border}>{"-".repeat(typeof width === "number" ? width : 0)}</Text>
+        </Box>
+      )}
+      <Box
+        flexDirection="row"
+        width={width}
+        height={height}
+        onMouseDown={requestFocus}
+      >
+        {terminalPrefix.length > 0 && (
+          <Box width={prefixWidth} height={height}>
+            <Text fg={colors.textDim}>{terminalPrefix}</Text>
+          </Box>
+        )}
+        <Box width={textWidth ?? "100%"} height={height}>
+          <Textarea
+            ref={inputRef}
+            initialValue={initialValue}
+            width={textWidth ?? "100%"}
+            height={height}
+            focused={focused}
+            placeholder={placeholder}
+            placeholderColor={colors.textMuted}
+            textColor={colors.text}
+            backgroundColor={colors.bg}
+            focusedBackgroundColor={colors.bg}
+            cursorColor={colors.textBright}
+            onInput={handleInput}
+            keyBindings={keyBindings}
+            onSubmit={onSubmit}
+            wrapText={wrapText}
+          />
+        </Box>
+      </Box>
+      {bottomInsetHeight > 0 && <Box height={bottomInsetHeight} width={width} />}
+    </Box>
+  );
+}

package/src/components/ui/multi-select-dialog.tsx

@@ -1,15 +1,23 @@
-import { TextAttributes } from "@opentui/core";
-import { useKeyboard } from "@opentui/react";
-import { useDialog, useDialogKeyboard, type AlertContext } from "@opentui-ui/dialog/react";
+import { Box, Text, useUiHost } from "../../ui";
+import { TextAttributes } from "../../ui";
+import { useShortcut } from "../../react/input";
+import { type AlertContext, useDialog, useDialogKeyboard } from "../../ui/dialog";
 import { type ReactNode, useEffect, useMemo, useState } from "react";
 import { colors } from "../../theme/colors";
+import { isDetailBackNavigationKey } from "../../utils/back-navigation";
 import { ToggleList } from "../toggle-list";
 import { Button } from "./button";
 import { DialogFrame } from "./frame";
 import {
+  getMultiSelectDisplayValues,
+  mergeMultiSelectDisplayValues,
+  moveMultiSelectDisplayValue,
   moveMultiSelectValue,
   normalizeMultiSelectValues,
+  normalizeOrderedMultiSelectValues,
+  orderMultiSelectOptionsForDisplay,
   summarizeMultiSelectValues,
+  toggleOrderedMultiSelectValue,
   toggleMultiSelectValue,
   type MultiSelectOption,
 } from "./multi-select";
@@ -70,6 +78,16 @@ function matchesShortcut(event: { name?: string; sequence?: string }, shortcutKe
   });
 }
 
+function normalizeDialogSelectedValues(
+  options: readonly MultiSelectOption[],
+  values: readonly string[],
+  ordered: boolean,
+): string[] {
+  return ordered
+    ? normalizeOrderedMultiSelectValues(options, values)
+    : normalizeMultiSelectValues(options, values);
+}
+
 export function MultiSelectDialogContent({
   dismiss,
   dialogId,
@@ -80,12 +98,18 @@ export function MultiSelectDialogContent({
   ordered = false,
   idPrefix,
 }: MultiSelectDialogContentProps) {
+  const isDesktopWeb = useUiHost().kind === "desktop-web";
   const optionByValue = useMemo(() => new Map(options.map((option) => [option.value, option])), [options]);
-  const [selectedValues, setSelectedValues] = useState(() => normalizeMultiSelectValues(options, selectedValuesProp));
+  const [selectedValues, setSelectedValues] = useState(() => normalizeDialogSelectedValues(options, selectedValuesProp, ordered));
+  const [displayValues, setDisplayValues] = useState(() => getMultiSelectDisplayValues(options, selectedValuesProp, ordered));
   const knownSelectedValues = selectedValues.filter((value) => optionByValue.has(value));
+  const displayOptions = useMemo(
+    () => orderMultiSelectOptionsForDisplay(options, displayValues),
+    [displayValues, options],
+  );
   const [selectedOptionId, setSelectedOptionId] = useState(options[0]?.value ?? "");
-  const selectedIndex = Math.max(0, options.findIndex((option) => option.value === selectedOptionId));
-  const selectedOption = options[selectedIndex];
+  const selectedIndex = Math.max(0, displayOptions.findIndex((option) => option.value === selectedOptionId));
+  const selectedOption = displayOptions[selectedIndex];
   const selectedOptionValue = selectedOption?.value ?? "";
   const selectedValueOrder = knownSelectedValues.indexOf(selectedOptionValue);
   const canMoveUp = ordered && selectedValueOrder > 0;
@@ -94,15 +118,16 @@ export function MultiSelectDialogContent({
     && selectedValueOrder < knownSelectedValues.length - 1;
 
   useEffect(() => {
-    setSelectedValues(normalizeMultiSelectValues(options, selectedValuesProp));
-  }, [options, selectedValuesProp]);
+    setSelectedValues((values) => normalizeDialogSelectedValues(options, values, ordered));
+    setDisplayValues((values) => mergeMultiSelectDisplayValues(options, values));
+  }, [options, ordered]);
 
   useEffect(() => {
-    if (options.some((option) => option.value === selectedOptionId)) return;
-    setSelectedOptionId(options[0]?.value ?? "");
-  }, [options, selectedOptionId]);
+    if (displayOptions.some((option) => option.value === selectedOptionId)) return;
+    setSelectedOptionId(displayOptions[0]?.value ?? "");
+  }, [displayOptions, selectedOptionId]);
 
-  const toggleItems = options.map((option) => {
+  const toggleItems = displayOptions.map((option) => {
     const order = knownSelectedValues.indexOf(option.value);
     const orderDescription = ordered && order >= 0
       ? `Order ${order + 1} of ${knownSelectedValues.length}.`
@@ -111,70 +136,93 @@ export function MultiSelectDialogContent({
     return {
       id: option.value,
       label: option.label,
+      disabled: option.disabled,
       enabled: selectedValues.includes(option.value),
       description: [option.description, orderDescription].filter((entry): entry is string => !!entry).join(" "),
     };
   });
-  const listHeight = Math.min(12, Math.max(6, toggleItems.length));
+  const listHeight = isDesktopWeb
+    ? Math.min(12, Math.max(5, displayOptions.length * 1.35))
+    : Math.min(12, Math.max(6, toggleItems.length));
 
-  const applySelectedValues = async (nextValues: string[]) => {
+  const applySelectedValues = async (nextValues: string[], nextDisplayValues = displayValues) => {
     const previousValues = selectedValues;
+    const previousDisplayValues = displayValues;
     setSelectedValues(nextValues);
+    setDisplayValues(nextDisplayValues);
     try {
       await onChange(nextValues);
     } catch (error) {
       setSelectedValues(previousValues);
+      setDisplayValues(previousDisplayValues);
       throw error;
     }
   };
 
   const toggleOption = async (option: MultiSelectOption | undefined) => {
     if (!option || option.disabled) return;
-    await applySelectedValues(toggleMultiSelectValue(options, selectedValues, option.value));
+    await applySelectedValues(ordered
+      ? toggleOrderedMultiSelectValue(options, selectedValues, option.value)
+      : toggleMultiSelectValue(options, selectedValues, option.value));
   };
 
   const moveOption = async (direction: "up" | "down") => {
     if (!ordered || !selectedOption) return;
-    await applySelectedValues(moveMultiSelectValue(options, selectedValues, selectedOption.value, direction));
+    await applySelectedValues(
+      moveMultiSelectValue(options, selectedValues, selectedOption.value, direction),
+      moveMultiSelectDisplayValue(displayValues, knownSelectedValues, selectedOption.value, direction),
+    );
   };
 
   useDialogKeyboard((event) => {
     event.stopPropagation();
     if (event.name === "up" || event.name === "k") {
       const nextIndex = Math.max(0, selectedIndex - 1);
-      setSelectedOptionId(options[nextIndex]?.value ?? selectedOptionId);
+      setSelectedOptionId(displayOptions[nextIndex]?.value ?? selectedOptionId);
     } else if (event.name === "down" || event.name === "j") {
-      const nextIndex = Math.min(options.length - 1, selectedIndex + 1);
-      setSelectedOptionId(options[nextIndex]?.value ?? selectedOptionId);
+      const nextIndex = Math.min(displayOptions.length - 1, selectedIndex + 1);
+      setSelectedOptionId(displayOptions[nextIndex]?.value ?? selectedOptionId);
     } else if (isSpaceKey(event)) {
       void toggleOption(selectedOption).catch(() => {});
     } else if (event.name === "[" && ordered) {
       void moveOption("up").catch(() => {});
     } else if (event.name === "]" && ordered) {
       void moveOption("down").catch(() => {});
-    } else if (event.name === "enter" || event.name === "return" || event.name === "escape") {
+    } else if (event.name === "enter" || event.name === "return" || event.name === "escape" || isDetailBackNavigationKey(event)) {
       dismiss();
     }
   }, dialogId);
 
   return (
-    <DialogFrame title={title}>
-      <box flexDirection="column" gap={1}>
+    <DialogFrame title={title} showTitleDivider={!isDesktopWeb}>
+      <Box
+        flexDirection="column"
+        gap={1}
+        style={isDesktopWeb ? { minWidth: 520 } : undefined}
+      >
         <ToggleList
           items={toggleItems}
           selectedIdx={selectedIndex}
-          bgColor={colors.commandBg}
+          bgColor={isDesktopWeb ? "transparent" : colors.commandBg}
           height={listHeight}
           scrollable
           showSelectedDescription={false}
           rowIdPrefix={idPrefix ? `${idPrefix}:option` : undefined}
-          onSelect={(index) => setSelectedOptionId(options[index]?.value ?? selectedOptionId)}
+          rowGap={isDesktopWeb ? 0 : undefined}
+          rowHeight={isDesktopWeb ? 1.35 : undefined}
+          surface={isDesktopWeb ? "plain" : undefined}
+          onSelect={(index) => setSelectedOptionId(displayOptions[index]?.value ?? selectedOptionId)}
           onToggle={(id) => {
             setSelectedOptionId(id);
             void toggleOption(optionByValue.get(id)).catch(() => {});
           }}
         />
-        <box flexDirection="row" gap={1}>
+        <Box
+          flexDirection="row"
+          gap={1}
+          justifyContent={isDesktopWeb ? "flex-end" : undefined}
+          style={isDesktopWeb ? { paddingTop: 6 } : undefined}
+        >
           {ordered && (
             <>
               <Button label="Move Up" variant="ghost" disabled={!canMoveUp} onPress={() => { void moveOption("up").catch(() => {}); }} />
@@ -182,8 +230,8 @@ export function MultiSelectDialogContent({
             </>
           )}
           <Button label="Done" variant="primary" onPress={dismiss} />
-        </box>
-      </box>
+        </Box>
+      </Box>
     </DialogFrame>
   );
 }
@@ -202,6 +250,7 @@ export function MultiSelectDialogButton({
   shortcutKey,
   shortcutActive = false,
 }: MultiSelectDialogButtonProps) {
+  const isDesktopWeb = useUiHost().kind === "desktop-web";
   const dialog = useDialog();
   const summary = summarizeMultiSelectValues({ options, selectedValues, emptyLabel });
   const buttonLabel = `${label}: ${summary}`;
@@ -226,7 +275,7 @@ export function MultiSelectDialogButton({
     }).catch(() => {});
   };
 
-  useKeyboard((event) => {
+  useShortcut((event) => {
     if (!shortcutActive || disabled || !matchesShortcut(event, shortcutKey)) return;
     openDialog(event);
   });
@@ -242,8 +291,27 @@ export function MultiSelectDialogButton({
     });
   }
 
+  if (isDesktopWeb) {
+    return (
+      <Box
+        id={idPrefix ? `${idPrefix}:button` : undefined}
+        height={1}
+        flexDirection="row"
+        onMouseDown={stopMouseEvent}
+        onMouseUp={stopMouseEvent}
+      >
+        <Button
+          label={buttonLabel}
+          variant="secondary"
+          disabled={disabled}
+          onPress={() => openDialog()}
+        />
+      </Box>
+    );
+  }
+
   return (
-    <box
+    <Box
       id={idPrefix ? `${idPrefix}:button` : undefined}
       height={1}
       width={buttonText.length}
@@ -252,15 +320,15 @@ export function MultiSelectDialogButton({
       onMouseDown={stopMouseEvent}
       onMouseUp={openDialog}
     >
-      <text
+      <Text
         fg={disabled ? colors.textMuted : colors.selectedText}
         attributes={TextAttributes.BOLD}
         onMouseDown={stopMouseEvent}
         onMouseUp={openDialog}
       >
         {buttonText}
-      </text>
-    </box>
+      </Text>
+    </Box>
   );
 }
 

package/src/components/ui/multi-select.ts

@@ -1,3 +1,4 @@
+
 export interface MultiSelectOption {
   value: string;
   label: string;
@@ -18,6 +19,29 @@ export function normalizeMultiSelectValues(
   ];
 }
 
+export function normalizeOrderedMultiSelectValues(
+  options: readonly MultiSelectOption[],
+  values: readonly string[],
+): string[] {
+  const knownValues = new Set(options.map((option) => option.value));
+  const seen = new Set<string>();
+  const nextValues: string[] = [];
+
+  for (const value of values) {
+    if (seen.has(value)) continue;
+    seen.add(value);
+    if (knownValues.has(value)) nextValues.push(value);
+  }
+
+  for (const value of values) {
+    if (!knownValues.has(value) && !nextValues.includes(value)) {
+      nextValues.push(value);
+    }
+  }
+
+  return nextValues;
+}
+
 export function toggleMultiSelectValue(
   options: readonly MultiSelectOption[],
   selectedValues: readonly string[],
@@ -33,6 +57,22 @@ export function toggleMultiSelectValue(
   return normalizeMultiSelectValues(options, [...nextSelected]);
 }
 
+export function toggleOrderedMultiSelectValue(
+  options: readonly MultiSelectOption[],
+  selectedValues: readonly string[],
+  value: string,
+): string[] {
+  const knownValues = new Set(options.map((option) => option.value));
+  const normalized = normalizeOrderedMultiSelectValues(options, selectedValues);
+  if (normalized.includes(value)) {
+    return normalized.filter((entry) => entry !== value);
+  }
+
+  const knownSelected = normalized.filter((entry) => knownValues.has(entry));
+  const unknownSelected = normalized.filter((entry) => !knownValues.has(entry));
+  return [...knownSelected, value, ...unknownSelected];
+}
+
 export function moveMultiSelectValue(
   options: readonly MultiSelectOption[],
   selectedValues: readonly string[],
@@ -58,6 +98,78 @@ export function moveMultiSelectValue(
   return [...next, ...unknownValues];
 }
 
+export function getMultiSelectDisplayValues(
+  options: readonly MultiSelectOption[],
+  selectedValues: readonly string[],
+  ordered: boolean,
+): string[] {
+  const optionValues = options.map((option) => option.value);
+  if (!ordered) return optionValues;
+
+  const selectedQueue = normalizeOrderedMultiSelectValues(options, selectedValues);
+  const selectedValueSet = new Set(selectedQueue);
+  const displayValues: string[] = [];
+
+  for (const option of options) {
+    if (selectedValueSet.has(option.value)) {
+      displayValues.push(selectedQueue.shift() ?? option.value);
+    } else {
+      displayValues.push(option.value);
+    }
+  }
+
+  return displayValues;
+}
+
+export function mergeMultiSelectDisplayValues(
+  options: readonly MultiSelectOption[],
+  displayValues: readonly string[],
+): string[] {
+  const optionValues = options.map((option) => option.value);
+  const optionValueSet = new Set(optionValues);
+  const nextValues = displayValues.filter((value) => optionValueSet.has(value));
+  const nextValueSet = new Set(nextValues);
+  return [
+    ...nextValues,
+    ...optionValues.filter((value) => !nextValueSet.has(value)),
+  ];
+}
+
+export function orderMultiSelectOptionsForDisplay(
+  options: readonly MultiSelectOption[],
+  displayValues: readonly string[],
+): MultiSelectOption[] {
+  const optionByValue = new Map(options.map((option) => [option.value, option]));
+  return mergeMultiSelectDisplayValues(options, displayValues)
+    .map((value) => optionByValue.get(value))
+    .filter((option): option is MultiSelectOption => option != null);
+}
+
+export function moveMultiSelectDisplayValue(
+  displayValues: readonly string[],
+  selectedValues: readonly string[],
+  selectedOption: string,
+  direction: "up" | "down",
+): string[] {
+  const selectedIndex = selectedValues.indexOf(selectedOption);
+  if (selectedIndex < 0) return [...displayValues];
+
+  const targetIndex = direction === "up"
+    ? Math.max(0, selectedIndex - 1)
+    : Math.min(selectedValues.length - 1, selectedIndex + 1);
+  if (targetIndex === selectedIndex) return [...displayValues];
+
+  const targetOption = selectedValues[targetIndex];
+  const sourceDisplayIndex = displayValues.indexOf(selectedOption);
+  const targetDisplayIndex = targetOption ? displayValues.indexOf(targetOption) : -1;
+  if (sourceDisplayIndex < 0 || targetDisplayIndex < 0) return [...displayValues];
+
+  const nextDisplayValues = [...displayValues];
+  nextDisplayValues[sourceDisplayIndex] = targetOption!;
+  nextDisplayValues[targetDisplayIndex] = selectedOption;
+  return nextDisplayValues;
+}
+
 export function summarizeMultiSelectValues({
   options,
   selectedValues,