Vendor opencode source for docker build

opencode/packages/enterprise/src/app.css

@@ -0,0 +1 @@
+@import "@opencode-ai/ui/styles/tailwind";

opencode/packages/enterprise/src/app.tsx

@@ -0,0 +1,93 @@
+import { Router } from "@solidjs/router"
+import { FileRoutes } from "@solidjs/start/router"
+import { Font } from "@opencode-ai/ui/font"
+import { MetaProvider } from "@solidjs/meta"
+import { MarkedProvider } from "@opencode-ai/ui/context/marked"
+import { DialogProvider } from "@opencode-ai/ui/context/dialog"
+import { I18nProvider, type UiI18nParams } from "@opencode-ai/ui/context"
+import { dict as uiEn } from "@opencode-ai/ui/i18n/en"
+import { dict as uiZh } from "@opencode-ai/ui/i18n/zh"
+import { createEffect, createMemo, Suspense, type ParentProps } from "solid-js"
+import { getRequestEvent } from "solid-js/web"
+import "./app.css"
+import { Favicon } from "@opencode-ai/ui/favicon"
+
+function resolveTemplate(text: string, params?: UiI18nParams) {
+  if (!params) return text
+  return text.replace(/{{\s*([^}]+?)\s*}}/g, (_, rawKey) => {
+    const key = String(rawKey)
+    const value = params[key]
+    return value === undefined ? "" : String(value)
+  })
+}
+
+function detectLocaleFromHeader(header: string | null | undefined) {
+  if (!header) return
+  for (const item of header.split(",")) {
+    const value = item.trim().split(";")[0]?.toLowerCase()
+    if (!value) continue
+    if (value.startsWith("zh")) return "zh" as const
+    if (value.startsWith("en")) return "en" as const
+  }
+}
+
+function detectLocale() {
+  const event = getRequestEvent()
+  const header = event?.request.headers.get("accept-language")
+  const headerLocale = detectLocaleFromHeader(header)
+  if (headerLocale) return headerLocale
+
+  if (typeof document === "object") {
+    const value = document.documentElement.lang?.toLowerCase() ?? ""
+    if (value.startsWith("zh")) return "zh" as const
+    if (value.startsWith("en")) return "en" as const
+  }
+
+  if (typeof navigator === "object") {
+    const languages = navigator.languages?.length ? navigator.languages : [navigator.language]
+    for (const language of languages) {
+      if (!language) continue
+      if (language.toLowerCase().startsWith("zh")) return "zh" as const
+    }
+  }
+
+  return "en" as const
+}
+
+function UiI18nBridge(props: ParentProps) {
+  const locale = createMemo(() => detectLocale())
+  const t = (key: keyof typeof uiEn, params?: UiI18nParams) => {
+    const value = locale() === "zh" ? (uiZh[key] ?? uiEn[key]) : uiEn[key]
+    const text = value ?? String(key)
+    return resolveTemplate(text, params)
+  }
+
+  createEffect(() => {
+    if (typeof document !== "object") return
+    document.documentElement.lang = locale()
+  })
+
+  return <I18nProvider value={{ locale, t }}>{props.children}</I18nProvider>
+}
+
+export default function App() {
+  return (
+    <Router
+      root={(props) => (
+        <MetaProvider>
+          <DialogProvider>
+            <MarkedProvider>
+              <Favicon />
+              <Font />
+              <UiI18nBridge>
+                <Suspense>{props.children}</Suspense>
+              </UiI18nBridge>
+            </MarkedProvider>
+          </DialogProvider>
+        </MetaProvider>
+      )}
+    >
+      <FileRoutes />
+    </Router>
+  )
+}

opencode/packages/enterprise/src/core/share.ts

