reigncode-app 1.3.2

package/src/index.css

@@ -0,0 +1,29 @@
+@import "@reign-labs/ui/styles/tailwind";
+
+@layer components {
+  [data-component="getting-started"] {
+    container-type: inline-size;
+    container-name: getting-started;
+  }
+
+  [data-component="getting-started-actions"] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem; /* gap-3 */
+  }
+
+  [data-component="getting-started-actions"] > [data-component="button"] {
+    width: 100%;
+  }
+
+  @container getting-started (min-width: 17rem) {
+    [data-component="getting-started-actions"] {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    [data-component="getting-started-actions"] > [data-component="button"] {
+      width: auto;
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export { AppBaseProviders, AppInterface } from "./app"
+export { ACCEPTED_FILE_EXTENSIONS, ACCEPTED_FILE_TYPES, filePickerFilters } from "./constants/file-picker"
+export { useCommand } from "./context/command"
+export { type DisplayBackend, type Platform, PlatformProvider } from "./context/platform"
+export { ServerConnection } from "./context/server"
+export { handleNotificationClick } from "./utils/notification-click"

package/src/pages/directory-layout.tsx

@@ -0,0 +1,88 @@
+import { DataProvider } from "@reign-labs/ui/context"
+import { showToast } from "@reign-labs/ui/toast"
+import { base64Encode } from "@reign-labs/util/encode"
+import { useLocation, useNavigate, useParams } from "@solidjs/router"
+import { createMemo, createResource, type ParentProps, Show } from "solid-js"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useLanguage } from "@/context/language"
+import { LocalProvider } from "@/context/local"
+import { SDKProvider } from "@/context/sdk"
+import { SyncProvider, useSync } from "@/context/sync"
+import { decode64 } from "@/utils/base64"
+
+function DirectoryDataProvider(props: ParentProps<{ directory: string }>) {
+  const navigate = useNavigate()
+  const sync = useSync()
+  const slug = createMemo(() => base64Encode(props.directory))
+
+  return (
+    <DataProvider
+      data={sync.data}
+      directory={props.directory}
+      onNavigateToSession={(sessionID: string) => navigate(`/${slug()}/session/${sessionID}`)}
+      onSessionHref={(sessionID: string) => `/${slug()}/session/${sessionID}`}
+    >
+      <LocalProvider>{props.children}</LocalProvider>
+    </DataProvider>
+  )
+}
+
+export default function Layout(props: ParentProps) {
+  const params = useParams()
+  const location = useLocation()
+  const language = useLanguage()
+  const globalSDK = useGlobalSDK()
+  const navigate = useNavigate()
+  let invalid = ""
+
+  const [resolved] = createResource(
+    () => {
+      if (params.dir) return [location.pathname, params.dir] as const
+    },
+    async ([pathname, b64Dir]) => {
+      const directory = decode64(b64Dir)
+
+      if (!directory) {
+        if (invalid === params.dir) return
+        invalid = b64Dir
+        showToast({
+          variant: "error",
+          title: language.t("common.requestFailed"),
+          description: language.t("directory.error.invalidUrl"),
+        })
+        navigate("/", { replace: true })
+        return
+      }
+
+      return await globalSDK
+        .createClient({
+          directory,
+          throwOnError: true,
+        })
+        .path.get()
+        .then((x) => {
+          const next = x.data?.directory ?? directory
+          invalid = ""
+          if (next === directory) return next
+          const path = pathname.slice(b64Dir.length + 1)
+          navigate(`/${base64Encode(next)}${path}${location.search}${location.hash}`, { replace: true })
+        })
+        .catch(() => {
+          invalid = ""
+          return directory
+        })
+    },
+  )
+
+  return (
+    <Show when={resolved()} keyed>
+      {(resolved) => (
+        <SDKProvider directory={() => resolved}>
+          <SyncProvider>
+            <DirectoryDataProvider directory={resolved}>{props.children}</DirectoryDataProvider>
+          </SyncProvider>
+        </SDKProvider>
+      )}
+    </Show>
+  )
+}

package/src/pages/error.tsx

@@ -0,0 +1,327 @@
+import { TextField } from "@reign-labs/ui/text-field"
+import { Logo } from "@reign-labs/ui/logo"
+import { Button } from "@reign-labs/ui/button"
+import { Component, Show, onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import { usePlatform } from "@/context/platform"
+import { useLanguage } from "@/context/language"
+import { Icon } from "@reign-labs/ui/icon"
+import type { E2EWindow } from "@/testing/terminal"
+
+export type InitError = {
+  name: string
+  data: Record<string, unknown>
+}
+
+type Translator = ReturnType<typeof useLanguage>["t"]
+const CHAIN_SEPARATOR = "\n" + "─".repeat(40) + "\n"
+
+function isIssue(value: unknown): value is { message: string; path: string[] } {
+  if (!value || typeof value !== "object") return false
+  if (!("message" in value) || !("path" in value)) return false
+  const message = (value as { message: unknown }).message
+  const path = (value as { path: unknown }).path
+  if (typeof message !== "string") return false
+  if (!Array.isArray(path)) return false
+  return path.every((part) => typeof part === "string")
+}
+
+function isInitError(error: unknown): error is InitError {
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "name" in error &&
+    "data" in error &&
+    typeof (error as InitError).data === "object"
+  )
+}
+
+function safeJson(value: unknown, circular: string): string {
+  const seen = new WeakSet<object>()
+  const json = JSON.stringify(
+    value,
+    (_key, val) => {
+      if (typeof val === "bigint") return val.toString()
+      if (typeof val === "object" && val) {
+        if (seen.has(val)) return circular
+        seen.add(val)
+      }
+      return val
+    },
+    2,
+  )
+  return json ?? String(value)
+}
+
+function formatInitError(error: InitError, t: Translator): string {
+  const data = error.data
+  const json = (value: unknown) => safeJson(value, t("error.page.circular"))
+  switch (error.name) {
+    case "MCPFailed": {
+      const name = typeof data.name === "string" ? data.name : ""
+      return t("error.chain.mcpFailed", { name })
+    }
+    case "ProviderAuthError": {
+      const providerID = typeof data.providerID === "string" ? data.providerID : t("common.unknown")
+      const message = typeof data.message === "string" ? data.message : json(data.message)
+      return t("error.chain.providerAuthFailed", { provider: providerID, message })
+    }
+    case "APIError": {
+      const message = typeof data.message === "string" ? data.message : t("error.chain.apiError")
+      const lines: string[] = [message]
+
+      if (typeof data.statusCode === "number") {
+        lines.push(t("error.chain.status", { status: data.statusCode }))
+      }
+
+      if (typeof data.isRetryable === "boolean") {
+        lines.push(t("error.chain.retryable", { retryable: data.isRetryable }))
+      }
+
+      if (typeof data.responseBody === "string" && data.responseBody) {
+        lines.push(t("error.chain.responseBody", { body: data.responseBody }))
+      }
+
+      return lines.join("\n")
+    }
+    case "ProviderModelNotFoundError": {
+      const { providerID, modelID, suggestions } = data as {
+        providerID: string
+        modelID: string
+        suggestions?: string[]
+      }
+
+      const suggestionsLine =
+        Array.isArray(suggestions) && suggestions.length
+          ? [t("error.chain.didYouMean", { suggestions: suggestions.join(", ") })]
+          : []
+
+      return [
+        t("error.chain.modelNotFound", { provider: providerID, model: modelID }),
+        ...suggestionsLine,
+        t("error.chain.checkConfig"),
+      ].join("\n")
+    }
+    case "ProviderInitError": {
+      const providerID = typeof data.providerID === "string" ? data.providerID : t("common.unknown")
+      return t("error.chain.providerInitFailed", { provider: providerID })
+    }
+    case "ConfigJsonError": {
+      const path = typeof data.path === "string" ? data.path : json(data.path)
+      const message = typeof data.message === "string" ? data.message : ""
+      if (message) return t("error.chain.configJsonInvalidWithMessage", { path, message })
+      return t("error.chain.configJsonInvalid", { path })
+    }
+    case "ConfigDirectoryTypoError": {
+      const path = typeof data.path === "string" ? data.path : json(data.path)
+      const dir = typeof data.dir === "string" ? data.dir : json(data.dir)
+      const suggestion = typeof data.suggestion === "string" ? data.suggestion : json(data.suggestion)
+      return t("error.chain.configDirectoryTypo", { dir, path, suggestion })
+    }
+    case "ConfigFrontmatterError": {
+      const path = typeof data.path === "string" ? data.path : json(data.path)
+      const message = typeof data.message === "string" ? data.message : json(data.message)
+      return t("error.chain.configFrontmatterError", { path, message })
+    }
+    case "ConfigInvalidError": {
+      const issues = Array.isArray(data.issues)
+        ? data.issues.filter(isIssue).map((issue) => "↳ " + issue.message + " " + issue.path.join("."))
+        : []
+      const message = typeof data.message === "string" ? data.message : ""
+      const path = typeof data.path === "string" ? data.path : json(data.path)
+
+      const line = message
+        ? t("error.chain.configInvalidWithMessage", { path, message })
+        : t("error.chain.configInvalid", { path })
+
+      return [line, ...issues].join("\n")
+    }
+    case "UnknownError":
+      return typeof data.message === "string" ? data.message : json(data)
+    default:
+      if (typeof data.message === "string") return data.message
+      return json(data)
+  }
+}
+
+function formatErrorChain(error: unknown, t: Translator, depth = 0, parentMessage?: string): string {
+  const json = (value: unknown) => safeJson(value, t("error.page.circular"))
+  if (!error) return t("error.chain.unknown")
+
+  if (isInitError(error)) {
+    const message = formatInitError(error, t)
+    if (depth > 0 && parentMessage === message) return ""
+    const indent = depth > 0 ? `\n${CHAIN_SEPARATOR}${t("error.chain.causedBy")}\n` : ""
+    return indent + `${error.name}\n${message}`
+  }
+
+  if (error instanceof Error) {
+    const isDuplicate = depth > 0 && parentMessage === error.message
+    const parts: string[] = []
+    const indent = depth > 0 ? `\n${CHAIN_SEPARATOR}${t("error.chain.causedBy")}\n` : ""
+
+    const header = `${error.name}${error.message ? `: ${error.message}` : ""}`
+    const stack = error.stack?.trim()
+
+    if (stack) {
+      const startsWithHeader = stack.startsWith(header)
+
+      if (isDuplicate && startsWithHeader) {
+        const trace = stack.split("\n").slice(1).join("\n").trim()
+        if (trace) {
+          parts.push(indent + trace)
+        }
+      }
+
+      if (isDuplicate && !startsWithHeader) {
+        parts.push(indent + stack)
+      }
+
+      if (!isDuplicate && startsWithHeader) {
+        parts.push(indent + stack)
+      }
+
+      if (!isDuplicate && !startsWithHeader) {
+        parts.push(indent + `${header}\n${stack}`)
+      }
+    }
+
+    if (!stack && !isDuplicate) {
+      parts.push(indent + header)
+    }
+
+    if (error.cause) {
+      const causeResult = formatErrorChain(error.cause, t, depth + 1, error.message)
+      if (causeResult) {
+        parts.push(causeResult)
+      }
+    }
+
+    return parts.join("\n\n")
+  }
+
+  if (typeof error === "string") {
+    if (depth > 0 && parentMessage === error) return ""
+    const indent = depth > 0 ? `\n${CHAIN_SEPARATOR}${t("error.chain.causedBy")}\n` : ""
+    return indent + error
+  }
+
+  const indent = depth > 0 ? `\n${CHAIN_SEPARATOR}${t("error.chain.causedBy")}\n` : ""
+  return indent + json(error)
+}
+
+function formatError(error: unknown, t: Translator): string {
+  return formatErrorChain(error, t, 0)
+}
+
+interface ErrorPageProps {
+  error: unknown
+}
+
+export const ErrorPage: Component<ErrorPageProps> = (props) => {
+  const platform = usePlatform()
+  const language = useLanguage()
+  const [store, setStore] = createStore({
+    checking: false,
+    version: undefined as string | undefined,
+    actionError: undefined as string | undefined,
+  })
+
+  onMount(() => {
+    const win = window as E2EWindow
+    if (!win.__opencode_e2e) return
+    const detail = formatError(props.error, language.t)
+    console.error(`[e2e:error-boundary] ${window.location.pathname}\n${detail}`)
+  })
+
+  async function checkForUpdates() {
+    if (!platform.checkUpdate) return
+    setStore("checking", true)
+    await platform
+      .checkUpdate()
+      .then((result) => {
+        setStore("actionError", undefined)
+        if (result.updateAvailable && result.version) setStore("version", result.version)
+      })
+      .catch((err) => {
+        setStore("actionError", formatError(err, language.t))
+      })
+      .finally(() => {
+        setStore("checking", false)
+      })
+  }
+
+  async function installUpdate() {
+    if (!platform.update || !platform.restart) return
+    await platform
+      .update()
+      .then(() => platform.restart!())
+      .then(() => setStore("actionError", undefined))
+      .catch((err) => {
+        setStore("actionError", formatError(err, language.t))
+      })
+  }
+
+  return (
+    <div class="relative flex-1 h-screen w-screen min-h-0 flex flex-col items-center justify-center bg-background-base font-sans">
+      <div class="w-2/3 max-w-3xl flex flex-col items-center justify-center gap-8">
+        <Logo class="w-58.5 opacity-12 shrink-0" />
+        <div class="flex flex-col items-center gap-2 text-center">
+          <h1 class="text-lg font-medium text-text-strong">{language.t("error.page.title")}</h1>
+          <p class="text-sm text-text-weak">{language.t("error.page.description")}</p>
+        </div>
+        <TextField
+          value={formatError(props.error, language.t)}
+          readOnly
+          copyable
+          multiline
+          class="max-h-96 w-full font-mono text-xs no-scrollbar"
+          label={language.t("error.page.details.label")}
+          hideLabel
+        />
+        <div class="flex items-center gap-3">
+          <Button size="large" onClick={platform.restart}>
+            {language.t("error.page.action.restart")}
+          </Button>
+          <Show when={platform.checkUpdate}>
+            <Show
+              when={store.version}
+              fallback={
+                <Button size="large" variant="ghost" onClick={checkForUpdates} disabled={store.checking}>
+                  {store.checking
+                    ? language.t("error.page.action.checking")
+                    : language.t("error.page.action.checkUpdates")}
+                </Button>
+              }
+            >
+              <Button size="large" onClick={installUpdate}>
+                {language.t("error.page.action.updateTo", { version: store.version ?? "" })}
+              </Button>
+            </Show>
+          </Show>
+        </div>
+        <Show when={store.actionError}>
+          {(message) => <p class="text-xs text-text-danger-base text-center max-w-2xl">{message()}</p>}
+        </Show>
+        <div class="flex flex-col items-center gap-2">
+          <div class="flex items-center justify-center gap-1">
+            {language.t("error.page.report.prefix")}
+            <button
+              type="button"
+              class="flex items-center text-text-interactive-base gap-1"
+              onClick={() => platform.openLink("https://code.reign-labs.com/desktop-feedback")}
+            >
+              <div>{language.t("error.page.report.discord")}</div>
+              <Icon name="discord" class="text-text-interactive-base" />
+            </button>
+          </div>
+          <Show when={platform.version}>
+            {(version) => (
+              <p class="text-xs text-text-weak">{language.t("error.page.version", { version: version() })}</p>
+            )}
+          </Show>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/home.tsx

@@ -0,0 +1,131 @@
+import { createMemo, For, Match, Switch } from "solid-js"
+import { Button } from "@reign-labs/ui/button"
+import { Logo } from "@reign-labs/ui/logo"
+import { useLayout } from "@/context/layout"
+import { useNavigate } from "@solidjs/router"
+import { base64Encode } from "@reign-labs/util/encode"
+import { Icon } from "@reign-labs/ui/icon"
+import { usePlatform } from "@/context/platform"
+import { DateTime } from "luxon"
+import { useDialog } from "@reign-labs/ui/context/dialog"
+import { DialogSelectDirectory } from "@/components/dialog-select-directory"
+import { DialogSelectServer } from "@/components/dialog-select-server"
+import { useServer } from "@/context/server"
+import { useGlobalSync } from "@/context/global-sync"
+import { useLanguage } from "@/context/language"
+
+export default function Home() {
+  const sync = useGlobalSync()
+  const layout = useLayout()
+  const platform = usePlatform()
+  const dialog = useDialog()
+  const navigate = useNavigate()
+  const server = useServer()
+  const language = useLanguage()
+  const homedir = createMemo(() => sync.data.path.home)
+  const recent = createMemo(() => {
+    return sync.data.project
+      .slice()
+      .sort((a, b) => (b.time.updated ?? b.time.created) - (a.time.updated ?? a.time.created))
+      .slice(0, 5)
+  })
+
+  const serverDotClass = createMemo(() => {
+    const healthy = server.healthy()
+    if (healthy === true) return "bg-icon-success-base"
+    if (healthy === false) return "bg-icon-critical-base"
+    return "bg-border-weak-base"
+  })
+
+  function openProject(directory: string) {
+    layout.projects.open(directory)
+    server.projects.touch(directory)
+    navigate(`/${base64Encode(directory)}`)
+  }
+
+  async function chooseProject() {
+    function resolve(result: string | string[] | null) {
+      if (Array.isArray(result)) {
+        for (const directory of result) {
+          openProject(directory)
+        }
+      } else if (result) {
+        openProject(result)
+      }
+    }
+
+    if (platform.openDirectoryPickerDialog && server.isLocal()) {
+      const result = await platform.openDirectoryPickerDialog?.({
+        title: language.t("command.project.open"),
+        multiple: true,
+      })
+      resolve(result)
+    } else {
+      dialog.show(
+        () => <DialogSelectDirectory multiple={true} onSelect={resolve} />,
+        () => resolve(null),
+      )
+    }
+  }
+
+  return (
+    <div class="mx-auto mt-55 w-full md:w-auto px-4">
+      <Logo class="md:w-xl opacity-12" />
+      <Button
+        size="large"
+        variant="ghost"
+        class="mt-4 mx-auto text-14-regular text-text-weak"
+        onClick={() => dialog.show(() => <DialogSelectServer />)}
+      >
+        <div
+          classList={{
+            "size-2 rounded-full": true,
+            [serverDotClass()]: true,
+          }}
+        />
+        {server.name}
+      </Button>
+      <Switch>
+        <Match when={sync.data.project.length > 0}>
+          <div class="mt-20 w-full flex flex-col gap-4">
+            <div class="flex gap-2 items-center justify-between pl-3">
+              <div class="text-14-medium text-text-strong">{language.t("home.recentProjects")}</div>
+              <Button icon="folder-add-left" size="normal" class="pl-2 pr-3" onClick={chooseProject}>
+                {language.t("command.project.open")}
+              </Button>
+            </div>
+            <ul class="flex flex-col gap-2">
+              <For each={recent()}>
+                {(project) => (
+                  <Button
+                    size="large"
+                    variant="ghost"
+                    class="text-14-mono text-left justify-between px-3"
+                    onClick={() => openProject(project.worktree)}
+                  >
+                    {project.worktree.replace(homedir(), "~")}
+                    <div class="text-14-regular text-text-weak">
+                      {DateTime.fromMillis(project.time.updated ?? project.time.created).toRelative()}
+                    </div>
+                  </Button>
+                )}
+              </For>
+            </ul>
+          </div>
+        </Match>
+        <Match when={true}>
+          <div class="mt-30 mx-auto flex flex-col items-center gap-3">
+            <Icon name="folder-add-left" size="large" />
+            <div class="flex flex-col gap-1 items-center justify-center">
+              <div class="text-14-medium text-text-strong">{language.t("home.empty.title")}</div>
+              <div class="text-12-regular text-text-weak">{language.t("home.empty.description")}</div>
+            </div>
+            <Button class="px-3 mt-1" onClick={chooseProject}>
+              {language.t("command.project.open")}
+            </Button>
+          </div>
+        </Match>
+      </Switch>
+    </div>
+  )
+}

package/src/pages/layout/deep-links.ts

@@ -0,0 +1,50 @@
+export const deepLinkEvent = "reigncode:deep-link"
+
+const parseUrl = (input: string) => {
+  if (!input.startsWith("reigncode://")) return
+  if (typeof URL.canParse === "function" && !URL.canParse(input)) return
+  try {
+    return new URL(input)
+  } catch {
+    return
+  }
+}
+
+export const parseDeepLink = (input: string) => {
+  const url = parseUrl(input)
+  if (!url) return
+  if (url.hostname !== "open-project") return
+  const directory = url.searchParams.get("directory")
+  if (!directory) return
+  return directory
+}
+
+export const parseNewSessionDeepLink = (input: string) => {
+  const url = parseUrl(input)
+  if (!url) return
+  if (url.hostname !== "new-session") return
+  const directory = url.searchParams.get("directory")
+  if (!directory) return
+  const prompt = url.searchParams.get("prompt") || undefined
+  if (!prompt) return { directory }
+  return { directory, prompt }
+}
+
+export const collectOpenProjectDeepLinks = (urls: string[]) =>
+  urls.map(parseDeepLink).filter((directory): directory is string => !!directory)
+
+export const collectNewSessionDeepLinks = (urls: string[]) =>
+  urls.map(parseNewSessionDeepLink).filter((link): link is { directory: string; prompt?: string } => !!link)
+
+type OpenCodeWindow = Window & {
+  __REIGNCODE__?: {
+    deepLinks?: string[]
+  }
+}
+
+export const drainPendingDeepLinks = (target: OpenCodeWindow) => {
+  const pending = target.__REIGNCODE__?.deepLinks ?? []
+  if (pending.length === 0) return []
+  if (target.__REIGNCODE__) target.__REIGNCODE__.deepLinks = []
+  return pending
+}