nikcli 0.0.6

package/src/cli/cmd/tui/component/dialog-settings/index.tsx

@@ -0,0 +1,59 @@
+import { createMemo, Show } from "solid-js"
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+import { DialogSettingsSpinner } from "./spinner"
+import { DialogSettingsPrompt } from "./prompt"
+import { DialogSettingsSidebar } from "./sidebar"
+import { DialogSettingsUI } from "./ui"
+
+export type SettingsCategory = "spinner" | "prompt" | "sidebar" | "ui"
+
+export function DialogSettings() {
+  const dialog = useDialog()
+
+  const categories = createMemo((): DialogSelectOption<SettingsCategory>[] => [
+    {
+      title: "Spinner",
+      value: "spinner",
+      description: "Loading animation style",
+      category: "Appearance",
+    },
+    {
+      title: "Prompt",
+      value: "prompt",
+      description: "Prompt area customization",
+      category: "Appearance",
+    },
+    {
+      title: "Sidebar",
+      value: "sidebar",
+      description: "Sidebar visibility and sections",
+      category: "Layout",
+    },
+    {
+      title: "UI",
+      value: "ui",
+      description: "General interface settings",
+      category: "General",
+    },
+  ])
+
+  const handleSelect = (option: DialogSelectOption<SettingsCategory>) => {
+    switch (option.value) {
+      case "spinner":
+        dialog.replace(() => <DialogSettingsSpinner />)
+        break
+      case "prompt":
+        dialog.replace(() => <DialogSettingsPrompt />)
+        break
+      case "sidebar":
+        dialog.replace(() => <DialogSettingsSidebar />)
+        break
+      case "ui":
+        dialog.replace(() => <DialogSettingsUI />)
+        break
+    }
+  }
+
+  return <DialogSelect title="Settings" options={categories()} onSelect={handleSelect} />
+}

package/src/cli/cmd/tui/component/dialog-settings/prompt.tsx

@@ -0,0 +1,40 @@
+import { createMemo } from "solid-js"
+import { useKV } from "../../context/kv"
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+
+type PromptOption = "show_agent" | "show_model" | "show_shortcuts" | "show_sponsored"
+
+const PROMPT_OPTIONS: { value: PromptOption; title: string; description: string }[] = [
+  { value: "show_agent", title: "Show Agent", description: "Display agent name in prompt" },
+  { value: "show_model", title: "Show Model", description: "Display model info in prompt" },
+  { value: "show_shortcuts", title: "Show Shortcuts", description: "Display keyboard shortcut hints" },
+  { value: "show_sponsored", title: "Show Sponsored", description: "Display sponsored tips" },
+]
+
+export function DialogSettingsPrompt() {
+  const kv = useKV()
+  const dialog = useDialog()
+
+  const getValue = (key: PromptOption) => kv.get(key, true)
+
+  const options = createMemo((): DialogSelectOption<PromptOption>[] =>
+    PROMPT_OPTIONS.map((opt) => ({
+      ...opt,
+      title: opt.title,
+      value: opt.value,
+      description: `${opt.description} (${getValue(opt.value) ? "ON" : "OFF"})`,
+    })),
+  )
+
+  return (
+    <DialogSelect
+      title="Prompt Settings"
+      options={options()}
+      onSelect={(option) => {
+        kv.set(option.value, !kv.get(option.value, true))
+        dialog.clear()
+      }}
+    />
+  )
+}

package/src/cli/cmd/tui/component/dialog-settings/sidebar.tsx

