wip: share styles

packages/desktop/src/pages/session.tsx

@@ -336,8 +336,7 @@ export default function Page() {
                     <SessionTimeline
                       sessionID={session.id!}
                       expanded={layout.review.state() === "tab" || !session.diffs().length}
-                      class="pb-20"
-                      containerClass="pb-20"
+                      classes={{ root: "pb-20", container: "pb-20" }}
                     />
                   </Match>
                   <Match when={true}>

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

@@ -90,6 +90,7 @@ export default function () {
             )
             const provider = createMemo(() => firstUserMessage()?.model?.providerID)
             const model = createMemo(() => firstUserMessage()?.model?.modelID)
+            const diffs = createMemo(() => data.session_diff[params.sessionID!] ?? [])
 
             return (
               <div class="relative bg-background-stronger w-screen h-screen overflow-hidden flex flex-col">
@@ -116,11 +117,17 @@ export default function () {
                     />
                   </div>
                 </header>
-                <div class="@container select-text flex flex-col flex-1 min-h-0">
+                <div class="select-text flex flex-col flex-1 min-h-0">
                   <div class="w-full flex-1 min-h-0 flex">
-                    <div class="relative shrink-0 px-21 pt-14 flex flex-col gap-10 flex-1 min-h-0 w-full max-w-xl mx-auto">
-                      <div class="flex flex-col gap-4">
-                        <div class="h-8 flex gap-2.5 items-center justify-start self-stretch">
+                    <div
+                      classList={{
+                        "@container relative shrink-0 pt-14 flex flex-col gap-10 min-h-0 w-full mx-auto": true,
+                        "px-21 @4xl:px-6 max-w-2xl": diffs().length > 0,
+                        "px-6 max-w-2xl": diffs().length === 0,
+                      }}
+                    >
+                      <div class="flex flex-col gap-4 shrink-0">
+                        <div class="h-8 flex gap-4 items-center justify-start self-stretch">
                           <div class="pl-[2.5px] pr-2 flex items-center gap-1.75 bg-surface-strong shadow-xs-border-base">
                             <Mark class="shrink-0 w-3 my-0.5" />
                             <div class="text-12-mono text-text-base">v{info().version}</div>
@@ -140,17 +147,17 @@ export default function () {
                       </div>
                       <SessionTimeline
                         sessionID={params.sessionID!}
-                        class="z-10 bg-background-stronger"
-                        containerClass="pb-20"
+                        classes={{ root: "grow", content: "flex flex-col justify-between", container: "pb-20" }}
                         expanded
-                      />
-                      <div class="absolute bottom-10 inset-x-0 flex items-center justify-center z-0">
-                        <Logo class="w-58.5 opacity-12" />
-                      </div>
+                      >
+                        <div class="flex items-center justify-center pb-8 shrink-0">
+                          <Logo class="w-58.5 opacity-12" />
+                        </div>
+                      </SessionTimeline>
                     </div>
-                    <Show when={data.session_diff[params.sessionID!]?.length}>
+                    <Show when={diffs().length}>
                       <div class="relative grow px-6 pt-14 flex-1 min-h-0 border-l border-border-weak-base">
-                        <SessionReview diffs={data.session_diff[params.sessionID!]} class="pb-20" />
+                        <SessionReview diffs={diffs()} class="pb-20" />
                       </div>
                     </Show>
                   </div>

packages/ui/src/components/session-timeline.css

@@ -95,13 +95,6 @@
     }
   }
 
-  .spinner {
-    color: var(--text-base);
-    flex-shrink: 0;
-    width: 18px;
-    aspect-ratio: 1;
-  }
-
   [data-slot="session-timeline-message-title-preview"] {
     font-size: 14px; /* text-14-regular */
     color: var(--text-weak);
@@ -177,6 +170,13 @@
     font-weight: inherit;
   }
 
+  [data-slot="session-timeline-typewriter"] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    white-space: nowrap;
+  }
+
   [data-slot="session-timeline-summary-section"] {
     width: 100%;
     display: flex;

packages/ui/src/components/session-timeline.tsx

@@ -2,7 +2,7 @@ import { AssistantMessage } from "@opencode-ai/sdk"
 import { useData } from "../context"
 import { Binary } from "@opencode-ai/util/binary"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
-import { createEffect, createMemo, createSignal, For, Match, Show, Switch } from "solid-js"
+import { createEffect, createMemo, createSignal, For, Match, ParentProps, Show, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
 import { DiffChanges } from "./diff-changes"
 import { Spinner } from "./spinner"
@@ -18,12 +18,17 @@ import { Card } from "./card"
 import { MessageProgress } from "./message-progress"
 import { Collapsible } from "./collapsible"
 
-export function SessionTimeline(props: {
-  sessionID: string
-  class?: string
-  containerClass?: string
-  expanded?: boolean
-}) {
+export function SessionTimeline(
+  props: ParentProps<{
+    sessionID: string
+    classes?: {
+      root?: string
+      content?: string
+      container?: string
+    }
+    expanded?: boolean
+  }>,
+) {
   const data = useData()
   const [store, setStore] = createStore({
     messageId: undefined as string | undefined,
@@ -54,7 +59,7 @@ export function SessionTimeline(props: {
   const working = createMemo(() => status()?.type !== "idle")
 
   return (
-    <div data-component="session-timeline" class={props.class}>
+    <div data-component="session-timeline" class={props.classes?.root}>
       <Show when={userMessages().length > 1}>
         <ul role="list" data-slot="session-timeline-timeline-list" data-expanded={props.expanded}>
           <For each={userMessages()}>
@@ -79,7 +84,7 @@ export function SessionTimeline(props: {
                   >
                     <Switch>
                       <Match when={messageWorking()}>
-                        <Spinner class="spinner" />
+                        <Spinner />
                       </Match>
                       <Match when={true}>
                         <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
@@ -100,7 +105,7 @@ export function SessionTimeline(props: {
           </For>
         </ul>
       </Show>
-      <div data-slot="session-timeline-content">
+      <div data-slot="session-timeline-content" class={props.classes?.content}>
         <For each={userMessages()}>
           {(message) => {
             const isActive = createMemo(() => activeMessage()?.id === message.id)
@@ -144,7 +149,7 @@ export function SessionTimeline(props: {
                 <div
                   data-message={message.id}
                   data-slot="session-timeline-message-container"
-                  class={props.containerClass}
+                  class={props.classes?.container}
                 >
                   {/* Title */}
                   <div data-slot="session-timeline-message-header">
@@ -152,11 +157,7 @@ export function SessionTimeline(props: {
                       <Show
                         when={titled()}
                         fallback={
-                          <Typewriter
-                            as="h1"
-                            text={message.summary?.title}
-                            class="overflow-hidden text-ellipsis min-w-0 text-nowrap"
-                          />
+                          <Typewriter as="h1" text={message.summary?.title} data-slot="session-timeline-typewriter" />
                         }
                       >
                         <h1>{message.summary?.title}</h1>
@@ -281,6 +282,7 @@ export function SessionTimeline(props: {
             )
           }}
         </For>
+        {props.children}
       </div>
     </div>
   )

packages/ui/src/components/spinner.css

@@ -1,4 +1,6 @@
 [data-component="spinner"] {
-  width: 1rem;
-  height: 1rem;
+  color: var(--text-base);
+  flex-shrink: 0;
+  width: 18px;
+  aspect-ratio: 1;
 }