feat(app): better diff/code comments (#14621)

Co-authored-by: adamelmore <[email protected]>
Co-authored-by: David Hill <[email protected]>

1 files changed, 211 insertions, 222 deletions

diff --git a/packages/enterprise/src/routes/share/[shareID].tsx b/packages/enterprise/src/routes/share/[shareID].tsx
index eb830e4a6..ada543b7d 100644
--- a/packages/enterprise/src/routes/share/[shareID].tsx
+++ b/packages/enterprise/src/routes/share/[shareID].tsx
@@ -2,8 +2,7 @@ import { FileDiff, Message, Model, Part, Session, SessionStatus, UserMessage } f
 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 { FileComponentProvider } from "@opencode-ai/ui/context/file"
 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"
@@ -22,14 +21,12 @@ 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 { FileSSR } from "@opencode-ai/ui/file-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 }) => (
@@ -218,252 +215,244 @@ export default function () {
               <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,
-                        })
-                        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)
-                          }
+                <FileComponentProvider component={FileSSR}>
+                  <DataProvider data={data()} directory={info().directory}>
+                    {iife(() => {
+                      const [store, setStore] = createStore({
+                        messageId: undefined as string | undefined,
+                      })
+                      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 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>
+                      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="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 class="text-12-regular text-text-weaker">
+                                {DateTime.fromMillis(info().time.created).toFormat("dd MMM yyyy, HH:mm")}
                               </div>
                             </div>
-                            <div class="text-left text-16-medium text-text-strong">{info().title}</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}
-                                    messageID={message.id}
-                                    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>
+                      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}
+                                  messageID={message.id}
+                                  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)
+                      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">
+                      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={{
-                                  "hidden w-full flex-1 min-h-0": true,
-                                  "md:flex": wide(),
-                                  "lg:flex": !wide(),
+                                  "@container relative shrink-0 pt-14 flex flex-col gap-10 min-h-0 w-full": true,
                                 }}
                               >
                                 <div
                                   classList={{
-                                    "@container relative shrink-0 pt-14 flex flex-col gap-10 min-h-0 w-full": true,
+                                    "w-full flex justify-start items-start min-w-0 px-6": 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!}
+                                    classes={{
+                                      root: "grow",
+                                      content: "flex flex-col justify-between",
+                                      container: "w-full pb-20 px-6",
                                     }}
                                   >
-                                    {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!}
-                                      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 classList={{ "w-full flex items-center justify-center pb-8 shrink-0": true }}>
+                                      <Logo class="w-58.5 opacity-12" />
+                                    </div>
+                                  </SessionTurn>
                                 </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">
+                              </div>
+                              <Show when={diffs().length > 0}>
+                                <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>
+                              </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">
                                       <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",
+                                          header: "px-4",
+                                          container: "px-4",
                                         }}
                                       />
                                     </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>
+                                  </Tabs.Content>
+                                </Tabs>
+                              </Match>
+                              <Match when={true}>
+                                <div
+                                  classList={{ "!overflow-hidden": true, "md:hidden": wide(), "lg:hidden": !wide() }}
+                                >
+                                  {turns()}
+                                </div>
+                              </Match>
+                            </Switch>
                           </div>
-                        )
-                      })}
-                    </DataProvider>
-                  </CodeComponentProvider>
-                </DiffComponentProvider>
+                        </div>
+                      )
+                    })}
+                  </DataProvider>
+                </FileComponentProvider>
               </ClientOnlyWorkerPoolProvider>
             </>
           )