public/audioWorklet.js

@@ -1,23 +1,9 @@
 class AudioProcessor extends AudioWorkletProcessor {
-  constructor() {
-    super();
-    this._buffer = new Float32Array(4096);
-    this._bufferIndex = 0;
-  }
-
   process(inputs) {
     const input = inputs[0];
     if (input.length > 0) {
-      const samples = input[0];
+      const audioData = input[0];
-      for (let i = 0; i < samples.length; i++) {
+      this.port.postMessage(audioData);
-        this._buffer[this._bufferIndex++] = samples[i];
-        if (this._bufferIndex >= 4096) {
-          // Transfer ownership (zero-copy) to main thread
-          this.port.postMessage(this._buffer.buffer, [this._buffer.buffer]);
-          this._buffer = new Float32Array(4096);
-          this._bufferIndex = 0;
-        }
-      }
     }
     return true;
   }

src/App.tsx

@@ -4,6 +4,8 @@ import { theme } from './services/themeService';
 import { AuthProvider } from './contexts/AuthContext';
 import { TLDrawProvider } from './contexts/TLDrawContext';
 import { UserProvider } from './contexts/UserContext';
+import { NeoUserProvider } from './contexts/NeoUserContext';
+import { NeoInstituteProvider } from './contexts/NeoInstituteContext';
 import AppRoutes from './AppRoutes';
 import React from 'react';
 

src/contexts/AuthContext.tsx

@@ -4,6 +4,7 @@ import { Session, User } from '@supabase/supabase-js';
 import { CCUser, CCUserMetadata, authService } from '../services/auth/authService';
 import { logger } from '../debugConfig';
 import { supabase } from '../supabaseClient';
+import { DatabaseNameService } from '../services/graph/databaseNameService';
 import { storageService, StorageKeys } from '../services/auth/localStorageService';
 
 export interface AuthContextType {
@@ -51,13 +52,20 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     const baseDisplayName = metadata.display_name || metadata.name || metadata.preferred_username || baseUsername;
     const userType = (metadata.user_type || 'email_teacher').trim();
 
+    const storedUserDb = DatabaseNameService.getStoredUserDatabase();
+    const storedSchoolDb = DatabaseNameService.getStoredSchoolDatabase();
+
+    const userDbName = storedUserDb || DatabaseNameService.getUserPrivateDB(userType || 'standard', supabaseUser.id);
+    const schoolDbName = storedSchoolDb || '';
+
     const resolvedUser: CCUser = {
       id: supabaseUser.id,
       email: supabaseUser.email,
       user_type: userType,
       username: baseUsername,
       display_name: baseDisplayName,
-      school_id: null,
+      user_db_name: userDbName,
+      school_db_name: schoolDbName,
       created_at: supabaseUser.created_at,
       updated_at: supabaseUser.updated_at
     };

src/contexts/UserContext.tsx

@@ -4,6 +4,8 @@ import { supabase } from '../supabaseClient';
 import { logger } from '../debugConfig';
 import { CCUser, CCUserMetadata } from '../services/auth/authService';
 import { UserPreferences } from '../services/auth/profileService';
+import { DatabaseNameService } from '../services/graph/databaseNameService';
+import { provisionUser } from '../services/provisioningService';
 import { storageService, StorageKeys } from '../services/auth/localStorageService';
 
 export interface UserContextType {
@@ -110,23 +112,33 @@ export const UserProvider = ({ children }: { children: React.ReactNode }) => {
 
      let profileRow: Record<string, unknown> | null = null;
 
-      // Fast-path: build profile from auth metadata immediately (no spinner on refresh).
+      // Fast-path: build profile from auth metadata + localStorage immediately.
+      // This clears the spinner before any network call so the page renders on refresh
+      // without waiting for the Supabase profiles query (~200ms).
       const fastMetadata = userInfo.user_metadata as CCUserMetadata;
+      const fastStoredUserDb = DatabaseNameService.getStoredUserDatabase();
+      const fastStoredSchoolDb = DatabaseNameService.getStoredSchoolDatabase();
+      const fastUserDb = fastStoredUserDb || DatabaseNameService.getUserPrivateDB(fastMetadata?.user_type || '', userInfo.id);
       const fastProfile: CCUser = {
         id: userInfo.id,
         email: userInfo.email,
         user_type: fastMetadata?.user_type || '',
         username: fastMetadata?.username || userInfo.email?.split('@')[0] || 'user',
         display_name: String(fastMetadata?.display_name || ''),
-        school_id: null,
+        user_db_name: String(fastUserDb || ''),
+        school_db_name: String(fastStoredSchoolDb || ''),
         created_at: userInfo.created_at,
         updated_at: userInfo.updated_at
       };
+      DatabaseNameService.rememberDatabaseNames({
+        userDbName: fastProfile.user_db_name,
+        schoolDbName: fastProfile.school_db_name
+      });
       if (mountedRef.current && !isInitialized) {
         setProfile(fastProfile);
         setLoading(false);
         setIsInitialized(true);
-        logger.debug('user-context', '⚡ Fast-path: profile initialized from auth metadata');
+        logger.debug('user-context', '⚡ Fast-path: profile initialized from auth metadata, no spinner');
       }
 
       // Background: query Supabase profiles for authoritative data (user_db_name, school_db_name, display_name).
@@ -160,15 +172,80 @@ export const UserProvider = ({ children }: { children: React.ReactNode }) => {
         hasSchoolDb: !!profileRow?.school_db_name
       });
 
-
       const metadata = userInfo.user_metadata as CCUserMetadata;
+      logger.debug('user-context', '🔧 Step 7: Processing user metadata...', {
+        hasMetadata: !!metadata,
+        userType: metadata?.user_type
+      });
+      let userDbName = profileRow?.user_db_name ?? null;
+      let schoolDbName = profileRow?.school_db_name ?? null;
+      const storedUserDb = DatabaseNameService.getStoredUserDatabase();
+      const storedSchoolDb = DatabaseNameService.getStoredSchoolDatabase();
+
+      // Start provisioning in background (non-blocking)
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const provisioningPromise = provisionUser(userInfo.id, authSession?.access_token ?? null)
+        .then(provisioned => {
+          if (provisioned) {
+            logger.debug('user-context', '✅ Provisioning completed in background', {
+              userDbName: provisioned.user_db_name,
+              workerDbName: provisioned.worker_db_name
+            });
+            // Update localStorage with provisioned values
+            DatabaseNameService.rememberDatabaseNames({
+              userDbName: provisioned.user_db_name,
+              schoolDbName: provisioned.worker_db_name || ''
+            });
+          }
+        })
+        .catch(provisionError => {
+          logger.warn('user-context', '⚠️ Background provisioning failed', {
+            userId: userInfo?.id,
+            provisionError: provisionError instanceof Error ? provisionError.message : String(provisionError)
+          });
+        });
+
+      if (!userDbName && storedUserDb) {
+        userDbName = storedUserDb;
+      }
+
+      if (!schoolDbName && storedSchoolDb) {
+        schoolDbName = storedSchoolDb;
+      }
+
+      logger.debug('user-context', 'ℹ️ Database name resolution', {
+        userDbName,
+        schoolDbName
+      });
+
+      if (!userDbName) {
+        userDbName = DatabaseNameService.getUserPrivateDB(metadata.user_type || '', userInfo.id);
+      }
+
+      if (!schoolDbName) {
+        schoolDbName = '';
+      }
+
+      DatabaseNameService.rememberDatabaseNames({
+        userDbName: String(userDbName || ''),
+        schoolDbName: String(schoolDbName || '')
+      });
+
+      logger.debug('user-context', '🔧 Creating user profile object...', {
+        userId: userInfo.id,
+        userDbName,
+        schoolDbName,
+        userType: metadata.user_type
+      });
+
       const userProfile: CCUser = {
         id: userInfo.id,
         email: userInfo.email,
         user_type: metadata.user_type || '',
         username: metadata.username || '',
         display_name: String(metadata.display_name || ''),
-        school_id: (profileRow?.school_id as string) ?? null,
+        user_db_name: String(userDbName || ''),
+        school_db_name: String(schoolDbName || ''),
         created_at: userInfo.created_at,
         updated_at: userInfo.updated_at
       };
@@ -191,7 +268,9 @@ export const UserProvider = ({ children }: { children: React.ReactNode }) => {
       logger.debug('user-context', '✅ User profile loaded', {
         userId: userProfile.id,
         userType: userProfile.user_type,
-        username: userProfile.username
+        username: userProfile.username,
+        userDbName: userProfile.user_db_name,
+        schoolDbName: userProfile.school_db_name
       });
       setError(null);
     } catch (error) {
@@ -216,14 +295,22 @@ export const UserProvider = ({ children }: { children: React.ReactNode }) => {
           user_type: metadata?.user_type || 'email_teacher',
           username: metadata?.username || userInfo.email?.split('@')[0] || 'user',
           display_name: metadata?.display_name || userInfo.email?.split('@')[0] || 'User',
-          school_id: null,
+          user_db_name: DatabaseNameService.getUserPrivateDB(metadata?.user_type || 'email_teacher', userInfo.id),
+          school_db_name: '',
           created_at: userInfo.created_at,
           updated_at: userInfo.updated_at
         };
+        
+        DatabaseNameService.rememberDatabaseNames({
+          userDbName: fallbackProfile.user_db_name,
+          schoolDbName: fallbackProfile.school_db_name
+        });
+        
         setProfile(fallbackProfile);
         logger.debug('user-context', '✅ Fallback profile created', {
           userId: fallbackProfile.id,
-          userType: fallbackProfile.user_type
+          userType: fallbackProfile.user_type,
+          userDbName: fallbackProfile.user_db_name
         });
       } else {
         setProfile(null);

src/hooks/useDeviceContext.ts

@@ -1,37 +0,0 @@
-import { useState, useEffect } from 'react';
-
-export type DeviceType = 'desktop' | 'tablet' | 'phone' | 'iwb';
-
-function detectDeviceType(): DeviceType {
-  const width = window.innerWidth;
-  const touchPoints = navigator.maxTouchPoints ?? 0;
-  const hasTouch = touchPoints > 0 || 'ontouchstart' in window;
-
-  if (width >= 1280 && !hasTouch) return 'desktop';
-  if (width >= 768 && hasTouch) return 'tablet';
-  if (width < 768) return 'phone';
-  return 'desktop';
-}
-
-const STORAGE_KEY = 'cc_device_type';
-
-export function useDeviceContext() {
-  const [deviceType, setDeviceTypeState] = useState<DeviceType>(() => {
-    const stored = localStorage.getItem(STORAGE_KEY) as DeviceType | null;
-    if (stored && ['desktop', 'tablet', 'phone', 'iwb'].includes(stored)) return stored;
-    return detectDeviceType();
-  });
-
-  useEffect(() => {
-    localStorage.setItem(STORAGE_KEY, deviceType);
-  }, [deviceType]);
-
-  const setDeviceType = (type: DeviceType) => {
-    setDeviceTypeState(type);
-  };
-
-  const isTouch = deviceType === 'tablet' || deviceType === 'phone';
-  const isMobileLayout = deviceType === 'phone';
-
-  return { deviceType, setDeviceType, isTouch, isMobileLayout };
-}

src/pages/tldraw/singlePlayerPage.tsx

@@ -122,7 +122,7 @@ export default function SinglePlayerPage() {
                     const nodeStoragePath = getNodeStoragePath(context.node);
                     if (nodeStoragePath) {
                         logger.debug('single-player-page', '📥 Loading snapshot from database', { 
-                            dbName: null,
+                            dbName: user.user_db_name,
                             node: context.node,
                             node_storage_path: nodeStoragePath,
                             user_type: user.user_type,
@@ -131,7 +131,7 @@ export default function SinglePlayerPage() {
 
                         await NavigationSnapshotService.loadNodeSnapshotFromDatabase(
                             nodeStoragePath,
-                            null,
+                            user.user_db_name,
                             newStore,
                             setLoadingState,
                             undefined, // sharedStore

src/services/auth/authService.ts

@@ -3,6 +3,7 @@ import { TLUserPreferences } from '@tldraw/tldraw';
 import { supabase } from '../../supabaseClient';
 import { storageService, StorageKeys } from './localStorageService';
 import { logger } from '../../debugConfig';
+import { DatabaseNameService } from '../graph/databaseNameService';
 
 export interface CCUser {
   id: string;
@@ -10,7 +11,8 @@ export interface CCUser {
   user_type: string;
   username: string;
   display_name: string;
-  school_id?: string | null;
+  user_db_name: string;
+  school_db_name: string;
   created_at?: string;
   updated_at?: string;
 }
@@ -42,13 +44,28 @@ export function convertToCCUser(user: User, metadata: CCUserMetadata): CCUser {
   // Default to student if no user type specified
   const userType = metadata.user_type || 'student';
 
+  const storedUserDb = DatabaseNameService.getStoredUserDatabase();
+  const storedSchoolDb = DatabaseNameService.getStoredSchoolDatabase();
+
+  const userDbName = storedUserDb || DatabaseNameService.getUserPrivateDB(
+    userType,
+    user.id
+  );
+  const schoolDbName = metadata.school_db_name || metadata.worker_db_name || storedSchoolDb || '';
+
+  DatabaseNameService.rememberDatabaseNames({
+    userDbName,
+    schoolDbName
+  });
+
   return {
     id: user.id,
     email: user.email,
     user_type: userType,
-    username,
+    username: username,
     display_name: displayName,
-    school_id: null,
+    user_db_name: userDbName,
+    school_db_name: schoolDbName,
     created_at: user.created_at,
     updated_at: user.updated_at,
   };

src/services/auth/registrationService.ts

@@ -6,6 +6,7 @@ import { RegistrationResponse } from '../../services/auth/authService';
 import { storageService, StorageKeys } from './localStorageService';
 import { logger } from '../../debugConfig';
 import { provisionUser } from '../provisioningService';
+import { DatabaseNameService } from '../graph/databaseNameService';
 
 const REGISTRATION_SERVICE = 'registration-service';
 
@@ -86,6 +87,14 @@ export class RegistrationService {
             try {
                 const provisioned = await provisionUser(ccUser.id, provisioningToken);
                 if (provisioned) {
+                    ccUser.user_db_name = provisioned.user_db_name;
+                    if (provisioned.worker_db_name) {
+                        ccUser.school_db_name = provisioned.worker_db_name;
+                    }
+                    DatabaseNameService.rememberDatabaseNames({
+                        userDbName: ccUser.user_db_name,
+                        schoolDbName: ccUser.school_db_name
+                    });
                     logger.info(REGISTRATION_SERVICE, '✅ Provisioning successful', {
                         userId: ccUser.id,
                         userDbName: provisioned.user_db_name,
@@ -101,6 +110,11 @@ export class RegistrationService {
                 });
             }
 
+            DatabaseNameService.rememberDatabaseNames({
+                userDbName: ccUser.user_db_name,
+                schoolDbName: ccUser.school_db_name
+            });
+
             return {
                 user: ccUser,
                 accessToken: authData.session?.access_token || null,

src/services/tldraw/snapshotService.ts

@@ -281,11 +281,7 @@ export class NavigationSnapshotService {
                 throw new Error('No user found');
             }
 
-            const dbName = (user as (typeof user & { user_db_name?: string })).user_db_name ?? '';
+            const dbName = user.user_db_name;
-            if (!dbName) {
-                logger.debug('snapshot-service', '⚠️ No db name - snapshot save skipped (Phase B will migrate to Supabase Storage)');
-                return;
-            }
             
             logger.debug('snapshot-service', '💾 Saving snapshot', {
                 nodePath,
@@ -319,11 +315,7 @@ export class NavigationSnapshotService {
                 throw new Error('No user found');
             }
 
-            const dbName = (user as (typeof user & { user_db_name?: string })).user_db_name ?? '';
+            const dbName = user.user_db_name;
-            if (!dbName) {
-                logger.debug('snapshot-service', '⚠️ No db name - snapshot load skipped (Phase B will migrate to Supabase Storage)');
-                return;
-            }
             
             logger.debug('snapshot-service', '📥 Loading snapshot', {
                 nodePath: node.node_storage_path,

src/stores/transcriptionStore.ts

@@ -249,9 +249,11 @@ export const useTranscriptionStore = create<TranscriptionState>((set, get) => ({
     const { completedSegments, currentSegment, activeSession, wordCount } = get();
 
     if (isFinal) {
-      // Final segment — append the finalized text directly (not currentSegment, which
+      // Final segment - move current to completed, clear current
-      // may lag behind or duplicate when WhisperLive re-sends the full segments array).
+      const newCompleted = [...completedSegments];
-      const newCompleted = [...completedSegments, { text, isFinal: true, ...metadata }];
+      if (currentSegment && currentSegment.text.trim()) {
+        newCompleted.push({ ...currentSegment, isFinal: true });
+      }
       const newWordCount = newCompleted.reduce(
         (sum, seg) => sum + seg.text.trim().split(/\s+/).filter(Boolean).length,
         0

src/utils/tldraw/cc-base/cc-transcription/transcriptionService.tsx

@@ -14,7 +14,6 @@ export class TranscriptionService {
   private mediaStreamSource: MediaStreamAudioSourceNode | null = null;
   private workletNode: AudioWorkletNode | null = null;
   private selectedDeviceId: string = '';
-  private finalizedSegmentCount: number = 0;
   private onTranscriptionUpdate: ((text: string, isFinal: boolean, metadata: { start: number, end: number }) => void) | null = null;
 
   constructor(deviceId: string = '') {
@@ -33,7 +32,7 @@ export class TranscriptionService {
 
       // Call getUserMedia directly — this triggers the browser permission prompt.
       // The old code called enumerateDevices() first to find a device ID, but
-      // without microphone permission deviceId is always  (empty string, falsy),
+      // without microphone permission deviceId is always "" (empty string, falsy),
       // causing an early return that never prompted the user for permission.
       const audioConstraints: MediaTrackConstraints = this.selectedDeviceId
         ? { deviceId: { exact: this.selectedDeviceId } }
@@ -60,14 +59,17 @@ export class TranscriptionService {
         clearTimeout(connectionTimeout);
         logger.info('transcription-service', '✅ WebSocket connected');
         
-        // Send initial configuration — audio capture starts only after SERVER_READY.
+        // Send initial configuration message
-        ws.send(JSON.stringify({
+        const message = JSON.stringify({
           uid: uuid,
           language: config.language || 'en',
           task: config.task || 'transcribe',
-          model: config.modelSize || 'base',
+          model: config.modelSize || 'small',
           use_vad: config.useVad ?? true,
-        }));
+        });
+        
+        ws.send(message);
+        this.setupAudioProcessing();
       };
 
       ws.onerror = (error) => {
@@ -85,13 +87,6 @@ export class TranscriptionService {
           return;
         }
 
-        if (data.message === 'SERVER_READY') {
-          // Server is ready — now safe to start streaming audio.
-          logger.info('transcription-service', '🟢 Server ready, starting audio capture');
-          this.setupAudioProcessing();
-          return;
-        }
-
         if (data.status === 'WAIT') {
           logger.info('transcription-service', `⏳ Wait time: ${Math.round(data.message)} minutes`);
           this.cleanup();
@@ -104,27 +99,39 @@ export class TranscriptionService {
           return;
         }
 
-        if (this.onTranscriptionUpdate && data.segments && data.segments.length > 0) {
+        if (this.onTranscriptionUpdate && data.segments) {
-          const segments = data.segments;
+          // Get the last segment which is the current one being updated
-          const lastIdx = segments.length - 1;
+          const lastSegment = data.segments[data.segments.length - 1];
           
-          // Only emit segments we have not finalized yet — avoids re-processing the
+          // Process completed segments
-          // full array on every message (which caused the stuck last segment bug).
+          let lastCompletedText = '';
-          for (let i = this.finalizedSegmentCount; i < lastIdx; i++) {
+          for (let i = 0; i < data.segments.length - 1; i++) {
-            const seg = segments[i];
+            const segment = data.segments[i];
-            this.onTranscriptionUpdate(seg.text, true, {
+            // Only send update if this segment is different from the last one
-              start: parseFloat(seg.start),
+            if (segment.text.trim() !== lastCompletedText.trim()) {
-              end: parseFloat(seg.end),
+              this.onTranscriptionUpdate(
-            });
+                segment.text,
-            this.finalizedSegmentCount = i + 1;
+                segment.completed ?? true, // Server marks completed segments
+                {
+                  start: parseFloat(segment.start),
+                  end: parseFloat(segment.end)
+                }
+              );
+              lastCompletedText = segment.text;
+            }
           }
 
-          // Always update the live (last) segment
+          // Update the current (incomplete) segment only if it's different from the last completed one
-          const lastSeg = segments[lastIdx];
+          if (lastSegment && lastSegment.text.trim() !== lastCompletedText.trim()) {
-          this.onTranscriptionUpdate(lastSeg.text, lastSeg.completed ?? false, {
+            this.onTranscriptionUpdate(
-            start: parseFloat(lastSeg.start),
+              lastSegment.text,
-            end: parseFloat(lastSeg.end),
+              lastSegment.completed ?? false, // Last segment is typically incomplete unless marked otherwise
-          });
+              {
+                start: parseFloat(lastSegment.start),
+                end: parseFloat(lastSegment.end)
+              }
+            );
+          }
         }
       };
     } catch (error) {
@@ -139,21 +146,19 @@ export class TranscriptionService {
     }
 
     try {
-      // Request 16 kHz from the browser — it resamples natively so we send
+      this.audioContext = new AudioContext();
-      // the correct rate to the server without any JS resampling overhead.
-      this.audioContext = new AudioContext({ sampleRate: 16000 });
       
+      // Load and register the audio worklet
       await this.audioContext.audioWorklet.addModule('/audioWorklet.js');
       
       this.mediaStreamSource = this.audioContext.createMediaStreamSource(this.stream);
       this.workletNode = new AudioWorkletNode(this.audioContext, 'audio-processor');
 
-      // The worklet accumulates 4096 samples (256 ms at 16 kHz) before posting,
+      // Handle audio data from the worklet
-      // matching the reference frontend chunk size and eliminating the tiny-frame
-      // flood that was overwhelming the server during silence.
       this.workletNode.port.onmessage = (event) => {
         if (this.socket?.readyState === WebSocket.OPEN) {
-          this.socket.send(event.data); // event.data is a transferred ArrayBuffer
+          const resampledData = this.resampleTo16kHZ(event.data, this.audioContext!.sampleRate);
+          this.socket.send(resampledData);
         }
       };
 
@@ -164,16 +169,27 @@ export class TranscriptionService {
     }
   }
 
-  stopTranscription() {
+  private resampleTo16kHZ(audioData: Float32Array, origSampleRate: number): Float32Array {
-    // Signal the server cleanly so it can finalise the last segment.
+    const ratio = origSampleRate / 16000;
-    if (this.socket?.readyState === WebSocket.OPEN) {
+    const newLength = Math.round(audioData.length / ratio);
-      this.socket.send('END_OF_AUDIO');
+    const result = new Float32Array(newLength);
+    
+    for (let i = 0; i < newLength; i++) {
+      const pos = i * ratio;
+      const leftPos = Math.floor(pos);
+      const rightPos = Math.ceil(pos);
+      const weight = pos - leftPos;
+      result[i] = audioData[leftPos] * (1 - weight) + (audioData[rightPos] || 0) * weight;
     }
+    
+    return result;
+  }
+
+  stopTranscription() {
     this.cleanup();
   }
 
   private cleanup() {
-    this.finalizedSegmentCount = 0;
     if (this.workletNode) {
       this.workletNode.disconnect();
       this.workletNode = null;

src/utils/tldraw/ui-overrides/components/shared/CCTranscriptionPanel.tsx

@@ -365,7 +365,7 @@ export const CCTranscriptionPanel: React.FC = () => {
                 fontSize: "14px",
                 fontWeight: 600,
                 color: "#fff",
-                backgroundColor: isRecording ? "#ef4444" : "#2563eb",
+                backgroundColor: isRecording ? "#ef4444" : "var(--color-text)",
                 transition: "background-color 200ms ease",
               }}
             >
@@ -538,7 +538,7 @@ export const CCTranscriptionPanel: React.FC = () => {
                 key={"completed-" + i}
                 style={{
                   padding: "8px 10px",
-                  backgroundColor: "var(--color-muted)",
+                  backgroundColor: "#fff",
                   borderRadius: "4px",
                   border: "1px solid var(--color-divider)",
                   fontSize: "13px",
@@ -614,7 +614,7 @@ export const CCTranscriptionPanel: React.FC = () => {
                   key={session.id}
                   style={{
                     padding: "10px",
-                    backgroundColor: "var(--color-muted)",
+                    backgroundColor: "#fff",
                     borderRadius: "4px",
                     border: "1px solid var(--color-divider)",
                   }}
@@ -694,7 +694,7 @@ export const CCTranscriptionPanel: React.FC = () => {
                   padding: "6px 10px",
                   border: "none",
                   borderRadius: "4px",
-                  backgroundColor: newKeyword.trim() ? "#2563eb" : "var(--color-divider)",
+                  backgroundColor: newKeyword.trim() ? "var(--color-text)" : "var(--color-divider)",
                   color: "#fff",
                   cursor: newKeyword.trim() ? "pointer" : "not-allowed",
                   fontSize: "13px",
@@ -722,7 +722,7 @@ export const CCTranscriptionPanel: React.FC = () => {
                     alignItems: "center",
                     justifyContent: "space-between",
                     padding: "6px 10px",
-                    backgroundColor: "var(--color-muted)",
+                    backgroundColor: "#fff",
                     borderRadius: "4px",
                     border: "1px solid var(--color-divider)",
                   }}