chore(app): cleanup tailwind vs pure css

packages/ui/src/components/avatar.css

@@ -39,3 +39,11 @@
   font-size: 1.25rem;
   line-height: 2rem;
 }
+
+[data-component="avatar"] [data-slot="avatar-image"] {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  border-radius: inherit;
+}

packages/ui/src/components/avatar.tsx

@@ -37,7 +37,7 @@ export function Avatar(props: AvatarProps) {
       }}
     >
       <Show when={src} fallback={split.fallback?.[0]}>
-        {(src) => <img src={src()} draggable={false} class="size-full object-cover rounded-[inherit]" />}
+        {(src) => <img src={src()} draggable={false} data-slot="avatar-image" />}
       </Show>
     </div>
   )

packages/ui/src/components/message-part.css

@@ -81,6 +81,14 @@
     padding: 8px 12px;
     border-radius: 4px;
 
+    [data-highlight="file"] {
+      color: var(--syntax-property);
+    }
+
+    [data-highlight="agent"] {
+      color: var(--syntax-type);
+    }
+
     [data-slot="user-message-copy-wrapper"] {
       position: absolute;
       top: 7px;

packages/ui/src/components/message-part.tsx

@@ -477,20 +477,7 @@ function HighlightedText(props: { text: string; references: FilePart[]; agents:
     return result
   })
 
-  return (
-    <For each={segments()}>
-      {(segment) => (
-        <span
-          classList={{
-            "text-syntax-property": segment.type === "file",
-            "text-syntax-type": segment.type === "agent",
-          }}
-        >
-          {segment.text}
-        </span>
-      )}
-    </For>
-  )
+  return <For each={segments()}>{(segment) => <span data-highlight={segment.type}>{segment.text}</span>}</For>
 }
 
 export function Part(props: MessagePartProps) {

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

@@ -499,6 +499,10 @@
     gap: 8px;
     color: var(--text-weak);
 
+    [data-slot="session-turn-trigger-icon"] {
+      color: var(--icon-base);
+    }
+
     [data-component="spinner"] {
       width: 12px;
       height: 12px;

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

@@ -565,7 +565,7 @@ export function SessionTurn(
                                   viewBox="0 0 10 10"
                                   fill="none"
                                   xmlns="http://www.w3.org/2000/svg"
-                                  class="text-icon-base"
+                                  data-slot="session-turn-trigger-icon"
                                 >
                                   <path
                                     d="M8.125 1.875H1.875L5 8.125L8.125 1.875Z"

packages/ui/src/components/tabs.tsx

@@ -75,7 +75,7 @@ function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
       <Kobalte.Trigger
         {...rest}
         data-slot="tabs-trigger"
-        classList={{ "group/tab": true, [split.classes?.button ?? ""]: split.classes?.button }}
+        classList={{ [split.classes?.button ?? ""]: split.classes?.button }}
       >
         {split.children}
       </Kobalte.Trigger>