jonsoc 1.1.50 → 1.1.51

package/src/cli/cmd/tui/context/kv.tsx

@@ -0,0 +1,53 @@
+import { Global } from "@/global"
+import { createSignal, type Setter, untrack } from "solid-js"
+import { createStore } from "solid-js/store"
+import { createSimpleContext } from "./helper"
+import path from "path"
+
+export const { use: useKV, provider: KVProvider } = createSimpleContext({
+  name: "KV",
+  init: () => {
+    const [ready, setReady] = createSignal(false)
+    const [store, setStore] = createStore<Record<string, any>>()
+    const file = Bun.file(path.join(Global.Path.state, "kv.json"))
+
+    file
+      .json()
+      .then((x) => {
+        setStore(x)
+      })
+      .catch(() => {})
+      .finally(() => {
+        setReady(true)
+      })
+
+    const result = {
+      get ready() {
+        return ready()
+      },
+      get store() {
+        return store
+      },
+      signal<T>(name: string, defaultValue: T) {
+        if (store[name] === undefined) setStore(name, defaultValue)
+        return [
+          function () {
+            return result.get(name)
+          },
+          function setter(next: Setter<T>) {
+            result.set(name, next)
+          },
+        ] as const
+      },
+      get(key: string, defaultValue?: any) {
+        return store[key] ?? defaultValue
+      },
+      set(key: string, value: any) {
+        setStore(key, value)
+        const payload = untrack(() => JSON.stringify(store, null, 2))
+        Bun.write(file, payload)
+      },
+    }
+    return result
+  },
+})

package/src/cli/cmd/tui/context/layout.tsx

