Add project name

packages/app/src/pages/session/timeline/controller.tsx

@@ -21,6 +21,7 @@ import { downloadSessionExport, fetchSessionExport, sessionExportFilename } from
 import { showToast } from "@/utils/toast"
 import { timelineChildTitle, timelineRemovedSessionIDs } from "./controller-projection"
 import { createTimelineProjection } from "./projection"
+import { displayName } from "@/pages/layout/helpers"
 
 const emptyMessages: Message[] = []
 const emptyParts: Part[] = []
@@ -65,6 +66,10 @@ export function createTimelineController(input: {
   })
   const titleValue = createMemo(() => input.session.data.info()?.title)
   const titleLabel = createMemo(() => sessionTitle(titleValue()))
+  const projectName = createMemo(() => {
+    const project = sync().project
+    if (project) return displayName(project)
+  })
   const shareUrl = (): string | undefined => undefined
   const shareEnabled = () => false
   const parentMessages = createMemo(() => {
@@ -265,6 +270,7 @@ export function createTimelineController(input: {
       status: input.session.data.status,
       titleValue,
       titleLabel,
+      projectName,
       shareUrl,
       shareEnabled,
       parentID: input.session.data.parentID,

packages/app/src/pages/session/timeline/message-timeline.tsx

@@ -249,6 +249,7 @@ function MessageTimelineView(
   const sessionID = props.data.sessionID
   const sessionStatus = props.data.status
   const titleLabel = props.data.titleLabel
+  const projectName = props.data.projectName
   const shareUrl = props.data.shareUrl
   const shareEnabled = props.data.shareEnabled
   const parentID = props.data.parentID
@@ -1061,6 +1062,21 @@ function MessageTimelineView(
                 }}
               >
                 <div class="flex items-center min-w-0 flex-1 w-full">
+                  <Show when={projectName()} keyed>
+                    {(name) => (
+                      <>
+                        <span class="hidden min-w-0 max-w-[40%] truncate pl-2 text-[13px] font-[440] leading-4 tracking-[-0.04px] text-v2-text-text-muted md:block">
+                          {name}
+                        </span>
+                        <span
+                          class="hidden shrink-0 -translate-y-[0.5px] pl-2 pr-0.5 text-[11px] font-[530] text-v2-text-text-faint md:block"
+                          aria-hidden="true"
+                        >
+                          /
+                        </span>
+                      </>
+                    )}
+                  </Show>
                   <Show when={parentID()}>
                     <button
                       type="button"