@jonsoc/app 1.1.34

package/src/components/settings-providers.tsx

@@ -0,0 +1,15 @@
+import { Component } from "solid-js"
+import { useLanguage } from "@/context/language"
+
+export const SettingsProviders: Component = () => {
+  const language = useLanguage()
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto">
+      <div class="flex flex-col gap-6 p-6 max-w-[600px]">
+        <h2 class="text-16-medium text-text-strong">{language.t("settings.providers.title")}</h2>
+        <p class="text-14-regular text-text-weak">{language.t("settings.providers.description")}</p>
+      </div>
+    </div>
+  )
+}

package/src/components/terminal.tsx

@@ -0,0 +1,315 @@
+import type { Ghostty, Terminal as Term, FitAddon } from "ghostty-web"
+import { ComponentProps, createEffect, createSignal, onCleanup, onMount, splitProps } from "solid-js"
+import { useSDK } from "@/context/sdk"
+import { monoFontFamily, useSettings } from "@/context/settings"
+import { SerializeAddon } from "@/addons/serialize"
+import { LocalPTY } from "@/context/terminal"
+import { resolveThemeVariant, useTheme, withAlpha, type HexColor } from "@jonsoc/ui/theme"
+
+export interface TerminalProps extends ComponentProps<"div"> {
+  pty: LocalPTY
+  onSubmit?: () => void
+  onCleanup?: (pty: LocalPTY) => void
+  onConnect?: () => void
+  onConnectError?: (error: unknown) => void
+}
+
+type TerminalColors = {
+  background: string
+  foreground: string
+  cursor: string
+  selectionBackground: string
+}
+
+const DEFAULT_TERMINAL_COLORS: Record<"light" | "dark", TerminalColors> = {
+  light: {
+    background: "#fcfcfc",
+    foreground: "#211e1e",
+    cursor: "#211e1e",
+    selectionBackground: withAlpha("#211e1e", 0.2),
+  },
+  dark: {
+    background: "#191515",
+    foreground: "#d4d4d4",
+    cursor: "#d4d4d4",
+    selectionBackground: withAlpha("#d4d4d4", 0.25),
+  },
+}
+
+export const Terminal = (props: TerminalProps) => {
+  const sdk = useSDK()
+  const settings = useSettings()
+  const theme = useTheme()
+  let container!: HTMLDivElement
+  const [local, others] = splitProps(props, ["pty", "class", "classList", "onConnect", "onConnectError"])
+  let ws: WebSocket | undefined
+  let term: Term | undefined
+  let ghostty: Ghostty
+  let serializeAddon: SerializeAddon
+  let fitAddon: FitAddon
+  let handleResize: () => void
+  let handleTextareaFocus: () => void
+  let handleTextareaBlur: () => void
+  let reconnect: number | undefined
+  let disposed = false
+
+  const getTerminalColors = (): TerminalColors => {
+    const mode = theme.mode()
+    const fallback = DEFAULT_TERMINAL_COLORS[mode]
+    const currentTheme = theme.themes()[theme.themeId()]
+    if (!currentTheme) return fallback
+    const variant = mode === "dark" ? currentTheme.dark : currentTheme.light
+    if (!variant?.seeds) return fallback
+    const resolved = resolveThemeVariant(variant, mode === "dark")
+    const text = resolved["text-stronger"] ?? fallback.foreground
+    const background = resolved["background-stronger"] ?? fallback.background
+    const alpha = mode === "dark" ? 0.25 : 0.2
+    const base = text.startsWith("#") ? (text as HexColor) : (fallback.foreground as HexColor)
+    const selectionBackground = withAlpha(base, alpha)
+    return {
+      background,
+      foreground: text,
+      cursor: text,
+      selectionBackground,
+    }
+  }
+
+  const [terminalColors, setTerminalColors] = createSignal<TerminalColors>(getTerminalColors())
+
+  createEffect(() => {
+    const colors = getTerminalColors()
+    setTerminalColors(colors)
+    if (!term) return
+    const setOption = (term as unknown as { setOption?: (key: string, value: TerminalColors) => void }).setOption
+    if (!setOption) return
+    setOption("theme", colors)
+  })
+
+  createEffect(() => {
+    const font = monoFontFamily(settings.appearance.font())
+    if (!term) return
+    const setOption = (term as unknown as { setOption?: (key: string, value: string) => void }).setOption
+    if (!setOption) return
+    setOption("fontFamily", font)
+  })
+
+  const focusTerminal = () => {
+    const t = term
+    if (!t) return
+    t.focus()
+    setTimeout(() => t.textarea?.focus(), 0)
+  }
+  const handlePointerDown = () => {
+    const activeElement = document.activeElement
+    if (activeElement instanceof HTMLElement && activeElement !== container) {
+      activeElement.blur()
+    }
+    focusTerminal()
+  }
+
+  onMount(async () => {
+    const mod = await import("ghostty-web")
+    ghostty = await mod.Ghostty.load()
+
+    const url = new URL(sdk.url + `/pty/${local.pty.id}/connect?directory=${encodeURIComponent(sdk.directory)}`)
+    if (window.__OPENCODE__?.serverPassword) {
+      url.username = "jonsoc"
+      url.password = window.__OPENCODE__?.serverPassword
+    }
+    const socket = new WebSocket(url)
+    ws = socket
+
+    const t = new mod.Terminal({
+      cursorBlink: true,
+      cursorStyle: "bar",
+      fontSize: 14,
+      fontFamily: monoFontFamily(settings.appearance.font()),
+      allowTransparency: true,
+      theme: terminalColors(),
+      scrollback: 10_000,
+      ghostty,
+    })
+    term = t
+
+    const copy = () => {
+      const selection = t.getSelection()
+      if (!selection) return false
+
+      const body = document.body
+      if (body) {
+        const textarea = document.createElement("textarea")
+        textarea.value = selection
+        textarea.setAttribute("readonly", "")
+        textarea.style.position = "fixed"
+        textarea.style.opacity = "0"
+        body.appendChild(textarea)
+        textarea.select()
+        const copied = document.execCommand("copy")
+        body.removeChild(textarea)
+        if (copied) return true
+      }
+
+      const clipboard = navigator.clipboard
+      if (clipboard?.writeText) {
+        clipboard.writeText(selection).catch(() => {})
+        return true
+      }
+
+      return false
+    }
+
+    t.attachCustomKeyEventHandler((event) => {
+      const key = event.key.toLowerCase()
+
+      if (event.ctrlKey && event.shiftKey && !event.metaKey && key === "c") {
+        copy()
+        return true
+      }
+
+      if (event.metaKey && !event.ctrlKey && !event.altKey && key === "c") {
+        if (!t.hasSelection()) return true
+        copy()
+        return true
+      }
+
+      // allow for ctrl-` to toggle terminal in parent
+      if (event.ctrlKey && key === "`") {
+        return true
+      }
+
+      return false
+    })
+
+    fitAddon = new mod.FitAddon()
+    serializeAddon = new SerializeAddon()
+    t.loadAddon(serializeAddon)
+    t.loadAddon(fitAddon)
+
+    t.open(container)
+    container.addEventListener("pointerdown", handlePointerDown)
+
+    handleTextareaFocus = () => {
+      t.options.cursorBlink = true
+    }
+    handleTextareaBlur = () => {
+      t.options.cursorBlink = false
+    }
+
+    t.textarea?.addEventListener("focus", handleTextareaFocus)
+    t.textarea?.addEventListener("blur", handleTextareaBlur)
+
+    focusTerminal()
+
+    if (local.pty.buffer) {
+      if (local.pty.rows && local.pty.cols) {
+        t.resize(local.pty.cols, local.pty.rows)
+      }
+      t.write(local.pty.buffer, () => {
+        if (local.pty.scrollY) {
+          t.scrollToLine(local.pty.scrollY)
+        }
+        fitAddon.fit()
+      })
+    }
+
+    fitAddon.observeResize()
+    handleResize = () => fitAddon.fit()
+    window.addEventListener("resize", handleResize)
+    t.onResize(async (size) => {
+      if (socket.readyState === WebSocket.OPEN) {
+        await sdk.client.pty
+          .update({
+            ptyID: local.pty.id,
+            size: {
+              cols: size.cols,
+              rows: size.rows,
+            },
+          })
+          .catch(() => {})
+      }
+    })
+    t.onData((data) => {
+      if (socket.readyState === WebSocket.OPEN) {
+        socket.send(data)
+      }
+    })
+    t.onKey((key) => {
+      if (key.key == "Enter") {
+        props.onSubmit?.()
+      }
+    })
+    // t.onScroll((ydisp) => {
+    // console.log("Scroll position:", ydisp)
+    // })
+    socket.addEventListener("open", () => {
+      local.onConnect?.()
+      sdk.client.pty
+        .update({
+          ptyID: local.pty.id,
+          size: {
+            cols: t.cols,
+            rows: t.rows,
+          },
+        })
+        .catch(() => {})
+    })
+    socket.addEventListener("message", (event) => {
+      t.write(event.data)
+    })
+    socket.addEventListener("error", (error) => {
+      if (disposed) return
+      console.error("WebSocket error:", error)
+      local.onConnectError?.(error)
+    })
+    socket.addEventListener("close", (event) => {
+      if (disposed) return
+      // Normal closure (code 1000) means PTY process exited - server event handles cleanup
+      // For other codes (network issues, server restart), trigger error handler
+      if (event.code !== 1000) {
+        local.onConnectError?.(new Error(`WebSocket closed abnormally: ${event.code}`))
+      }
+    })
+  })
+
+  onCleanup(() => {
+    disposed = true
+    if (handleResize) {
+      window.removeEventListener("resize", handleResize)
+    }
+    container.removeEventListener("pointerdown", handlePointerDown)
+    term?.textarea?.removeEventListener("focus", handleTextareaFocus)
+    term?.textarea?.removeEventListener("blur", handleTextareaBlur)
+
+    const t = term
+    if (serializeAddon && props.onCleanup && t) {
+      const buffer = serializeAddon.serialize()
+      props.onCleanup({
+        ...local.pty,
+        buffer,
+        rows: t.rows,
+        cols: t.cols,
+        scrollY: t.getViewportY(),
+      })
+    }
+
+    ws?.close()
+    t?.dispose()
+  })
+
+  return (
+    <div
+      ref={container}
+      data-component="terminal"
+      data-prevent-autofocus
+      tabIndex={-1}
+      style={{ "background-color": terminalColors().background }}
+      classList={{
+        ...(local.classList ?? {}),
+        "select-text": true,
+        "size-full px-6 py-3 font-mono": true,
+        [local.class ?? ""]: !!local.class,
+      }}
+      {...others}
+    />
+  )
+}