@@ -0,0 +1,240 @@
+import { createStore } from "solid-js/store"
+import { createSimpleContext } from "./helper"
+import { useKV } from "./kv"
+
+export type PanelType = "chat" | "explorer" | "viewer"
+
+export type PanelPosition = 0 | 1 | 2
+
+export interface PanelConfig {
+  type: PanelType
+  position: PanelPosition
+  width: number
+  visible: boolean
+}
+
+export interface LayoutConfig {
+  panels: PanelConfig[]
+  version: number
+}
+
+// Round width to nearest 5% increment
+const roundToFive = (width: number): number => {
+  return Math.round(width / 5) * 5
+}
+
+const DEFAULT_LAYOUT: LayoutConfig = {
+  version: 1,
+  panels: [
+    { type: "explorer", position: 0, width: 20, visible: true },
+    { type: "chat", position: 1, width: 50, visible: true },
+    { type: "viewer", position: 2, width: 30, visible: true },
+  ],
+}
+
+const LAYOUT_VERSION = 1
+
+export function validateLayout(layout: any): LayoutConfig {
+  if (!layout || typeof layout !== "object") return DEFAULT_LAYOUT
+  if (layout.version !== LAYOUT_VERSION) return DEFAULT_LAYOUT
+  if (!Array.isArray(layout.panels)) return DEFAULT_LAYOUT
+
+  const validPanels = layout.panels.filter(
+    (p: any) =>
+      p &&
+      ["chat", "explorer", "viewer"].includes(p.type) &&
+      [0, 1, 2].includes(p.position) &&
+      typeof p.width === "number" &&
+      typeof p.visible === "boolean",
+  )
+
+  if (validPanels.length !== 3) return DEFAULT_LAYOUT
+
+  const positions = new Set(validPanels.map((p: PanelConfig) => p.position))
+  if (positions.size !== 3) return DEFAULT_LAYOUT
+
+  // Round all widths to nearest 5%
+  const roundedPanels = validPanels.map((p: PanelConfig) => ({
+    ...p,
+    width: roundToFive(Math.max(5, Math.min(90, p.width))),
+  }))
+
+  return {
+    version: LAYOUT_VERSION,
+    panels: roundedPanels.sort((a: PanelConfig, b: PanelConfig) => a.position - b.position),
+  }
+}
+
+export function createLayoutStore() {
+  const kv = useKV()
+  const stored = kv.get("ui_layout", DEFAULT_LAYOUT)
+  const validated = validateLayout(stored)
+
+  const [store, setStore] = createStore<LayoutConfig>(validated)
+
+  const save = () => {
+    console.log("[Layout] save - saving layout:", store)
+    kv.set("ui_layout", { ...store })
+  }
+
+  const updatePanel = (type: PanelType, updates: Partial<Omit<PanelConfig, "type">>) => {
+    console.log("[Layout] updatePanel - type:", type, "updates:", updates)
+    setStore(
+      "panels",
+      (p) => p.type === type,
+      (panel) => {
+        const updated = { ...panel, ...updates }
+        console.log("[Layout] updatePanel - updated panel:", updated)
+        return updated
+      },
+    )
+    save()
+  }
+
+  const movePanel = (type: PanelType, newPosition: PanelPosition) => {
+    const currentPanel = store.panels.find((p) => p.type === type)
+    if (!currentPanel || currentPanel.position === newPosition) return
+
+    const otherPanel = store.panels.find((p) => p.position === newPosition)
+    if (!otherPanel) return
+
+    setStore("panels", (p) => p.type === type, "position", newPosition)
+    setStore("panels", (p) => p.type === otherPanel.type, "position", currentPanel.position as PanelPosition)
+    save()
+  }
+
+  const swapPanels = (pos1: PanelPosition, pos2: PanelPosition) => {
+    const panel1 = store.panels.find((p) => p.position === pos1)
+    const panel2 = store.panels.find((p) => p.position === pos2)
+    if (!panel1 || !panel2) return
+
+    setStore("panels", (p) => p.type === panel1.type, "position", pos2)
+    setStore("panels", (p) => p.type === panel2.type, "position", pos1)
+    save()
+  }
+
+  const setPanelWidth = (type: PanelType, width: number) => {
+    const rounded = roundToFive(width)
+    const clamped = Math.max(5, Math.min(90, rounded))
+    console.log("[Layout] setPanelWidth - type:", type, "width:", width, "rounded:", rounded, "clamped:", clamped)
+    updatePanel(type, { width: clamped })
+  }
+
+  const batchUpdateWidths = (updates: Array<{ type: PanelType; width: number }>) => {
+    console.log("[Layout] batchUpdateWidths - updates:", updates)
+
+    // Apply all updates to a copy of the panels
+    const updatedPanels = store.panels.map((panel) => {
+      const update = updates.find((u) => u.type === panel.type)
+      if (update) {
+        const rounded = roundToFive(update.width)
+        const clamped = Math.max(5, Math.min(90, rounded))
+        return { ...panel, width: clamped }
+      }
+      return panel
+    })
+
+    // Update the store with all changes at once
+    setStore("panels", updatedPanels)
+    save()
+  }
+
+  const togglePanel = (type: PanelType) => {
+    const panel = store.panels.find((p) => p.type === type)
+    if (!panel) return
+
+    const newVisible = !panel.visible
+    console.log("[Layout] togglePanel - type:", type, "visible:", newVisible)
+
+    const updates: Array<{ type: PanelType; width: number }> = []
+
+    if (!newVisible) {
+      // Hiding panel: redistribute its width equally to other visible panels
+      const otherVisible = store.panels.filter((p) => p.type !== type && p.visible)
+      if (otherVisible.length > 0) {
+        const widthToDistribute = panel.width
+        const perPanel = widthToDistribute / otherVisible.length
+
+        otherVisible.forEach((p, idx) => {
+          // Last panel gets the remainder to ensure exact distribution
+          const additionalWidth =
+            idx === otherVisible.length - 1 ? widthToDistribute - perPanel * (otherVisible.length - 1) : perPanel
+          const newWidth = roundToFive(Math.min(90, p.width + additionalWidth))
+          updates.push({ type: p.type, width: newWidth })
+        })
+      }
+    } else {
+      // Showing panel: take width equally from other visible panels
+      const otherVisible = store.panels.filter((p) => p.type !== type && p.visible)
+      if (otherVisible.length > 0) {
+        const widthNeeded = panel.width
+        const availableWidth = otherVisible.reduce((sum, p) => sum + (p.width - 5), 0)
+
+        if (availableWidth >= widthNeeded) {
+          const perPanel = widthNeeded / otherVisible.length
+          let remainingToTake = widthNeeded
+
+          otherVisible.forEach((p, idx) => {
+            if (remainingToTake <= 0) return
+            const canTake = p.width - 5
+            // Last panel takes the remainder
+            const takeAmount = idx === otherVisible.length - 1 ? remainingToTake : Math.min(canTake, perPanel)
+            const newWidth = roundToFive(Math.max(5, p.width - takeAmount))
+            updates.push({ type: p.type, width: newWidth })
+            remainingToTake -= takeAmount
+          })
+        } else {
+          // Not enough space available, reduce this panel's width
+          updates.push({ type, width: roundToFive(Math.max(5, Math.min(90, availableWidth))) })
+        }
+      }
+    }
+
+    // Apply all width updates atomically
+    if (updates.length > 0) {
+      batchUpdateWidths(updates)
+    }
+
+    updatePanel(type, { visible: newVisible })
+  }
+
+  const getPanelAt = (position: PanelPosition) => {
+    // Access store.panels to create reactivity tracking
+    const panels = store.panels
+    return panels.find((p) => p.position === position)
+  }
+
+  const getPanelByType = (type: PanelType) => {
+    // Access store.panels to create reactivity tracking
+    const panels = store.panels
+    return panels.find((p) => p.type === type)
+  }
+
+  const resetToDefault = () => {
+    setStore(DEFAULT_LAYOUT)
+    save()
+  }
+
+  return {
+    get config() {
+      return store
+    },
+    get panels() {
+      return store.panels
+    },
+    updatePanel,
+    movePanel,
+    swapPanels,
+    setPanelWidth,
+    batchUpdateWidths,
+    togglePanel,
+    getPanelAt,
+    getPanelByType,
+    resetToDefault,
+  }
+}
+
+export const { use: useLayout, provider: LayoutProvider } = createSimpleContext({
+  name: "Layout",
+  init: createLayoutStore,
+})