@@ -0,0 +1,39 @@
+import { createMemo } from "solid-js"
+import { useKV } from "../../context/kv"
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+
+type SidebarVisibility = "auto" | "show" | "hide"
+
+const VISIBILITY_OPTIONS: { value: SidebarVisibility; title: string; description: string }[] = [
+  { value: "auto", title: "Auto", description: "Show when space available" },
+  { value: "show", title: "Show", description: "Always show sidebar" },
+  { value: "hide", title: "Hide", description: "Always hide sidebar" },
+]
+
+export function DialogSettingsSidebar() {
+  const kv = useKV()
+  const dialog = useDialog()
+
+  const visibility = createMemo(() => kv.get("sidebar", "auto") as SidebarVisibility)
+
+  const options = createMemo((): DialogSelectOption<SidebarVisibility>[] =>
+    VISIBILITY_OPTIONS.map((opt) => ({
+      ...opt,
+      title: opt.title,
+      value: opt.value,
+    })),
+  )
+
+  return (
+    <DialogSelect
+      title="Sidebar Visibility"
+      options={options()}
+      current={visibility()}
+      onSelect={(option) => {
+        kv.set("sidebar", option.value)
+        dialog.clear()
+      }}
+    />
+  )
+}

package/src/cli/cmd/tui/component/dialog-settings/spinner.tsx

@@ -0,0 +1,62 @@
+import { createMemo, Show } from "solid-js"
+import { useKV } from "../../context/kv"
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+
+export type SpinnerStyle =
+  | "knight_rider_blocks"
+  | "knight_rider_diamonds"
+  | "braille"
+  | "dots"
+  | "line"
+  | "bouncing"
+  | "pulse"
+  | "none"
+
+const SPINNER_OPTIONS: { value: SpinnerStyle; title: string; description: string }[] = [
+  { value: "knight_rider_blocks", title: "Knight Rider (Blocks)", description: "Animated scanner with blocks" },
+  { value: "knight_rider_diamonds", title: "Knight Rider (Diamonds)", description: "Animated scanner with diamonds" },
+  { value: "braille", title: "Braille", description: "Braille character animation" },
+  { value: "dots", title: "Dots", description: "Simple dot animation" },
+  { value: "line", title: "Line", description: "Rotating line" },
+  { value: "bouncing", title: "Bouncing", description: "Bouncing characters" },
+  { value: "pulse", title: "Pulse", description: "Pulsing indicator" },
+  { value: "none", title: "None", description: "No spinner" },
+]
+
+export function DialogSettingsSpinner() {
+  const kv = useKV()
+  const dialog = useDialog()
+
+  const enabled = createMemo(() => kv.get("settings.spinner.enabled", true))
+  const currentStyle = createMemo(() => kv.get("settings.spinner.style", "knight_rider_blocks") as SpinnerStyle)
+
+  const options = createMemo((): DialogSelectOption<SpinnerStyle | "enabled">[] => [
+    {
+      title: enabled() ? "Spinner: ON" : "Spinner: OFF",
+      value: "enabled" as const,
+      description: "Toggle spinner visibility",
+    },
+    ...SPINNER_OPTIONS.map((opt) => ({
+      ...opt,
+      title: opt.title,
+      value: opt.value as SpinnerStyle,
+    })),
+  ])
+
+  return (
+    <DialogSelect
+      title="Spinner Style"
+      options={options()}
+      current={currentStyle()}
+      onSelect={(option) => {
+        if (option.value === "enabled") {
+          kv.set("settings.spinner.enabled", !kv.get("settings.spinner.enabled", true))
+        } else {
+          kv.set("settings.spinner.style", option.value)
+        }
+        dialog.clear()
+      }}
+    />
+  )
+}

package/src/cli/cmd/tui/component/dialog-settings/ui.tsx