@@ -0,0 +1,191 @@
+import { FileDiff, Message, Model, Part, Session } from "@opencode-ai/sdk/v2"
+import { fn } from "@opencode-ai/util/fn"
+import { iife } from "@opencode-ai/util/iife"
+import { Identifier } from "@opencode-ai/util/identifier"
+import z from "zod"
+import { Storage } from "./storage"
+import { Binary } from "@opencode-ai/util/binary"
+
+export namespace Share {
+  export const Info = z.object({
+    id: z.string(),
+    secret: z.string(),
+    sessionID: z.string(),
+  })
+  export type Info = z.infer<typeof Info>
+
+  export const Data = z.discriminatedUnion("type", [
+    z.object({
+      type: z.literal("session"),
+      data: z.custom<Session>(),
+    }),
+    z.object({
+      type: z.literal("message"),
+      data: z.custom<Message>(),
+    }),
+    z.object({
+      type: z.literal("part"),
+      data: z.custom<Part>(),
+    }),
+    z.object({
+      type: z.literal("session_diff"),
+      data: z.custom<FileDiff[]>(),
+    }),
+    z.object({
+      type: z.literal("model"),
+      data: z.custom<Model[]>(),
+    }),
+  ])
+  export type Data = z.infer<typeof Data>
+
+  export const create = fn(z.object({ sessionID: z.string() }), async (body) => {
+    const isTest = process.env.NODE_ENV === "test" || body.sessionID.startsWith("test_")
+    const info: Info = {
+      id: (isTest ? "test_" : "") + body.sessionID.slice(-8),
+      sessionID: body.sessionID,
+      secret: crypto.randomUUID(),
+    }
+    const exists = await get(info.id)
+    if (exists) throw new Errors.AlreadyExists(info.id)
+    await Storage.write(["share", info.id], info)
+    return info
+  })
+
+  export async function get(id: string) {
+    return Storage.read<Info>(["share", id])
+  }
+
+  export const remove = fn(Info.pick({ id: true, secret: true }), async (body) => {
+    const share = await get(body.id)
+    if (!share) throw new Errors.NotFound(body.id)
+    if (share.secret !== body.secret) throw new Errors.InvalidSecret(body.id)
+    await Storage.remove(["share", body.id])
+    const list = await Storage.list({ prefix: ["share_data", body.id] })
+    for (const item of list) {
+      await Storage.remove(item)
+    }
+  })
+
+  export const sync = fn(
+    z.object({
+      share: Info.pick({ id: true, secret: true }),
+      data: Data.array(),
+    }),
+    async (input) => {
+      const share = await get(input.share.id)
+      if (!share) throw new Errors.NotFound(input.share.id)
+      if (share.secret !== input.share.secret) throw new Errors.InvalidSecret(input.share.id)
+      await Storage.write(["share_event", input.share.id, Identifier.descending()], input.data)
+    },
+  )
+
+  type Compaction = {
+    event?: string
+    data: Data[]
+  }
+
+  export async function data(shareID: string) {
+    console.log("reading compaction")
+    const compaction: Compaction = (await Storage.read<Compaction>(["share_compaction", shareID])) ?? {
+      data: [],
+      event: undefined,
+    }
+    console.log("reading pending events")
+    const list = await Storage.list({
+      prefix: ["share_event", shareID],
+      before: compaction.event,
+    }).then((x) => x.toReversed())
+
+    console.log("compacting", list.length)
+
+    if (list.length > 0) {
+      const data = await Promise.all(list.map(async (event) => await Storage.read<Data[]>(event))).then((x) => x.flat())
+      for (const item of data) {
+        if (!item) continue
+        const key = (item: Data) => {
+          switch (item.type) {
+            case "session":
+              return "session"
+            case "message":
+              return `message/${item.data.id}`
+            case "part":
+              return `${item.data.messageID}/${item.data.id}`
+            case "session_diff":
+              return "session_diff"
+            case "model":
+              return "model"
+          }
+        }
+        const id = key(item)
+        const result = Binary.search(compaction.data, id, key)
+        if (result.found) {
+          compaction.data[result.index] = item
+        } else {
+          compaction.data.splice(result.index, 0, item)
+        }
+      }
+      compaction.event = list.at(-1)?.at(-1)
+      await Storage.write(["share_compaction", shareID], compaction)
+    }
+    return compaction.data
+  }
+
+  export const syncOld = fn(
+    z.object({
+      share: Info.pick({ id: true, secret: true }),
+      data: Data.array(),
+    }),
+    async (input) => {
+      const share = await get(input.share.id)
+      if (!share) throw new Errors.NotFound(input.share.id)
+      if (share.secret !== input.share.secret) throw new Errors.InvalidSecret(input.share.id)
+      const promises = []
+      for (const item of input.data) {
+        promises.push(
+          iife(async () => {
+            switch (item.type) {
+              case "session":
+                await Storage.write(["share_data", input.share.id, "session"], item.data)
+                break
+              case "message": {
+                const data = item.data as Message
+                await Storage.write(["share_data", input.share.id, "message", data.id], item.data)
+                break
+              }
+              case "part": {
+                const data = item.data as Part
+                await Storage.write(["share_data", input.share.id, "part", data.messageID, data.id], item.data)
+                break
+              }
+              case "session_diff":
+                await Storage.write(["share_data", input.share.id, "session_diff"], item.data)
+                break
+              case "model":
+                await Storage.write(["share_data", input.share.id, "model"], item.data)
+                break
+            }
+          }),
+        )
+      }
+      await Promise.all(promises)
+    },
+  )
+
+  export const Errors = {
+    NotFound: class extends Error {
+      constructor(public id: string) {
+        super(`Share not found: ${id}`)
+      }
+    },
+    InvalidSecret: class extends Error {
+      constructor(public id: string) {
+        super(`Share secret invalid: ${id}`)
+      }
+    },
+    AlreadyExists: class extends Error {
+      constructor(public id: string) {
+        super(`Share already exists: ${id}`)
+      }
+    },
+  }
+}

opencode/packages/enterprise/src/core/storage.ts