package/src/cli/cmd/tui/context/local.tsx

@@ -0,0 +1,402 @@
+import { createStore } from "solid-js/store"
+import { batch, createEffect, createMemo } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { useTheme } from "@tui/context/theme"
+import { uniqueBy } from "remeda"
+import path from "path"
+import { Global } from "@/global"
+import { iife } from "@/util/iife"
+import { createSimpleContext } from "./helper"
+import { useToast } from "../ui/toast"
+import { Provider } from "@/provider/provider"
+import { useArgs } from "./args"
+import { useSDK } from "./sdk"
+import { RGBA } from "@opentui/core"
+
+export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
+  name: "Local",
+  init: () => {
+    const sync = useSync()
+    const sdk = useSDK()
+    const toast = useToast()
+
+    function isModelValid(model: { providerID: string; modelID: string }) {
+      const provider = sync.data.provider.find((x) => x.id === model.providerID)
+      return !!provider?.models[model.modelID]
+    }
+
+    function getFirstValidModel(...modelFns: (() => { providerID: string; modelID: string } | undefined)[]) {
+      for (const modelFn of modelFns) {
+        const model = modelFn()
+        if (!model) continue
+        if (isModelValid(model)) return model
+      }
+    }
+
+    const agent = iife(() => {
+      const agents = createMemo(() => sync.data.agent.filter((x) => x.mode !== "subagent" && !x.hidden))
+      const [agentStore, setAgentStore] = createStore<{
+        current: string
+      }>({
+        current: agents()[0].name,
+      })
+      const { theme } = useTheme()
+      const colors = createMemo(() => [
+        theme.secondary,
+        theme.accent,
+        theme.success,
+        theme.warning,
+        theme.primary,
+        theme.error,
+      ])
+      return {
+        list() {
+          return agents()
+        },
+        current() {
+          return agents().find((x) => x.name === agentStore.current)!
+        },
+        set(name: string) {
+          if (!agents().some((x) => x.name === name))
+            return toast.show({
+              variant: "warning",
+              message: `Agent not found: ${name}`,
+              duration: 3000,
+            })
+          setAgentStore("current", name)
+        },
+        move(direction: 1 | -1) {
+          batch(() => {
+            let next = agents().findIndex((x) => x.name === agentStore.current) + direction
+            if (next < 0) next = agents().length - 1
+            if (next >= agents().length) next = 0
+            const value = agents()[next]
+            setAgentStore("current", value.name)
+          })
+        },
+        color(name: string) {
+          const all = sync.data.agent
+          const agent = all.find((x) => x.name === name)
+          if (agent?.color) return RGBA.fromHex(agent.color)
+          const index = all.findIndex((x) => x.name === name)
+          if (index === -1) return colors()[0]
+          return colors()[index % colors().length]
+        },
+      }
+    })
+
+    const model = iife(() => {
+      const [modelStore, setModelStore] = createStore<{
+        ready: boolean
+        model: Record<
+          string,
+          {
+            providerID: string
+            modelID: string
+          }
+        >
+        recent: {
+          providerID: string
+          modelID: string
+        }[]
+        favorite: {
+          providerID: string
+          modelID: string
+        }[]
+        variant: Record<string, string | undefined>
+      }>({
+        ready: false,
+        model: {},
+        recent: [],
+        favorite: [],
+        variant: {},
+      })
+
+      const file = Bun.file(path.join(Global.Path.state, "model.json"))
+      const state = {
+        pending: false,
+      }
+
+      function save() {
+        if (!modelStore.ready) {
+          state.pending = true
+          return
+        }
+        state.pending = false
+        Bun.write(
+          file,
+          JSON.stringify({
+            recent: modelStore.recent,
+            favorite: modelStore.favorite,
+            variant: modelStore.variant,
+          }),
+        )
+      }
+
+      file
+        .json()
+        .then((x) => {
+          if (Array.isArray(x.recent)) setModelStore("recent", x.recent)
+          if (Array.isArray(x.favorite)) setModelStore("favorite", x.favorite)
+          if (typeof x.variant === "object" && x.variant !== null) setModelStore("variant", x.variant)
+        })
+        .catch(() => {})
+        .finally(() => {
+          setModelStore("ready", true)
+          if (state.pending) save()
+        })
+
+      const args = useArgs()
+      const fallbackModel = createMemo(() => {
+        if (args.model) {
+          const { providerID, modelID } = Provider.parseModel(args.model)
+          if (isModelValid({ providerID, modelID })) {
+            return {
+              providerID,
+              modelID,
+            }
+          }
+        }
+
+        if (sync.data.config.model) {
+          const { providerID, modelID } = Provider.parseModel(sync.data.config.model)
+          if (isModelValid({ providerID, modelID })) {
+            return {
+              providerID,
+              modelID,
+            }
+          }
+        }
+
+        for (const item of modelStore.recent) {
+          if (isModelValid(item)) {
+            return item
+          }
+        }
+
+        const provider = sync.data.provider[0]
+        if (!provider) return undefined
+        const defaultModel = sync.data.provider_default[provider.id]
+        const firstModel = Object.values(provider.models)[0]
+        const model = defaultModel ?? firstModel?.id
+        if (!model) return undefined
+        return {
+          providerID: provider.id,
+          modelID: model,
+        }
+      })
+
+      const currentModel = createMemo(() => {
+        const a = agent.current()
+        return (
+          getFirstValidModel(
+            () => modelStore.model[a.name],
+            () => a.model,
+            fallbackModel,
+          ) ?? undefined
+        )
+      })
+
+      return {
+        current: currentModel,
+        get ready() {
+          return modelStore.ready
+        },
+        recent() {
+          return modelStore.recent
+        },
+        favorite() {
+          return modelStore.favorite
+        },
+        parsed: createMemo(() => {
+          const value = currentModel()
+          if (!value) {
+            return {
+              provider: "Connect a provider",
+              model: "No provider selected",
+              reasoning: false,
+            }
+          }
+          const provider = sync.data.provider.find((x) => x.id === value.providerID)
+          const info = provider?.models[value.modelID]
+          return {
+            provider: provider?.name ?? value.providerID,
+            model: info?.name ?? value.modelID,
+            reasoning: info?.capabilities?.reasoning ?? false,
+          }
+        }),
+        cycle(direction: 1 | -1) {
+          const current = currentModel()
+          if (!current) return
+          const recent = modelStore.recent
+          const index = recent.findIndex((x) => x.providerID === current.providerID && x.modelID === current.modelID)
+          if (index === -1) return
+          let next = index + direction
+          if (next < 0) next = recent.length - 1
+          if (next >= recent.length) next = 0
+          const val = recent[next]
+          if (!val) return
+          setModelStore("model", agent.current().name, { ...val })
+        },
+        cycleFavorite(direction: 1 | -1) {
+          const favorites = modelStore.favorite.filter((item) => isModelValid(item))
+          if (!favorites.length) {
+            toast.show({
+              variant: "info",
+              message: "Add a favorite model to use this shortcut",
+              duration: 3000,
+            })
+            return
+          }
+          const current = currentModel()
+          let index = -1
+          if (current) {
+            index = favorites.findIndex((x) => x.providerID === current.providerID && x.modelID === current.modelID)
+          }
+          if (index === -1) {
+            index = direction === 1 ? 0 : favorites.length - 1
+          } else {
+            index += direction
+            if (index < 0) index = favorites.length - 1
+            if (index >= favorites.length) index = 0
+          }
+          const next = favorites[index]
+          if (!next) return
+          setModelStore("model", agent.current().name, { ...next })
+          const uniq = uniqueBy([next, ...modelStore.recent], (x) => `${x.providerID}/${x.modelID}`)
+          if (uniq.length > 10) uniq.pop()
+          setModelStore(
+            "recent",
+            uniq.map((x) => ({ providerID: x.providerID, modelID: x.modelID })),
+          )
+          save()
+        },
+        set(model: { providerID: string; modelID: string }, options?: { recent?: boolean }) {
+          batch(() => {
+            if (!isModelValid(model)) {
+              toast.show({
+                message: `Model ${model.providerID}/${model.modelID} is not valid`,
+                variant: "warning",
+                duration: 3000,
+              })
+              return
+            }
+            setModelStore("model", agent.current().name, model)
+            if (options?.recent) {
+              const uniq = uniqueBy([model, ...modelStore.recent], (x) => `${x.providerID}/${x.modelID}`)
+              if (uniq.length > 10) uniq.pop()
+              setModelStore(
+                "recent",
+                uniq.map((x) => ({ providerID: x.providerID, modelID: x.modelID })),
+              )
+              save()
+            }
+          })
+        },
+        toggleFavorite(model: { providerID: string; modelID: string }) {
+          batch(() => {
+            if (!isModelValid(model)) {
+              toast.show({
+                message: `Model ${model.providerID}/${model.modelID} is not valid`,
+                variant: "warning",
+                duration: 3000,
+              })
+              return
+            }
+            const exists = modelStore.favorite.some(
+              (x) => x.providerID === model.providerID && x.modelID === model.modelID,
+            )
+            const next = exists
+              ? modelStore.favorite.filter((x) => x.providerID !== model.providerID || x.modelID !== model.modelID)
+              : [model, ...modelStore.favorite]
+            setModelStore(
+              "favorite",
+              next.map((x) => ({ providerID: x.providerID, modelID: x.modelID })),
+            )
+            save()
+          })
+        },
+        variant: {
+          current() {
+            const m = currentModel()
+            if (!m) return undefined
+            const key = `${m.providerID}/${m.modelID}`
+            return modelStore.variant[key]
+          },
+          list() {
+            const m = currentModel()
+            if (!m) return []
+            const provider = sync.data.provider.find((x) => x.id === m.providerID)
+            const info = provider?.models[m.modelID]
+            if (!info?.variants) return []
+            return Object.keys(info.variants)
+          },
+          set(value: string | undefined) {
+            const m = currentModel()
+            if (!m) return
+            const key = `${m.providerID}/${m.modelID}`
+            setModelStore("variant", key, value)
+            save()
+          },
+          cycle() {
+            const variants = this.list()
+            if (variants.length === 0) return
+            const current = this.current()
+            if (!current) {
+              this.set(variants[0])
+              return
+            }
+            const index = variants.indexOf(current)
+            if (index === -1 || index === variants.length - 1) {
+              this.set(undefined)
+              return
+            }
+            this.set(variants[index + 1])
+          },
+        },
+      }
+    })
+
+    const mcp = {
+      isEnabled(name: string) {
+        const status = sync.data.mcp[name]
+        return status?.status === "connected"
+      },
+      async toggle(name: string) {
+        const status = sync.data.mcp[name]
+        if (status?.status === "connected") {
+          // Disable: disconnect the MCP
+          await sdk.client.mcp.disconnect({ name })
+        } else {
+          // Enable/Retry: connect the MCP (handles disabled, failed, and other states)
+          await sdk.client.mcp.connect({ name })
+        }
+      },
+    }
+
+    // Automatically update model when agent changes
+    createEffect(() => {
+      const value = agent.current()
+      if (value.model) {
+        if (isModelValid(value.model))
+          model.set({
+            providerID: value.model.providerID,
+            modelID: value.model.modelID,
+          })
+        else
+          toast.show({
+            variant: "warning",
+            message: `Agent ${value.name}'s configured model ${value.model.providerID}/${value.model.modelID} is not valid`,
+            duration: 3000,
+          })
+      }
+    })
+
+    const result = {
+      model,
+      agent,
+      mcp,
+    }
+    return result
+  },
+})

package/src/cli/cmd/tui/context/prompt.tsx

@@ -0,0 +1,18 @@
+import { createSimpleContext } from "./helper"
+import type { PromptRef } from "../component/prompt"
+
+export const { use: usePromptRef, provider: PromptRefProvider } = createSimpleContext({
+  name: "PromptRef",
+  init: () => {
+    let current: PromptRef | undefined
+
+    return {
+      get current() {
+        return current
+      },
+      set(ref: PromptRef | undefined) {
+        current = ref
+      },
+    }
+  },
+})