packages/desktop/src/app.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

import "@/index.css"
import { Router, Route, Navigate } from "@solidjs/router"
import { MetaProvider } from "@solidjs/meta"
import { Font } from "@opencode-ai/ui/font"
import { MarkedProvider } from "@opencode-ai/ui/context/marked"
import { DiffComponentProvider } from "@opencode-ai/ui/context/diff"
import { Diff } from "@opencode-ai/ui/diff"
import { GlobalSyncProvider } from "./context/global-sync"
import Layout from "@/pages/layout"
import Home from "@/pages/home"
import DirectoryLayout from "@/pages/directory-layout"
import Session from "@/pages/session"
import { LayoutProvider } from "./context/layout"
import { GlobalSDKProvider } from "./context/global-sdk"
import { SessionProvider } from "./context/session"
import { Show } from "solid-js"

const host = import.meta.env.VITE_OPENCODE_SERVER_HOST ?? "127.0.0.1"
const port = import.meta.env.VITE_OPENCODE_SERVER_PORT ?? "4096"

const url =
  new URLSearchParams(document.location.search).get("url") ||
  (location.hostname.includes("opencode.ai") || location.hostname.includes("localhost")
    ? `http://${host}:${port}`
    : "/")

export function App() {
  return (
    <MarkedProvider>
      <DiffComponentProvider component={Diff}>
        <GlobalSDKProvider url={url}>
          <GlobalSyncProvider>
            <LayoutProvider>
              <MetaProvider>
                <Font />
                <Router root={Layout}>
                  <Route path="/" component={Home} />
                  <Route path="/:dir" component={DirectoryLayout}>
                    <Route path="/" component={() => <Navigate href="session" />} />
                    <Route
                      path="/session/:id?"
                      component={(p) => (
                        <Show when={p.params.id || true} keyed>
                          <SessionProvider>
                            <Session />
                          </SessionProvider>
                        </Show>
                      )}
                    />
                  </Route>
                </Router>
              </MetaProvider>
            </LayoutProvider>
          </GlobalSyncProvider>
        </GlobalSDKProvider>
      </DiffComponentProvider>
    </MarkedProvider>
  )
}