@agentprojectcontext/apx 1.15.6 → 1.17.0

package/src/tui/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/tui/ui/dialog-help.tsx

@@ -0,0 +1,40 @@
+import { TextAttributes } from "@opentui/core"
+import { useTheme } from "@tui/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/tui/ui/dialog-prompt.tsx

@@ -0,0 +1,101 @@
+import { TextareaRenderable, TextAttributes } from "@opentui/core"
+import { useTheme } from "../context/theme"
+import { useDialog, type DialogContext } from "./dialog"
+import { Show, createEffect, onMount, type JSX } from "solid-js"
+import { Spinner } from "../component/spinner"
+
+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()
+  let textarea: TextareaRenderable
+
+  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
+          onSubmit={() => {
+            if (props.busy) return
+            props.onConfirm?.(textarea.plainText)
+          }}
+          height={3}
+          ref={(val: TextareaRenderable) => {
+            textarea = 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>}>
+          <text fg={theme.text}>
+            enter <span style={{ fg: theme.textMuted }}>submit</span>
+          </text>
+        </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),
+    )
+  })
+}