@codori/client 0.0.2 → 0.0.4

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/app/pages/projects/[...projectId]/index.vue

@@ -7,7 +7,7 @@ import { normalizeProjectIdParam } from '~~/shared/codori'
 
 const route = useRoute()
 const router = useRouter()
-const { openPanel } = useThreadPanel()
+const { togglePanel } = useThreadPanel()
 const { loaded, refreshProjects, getProject, pendingProjectId } = useProjects()
 
 const projectId = computed(() => normalizeProjectIdParam(route.params.projectId as string | string[] | undefined))
@@ -83,7 +83,7 @@ onMounted(() => {
                   color="neutral"
                   variant="outline"
                   square
-                  @click="openPanel"
+                  @click="togglePanel"
                 />
               </UTooltip>
             </div>

package/app/pages/projects/[...projectId]/threads/[threadId].vue

@@ -1,15 +1,22 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from '#imports'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useChatSession } from '../../../../composables/useChatSession'
 import { useProjects } from '../../../../composables/useProjects'
 import { useThreadPanel } from '../../../../composables/useThreadPanel'
 import { useVisualSubagentPanels } from '../../../../composables/useVisualSubagentPanels'
 import { normalizeProjectIdParam, toProjectRoute } from '~~/shared/codori'
+import {
+  pruneExpandedSubagentThreadId,
+  resolveExpandedSubagentPanel,
+  resolveSubagentAccent,
+  resolveSubagentPanelAutoOpen,
+  toSubagentAvatarText
+} from '~~/shared/subagent-panels'
 
 const route = useRoute()
 const router = useRouter()
-const { openPanel } = useThreadPanel()
+const { togglePanel } = useThreadPanel()
 const { loaded, refreshProjects, getProject, pendingProjectId } = useProjects()
 
 const projectId = computed(() => normalizeProjectIdParam(route.params.projectId as string | string[] | undefined))
@@ -51,41 +58,81 @@ const rpcStatus = computed(() => {
   }
 })
 const isSubagentsPanelOpen = ref(false)
+const isMobileSubagentsDrawerOpen = ref(false)
+const expandedSubagentThreadId = ref<string | null>(null)
 const hasUserToggledSubagentsPanel = ref(false)
 const hasResolvedSubagentPanelState = ref(false)
 const previousActiveSubagentCount = ref(0)
+const isMobileViewport = ref(true)
 const hasAvailableSubagents = computed(() => availablePanels.value.length > 0)