@@ -0,0 +1,129 @@
+import { AwsClient } from "aws4fetch"
+import { lazy } from "@opencode-ai/util/lazy"
+
+export namespace Storage {
+  export interface Adapter {
+    read(path: string): Promise<string | undefined>
+    write(path: string, value: string): Promise<void>
+    remove(path: string): Promise<void>
+    list(options?: { prefix?: string; limit?: number; after?: string; before?: string }): Promise<string[]>
+  }
+
+  function createAdapter(client: AwsClient, endpoint: string, bucket: string): Adapter {
+    const base = `${endpoint}/${bucket}`
+    return {
+      async read(path: string): Promise<string | undefined> {
+        const response = await client.fetch(`${base}/${path}`)
+        if (response.status === 404) return undefined
+        if (!response.ok) throw new Error(`Failed to read ${path}: ${response.status}`)
+        return response.text()
+      },
+
+      async write(path: string, value: string): Promise<void> {
+        const response = await client.fetch(`${base}/${path}`, {
+          method: "PUT",
+          body: value,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        })
+        if (!response.ok) throw new Error(`Failed to write ${path}: ${response.status}`)
+      },
+
+      async remove(path: string): Promise<void> {
+        const response = await client.fetch(`${base}/${path}`, {
+          method: "DELETE",
+        })
+        if (!response.ok) throw new Error(`Failed to remove ${path}: ${response.status}`)
+      },
+
+      async list(options?: { prefix?: string; limit?: number; after?: string; before?: string }): Promise<string[]> {
+        const prefix = options?.prefix || ""
+        const params = new URLSearchParams({ "list-type": "2", prefix })
+        if (options?.limit) params.set("max-keys", options.limit.toString())
+        if (options?.after) {
+          const afterPath = prefix + options.after + ".json"
+          params.set("start-after", afterPath)
+        }
+        const response = await client.fetch(`${base}?${params}`)
+        if (!response.ok) throw new Error(`Failed to list ${prefix}: ${response.status}`)
+        const xml = await response.text()
+        const keys: string[] = []
+        const regex = /<Key>([^<]+)<\/Key>/g
+        let match
+        while ((match = regex.exec(xml)) !== null) {
+          keys.push(match[1])
+        }
+        if (options?.before) {
+          const beforePath = prefix + options.before + ".json"
+          return keys.filter((key) => key < beforePath)
+        }
+        return keys
+      },
+    }
+  }
+
+  function s3(): Adapter {
+    const bucket = process.env.OPENCODE_STORAGE_BUCKET!
+    const region = process.env.OPENCODE_STORAGE_REGION || "us-east-1"
+    const client = new AwsClient({
+      region,
+      accessKeyId: process.env.OPENCODE_STORAGE_ACCESS_KEY_ID!,
+      secretAccessKey: process.env.OPENCODE_STORAGE_SECRET_ACCESS_KEY!,
+    })
+    return createAdapter(client, `https://s3.${region}.amazonaws.com`, bucket)
+  }
+
+  function r2() {
+    const accountId = process.env.OPENCODE_STORAGE_ACCOUNT_ID!
+    const client = new AwsClient({
+      accessKeyId: process.env.OPENCODE_STORAGE_ACCESS_KEY_ID!,
+      secretAccessKey: process.env.OPENCODE_STORAGE_SECRET_ACCESS_KEY!,
+    })
+    return createAdapter(client, `https://${accountId}.r2.cloudflarestorage.com`, process.env.OPENCODE_STORAGE_BUCKET!)
+  }
+
+  const adapter = lazy(() => {
+    const type = process.env.OPENCODE_STORAGE_ADAPTER
+    if (type === "r2") return r2()
+    if (type === "s3") return s3()
+    throw new Error("No storage adapter configured")
+  })
+
+  function resolve(key: string[]) {
+    return key.join("/") + ".json"
+  }
+
+  export async function read<T>(key: string[]) {
+    const result = await adapter().read(resolve(key))
+    if (!result) return undefined
+    return JSON.parse(result) as T
+  }
+
+  export function write<T>(key: string[], value: T) {
+    return adapter().write(resolve(key), JSON.stringify(value))
+  }
+
+  export function remove(key: string[]) {
+    return adapter().remove(resolve(key))
+  }
+
+  export async function list(options?: { prefix?: string[]; limit?: number; after?: string; before?: string }) {
+    const p = options?.prefix ? options.prefix.join("/") + (options.prefix.length ? "/" : "") : ""
+    const result = await adapter().list({
+      prefix: p,
+      limit: options?.limit,
+      after: options?.after,
+      before: options?.before,
+    })
+    return result.map((x) => x.replace(/\.json$/, "").split("/"))
+  }
+
+  export async function update<T>(key: string[], fn: (draft: T) => void) {
+    const val = await read<T>(key)
+    if (!val) throw new Error("Not found")
+    fn(val)
+    await write(key, val)
+    return val
+  }
+}

opencode/packages/enterprise/src/custom-elements.d.ts

@@ -0,0 +1 @@
+../../ui/src/custom-elements.d.ts

opencode/packages/enterprise/src/entry-client.tsx

@@ -0,0 +1,4 @@
+// @refresh reload
+import { mount, StartClient } from "@solidjs/start/client"
+
+mount(() => <StartClient />, document.getElementById("app")!)

opencode/packages/enterprise/src/entry-server.tsx

