@jonsoc/app 1.1.34

package/src/components/dialog-select-server.tsx

@@ -0,0 +1,249 @@
+import { createResource, createEffect, createMemo, onCleanup, Show } from "solid-js"
+import { createStore, reconcile } from "solid-js/store"
+import { useDialog } from "@jonsoc/ui/context/dialog"
+import { Dialog } from "@jonsoc/ui/dialog"
+import { List } from "@jonsoc/ui/list"
+import { TextField } from "@jonsoc/ui/text-field"
+import { Button } from "@jonsoc/ui/button"
+import { IconButton } from "@jonsoc/ui/icon-button"
+import { normalizeServerUrl, serverDisplayName, useServer } from "@/context/server"
+import { usePlatform } from "@/context/platform"
+import { createOpencodeClient } from "@jonsoc/sdk/v2/client"
+import { useNavigate } from "@solidjs/router"
+import { useLanguage } from "@/context/language"
+
+type ServerStatus = { healthy: boolean; version?: string }
+
+async function checkHealth(url: string, fetch?: typeof globalThis.fetch): Promise<ServerStatus> {
+  const sdk = createOpencodeClient({
+    baseUrl: url,
+    fetch,
+    signal: AbortSignal.timeout(3000),
+  })
+  return sdk.global
+    .health()
+    .then((x) => ({ healthy: x.data?.healthy === true, version: x.data?.version }))
+    .catch(() => ({ healthy: false }))
+}
+
+export function DialogSelectServer() {
+  const navigate = useNavigate()
+  const dialog = useDialog()
+  const server = useServer()
+  const platform = usePlatform()
+  const language = useLanguage()
+  const [store, setStore] = createStore({
+    url: "",
+    adding: false,
+    error: "",
+    status: {} as Record<string, ServerStatus | undefined>,
+  })
+  const [defaultUrl, defaultUrlActions] = createResource(() => platform.getDefaultServerUrl?.())
+  const isDesktop = platform.platform === "desktop"
+
+  const items = createMemo(() => {
+    const current = server.url
+    const list = server.list
+    if (!current) return list
+    if (!list.includes(current)) return [current, ...list]
+    return [current, ...list.filter((x) => x !== current)]
+  })
+
+  const current = createMemo(() => items().find((x) => x === server.url) ?? items()[0])
+
+  const sortedItems = createMemo(() => {
+    const list = items()
+    if (!list.length) return list
+    const active = current()
+    const order = new Map(list.map((url, index) => [url, index] as const))
+    const rank = (value?: ServerStatus) => {
+      if (value?.healthy === true) return 0
+      if (value?.healthy === false) return 2
+      return 1
+    }
+    return list.slice().sort((a, b) => {
+      if (a === active) return -1
+      if (b === active) return 1
+      const diff = rank(store.status[a]) - rank(store.status[b])
+      if (diff !== 0) return diff
+      return (order.get(a) ?? 0) - (order.get(b) ?? 0)
+    })
+  })
+
+  async function refreshHealth() {
+    const results: Record<string, ServerStatus> = {}
+    await Promise.all(
+      items().map(async (url) => {
+        results[url] = await checkHealth(url, platform.fetch)
+      }),
+    )
+    setStore("status", reconcile(results))
+  }
+
+  createEffect(() => {
+    items()
+    refreshHealth()
+    const interval = setInterval(refreshHealth, 10_000)
+    onCleanup(() => clearInterval(interval))
+  })
+
+  function select(value: string, persist?: boolean) {
+    if (!persist && store.status[value]?.healthy === false) return
+    dialog.close()
+    if (persist) {
+      server.add(value)
+      navigate("/")
+      return
+    }
+    server.setActive(value)
+    navigate("/")
+  }
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    const value = normalizeServerUrl(store.url)
+    if (!value) return
+
+    setStore("adding", true)
+    setStore("error", "")
+
+    const result = await checkHealth(value, platform.fetch)
+    setStore("adding", false)
+
+    if (!result.healthy) {
+      setStore("error", language.t("dialog.server.add.error"))
+      return
+    }
+
+    setStore("url", "")
+    select(value, true)
+  }
+
+  async function handleRemove(url: string) {
+    server.remove(url)
+  }
+
+  return (
+    <Dialog title={language.t("dialog.server.title")} description={language.t("dialog.server.description")}>
+      <div class="flex flex-col gap-4 pb-4">
+        <List
+          search={{ placeholder: language.t("dialog.server.search.placeholder"), autofocus: true }}
+          emptyMessage={language.t("dialog.server.empty")}
+          items={sortedItems}
+          key={(x) => x}
+          current={current()}
+          onSelect={(x) => {
+            if (x) select(x)
+          }}
+        >
+          {(i) => (
+            <div class="flex items-center gap-2 min-w-0 flex-1 group/item">
+              <div
+                class="flex items-center gap-2 min-w-0 flex-1"
+                classList={{ "opacity-50": store.status[i]?.healthy === false }}
+              >
+                <div
+                  classList={{
+                    "size-1.5 rounded-full shrink-0": true,
+                    "bg-icon-success-base": store.status[i]?.healthy === true,
+                    "bg-icon-critical-base": store.status[i]?.healthy === false,
+                    "bg-border-weak-base": store.status[i] === undefined,
+                  }}
+                />
+                <span class="truncate">{serverDisplayName(i)}</span>
+                <span class="text-text-weak">{store.status[i]?.version}</span>
+              </div>
+              <Show when={current() !== i && server.list.includes(i)}>
+                <IconButton
+                  icon="circle-x"
+                  variant="ghost"
+                  class="bg-transparent transition-opacity shrink-0 hover:scale-110"
+                  aria-label={language.t("dialog.server.action.remove")}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleRemove(i)
+                  }}
+                />
+              </Show>
+            </div>
+          )}
+        </List>
+
+        <div class="mt-6 px-3 flex flex-col gap-1.5">
+          <div class="px-3">
+            <h3 class="text-14-regular text-text-weak">{language.t("dialog.server.add.title")}</h3>
+          </div>
+          <form onSubmit={handleSubmit}>
+            <div class="flex items-start gap-2">
+              <div class="flex-1 min-w-0 h-auto">
+                <TextField
+                  type="text"
+                  label={language.t("dialog.server.add.url")}
+                  hideLabel
+                  placeholder={language.t("dialog.server.add.placeholder")}
+                  value={store.url}
+                  onChange={(v) => {
+                    setStore("url", v)
+                    setStore("error", "")
+                  }}
+                  validationState={store.error ? "invalid" : "valid"}
+                  error={store.error}
+                />
+              </div>
+              <Button type="submit" variant="secondary" icon="plus-small" size="large" disabled={store.adding}>
+                {store.adding ? language.t("dialog.server.add.checking") : language.t("dialog.server.add.button")}
+              </Button>
+            </div>
+          </form>
+        </div>
+
+        <Show when={isDesktop}>
+          <div class="mt-6 px-3 flex flex-col gap-1.5">
+            <div class="px-3">
+              <h3 class="text-14-regular text-text-weak">{language.t("dialog.server.default.title")}</h3>
+              <p class="text-12-regular text-text-weak mt-1">{language.t("dialog.server.default.description")}</p>
+            </div>
+            <div class="flex items-center gap-2 px-3 py-2">
+              <Show
+                when={defaultUrl()}
+                fallback={
+                  <Show
+                    when={server.url}
+                    fallback={
+                      <span class="text-14-regular text-text-weak">{language.t("dialog.server.default.none")}</span>
+                    }
+                  >
+                    <Button
+                      variant="secondary"
+                      size="small"
+                      onClick={async () => {
+                        await platform.setDefaultServerUrl?.(server.url)
+                        defaultUrlActions.refetch(server.url)
+                      }}
+                    >
+                      {language.t("dialog.server.default.set")}
+                    </Button>
+                  </Show>
+                }
+              >
+                <div class="flex items-center gap-2 flex-1 min-w-0">
+                  <span class="truncate text-14-regular">{serverDisplayName(defaultUrl()!)}</span>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="small"
+                  onClick={async () => {
+                    await platform.setDefaultServerUrl?.(null)
+                    defaultUrlActions.refetch()
+                  }}
+                >
+                  {language.t("dialog.server.default.clear")}
+                </Button>
+              </Show>
+            </div>
+          </div>
+        </Show>
+      </div>
+    </Dialog>
+  )
+}

