nikcli 0.0.6

package/src/cli/cmd/tui/attach.ts

@@ -0,0 +1,31 @@
+import { cmd } from "../cmd"
+import { tui } from "./app"
+
+export const AttachCommand = cmd({
+  command: "attach <url>",
+  describe: "attach to a running nikcli server",
+  builder: (yargs) =>
+    yargs
+      .positional("url", {
+        type: "string",
+        describe: "http://localhost:4096",
+        demandOption: true,
+      })
+      .option("dir", {
+        type: "string",
+        description: "directory to run in",
+      })
+      .option("session", {
+        alias: ["s"],
+        type: "string",
+        describe: "session id to continue",
+      }),
+  handler: async (args) => {
+    if (args.dir) process.chdir(args.dir)
+    await tui({
+      url: args.url,
+      args: { sessionID: args.session },
+      directory: args.dir ? process.cwd() : undefined,
+    })
+  },
+})

package/src/cli/cmd/tui/component/border.tsx

@@ -0,0 +1,75 @@
+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: "┃",
+  },
+}
+
+// Glass/Rounded border characters for glassmorphism effect
+export const GlassBorder = {
+  border: ["top", "bottom", "left", "right"] as const,
+  customBorderChars: {
+    topLeft: "╭",
+    topRight: "╮",
+    bottomLeft: "╰",
+    bottomRight: "╯",
+    vertical: "│",
+    horizontal: "─",
+    topT: "┬",
+    bottomT: "┴",
+    leftT: "├",
+    rightT: "┤",
+    cross: "┼",
+  },
+}
+
+// Glass border with lighter/blurred effect characters
+export const GlassBorderLight = {
+  border: ["top", "bottom", "left", "right"] as const,
+  customBorderChars: {
+    topLeft: "╭",
+    topRight: "╮",
+    bottomLeft: "╰",
+    bottomRight: "╯",
+    vertical: "│",
+    horizontal: "─",
+    topT: "┬",
+    bottomT: "┴",
+    leftT: "├",
+    rightT: "┤",
+    cross: "┼",
+  },
+}
+
+// Minimal glass border - only corners, no sides
+export const GlassBorderMinimal = {
+  border: [] as const,
+  customBorderChars: {
+    topLeft: "╭",
+    topRight: "╮",
+    bottomLeft: "╰",
+    bottomRight: "╯",
+    vertical: "│",
+    horizontal: "─",
+    topT: "┬",
+    bottomT: "┴",
+    leftT: "├",
+    rightT: "┤",
+    cross: "┼",
+  },
+}

package/src/cli/cmd/tui/component/dialog-agent.tsx

@@ -0,0 +1,31 @@
+import { createMemo } from "solid-js"
+import { useLocal } from "@tui/context/local"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+
+export function DialogAgent() {
+  const local = useLocal()
+  const dialog = useDialog()
+
+  const options = createMemo(() =>
+    local.agent.list().map((item) => {
+      return {
+        value: item.name,
+        title: item.name,
+        description: item.native ? "native" : item.description,
+      }
+    }),
+  )
+
+  return (
+    <DialogSelect
+      title="Select agent"
+      current={local.agent.current().name}
+      options={options()}
+      onSelect={(option) => {
+        local.agent.set(option.value)
+        dialog.clear()
+      }}
+    />
+  )
+}

package/src/cli/cmd/tui/component/dialog-command.tsx