@@ -0,0 +1,39 @@
+// @refresh reload
+import { createHandler, StartServer } from "@solidjs/start/server"
+import { getRequestEvent } from "solid-js/web"
+
+export default createHandler(() => (
+  <StartServer
+    document={({ assets, children, scripts }) => {
+      const lang = (() => {
+        const event = getRequestEvent()
+        const header = event?.request.headers.get("accept-language")
+        if (!header) return "en"
+        for (const item of header.split(",")) {
+          const value = item.trim().split(";")[0]?.toLowerCase()
+          if (!value) continue
+          if (value.startsWith("zh")) return "zh"
+          if (value.startsWith("en")) return "en"
+        }
+        return "en"
+      })()
+
+      return (
+        <html lang={lang}>
+          <head>
+            <meta charset="utf-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1" />
+            <title>OpenCode</title>
+            <meta name="theme-color" content="#F8F7F7" />
+            <meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />
+            {assets}
+          </head>
+          <body class="antialiased overscroll-none text-12-regular">
+            <div id="app">{children}</div>
+            {scripts}
+          </body>
+        </html>
+      )
+    }}
+  />
+))

opencode/packages/enterprise/src/global.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="@solidjs/start/env" />
+
+export declare module "@solidjs/start/server" {
+  export type APIEvent = { request: Request }
+}

opencode/packages/enterprise/src/routes/[...404].tsx

@@ -0,0 +1,25 @@
+import { A } from "@solidjs/router"
+
+export default function NotFound() {
+  return (
+    <main class="text-center mx-auto text-gray-700 p-4">
+      <h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">Not Found</h1>
+      <p class="mt-8">
+        Visit{" "}
+        <a href="https://solidjs.com" target="_blank" class="text-sky-600 hover:underline">
+          solidjs.com
+        </a>{" "}
+        to learn how to build Solid apps.
+      </p>
+      <p class="my-4">
+        <A href="/" class="text-sky-600 hover:underline">
+          Home
+        </A>
+        {" - "}
+        <A href="/about" class="text-sky-600 hover:underline">
+          About Page
+        </A>
+      </p>
+    </main>
+  )
+}

opencode/packages/enterprise/src/routes/api/[...path].ts

@@ -0,0 +1,154 @@
+import type { APIEvent } from "@solidjs/start/server"
+import { Hono } from "hono"
+import { describeRoute, openAPIRouteHandler, resolver } from "hono-openapi"
+import { validator } from "hono-openapi"
+import z from "zod"
+import { cors } from "hono/cors"
+import { Share } from "~/core/share"
+
+const app = new Hono()
+
+app
+  .basePath("/api")
+  .use(cors())
+  .get(
+    "/doc",
+    openAPIRouteHandler(app, {
+      documentation: {
+        info: {
+          title: "Opencode Enterprise API",
+          version: "1.0.0",
+          description: "Opencode Enterprise API endpoints",
+        },
+        openapi: "3.1.1",
+      },
+    }),
+  )
+  .post(
+    "/share",
+    describeRoute({
+      description: "Create a share",
+      operationId: "share.create",
+      responses: {
+        200: {
+          description: "Success",
+          content: {
+            "application/json": {
+              schema: resolver(
+                z
+                  .object({
+                    id: z.string(),
+                    url: z.string(),
+                    secret: z.string(),
+                  })
+                  .meta({ ref: "Share" }),
+              ),
+            },
+          },
+        },
+      },
+    }),
+    validator("json", z.object({ sessionID: z.string() })),
+    async (c) => {
+      const body = c.req.valid("json")
+      const share = await Share.create({ sessionID: body.sessionID })
+      const protocol = c.req.header("x-forwarded-proto") ?? c.req.header("x-forwarded-protocol") ?? "https"
+      const host = c.req.header("x-forwarded-host") ?? c.req.header("host")
+      return c.json({
+        id: share.id,
+        secret: share.secret,
+        url: `${protocol}://${host}/share/${share.id}`,
+      })
+    },
+  )
+  .post(
+    "/share/:shareID/sync",
+    describeRoute({
+      description: "Sync share data",
+      operationId: "share.sync",
+      responses: {
+        200: {
+          description: "Success",
+          content: {
+            "application/json": {
+              schema: resolver(z.object({})),
+            },
+          },
+        },
+      },
+    }),
+    validator("param", z.object({ shareID: z.string() })),
+    validator("json", z.object({ secret: z.string(), data: Share.Data.array() })),
+    async (c) => {
+      const { shareID } = c.req.valid("param")
+      const body = c.req.valid("json")
+      await Share.sync({
+        share: { id: shareID, secret: body.secret },
+        data: body.data,
+      })
+      return c.json({})
+    },
+  )
+  .get(
+    "/share/:shareID/data",
+    describeRoute({
+      description: "Get share data",
+      operationId: "share.data",
+      responses: {
+        200: {
+          description: "Success",
+          content: {
+            "application/json": {
+              schema: resolver(z.array(Share.Data)),
+            },
+          },
+        },
+      },
+    }),
+    validator("param", z.object({ shareID: z.string() })),
+    async (c) => {
+      const { shareID } = c.req.valid("param")
+      return c.json(await Share.data(shareID))
+    },
+  )
+  .delete(
+    "/share/:shareID",
+    describeRoute({
+      description: "Remove a share",
+      operationId: "share.remove",
+      responses: {
+        200: {
+          description: "Success",
+          content: {
+            "application/json": {
+              schema: resolver(z.object({})),
+            },
+          },
+        },
+      },
+    }),
+    validator("param", z.object({ shareID: z.string() })),
+    validator("json", z.object({ secret: z.string() })),
+    async (c) => {
+      const { shareID } = c.req.valid("param")
+      const body = c.req.valid("json")
+      await Share.remove({ id: shareID, secret: body.secret })
+      return c.json({})
+    },
+  )
+
+export function GET(event: APIEvent) {
+  return app.fetch(event.request)
+}
+
+export function POST(event: APIEvent) {
+  return app.fetch(event.request)
+}
+
+export function PUT(event: APIEvent) {
+  return app.fetch(event.request)
+}
+
+export async function DELETE(event: APIEvent) {
+  return app.fetch(event.request)
+}