package/src/components/dialog-settings.tsx

@@ -0,0 +1,112 @@
+import { Component } from "solid-js"
+import { Dialog } from "@jonsoc/ui/dialog"
+import { Tabs } from "@jonsoc/ui/tabs"
+import { Icon } from "@jonsoc/ui/icon"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { SettingsGeneral } from "./settings-general"
+import { SettingsKeybinds } from "./settings-keybinds"
+import { SettingsPermissions } from "./settings-permissions"
+import { SettingsProviders } from "./settings-providers"
+import { SettingsModels } from "./settings-models"
+import { SettingsAgents } from "./settings-agents"
+import { SettingsCommands } from "./settings-commands"
+import { SettingsMcp } from "./settings-mcp"
+
+export const DialogSettings: Component = () => {
+  const language = useLanguage()
+  const platform = usePlatform()
+
+  return (
+    <Dialog size="x-large">
+      <Tabs orientation="vertical" variant="settings" defaultValue="general" class="h-full settings-dialog">
+        <Tabs.List>
+          <div
+            style={{
+              display: "flex",
+              "flex-direction": "column",
+              "justify-content": "space-between",
+              height: "100%",
+              width: "100%",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                "flex-direction": "column",
+                gap: "12px",
+                width: "100%",
+                "padding-top": "12px",
+              }}
+            >
+              <Tabs.SectionTitle>{language.t("settings.section.desktop")}</Tabs.SectionTitle>
+              <div style={{ display: "flex", "flex-direction": "column", gap: "6px", width: "100%" }}>
+                <Tabs.Trigger value="general">
+                  <Icon name="sliders" />
+                  {language.t("settings.tab.general")}
+                </Tabs.Trigger>
+                <Tabs.Trigger value="shortcuts">
+                  <Icon name="keyboard" />
+                  {language.t("settings.tab.shortcuts")}
+                </Tabs.Trigger>
+              </div>
+            </div>
+            <div class="flex flex-col gap-1 pl-1 py-1 text-12-medium text-text-weak">
+              <span>JonsOC Desktop</span>
+              <span class="text-11-regular">v{platform.version}</span>
+            </div>
+          </div>
+          {/* <Tabs.SectionTitle>Server</Tabs.SectionTitle> */}
+          {/* <Tabs.Trigger value="permissions"> */}
+          {/*   <Icon name="checklist" /> */}
+          {/*   Permissions */}
+          {/* </Tabs.Trigger> */}
+          {/* <Tabs.Trigger value="providers"> */}
+          {/*   <Icon name="server" /> */}
+          {/*   Providers */}
+          {/* </Tabs.Trigger> */}
+          {/* <Tabs.Trigger value="models"> */}
+          {/*   <Icon name="brain" /> */}
+          {/*   Models */}
+          {/* </Tabs.Trigger> */}
+          {/* <Tabs.Trigger value="agents"> */}
+          {/*   <Icon name="task" /> */}
+          {/*   Agents */}
+          {/* </Tabs.Trigger> */}
+          {/* <Tabs.Trigger value="commands"> */}
+          {/*   <Icon name="console" /> */}
+          {/*   Commands */}
+          {/* </Tabs.Trigger> */}
+          {/* <Tabs.Trigger value="mcp"> */}
+          {/*   <Icon name="mcp" /> */}
+          {/*   MCP */}
+          {/* </Tabs.Trigger> */}
+        </Tabs.List>
+        <Tabs.Content value="general" class="no-scrollbar">
+          <SettingsGeneral />
+        </Tabs.Content>
+        <Tabs.Content value="shortcuts" class="no-scrollbar">
+          <SettingsKeybinds />
+        </Tabs.Content>
+        {/* <Tabs.Content value="permissions" class="no-scrollbar"> */}
+        {/*   <SettingsPermissions /> */}
+        {/* </Tabs.Content> */}
+        {/* <Tabs.Content value="providers" class="no-scrollbar"> */}
+        {/*   <SettingsProviders /> */}
+        {/* </Tabs.Content> */}
+        {/* <Tabs.Content value="models" class="no-scrollbar"> */}
+        {/*   <SettingsModels /> */}
+        {/* </Tabs.Content> */}
+        {/* <Tabs.Content value="agents" class="no-scrollbar"> */}
+        {/*   <SettingsAgents /> */}
+        {/* </Tabs.Content> */}
+        {/* <Tabs.Content value="commands" class="no-scrollbar"> */}
+        {/*   <SettingsCommands /> */}
+        {/* </Tabs.Content> */}
+        {/* <Tabs.Content value="mcp" class="no-scrollbar"> */}
+        {/*   <SettingsMcp /> */}
+        {/* </Tabs.Content> */}
+      </Tabs>
+    </Dialog>
+  )
+}