package/src/components/titlebar.tsx

@@ -0,0 +1,156 @@
+import { createEffect, createMemo, Show } from "solid-js"
+import { IconButton } from "@jonsoc/ui/icon-button"
+import { Icon } from "@jonsoc/ui/icon"
+import { Button } from "@jonsoc/ui/button"
+import { TooltipKeybind } from "@jonsoc/ui/tooltip"
+import { useTheme } from "@jonsoc/ui/theme"
+
+import { useLayout } from "@/context/layout"
+import { usePlatform } from "@/context/platform"
+import { useCommand } from "@/context/command"
+import { useLanguage } from "@/context/language"
+
+export function Titlebar() {
+  const layout = useLayout()
+  const platform = usePlatform()
+  const command = useCommand()
+  const language = useLanguage()
+  const theme = useTheme()
+
+  const mac = createMemo(() => platform.platform === "desktop" && platform.os === "macos")
+  const windows = createMemo(() => platform.platform === "desktop" && platform.os === "windows")
+  const reserve = createMemo(
+    () => platform.platform === "desktop" && (platform.os === "windows" || platform.os === "linux"),
+  )
+  const web = createMemo(() => platform.platform === "web")
+
+  const getWin = () => {
+    if (platform.platform !== "desktop") return
+
+    const tauri = (
+      window as unknown as {
+        __TAURI__?: { window?: { getCurrentWindow?: () => { startDragging?: () => Promise<void> } } }
+      }
+    ).__TAURI__
+    if (!tauri?.window?.getCurrentWindow) return
+
+    return tauri.window.getCurrentWindow()
+  }
+
+  createEffect(() => {
+    if (platform.platform !== "desktop") return
+
+    const scheme = theme.colorScheme()
+    const value = scheme === "system" ? null : scheme
+
+    const tauri = (window as unknown as { __TAURI__?: { webviewWindow?: { getCurrentWebviewWindow?: () => unknown } } })
+      .__TAURI__
+    const get = tauri?.webviewWindow?.getCurrentWebviewWindow
+    if (!get) return
+
+    const win = get() as { setTheme?: (theme?: "light" | "dark" | null) => Promise<void> }
+    if (!win.setTheme) return
+
+    void win.setTheme(value).catch(() => undefined)
+  })
+
+  const interactive = (target: EventTarget | null) => {
+    if (!(target instanceof Element)) return false
+
+    const selector =
+      "button, a, input, textarea, select, option, [role='button'], [role='menuitem'], [contenteditable='true'], [contenteditable='']"
+
+    return !!target.closest(selector)
+  }
+
+  const drag = (e: MouseEvent) => {
+    if (platform.platform !== "desktop") return
+    if (e.buttons !== 1) return
+    if (interactive(e.target)) return
+
+    const win = getWin()
+    if (!win?.startDragging) return
+
+    e.preventDefault()
+    void win.startDragging().catch(() => undefined)
+  }
+
+  return (
+    <header class="h-10 shrink-0 bg-background-base flex items-center relative" data-tauri-drag-region>
+      <div
+        classList={{
+          "flex items-center w-full min-w-0": true,
+          "pl-2": !mac(),
+          "pr-2": !windows(),
+        }}
+        onMouseDown={drag}
+        data-tauri-drag-region
+      >
+        <Show when={mac()}>
+          <div class="w-[72px] h-full shrink-0" data-tauri-drag-region />
+          <div class="xl:hidden w-10 shrink-0 flex items-center justify-center">
+            <IconButton
+              icon="menu"
+              variant="ghost"
+              class="size-8 rounded-md"
+              onClick={layout.mobileSidebar.toggle}
+              aria-label={language.t("sidebar.menu.toggle")}
+            />
+          </div>
+        </Show>
+        <Show when={!mac()}>
+          <div class="xl:hidden w-[48px] shrink-0 flex items-center justify-center">
+            <IconButton
+              icon="menu"
+              variant="ghost"
+              class="size-8 rounded-md"
+              onClick={layout.mobileSidebar.toggle}
+              aria-label={language.t("sidebar.menu.toggle")}
+            />
+          </div>
+        </Show>
+        <TooltipKeybind
+          class={web() ? "hidden xl:flex shrink-0 ml-14" : "hidden xl:flex shrink-0 ml-2"}
+          placement="bottom"
+          title={language.t("command.sidebar.toggle")}
+          keybind={command.keybind("sidebar.toggle")}
+        >
+          <Button
+            variant="ghost"
+            class="group/sidebar-toggle size-6 p-0"
+            onClick={layout.sidebar.toggle}
+            aria-label={language.t("command.sidebar.toggle")}
+            aria-expanded={layout.sidebar.opened()}
+          >
+            <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+              <Icon
+                size="small"
+                name={layout.sidebar.opened() ? "layout-left-full" : "layout-left"}
+                class="group-hover/sidebar-toggle:hidden"
+              />
+              <Icon size="small" name="layout-left-partial" class="hidden group-hover/sidebar-toggle:inline-block" />
+              <Icon
+                size="small"
+                name={layout.sidebar.opened() ? "layout-left" : "layout-left-full"}
+                class="hidden group-active/sidebar-toggle:inline-block"
+              />
+            </div>
+          </Button>
+        </TooltipKeybind>
+        <div id="jonsoc-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" data-tauri-drag-region />
+        <div class="flex-1 h-full" data-tauri-drag-region />
+        <div
+          id="jonsoc-titlebar-right"
+          class="flex items-center gap-3 shrink-0 flex-1 justify-end"
+          data-tauri-drag-region
+        />
+        <Show when={windows()}>
+          <div data-tauri-decorum-tb class="flex flex-row" />
+        </Show>
+      </div>
+      <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
+        <div id="jonsoc-titlebar-center" class="pointer-events-auto" />
+      </div>
+    </header>
+  )
+}