enterprise: add social card meta tags to share pages

- Add og:image and twitter:image meta tags for better social sharing
- Generate dynamic social card URLs with session title, models, and version
- Include description meta tag for search engines

bun.lock

@@ -179,6 +179,7 @@
         "aws4fetch": "^1.0.20",
         "hono": "catalog:",
         "hono-openapi": "catalog:",
+        "js-base64": "3.7.7",
         "luxon": "catalog:",
         "nitro": "3.0.1-alpha.1",
         "solid-js": "catalog:",

packages/enterprise/package.json

@@ -20,6 +20,7 @@
     "@solidjs/meta": "catalog:",
     "hono": "catalog:",
     "hono-openapi": "catalog:",
+    "js-base64": "3.7.7",
     "luxon": "catalog:",
     "nitro": "3.0.1-alpha.1",
     "solid-js": "catalog:",

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

@@ -24,6 +24,7 @@ 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 } from "@solidjs/meta"
+import { Base64 } from "js-base64"
 
 const ClientOnlyDiff = clientOnly(() => import("@opencode-ai/ui/diff").then((m) => ({ default: m.Diff })))
 
@@ -42,6 +43,7 @@ const getData = query(async (shareID) => {
   const data = await Share.data(shareID)
   const result: {
     sessionID: string
+    shareID: string
     session: Session[]
     session_diff: {
       [sessionID: string]: FileDiff[]
@@ -66,6 +68,7 @@ const getData = query(async (shareID) => {
     }
   } = {
     sessionID: share.sessionID,
+    shareID,
     session: [],
     session_diff: {
       [share.sessionID]: [],
@@ -160,8 +163,35 @@ export default function () {
           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 (
+            <>
+              <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()} />
               <DiffComponentProvider component={ClientOnlyDiff}>
                 <DataProvider data={data()} directory={info().directory}>
                   {iife(() => {
@@ -312,7 +342,11 @@ export default function () {
                                     content: "flex flex-col justify-between items-start",
                                     container:
                                       "w-full pb-20 " +
-                                    (wide() ? "max-w-146 mx-auto px-6" : messages().length > 1 ? "pr-6 pl-18" : "px-6"),
+                                      (wide()
+                                        ? "max-w-146 mx-auto px-6"
+                                        : messages().length > 1
+                                          ? "pr-6 pl-18"
+                                          : "px-6"),
                                   }}
                                 >
                                   <div classList={{ "w-full flex items-center justify-center pb-8 shrink-0": true }}>
@@ -393,6 +427,7 @@ export default function () {
                   })}
                 </DataProvider>
               </DiffComponentProvider>
+            </>
           )
         }}
       </Show>