package/src/components/file-tree.tsx

@@ -0,0 +1,112 @@
+import { useLocal, type LocalFile } from "@/context/local"
+import { Collapsible } from "@jonsoc/ui/collapsible"
+import { FileIcon } from "@jonsoc/ui/file-icon"
+import { Tooltip } from "@jonsoc/ui/tooltip"
+import { For, Match, Switch, type ComponentProps, type ParentProps } from "solid-js"
+import { Dynamic } from "solid-js/web"
+
+export default function FileTree(props: {
+  path: string
+  class?: string
+  nodeClass?: string
+  level?: number
+  onFileClick?: (file: LocalFile) => void
+}) {
+  const local = useLocal()
+  const level = props.level ?? 0
+
+  const Node = (p: ParentProps & ComponentProps<"div"> & { node: LocalFile; as?: "div" | "button" }) => (
+    <Dynamic
+      component={p.as ?? "div"}
+      classList={{
+        "p-0.5 w-full flex items-center gap-x-2 hover:bg-background-element": true,
+        // "bg-background-element": local.file.active()?.path === p.node.path,
+        [props.nodeClass ?? ""]: !!props.nodeClass,
+      }}
+      style={`padding-left: ${level * 10}px`}
+      draggable={true}
+      onDragStart={(e: any) => {
+        const evt = e as globalThis.DragEvent
+        evt.dataTransfer!.effectAllowed = "copy"
+        evt.dataTransfer!.setData("text/plain", `file:${p.node.path}`)
+
+        // Create custom drag image without margins
+        const dragImage = document.createElement("div")
+        dragImage.className =
+          "flex items-center gap-x-2 px-2 py-1 bg-background-element rounded-md border border-border-1"
+        dragImage.style.position = "absolute"
+        dragImage.style.top = "-1000px"
+
+        // Copy only the icon and text content without padding
+        const icon = e.currentTarget.querySelector("svg")
+        const text = e.currentTarget.querySelector("span")
+        if (icon && text) {
+          dragImage.innerHTML = icon.outerHTML + text.outerHTML
+        }
+
+        document.body.appendChild(dragImage)
+        evt.dataTransfer!.setDragImage(dragImage, 0, 12)
+        setTimeout(() => document.body.removeChild(dragImage), 0)
+      }}
+      {...p}
+    >
+      {p.children}
+      <span
+        classList={{
+          "text-xs whitespace-nowrap truncate": true,
+          "text-text-muted/40": p.node.ignored,
+          "text-text-muted/80": !p.node.ignored,
+          // "!text-text": local.file.active()?.path === p.node.path,
+          // "!text-primary": local.file.changed(p.node.path),
+        }}
+      >
+        {p.node.name}
+      </span>
+      {/* <Show when={local.file.changed(p.node.path)}> */}
+      {/*   <span class="ml-auto mr-1 w-1.5 h-1.5 rounded-full bg-primary/50 shrink-0" /> */}
+      {/* </Show> */}
+    </Dynamic>
+  )
+
+  return (
+    <div class={`flex flex-col ${props.class}`}>
+      <For each={local.file.children(props.path)}>
+        {(node) => (
+          <Tooltip forceMount={false} openDelay={2000} value={node.path} placement="right">
+            <Switch>
+              <Match when={node.type === "directory"}>
+                <Collapsible
+                  variant="ghost"
+                  class="w-full"
+                  forceMount={false}
+                  // open={local.file.node(node.path)?.expanded}
+                  onOpenChange={(open) => (open ? local.file.expand(node.path) : local.file.collapse(node.path))}
+                >
+                  <Collapsible.Trigger>
+                    <Node node={node}>
+                      <Collapsible.Arrow class="text-text-muted/60 ml-1" />
+                      <FileIcon
+                        node={node}
+                        // expanded={local.file.node(node.path).expanded}
+                        class="text-text-muted/60 -ml-1"
+                      />
+                    </Node>
+                  </Collapsible.Trigger>
+                  <Collapsible.Content>
+                    <FileTree path={node.path} level={level + 1} onFileClick={props.onFileClick} />
+                  </Collapsible.Content>
+                </Collapsible>
+              </Match>
+              <Match when={node.type === "file"}>
+                <Node node={node} as="button" onClick={() => props.onFileClick?.(node)}>
+                  <div class="w-4 shrink-0" />
+                  <FileIcon node={node} class="text-primary" />
+                </Node>
+              </Match>
+            </Switch>
+          </Tooltip>
+        )}
+      </For>
+    </div>
+  )
+}