@@ -0,0 +1,172 @@
+import { useDialog } from "@tui/ui/dialog"
+import { DialogSelect, type DialogSelectOption, type DialogSelectRef } from "@tui/ui/dialog-select"
+import {
+  createContext,
+  createMemo,
+  createSignal,
+  getOwner,
+  onCleanup,
+  runWithOwner,
+  useContext,
+  type Accessor,
+  type Owner,
+  type ParentProps,
+} from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import { useKeybind } from "@tui/context/keybind"
+
+type Context = ReturnType<typeof init>
+const ctx = createContext<Context>()
+
+export type Slash = {
+  name: string
+  aliases?: string[]
+}
+
+export type CommandOption = DialogSelectOption<string> & {
+  keybind?: string
+  suggested?: boolean
+  slash?: Slash
+  hidden?: boolean
+  enabled?: boolean
+}
+
+function init() {
+  const [registrations, setRegistrations] = createSignal<Accessor<CommandOption[]>[]>([])
+  const [suspendCount, setSuspendCount] = createSignal(0)
+  const owner: Owner | null = getOwner()
+  const dialog = useDialog()
+  const keybind = useKeybind()
+
+  const entries = createMemo(() => {
+    const all = registrations().flatMap((x) => x())
+    const seen = new Set<string>()
+    const unique: typeof all = []
+    for (const item of all) {
+      if (seen.has(item.value)) continue
+      seen.add(item.value)
+      unique.push(item)
+    }
+    return unique.map((x) => ({
+      ...x,
+      footer: x.keybind ? keybind.print(x.keybind) : undefined,
+    }))
+  })
+
+  const isEnabled = (option: CommandOption) => option.enabled !== false
+  const isVisible = (option: CommandOption) => isEnabled(option) && !option.hidden
+
+  const visibleOptions = createMemo(() => entries().filter((option) => isVisible(option)))
+  const suggestedOptions = createMemo(() =>
+    visibleOptions()
+      .filter((option) => option.suggested)
+      .map((option) => ({
+        ...option,
+        value: `suggested:${option.value}`,
+        category: "Suggested",
+      })),
+  )
+  const suspended = () => suspendCount() > 0
+
+  useKeyboard((evt) => {
+    if (suspended()) return
+    if (dialog.stack.length > 0) return
+    for (const option of entries()) {
+      if (!isEnabled(option)) continue
+      if (option.keybind && keybind.match(option.keybind, evt)) {
+        evt.preventDefault()
+        option.onSelect?.(dialog)
+        return
+      }
+    }
+  })
+
+  const result = {
+    trigger(name: string) {
+      for (const option of entries()) {
+        if (option.value === name) {
+          if (!isEnabled(option)) return
+          option.onSelect?.(dialog)
+          return
+        }
+      }
+    },
+    slashes() {
+      return visibleOptions().flatMap((option) => {
+        const slash = option.slash
+        if (!slash) return []
+        return {
+          display: "/" + slash.name,
+          description: option.description ?? option.title,
+          aliases: slash.aliases?.map((alias) => "/" + alias),
+          onSelect: () => result.trigger(option.value),
+        }
+      })
+    },
+    keybinds(enabled: boolean) {
+      setSuspendCount((count) => count + (enabled ? -1 : 1))
+    },
+    suspended,
+    show() {
+      dialog.replace(() => <DialogCommand options={visibleOptions()} suggestedOptions={suggestedOptions()} />)
+    },
+    register(cb: () => CommandOption[]) {
+      let results: Accessor<CommandOption[]>
+      runWithOwner(owner, () => {
+        results = createMemo(cb)
+        setRegistrations((arr) => [results!, ...arr])
+        onCleanup(() => {
+          setRegistrations((arr) => arr.filter((x) => x !== results))
+        })
+      })
+      return () => {
+        setRegistrations((arr) => arr.filter((x) => x !== results))
+      }
+    },
+  }
+  return result
+}
+
+export function useCommandDialog() {
+  const value = useContext(ctx)
+  if (!value) {
+    throw new Error("useCommandDialog must be used within a CommandProvider")
+  }
+  return value
+}
+
+export function CommandProvider(props: ParentProps) {
+  const value = init()
+  const dialog = useDialog()
+  const keybind = useKeybind()
+
+  useKeyboard((evt) => {
+    if (value.suspended()) return
+    if (dialog.stack.length > 0) return
+    if (evt.defaultPrevented) return
+    if (keybind.match("command_list", evt)) {
+      evt.preventDefault()
+      value.show()
+      return
+    }
+  })
+
+  return <ctx.Provider value={value}>{props.children}</ctx.Provider>
+}
+
+function DialogCommand(props: { options: CommandOption[]; suggestedOptions: CommandOption[] }) {
+  let ref: DialogSelectRef<string>
+  const list = createMemo(() => {
+    const all = [...props.suggestedOptions, ...props.options]
+    const seen = new Map<string, number>()
+    const unique: typeof all = []
+    for (const item of all) {
+      const key = `${item.category ?? ""}|${item.value}`
+      if (seen.has(key)) continue
+      seen.set(key, unique.length)
+      unique.push(item)
+    }
+    return unique
+  })
+  return <DialogSelect ref={(r) => (ref = r)} title="Commands" options={list()} />
+}

