@codori/client 0.0.3 → 0.0.4

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,
@@ -505,6 +508,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 +1248,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 +1450,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
         status.value = 'streaming'
         return
       }
+      clearThinkingPlaceholderForVisibleItem(params.item)
       seedStreamingMessage(params.item)
       status.value = 'streaming'
       return
@@ -1442,6 +1460,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 +1471,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 +1493,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 +1510,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 +1618,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 +1629,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 +1640,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 +1649,7 @@ const applyNotification = (notification: CodexRpcNotification) => {
       return
     }
     case 'turn/completed': {
+      clearThinkingPlaceholder()
       clearPendingOptimisticMessages(liveStream, { discardSnapshots: true })
       error.value = null
       status.value = 'ready'
@@ -1664,6 +1690,7 @@ const sendMessage = async () => {
   const optimisticMessageId = optimisticMessage.id
   rememberOptimisticAttachments(optimisticMessageId, submittedAttachments)
   messages.value = [...messages.value, optimisticMessage]
+  ensureThinkingPlaceholder()
   let startedLiveStream: LiveStream | null = null
 
   try {
@@ -1711,6 +1738,7 @@ const sendMessage = async () => {
   } catch (caughtError) {
     const messageText = caughtError instanceof Error ? caughtError.message : String(caughtError)
 
+    clearThinkingPlaceholder()
     untrackPendingUserMessage(optimisticMessageId)
     removeOptimisticMessage(optimisticMessageId)
 
@@ -1932,7 +1960,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"

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.4",
   "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/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

@@ -14,6 +14,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 +30,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>