package/src/components/link.tsx

@@ -0,0 +1,17 @@
+import { ComponentProps, splitProps } from "solid-js"
+import { usePlatform } from "@/context/platform"
+
+export interface LinkProps extends ComponentProps<"button"> {
+  href: string
+}
+
+export function Link(props: LinkProps) {
+  const platform = usePlatform()
+  const [local, rest] = splitProps(props, ["href", "children"])
+
+  return (
+    <button class="text-text-strong underline" onClick={() => platform.openLink(local.href)} {...rest}>
+      {local.children}
+    </button>
+  )
+}

package/src/components/model-tooltip.tsx

@@ -0,0 +1,91 @@
+import { Show, type Component } from "solid-js"
+import { useLanguage } from "@/context/language"
+
+type InputKey = "text" | "image" | "audio" | "video" | "pdf"
+type InputMap = Record<InputKey, boolean>
+
+type ModelInfo = {
+  id: string
+  name: string
+  provider: {
+    name: string
+  }
+  capabilities?: {
+    reasoning: boolean
+    input: InputMap
+  }
+  modalities?: {
+    input: Array<string>
+  }
+  reasoning?: boolean
+  limit: {
+    context: number
+  }
+}
+
+export const ModelTooltip: Component<{ model: ModelInfo; latest?: boolean; free?: boolean }> = (props) => {
+  const language = useLanguage()
+  const sourceName = (model: ModelInfo) => {
+    const value = `${model.id} ${model.name}`.toLowerCase()
+
+    if (/claude|anthropic/.test(value)) return language.t("model.provider.anthropic")
+    if (/gpt|o[1-4]|codex|openai/.test(value)) return language.t("model.provider.openai")
+    if (/gemini|palm|bard|google/.test(value)) return language.t("model.provider.google")
+    if (/grok|xai/.test(value)) return language.t("model.provider.xai")
+    if (/llama|meta/.test(value)) return language.t("model.provider.meta")
+
+    return model.provider.name
+  }
+  const inputLabel = (value: string) => {
+    if (value === "text") return language.t("model.input.text")
+    if (value === "image") return language.t("model.input.image")
+    if (value === "audio") return language.t("model.input.audio")
+    if (value === "video") return language.t("model.input.video")
+    if (value === "pdf") return language.t("model.input.pdf")
+    return value
+  }
+  const title = () => {
+    const tags: Array<string> = []
+    if (props.latest) tags.push(language.t("model.tag.latest"))
+    if (props.free) tags.push(language.t("model.tag.free"))
+    const suffix = tags.length ? ` (${tags.join(", ")})` : ""
+    return `${sourceName(props.model)} ${props.model.name}${suffix}`
+  }
+  const inputs = () => {
+    if (props.model.capabilities) {
+      const input = props.model.capabilities.input
+      const order: Array<InputKey> = ["text", "image", "audio", "video", "pdf"]
+      const entries = order.filter((key) => input[key]).map((key) => inputLabel(key))
+      return entries.length ? entries.join(", ") : undefined
+    }
+    const raw = props.model.modalities?.input
+    if (!raw) return
+    const entries = raw.map((value) => inputLabel(value))
+    return entries.length ? entries.join(", ") : undefined
+  }
+  const reasoning = () => {
+    if (props.model.capabilities)
+      return props.model.capabilities.reasoning
+        ? language.t("model.tooltip.reasoning.allowed")
+        : language.t("model.tooltip.reasoning.none")
+    return props.model.reasoning
+      ? language.t("model.tooltip.reasoning.allowed")
+      : language.t("model.tooltip.reasoning.none")
+  }
+  const context = () => language.t("model.tooltip.context", { limit: props.model.limit.context.toLocaleString() })
+
+  return (
+    <div class="flex flex-col gap-1 py-1">
+      <div class="text-13-medium">{title()}</div>
+      <Show when={inputs()}>
+        {(value) => (
+          <div class="text-12-regular text-text-invert-base">
+            {language.t("model.tooltip.allows", { inputs: value() })}
+          </div>
+        )}
+      </Show>
+      <div class="text-12-regular text-text-invert-base">{reasoning()}</div>
+      <div class="text-12-regular text-text-invert-base">{context()}</div>
+    </div>
+  )
+}