@alia.onl/sdk 3.0.0 → 3.1.1

package/src/components/voice/AudioWaveVisualizer.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
-import { View, Platform, useWindowDimensions } from 'react-native';
+import React, { useEffect, useMemo } from 'react';
+import { View, Platform, useWindowDimensions, useColorScheme } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import Animated, {
   useSharedValue,
@@ -15,6 +15,13 @@ import type { AgentState } from '../../types';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
+/** Cross-platform blur: CSS string on web, RN array syntax on native */
+function blurStyle(radius: number) {
+  return Platform.OS === 'web'
+    ? ({ filter: `blur(${radius}px)`, WebkitFilter: `blur(${radius}px)` } as any)
+    : ({ filter: [{ blur: radius }] } as any);
+}
+
 const GLOW_HEIGHT = 350;
 const NUM_POINTS = 8;
 
@@ -167,20 +174,79 @@ const BLOB_COLORS: Record<AgentState, string[]> = {
   speaking: ['#1e2870', '#6366f1', '#9333ea', '#0ea5e9'],
 };
 
+// Derive wave & blob palettes from a hex color
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace('#', '');
+  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+}
+
+function darken(rgb: [number, number, number], factor: number): [number, number, number] {
+  return [Math.round(rgb[0] * factor), Math.round(rgb[1] * factor), Math.round(rgb[2] * factor)];
+}
+
+function lighten(rgb: [number, number, number], factor: number): [number, number, number] {
+  return [
+    Math.min(255, Math.round(rgb[0] + (255 - rgb[0]) * factor)),
+    Math.min(255, Math.round(rgb[1] + (255 - rgb[1]) * factor)),
+    Math.min(255, Math.round(rgb[2] + (255 - rgb[2]) * factor)),
+  ];
+}
+
+function deriveWavePalette(hex: string, isDark: boolean): { waves: string[]; blobs: string[] } {
+  const rgb = hexToRgb(hex);
+  // Dark mode: lighter/brighter waves visible against dark bg
+  // Light mode: darker waves visible against light bg
+  const layer0 = isDark ? darken(rgb, 0.55) : darken(rgb, 0.3);
+  const layer1 = isDark ? lighten(rgb, 0.15) : darken(rgb, 0.5);
+  const layer2 = isDark ? lighten(rgb, 0.4) : darken(rgb, 0.15);
+  const layer3 = isDark ? lighten(rgb, 0.6) : rgb;
+  return {
+    waves: [
+      `rgba(${layer0[0]}, ${layer0[1]}, ${layer0[2]}, 0.8)`,
+      `rgba(${layer1[0]}, ${layer1[1]}, ${layer1[2]}, 0.45)`,
+      `rgba(${layer2[0]}, ${layer2[1]}, ${layer2[2]}, 0.35)`,
+      `rgba(${layer3[0]}, ${layer3[1]}, ${layer3[2]}, 0.25)`,
+    ],
+    blobs: [
+      `rgb(${layer0[0]}, ${layer0[1]}, ${layer0[2]})`,
+      `rgb(${layer1[0]}, ${layer1[1]}, ${layer1[2]})`,
+      `rgb(${layer2[0]}, ${layer2[1]}, ${layer2[2]})`,
+      `rgb(${layer3[0]}, ${layer3[1]}, ${layer3[2]})`,
+    ],
+  };
+}
+
 interface AudioWaveVisualizerProps {
   waveAmplitude: SharedValue<number>;
   agentState: AgentState;
   isConnected: boolean;
+  /** Theme primary color hex — derives idle/listening wave palette */
+  primaryColor?: string;
+  /** Whether the app is in dark mode (affects wave brightness) */
+  isDarkMode?: boolean;
 }
 
 export function AudioWaveVisualizer({
   waveAmplitude,
   agentState = 'idle',
   isConnected,
+  primaryColor,
+  isDarkMode,
 }: AudioWaveVisualizerProps) {
   const { width: screenWidth } = useWindowDimensions();
+  const scheme = useColorScheme();
+  const effectiveIsDark = isDarkMode ?? (scheme === 'dark');
   const state = WAVE_COLORS[agentState] ? agentState : 'idle';
 
+  // Use theme-derived palette for idle/listening, keep hardcoded for thinking/speaking
+  const themed = useMemo(
+    () => (primaryColor ? deriveWavePalette(primaryColor, effectiveIsDark) : null),
+    [primaryColor, effectiveIsDark],
+  );
+  const isThemed = (state === 'idle' || state === 'listening') && themed != null;
+  const waveColors = isThemed ? themed.waves : WAVE_COLORS[state];
+  const blobColors = isThemed ? themed.blobs : BLOB_COLORS[state];
+
   return (
     <View
       style={{
@@ -194,7 +260,7 @@ export function AudioWaveVisualizer({
         <GlowBlob
           key={`blob-${i}`}
           blob={blob}
-          color={BLOB_COLORS[state][i]}
+          color={blobColors[i]}
           waveAmplitude={waveAmplitude}
           isConnected={isConnected}
           screenWidth={screenWidth}
@@ -206,7 +272,7 @@ export function AudioWaveVisualizer({
         <OceanWave
           key={`wave-${i}`}
           layer={layer}
-          color={WAVE_COLORS[state][i]}
+          color={waveColors[i]}
           waveAmplitude={waveAmplitude}
           isConnected={isConnected}
           screenWidth={screenWidth}
@@ -279,14 +345,6 @@ function OceanWave({
     return { d };
   });
 
-  const webBlurStyle =
-    Platform.OS === 'web'
-      ? ({
-          filter: `blur(${layer.blur}px)`,
-          WebkitFilter: `blur(${layer.blur}px)`,
-        } as any)
-      : {};
-
   return (
     <View
       style={{
@@ -296,7 +354,7 @@ function OceanWave({
         right: 0,
         bottom: 0,
         opacity: isConnected ? 1 : 0,
-        ...webBlurStyle,
+        ...blurStyle(layer.blur),
         pointerEvents: 'none',
       }}
     >
@@ -365,13 +423,5 @@ function GlowBlob({
     };
   });
 
-  const webBlurStyle =
-    Platform.OS === 'web'
-      ? ({
-          filter: `blur(${blob.blur}px)`,
-          WebkitFilter: `blur(${blob.blur}px)`,
-        } as any)
-      : {};
-
-  return <Animated.View style={[animatedStyle, webBlurStyle]} />;
+  return <Animated.View style={[animatedStyle, blurStyle(blob.blur)]} />;
 }

package/src/components/voice/VoiceControls.tsx

@@ -4,8 +4,8 @@
  */
 
 import { View, Text, Pressable, ActivityIndicator, StyleSheet } from 'react-native';
+import { Mic, MicOff, PhoneOff, Users } from 'lucide-react-native';
 import type { RoomState, AgentState } from '../../types';
-import { useAliaColors } from '../../theme';
 
 interface VoiceControlsProps {
   roomState: RoomState;
@@ -19,6 +19,8 @@ interface VoiceControlsProps {
   onDisableCohost: () => void;
   onContinueCohost: () => void;
   onEnd: () => void;
+  /** Override theme primary color (resolved hex/hsl value, not CSS var) */
+  primaryColor?: string;
 }
 
 function getStatusText(
@@ -52,14 +54,14 @@ export function VoiceControls({
   onDisableCohost,
   onContinueCohost,
   onEnd,
+  primaryColor,
 }: VoiceControlsProps) {
-  const colors = useAliaColors();
   const statusText = getStatusText(roomState, agentState, isMuted, cohostActive, currentSpeaker);
 
   return (
     <View style={styles.container}>
       {statusText ? (
-        <Text style={[styles.statusText, { color: colors.text }]}>
+        <Text className="text-lg font-medium mb-4 text-foreground">
           {statusText}
         </Text>
       ) : null}
@@ -67,9 +69,12 @@ export function VoiceControls({
       {roundComplete && (
         <Pressable
           onPress={onContinueCohost}
-          style={styles.continueButton}
+          className="bg-primary/30"
+          style={[styles.continueButton, primaryColor ? { backgroundColor: primaryColor + '4D' } : undefined]}
         >
-          <Text style={styles.continueText}>Continue conversation</Text>
+          <Text className="text-sm font-medium text-primary" style={primaryColor ? { color: primaryColor } : undefined}>
+            Continue conversation
+          </Text>
         </Pressable>
       )}
 
@@ -78,16 +83,16 @@ export function VoiceControls({
           <View style={styles.buttonWrapper}>
             <Pressable
               onPress={onToggleMute}
-              style={[
-                styles.button,
-                { backgroundColor: isMuted ? '#ef4444' : 'rgba(255,255,255,0.15)' },
-              ]}
+              className={isMuted ? undefined : 'bg-muted'}
+              style={[styles.button, isMuted ? { backgroundColor: '#ef4444' } : undefined]}
             >
-              <Text style={styles.buttonIcon}>
-                {isMuted ? '\u{1F507}' : '\u{1F3A4}'}
-              </Text>
+              {isMuted ? (
+                <MicOff size={24} color="white" />
+              ) : (
+                <Mic size={24} color="white" />
+              )}
             </Pressable>
-            <Text style={styles.buttonLabel}>
+            <Text className="text-xs text-muted-foreground">
               {isMuted ? 'Unmute' : 'Mute'}
             </Text>
           </View>
@@ -95,14 +100,15 @@ export function VoiceControls({
           <View style={styles.buttonWrapper}>
             <Pressable
               onPress={cohostActive ? onDisableCohost : onEnableCohost}
+              className={cohostActive ? 'bg-primary' : 'bg-muted'}
               style={[
                 styles.button,
-                { backgroundColor: cohostActive ? '#8b5cf6' : 'rgba(255,255,255,0.15)' },
+                cohostActive && primaryColor ? { backgroundColor: primaryColor } : undefined,
               ]}
             >
-              <Text style={styles.buttonIcon}>{'\u{1F465}'}</Text>
+              <Users size={24} color="white" />
             </Pressable>
-            <Text style={styles.buttonLabel}>
+            <Text className="text-xs text-muted-foreground">
               {cohostActive ? 'Solo' : 'Cohost'}
             </Text>
           </View>
@@ -112,15 +118,15 @@ export function VoiceControls({
               onPress={onEnd}
               style={[styles.button, { backgroundColor: '#ef4444' }]}
             >
-              <Text style={styles.endIcon}>{'\u2715'}</Text>
+              <PhoneOff size={24} color="white" />
             </Pressable>
-            <Text style={styles.buttonLabel}>End</Text>
+            <Text className="text-xs text-muted-foreground">End</Text>
           </View>
         </View>
       )}
 
       {roomState === 'connecting' && (
-        <ActivityIndicator size="large" color="#38bdf8" />
+        <ActivityIndicator size="large" className="text-muted-foreground" />
       )}
     </View>
   );
@@ -132,11 +138,6 @@ const styles = StyleSheet.create({
     paddingBottom: 24,
     paddingTop: 16,
   },
-  statusText: {
-    fontSize: 18,
-    fontWeight: '500',
-    marginBottom: 16,
-  },
   buttonRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -153,28 +154,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  buttonIcon: {
-    fontSize: 24,
-  },
-  endIcon: {
-    fontSize: 24,
-    color: '#ffffff',
-    fontWeight: '700',
-  },
-  buttonLabel: {
-    color: '#8E8E93',
-    fontSize: 12,
-  },
   continueButton: {
     marginBottom: 16,
     paddingHorizontal: 20,
     paddingVertical: 8,
     borderRadius: 24,
-    backgroundColor: 'rgba(139, 92, 246, 0.3)',
-  },
-  continueText: {
-    color: '#a78bfa',
-    fontSize: 14,
-    fontWeight: '500',
   },
 });

package/src/components/voice/VoiceOverlay.tsx

@@ -14,9 +14,11 @@ interface VoiceOverlayProps {
   waveAmplitude: SharedValue<number>;
   agentState: AgentState;
   isConnected: boolean;
+  primaryColor?: string;
+  isDarkMode?: boolean;
 }
 
-export function VoiceOverlay({ waveAmplitude, agentState, isConnected }: VoiceOverlayProps) {
+export function VoiceOverlay({ waveAmplitude, agentState, isConnected, primaryColor, isDarkMode }: VoiceOverlayProps) {
   return (
     <Animated.View
       entering={FadeIn.duration(400)}
@@ -36,6 +38,8 @@ export function VoiceOverlay({ waveAmplitude, agentState, isConnected }: VoiceOv
           waveAmplitude={waveAmplitude}
           agentState={agentState}
           isConnected={isConnected}
+          primaryColor={primaryColor}
+          isDarkMode={isDarkMode}
         />
       </View>
     </Animated.View>

package/src/hooks/useAliaChat.ts

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { useOxy } from '@oxyhq/services';
 import type { ChatMessage, ToolInvocation } from '../types';
+import { getTextFromContent } from '../lib/content-utils';
 
 const API_URL = process.env.EXPO_PUBLIC_ALIA_API_URL ?? 'https://api.alia.onl';
 
@@ -188,7 +189,7 @@ export function useAliaChat(options: UseAliaChatOptions = {}): UseAliaChatReturn
       // Include full conversation history with tool context
       for (const msg of messagesRef.current) {
         if (msg.role === 'system') continue;
-        apiMessages.push({ role: msg.role, content: msg.content });
+        apiMessages.push({ role: msg.role, content: getTextFromContent(msg.content) });
         // Include tool results so the AI has full context
         if (msg.toolInvocations?.length) {
           for (const tool of msg.toolInvocations) {

package/src/hooks/useSpeechToText.ts

@@ -60,18 +60,32 @@ export function useSpeechToText(options: UseSTTOptions = {}) {
     return oxyServices.httpService.getAccessToken();
   }, [options.accessToken, oxyServices]);
 
-  // Push metering to store while recording
+  // Push metering to store while recording (with epsilon guard to avoid thrashing subscribers)
+  const lastMeteringRef = useRef(0);
   useEffect(() => {
-    if (state === 'recording' && recorderState.metering != null) {
-      // dBFS: -160 (silence) to 0 (max). Normalize using -60 as practical floor.
-      const normalized = Math.min(1, Math.max(0, (recorderState.metering + 60) / 60));
-      sttStore.getState().setMetering(normalized);
+    if (state === 'recording') {
+      let target: number;
+      if (recorderState.metering != null) {
+        // dBFS: -160 (silence) to 0 (max). Normalize using -60 as practical floor.
+        target = Math.min(1, Math.max(0, (recorderState.metering + 60) / 60));
+      } else {
+        // Metering unavailable — simulate gentle activity
+        target = 0.12 + Math.random() * 0.18;
+      }
+      if (Math.abs(target - lastMeteringRef.current) >= 0.02) {
+        lastMeteringRef.current = target;
+        sttStore.getState().setMetering(target);
+      }
     }
-  }, [state, recorderState.metering]);
+  }, [state, recorderState.metering, recorderState.durationMillis]);
 
-  // Sync recording state to store
+  // Sync recording state to store + reset metering on stop
   useEffect(() => {
     sttStore.getState().setRecording(state === 'recording');
+    if (state !== 'recording') {
+      lastMeteringRef.current = 0;
+      sttStore.getState().setMetering(0);
+    }
   }, [state]);
 
   const startRecording = useCallback(async () => {

package/src/hooks/useVoiceRoom.ts

@@ -21,6 +21,10 @@ import type { RoomState, AgentState, VoiceMessage, VoiceToolInvocation } from '.
 
 const API_URL = process.env.EXPO_PUBLIC_ALIA_API_URL ?? 'https://api.alia.onl';
 
+/** On web, audio tracks must be attached to a DOM element to play.
+ *  On native (React Native), the WebRTC layer plays them automatically. */
+const hasDOM = typeof document !== 'undefined';
+
 // ============== OPTIONS ==============
 
 export interface UseVoiceRoomOptions {
@@ -106,12 +110,14 @@ export function useVoiceRoom(options: UseVoiceRoomOptions = {}) {
 
   const cleanup = useCallback(() => {
     if (roomRef.current) {
-      // Detach all remote audio tracks before disconnecting
-      roomRef.current.remoteParticipants.forEach((p) => {
-        p.trackPublications.forEach((pub) => {
-          pub.track?.detach();
+      // On web, detach all remote audio tracks before disconnecting
+      if (hasDOM) {
+        roomRef.current.remoteParticipants.forEach((p) => {
+          p.trackPublications.forEach((pub) => {
+            pub.track?.detach();
+          });
         });
-      });
+      }
       roomRef.current.disconnect();
       roomRef.current = null;
     }
@@ -274,6 +280,13 @@ export function useVoiceRoom(options: UseVoiceRoomOptions = {}) {
       setError(null);
       setRoomState('connecting');
 
+      // Guard: WebRTC must be available (requires registerGlobals on RN)
+      if (typeof globalThis.RTCPeerConnection === 'undefined') {
+        setError('Voice is not available on this device');
+        setRoomState('error');
+        return;
+      }
+
       const token = getToken();
       if (!token) {
         setError('Not authenticated');
@@ -309,15 +322,18 @@ export function useVoiceRoom(options: UseVoiceRoomOptions = {}) {
       const room = new Room();
       roomRef.current = room;
 
-      // Event: remote audio tracks (agent speaking) — must attach to play
+      // Event: remote audio tracks (agent speaking)
+      // On web, must attach to a DOM element to play. On native, WebRTC plays audio automatically.
       room.on(RoomEvent.TrackSubscribed, (track, publication, participant) => {
-        if (track.kind === Track.Kind.Audio) {
+        if (track.kind === Track.Kind.Audio && hasDOM) {
           track.attach();
         }
       });
 
       room.on(RoomEvent.TrackUnsubscribed, (track) => {
-        track.detach();
+        if (hasDOM && track.kind === Track.Kind.Audio) {
+          track.detach();
+        }
       });
 
       // Event: data messages from agent

package/src/index.ts

@@ -10,10 +10,14 @@ export type { AliaChatScreenProps } from './components/AliaChatScreen';
 
 // ── Chat UI components ──
 export { AliaFace } from './components/AliaFace';
-export type { AliaExpression, AliaFaceProps } from './components/AliaFace';
+export type { AliaAccessory, AliaExpression, AliaFaceProps } from './components/AliaFace';
 export { ThinkingIndicator } from './components/ThinkingIndicator';
 export { AliaMarkdown } from './components/Markdown';
+export type { AliaMarkdownProps } from './components/Markdown';
 export { Reasoning, ReasoningTrigger, ReasoningContent } from './components/Reasoning';
+export { AliaWelcomeMessage } from './components/AliaWelcomeMessage';
+export { ResearchProgressCard } from './components/ResearchProgressCard';
+export { PlanPreviewCard } from './components/PlanPreviewCard';
 
 // ── Voice components ──
 export { AudioWaveVisualizer } from './components/voice/AudioWaveVisualizer';
@@ -39,9 +43,11 @@ export type { SoundName, SoundSources } from './hooks/useSoundEffects';
 export type {
   ChatMessage,
   ToolInvocation,
-  AliaChatSuggestion,
+  WelcomeSuggestion,
   ResearchProgress,
+  ResearchSource,
   PendingPlan,
+  PlanStep,
   RoomState,
   AgentState,
   VoiceMessage,
@@ -54,6 +60,8 @@ export type { ButtonProps } from './components/ui/button';
 export { Text, TextClassContext } from './components/ui/text';
 export { ChatTextInput } from './components/ui/chat-text-input';
 export { cn, formatFileSize } from './lib/utils';
+export { getToolLabel, getToolActiveLabel, getResearchActiveLabel } from './lib/tool-registry';
+export { getTextFromContent, getImagesFromContent } from './lib/content-utils';
 
 // ── PromptInput ──
 export { PromptInput } from './components/ui/prompt-input/prompt-input';
@@ -78,5 +86,4 @@ export type { DocumentPickerResult } from './hooks/useDocumentPicker';
 export { KeyboardAwareScrollView, KeyboardAvoidingView, KeyboardProvider } from './lib/keyboard';
 
 // ── Theme ──
-export { useAliaColors } from './theme';
 export type { AliaColors } from './theme';

package/src/lib/content-utils.ts

@@ -0,0 +1,23 @@
+/**
+ * Extract text from message content, whether it's a string or multi-part array.
+ */
+export function getTextFromContent(content: string | Array<{ type: string; [key: string]: any }> | any): string {
+  if (typeof content === 'string') return content;
+  if (Array.isArray(content)) {
+    return content
+      .filter((p: any) => p.type === 'text')
+      .map((p: any) => p.text || '')
+      .join('');
+  }
+  return String(content || '');
+}
+
+/**
+ * Extract image URLs from multi-part message content.
+ */
+export function getImagesFromContent(content: string | Array<{ type: string; [key: string]: any }> | any): string[] {
+  if (!Array.isArray(content)) return [];
+  return content
+    .filter((p: any) => p.type === 'image_url' && p.image_url?.url)
+    .map((p: any) => p.image_url.url);
+}

package/src/lib/tool-registry.ts

@@ -0,0 +1,55 @@
+interface ToolDefinition {
+  label: string;
+  category: 'search' | 'communication' | 'utility' | 'memory';
+}
+
+const TOOL_REGISTRY: Record<string, ToolDefinition> = {
+  // Search
+  webSearch:           { label: 'Searching the web',         category: 'search' },
+  scrapeURL:           { label: 'Reading URL',               category: 'search' },
+  getTimeline:         { label: 'Getting timeline',          category: 'search' },
+  searchKnowledgeBase: { label: 'Searching knowledge base',  category: 'search' },
+  webScraper:          { label: 'Reading web page',          category: 'search' },
+  browse:              { label: 'Browsing the web',          category: 'search' },
+
+  // Communication
+  sendWhatsAppMessage: { label: 'Sending WhatsApp message',  category: 'communication' },
+  getWhatsAppChats:    { label: 'Loading WhatsApp chats',    category: 'communication' },
+  getWhatsAppMessages: { label: 'Reading WhatsApp messages', category: 'communication' },
+  sendTelegram:        { label: 'Sending Telegram message',  category: 'communication' },
+
+  // Utility
+  getCurrentDate:      { label: 'Getting current date',      category: 'utility' },
+  generateFile:        { label: 'Generating file',           category: 'utility' },
+
+  // Memory
+  saveUserMemory:        { label: 'Saving to memory',      category: 'memory' },
+  updateUserPreferences: { label: 'Updating preferences',  category: 'memory' },
+  updateUserContext:     { label: 'Updating context',      category: 'memory' },
+};
+
+export function getToolLabel(toolName: string): string {
+  return TOOL_REGISTRY[toolName]?.label || toolName;
+}
+
+export function getToolActiveLabel(toolName: string): string | undefined {
+  const label = TOOL_REGISTRY[toolName]?.label;
+  if (!label) return undefined;
+  return label + '...';
+}
+
+/** Status strings for the ThinkingIndicator during research phases. */
+const RESEARCH_ACTIVE_LABELS: Record<string, string> = {
+  decomposing: 'Decomposing query...',
+  searching: 'Searching sources...',
+  reading: 'Reading articles...',
+  synthesizing: 'Synthesizing findings...',
+  follow_up: 'Following up...',
+  finalizing: 'Finalizing research...',
+};
+
+export function getResearchActiveLabel(phase: string): string | undefined {
+  return RESEARCH_ACTIVE_LABELS[phase];
+}
+
+export { TOOL_REGISTRY };

package/src/theme.ts

@@ -1,35 +1,4 @@
-import { useMemo } from 'react';
-import { useColorScheme } from 'react-native';
-
-const COLORS = {
-  light: {
-    text: '#11181C',
-    background: '#fff',
-    card: '#F2F2F7',
-    inputBackground: '#F5F5F5',
-    border: '#E5E5EA',
-    secondaryText: '#8E8E93',
-    icon: '#687076',
-    tint: '#0a7ea4',
-    muted: '#F4F4F5',
-    mutedForeground: '#71717A',
-    primary: '#0a7ea4',
-  },
-  dark: {
-    text: '#ECEDEE',
-    background: '#000000',
-    card: '#1C1C1E',
-    inputBackground: '#333333',
-    border: '#2C2C2E',
-    secondaryText: '#8E8E93',
-    icon: '#9BA1A6',
-    tint: '#fff',
-    muted: '#27272A',
-    mutedForeground: '#A1A1AA',
-    primary: '#38BDF8',
-  },
-} as const;
-
+/** Color interface used by SDK components that need resolved color values (e.g., Markdown renderer). */
 export interface AliaColors {
   text: string;
   background: string;
@@ -42,14 +11,6 @@ export interface AliaColors {
   muted: string;
   mutedForeground: string;
   primary: string;
+  primary10: string;
   isDark: boolean;
 }
-
-export function useAliaColors(): AliaColors {
-  const scheme = useColorScheme();
-  const key = scheme === 'dark' ? 'dark' : 'light';
-  return useMemo(() => ({
-    ...COLORS[key],
-    isDark: key === 'dark',
-  }), [key]);
-}