@@ -0,0 +1,58 @@
+import { createMemo } from "solid-js"
+import { useKV } from "../../context/kv"
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+
+type UIOption = "animations" | "timestamps" | "thinking" | "tool_details" | "scrollbar"
+
+const UI_OPTIONS: { value: UIOption; title: string; key: string; defaultValue: boolean | "hide" | "show" }[] = [
+  { value: "animations", title: "Animations", key: "animations_enabled", defaultValue: true },
+  { value: "timestamps", title: "Timestamps", key: "timestamps", defaultValue: "hide" },
+  { value: "thinking", title: "Thinking", key: "thinking_visibility", defaultValue: true },
+  { value: "tool_details", title: "Tool Details", key: "tool_details_visibility", defaultValue: true },
+  { value: "scrollbar", title: "Scrollbar", key: "scrollbar_visible", defaultValue: true },
+]
+
+export function DialogSettingsUI() {
+  const kv = useKV()
+  const dialog = useDialog()
+
+  const getValue = (option: (typeof UI_OPTIONS)[number]) => {
+    if (option.defaultValue === "hide" || option.defaultValue === "show") {
+      return kv.get(option.key, option.defaultValue)
+    }
+    return kv.get(option.key, option.defaultValue as boolean)
+  }
+
+  const options = createMemo((): DialogSelectOption<UIOption>[] =>
+    UI_OPTIONS.map((opt) => {
+      const value = getValue(opt)
+      const status = typeof value === "boolean" ? (value ? "ON" : "OFF") : value
+      return {
+        title: opt.title,
+        value: opt.value,
+        description: `${status}`,
+      }
+    }),
+  )
+
+  return (
+    <DialogSelect
+      title="UI Settings"
+      options={options()}
+      onSelect={(option) => {
+        const opt = UI_OPTIONS.find((o) => o.value === option.value)
+        if (!opt) return
+
+        if (opt.defaultValue === "hide" || opt.defaultValue === "show") {
+          const current = kv.get(opt.key, opt.defaultValue)
+          const next = current === "show" ? "hide" : "show"
+          kv.set(opt.key, next)
+        } else {
+          kv.set(opt.key, !kv.get(opt.key, opt.defaultValue as boolean))
+        }
+        dialog.clear()
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,117 @@
+import { useDialog } from "@tui/ui/dialog"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { createMemo, createResource, createSignal } from "solid-js"
+import { useSDK } from "@tui/context/sdk"
+import { useRoute } from "@tui/context/route"
+import { Skill } from "@/skill"
+import { Global } from "@/global"
+
+function detectSource(location: string) {
+  const normalized = location.replaceAll("\\", "/")
+  const config = Global.Path.config.replaceAll("\\", "/")
+  const home = Global.Path.home.replaceAll("\\", "/")
+
+  if (normalized.includes("/.nikcli/skill/") || normalized.includes("/.nikcli/skills/")) {
+    return { label: "Workspace", rank: 0 }
+  }
+
+  if (normalized.startsWith(`${config}/skills/`)) {
+    return { label: "Global", rank: 1 }
+  }
+
+  if (normalized.startsWith(`${home}/.claude/`) || normalized.startsWith(`${home}/.agents/`)) {
+    return { label: "External", rank: 2 }
+  }
+
+  if (normalized.includes("/.claude/") || normalized.includes("/.agents/")) {
+    return { label: "Workspace", rank: 0 }
+  }
+
+  return { label: "Other", rank: 3 }
+}
+
+function shortenLocation(location: string) {
+  const normalized = location.replaceAll("\\", "/")
+  const home = Global.Path.home.replaceAll("\\", "/")
+  return normalized.startsWith(`${home}/`) ? `~/${normalized.slice(home.length + 1)}` : normalized
+}
+
+export function DialogSkills() {
+  const dialog = useDialog()
+  const sdk = useSDK()
+  const route = useRoute()
+  const [filter, setFilter] = createSignal("")
+
+  const [skills] = createResource(async () => {
+    const result = await sdk.client.app.skills()
+    return result.data ?? []
+  })
+
+  const options = createMemo(() => {
+    const query = filter().trim().toLowerCase()
+
+    return (skills() ?? [])
+      .map((skill) => {
+        const source = detectSource(skill.location)
+        const location = shortenLocation(skill.location)
+        const metadata = [skill.category, skill.tags?.slice(0, 3).join(", "), skill.version ? `v${skill.version}` : undefined]
+          .filter(Boolean)
+          .join(" - ")
+        const command = Skill.commandName(skill.name)
+        const search = [
+          skill.name,
+          skill.description,
+          skill.category,
+          ...(skill.tags ?? []),
+          skill.version,
+          source.label,
+          command,
+          skill.location,
+          location,
+        ]
+          .filter(Boolean)
+          .join(" ")
+          .toLowerCase()
+
+        return {
+          title: skill.name,
+          description: metadata ? `${skill.description} - ${metadata}` : skill.description,
+          value: command,
+          footer: location,
+          category: source.label,
+          rank: source.rank,
+          search,
+        }
+      })
+      .filter((skill) => !query || skill.search.includes(query))
+      .sort((a, b) => a.rank - b.rank || a.title.localeCompare(b.title))
+      .map(({ rank: _rank, search: _search, ...option }) => option)
+  })
+
+  return (
+    <DialogSelect
+      title="Select skill"
+      placeholder="Search skills, tags, source, or path"
+      options={options()}
+      skipFilter={true}
+      onFilter={setFilter}
+      onSelect={(option) => {
+        if (route.data.type === "session") {
+          route.navigate({
+            type: "session",
+            sessionID: route.data.sessionID,
+            initialPrompt: { input: `/${option.value} `, parts: [] },
+            workspaceID: route.data.workspaceID,
+          })
+        } else {
+          route.navigate({
+            type: "home",
+            initialPrompt: { input: `/${option.value} `, parts: [] },
+            workspaceID: route.data.workspaceID,
+          })
+        }
+        dialog.clear()
+      }}
+    />
+  )
+}

package/src/cli/cmd/tui/component/dialog-speak-model.tsx

@@ -0,0 +1,304 @@
+import { createMemo, createSignal, createEffect } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+import { useSDK } from "@tui/context/sdk"
+import { useToast } from "@tui/ui/toast"
+import { ttsRegistry, type TTSProvider, type TTSVoice } from "@/tool/speak/provider"
+import { ELEVENLABS_VOICES_LIST, elevenLabsProvider } from "@/tool/speak/elevenlabs"
+import { OPENROUTER_VOICES_LIST, openRouterProvider } from "@/tool/speak/openrouter"
+
+// Register providers
+ttsRegistry.register(elevenLabsProvider)
+ttsRegistry.register(openRouterProvider)
+
+interface SpeakConfig {
+  model?: string
+  modelId?: string
+  provider?: string
+}
+
+interface ConfigWithSpeak {
+  speak?: SpeakConfig
+}
+
+const VOICES_BY_PROVIDER: Record<string, TTSVoice[]> = {
+  elevenlabs: ELEVENLABS_VOICES_LIST,
+  openrouter: OPENROUTER_VOICES_LIST,
+}
+
+type SelectionMode = "provider" | "voice"
+const DEFAULT_OPENROUTER_VOICE = "alloy"
+const DEFAULT_OPENROUTER_MODEL_ID = "openai/gpt-audio-mini"
+const OPENROUTER_VOICE_IDS = new Set(OPENROUTER_VOICES_LIST.map((voice) => voice.id))
+
+function resolveOpenRouterVoice(voice: string | undefined): string {
+  if (!voice) return DEFAULT_OPENROUTER_VOICE
+  return OPENROUTER_VOICE_IDS.has(voice) ? voice : DEFAULT_OPENROUTER_VOICE
+}
+
+interface ProviderInfo {
+  id: string
+  name: string
+  description: string
+}
+
+export function DialogSpeakModel() {
+  const sync = useSync()
+  const dialog = useDialog()
+  const sdk = useSDK()
+  const toast = useToast()
+
+  const [mode, setMode] = createSignal<SelectionMode>("provider")
+  const [selectedProvider, setSelectedProvider] = createSignal<string>("elevenlabs")
+  const [query, setQuery] = createSignal("")
+  const [saving, setSaving] = createSignal(false)
+  const [openRouterModels, setOpenRouterModels] = createSignal<Array<{ id: string; name: string }>>([])
+  const [openRouterModelsLoading, setOpenRouterModelsLoading] = createSignal(false)
+
+  const currentSpeak = createMemo(() => (sync.data.config as ConfigWithSpeak | undefined)?.speak)
+  const isLoading = createMemo(() => sync.status === "loading" || sync.status === "partial")
+
+  // Initialize from current config
+  createEffect(() => {
+    const current = currentSpeak()
+    if (current?.provider) {
+      setSelectedProvider(current.provider)
+    }
+  })
+
+  createEffect(() => {
+    if (selectedProvider() !== "openrouter") return
+
+    let cancelled = false
+    setOpenRouterModelsLoading(true)
+
+    openRouterProvider
+      .getAudioModels({ refresh: true })
+      .then((models) => {
+        if (cancelled) return
+        setOpenRouterModels(models)
+      })
+      .catch(() => {
+        if (cancelled) return
+        setOpenRouterModels([])
+        toast.show({ message: "Failed to load OpenRouter audio models", variant: "error" })
+      })
+      .finally(() => {
+        if (cancelled) return
+        setOpenRouterModelsLoading(false)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  })
+
+  // Get list of providers
+  const providers = createMemo((): ProviderInfo[] => {
+    return ttsRegistry.list().map((provider: TTSProvider) => ({
+      id: provider.id,
+      name: provider.name,
+      description: provider.description,
+    }))
+  })
+
+  // Get voices for selected provider
+  const voices = createMemo((): TTSVoice[] => {
+    const providerId = selectedProvider()
+    return VOICES_BY_PROVIDER[providerId] ?? []
+  })
+
+  // Options for provider selection
+  const providerOptions = createMemo(() => {
+    const needle = query().trim().toLowerCase()
+
+    const allOptions = providers().map((provider: ProviderInfo) => ({
+      value: provider.id,
+      title: provider.name,
+      description: provider.description,
+      category: "Provider",
+      disabled: false,
+      onSelect: () => {
+        if (saving()) return
+        setSelectedProvider(provider.id)
+        setMode("voice")
+        setQuery("")
+      },
+    }))
+
+    // Add help options if config hasn't been loaded yet
+    if (isLoading() || !sync.data.config) {
+      allOptions.unshift({
+        value: "__loading__",
+        title: "Loading configuration...",
+        description: "Please wait while the config loads",
+        category: "Help",
+        disabled: true,
+        onSelect: () => {},
+      })
+    }
+
+    if (!needle) return allOptions
+    return allOptions.filter(
+      (x: any) => x.title.toLowerCase().includes(needle) || x.description.toLowerCase().includes(needle),
+    )
+  })
+
+  // Options for voice selection
+  const voiceOptions = createMemo(() => {
+    const needle = query().trim().toLowerCase()
+    const current = currentSpeak()
+    const providerId = selectedProvider()
+
+    if (providerId === "openrouter") {
+      const models = openRouterModels()
+      const allModelOptions: any[] = models.map((model) => ({
+        value: { providerId, modelId: model.id },
+        title: model.name,
+        description: model.id,
+        category: "Model",
+        disabled: current?.provider === providerId && current?.modelId === model.id,
+        onSelect: async () => {
+          if (saving()) return
+          setSaving(true)
+          try {
+            const { error } = await sdk.client.config.update({
+              config: {
+                speak: {
+                  provider: providerId,
+                  model: resolveOpenRouterVoice(current?.model),
+                  modelId: model.id,
+                },
+              } as any,
+            })
+            if (error) {
+              toast.show({ message: "Failed to update speak config", variant: "error" })
+              return
+            }
+            toast.show({ message: "OpenRouter audio model updated", variant: "success" })
+            dialog.clear()
+          } catch {
+            toast.show({ message: "Failed to update speak config", variant: "error" })
+          } finally {
+            setSaving(false)
+          }
+        },
+      }))
+
+      if (openRouterModelsLoading() && allModelOptions.length === 0) {
+        allModelOptions.unshift({
+          value: "__loading_models__",
+          title: "Loading OpenRouter models...",
+          description: "Fetching audio-capable models from OpenRouter API",
+          category: "Help",
+          disabled: true,
+          onSelect: async () => {},
+        })
+      }
+
+      if (!openRouterModelsLoading() && allModelOptions.length === 0) {
+        allModelOptions.unshift({
+          value: "__default_model__",
+          title: DEFAULT_OPENROUTER_MODEL_ID,
+          description: "Default OpenRouter audio model",
+          category: "Model",
+          disabled:
+            current?.provider === providerId &&
+            (current?.modelId ?? DEFAULT_OPENROUTER_MODEL_ID) === DEFAULT_OPENROUTER_MODEL_ID,
+          onSelect: async () => {
+            if (saving()) return
+            setSaving(true)
+            try {
+              const { error } = await sdk.client.config.update({
+                config: {
+                  speak: {
+                    provider: providerId,
+                    model: resolveOpenRouterVoice(current?.model),
+                    modelId: DEFAULT_OPENROUTER_MODEL_ID,
+                  },
+                } as any,
+              })
+              if (error) {
+                toast.show({ message: "Failed to update speak config", variant: "error" })
+                return
+              }
+              toast.show({ message: "OpenRouter audio model updated", variant: "success" })
+              dialog.clear()
+            } catch {
+              toast.show({ message: "Failed to update speak config", variant: "error" })
+            } finally {
+              setSaving(false)
+            }
+          },
+        })
+      }
+
+      if (!needle) return allModelOptions
+      return allModelOptions.filter(
+        (x: any) => x.title.toLowerCase().includes(needle) || x.description.toLowerCase().includes(needle),
+      )
+    }
+
+    const allOptions = voices().map((voice: TTSVoice) => ({
+      value: { providerId, voiceId: voice.id },
+      title: voice.name,
+      description: voice.id,
+      category: providerId,
+      disabled: current?.provider === providerId && current?.model === voice.id,
+      onSelect: async () => {
+        if (saving()) return
+        setSaving(true)
+        try {
+          const { error } = await sdk.client.config.update({
+            config: { speak: { provider: providerId, model: voice.id } } as any,
+          })
+          if (error) {
+            toast.show({ message: "Failed to update speak config", variant: "error" })
+            return
+          }
+          toast.show({ message: "Speak model updated", variant: "success" })
+          dialog.clear()
+        } catch (e) {
+          toast.show({ message: "Failed to update speak config", variant: "error" })
+        } finally {
+          setSaving(false)
+        }
+      },
+    }))
+
+    if (!needle) return allOptions
+    return allOptions.filter(
+      (x: any) => x.title.toLowerCase().includes(needle) || x.description.toLowerCase().includes(needle),
+    )
+  })
+
+  const options = createMemo(() => {
+    return mode() === "provider" ? providerOptions() : voiceOptions()
+  })
+
+  const title = createMemo(() => {
+    if (saving()) {
+      return "Saving..."
+    }
+    if (mode() === "provider") {
+      return "Select TTS Provider"
+    }
+    const providerName = providers().find((p: ProviderInfo) => p.id === selectedProvider())?.name ?? selectedProvider()
+    if (selectedProvider() === "openrouter") {
+      return `Select Audio Model (${providerName})`
+    }
+    return `Select Voice (${providerName})`
+  })
+
+  // Transform options for DialogSelect
+  const transformedOptions = createMemo(() => {
+    const opts = options()
+    return opts.map((opt: any) => ({
+      ...opt,
+      category: opt.category,
+    }))
+  })
+
+  return <DialogSelect onFilter={setQuery} skipFilter={true} title={title()} options={transformedOptions() as any} />
+}