package/src/cli/cmd/tui/component/dialog-config.tsx

@@ -0,0 +1,291 @@
+import { createMemo, For, Show } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { useSDK } from "@tui/context/sdk"
+import { useDialog } from "@tui/ui/dialog"
+import { useToast } from "../ui/toast"
+import { DialogPrompt } from "../ui/dialog-prompt"
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import { entries } from "remeda"
+
+type ConfigCategory = "agent" | "provider" | "mcp" | "connectors" | "permission" | "formatter" | "lsp" | "command"
+
+function ConfigCategoryList() {
+  const sync = useSync()
+  const dialog = useDialog()
+
+  const categories = createMemo((): DialogSelectOption<ConfigCategory>[] => {
+    const config = sync.data.config as any
+    const result: DialogSelectOption<ConfigCategory>[] = []
+
+    if (config?.agent && Object.keys(config.agent).length > 0) {
+      result.push({
+        title: "Agents",
+        value: "agent",
+        description: `Configured: ${Object.keys(config.agent).join(", ")}`,
+        category: "Configuration",
+      })
+    }
+
+    if (config?.provider && Object.keys(config.provider).length > 0) {
+      result.push({
+        title: "Providers",
+        value: "provider",
+        description: `Configured: ${Object.keys(config.provider).join(", ")}`,
+        category: "Configuration",
+      })
+    }
+
+    if (config?.mcp && Object.keys(config.mcp).length > 0) {
+      result.push({
+        title: "MCP Servers",
+        value: "mcp",
+        description: `Configured: ${Object.keys(config.mcp).join(", ")}`,
+        category: "Configuration",
+      })
+    }
+
+    if (config?.connectors && Object.keys(config.connectors).length > 0) {
+      result.push({
+        title: "Connectors",
+        value: "connectors",
+        description: `Configured: ${Object.keys(config.connectors).join(", ")}`,
+        category: "Configuration",
+      })
+    }
+
+    if (config?.permission) {
+      result.push({
+        title: "Permissions",
+        value: "permission",
+        description: "Tool and action permissions",
+        category: "Configuration",
+      })
+    }
+
+    if (config?.formatter) {
+      result.push({
+        title: "Formatters",
+        value: "formatter",
+        description: "Code formatter configurations",
+        category: "Configuration",
+      })
+    }
+
+    if (config?.lsp) {
+      result.push({
+        title: "LSP Servers",
+        value: "lsp",
+        description: "Language server configurations",
+        category: "Configuration",
+      })
+    }
+
+    if (config?.command && Object.keys(config.command).length > 0) {
+      result.push({
+        title: "Commands",
+        value: "command",
+        description: `Configured: ${Object.keys(config.command).join(", ")}`,
+        category: "Configuration",
+      })
+    }
+
+    if (result.length === 0) {
+      result.push({
+        title: "No configurations found",
+        value: "agent" as ConfigCategory,
+        description: "Add configurations to your config.json",
+        category: "Info",
+        disabled: true,
+      })
+    }
+
+    return result
+  })
+
+  const handleSelect = (option: DialogSelectOption<ConfigCategory>) => {
+    dialog.replace(() => <ConfigCategoryDetail category={option.value} />)
+  }
+
+  return <DialogSelect title="Config Editor" options={categories()} onSelect={handleSelect} />
+}
+
+function ConfigCategoryDetail(props: { category: ConfigCategory }) {
+  const sync = useSync()
+  const sdk = useSDK()
+  const dialog = useDialog()
+  const toast = useToast()
+
+  const config = createMemo(() => (sync.data.config as any)?.[props.category] || {})
+
+  const items = createMemo(() => {
+    const cfg = config()
+    return entries(cfg).map(([key, value]) => ({
+      key,
+      value: typeof value === "object" ? JSON.stringify(value, null, 2) : String(value),
+    }))
+  })
+
+  const handleEdit = async (key: string) => {
+    const currentValue = config()[key]
+    const currentStr = typeof currentValue === "object" ? JSON.stringify(currentValue, null, 2) : String(currentValue)
+
+    const result = await DialogPrompt.show(dialog, `Edit ${props.category}.${key}`, {
+      placeholder: "Enter JSON value",
+      value: currentStr,
+    })
+
+    if (result === null) return
+
+    try {
+      let parsed = result
+      try {
+        parsed = JSON.parse(result)
+      } catch {
+        parsed = result
+      }
+
+      await sdk.client.config.update({
+        config: {
+          [props.category]: {
+            [key]: parsed,
+          },
+        } as any,
+      })
+
+      toast.show({ message: `Updated ${props.category}.${key}`, variant: "success" })
+      dialog.replace(() => <ConfigCategoryDetail category={props.category} />)
+    } catch (error: any) {
+      toast.show({ message: `Failed to update: ${error.message}`, variant: "error" })
+    }
+  }
+
+  const handleAdd = async () => {
+    const result = await DialogPrompt.show(dialog, `Add new ${props.category} key`, {
+      placeholder: "Enter key name",
+    })
+
+    if (!result) return
+
+    const key = result.trim()
+    if (!key) return
+
+    const valueResult = await DialogPrompt.show(dialog, `Enter value for ${key}`, {
+      placeholder: "Enter JSON value (or plain text)",
+      value: "{}",
+    })
+
+    if (valueResult === null) return
+
+    try {
+      let parsed = valueResult
+      try {
+        parsed = JSON.parse(valueResult)
+      } catch {
+        parsed = valueResult
+      }
+
+      await sdk.client.config.update({
+        config: {
+          [props.category]: {
+            [key]: parsed,
+          },
+        } as any,
+      })
+
+      toast.show({ message: `Added ${props.category}.${key}`, variant: "success" })
+      dialog.replace(() => <ConfigCategoryDetail category={props.category} />)
+    } catch (error: any) {
+      toast.show({ message: `Failed to add: ${error.message}`, variant: "error" })
+    }
+  }
+
+  const options = createMemo(() => {
+    const baseItems = items().map((item) => ({
+      title: item.key,
+      value: item.key,
+      description: item.value.substring(0, 100) + (item.value.length > 100 ? "..." : ""),
+      category: "Entries" as const,
+      onSelect: () => handleEdit(item.key),
+    }))
+
+    return [
+      {
+        title: "+ Add new",
+        value: "__add__",
+        description: `Add a new ${props.category} entry`,
+        category: "Actions" as const,
+        onSelect: () => handleAdd(),
+      },
+      ...baseItems,
+    ]
+  })
+
+  return <DialogSelect title={props.category.charAt(0).toUpperCase() + props.category.slice(1)} options={options()} />
+}
+
+export function DialogConfig() {
+  const sync = useSync()
+  const dialog = useDialog()
+  const sdk = useSDK()
+  const toast = useToast()
+
+  const config = createMemo(() => sync.data.config as any)
+
+  const hasConfig = createMemo(() => {
+    const cfg = config()
+    return cfg && Object.keys(cfg).length > 0
+  })
+
+  const handleEditFull = async () => {
+    const result = await DialogPrompt.show(dialog, "Edit Full Config", {
+      placeholder: "Enter JSON configuration",
+      value: JSON.stringify(config(), null, 2),
+    })
+
+    if (result === null) return
+
+    try {
+      const parsed = JSON.parse(result)
+      await sdk.client.config.update({ config: parsed })
+      toast.show({ message: "Config updated", variant: "success" })
+    } catch (error: any) {
+      toast.show({ message: `Invalid JSON: ${error.message}`, variant: "error" })
+    }
+  }
+
+  const handleAddNew = () => {
+    dialog.replace(() => <ConfigCategoryList />)
+  }
+
+  return (
+    <DialogSelect
+      title="Config Editor"
+      options={[
+        {
+          title: "Browse by Category",
+          value: "browse",
+          description: "View and edit configurations by category",
+          category: "Actions",
+          onSelect: () => handleAddNew(),
+        },
+        {
+          title: "Edit Full Config JSON",
+          value: "edit",
+          description: "Edit the entire configuration as JSON",
+          category: "Actions",
+          onSelect: () => handleEditFull(),
+        },
+        {
+          title: "View Config",
+          value: "view",
+          description: hasConfig() ? `${Object.keys(config()).length} config keys` : "No configuration found",
+          category: "Info",
+        },
+      ]}
+    />
+  )
+}
+
+export function DialogConfigEditor() {
+  return <ConfigCategoryList />
+}