@codori/client 0.0.3 → 0.0.5

package/app/components/ChatWorkspace.vue

@@ -16,10 +16,13 @@ import { useProjects } from '../composables/useProjects'
 import { useRpc } from '../composables/useRpc'
 import { useChatSubmitGuard } from '../composables/useChatSubmitGuard'
 import {
+  hideThinkingPlaceholder,
   ITEM_PART,
   eventToMessage,
   isSubagentActiveStatus,
   itemToMessages,
+  replaceStreamingMessage,
+  showThinkingPlaceholder,
   threadToMessages,
   upsertStreamingMessage,
   type ChatMessage,
@@ -54,6 +57,7 @@ import {
   normalizeThreadTokenUsage,
   resolveContextWindowState,
   resolveEffortOptions,
+  shouldShowContextWindowIndicator,
   visibleModelOptions,
   type ReasoningEffort
 } from '~~/shared/chat-prompt-controls'
@@ -171,7 +175,6 @@ const starterPrompts = computed(() => {
   ]
 })
 
-const hasKnownThreadUsage = computed(() => !activeThreadId.value || tokenUsage.value !== null)
 const effectiveModelList = computed(() => {
   const withSelected = ensureModelOption(
     availableModels.value.length > 0 ? availableModels.value : FALLBACK_MODELS,
@@ -199,8 +202,9 @@ const effortSelectItems = computed(() =>
   }))
 )
 const contextWindowState = computed(() =>
-  resolveContextWindowState(tokenUsage.value, modelContextWindow.value, hasKnownThreadUsage.value)
+  resolveContextWindowState(tokenUsage.value, modelContextWindow.value)
 )