-const isSubagentsPanelVisible = computed(() =>
-  isSubagentsPanelOpen.value && hasAvailableSubagents.value
+const isDesktopSubagentsPanelVisible = computed(() =>
+  !isMobileViewport.value && isSubagentsPanelOpen.value && hasAvailableSubagents.value
 )
-const subagentsToggleIcon = computed(() =>
-  isSubagentsPanelVisible.value
-    ? 'i-lucide-panel-right-close'
-    : 'i-lucide-panel-right-open'
+const isSubagentsSurfaceOpen = computed(() =>
+  isMobileViewport.value ? isMobileSubagentsDrawerOpen.value : isDesktopSubagentsPanelVisible.value
+)
+const subagentsToggleIcon = computed(() => 'i-lucide-bot')
+const subagentsToggleLabel = computed(() =>
+  isMobileViewport.value
+    ? (isMobileSubagentsDrawerOpen.value ? 'Hide subagents' : 'Show subagents')
+    : (isDesktopSubagentsPanelVisible.value ? 'Hide subagents' : 'Show subagents')
 )
-const toSubagentAvatarText = (name: string) => {
-  const normalized = name.replace(/\s+/g, '').trim()
-  return Array.from(normalized || 'AG').slice(0, 2).join('')
-}
 const subagentAvatarItems = computed(() =>
   availablePanels.value.map((panel, index) => ({
     threadId: panel.threadId,
     name: panel.name,
     text: toSubagentAvatarText(panel.name),
-    class: [
-      'bg-emerald-500/15 text-emerald-700 ring-1 ring-inset ring-emerald-500/30 dark:text-emerald-300',
-      'bg-sky-500/15 text-sky-700 ring-1 ring-inset ring-sky-500/30 dark:text-sky-300',
-      'bg-amber-500/15 text-amber-800 ring-1 ring-inset ring-amber-500/35 dark:text-amber-300',
-      'bg-rose-500/15 text-rose-700 ring-1 ring-inset ring-rose-500/30 dark:text-rose-300',
-      'bg-violet-500/15 text-violet-700 ring-1 ring-inset ring-violet-500/30 dark:text-violet-300'
-    ][index % 5]
+    class: resolveSubagentAccent(index).avatarClass
   }))
 )
+const expandedSubagentPanel = computed(() =>
+  resolveExpandedSubagentPanel(availablePanels.value, expandedSubagentThreadId.value)
+)
+const expandedSubagentAccent = computed(() => {
+  if (!expandedSubagentPanel.value) {
+    return null
+  }
+
+  const index = availablePanels.value.findIndex(panel => panel.threadId === expandedSubagentPanel.value?.threadId)
+  return index >= 0 ? resolveSubagentAccent(index) : null
+})
+const isExpandedSubagentOpen = computed({
+  get: () => expandedSubagentPanel.value !== null,
+  set: (open) => {
+    if (!open) {
+      expandedSubagentThreadId.value = null
+    }
+  }
+})
+
+let viewportQuery: MediaQueryList | null = null
+let removeViewportListener: (() => void) | null = null
+
+const syncViewportMode = (mobile: boolean) => {
+  isMobileViewport.value = mobile
+
+  if (mobile) {
+    isSubagentsPanelOpen.value = false
+    return
+  }
+
+  isMobileSubagentsDrawerOpen.value = false
+
+  if (hasAvailableSubagents.value && !hasUserToggledSubagentsPanel.value && activePanels.value.length > 0) {
+    isSubagentsPanelOpen.value = true
+  }
+}
 
 const toggleSubagentsPanel = () => {
   if (!hasAvailableSubagents.value) {
     return
   }
+
+  if (isMobileViewport.value) {
+    isMobileSubagentsDrawerOpen.value = !isMobileSubagentsDrawerOpen.value
+    return
+  }
+
   hasUserToggledSubagentsPanel.value = true
   isSubagentsPanelOpen.value = !isSubagentsPanelOpen.value
 }
@@ -95,6 +142,15 @@ const closeSubagentsPanel = () => {
   isSubagentsPanelOpen.value = false
 }
 
+const openExpandedSubagent = (subagentThreadId: string) => {
+  expandedSubagentThreadId.value = subagentThreadId
+  isMobileSubagentsDrawerOpen.value = false
+}
+
+const closeExpandedSubagent = () => {
+  expandedSubagentThreadId.value = null
+}
+
 const onNewThread = async () => {
   if (!projectId.value) {
     return
@@ -107,6 +163,26 @@ onMounted(() => {
   if (!loaded.value) {
     void refreshProjects()
   }
+
+  if (!import.meta.client) {
+    return
+  }
+
+  viewportQuery = window.matchMedia('(max-width: 767px)')
+  syncViewportMode(viewportQuery.matches)
+
+  const handleViewportChange = (event: MediaQueryListEvent) => {
+    syncViewportMode(event.matches)
+  }
+
+  viewportQuery.addEventListener('change', handleViewportChange)
+  removeViewportListener = () => {
+    viewportQuery?.removeEventListener('change', handleViewportChange)
+  }
+})
+
+onBeforeUnmount(() => {
+  removeViewportListener?.()
 })
 
 watch(threadId, () => {
@@ -114,6 +190,8 @@ watch(threadId, () => {
   hasResolvedSubagentPanelState.value = false
   previousActiveSubagentCount.value = 0
   isSubagentsPanelOpen.value = false
+  isMobileSubagentsDrawerOpen.value = false
+  expandedSubagentThreadId.value = null
 }, { immediate: true })
 
 watch(hasAvailableSubagents, (value) => {
@@ -122,31 +200,33 @@ watch(hasAvailableSubagents, (value) => {
     hasResolvedSubagentPanelState.value = false
     previousActiveSubagentCount.value = 0
     isSubagentsPanelOpen.value = false
+    isMobileSubagentsDrawerOpen.value = false
+    expandedSubagentThreadId.value = null
   }
 }, { immediate: true })
 
+watch(availablePanels, (panels) => {
+  expandedSubagentThreadId.value = pruneExpandedSubagentThreadId(panels, expandedSubagentThreadId.value)
+}, { immediate: true })
+
 watch(
   () => activePanels.value.length,
   (nextCount) => {
-    if (!hasAvailableSubagents.value) {
-      return
-    }
+    const nextState = resolveSubagentPanelAutoOpen({
+      isMobile: isMobileViewport.value,
+      hasAvailableSubagents: hasAvailableSubagents.value,
+      hasResolvedState: hasResolvedSubagentPanelState.value,
+      hasUserToggled: hasUserToggledSubagentsPanel.value,
+      previousActiveCount: previousActiveSubagentCount.value,
+      nextActiveCount: nextCount
+    })
 
-    if (!hasResolvedSubagentPanelState.value) {
-      hasResolvedSubagentPanelState.value = true
-      previousActiveSubagentCount.value = nextCount
-      isSubagentsPanelOpen.value = nextCount > 0
-      return
-    }
+    hasResolvedSubagentPanelState.value = nextState.hasResolvedState
+    previousActiveSubagentCount.value = nextState.previousActiveCount
 
-    if (!hasUserToggledSubagentsPanel.value
-      && previousActiveSubagentCount.value === 0
-      && nextCount > 0
-    ) {
-      isSubagentsPanelOpen.value = true
+    if (nextState.nextOpen !== null) {
+      isSubagentsPanelOpen.value = nextState.nextOpen
     }
-
-    previousActiveSubagentCount.value = nextCount
   },
   { immediate: true }
 )
@@ -157,10 +237,10 @@ watch(
     <UDashboardPanel
       id="thread-shell"
       class="min-h-0 min-w-0 flex-1"
-      :default-size="isSubagentsPanelVisible ? 70 : undefined"
-      :min-size="isSubagentsPanelVisible ? 50 : undefined"
-      :max-size="isSubagentsPanelVisible ? 75 : undefined"
-      :resizable="isSubagentsPanelVisible"
+      :default-size="isDesktopSubagentsPanelVisible ? 70 : undefined"
+      :min-size="isDesktopSubagentsPanelVisible ? 50 : undefined"
+      :max-size="isDesktopSubagentsPanelVisible ? 75 : undefined"
+      :resizable="isDesktopSubagentsPanelVisible"
       :ui="{ root: '!p-0', body: '!p-0 sm:!p-0 !gap-0 sm:!gap-0' }"
     >
       <template #header>
@@ -188,17 +268,42 @@ watch(
           </template>
           <template #right>
             <div class="flex items-center gap-1.5 lg:gap-2">
+              <UTooltip :text="`RPC ${rpcStatus}`">
+                <ProjectStatusDot
+                  :status="rpcStatus"
+                  pulse
+                  padded
+                />
+              </UTooltip>
+              <UTooltip text="New thread">
+                <UButton
+                  icon="i-lucide-plus"
+                  color="primary"
+                  variant="soft"
+                  square
+                  @click="onNewThread"
+                />
+              </UTooltip>
+              <UTooltip text="Previous threads">
+                <UButton
+                  icon="i-lucide-history"
+                  color="neutral"
+                  variant="outline"
+                  square
+                  @click="togglePanel"
+                />
+              </UTooltip>
               <UTooltip
                 v-if="hasAvailableSubagents"
                 text="Subagents"
               >
                 <UButton
-                  :color="isSubagentsPanelVisible ? 'primary' : 'neutral'"
-                  :variant="isSubagentsPanelVisible ? 'soft' : 'ghost'"
+                  :color="isSubagentsSurfaceOpen ? 'primary' : 'neutral'"
+                  :variant="isSubagentsSurfaceOpen ? 'soft' : 'ghost'"
                   :icon="subagentsToggleIcon"
                   size="sm"
                   class="px-2 xl:ps-2 xl:pe-2.5"
-                  :aria-label="isSubagentsPanelVisible ? 'Hide subagents' : 'Show subagents'"
+                  :aria-label="subagentsToggleLabel"
                   @click="toggleSubagentsPanel"
                 >
                   <UAvatarGroup
@@ -217,31 +322,6 @@ watch(
                   </UAvatarGroup>
                 </UButton>
               </UTooltip>
-              <UTooltip :text="`RPC ${rpcStatus}`">
-                <ProjectStatusDot
-                  :status="rpcStatus"
-                  pulse
-                  padded
-                />
-              </UTooltip>
-              <UTooltip text="New thread">
-                <UButton
-                  icon="i-lucide-plus"
-                  color="primary"
-                  variant="soft"
-                  square
-                  @click="onNewThread"
-                />
-              </UTooltip>
-              <UTooltip text="Previous threads">
-                <UButton
-                  icon="i-lucide-history"
-                  color="neutral"
-                  variant="outline"
-                  square
-                  @click="openPanel"
-                />
-              </UTooltip>
             </div>
           </template>
         </UDashboardNavbar>
@@ -258,17 +338,20 @@ watch(
     </UDashboardPanel>
 
     <UDashboardPanel
-      v-if="isSubagentsPanelVisible"
+      v-if="isDesktopSubagentsPanelVisible"
       id="thread-subagents-panel"
       class="h-full min-h-0"
       :default-size="30"
       :min-size="20"
       :max-size="40"
       resizable
-      :ui="{ body: '!p-0' }"
+      :ui="{ header: '!p-0 bg-[var(--ui-bg)]', body: '!p-0' }"
     >
       <template #header>
-        <div class="flex items-center justify-between gap-2 px-4 py-3">
+        <div
+          class="flex items-center justify-between gap-2 border-b border-default px-4 py-3"
+          style="background-color: var(--ui-bg);"
+        >
           <div class="flex items-center gap-2">
             <span class="text-sm font-semibold text-highlighted">Subagents</span>
             <UBadge
@@ -294,10 +377,80 @@ watch(
         <VisualSubagentStack
           :agents="availablePanels"
           class="h-full min-h-0"
+          @expand="openExpandedSubagent"
         />
       </template>
     </UDashboardPanel>
 
+    <UDrawer
+      v-if="hasAvailableSubagents"
+      v-model:open="isMobileSubagentsDrawerOpen"
+      direction="bottom"
+      :handle="true"
+      :ui="{
+        content: 'max-h-[85dvh] rounded-t-2xl md:hidden',
+        container: 'gap-0 p-0',
+        header: 'px-4 pb-2 pt-4',
+        body: '!p-0',
+        footer: 'hidden'
+      }"
+    >
+      <template #header>
+        <div class="flex items-center justify-between gap-2">
+          <div class="flex items-center gap-2">
+            <span class="text-sm font-semibold text-highlighted">Subagents</span>
+            <UBadge
+              color="primary"
+              variant="soft"
+              size="sm"
+            >
+              {{ availablePanels.length }}
+            </UBadge>
+          </div>
+          <UButton
+            icon="i-lucide-x"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            square
+            aria-label="Close subagents drawer"
+            @click="isMobileSubagentsDrawerOpen = false"
+          />
+        </div>
+      </template>
+
+      <template #body>
+        <SubagentDrawerList
+          :agents="availablePanels"
+          @expand="openExpandedSubagent"
+        />
+      </template>
+    </UDrawer>
+
+    <UModal
+      v-model:open="isExpandedSubagentOpen"
+      fullscreen
+      :ui="{
+        header: 'hidden',
+        close: 'hidden',
+        content: 'overflow-hidden bg-default',
+        body: '!h-full !p-0'
+      }"
+    >
+      <template #body>
+        <SubagentTranscriptPanel
+          v-if="expandedSubagentPanel"
+          :agent="expandedSubagentPanel"
+          :accent="expandedSubagentAccent"
+          scroll-scope="expanded"
+          expanded
+          show-collapse-button
+          class="h-full"
+          @collapse="closeExpandedSubagent"
+        />
+      </template>
+    </UModal>
+
     <ThreadPanel :project-id="projectId" />
   </div>
 </template>

package/app/utils/chat-turn-engagement.ts

@@ -0,0 +1,46 @@
+import { upsertStreamingMessage, type ChatMessage } from '../../shared/codex-chat'
+
+export type PromptSubmitStatus = 'ready' | 'submitted' | 'streaming' | 'error'
+
+const interruptIgnoredMethods = new Set([
+  'item/started',
+  'item/agentMessage/delta',
+  'item/plan/delta',
+  'item/reasoning/textDelta',
+  'item/reasoning/summaryTextDelta',
+  'item/commandExecution/outputDelta',
+  'item/fileChange/outputDelta',
+  'item/mcpToolCall/progress'
+])
+
+export const resolveTurnSubmissionMethod = (hasActiveTurn: boolean) =>
+  hasActiveTurn ? 'turn/steer' : 'turn/start'
+
+export const resolvePromptSubmitStatus = (input: {
+  status: PromptSubmitStatus
+  hasDraftContent: boolean
+}) => input.hasDraftContent ? 'ready' : input.status
+
+export const shouldIgnoreNotificationAfterInterrupt = (method: string) =>
+  interruptIgnoredMethods.has(method)
+
+export const removeChatMessage = (messages: ChatMessage[], messageId: string) =>
+  messages.filter(message => message.id !== messageId)
+
+export const removePendingUserMessageId = (messageIds: string[], messageId: string) =>
+  messageIds.filter(candidateId => candidateId !== messageId)
+
+export const reconcileOptimisticUserMessage = (
+  messages: ChatMessage[],
+  optimisticMessageId: string,
+  confirmedMessage: ChatMessage
+) => {
+  const index = messages.findIndex(message => message.id === optimisticMessageId)
+  if (index === -1) {
+    return upsertStreamingMessage(messages, confirmedMessage)
+  }
+
+  return messages.map((message, messageIndex) =>
+    messageIndex === index ? confirmedMessage : message
+  )
+}

package/package.json

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

package/server/api/codori/projects/[projectId]/attachments/file.get.ts

@@ -0,0 +1,62 @@
+import {
+  createError,
+  defineEventHandler,
+  getQuery,
+  getRouterParam
+} from 'h3'
+import { encodeProjectIdSegment } from '~~/shared/codori'
+import { proxyServerFetch } from '../../../../../utils/server-proxy'
+
+export default defineEventHandler(async (event) => {
+  const projectId = getRouterParam(event, 'projectId')
+  if (!projectId) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Missing project id.'
+    })
+  }
+
+  const queryValue = getQuery(event).path
+  const path = typeof queryValue === 'string'
+    ? queryValue
+    : ''
+
+  if (!path) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Missing attachment path.'
+    })
+  }
+
+  const query = new URLSearchParams()
+  query.set('path', path)
+  const response = await proxyServerFetch(
+    event,
+    `/api/projects/${encodeProjectIdSegment(projectId)}/attachments/file?${query.toString()}`
+  )
+
+  if (!response.ok) {
+    let statusMessage = 'Attachment preview failed.'
+    try {
+      const body = await response.json() as { error?: { message?: string } }
+      statusMessage = body.error?.message ?? statusMessage
+    } catch {
+      // Ignore parse failures and fall back to the default message.
+    }
+
+    throw createError({
+      statusCode: response.status,
+      statusMessage
+    })
+  }
+
+  const headers = new Headers()
+  for (const [key, value] of response.headers.entries()) {
+    headers.set(key, value)
+  }
+
+  return new Response(response.body, {
+    status: response.status,
+    headers
+  })
+})