opencode/packages/enterprise/src/routes/index.tsx

@@ -0,0 +1,3 @@
+export default function () {
+  return <div>Hello World</div>
+}

opencode/packages/enterprise/src/routes/share.tsx

@@ -0,0 +1,5 @@
+import { ParentProps } from "solid-js"
+
+export default function Share(props: ParentProps) {
+  return props.children
+}

opencode/packages/enterprise/src/routes/share/[shareID].tsx

@@ -0,0 +1,485 @@
+import { FileDiff, Message, Model, Part, Session, SessionStatus, UserMessage } from "@opencode-ai/sdk/v2"
+import { SessionTurn } from "@opencode-ai/ui/session-turn"
+import { SessionReview } from "@opencode-ai/ui/session-review"
+import { DataProvider } from "@opencode-ai/ui/context"
+import { DiffComponentProvider } from "@opencode-ai/ui/context/diff"
+import { CodeComponentProvider } from "@opencode-ai/ui/context/code"
+import { WorkerPoolProvider } from "@opencode-ai/ui/context/worker-pool"
+import { createAsync, query, useParams } from "@solidjs/router"
+import { createEffect, createMemo, ErrorBoundary, For, Match, Show, Switch } from "solid-js"
+import { Share } from "~/core/share"
+import { Logo, Mark } from "@opencode-ai/ui/logo"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { createDefaultOptions } from "@opencode-ai/ui/pierre"
+import { iife } from "@opencode-ai/util/iife"
+import { Binary } from "@opencode-ai/util/binary"
+import { NamedError } from "@opencode-ai/util/error"
+import { DateTime } from "luxon"
+import { createStore } from "solid-js/store"
+import z from "zod"
+import NotFound from "../[...404]"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { MessageNav } from "@opencode-ai/ui/message-nav"
+import { preloadMultiFileDiff, PreloadMultiFileDiffResult } from "@pierre/diffs/ssr"
+import { Diff as SSRDiff } from "@opencode-ai/ui/diff-ssr"
+import { clientOnly } from "@solidjs/start"
+import { type IconName } from "@opencode-ai/ui/icons/provider"
+import { Meta, Title } from "@solidjs/meta"
+import { Base64 } from "js-base64"
+
+const ClientOnlyDiff = clientOnly(() => import("@opencode-ai/ui/diff").then((m) => ({ default: m.Diff })))
+const ClientOnlyCode = clientOnly(() => import("@opencode-ai/ui/code").then((m) => ({ default: m.Code })))
+const ClientOnlyWorkerPoolProvider = clientOnly(() =>
+  import("@opencode-ai/ui/pierre/worker").then((m) => ({
+    default: (props: { children: any }) => (
+      <WorkerPoolProvider pools={m.getWorkerPools()}>{props.children}</WorkerPoolProvider>
+    ),
+  })),
+)
+
+const SessionDataMissingError = NamedError.create(
+  "SessionDataMissingError",
+  z.object({
+    sessionID: z.string(),
+    message: z.string().optional(),
+  }),
+)
+
+const getData = query(async (shareID) => {
+  "use server"
+  const share = await Share.get(shareID)
+  if (!share) throw new SessionDataMissingError({ sessionID: shareID })
+  const data = await Share.data(shareID)
+  const result: {
+    sessionID: string
+    shareID: string
+    session: Session[]
+    session_diff: {
+      [sessionID: string]: FileDiff[]
+    }
+    session_diff_preload: {
+      [sessionID: string]: PreloadMultiFileDiffResult<any>[]
+    }
+    session_diff_preload_split: {
+      [sessionID: string]: PreloadMultiFileDiffResult<any>[]
+    }
+    session_status: {
+      [sessionID: string]: SessionStatus
+    }
+    message: {
+      [sessionID: string]: Message[]
+    }
+    part: {
+      [messageID: string]: Part[]
+    }
+    model: {
+      [sessionID: string]: Model[]
+    }
+  } = {
+    sessionID: share.sessionID,
+    shareID,
+    session: [],
+    session_diff: {
+      [share.sessionID]: [],
+    },
+    session_diff_preload: {
+      [share.sessionID]: [],
+    },
+    session_diff_preload_split: {
+      [share.sessionID]: [],
+    },
+    session_status: {
+      [share.sessionID]: {
+        type: "idle",
+      },
+    },
+    message: {},
+    part: {},
+    model: {},
+  }
+  for (const item of data) {
+    switch (item.type) {
+      case "session":
+        result.session.push(item.data)
+        break
+      case "session_diff":
+        result.session_diff[share.sessionID] = item.data
+        await Promise.all([
+          Promise.all(
+            item.data.map(async (diff) =>
+              preloadMultiFileDiff<any>({
+                oldFile: { name: diff.file, contents: diff.before },
+                newFile: { name: diff.file, contents: diff.after },
+                options: createDefaultOptions("unified"),
+                // annotations,
+              }),
+            ),
+          ).then((r) => (result.session_diff_preload[share.sessionID] = r)),
+          Promise.all(
+            item.data.map(async (diff) =>
+              preloadMultiFileDiff<any>({
+                oldFile: { name: diff.file, contents: diff.before },
+                newFile: { name: diff.file, contents: diff.after },
+                options: createDefaultOptions("split"),
+                // annotations,
+              }),
+            ),
+          ).then((r) => (result.session_diff_preload_split[share.sessionID] = r)),
+        ])
+        break
+      case "message":
+        result.message[item.data.sessionID] = result.message[item.data.sessionID] ?? []
+        result.message[item.data.sessionID].push(item.data)
+        break
+      case "part":
+        result.part[item.data.messageID] = result.part[item.data.messageID] ?? []
+        result.part[item.data.messageID].push(item.data)
+        break
+      case "model":
+        result.model[share.sessionID] = item.data
+        break
+    }
+  }
+  const match = Binary.search(result.session, share.sessionID, (s) => s.id)
+  if (!match.found) throw new SessionDataMissingError({ sessionID: share.sessionID })
+  return result
+}, "getShareData")
+
+export default function () {
+  const params = useParams()
+  const data = createAsync(async () => {
+    if (!params.shareID) throw new Error("Missing shareID")
+    const now = Date.now()
+    const data = getData(params.shareID)
+    console.log("getData", Date.now() - now)
+    return data
+  })
+
+  createEffect(() => {
+    console.log(data())
+  })
+
+  return (
+    <ErrorBoundary
+      fallback={(error) => {
+        if (SessionDataMissingError.isInstance(error)) {
+          return <NotFound />
+        }
+        console.error(error)
+        const details = error instanceof Error ? (error.stack ?? error.message) : String(error)
+        return (
+          <div class="min-h-screen w-full bg-background-base text-text-base flex flex-col items-center justify-center gap-4 p-6 text-center">
+            <p class="text-16-medium">Unable to render this share.</p>
+            <p class="text-14-regular text-text-weaker">Check the console for more details.</p>
+            <pre class="text-12-mono text-left whitespace-pre-wrap break-words w-full max-w-200 bg-background-stronger rounded-md p-4">
+              {details}
+            </pre>
+          </div>
+        )
+      }}
+    >
+      <Meta name="robots" content="noindex, nofollow" />
+      <Show when={data()}>
+        {(data) => {
+          const match = createMemo(() => Binary.search(data().session, data().sessionID, (s) => s.id))
+          if (!match().found) throw new Error(`Session ${data().sessionID} not found`)
+          const info = createMemo(() => data().session[match().index])
+          const ogImage = createMemo(() => {
+            const models = new Set<string>()
+            const messages = data().message[data().sessionID] ?? []
+            for (const msg of messages) {
+              if (msg.role === "assistant" && msg.modelID) {
+                models.add(msg.modelID)
+              }
+            }
+            const modelIDs = Array.from(models)
+            const encodedTitle = encodeURIComponent(Base64.encode(encodeURIComponent(info().title.substring(0, 700))))
+            let modelParam: string
+            if (modelIDs.length === 1) {
+              modelParam = modelIDs[0]
+            } else if (modelIDs.length === 2) {
+              modelParam = encodeURIComponent(`${modelIDs[0]} & ${modelIDs[1]}`)
+            } else if (modelIDs.length > 2) {
+              modelParam = encodeURIComponent(`${modelIDs[0]} & ${modelIDs.length - 1} others`)
+            } else {
+              modelParam = "unknown"
+            }
+            const version = `v${info().version}`
+            return `https://social-cards.sst.dev/opencode-share/${encodedTitle}.png?model=${modelParam}&version=${version}&id=${data().shareID}`
+          })
+
+          return (
+            <>
+              <Show when={info().title}>
+                <Title>{info().title} | OpenCode</Title>
+              </Show>
+              <Meta name="description" content="opencode - The AI coding agent built for the terminal." />
+              <Meta property="og:image" content={ogImage()} />
+              <Meta name="twitter:image" content={ogImage()} />
+              <ClientOnlyWorkerPoolProvider>
+                <DiffComponentProvider component={ClientOnlyDiff}>
+                  <CodeComponentProvider component={ClientOnlyCode}>
+                    <DataProvider data={data()} directory={info().directory}>
+                      {iife(() => {
+                        const [store, setStore] = createStore({
+                          messageId: undefined as string | undefined,
+                          expandedSteps: {} as Record<string, boolean>,
+                        })
+                        const messages = createMemo(() =>
+                          data().sessionID
+                            ? (data().message[data().sessionID]?.filter((m) => m.role === "user") ?? []).sort(
+                                (a, b) => a.time.created - b.time.created,
+                              )
+                            : [],
+                        )
+                        const firstUserMessage = createMemo(() => messages().at(0))
+                        const activeMessage = createMemo(
+                          () => messages().find((m) => m.id === store.messageId) ?? firstUserMessage(),
+                        )
+                        function setActiveMessage(message: UserMessage | undefined) {
+                          if (message) {
+                            setStore("messageId", message.id)
+                          } else {
+                            setStore("messageId", undefined)
+                          }
+                        }
+                        const provider = createMemo(() => activeMessage()?.model?.providerID)
+                        const modelID = createMemo(() => activeMessage()?.model?.modelID)
+                        const model = createMemo(() => data().model[data().sessionID]?.find((m) => m.id === modelID()))
+                        const diffs = createMemo(() => {
+                          const diffs = data().session_diff[data().sessionID] ?? []
+                          const preloaded = data().session_diff_preload[data().sessionID] ?? []
+                          return diffs.map((diff) => ({
+                            ...diff,
+                            preloaded: preloaded.find((d) => d.newFile.name === diff.file),
+                          }))
+                        })
+                        const splitDiffs = createMemo(() => {
+                          const diffs = data().session_diff[data().sessionID] ?? []
+                          const preloaded = data().session_diff_preload_split[data().sessionID] ?? []
+                          return diffs.map((diff) => ({
+                            ...diff,
+                            preloaded: preloaded.find((d) => d.newFile.name === diff.file),
+                          }))
+                        })
+
+                        const title = () => (
+                          <div class="flex flex-col gap-4">
+                            <div class="flex flex-col gap-2 sm:flex-row sm:gap-4 sm:items-center sm:h-8 justify-start self-stretch">
+                              <div class="pl-[2.5px] pr-2 flex items-center gap-1.75 bg-surface-strong shadow-xs-border-base w-fit">
+                                <Mark class="shrink-0 w-3 my-0.5" />
+                                <div class="text-12-mono text-text-base">v{info().version}</div>
+                              </div>
+                              <div class="flex gap-4 items-center">
+                                <div class="flex gap-2 items-center">
+                                  <ProviderIcon
+                                    id={provider() as IconName}
+                                    class="size-3.5 shrink-0 text-icon-strong-base"
+                                  />
+                                  <div class="text-12-regular text-text-base">{model()?.name ?? modelID()}</div>
+                                </div>
+                                <div class="text-12-regular text-text-weaker">
+                                  {DateTime.fromMillis(info().time.created).toFormat("dd MMM yyyy, HH:mm")}
+                                </div>
+                              </div>
+                            </div>
+                            <div class="text-left text-16-medium text-text-strong">{info().title}</div>
+                          </div>
+                        )
+
+                        const turns = () => (
+                          <div class="relative mt-2 pb-8 min-w-0 w-full h-full overflow-y-auto no-scrollbar">
+                            <div class="px-4 py-6">{title()}</div>
+                            <div class="flex flex-col gap-15 items-start justify-start mt-4">
+                              <For each={messages()}>
+                                {(message) => (
+                                  <SessionTurn
+                                    sessionID={data().sessionID}
+                                    sessionTitle={info().title}
+                                    messageID={message.id}
+                                    stepsExpanded={store.expandedSteps[message.id] ?? false}
+                                    onStepsExpandedToggle={() => setStore("expandedSteps", message.id, (v) => !v)}
+                                    classes={{
+                                      root: "min-w-0 w-full relative",
+                                      content: "flex flex-col justify-between !overflow-visible",
+                                      container: "px-4",
+                                    }}
+                                  />
+                                )}
+                              </For>
+                            </div>
+                            <div class="px-4 flex items-center justify-center pt-20 pb-8 shrink-0">
+                              <Logo class="w-58.5 opacity-12" />
+                            </div>
+                          </div>
+                        )
+
+                        const wide = createMemo(() => diffs().length === 0)
+
+                        return (
+                          <div class="relative bg-background-stronger w-screen h-screen overflow-hidden flex flex-col">
+                            <header class="h-12 px-6 py-2 flex items-center justify-between self-stretch bg-background-base border-b border-border-weak-base">
+                              <div class="">
+                                <a href="https://opencode.ai">
+                                  <Mark />
+                                </a>
+                              </div>
+                              <div class="flex gap-3 items-center">
+                                <IconButton
+                                  as={"a"}
+                                  href="https://github.com/anomalyco/opencode"
+                                  target="_blank"
+                                  icon="github"
+                                  variant="ghost"
+                                />
+                                <IconButton
+                                  as={"a"}
+                                  href="https://opencode.ai/discord"
+                                  target="_blank"
+                                  icon="discord"
+                                  variant="ghost"
+                                />
+                              </div>
+                            </header>
+                            <div class="select-text flex flex-col flex-1 min-h-0">
+                              <div
+                                classList={{
+                                  "hidden w-full flex-1 min-h-0": true,
+                                  "md:flex": wide(),
+                                  "lg:flex": !wide(),
+                                }}
+                              >
+                                <div
+                                  classList={{
+                                    "@container relative shrink-0 pt-14 flex flex-col gap-10 min-h-0 w-full": true,
+                                  }}
+                                >
+                                  <div
+                                    classList={{
+                                      "w-full flex justify-start items-start min-w-0 px-6": true,
+                                    }}
+                                  >
+                                    {title()}
+                                  </div>
+                                  <div class="flex items-start justify-start h-full min-h-0">
+                                    <Show when={messages().length > 1}>
+                                      <MessageNav
+                                        class="sticky top-0 shrink-0 py-2 pl-4"
+                                        messages={messages()}
+                                        current={activeMessage()}
+                                        size="compact"
+                                        onMessageSelect={setActiveMessage}
+                                      />
+                                    </Show>
+                                    <SessionTurn
+                                      sessionID={data().sessionID}
+                                      messageID={store.messageId ?? firstUserMessage()!.id!}
+                                      stepsExpanded={
+                                        store.expandedSteps[store.messageId ?? firstUserMessage()!.id!] ?? false
+                                      }
+                                      onStepsExpandedToggle={() => {
+                                        const id = store.messageId ?? firstUserMessage()!.id!
+                                        setStore("expandedSteps", id, (v) => !v)
+                                      }}
+                                      classes={{
+                                        root: "grow",
+                                        content: "flex flex-col justify-between",
+                                        container: "w-full pb-20 px-6",
+                                      }}
+                                    >
+                                      <div
+                                        classList={{ "w-full flex items-center justify-center pb-8 shrink-0": true }}
+                                      >
+                                        <Logo class="w-58.5 opacity-12" />
+                                      </div>
+                                    </SessionTurn>
+                                  </div>
+                                </div>
+                                <Show when={diffs().length > 0}>
+                                  <DiffComponentProvider component={SSRDiff}>
+                                    <div class="@container relative grow pt-14 flex-1 min-h-0 border-l border-border-weak-base">
+                                      <SessionReview
+                                        class="@4xl:hidden"
+                                        diffs={diffs()}
+                                        classes={{
+                                          root: "pb-20",
+                                          header: "px-6",
+                                          container: "px-6",
+                                        }}
+                                      />
+                                      <SessionReview
+                                        split
+                                        class="hidden @4xl:flex"
+                                        diffs={splitDiffs()}
+                                        classes={{
+                                          root: "pb-20",
+                                          header: "px-6",
+                                          container: "px-6",
+                                        }}
+                                      />
+                                    </div>
+                                  </DiffComponentProvider>
+                                </Show>
+                              </div>
+                              <Switch>
+                                <Match when={diffs().length > 0}>
+                                  <Tabs classList={{ "md:hidden": wide(), "lg:hidden": !wide() }}>
+                                    <Tabs.List>
+                                      <Tabs.Trigger value="session" class="w-1/2" classes={{ button: "w-full" }}>
+                                        Session
+                                      </Tabs.Trigger>
+                                      <Tabs.Trigger
+                                        value="review"
+                                        class="w-1/2 !border-r-0"
+                                        classes={{ button: "w-full" }}
+                                      >
+                                        {diffs().length} Files Changed
+                                      </Tabs.Trigger>
+                                    </Tabs.List>
+                                    <Tabs.Content value="session" class="!overflow-hidden">
+                                      {turns()}
+                                    </Tabs.Content>
+                                    <Tabs.Content
+                                      forceMount
+                                      value="review"
+                                      class="!overflow-hidden hidden data-[selected]:block"
+                                    >
+                                      <div class="relative h-full pt-8 overflow-y-auto no-scrollbar">
+                                        <DiffComponentProvider component={SSRDiff}>
+                                          <SessionReview
+                                            diffs={diffs()}
+                                            classes={{
+                                              root: "pb-20",
+                                              header: "px-4",
+                                              container: "px-4",
+                                            }}
+                                          />
+                                        </DiffComponentProvider>
+                                      </div>
+                                    </Tabs.Content>
+                                  </Tabs>
+                                </Match>
+                                <Match when={true}>
+                                  <div
+                                    classList={{ "!overflow-hidden": true, "md:hidden": wide(), "lg:hidden": !wide() }}
+                                  >
+                                    {turns()}
+                                  </div>
+                                </Match>
+                              </Switch>
+                            </div>
+                          </div>
+                        )
+                      })}
+                    </DataProvider>
+                  </CodeComponentProvider>
+                </DiffComponentProvider>
+              </ClientOnlyWorkerPoolProvider>
+            </>
+          )
+        }}
+      </Show>
+    </ErrorBoundary>
+  )
+}