diff --git a/packages/ui/src/components/session-timeline.css b/packages/ui/src/components/session-timeline.css
index 7bb0c1601..aca12bfec 100644
--- a/packages/ui/src/components/session-timeline.css
+++ b/packages/ui/src/components/session-timeline.css
@@ -6,7 +6,7 @@
   align-items: flex-start;
   justify-content: flex-start;
 
-  [data-slot="timeline-list"] {
+  [data-slot="session-timeline-timeline-list"] {
     margin-right: 32px;
     flex-shrink: 0;
     display: flex;
@@ -27,7 +27,7 @@
     }
   }
 
-  [data-slot="timeline-item"] {
+  [data-slot="session-timeline-timeline-item"] {
     display: flex;
     align-items: center;
     align-self: stretch;
@@ -40,7 +40,7 @@
     }
   }
 
-  [data-slot="tick-button"] {
+  [data-slot="session-timeline-tick-button"] {
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -52,7 +52,7 @@
     background: none;
     padding: 0;
 
-    &[data-active="true"] [data-slot="tick-line"] {
+    &[data-active="true"] [data-slot="session-timeline-tick-line"] {
       background-color: var(--icon-strong-base);
       width: 100%;
     }
@@ -64,7 +64,7 @@
     }
   }
 
-  [data-slot="tick-line"] {
+  [data-slot="session-timeline-tick-line"] {
     height: 1px;
     width: 20px;
     background-color: var(--icon-base);
@@ -73,12 +73,12 @@
       background-color 0.2s;
   }
 
-  [data-slot="tick-button"]:hover [data-slot="tick-line"] {
+  [data-slot="session-timeline-tick-button"]:hover [data-slot="session-timeline-tick-line"] {
     width: 100%;
     background-color: var(--icon-strong-base);
   }
 
-  [data-slot="message-button"] {
+  [data-slot="session-timeline-message-button"] {
     display: none;
     align-items: center;
     align-self: stretch;
@@ -103,7 +103,7 @@
     aspect-ratio: 1;
   }
 
-  [data-slot="message-title-preview"] {
+  [data-slot="session-timeline-message-title-preview"] {
     font-size: 14px; /* text-14-regular */
     color: var(--text-weak);
     white-space: nowrap;
@@ -117,11 +117,11 @@
     }
   }
 
-  [data-slot="timeline-item"]:hover [data-slot="message-title-preview"] {
+  [data-slot="session-timeline-timeline-item"]:hover [data-slot="session-timeline-message-title-preview"] {
     color: var(--text-base);
   }
 
-  [data-slot="content"] {
+  [data-slot="session-timeline-content"] {
     flex-grow: 1;
     width: 100%;
     height: 100%;
@@ -130,11 +130,11 @@
     scrollbar-width: none;
   }
 
-  [data-slot="content"]::-webkit-scrollbar {
+  [data-slot="session-timeline-content"]::-webkit-scrollbar {
     display: none;
   }
 
-  [data-slot="message-container"] {
+  [data-slot="session-timeline-message-container"] {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -143,7 +143,7 @@
     padding-bottom: 80px;
   }
 
-  [data-slot="message-header"] {
+  [data-slot="session-timeline-message-header"] {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -155,7 +155,7 @@
     height: 32px;
   }
 
-  [data-slot="message-title"] {
+  [data-slot="session-timeline-message-title"] {
     width: 100%;
     font-size: 14px; /* text-14-medium */
     font-weight: 500;
@@ -166,7 +166,7 @@
     white-space: nowrap;
   }
 
-  [data-slot="message-title"] h1 {
+  [data-slot="session-timeline-message-title"] h1 {
     overflow: hidden;
     text-overflow: ellipsis;
     min-width: 0;
@@ -175,7 +175,7 @@
     font-weight: inherit;
   }
 
-  [data-slot="summary-section"] {
+  [data-slot="session-timeline-summary-section"] {
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -184,7 +184,7 @@
     align-self: stretch;
   }
 
-  [data-slot="summary-header"] {
+  [data-slot="session-timeline-summary-header"] {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -192,13 +192,13 @@
     align-self: stretch;
   }
 
-  [data-slot="summary-title"] {
+  [data-slot="session-timeline-summary-title"] {
     font-size: 12px; /* text-12-medium */
     font-weight: 500;
     color: var(--text-weak);
   }
 
-  [data-slot="markdown"] {
+  [data-slot="session-timeline-markdown"] {
     &[data-diffs="true"] {
       font-size: 14px; /* text-14-regular */
     }
@@ -208,11 +208,11 @@
     }
   }
 
-  [data-slot="accordion"] {
+  [data-slot="session-timeline-accordion"] {
     width: 100%;
   }
 
-  [data-slot="sticky-header"] {
+  [data-slot="session-timeline-sticky-header"] {
     top: 40px; /* top-10 */
 
     &::before {
@@ -220,7 +220,7 @@
     }
   }
 
-  [data-slot="accordion-trigger-content"] {
+  [data-slot="session-timeline-accordion-trigger-content"] {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -228,7 +228,7 @@
     gap: 20px;
   }
 
-  [data-slot="file-info"] {
+  [data-slot="session-timeline-file-info"] {
     flex-grow: 1;
     display: flex;
     align-items: center;
@@ -236,19 +236,19 @@
     min-width: 0;
   }
 
-  [data-slot="file-icon"] {
+  [data-slot="session-timeline-file-icon"] {
     flex-shrink: 0;
     width: 16px;
     height: 16px;
   }
 
-  [data-slot="file-path"] {
+  [data-slot="session-timeline-file-path"] {
     display: flex;
     flex-grow: 1;
     min-width: 0;
   }
 
-  [data-slot="directory"] {
+  [data-slot="session-timeline-directory"] {
     color: var(--text-base);
     text-overflow: ellipsis;
     overflow: hidden;
@@ -257,12 +257,12 @@
     text-align: left;
   }
 
-  [data-slot="filename"] {
+  [data-slot="session-timeline-filename"] {
     color: var(--text-strong);
     flex-shrink: 0;
   }
 
-  [data-slot="accordion-actions"] {
+  [data-slot="session-timeline-accordion-actions"] {
     flex-shrink: 0;
     display: flex;
     gap: 16px;
@@ -270,21 +270,21 @@
     justify-content: flex-end;
   }
 
-  [data-slot="accordion-content"] {
+  [data-slot="session-timeline-accordion-content"] {
     max-height: 240px; /* max-h-60 */
     overflow-y: auto;
     scrollbar-width: none;
   }
 
-  [data-slot="accordion-content"]::-webkit-scrollbar {
+  [data-slot="session-timeline-accordion-content"]::-webkit-scrollbar {
     display: none;
   }
 
-  [data-slot="response-section"] {
+  [data-slot="session-timeline-response-section"] {
     width: 100%;
   }
 
-  [data-slot="collapsible-trigger"] {
+  [data-slot="session-timeline-collapsible-trigger"] {
     color: var(--text-weak);
     cursor: pointer;
     background: none;
@@ -298,14 +298,14 @@
     }
   }
 
-  [data-slot="collapsible-trigger-content"] {
+  [data-slot="session-timeline-collapsible-trigger-content"] {
     display: flex;
     align-items: center;
     gap: 4px;
     align-self: stretch;
   }
 
-  [data-slot="details-text"] {
+  [data-slot="session-timeline-details-text"] {
     font-size: 12px; /* text-12-medium */
     font-weight: 500;
   }
@@ -314,7 +314,7 @@
     color: var(--text-on-critical-base);
   }
 
-  [data-slot="collapsible-content-inner"] {
+  [data-slot="session-timeline-collapsible-content-inner"] {
     width: 100%;
     display: flex;
     flex-direction: column;
diff --git a/packages/ui/src/components/session-timeline.tsx b/packages/ui/src/components/session-timeline.tsx
index 25d905870..f12320f13 100644
--- a/packages/ui/src/components/session-timeline.tsx
+++ b/packages/ui/src/components/session-timeline.tsx
@@ -51,23 +51,23 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
   return (
     <div data-component="session-timeline">
       <Show when={userMessages().length > 1}>
-        <ul role="list" data-slot="timeline-list" data-expanded={props.expanded}>
+        <ul role="list" data-slot="session-timeline-timeline-list" data-expanded={props.expanded}>
           <For each={userMessages()}>
             {(message) => {
               const messageWorking = createMemo(() => message.id === lastUserMessage()?.id && working())
               const handleClick = () => setStore("messageId", message.id)
 
               return (
-                <li data-slot="timeline-item" data-expanded={props.expanded}>
+                <li data-slot="session-timeline-timeline-item" data-expanded={props.expanded}>
                   <button
-                    data-slot="tick-button"
+                    data-slot="session-timeline-tick-button"
                     data-active={activeMessage()?.id === message.id}
                     data-expanded={props.expanded}
                     onClick={handleClick}
                   >
-                    <div data-slot="tick-line" />
+                    <div data-slot="session-timeline-tick-line" />
                   </button>
-                  <button data-slot="message-button" data-expanded={props.expanded} onClick={handleClick}>
+                  <button data-slot="session-timeline-message-button" data-expanded={props.expanded} onClick={handleClick}>
                     <Switch>
                       <Match when={messageWorking()}>
                         <Spinner class="spinner" />
@@ -76,7 +76,7 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
                         <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
                       </Match>
                     </Switch>
-                    <div data-slot="message-title-preview" data-active={activeMessage()?.id === message.id}>
+                    <div data-slot="session-timeline-message-title-preview" data-active={activeMessage()?.id === message.id}>
                       <Show when={message.summary?.title} fallback="New message">
                         {message.summary?.title}
                       </Show>
@@ -88,7 +88,7 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
           </For>
         </ul>
       </Show>
-      <div data-slot="content">
+      <div data-slot="session-timeline-content">
         <For each={userMessages()}>
           {(message) => {
             const isActive = createMemo(() => activeMessage()?.id === message.id)
@@ -129,10 +129,10 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
 
             return (
               <Show when={isActive()}>
-                <div data-message={message.id} data-slot="message-container">
+                <div data-message={message.id} data-slot="session-timeline-message-container">
                   {/* Title */}
-                  <div data-slot="message-header">
-                    <div data-slot="message-title">
+                  <div data-slot="session-timeline-message-header">
+                    <div data-slot="session-timeline-message-title">
                       <Show
                         when={titled()}
                         fallback={
@@ -150,9 +150,9 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
                   <Message message={message} parts={parts()} />
                   {/* Summary */}
                   <Show when={completed()}>
-                    <div data-slot="summary-section">
-                      <div data-slot="summary-header">
-                        <h2 data-slot="summary-title">
+                    <div data-slot="session-timeline-summary-section">
+                      <div data-slot="session-timeline-summary-header">
+                        <h2 data-slot="session-timeline-summary-title">
                           <Switch>
                             <Match when={message.summary?.diffs?.length}>Summary</Match>
                             <Match when={true}>Response</Match>
@@ -161,7 +161,7 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
                         <Show when={message.summary?.body}>
                           {(summary) => (
                             <Markdown
-                              data-slot="markdown"
+                              data-slot="session-timeline-markdown"
                               data-diffs={!!message.summary?.diffs?.length}
                               data-fade={!message.summary?.diffs?.length && !contentSeen()}
                               text={summary()}
@@ -169,30 +169,30 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
                           )}
                         </Show>
                       </div>
-                      <Accordion data-slot="accordion" multiple>
+                      <Accordion data-slot="session-timeline-accordion" multiple>
                         <For each={message.summary?.diffs ?? []}>
                           {(diff) => (
                             <Accordion.Item value={diff.file}>
-                              <StickyAccordionHeader data-slot="sticky-header">
+                              <StickyAccordionHeader data-slot="session-timeline-sticky-header">
                                 <Accordion.Trigger>
-                                  <div data-slot="accordion-trigger-content">
-                                    <div data-slot="file-info">
-                                      <FileIcon node={{ path: diff.file, type: "file" }} data-slot="file-icon" />
-                                      <div data-slot="file-path">
+                                  <div data-slot="session-timeline-accordion-trigger-content">
+                                    <div data-slot="session-timeline-file-info">
+                                      <FileIcon node={{ path: diff.file, type: "file" }} data-slot="session-timeline-file-icon" />
+                                      <div data-slot="session-timeline-file-path">
                                         <Show when={diff.file.includes("/")}>
-                                          <span data-slot="directory">{getDirectory(diff.file)}&lrm;</span>
+                                          <span data-slot="session-timeline-directory">{getDirectory(diff.file)}&lrm;</span>
                                         </Show>
-                                        <span data-slot="filename">{getFilename(diff.file)}</span>
+                                        <span data-slot="session-timeline-filename">{getFilename(diff.file)}</span>
                                       </div>
                                     </div>
-                                    <div data-slot="accordion-actions">
+                                    <div data-slot="session-timeline-accordion-actions">
                                       <DiffChanges changes={diff} />
                                       <Icon name="chevron-grabber-vertical" size="small" />
                                     </div>
                                   </div>
                                 </Accordion.Trigger>
                               </StickyAccordionHeader>
-                              <Accordion.Content data-slot="accordion-content">
+                              <Accordion.Content data-slot="session-timeline-accordion-content">
                                 <Diff
                                   before={{
                                     name: diff.file!,
@@ -216,16 +216,16 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
                     </Card>
                   </Show>
                   {/* Response */}
-                  <div data-slot="response-section">
+                  <div data-slot="session-timeline-response-section">
                     <Switch>
                       <Match when={!completed()}>
                         <MessageProgress assistantMessages={assistantMessages} done={!messageWorking()} />
                       </Match>
                       <Match when={completed() && hasToolPart()}>
                         <Collapsible variant="ghost" open={detailsExpanded()} onOpenChange={setDetailsExpanded}>
-                          <Collapsible.Trigger data-slot="collapsible-trigger">
-                            <div data-slot="collapsible-trigger-content">
-                              <div data-slot="details-text">
+                          <Collapsible.Trigger data-slot="session-timeline-collapsible-trigger">
+                            <div data-slot="session-timeline-collapsible-trigger-content">
+                              <div data-slot="session-timeline-details-text">
                                 <Switch>
                                   <Match when={detailsExpanded()}>Hide details</Match>
                                   <Match when={!detailsExpanded()}>Show details</Match>
@@ -235,7 +235,7 @@ export function SessionTimeline(props: { sessionID: string; expanded?: boolean }
                             </div>
                           </Collapsible.Trigger>
                           <Collapsible.Content>
-                            <div data-slot="collapsible-content-inner">
+                            <div data-slot="session-timeline-collapsible-content-inner">
                               <For each={assistantMessages()}>
                                 {(assistantMessage) => {
                                   const parts = createMemo(() => data.part[assistantMessage.id])