+const showContextIndicator = computed(() => shouldShowContextWindowIndicator(contextWindowState.value))
 const contextUsedPercent = computed(() => contextWindowState.value.usedPercent ?? 0)
 const contextIndicatorLabel = computed(() => {
   const remainingPercent = contextWindowState.value.remainingPercent
@@ -505,6 +509,20 @@ const removeOptimisticMessage = (messageId: string) => {
   optimisticAttachmentSnapshots.delete(messageId)
 }
 
+const clearThinkingPlaceholder = () => {
+  messages.value = hideThinkingPlaceholder(messages.value)
+}
+
+const ensureThinkingPlaceholder = () => {
+  messages.value = showThinkingPlaceholder(messages.value)
+}
+
+const clearThinkingPlaceholderForVisibleItem = (item: CodexThreadItem) => {
+  if (item.type !== 'userMessage') {
+    clearThinkingPlaceholder()
+  }
+}
+
 const restoreDraftIfPristine = (text: string, submittedAttachments: DraftAttachment[]) => {
   if (!input.value.trim()) {
     input.value = text
@@ -1231,7 +1249,7 @@ const applySubagentNotification = (threadId: string, notification: CodexRpcNotif
       }
       for (const nextMessage of itemToMessages(params.item)) {
         updateSubagentPanelMessages(threadId, (panelMessages) =>
-          upsertStreamingMessage(panelMessages, {
+          replaceStreamingMessage(panelMessages, {
             ...nextMessage,
             pending: false
           })
@@ -1433,6 +1451,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
         status.value = 'streaming'
         return
       }
+      clearThinkingPlaceholderForVisibleItem(params.item)
       seedStreamingMessage(params.item)
       status.value = 'streaming'
       return
@@ -1442,6 +1461,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
       if (params.item.type === 'collabAgentToolCall') {
         applySubagentActivityItem(params.item)
       }
+      clearThinkingPlaceholderForVisibleItem(params.item)
       for (const nextMessage of itemToMessages(params.item)) {
         const confirmedMessage = {
           ...nextMessage,
@@ -1452,12 +1472,13 @@ const applyNotification = (notification: CodexRpcNotification) => {
           continue
         }
 
-        messages.value = upsertStreamingMessage(messages.value, confirmedMessage)
+        messages.value = replaceStreamingMessage(messages.value, confirmedMessage)
       }
       return
     }
     case 'item/agentMessage/delta': {
       const params = notification.params as { itemId: string, delta: string }
+      clearThinkingPlaceholder()
       appendTextPartDelta(params.itemId, params.delta, {
         id: params.itemId,
         role: 'assistant',
@@ -1473,6 +1494,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
     }
     case 'item/plan/delta': {
       const params = notification.params as { itemId: string, delta: string }
+      clearThinkingPlaceholder()
       appendTextPartDelta(params.itemId, params.delta, {
         id: params.itemId,
         role: 'assistant',
@@ -1489,6 +1511,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
     case 'item/reasoning/textDelta':
     case 'item/reasoning/summaryTextDelta': {
       const params = notification.params as { itemId: string, delta: string }
+      clearThinkingPlaceholder()
       updateMessage(params.itemId, {
         id: params.itemId,
         role: 'assistant',
@@ -1596,6 +1619,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
     case 'error': {
       const params = notification.params as { error?: { message?: string } }
       const messageText = params.error?.message ?? 'The stream failed.'
+      clearThinkingPlaceholder()
       pushEventMessage('stream.error', messageText)
       clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
       clearLiveStream(new Error(messageText))
@@ -1606,6 +1630,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
     case 'turn/failed': {
       const params = notification.params as { error?: { message?: string } }
       const messageText = params.error?.message ?? 'The turn failed.'
+      clearThinkingPlaceholder()
       pushEventMessage('turn.failed', messageText)
       clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
       clearLiveStream(new Error(messageText))
@@ -1616,6 +1641,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
     case 'stream/error': {
       const params = notification.params as { message?: string }
       const messageText = params.message ?? 'The stream failed.'
+      clearThinkingPlaceholder()
       pushEventMessage('stream.error', messageText)
       clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
       clearLiveStream(new Error(messageText))
@@ -1624,6 +1650,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
       return
     }
     case 'turn/completed': {
+      clearThinkingPlaceholder()
       clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
       error.value = null
       status.value = 'ready'
@@ -1664,6 +1691,7 @@ const sendMessage = async () => {
   const optimisticMessageId = optimisticMessage.id
   rememberOptimisticAttachments(optimisticMessageId, submittedAttachments)
   messages.value = [...messages.value, optimisticMessage]
+  ensureThinkingPlaceholder()
   let startedLiveStream: LiveStream | null = null
 
   try {
@@ -1681,6 +1709,7 @@ const sendMessage = async () => {
         input: buildTurnStartInput(text, uploadedAttachments),
         ...buildTurnOverrides(selectedModel.value, selectedEffort.value)
       })
+      tokenUsage.value = null
       return
     }
 
@@ -1698,6 +1727,7 @@ const sendMessage = async () => {
       ...buildTurnOverrides(selectedModel.value, selectedEffort.value)
     })
 
+    tokenUsage.value = null
     setLiveStreamTurnId(liveStream, turnStart.turn.id)
 
     for (const notification of liveStream.bufferedNotifications.splice(0, liveStream.bufferedNotifications.length)) {
@@ -1711,6 +1741,7 @@ const sendMessage = async () => {
   } catch (caughtError) {
     const messageText = caughtError instanceof Error ? caughtError.message : String(caughtError)
 
+    clearThinkingPlaceholder()
     untrackPendingUserMessage(optimisticMessageId)
     removeOptimisticMessage(optimisticMessageId)
 
@@ -1932,7 +1963,6 @@ watch([selectedModel, availableModels], () => {
 
     <div class="sticky bottom-0 shrink-0 border-t border-default bg-default/95 px-4 py-3 backdrop-blur md:px-6">
       <div class="mx-auto w-full max-w-5xl">
-        <TunnelNotice class="mb-3" />
         <UAlert
           v-if="composerError"
           color="error"
@@ -2062,6 +2092,7 @@ watch([selectedModel, availableModels], () => {
 
                 <div class="ml-auto flex shrink-0 items-center">
                   <UPopover
+                    v-if="showContextIndicator"
                     :content="{ side: 'top', align: 'end' }"
                     arrow
                   >
@@ -2101,8 +2132,6 @@ watch([selectedModel, availableModels], () => {
                           {{ contextIndicatorLabel }}
                         </span>
                       </span>
-
-                      <span class="text-[11px] leading-none text-muted">context window</span>
                     </button>
 
                     <template #content>
@@ -2116,10 +2145,7 @@ watch([selectedModel, availableModels], () => {
                           </div>
                         </div>
 
-                        <div
-                          v-if="contextWindowState.contextWindow && contextWindowState.usedTokens !== null"
-                          class="grid grid-cols-2 gap-3 text-sm"
-                        >
+                        <div class="grid grid-cols-2 gap-3 text-sm">
                           <div class="rounded-2xl border border-default bg-elevated/35 px-3 py-2">
                             <div class="text-[11px] uppercase tracking-[0.18em] text-muted">
                               Remaining
@@ -2139,23 +2165,11 @@ watch([selectedModel, availableModels], () => {
                               {{ formatCompactTokenCount(contextWindowState.usedTokens ?? 0) }}
                             </div>
                             <div class="text-xs text-muted">
-                              of {{ formatCompactTokenCount(contextWindowState.contextWindow) }}
+                              of {{ formatCompactTokenCount(contextWindowState.contextWindow ?? 0) }}
                             </div>
                           </div>
                         </div>
 
-                        <div
-                          v-else
-                          class="rounded-2xl border border-default bg-elevated/35 px-3 py-2 text-sm text-muted"
-                        >
-                          <div v-if="contextWindowState.contextWindow">
-                            Live token usage will appear after the next turn completes.
-                          </div>
-                          <div v-else>
-                            Context window details are not available from the runtime yet.
-                          </div>
-                        </div>
-
                         <div class="grid grid-cols-2 gap-3 text-sm">
                           <div class="rounded-2xl border border-default bg-elevated/35 px-3 py-2">
                             <div class="text-[11px] uppercase tracking-[0.18em] text-muted">

package/app/composables/useProjects.ts

@@ -6,6 +6,8 @@ import type {
   ProjectRecord,
   ProjectResponse,
   ProjectsResponse,
+  ServiceUpdateResponse,
+  ServiceUpdateStatus,
   StartProjectResult
 } from '~~/shared/codori'
 
@@ -16,8 +18,16 @@ const mergeProject = (projects: ProjectRecord[], nextProject: ProjectRecord) =>
 
 export const useProjects = () => {
   const projects = useState<ProjectRecord[]>('codori-projects', () => [])
+  const serviceUpdate = useState<ServiceUpdateStatus>('codori-service-update', () => ({
+    enabled: false,
+    updateAvailable: false,
+    updating: false,
+    installedVersion: null,
+    latestVersion: null
+  }))
   const loaded = useState<boolean>('codori-projects-loaded', () => false)
   const loading = useState<boolean>('codori-projects-loading', () => false)
+  const serviceUpdatePending = useState<boolean>('codori-service-update-pending', () => false)
   const pendingProjectId = useState<string | null>('codori-projects-pending-id', () => null)
   const error = useState<string | null>('codori-projects-error', () => null)
   const configuredBase = String(useRuntimeConfig().public.serverBase ?? '')
@@ -36,6 +46,14 @@ export const useProjects = () => {
     loading.value = true
     error.value = null
     try {
+      void $fetch<ServiceUpdateResponse>(toApiUrl('/service/update'))
+        .then((response) => {
+          serviceUpdate.value = response.serviceUpdate
+        })
+        .catch(() => {
+          // Keep project discovery responsive even if the update check stalls or fails.
+        })
+
       const response = await $fetch<ProjectsResponse>(toApiUrl('/projects'))
       projects.value = response.projects
       loaded.value = true
@@ -87,13 +105,37 @@ export const useProjects = () => {
     return projects.value.find((project: ProjectRecord) => project.projectId === projectId) ?? null
   }
 
+  const triggerServiceUpdate = async () => {
+    if (serviceUpdatePending.value || serviceUpdate.value.updating) {
+      return serviceUpdate.value
+    }
+
+    serviceUpdatePending.value = true
+    error.value = null
+    try {
+      const response = await $fetch<ServiceUpdateResponse>(toApiUrl('/service/update'), {
+        method: 'POST'
+      })
+      serviceUpdate.value = response.serviceUpdate
+      return response.serviceUpdate
+    } catch (caughtError) {
+      error.value = caughtError instanceof Error ? caughtError.message : String(caughtError)
+      return serviceUpdate.value
+    } finally {
+      serviceUpdatePending.value = false
+    }
+  }
+
   return {
     projects,
+    serviceUpdate,
     loaded,
     loading,
+    serviceUpdatePending,
     error,
     pendingProjectId,
     refreshProjects,
+    triggerServiceUpdate,
     startProject,
     stopProject,
     getProject

package/app/layouts/default.vue

@@ -1,7 +1,27 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { useProjects } from '../composables/useProjects'
 
 const sidebarCollapsed = ref(false)
+const { serviceUpdate, serviceUpdatePending, triggerServiceUpdate } = useProjects()
+
+const showServiceUpdateButton = computed(() =>
+  serviceUpdate.value.enabled && (serviceUpdate.value.updateAvailable || serviceUpdate.value.updating)
+)
+
+const serviceUpdateLabel = computed(() =>
+  serviceUpdate.value.updating ? 'Updating' : 'Update'
+)
+
+const serviceUpdateTooltip = computed(() => {
+  if (!serviceUpdate.value.latestVersion || !serviceUpdate.value.installedVersion) {
+    return serviceUpdate.value.updating ? 'Applying the latest server package update.' : 'Install the latest @codori/server package.'
+  }
+
+  return serviceUpdate.value.updating
+    ? `Updating @codori/server ${serviceUpdate.value.installedVersion} -> ${serviceUpdate.value.latestVersion}`
+    : `Update @codori/server ${serviceUpdate.value.installedVersion} -> ${serviceUpdate.value.latestVersion}`
+})
 
 const sidebarUi = computed(() =>
   sidebarCollapsed.value
@@ -46,13 +66,44 @@ const sidebarUi = computed(() =>
               class="size-5"
             />
           </div>
-          <div v-if="!collapsed">
-            <div class="text-sm font-semibold">
-              Codori
+          <div
+            v-if="!collapsed"
+            class="flex min-w-0 flex-1 items-start justify-between gap-3"
+          >
+            <div class="min-w-0">
+              <div class="text-sm font-semibold">
+                Codori
+              </div>
+              <div class="text-xs text-muted">
+                Codex project control
+              </div>
             </div>
-            <div class="text-xs text-muted">
+            <UTooltip
+              v-if="showServiceUpdateButton"
+              :text="serviceUpdateTooltip"
+            >
+              <UButton
+                color="neutral"
+                variant="outline"
+                size="xs"
+                :loading="serviceUpdatePending || serviceUpdate.updating"
+                :disabled="serviceUpdatePending || serviceUpdate.updating"
+                @click="triggerServiceUpdate"
+              >
+                {{ serviceUpdateLabel }}
+              </UButton>
+            </UTooltip>
+          </div>
+          <div
+            v-else-if="collapsed"
+            class="sr-only"
+          >
+            <span>
+              Codori
+            </span>
+            <span>
               Codex project control
-            </div>
+            </span>
           </div>
         </div>
       </template>

package/app/pages/index.vue

@@ -54,7 +54,6 @@
             </div>
           </div>
 
-          <TunnelNotice class="w-full text-left" />
         </div>
       </div>
     </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codori/client",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "private": false,
   "description": "Codori Nuxt dashboard for project browsing, Codex chat, and thread resume.",
   "type": "module",

package/server/api/codori/service/update.get.ts

@@ -0,0 +1,7 @@
+import { defineEventHandler } from 'h3'
+import type { ServiceUpdateResponse } from '~~/shared/codori'
+import { proxyServerRequest } from '../../../utils/server-proxy'
+
+export default defineEventHandler(async (event) =>
+  await proxyServerRequest<ServiceUpdateResponse>(event, '/api/service/update')
+)

package/server/api/codori/service/update.post.ts

@@ -0,0 +1,9 @@
+import { defineEventHandler } from 'h3'
+import type { ServiceUpdateResponse } from '~~/shared/codori'
+import { proxyServerRequest } from '../../../utils/server-proxy'
+
+export default defineEventHandler(async (event) =>
+  await proxyServerRequest<ServiceUpdateResponse>(event, '/api/service/update', {
+    method: 'POST'
+  })
+)

package/shared/chat-prompt-controls.ts

@@ -20,15 +20,26 @@ export type ModelOption = {
 }
 
 export type TokenUsageSnapshot = {
+  totalTokens: number | null
   totalInputTokens: number
   totalCachedInputTokens: number
   totalOutputTokens: number
+  lastUsageKnown: boolean
+  lastTotalTokens: number | null
   lastInputTokens: number
   lastCachedInputTokens: number
   lastOutputTokens: number
   modelContextWindow: number | null
 }
 
+export type ContextWindowState = {
+  contextWindow: number | null
+  usedTokens: number | null
+  remainingTokens: number | null
+  usedPercent: number | null
+  remainingPercent: number | null
+}
+
 type ReasoningEffortOptionRecord = {
   reasoningEffort?: unknown
 }
@@ -250,15 +261,18 @@ export const normalizeThreadTokenUsage = (value: unknown): TokenUsageSnapshot |
   }
 
   const total = isObjectRecord(tokenUsage.total) ? tokenUsage.total : {}
-  const last = isObjectRecord(tokenUsage.last) ? tokenUsage.last : {}
+  const last = isObjectRecord(tokenUsage.last) ? tokenUsage.last : null
 
   return {
+    totalTokens: toFiniteNumber(total.totalTokens),
     totalInputTokens: toFiniteNumber(total.inputTokens) ?? 0,
     totalCachedInputTokens: toFiniteNumber(total.cachedInputTokens) ?? 0,
     totalOutputTokens: toFiniteNumber(total.outputTokens) ?? 0,
-    lastInputTokens: toFiniteNumber(last.inputTokens) ?? 0,
-    lastCachedInputTokens: toFiniteNumber(last.cachedInputTokens) ?? 0,
-    lastOutputTokens: toFiniteNumber(last.outputTokens) ?? 0,
+    lastUsageKnown: last !== null,
+    lastTotalTokens: toFiniteNumber(last?.totalTokens),
+    lastInputTokens: toFiniteNumber(last?.inputTokens) ?? 0,
+    lastCachedInputTokens: toFiniteNumber(last?.cachedInputTokens) ?? 0,
+    lastOutputTokens: toFiniteNumber(last?.outputTokens) ?? 0,
     modelContextWindow: toFiniteNumber(tokenUsage.modelContextWindow)
   }
 }
@@ -306,15 +320,16 @@ export const formatCompactTokenCount = (value: number) => {
 
 export const resolveContextWindowState = (
   tokenUsage: TokenUsageSnapshot | null,
-  fallbackContextWindow: number | null,
-  usageKnown = true
-) => {
+  fallbackContextWindow: number | null
+): ContextWindowState => {
   const contextWindow = tokenUsage?.modelContextWindow ?? fallbackContextWindow
+  // App-server exposes cumulative thread totals separately; the latest turn total
+  // is the closest match to current context occupancy.
   const usedTokens = tokenUsage
-    ? tokenUsage.totalInputTokens + tokenUsage.totalOutputTokens
-    : usageKnown
-      ? 0
-      : null
+    ? tokenUsage.lastTotalTokens ?? (tokenUsage.lastUsageKnown
+        ? tokenUsage.lastInputTokens + tokenUsage.lastOutputTokens
+        : null)
+    : null
 
   if (!contextWindow || usedTokens == null) {
     return {
@@ -337,3 +352,6 @@ export const resolveContextWindowState = (
     remainingPercent: Math.max(0, 100 - usedPercent)
   }
 }
+
+export const shouldShowContextWindowIndicator = (state: ContextWindowState) =>
+  state.contextWindow !== null && state.usedTokens !== null

package/shared/codex-chat.ts

@@ -2,6 +2,7 @@ import type { CodexThread, CodexThreadItem, CodexUserInput } from './codex-rpc'
 
 export const EVENT_PART = 'data-thread-event' as const
 export const ITEM_PART = 'data-thread-item' as const
+export const THINKING_PLACEHOLDER_MESSAGE_ID = 'assistant-thinking-placeholder'
 
 export type ThreadEventData =
   | {
@@ -336,11 +337,13 @@ const normalizeParts = (message: ChatMessage): ChatPart[] =>
     return part
   })
 
+const normalizeMessage = (message: ChatMessage): ChatMessage => ({
+  ...message,
+  parts: normalizeParts(message)
+})
+
 export const upsertStreamingMessage = (messages: ChatMessage[], nextMessage: ChatMessage) => {
-  const normalizedMessage = {
-    ...nextMessage,
-    parts: normalizeParts(nextMessage)
-  }
+  const normalizedMessage = normalizeMessage(nextMessage)
   const nextMessages = messages.slice()
   const existingIndex = nextMessages.findIndex(message => message.id === normalizedMessage.id)
 
@@ -360,3 +363,43 @@ export const upsertStreamingMessage = (messages: ChatMessage[], nextMessage: Cha
 
   return nextMessages
 }
+
+export const replaceStreamingMessage = (messages: ChatMessage[], nextMessage: ChatMessage) => {
+  const normalizedMessage = normalizeMessage(nextMessage)
+  const nextMessages = messages.slice()
+  const existingIndex = nextMessages.findIndex(message => message.id === normalizedMessage.id)
+
+  if (existingIndex === -1) {
+    nextMessages.push(normalizedMessage)
+    return nextMessages
+  }
+
+  nextMessages.splice(existingIndex, 1, normalizedMessage)
+  return nextMessages
+}
+
+export const buildThinkingPlaceholderMessage = (): ChatMessage => ({
+  id: THINKING_PLACEHOLDER_MESSAGE_ID,
+  role: 'assistant',
+  pending: true,
+  parts: [{
+    type: 'reasoning',
+    summary: ['Thinking...'],
+    content: [],
+    state: 'streaming'
+  }]
+})
+
+export const showThinkingPlaceholder = (messages: ChatMessage[]) =>
+  upsertStreamingMessage(messages, buildThinkingPlaceholderMessage())
+
+export const hideThinkingPlaceholder = (messages: ChatMessage[]) => {
+  const index = messages.findIndex(message => message.id === THINKING_PLACEHOLDER_MESSAGE_ID)
+  if (index === -1) {
+    return messages
+  }
+
+  const nextMessages = messages.slice()
+  nextMessages.splice(index, 1)
+  return nextMessages
+}

package/shared/codori.ts

@@ -7,6 +7,10 @@ export type ProjectRecord = {
   pid: number | null
   port: number | null
   startedAt: number | null
+  lastActivityAt: number | null
+  activeSessionCount: number
+  idleTimeoutMs: number | null
+  idleDeadlineAt: number | null
   error: string | null
 }
 
@@ -14,6 +18,14 @@ export type StartProjectResult = ProjectRecord & {
   reusedExisting: boolean
 }
 
+export type ServiceUpdateStatus = {
+  enabled: boolean
+  updateAvailable: boolean
+  updating: boolean
+  installedVersion: string | null
+  latestVersion: string | null
+}
+
 export type ProjectsResponse = {
   projects: ProjectRecord[]
 }
@@ -22,6 +34,10 @@ export type ProjectResponse = {
   project: ProjectRecord | StartProjectResult
 }
 
+export type ServiceUpdateResponse = {
+  serviceUpdate: ServiceUpdateStatus
+}
+
 export const normalizeProjectIdParam = (value: string | string[] | undefined) => {
   if (!value) {
     return null

package/app/components/TunnelNotice.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const localHostnames = new Set([
-  'localhost',
-  '127.0.0.1',
-  '::1'
-])
-
-const hostname = typeof window === 'undefined' ? 'localhost' : window.location.hostname
-
-const shouldShow = computed(() => !localHostnames.has(hostname))
-</script>
-
-<template>
-  <UAlert
-    v-if="shouldShow"
-    color="warning"
-    variant="soft"
-    icon="i-lucide-shield-alert"
-    title="Private tunnel is not included"
-  >
-    <template #description>
-      Codori does not create a private tunnel for you. Expose this service through your own network layer such as Tailscale or Cloudflare Tunnel.
-    </template>
-  </UAlert>
-</template>