@neurocode-ai/tui 1.18.8

package/src/ui/border.ts

@@ -0,0 +1,21 @@
+export const EmptyBorder = {
+  topLeft: "",
+  bottomLeft: "",
+  vertical: "",
+  topRight: "",
+  bottomRight: "",
+  horizontal: " ",
+  bottomT: "",
+  topT: "",
+  cross: "",
+  leftT: "",
+  rightT: "",
+}
+
+export const SplitBorder = {
+  border: ["left" as const, "right" as const],
+  customBorderChars: {
+    ...EmptyBorder,
+    vertical: "┃",
+  },
+}

package/src/ui/dialog-alert.tsx

@@ -0,0 +1,66 @@
+import { TextAttributes } from "@opentui/core"
+import { useTheme } from "../context/theme"
+import { useDialog, type DialogContext } from "./dialog"
+import { useBindings } from "../keymap"
+
+export type DialogAlertProps = {
+  title: string
+  message: string
+  onConfirm?: () => void
+}
+
+export function DialogAlert(props: DialogAlertProps) {
+  const dialog = useDialog()
+  const { theme } = useTheme()
+
+  useBindings(() => ({
+    bindings: [
+      {
+        key: "return",
+        desc: "Confirm alert",
+        group: "Dialog",
+        cmd: () => {
+          props.onConfirm?.()
+          dialog.clear()
+        },
+      },
+    ],
+  }))
+  return (
+    <box paddingLeft={2} paddingRight={2} gap={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text attributes={TextAttributes.BOLD} fg={theme.text}>
+          {props.title}
+        </text>
+        <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
+          esc
+        </text>
+      </box>
+      <box paddingBottom={1}>
+        <text fg={theme.textMuted}>{props.message}</text>
+      </box>
+      <box flexDirection="row" justifyContent="flex-end" paddingBottom={1}>
+        <box
+          paddingLeft={3}
+          paddingRight={3}
+          backgroundColor={theme.primary}
+          onMouseUp={() => {
+            props.onConfirm?.()
+            dialog.clear()
+          }}
+        >
+          <text fg={theme.selectedListItemText}>ok</text>
+        </box>
+      </box>
+    </box>
+  )
+}
+
+DialogAlert.show = (dialog: DialogContext, title: string, message: string) => {
+  return new Promise<void>((resolve) => {
+    dialog.replace(
+      () => <DialogAlert title={title} message={message} onConfirm={() => resolve()} />,
+      () => resolve(),
+    )
+  })
+}

package/src/ui/dialog-confirm.tsx

@@ -0,0 +1,108 @@
+import { TextAttributes } from "@opentui/core"
+import { useTheme } from "../context/theme"
+import { useDialog, type DialogContext } from "./dialog"
+import { createStore } from "solid-js/store"
+import { For } from "solid-js"
+import { Locale } from "../util/locale"
+import { useBindings } from "../keymap"
+
+export type DialogConfirmProps = {
+  title: string
+  message: string
+  onConfirm?: () => void
+  onCancel?: () => void
+  label?: string
+}
+
+export type DialogConfirmResult = boolean | undefined
+
+export function DialogConfirm(props: DialogConfirmProps) {
+  const dialog = useDialog()
+  const { theme } = useTheme()
+  const [store, setStore] = createStore({
+    active: "confirm" as "confirm" | "cancel",
+  })
+
+  useBindings(() => ({
+    bindings: [
+      {
+        key: "return",
+        desc: "Confirm dialog selection",
+        group: "Dialog",
+        cmd: () => {
+          if (store.active === "confirm") props.onConfirm?.()
+          if (store.active === "cancel") props.onCancel?.()
+          dialog.clear()
+        },
+      },
+      {
+        key: "left",
+        desc: "Previous dialog option",
+        group: "Dialog",
+        cmd: () => {
+          setStore("active", store.active === "confirm" ? "cancel" : "confirm")
+        },
+      },
+      {
+        key: "right",
+        desc: "Next dialog option",
+        group: "Dialog",
+        cmd: () => {
+          setStore("active", store.active === "confirm" ? "cancel" : "confirm")
+        },
+      },
+    ],
+  }))
+  return (
+    <box paddingLeft={2} paddingRight={2} gap={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text attributes={TextAttributes.BOLD} fg={theme.text}>
+          {props.title}
+        </text>
+        <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
+          esc
+        </text>
+      </box>
+      <box paddingBottom={1}>
+        <text fg={theme.textMuted}>{props.message}</text>
+      </box>
+      <box flexDirection="row" justifyContent="flex-end" paddingBottom={1}>
+        <For each={["cancel", "confirm"] as const}>
+          {(key) => (
+            <box
+              paddingLeft={1}
+              paddingRight={1}
+              backgroundColor={key === store.active ? theme.primary : undefined}
+              onMouseUp={() => {
+                if (key === "confirm") props.onConfirm?.()
+                if (key === "cancel") props.onCancel?.()
+                dialog.clear()
+              }}
+            >
+              <text fg={key === store.active ? theme.selectedListItemText : theme.textMuted}>
+                {Locale.titlecase(key === "cancel" ? (props.label ?? key) : key)}
+              </text>
+            </box>
+          )}
+        </For>
+      </box>
+    </box>
+  )
+}
+
+DialogConfirm.show = (dialog: DialogContext, title: string, message: string, label?: string) => {
+  return new Promise<DialogConfirmResult>((resolve) => {
+    dialog.replace(
+      () => (
+        <DialogConfirm
+          title={title}
+          message={message}
+          onConfirm={() => resolve(true)}
+          onCancel={() => resolve(false)}
+          label={label}
+        />
+      ),
+      () => resolve(undefined),
+    )
+  })
+}

package/src/ui/dialog-export-options.tsx

@@ -0,0 +1,217 @@
+import { TextareaRenderable, TextAttributes } from "@opentui/core"
+import { useTheme } from "../context/theme"
+import { useDialog, type DialogContext } from "./dialog"
+import { createStore } from "solid-js/store"
+import { onMount, Show } from "solid-js"
+import { useBindings } from "../keymap"
+
+export type DialogExportOptionsProps = {
+  defaultFilename: string
+  defaultThinking: boolean
+  defaultToolDetails: boolean
+  defaultAssistantMetadata: boolean
+  defaultOpenWithoutSaving: boolean
+  onConfirm?: (options: {
+    filename: string
+    thinking: boolean
+    toolDetails: boolean
+    assistantMetadata: boolean
+    openWithoutSaving: boolean
+  }) => void
+  onCancel?: () => void
+}
+
+export function DialogExportOptions(props: DialogExportOptionsProps) {
+  const dialog = useDialog()
+  const { theme } = useTheme()
+  let textarea: TextareaRenderable
+  const [store, setStore] = createStore({
+    thinking: props.defaultThinking,
+    toolDetails: props.defaultToolDetails,
+    assistantMetadata: props.defaultAssistantMetadata,
+    openWithoutSaving: props.defaultOpenWithoutSaving,
+    active: "filename" as "filename" | "thinking" | "toolDetails" | "assistantMetadata" | "openWithoutSaving",
+  })
+
+  useBindings(() => ({
+    bindings: [
+      {
+        key: "tab",
+        desc: "Next export option",
+        group: "Dialog",
+        cmd: () => {
+          const order: Array<"filename" | "thinking" | "toolDetails" | "assistantMetadata" | "openWithoutSaving"> = [
+            "filename",
+            "thinking",
+            "toolDetails",
+            "assistantMetadata",
+            "openWithoutSaving",
+          ]
+          const currentIndex = order.indexOf(store.active)
+          const nextIndex = (currentIndex + 1) % order.length
+          setStore("active", order[nextIndex])
+        },
+      },
+    ],
+  }))
+
+  useBindings(() => ({
+    enabled: store.active !== "filename",
+    bindings: [
+      {
+        key: "space",
+        desc: "Toggle export option",
+        group: "Dialog",
+        cmd: () => {
+          if (store.active === "thinking") setStore("thinking", !store.thinking)
+          if (store.active === "toolDetails") setStore("toolDetails", !store.toolDetails)
+          if (store.active === "assistantMetadata") setStore("assistantMetadata", !store.assistantMetadata)
+          if (store.active === "openWithoutSaving") setStore("openWithoutSaving", !store.openWithoutSaving)
+        },
+      },
+    ],
+  }))
+
+  onMount(() => {
+    dialog.setSize("medium")
+    setTimeout(() => {
+      if (!textarea || textarea.isDestroyed) return
+      textarea.focus()
+    }, 1)
+    textarea.gotoLineEnd()
+  })
+
+  return (
+    <box paddingLeft={2} paddingRight={2} gap={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text attributes={TextAttributes.BOLD} fg={theme.text}>
+          Export Options
+        </text>
+        <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
+          esc
+        </text>
+      </box>
+      <box gap={1}>
+        <box>
+          <text fg={theme.text}>Filename:</text>
+        </box>
+        <textarea
+          onSubmit={() => {
+            props.onConfirm?.({
+              filename: textarea.plainText,
+              thinking: store.thinking,
+              toolDetails: store.toolDetails,
+              assistantMetadata: store.assistantMetadata,
+              openWithoutSaving: store.openWithoutSaving,
+            })
+          }}
+          height={3}
+          ref={(val: TextareaRenderable) => {
+            textarea = val
+            val.traits = { status: "FILENAME" }
+          }}
+          initialValue={props.defaultFilename}
+          placeholder="Enter filename"
+          placeholderColor={theme.textMuted}
+          textColor={theme.text}
+          focusedTextColor={theme.text}
+          cursorColor={theme.text}
+        />
+      </box>
+      <box flexDirection="column">
+        <box
+          flexDirection="row"
+          gap={2}
+          paddingLeft={1}
+          backgroundColor={store.active === "thinking" ? theme.backgroundElement : undefined}
+          onMouseUp={() => setStore("active", "thinking")}
+        >
+          <text fg={store.active === "thinking" ? theme.primary : theme.textMuted}>
+            {store.thinking ? "[x]" : "[ ]"}
+          </text>
+          <text fg={store.active === "thinking" ? theme.primary : theme.text}>Include thinking</text>
+        </box>
+        <box
+          flexDirection="row"
+          gap={2}
+          paddingLeft={1}
+          backgroundColor={store.active === "toolDetails" ? theme.backgroundElement : undefined}
+          onMouseUp={() => setStore("active", "toolDetails")}
+        >
+          <text fg={store.active === "toolDetails" ? theme.primary : theme.textMuted}>
+            {store.toolDetails ? "[x]" : "[ ]"}
+          </text>
+          <text fg={store.active === "toolDetails" ? theme.primary : theme.text}>Include tool details</text>
+        </box>
+        <box
+          flexDirection="row"
+          gap={2}
+          paddingLeft={1}
+          backgroundColor={store.active === "assistantMetadata" ? theme.backgroundElement : undefined}
+          onMouseUp={() => setStore("active", "assistantMetadata")}
+        >
+          <text fg={store.active === "assistantMetadata" ? theme.primary : theme.textMuted}>
+            {store.assistantMetadata ? "[x]" : "[ ]"}
+          </text>
+          <text fg={store.active === "assistantMetadata" ? theme.primary : theme.text}>Include assistant metadata</text>
+        </box>
+        <box
+          flexDirection="row"
+          gap={2}
+          paddingLeft={1}
+          backgroundColor={store.active === "openWithoutSaving" ? theme.backgroundElement : undefined}
+          onMouseUp={() => setStore("active", "openWithoutSaving")}
+        >
+          <text fg={store.active === "openWithoutSaving" ? theme.primary : theme.textMuted}>
+            {store.openWithoutSaving ? "[x]" : "[ ]"}
+          </text>
+          <text fg={store.active === "openWithoutSaving" ? theme.primary : theme.text}>Open without saving</text>
+        </box>
+      </box>
+      <Show when={store.active !== "filename"}>
+        <text fg={theme.textMuted} paddingBottom={1}>
+          Press <span style={{ fg: theme.text }}>space</span> to toggle, <span style={{ fg: theme.text }}>return</span>{" "}
+          to confirm
+        </text>
+      </Show>
+      <Show when={store.active === "filename"}>
+        <text fg={theme.textMuted} paddingBottom={1}>
+          Press <span style={{ fg: theme.text }}>return</span> to confirm, <span style={{ fg: theme.text }}>tab</span>{" "}
+          for options
+        </text>
+      </Show>
+    </box>
+  )
+}
+
+DialogExportOptions.show = (
+  dialog: DialogContext,
+  defaultFilename: string,
+  defaultThinking: boolean,
+  defaultToolDetails: boolean,
+  defaultAssistantMetadata: boolean,
+  defaultOpenWithoutSaving: boolean,
+) => {
+  return new Promise<{
+    filename: string
+    thinking: boolean
+    toolDetails: boolean
+    assistantMetadata: boolean
+    openWithoutSaving: boolean
+  } | null>((resolve) => {
+    dialog.replace(
+      () => (
+        <DialogExportOptions
+          defaultFilename={defaultFilename}
+          defaultThinking={defaultThinking}
+          defaultToolDetails={defaultToolDetails}
+          defaultAssistantMetadata={defaultAssistantMetadata}
+          defaultOpenWithoutSaving={defaultOpenWithoutSaving}
+          onConfirm={(options) => resolve(options)}
+          onCancel={() => resolve(null)}
+        />
+      ),
+      () => resolve(null),
+    )
+  })
+}

package/src/ui/dialog-help.tsx

@@ -0,0 +1,40 @@
+import { TextAttributes } from "@opentui/core"
+import { useTheme } from "../context/theme"
+import { useDialog } from "./dialog"
+import { useBindings, useCommandShortcut } from "../keymap"
+
+export function DialogHelp() {
+  const dialog = useDialog()
+  const { theme } = useTheme()
+  const commandShortcut = useCommandShortcut("command.palette.show")
+
+  useBindings(() => ({
+    bindings: [
+      { key: "return", desc: "Close help", group: "Dialog", cmd: () => dialog.clear() },
+      { key: "escape", desc: "Close help", group: "Dialog", cmd: () => dialog.clear() },
+    ],
+  }))
+
+  return (
+    <box paddingLeft={2} paddingRight={2} gap={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text attributes={TextAttributes.BOLD} fg={theme.text}>
+          Help
+        </text>
+        <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
+          esc/enter
+        </text>
+      </box>
+      <box paddingBottom={1}>
+        <text fg={theme.textMuted}>
+          Press {commandShortcut()} to see all available actions and commands in any context.
+        </text>
+      </box>
+      <box flexDirection="row" justifyContent="flex-end" paddingBottom={1}>
+        <box paddingLeft={3} paddingRight={3} backgroundColor={theme.primary} onMouseUp={() => dialog.clear()}>
+          <text fg={theme.selectedListItemText}>ok</text>
+        </box>
+      </box>
+    </box>
+  )
+}

package/src/ui/dialog-prompt.tsx

@@ -0,0 +1,126 @@
+import { TextareaRenderable, TextAttributes } from "@opentui/core"
+import { useTheme } from "../context/theme"
+import { useDialog, type DialogContext } from "./dialog"
+import { Show, createEffect, createSignal, onMount, type JSX } from "solid-js"
+import { Spinner } from "../component/spinner"
+import { useTuiConfig } from "../config"
+import { useBindings, useCommandShortcut } from "../keymap"
+
+export type DialogPromptProps = {
+  title: string
+  description?: () => JSX.Element
+  placeholder?: string
+  value?: string
+  busy?: boolean
+  busyText?: string
+  onConfirm?: (value: string) => void
+  onCancel?: () => void
+}
+
+export function DialogPrompt(props: DialogPromptProps) {
+  const dialog = useDialog()
+  const { theme } = useTheme()
+  const tuiConfig = useTuiConfig()
+  const submitShortcut = useCommandShortcut("dialog.prompt.submit")
+  const [textareaTarget, setTextareaTarget] = createSignal<TextareaRenderable>()
+  let textarea: TextareaRenderable
+
+  function confirm() {
+    if (props.busy) return
+    props.onConfirm?.(textarea.plainText)
+  }
+
+  useBindings(() => ({
+    target: textareaTarget,
+    enabled: textareaTarget() !== undefined && !props.busy,
+    // Dialog form semantics must win over the global managed textarea input layer.
+    priority: 1,
+    commands: [
+      {
+        name: "dialog.prompt.submit",
+        title: "Submit dialog prompt",
+        category: "Dialog",
+        run: confirm,
+      },
+    ],
+    bindings: tuiConfig.keybinds.gather("dialog.prompt", ["dialog.prompt.submit"]),
+  }))
+
+  onMount(() => {
+    dialog.setSize("medium")
+    setTimeout(() => {
+      if (!textarea || textarea.isDestroyed) return
+      if (props.busy) return
+      textarea.focus()
+    }, 1)
+    textarea.gotoLineEnd()
+  })
+
+  createEffect(() => {
+    if (!textarea || textarea.isDestroyed) return
+    const traits = props.busy
+      ? {
+          suspend: true,
+          status: "BUSY",
+        }
+      : {}
+    textarea.traits = traits
+    if (props.busy) {
+      textarea.blur()
+      return
+    }
+    textarea.focus()
+  })
+
+  return (
+    <box paddingLeft={2} paddingRight={2} gap={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text attributes={TextAttributes.BOLD} fg={theme.text}>
+          {props.title}
+        </text>
+        <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
+          esc
+        </text>
+      </box>
+      <box gap={1}>
+        {props.description?.()}
+        <textarea
+          height={3}
+          ref={(val: TextareaRenderable) => {
+            textarea = val
+            setTextareaTarget(val)
+          }}
+          initialValue={props.value}
+          placeholder={props.placeholder ?? "Enter text"}
+          placeholderColor={theme.textMuted}
+          textColor={props.busy ? theme.textMuted : theme.text}
+          focusedTextColor={props.busy ? theme.textMuted : theme.text}
+          cursorColor={props.busy ? theme.backgroundElement : theme.text}
+        />
+        <Show when={props.busy}>
+          <Spinner color={theme.textMuted}>{props.busyText ?? "Working..."}</Spinner>
+        </Show>
+      </box>
+      <box paddingBottom={1} gap={1} flexDirection="row">
+        <Show when={!props.busy} fallback={<text fg={theme.textMuted}>processing...</text>}>
+          <Show when={submitShortcut()}>
+            <text fg={theme.text}>
+              {submitShortcut()} <span style={{ fg: theme.textMuted }}>submit</span>
+            </text>
+          </Show>
+        </Show>
+      </box>
+    </box>
+  )
+}
+
+DialogPrompt.show = (dialog: DialogContext, title: string, options?: Omit<DialogPromptProps, "title">) => {
+  return new Promise<string | null>((resolve) => {
+    dialog.replace(
+      () => (
+        <DialogPrompt title={title} {...options} onConfirm={(value) => resolve(value)} onCancel={() => resolve(null)} />
+      ),
+      () => resolve(null),
+    )
+  })
+}