nikcli 0.0.6

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

@@ -0,0 +1,440 @@
+import { createMemo, createSignal } from "solid-js"
+import open from "open"
+import { useLocal } from "@tui/context/local"
+import { useSync } from "@tui/context/sync"
+import { map, pipe, entries, sortBy } from "remeda"
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import { useTheme } from "../context/theme"
+import { Keybind } from "@/util/keybind"
+import { TextAttributes } from "@opentui/core"
+import { useSDK } from "@tui/context/sdk"
+import { useDialog } from "@tui/ui/dialog"
+import { DialogPrompt } from "../ui/dialog-prompt"
+import { useToast } from "../ui/toast"
+import { Connectors } from "@/connectors"
+
+const DEFAULT_CONNECTORS = [
+  { name: "figma", type: "figma" as const, description: "Design files and components" },
+  { name: "slack", type: "slack" as const, description: "Messages and channels" },
+  { name: "github", type: "github" as const, description: "Repositories and issues" },
+  { name: "lovable", type: "lovable" as const, description: "AI projects and chats" },
+  { name: "discord", type: "discord" as const, description: "Discord server bot" },
+  { name: "teams", type: "teams" as const, description: "Microsoft Teams bot" },
+  { name: "gchat", type: "gchat" as const, description: "Google Chat bot" },
+  { name: "linear", type: "linear" as const, description: "Linear issue bot" },
+]
+
+const LOVABLE_BASE_URL = "https://lovable.dev/"
+const LOVABLE_PROMPT_MAX = 50000
+const LOVABLE_IMAGES_MAX = 10
+
+function buildLovableUrl(prompt: string, images: string[]) {
+  const url = new URL(LOVABLE_BASE_URL)
+  url.searchParams.set("autosubmit", "true")
+  const params = new URLSearchParams()
+  params.set("prompt", prompt)
+  for (const image of images) {
+    params.append("images", image)
+  }
+  url.hash = params.toString()
+  return url.toString()
+}
+
+function parseLovableImages(value: string) {
+  return value
+    .split(/[\n,]+/)
+    .map((item) => item.trim())
+    .filter((item) => item.length > 0)
+}
+
+function findInvalidLovableImage(images: string[]) {
+  return images.find((item) => !item.startsWith("http://") && !item.startsWith("https://"))
+}
+
+function Status(props: { enabled: boolean; configured: boolean; status?: string; loading: boolean }) {
+  const { theme } = useTheme()
+  if (props.loading) {
+    return <span style={{ fg: theme.textMuted }}>⋯ Loading</span>
+  }
+  if (!props.configured) {
+    return <span style={{ fg: theme.textMuted }}>○ Not configured</span>
+  }
+  if (!props.enabled) {
+    return <span style={{ fg: theme.textMuted }}>○ Disabled</span>
+  }
+  if (props.status === "needs_auth") {
+    return <span style={{ fg: theme.warning }}>⚠ Needs auth</span>
+  }
+  if (props.status === "failed") {
+    return <span style={{ fg: theme.error }}>✗ Failed</span>
+  }
+  return <span style={{ fg: theme.success, attributes: TextAttributes.BOLD }}>✓ Enabled</span>
+}
+
+function authConfigForType(type: string) {
+  switch (type) {
+    case "slack":
+      return { title: "Slack bot token", placeholder: "xoxb-...", field: "botToken" as const }
+    case "lovable":
+      return { title: "Lovable API key", placeholder: "token", field: "token" as const }
+    case "figma":
+      return { title: "Figma personal access token", placeholder: "figma_...", field: "token" as const }
+    case "github":
+      return { title: "GitHub personal access token", placeholder: "ghp_...", field: "token" as const }
+    default:
+      return { title: "Connector token", placeholder: "token", field: "token" as const }
+  }
+}
+
+export function DialogConnectors() {
+  const local = useLocal()
+  const sync = useSync()
+  const sdk = useSDK()
+  const dialog = useDialog()
+  const toast = useToast()
+  const [loading, setLoading] = createSignal<string | null>(null)
+  const reopen = () => setTimeout(() => dialog.replace(() => <DialogConnectors />), 0)
+
+  async function refreshStatus() {
+    const status = await sdk.client.connectors.status()
+    if (status.data) {
+      sync.set("connectors", status.data)
+    }
+  }
+
+  async function addConnectorWithPreset(name: string, type: string) {
+    const nextConfig = {
+      ...sync.data.config,
+      connectors: {
+        ...(sync.data.config.connectors ?? {}),
+        [name]: {
+          type,
+          enabled: true,
+        },
+      },
+    }
+    await sdk.client.config.update({ config: { connectors: nextConfig.connectors } })
+    sync.set("config", nextConfig)
+    await refreshStatus()
+  }
+
+  async function openLovableBuild() {
+    const promptValue = await DialogPrompt.show(dialog, "Lovable prompt (required)")
+    if (promptValue === null) {
+      reopen()
+      return
+    }
+    const prompt = promptValue.trim()
+    if (!prompt) {
+      toast.show({
+        variant: "warning",
+        message: "Prompt is required",
+        duration: 4000,
+      })
+      reopen()
+      return
+    }
+    if (prompt.length > LOVABLE_PROMPT_MAX) {
+      toast.show({
+        variant: "warning",
+        message: `Prompt exceeds ${LOVABLE_PROMPT_MAX} characters`,
+        duration: 5000,
+      })
+      reopen()
+      return
+    }
+
+    const imagesValue = await DialogPrompt.show(dialog, "Lovable images (optional, comma-separated URLs)")
+    if (imagesValue === null) {
+      reopen()
+      return
+    }
+    const images = parseLovableImages(imagesValue)
+    if (images.length > LOVABLE_IMAGES_MAX) {
+      toast.show({
+        variant: "warning",
+        message: `Use up to ${LOVABLE_IMAGES_MAX} image URLs`,
+        duration: 5000,
+      })
+      reopen()
+      return
+    }
+    const invalid = findInvalidLovableImage(images)
+    if (invalid) {
+      toast.show({
+        variant: "warning",
+        message: `Invalid image URL: ${invalid}`,
+        duration: 5000,
+      })
+      reopen()
+      return
+    }
+
+    const url = buildLovableUrl(prompt, images)
+    toast.show({
+      variant: "warning",
+      message: "Do not paste API keys in the prompt. Lovable will warn about secrets.",
+      duration: 6000,
+    })
+    toast.show({
+      variant: "info",
+      message: "If you are not logged in, Lovable will ask you to sign in and choose a workspace.",
+      duration: 6000,
+    })
+
+    const opened = await open(url)
+      .then(() => true)
+      .catch(() => false)
+
+    if (!opened) {
+      toast.show({
+        variant: "warning",
+        message: `Open this URL to build: ${url}`,
+        duration: 8000,
+      })
+    }
+    if (opened) {
+      toast.show({
+        variant: "success",
+        message: "Lovable build opened in your browser.",
+        duration: 4000,
+      })
+    }
+
+    reopen()
+  }
+
+  async function openAuth(name: string, presetType?: string) {
+    const entry = sync.data.config.connectors?.[name]
+    const resolvedType = entry && Connectors.isConnectorConfigured(entry) ? entry.type : presetType
+    if (!resolvedType) {
+      toast.show({
+        variant: "warning",
+        message: `Connector not found: ${name}`,
+        duration: 3000,
+      })
+      return
+    }
+    const auth = authConfigForType(resolvedType)
+    const value = await DialogPrompt.show(dialog, auth.title, {
+      placeholder: auth.placeholder,
+    })
+    if (!value) {
+      if (value === "") {
+        toast.show({
+          variant: "warning",
+          message: "Credential is required",
+          duration: 3000,
+        })
+      }
+      reopen()
+      return
+    }
+    if (!entry || !Connectors.isConnectorConfigured(entry)) {
+      await addConnectorWithPreset(name, resolvedType)
+    }
+    await local.connectors.auth(name, { [auth.field]: value })
+    await refreshStatus()
+    reopen()
+  }
+
+  async function logout(name: string) {
+    const entry = sync.data.config.connectors?.[name]
+    if (!entry || !Connectors.isConnectorConfigured(entry)) {
+      toast.show({
+        variant: "warning",
+        message: `Connector not found: ${name}`,
+        duration: 3000,
+      })
+      return
+    }
+    await local.connectors.logout(name)
+    await refreshStatus()
+  }
+
+  async function selectConnectorType() {
+    return new Promise<string | null>((resolve) => {
+      dialog.replace(
+        () => (
+          <DialogSelect
+            title="Select connector type"
+            options={[
+              { title: "Figma", value: "figma", description: "Design files and components" },
+              { title: "Slack", value: "slack", description: "Messages and channels" },
+              { title: "GitHub", value: "github", description: "Repositories and issues" },
+              { title: "Lovable", value: "lovable", description: "AI projects and chats" },
+            ]}
+            onSelect={(option) => resolve(option.value)}
+          />
+        ),
+        () => resolve(null),
+      )
+    })
+  }
+
+  async function addConnector() {
+    const name = await DialogPrompt.show(dialog, "Connector name", {
+      placeholder: "my-connector",
+    })
+    if (!name) {
+      reopen()
+      return
+    }
+    if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(name)) {
+      toast.show({
+        variant: "warning",
+        message: "Name must be alphanumeric (letters, numbers, _, -)",
+        duration: 3000,
+      })
+      reopen()
+      return
+    }
+    const existing = sync.data.config.connectors?.[name]
+    if (existing && Connectors.isConnectorConfigured(existing)) {
+      toast.show({
+        variant: "warning",
+        message: `Connector already exists: ${name}`,
+        duration: 3000,
+      })
+      reopen()
+      return
+    }
+
+    const type = await selectConnectorType()
+    if (!type) {
+      reopen()
+      return
+    }
+
+    const nextConfig = {
+      ...sync.data.config,
+      connectors: {
+        ...(sync.data.config.connectors ?? {}),
+        [name]: {
+          type,
+          enabled: true,
+        },
+      },
+    }
+    await sdk.client.config.update({ config: { connectors: nextConfig.connectors } })
+    sync.set("config", nextConfig)
+    await refreshStatus()
+    reopen()
+  }
+
+  const options = createMemo(() => {
+    const config = sync.data.config.connectors ?? {}
+    const statusMap = sync.data.connectors ?? {}
+    const loadingName = loading()
+
+    const configured = pipe(
+      config,
+      entries(),
+      sortBy(([name]) => name),
+      map(([name, entry]) => {
+        if (!Connectors.isConnectorConfigured(entry)) return undefined
+        const status = statusMap[name]
+        const enabled = entry.enabled !== false
+        const description = status?.status ?? (enabled ? "not initialized" : "disabled")
+        return {
+          value: name,
+          title: name,
+          description,
+          footer: <Status enabled={enabled} configured={true} loading={loadingName === name} status={status?.status} />,
+          category: entry.type,
+        } satisfies DialogSelectOption<string>
+      }),
+    ).filter(Boolean) as DialogSelectOption<string>[]
+
+    const missingDefaults = DEFAULT_CONNECTORS.filter((item) => {
+      const entry = config[item.name]
+      return !entry || !Connectors.isConnectorConfigured(entry)
+    }).map(
+      (item) =>
+        ({
+          value: item.name,
+          title: item.name,
+          description: item.description,
+          footer: <Status enabled={false} configured={false} loading={loadingName === item.name} status={undefined} />,
+          category: item.type,
+        }) satisfies DialogSelectOption<string>,
+    )
+
+    return [...configured, ...missingDefaults]
+  })
+
+  const keybinds = createMemo(() => [
+    {
+      keybind: Keybind.parse("space")[0],
+      title: "toggle",
+      onTrigger: async (option: DialogSelectOption<string>) => {
+        if (loading() !== null) return
+        const entry = sync.data.config.connectors?.[option.value]
+        if (!entry || !Connectors.isConnectorConfigured(entry)) {
+          const preset = DEFAULT_CONNECTORS.find((item) => item.name === option.value)
+          if (preset) {
+            await openAuth(option.value, preset.type)
+            return
+          }
+          return
+        }
+        setLoading(option.value)
+        try {
+          await local.connectors.toggle(option.value)
+          await refreshStatus()
+        } catch (error) {
+          console.error("Failed to toggle connector:", error)
+        } finally {
+          setLoading(null)
+        }
+      },
+    },
+    {
+      keybind: Keybind.parse("ctrl+a")[0],
+      title: "auth/build",
+      onTrigger: async (option: DialogSelectOption<string>) => {
+        const entry = sync.data.config.connectors?.[option.value]
+        const preset = DEFAULT_CONNECTORS.find((item) => item.name === option.value)
+        const type = entry && Connectors.isConnectorConfigured(entry) ? entry.type : preset?.type
+        if (type === "lovable") {
+          await openLovableBuild()
+          return
+        }
+        await openAuth(option.value, type)
+      },
+    },
+    {
+      keybind: Keybind.parse("x")[0],
+      title: "logout",
+      onTrigger: async (option: DialogSelectOption<string>) => {
+        if (loading() !== null) return
+        setLoading(option.value)
+        try {
+          await logout(option.value)
+        } catch (error) {
+          console.error("Failed to logout connector:", error)
+        } finally {
+          setLoading(null)
+        }
+      },
+    },
+    {
+      keybind: Keybind.parse("ctrl+n")[0],
+      title: "add",
+      onTrigger: async () => {
+        await addConnector()
+      },
+    },
+  ])
+
+  return (
+    <DialogSelect
+      title="Connectors"
+      options={options()}
+      keybind={keybinds()}
+      onSelect={() => {
+        // Don't close on select; align with MCP dialog behavior
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,97 @@
+import { createMemo, createSignal } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { entries, sortBy } from "remeda"
+import { DialogSelect, type DialogSelectRef } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+import { useSDK } from "@tui/context/sdk"
+import { useToast } from "@tui/ui/toast"
+
+interface ImageConfig {
+  model?: string
+  provider?: string
+}
+
+interface ConfigWithImage {
+  image?: ImageConfig
+}
+
+function isImageModel(modelID: string, info: any): boolean {
+  // Primary signal from models.dev -> Provider.Model.capabilities.output.image
+  if (info?.capabilities?.output?.image === true) return true
+
+  // Fallback heuristics for models missing modalities metadata.
+  const id = modelID.toLowerCase()
+  if (id.includes("dall-e")) return true
+  if (id.includes("gpt-image")) return true
+  if (id.includes("-image") || id.includes("image-")) return true
+  return false
+}
+
+export function DialogImageModel() {
+  const sync = useSync()
+  const dialog = useDialog()
+  const sdk = useSDK()
+  const toast = useToast()
+  const [ref, setRef] = createSignal<DialogSelectRef<{ providerID: string; modelID: string }>>()
+  const [query, setQuery] = createSignal("")
+
+  const currentImage = createMemo(() => (sync.data.config as ConfigWithImage | undefined)?.image)
+
+  const connectedProviderIDs = createMemo(() => new Set(sync.data.provider_next.connected ?? []))
+
+  const options = createMemo(() => {
+    const needle = query().trim().toLowerCase()
+    const allOptions: Array<{
+      value: { providerID: string; modelID: string }
+      title: string
+      description: string
+      category?: string
+      disabled?: boolean
+      onSelect: () => void
+    }> = []
+
+    for (const provider of sync.data.provider_next.all as any[]) {
+      if (!connectedProviderIDs().has(provider.id)) continue
+      for (const [modelID, info] of entries(provider.models)) {
+        if (info.status === "deprecated") continue
+        if (!isImageModel(modelID, info)) continue
+
+        const value = { providerID: provider.id, modelID }
+        const isCurrent = provider.id === currentImage()?.provider && modelID === currentImage()?.model
+
+        allOptions.push({
+          value,
+          title: info.name ?? modelID,
+          description: provider.name,
+          category: provider.name,
+          disabled: isCurrent,
+          onSelect: async () => {
+            const { error } = await sdk.client.config.update({
+              config: { image: { provider: provider.id, model: modelID } } as any,
+            })
+            if (error) {
+              toast.show({ message: "Failed to update image config", variant: "error" })
+              return
+            }
+            toast.show({ message: "Image model updated", variant: "success" })
+            dialog.clear()
+          },
+        })
+      }
+    }
+
+    const sorted = sortBy(allOptions, (x) => x.title)
+    if (!needle) return sorted
+    return sorted.filter((x) => x.title.toLowerCase().includes(needle))
+  })
+
+  return (
+    <DialogSelect
+      ref={(r) => setRef(r as any)}
+      onFilter={setQuery}
+      skipFilter={true}
+      title="Select image generation model"
+      options={options() as any}
+    />
+  )
+}

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

@@ -0,0 +1,86 @@
+import { createMemo, createSignal } from "solid-js"
+import { useLocal } from "@tui/context/local"
+import { useSync } from "@tui/context/sync"
+import { map, pipe, entries, sortBy } from "remeda"
+import { DialogSelect, type DialogSelectRef, type DialogSelectOption } from "@tui/ui/dialog-select"
+import { useTheme } from "../context/theme"
+import { Keybind } from "@/util/keybind"
+import { TextAttributes } from "@opentui/core"
+import { useSDK } from "@tui/context/sdk"
+
+function Status(props: { enabled: boolean; loading: boolean }) {
+  const { theme } = useTheme()
+  if (props.loading) {
+    return <span style={{ fg: theme.textMuted }}>⋯ Loading</span>
+  }
+  if (props.enabled) {
+    return <span style={{ fg: theme.success, attributes: TextAttributes.BOLD }}>✓ Enabled</span>
+  }
+  return <span style={{ fg: theme.textMuted }}>○ Disabled</span>
+}
+
+export function DialogMcp() {
+  const local = useLocal()
+  const sync = useSync()
+  const sdk = useSDK()
+  const [, setRef] = createSignal<DialogSelectRef<unknown>>()
+  const [loading, setLoading] = createSignal<string | null>(null)
+
+  const options = createMemo(() => {
+    // Track sync data and loading state to trigger re-render when they change
+    const mcpData = sync.data.mcp
+    const loadingMcp = loading()
+
+    return pipe(
+      mcpData ?? {},
+      entries(),
+      sortBy(([name]) => name),
+      map(([name, status]) => ({
+        value: name,
+        title: name,
+        description: status.status === "failed" ? "failed" : status.status,
+        footer: <Status enabled={local.mcp.isEnabled(name)} loading={loadingMcp === name} />,
+        category: undefined,
+      })),
+    )
+  })
+
+  const keybinds = createMemo(() => [
+    {
+      keybind: Keybind.parse("space")[0],
+      title: "toggle",
+      onTrigger: async (option: DialogSelectOption<string>) => {
+        // Prevent toggling while an operation is already in progress
+        if (loading() !== null) return
+
+        setLoading(option.value)
+        try {
+          await local.mcp.toggle(option.value)
+          // Refresh MCP status from server
+          const status = await sdk.client.mcp.status()
+          if (status.data) {
+            sync.set("mcp", status.data)
+          } else {
+            console.error("Failed to refresh MCP status: no data returned")
+          }
+        } catch (error) {
+          console.error("Failed to toggle MCP:", error)
+        } finally {
+          setLoading(null)
+        }
+      },
+    },
+  ])
+
+  return (
+    <DialogSelect
+      ref={setRef}
+      title="MCPs"
+      options={options()}
+      keybind={keybinds()}
+      onSelect={(option) => {
+        // Don't close on select, only on escape
+      }}
+    />
+  )
+}