generate API token in frontend page

src/views/desktop/user/settings/dialogs/UserGenerateMCPTokenDialog.vue

@@ -1,170 +0,0 @@
-<template>
-    <v-dialog width="800" :persistent="true" v-model="showState">
-        <v-card class="pa-2 pa-sm-4 pa-md-4">
-            <template #title>
-                <div class="d-flex align-center justify-center">
-                    <h4 class="text-h4">{{ tt('Generate MCP token') }}</h4>
-                </div>
-            </template>
-
-            <v-card-text class="py-0 w-100 d-flex justify-center" v-if="generatedToken && serverUrl">
-                <v-switch class="bidirectional-switch" color="secondary"
-                          :label="tt('Configuration')"
-                          v-model="showConfiguration"
-                          @click="showConfiguration = !showConfiguration">
-                    <template #prepend>
-                        <span>{{ tt('Token') }}</span>
-                    </template>
-                </v-switch>
-            </v-card-text>
-
-            <v-card-text class="mt-md-4 w-100 d-flex justify-center">
-                <div class="w-100" v-if="!generatedToken">
-                    <v-text-field
-                        autocomplete="current-password"
-                        type="password"
-                        :autofocus="true"
-                        :disabled="generating"
-                        :label="tt('Current Password')"
-                        :placeholder="tt('Current Password')"
-                        v-model="currentPassword"
-                        @keyup.enter="generateToken"
-                    />
-                </div>
-                <div class="w-100 code-container" v-if="generatedToken">
-                    <v-textarea class="w-100 always-cursor-text" :readonly="true"
-                                :rows="4" :value="generatedToken" v-if="!showConfiguration || !serverUrl" />
-                    <v-textarea class="w-100 always-cursor-text" :readonly="true"
-                                :rows="15" :value="mcpServerConfiguration" v-if="showConfiguration && serverUrl" />
-                </div>
-            </v-card-text>
-
-            <v-card-text class="w-100">
-                <v-alert type="warning" variant="tonal">
-                    {{ tt('Your MCP token does not expire, please keep it secure. When connecting to third-party apps, be aware that they and any large language models they use can access your private data.') }}
-                </v-alert>
-            </v-card-text>
-
-            <v-card-text class="overflow-y-visible">
-                <div ref="buttonContainer" class="w-100 d-flex justify-center gap-4">
-                    <v-btn :disabled="generating || !currentPassword" @click="generateToken" v-if="!generatedToken">
-                        {{ tt('Generate') }}
-                        <v-progress-circular indeterminate size="22" class="ms-2" v-if="generating"></v-progress-circular>
-                    </v-btn>
-                    <v-btn color="secondary" variant="tonal" :disabled="generating"
-                           @click="cancel" v-if="!generatedToken">{{ tt('Cancel') }}</v-btn>
-                    <v-btn variant="tonal" @click="copy" v-if="generatedToken">{{ tt('Copy') }}</v-btn>
-                    <v-btn color="secondary" variant="tonal" @click="close" v-if="generatedToken">{{ tt('Close') }}</v-btn>
-                </div>
-            </v-card-text>
-        </v-card>
-    </v-dialog>
-
-    <snack-bar ref="snackbar" />
-</template>
-
-<script setup lang="ts">
-import SnackBar from '@/components/desktop/SnackBar.vue';
-
-import { ref, computed, useTemplateRef } from 'vue';
-
-import { useI18n } from '@/locales/helpers.ts';
-
-import { useTokensStore } from '@/stores/token.ts';
-
-import { copyTextToClipboard } from '@/lib/ui/common.ts';
-
-type SnackBarType = InstanceType<typeof SnackBar>;
-
-const { tt } = useI18n();
-
-const tokensStore = useTokensStore();
-
-const buttonContainer = useTemplateRef<HTMLElement>('buttonContainer');
-const snackbar = useTemplateRef<SnackBarType>('snackbar');
-
-let resolveFunc: (() => void) | null = null;
-let rejectFunc: ((reason?: unknown) => void) | null = null;
-
-const showState = ref<boolean>(false);
-const currentPassword = ref<string>('');
-const generating = ref<boolean>(false);
-const showConfiguration = ref<boolean>(false);
-const serverUrl = ref<string>('');
-const generatedToken = ref<string>('');
-
-const mcpServerConfiguration = computed<string>(() => {
-    return '{\n' +
-        '    "mcpServers": {\n' +
-        '        "ezbookkeeping-mcp": {\n' +
-        '            "type": "streamable-http",\n' +
-        '            "url": "' + serverUrl.value + '",\n' +
-        '            "headers": {\n' +
-        '                "Authorization": "Bearer ' + generatedToken.value + '"\n' +
-        '            }\n' +
-        '        }\n' +
-        '    }\n' +
-        '}'
-});
-
-function open(): Promise<void> {
-    showState.value = true;
-    currentPassword.value = '';
-    generating.value = false;
-    showConfiguration.value = false;
-    serverUrl.value = '';
-    generatedToken.value = '';
-
-    return new Promise((resolve, reject) => {
-        resolveFunc = resolve;
-        rejectFunc = reject;
-    });
-}
-
-function generateToken(): void {
-    if (generating.value || !currentPassword.value) {
-        return;
-    }
-
-    generating.value = true;
-
-    tokensStore.generateMCPToken({
-        password: currentPassword.value
-    }).then(result => {
-        generating.value = false;
-        currentPassword.value = '';
-        serverUrl.value = result.mcpUrl;
-        generatedToken.value = result.token;
-    }).catch(error => {
-        generating.value = false;
-
-        if (!error.processed) {
-            snackbar.value?.showError(error);
-        }
-    });
-}
-
-function copy(): void {
-    if (showConfiguration.value) {
-        copyTextToClipboard(mcpServerConfiguration.value, buttonContainer.value);
-    } else {
-        copyTextToClipboard(generatedToken.value, buttonContainer.value);
-    }
-
-    snackbar.value?.showMessage('Data copied');
-}
-
-function cancel(): void {
-    rejectFunc?.();
-    showState.value = false;
-}
-
-function close(): void {
-    resolveFunc?.();
-    showState.value = false;
-}
-
-defineExpose({
-    open
-});
-</script>

