@@ -70,6 +70,7 @@ import {
   type DraftComposerFileAttachment,
 } from "../../lib/composerImages";
 import { useScaledTextRole } from "../settings/appearance/useScaledTextRole";
+import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 import {
   clearComposerDraftContent,
   flushComposerDrafts,
 
@@ -23,7 +23,6 @@ import {
   Platform,
   Pressable,
   StyleSheet,
-  useColorScheme,
   View,
   type ViewStyle,
 } from "react-native";
@@ -36,6 +35,7 @@ import Animated, {
   LinearTransition,
 } from "react-native-reanimated";
 import { useThemeColor } from "../../lib/useThemeColor";
+import { themeColorWithAlpha } from "../../lib/mobileTheme";
 import { armAgentAwarenessLiveActivityForLocalWork } from "../agent-awareness/remoteRegistration";
 import { scopedThreadKey } from "../../lib/scopedEntities";
 
@@ -61,6 +61,7 @@ import type {
 } from "../../lib/composerImages";
 import { buildModelOptions, groupByProvider } from "../../lib/modelOptions";
 import { useScaledTextRole } from "../settings/appearance/useScaledTextRole";
+import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 import type { RemoteClientConnectionState } from "../../lib/connection";
 import {
   insertRankedSearchResult,
@@ -151,11 +152,14 @@ export function ComposerSurface(props: {
   /** Existing thread composers morph between pill and card layouts. */
   readonly animateLayout?: boolean;
 }) {
+  const cardColor = useThemeColor("--color-card-translucent");
+  const borderColor = useThemeColor("--color-border");
+  const shadowColor = useThemeColor("--color-primary-shadow");
   // Drop shadow lives on a wrapper: `overflow: "hidden"` on the surface itself
   // (needed to clip content to the pill shape) would clip the shadow on iOS.
   const shadowStyle: ViewStyle = {
     borderRadius: props.style.borderRadius,
-    shadowColor: "#000000",
+    shadowColor,
     shadowOpacity: props.isDarkMode ? 0.35 : 0.12,
     shadowRadius: 14,
     shadowOffset: { width: 0, height: 6 },
@@ -170,9 +174,9 @@ export function ComposerSurface(props: {
       <GlassSurface
         chrome="none"
         fallbackStyle={{
-          backgroundColor: props.isDarkMode ? "rgba(44,44,46,0.96)" : "rgba(255,255,255,0.96)",
+          backgroundColor: cardColor,
           borderWidth: 1,
-          borderColor: props.isDarkMode ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)",
+          borderColor,
         }}
         glassEffectStyle="regular"
         // The composer is a passive material containing interactive controls.
@@ -242,6 +246,7 @@ const ComposerConnectionStatusPill = memo(function ComposerConnectionStatusPill(
   readonly status: ComposerStatusPillState;
 }) {
   const isReconnecting = props.status.kind !== "unavailable";
+  const indicatorColor = useThemeColor("--color-icon-muted");
 
   return (
     <Animated.View
@@ -253,10 +258,10 @@ const ComposerConnectionStatusPill = memo(function ComposerConnectionStatusPill(
       <Pressable
         accessibilityRole="button"
         onPress={props.onPress}
-        className="max-w-full flex-row items-center gap-2 rounded-full bg-white/90 px-3 py-2 shadow-sm active:opacity-70 dark:bg-neutral-900/90"
+        className="max-w-full flex-row items-center gap-2 rounded-full bg-card px-3 py-2 shadow-sm active:opacity-70"
       >
         {isReconnecting ? (
-          <ActivityIndicator size="small" color="#8e8e93" />
+          <ActivityIndicator size="small" color={indicatorColor} />
         ) : (
           <View className="h-2 w-2 rounded-full bg-red-500" />
         )}
@@ -273,7 +278,8 @@ const ComposerConnectionStatusPill = memo(function ComposerConnectionStatusPill(
 
 export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposerProps) {
   const navigation = useNavigation();
-  const isDarkMode = useColorScheme() === "dark";
+  const { themeAppearance } = useAppearancePreferences();
+  const isDarkMode = themeAppearance === "dark";
   const foregroundColor = useThemeColor("--color-foreground");
   const bodyText = useScaledTextRole("body");
   const fallbackInputRef = useRef<ComposerEditorHandle>(null);
@@ -341,8 +347,11 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
     environmentLabel: props.environmentLabel,
     threadSyncPhase: props.threadSyncPhase,
   });
-  const toolbarFadeOpaque = isDarkMode ? "rgba(0,0,0,0.95)" : "rgba(255,255,255,0.95)";
-  const toolbarFadeTransparent = isDarkMode ? "rgba(0,0,0,0)" : "rgba(255,255,255,0)";
+  const toolbarSurface = String(useThemeColor("--color-card"));
+  const backdropSurface = String(useThemeColor("--color-screen"));
+  const toolbarFadeOpaque = themeColorWithAlpha(toolbarSurface, 0.95);
+  const toolbarFadeTransparent = themeColorWithAlpha(toolbarSurface, 0);
+  const backdropGradient = `linear-gradient(to bottom, ${themeColorWithAlpha(backdropSurface, 0)} 0%, ${themeColorWithAlpha(backdropSurface, 0.6)} 55%, ${themeColorWithAlpha(backdropSurface, 0.9)} 100%)`;
   const selectedProviderStatus = useMemo(() => {
     if (!props.serverConfig) return null;
     return (
@@ -649,9 +658,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
         style={[
           StyleSheet.absoluteFill,
           {
-            experimental_backgroundImage: isDarkMode
-              ? "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.9) 100%)"
-              : "linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 55%, rgba(255,255,255,0.9) 100%)",
+            experimental_backgroundImage: backdropGradient,
           },
         ]}
       />
 
@@ -32,7 +32,6 @@ import {
   AppState,
   Keyboard,
   Platform,
-  useColorScheme,
   useWindowDimensions,
   View,
   type GestureResponderEvent,
@@ -53,6 +52,7 @@ import Animated, {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { ControlPill } from "../../components/ControlPill";
+import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 import type { ComposerEditorHandle } from "../../components/ComposerEditor";
 import type { StatusTone } from "../../components/StatusPill";
 import type { DraftComposerAttachment } from "../../lib/composerImages";
@@ -592,7 +592,8 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
   }, [freeze, scrollMessageToEnd]);
 
   const showScrollToEndButton = contentPresentationKind === "ready" && !endFollowEnabled;
-  const isDarkMode = useColorScheme() === "dark";
+  const { themeAppearance } = useAppearancePreferences();
+  const isDarkMode = themeAppearance === "dark";
 
   const handleFeedTouchStart = useCallback((event: GestureResponderEvent) => {
     feedTouchStartRef.current = {
 
@@ -450,12 +450,18 @@ function GitActionProgressButtonContent({
         )}
       >
         <div className="min-h-0 overflow-hidden">
-          <p
-            className="truncate pt-0.5 text-left text-[11px] font-normal text-muted-foreground"
-            title={progress.output ?? undefined}
-          >
-            {progress.output}
-          </p>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <p className="truncate pt-0.5 text-left text-[11px] font-normal text-muted-foreground" />
+              }
+            >
+              {progress.output}
+            </TooltipTrigger>
+            <TooltipPopup side="bottom" className="max-w-96 break-words">
+              {progress.output}
+            </TooltipPopup>
+          </Tooltip>
         </div>
       </div>
     </div>
@@ -480,12 +486,18 @@ function GitActionSuccessButtonContent({ success }: { success: InlineGitActionSu
         )}
       >
         <div className="min-h-0 overflow-hidden">
-          <p
-            className="truncate pt-0.5 text-left text-[11px] font-normal text-muted-foreground"
-            title={success.description ?? undefined}
-          >
-            {success.description}
-          </p>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <p className="truncate pt-0.5 text-left text-[11px] font-normal text-muted-foreground" />
+              }
+            >
+              {success.description}
+            </TooltipTrigger>
+            <TooltipPopup side="bottom" className="max-w-96 break-words">
+              {success.description}
+            </TooltipPopup>
+          </Tooltip>
         </div>
       </div>
     </div>
 
@@ -127,7 +127,6 @@ function matchMedia() {
 }
 
 let MessagesTimeline: typeof import("./MessagesTimeline").MessagesTimeline;
-let toolCallExpandedBodyClassName: typeof import("./MessagesTimeline").toolCallExpandedBodyClassName;
 
 beforeAll(async () => {
   const classList = {
@@ -161,7 +160,7 @@ beforeAll(async () => {
     },
   });
 
-  ({ MessagesTimeline, toolCallExpandedBodyClassName } = await import("./MessagesTimeline"));
+  ({ MessagesTimeline } = await import("./MessagesTimeline"));
 }, 30_000);
 
 const ACTIVE_THREAD_ENVIRONMENT_ID = EnvironmentId.make("environment-local");
@@ -232,11 +231,6 @@ function buildAssistantTimelineEntry(text: string) {
 }
 
 describe("MessagesTimeline", () => {
-  it("sizes expanded tool details with the configured code font size", () => {
-    expect(toolCallExpandedBodyClassName).toContain("var(--font-size-code");
-    expect(toolCallExpandedBodyClassName).not.toContain("text-[11px]");
-  });
-
   it("preserves arbitrary XML-like tags and comparisons in rendered user messages", async () => {
     const { MessagesTimeline } = await import("./MessagesTimeline");
     const markup = renderToStaticMarkup(
@@ -712,7 +706,7 @@ describe("MessagesTimeline", () => {
       />,
     );
 
-    expect(markup).toContain("Steered the active turn");
+    expect(markup).toContain("data-base-ui-tooltip-trigger");
     expect(markup).toContain("lucide-redo-2");
     expect(markup).toContain('data-user-message-intent="steer"');
     expect(markup).toContain("items-center justify-end gap-1");
 
@@ -1354,20 +1354,26 @@ function UserMessageIntentMarker({
           };
   const IntentIcon = presentation.icon;
   return (
-    <div
-      className="me-1 flex items-center justify-end gap-1 text-xs leading-none text-muted-foreground"
-      data-user-message-intent={intent}
-      title={
-        intent === "queued_turn"
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <div
+            className="me-1 flex items-center justify-end gap-1 text-xs leading-none text-muted-foreground"
+            data-user-message-intent={intent}
+          />
+        }
+      >
+        {IntentIcon ? <IntentIcon aria-hidden="true" className="size-3" /> : null}
+        {presentation.label}
+      </TooltipTrigger>
+      <TooltipPopup side="top">
+        {intent === "queued_turn"
           ? "Queued behind the active turn"
           : intent === "promoted_queued_to_steer"
             ? "Originally queued, then promoted to steer the active turn"
-            : "Steered the active turn"
-      }
-    >
-      {IntentIcon ? <IntentIcon aria-hidden="true" className="size-3" /> : null}
-      {presentation.label}
-    </div>
+            : "Steered the active turn"}
+      </TooltipPopup>
+    </Tooltip>
   );
 }
 
@@ -2627,7 +2633,7 @@ function T3CodeToolLogo({ className }: { className?: string }) {
         "flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-[4px] bg-background ring-1 ring-border/65",
         className,
       )}
-      title="T3 Code MCP tool"
+      aria-label="T3 Code MCP tool"
     >
       <img alt="" aria-hidden="true" className="size-4 object-cover" src={logoUrl} />
     </span>
@@ -2740,7 +2746,7 @@ function buildToolCallExpandedBody(
   return blocks.length > 0 ? blocks.join("\n\n") : null;
 }
 
-export const toolCallExpandedBodyClassName =
+const toolCallExpandedBodyClassName =
   "max-h-64 cursor-text overflow-auto whitespace-pre-wrap break-words font-mono text-secondary-label text-[length:var(--font-size-code,0.6875rem)] leading-relaxed select-text";
 
 function workEntryIconName(workEntry: TimelineWorkEntry): WorkEntryIconName {
 
@@ -18,6 +18,7 @@ import { useThreadProjection } from "../../state/entities";
 import { useAtomCommand } from "../../state/use-atom-command";
 import type { ChatMessage } from "../../types";
 import { Button } from "../ui/button";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 
 export function QueuedRunsControl(props: {
   readonly environmentId: EnvironmentId;
@@ -201,9 +202,14 @@ export function QueuedRunsControl(props: {
                 </>
               ) : (
                 <>
-                  <span className="min-w-0 flex-1 truncate text-xs" title={item.text}>
-                    {item.text}
-                  </span>
+                  <Tooltip>
+                    <TooltipTrigger render={<span className="min-w-0 flex-1 truncate text-xs" />}>
+                      {item.text}
+                    </TooltipTrigger>
+                    <TooltipPopup side="top" className="max-w-96 break-words">
+                      {item.text}
+                    </TooltipPopup>
+                  </Tooltip>
                   <Button
                     size="icon-xs"
                     variant="ghost"
 
@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import type { LucideIcon } from "lucide-react";
 
 import { cn } from "~/lib/utils";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip";
 
 export function TimelineSystemDivider(props: {
   readonly label: string;
@@ -35,15 +36,21 @@ export function TimelineSystemDivider(props: {
     >
       <span aria-hidden="true" className="h-px flex-1 bg-border/70" />
       {props.onAction ? (
-        <button
-          type="button"
-          aria-label={props.actionLabel}
-          onClick={props.onAction}
-          className="flex min-w-0 items-center gap-1.5 rounded-full border border-border/70 bg-background px-2.5 py-1 transition-colors hover:bg-muted"
-          title={props.actionLabel}
-        >
-          {content}
-        </button>
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                type="button"
+                aria-label={props.actionLabel}
+                onClick={props.onAction}
+                className="flex min-w-0 items-center gap-1.5 rounded-full border border-border/70 bg-background px-2.5 py-1 transition-colors hover:bg-muted"
+              />
+            }
+          >
+            {content}
+          </TooltipTrigger>
+          <TooltipPopup side="top">{props.actionLabel}</TooltipPopup>
+        </Tooltip>
       ) : (
         <span className="flex min-w-0 items-center gap-1.5 rounded-full px-2 py-1">{content}</span>
       )}
 
@@ -13,6 +13,7 @@ import {
 import {
   ArchiveIcon,
   ArrowLeftIcon,
+  BlocksIcon,
   BotIcon,
   CalendarClockIcon,
   FlaskConicalIcon,
@@ -73,6 +74,7 @@ const SETTINGS_SECTION_ICONS: Readonly<
   "/settings/appearance": PaletteIcon,
   "/settings/keybindings": KeyboardIcon,
   "/settings/providers": BotIcon,
+  "/settings/integrations": BlocksIcon,
   "/settings/scheduled-tasks": CalendarClockIcon,
   "/settings/source-control": GitBranchIcon,
   "/settings/connections": Link2Icon,