src/views/desktop/user/settings/dialogs/UserGenerateTokenDialog.vue

@@ -0,0 +1,248 @@
+<template>
+    <v-dialog width="800" :persistent="true" v-model="showState">
+        <v-card class="pa-2 pa-sm-4 pa-md-4">
+            <template #title>
+                <div class="d-flex align-center justify-center">
+                    <h4 class="text-h4">{{ tt('Generate Token') }}</h4>
+                </div>
+            </template>
+
+            <v-card-text class="py-0 w-100 d-flex justify-center" v-if="tokenType === 'mcp' && generatedToken && serverUrl">
+                <v-switch class="bidirectional-switch" color="secondary"
+                          :label="tt('Configuration')"
+                          v-model="showMCPConfiguration"
+                          @click="showMCPConfiguration = !showMCPConfiguration">
+                    <template #prepend>
+                        <span>{{ tt('Token') }}</span>
+                    </template>
+                </v-switch>
+            </v-card-text>
+
+            <v-card-text class="mt-md-4 w-100 d-flex justify-center">
+                <div class="w-100" v-if="!generatedToken">
+                    <v-row>
+                        <v-col cols="12" md="12">
+                            <v-select
+                                item-title="name"
+                                item-value="value"
+                                :disabled="generating"
+                                :label="tt('Token Type')"
+                                :placeholder="tt('Token Type')"
+                                :items="tokenTypeOptions"
+                                v-model="tokenType"
+                            />
+                        </v-col>
+                        <v-col cols="12" :md="tokenExpirationTime >= 0 ? 12 : 6">
+                            <v-select
+                                item-title="displayName"
+                                item-value="value"
+                                :disabled="generating"
+                                :label="tt('Expiration Time (Seconds)')"
+                                :placeholder="tt('Expiration Time (Seconds)')"
+                                :items="[
+                                    { displayName: tt('No Expiration'), value: 0 },
+                                    { displayName: tt('format.misc.nHour', { n: 1 }), value: 3600 },
+                                    { displayName: tt('format.misc.nDays', { n: 1 }), value: 86400 },
+                                    { displayName: tt('format.misc.nDays', { n: 7 }), value: 604800 },
+                                    { displayName: tt('format.misc.nDays', { n: 30 }), value: 2592000 },
+                                    { displayName: tt('format.misc.nDays', { n: 90 }), value: 7776000 },
+                                    { displayName: tt('format.misc.nDays', { n: 180 }), value: 15552000 },
+                                    { displayName: tt('format.misc.nDays', { n: 365 }), value: 31536000 },
+                                    { displayName: tt('Custom'), value: -1 }
+                                ]"
+                                v-model="tokenExpirationTime"
+                            />
+                        </v-col>
+                        <v-col cols="12" md="6" v-if="tokenExpirationTime < 0">
+                            <v-text-field
+                                type="number"
+                                persistent-placeholder
+                                :disabled="generating"
+                                :label="tt('Custom Expiration Time (Seconds)')"
+                                :placeholder="tt('Custom Expiration Time (Seconds)')"
+                                v-model.number="tokenCustomExpirationTime"
+                            />
+                        </v-col>
+                        <v-col cols="12" md="12">
+                            <v-text-field
+                                autocomplete="current-password"
+                                type="password"
+                                persistent-placeholder
+                                :autofocus="true"
+                                :disabled="generating"
+                                :label="tt('Current Password')"
+                                :placeholder="tt('Current Password')"
+                                v-model="currentPassword"
+                                @keyup.enter="generateToken"
+                            />
+                        </v-col>
+                    </v-row>
+                </div>
+                <div class="w-100 code-container" v-if="generatedToken">
+                    <v-textarea class="w-100 always-cursor-text" :readonly="true"
+                                :rows="4" :value="generatedToken" v-if="!showMCPConfiguration || !serverUrl" />
+                    <v-textarea class="w-100 always-cursor-text" :readonly="true"
+                                :rows="15" :value="mcpServerConfiguration" v-if="showMCPConfiguration && serverUrl" />
+                </div>
+            </v-card-text>
+
+            <v-card-text class="w-100" v-if="(tokenExpirationTime === 0 || (tokenExpirationTime < 0 && tokenCustomExpirationTime === 0)) || tokenType === 'mcp'">
+                <v-alert type="warning" variant="tonal">
+                    <span v-if="tokenExpirationTime === 0 || (tokenExpirationTime < 0 && tokenCustomExpirationTime === 0)">{{ tt('Your token does not expire, please keep it secure.') }}</span>
+                    <span v-if="tokenType === 'mcp'">{{ tt('When connecting to third-party apps, be aware that they and any large language models they use can access your private data.') }}</span>
+                </v-alert>
+            </v-card-text>
+
+            <v-card-text class="overflow-y-visible">
+                <div ref="buttonContainer" class="w-100 d-flex justify-center gap-4">
+                    <v-btn :disabled="generating || !currentPassword" @click="generateToken" v-if="!generatedToken">
+                        {{ tt('Generate') }}
+                        <v-progress-circular indeterminate size="22" class="ms-2" v-if="generating"></v-progress-circular>
+                    </v-btn>
+                    <v-btn color="secondary" variant="tonal" :disabled="generating"
+                           @click="cancel" v-if="!generatedToken">{{ tt('Cancel') }}</v-btn>
+                    <v-btn variant="tonal" @click="copy" v-if="generatedToken">{{ tt('Copy') }}</v-btn>
+                    <v-btn color="secondary" variant="tonal" @click="close" v-if="generatedToken">{{ tt('Close') }}</v-btn>
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+
+    <snack-bar ref="snackbar" />
+</template>
+
+<script setup lang="ts">
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, computed, useTemplateRef } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useTokensStore } from '@/stores/token.ts';
+
+import { type NameValue } from '@/core/base.ts';
+import { type TokenGenerateMCPResponse } from '@/models/token.ts';
+
+import { isGenerateAPITokenEnabled, isMCPServerEnabled } from '@/lib/server_settings.ts';
+import { copyTextToClipboard } from '@/lib/ui/common.ts';
+
+type SnackBarType = InstanceType<typeof SnackBar>;
+
+const { tt } = useI18n();
+
+const tokensStore = useTokensStore();
+
+const buttonContainer = useTemplateRef<HTMLElement>('buttonContainer');
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+
+let resolveFunc: (() => void) | null = null;
+let rejectFunc: ((reason?: unknown) => void) | null = null;
+
+const showState = ref<boolean>(false);
+const tokenType = ref<'api' | 'mcp'>(isGenerateAPITokenEnabled() ? 'api' : (isMCPServerEnabled() ? 'mcp' : 'api'));
+const tokenExpirationTime = ref<number>(86400);
+const tokenCustomExpirationTime = ref<number>(86400);
+const currentPassword = ref<string>('');
+const generating = ref<boolean>(false);
+const showMCPConfiguration = ref<boolean>(false);
+const serverUrl = ref<string>('');
+const generatedToken = ref<string>('');
+
+const tokenTypeOptions = computed<NameValue[]>(() => {
+    const options: NameValue[] = [];
+
+    if (isGenerateAPITokenEnabled()) {
+        options.push({ name: tt('API Token'), value: 'api' });
+    }
+
+    if (isMCPServerEnabled()) {
+        options.push({ name: tt('MCP Token'), value: 'mcp' });
+    }
+
+    return options;
+});
+
+const mcpServerConfiguration = computed<string>(() => {
+    return '{\n' +
+        '    "mcpServers": {\n' +
+        '        "ezbookkeeping-mcp": {\n' +
+        '            "type": "streamable-http",\n' +
+        '            "url": "' + serverUrl.value + '",\n' +
+        '            "headers": {\n' +
+        '                "Authorization": "Bearer ' + generatedToken.value + '"\n' +
+        '            }\n' +
+        '        }\n' +
+        '    }\n' +
+        '}'
+});
+
+function open(): Promise<void> {
+    showState.value = true;
+    currentPassword.value = '';
+    tokenType.value = isGenerateAPITokenEnabled() ? 'api' : (isMCPServerEnabled() ? 'mcp' : 'api');
+    tokenExpirationTime.value = 86400;
+    tokenCustomExpirationTime.value = 86400;
+    generating.value = false;
+    showMCPConfiguration.value = false;
+    serverUrl.value = '';
+    generatedToken.value = '';
+
+    return new Promise((resolve, reject) => {
+        resolveFunc = resolve;
+        rejectFunc = reject;
+    });
+}
+
+function generateToken(): void {
+    if (generating.value || !currentPassword.value) {
+        return;
+    }
+
+    generating.value = true;
+
+    tokensStore.generateToken({
+        type: tokenType.value,
+        expiresInSeconds: tokenExpirationTime.value >= 0 ? tokenExpirationTime.value : tokenCustomExpirationTime.value,
+        password: currentPassword.value
+    }).then(result => {
+        generating.value = false;
+        currentPassword.value = '';
+
+        if (tokenType.value === 'mcp') {
+            serverUrl.value = (result as TokenGenerateMCPResponse).mcpUrl;
+        }
+
+        generatedToken.value = result.token;
+    }).catch(error => {
+        generating.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function copy(): void {
+    if (showMCPConfiguration.value) {
+        copyTextToClipboard(mcpServerConfiguration.value, buttonContainer.value);
+    } else {
+        copyTextToClipboard(generatedToken.value, buttonContainer.value);
+    }
+
+    snackbar.value?.showMessage('Data copied');
+}
+
+function cancel(): void {
+    rejectFunc?.();
+    showState.value = false;
+}
+
+function close(): void {
+    resolveFunc?.();
+    showState.value = false;
+}
+
+defineExpose({
+    open
+});
+</script>

src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue

@@ -132,7 +132,7 @@
                     <div class="d-flex align-center">
                         <span>{{ tt('Device & Sessions') }}</span>
                         <v-btn class="ms-3" density="compact" color="default" variant="outlined"
-                               @click="generateMCPToken" v-if="isMCPServerEnabled()">{{ tt('Generate MCP token') }}</v-btn>
+                               @click="generateToken" v-if="isGenerateAPITokenEnabled() || isMCPServerEnabled()">{{ tt('Generate Token') }}</v-btn>
                         <v-btn density="compact" color="default" variant="text" size="24"
                                class="ms-2" :icon="true" :loading="loadingSession" @click="reloadSessions(false)">
                             <template #loader>
@@ -171,7 +171,7 @@
                         v-for="session in sessions">
                         <td class="text-sm">
                             <v-icon start :icon="session.icon"/>
-                            {{ session.deviceType === 'mcp' ? 'MCP' : (tt(session.isCurrent ? 'Current' : 'Other Device')) }}
+                            {{ tt(session.deviceName) }}
                         </td>
                         <td class="text-sm">{{ session.deviceInfo }}</td>
                         <td class="text-sm">{{ session.lastSeenDateTime }}</td>
@@ -190,7 +190,7 @@
     </v-row>
 
     <unlink-third-party-login-dialog ref="unlinkThirdPartyLoginDialog" />
-    <user-generate-m-c-p-token-dialog ref="generateMCPTokenDialog" />
+    <user-generate-token-dialog ref="generateTokenDialog" />
     <confirm-dialog ref="confirmDialog"/>
     <snack-bar ref="snackbar" />
 </template>
@@ -198,7 +198,7 @@
 <script setup lang="ts">
 import { VTextField } from 'vuetify/components/VTextField';
 import UnlinkThirdPartyLoginDialog from '@/views/desktop/user/settings/dialogs/UnlinkThirdPartyLoginDialog.vue';
-import UserGenerateMCPTokenDialog from '@/views/desktop/user/settings/dialogs/UserGenerateMCPTokenDialog.vue';
+import UserGenerateTokenDialog from '@/views/desktop/user/settings/dialogs/UserGenerateTokenDialog.vue';
 import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
 import SnackBar from '@/components/desktop/SnackBar.vue';
 
@@ -213,11 +213,17 @@ import { useTokensStore } from '@/stores/token.ts';
 
 import { itemAndIndex, reversedItemAndIndex } from '@/core/base.ts';
 import { type UserExternalAuthInfoResponse } from '@/models/user_external_auth.ts';
-import { type TokenInfoResponse, SessionInfo } from '@/models/token.ts';
+import { type TokenInfoResponse, SessionDeviceType, SessionInfo } from '@/models/token.ts';
 
 import { isEquals } from '@/lib/common.ts';
 import { parseSessionInfo } from '@/lib/session.ts';
-import { isOAuth2Enabled, getOAuth2Provider, getOIDCCustomDisplayNames, isMCPServerEnabled } from '@/lib/server_settings.ts';
+import {
+    isGenerateAPITokenEnabled,
+    isOAuth2Enabled,
+    getOAuth2Provider,
+    getOIDCCustomDisplayNames,
+    isMCPServerEnabled
+} from '@/lib/server_settings.ts';
 import { generateRandomUUID } from '@/lib/misc.ts';
 
 import {
@@ -228,8 +234,8 @@ import {
     mdiTablet,
     mdiWatch,
     mdiTelevision,
-    mdiCreationOutline,
     mdiConsole,
+    mdiCreationOutline,
     mdiDevices
 } from '@mdi/js';
 
@@ -267,24 +273,24 @@ class DesktopPageSessionInfo extends SessionInfo {
     public readonly lastSeenDateTime: string;
 
     public constructor(sessionInfo: SessionInfo) {
-        super(sessionInfo.tokenId, sessionInfo.isCurrent, sessionInfo.deviceType, sessionInfo.deviceInfo, sessionInfo.createdByCli, sessionInfo.lastSeen);
+        super(sessionInfo.tokenId, sessionInfo.isCurrent, sessionInfo.deviceType, sessionInfo.deviceInfo, sessionInfo.deviceName, sessionInfo.lastSeen);
         this.icon = this.getTokenIcon(sessionInfo.deviceType);
         this.lastSeenDateTime = sessionInfo.lastSeen ? formatUnixTimeToLongDateTime(sessionInfo.lastSeen) : '-';
     }
 
-    private getTokenIcon(deviceType: string): string {
-        if (deviceType === 'phone') {
+    private getTokenIcon(deviceType: SessionDeviceType): string {
+        if (deviceType === SessionDeviceType.Phone) {
             return mdiCellphone;
-        } else if (deviceType === 'wearable') {
+        } else if (deviceType === SessionDeviceType.Wearable) {
             return mdiWatch;
-        } else if (deviceType === 'tablet') {
+        } else if (deviceType === SessionDeviceType.Tablet) {
             return mdiTablet;
-        } else if (deviceType === 'tv') {
+        } else if (deviceType === SessionDeviceType.TV) {
             return mdiTelevision;
-        } else if (deviceType === 'mcp') {
-            return mdiCreationOutline;
-        } else if (deviceType === 'cli') {
+        } else if (deviceType === SessionDeviceType.Api) {
             return mdiConsole;
+        } else if (deviceType === SessionDeviceType.MCP) {
+            return mdiCreationOutline;
         } else {
             return mdiDevices;
         }
@@ -292,7 +298,7 @@ class DesktopPageSessionInfo extends SessionInfo {
 }
 
 type UnlinkThirdPartyLoginDialogType = InstanceType<typeof UnlinkThirdPartyLoginDialog>;
-type UserGenerateMCPTokenDialogType = InstanceType<typeof UserGenerateMCPTokenDialog>;
+type UserGenerateTokenDialogType = InstanceType<typeof UserGenerateTokenDialog>;
 type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
 type SnackBarType = InstanceType<typeof SnackBar>;
 
@@ -311,7 +317,7 @@ const tokensStore = useTokensStore();
 const newPasswordInput = useTemplateRef<VTextField>('newPasswordInput');
 const confirmPasswordInput = useTemplateRef<VTextField>('confirmPasswordInput');
 const unlinkThirdPartyLoginDialog = useTemplateRef<UnlinkThirdPartyLoginDialogType>('unlinkThirdPartyLoginDialog');
-const generateMCPTokenDialog = useTemplateRef<UserGenerateMCPTokenDialogType>('generateMCPTokenDialog');
+const generateTokenDialog = useTemplateRef<UserGenerateTokenDialogType>('generateTokenDialog');
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
@@ -450,8 +456,8 @@ function unlinkExternalAuth(thirdPartyLogin: DesktopPageLinkedThirdPartyLogin):
     });
 }
 
-function generateMCPToken(): void {
-    generateMCPTokenDialog.value?.open().then(() => {
+function generateToken(): void {
+    generateTokenDialog.value?.open().then(() => {
         reloadSessions(true);
     });
 }

src/views/mobile/users/SessionListPage.vue

@@ -24,7 +24,7 @@
         <f7-list strong inset dividers media-list class="margin-top" v-else-if="!loading">
             <f7-list-item class="list-item-media-valign-middle" swipeout
                           :id="session.domId"
-                          :title="session.deviceType === 'mcp' ? 'MCP' : (tt(session.isCurrent ? 'Current' : 'Other Device'))"
+                          :title="tt(session.deviceName)"
                           :text="session.deviceInfo"
                           :key="session.tokenId"
                           v-for="session in sessions">
@@ -55,7 +55,7 @@ import { useTokensStore } from '@/stores/token.ts';
 
 import { itemAndIndex, reversedItemAndIndex } from '@/core/base.ts';
 import { TextDirection } from '@/core/text.ts';
-import { type TokenInfoResponse, SessionInfo } from '@/models/token.ts';
+import { type TokenInfoResponse, SessionDeviceType, SessionInfo } from '@/models/token.ts';
 
 import { isEquals } from '@/lib/common.ts';
 import { parseSessionInfo } from '@/lib/session.ts';
@@ -66,7 +66,7 @@ class MobilePageSessionInfo extends SessionInfo {
     public readonly lastSeenDateTime: string;
 
     public constructor(sessionInfo: SessionInfo) {
-        super(sessionInfo.tokenId, sessionInfo.isCurrent, sessionInfo.deviceType, sessionInfo.deviceInfo, sessionInfo.createdByCli, sessionInfo.lastSeen);
+        super(sessionInfo.tokenId, sessionInfo.isCurrent, sessionInfo.deviceType, sessionInfo.deviceInfo, sessionInfo.deviceName, sessionInfo.lastSeen);
         this.domId = getTokenDomId(sessionInfo.tokenId);
         this.icon = getTokenIcon(sessionInfo.deviceType);
         this.lastSeenDateTime = sessionInfo.lastSeen ? formatUnixTimeToLongDateTime(sessionInfo.lastSeen) : '-';
@@ -103,19 +103,19 @@ const sessions = computed<MobilePageSessionInfo[]>(() => {
     return sessions;
 });
 
-function getTokenIcon(deviceType: string): string {
-    if (deviceType === 'phone') {
+function getTokenIcon(deviceType: SessionDeviceType): string {
+    if (deviceType === SessionDeviceType.Phone) {
         return 'device_phone_portrait';
-    } else if (deviceType === 'wearable') {
+    } else if (deviceType === SessionDeviceType.Wearable) {
         return 'device_phone_portrait';
-    } else if (deviceType === 'tablet') {
+    } else if (deviceType === SessionDeviceType.Tablet) {
         return 'device_tablet_portrait';
-    } else if (deviceType === 'tv') {
+    } else if (deviceType === SessionDeviceType.TV) {
         return 'tv';
-    } else if (deviceType === 'mcp') {
-        return 'sparkles';
-    } else if (deviceType === 'cli') {
+    } else if (deviceType === SessionDeviceType.Api) {
         return 'chevron_left_slash_chevron_right';
+    } else if (deviceType === SessionDeviceType.MCP) {
+        return 'sparkles';
     } else {
         return 'device_desktop';
     }