@codori/client 0.0.2 → 0.0.3

package/app/components/MessageContent.vue

@@ -4,6 +4,7 @@ import type { ChatMessage, ChatPart } from '~~/shared/codex-chat'
 
 defineProps<{
   message?: ChatMessage | null
+  projectId?: string
 }>()
 
 const partKey = (messageId: string | undefined, part: ChatPart, index: number) => {
@@ -21,6 +22,7 @@ const partKey = (messageId: string | undefined, part: ChatPart, index: number) =
       v-for="(part, index) in message?.parts ?? []"
       :key="partKey(message?.id, part, index)"
       :message="message"
+      :project-id="projectId"
       :part="part"
     />
   </div>

package/app/components/MessagePartRenderer.ts

@@ -1,6 +1,7 @@
 import { defineComponent, h, type PropType } from 'vue'
 import { UChatReasoning } from '#components'
 import { EVENT_PART, ITEM_PART, type ChatMessage, type ChatPart } from '~~/shared/codex-chat'
+import MessagePartAttachment from './message-part/Attachment.vue'
 import MessagePartEvent from './message-part/Event.vue'
 import MessagePartItem from './message-part/Item'
 import MessagePartText from './message-part/Text.vue'
@@ -12,6 +13,10 @@ export default defineComponent({
       type: Object as PropType<ChatMessage | null>,
       default: null
     },
+    projectId: {
+      type: String as PropType<string | undefined>,
+      default: undefined
+    },
     part: {
       type: Object as PropType<ChatPart | null>,
       default: null
@@ -37,6 +42,11 @@ export default defineComponent({
             defaultOpen: props.part.state === 'streaming',
             autoCloseDelay: 600
           })
+        case 'attachment':
+          return h(MessagePartAttachment, {
+            projectId: props.projectId,
+            part: props.part
+          })
         case EVENT_PART:
           return h(MessagePartEvent, {
             part: props.part

package/app/components/SubagentDrawerList.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { VisualSubagentPanel } from '~~/shared/codex-chat'
+import {
+  resolveSubagentAccent,
+  resolveSubagentStatusMeta
+} from '~~/shared/subagent-panels'
+
+defineProps<{
+  agents: VisualSubagentPanel[]
+}>()
+
+const emit = defineEmits<{
+  expand: [threadId: string]
+}>()
+</script>
+
+<template>
+  <div class="min-h-0">
+    <div
+      v-if="agents.length === 0"
+      class="rounded-lg border border-dashed border-default px-4 py-6 text-sm text-muted"
+    >
+      No subagents yet.
+    </div>
+
+    <ul
+      v-else
+      class="divide-y divide-default"
+    >
+      <li
+        v-for="(agent, index) in agents"
+        :key="agent.threadId"
+        class="flex items-center gap-3 px-4 py-3"
+      >
+        <div
+          class="size-2.5 shrink-0 rounded-full ring-4"
+          :class="resolveSubagentAccent(index).dotClass"
+        />
+
+        <div class="min-w-0 flex-1">
+          <p
+            class="truncate text-sm font-medium"
+            :class="resolveSubagentAccent(index).textClass"
+          >
+            {{ agent.name }}
+          </p>
+          <p class="text-xs text-muted">
+            {{ resolveSubagentStatusMeta(agent.status).label }}
+          </p>
+        </div>
+
+        <UButton
+          icon="i-lucide-expand"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          square
+          :aria-label="`Expand ${agent.name}`"
+          @click="emit('expand', agent.threadId)"
+        />
+      </li>
+    </ul>
+  </div>
+</template>

package/app/components/SubagentTranscriptPanel.vue

@@ -0,0 +1,305 @@
+<script lang="ts">
+const sharedScrollPositions = new Map<string, number>()
+const sharedStickToBottomStates = new Map<string, boolean>()
+</script>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import type { VisualSubagentPanel } from '~~/shared/codex-chat'
+import { resolveSubagentStatusMeta, type SubagentAccent } from '~~/shared/subagent-panels'
+
+const props = withDefaults(defineProps<{
+  agent: VisualSubagentPanel
+  accent?: SubagentAccent | null
+  expanded?: boolean
+  showExpandButton?: boolean
+  showCollapseButton?: boolean
+  scrollScope?: string
+}>(), {
+  accent: null,
+  expanded: false,
+  showExpandButton: false,
+  showCollapseButton: false,
+  scrollScope: 'default'
+})
+
+const emit = defineEmits<{
+  expand: []
+  collapse: []
+}>()
+
+const SCROLL_RETRY_DELAY_MS = 48
+const SCROLL_RETRY_COUNT = 4
+const SCROLL_STICKY_THRESHOLD_PX = 24
+
+const scrollContainer = ref<HTMLElement | null>(null)
+let scrollRetryTimer: number | null = null
+let isTickPending = false
+
+const statusMeta = computed(() => resolveSubagentStatusMeta(props.agent.status))
+const scrollStateKey = computed(() => `${props.scrollScope}:${props.agent.threadId}`)
+const lastMessageSignature = computed(() => {
+  const lastMessage = props.agent.messages.at(-1)
+  if (!lastMessage) {
+    return ''
+  }
+
+  return JSON.stringify({
+    id: lastMessage.id,
+    pending: lastMessage.pending ?? false,
+    parts: lastMessage.parts.map((part) => {
+      if (part.type === 'text') {
+        return [part.type, part.state ?? '', part.text.length]
+      }
+
+      if (part.type === 'reasoning') {
+        return [
+          part.type,
+          part.state ?? '',
+          part.summary.join('\n').length,
+          part.content.join('\n').length
+        ]
+      }
+
+      if (part.type === 'attachment') {
+        return [part.type, part.attachment.name, part.attachment.url ?? part.attachment.localPath ?? '']
+      }
+
+      return [part.type, JSON.stringify(part.data).length]
+    })
+  })
+})
+const panelSignature = computed(() => [
+  props.agent.messages.length,
+  lastMessageSignature.value,
+  props.agent.status ?? ''
+].join(':'))
+
+const clearScrollRetry = () => {
+  if (scrollRetryTimer !== null) {
+    window.clearTimeout(scrollRetryTimer)
+    scrollRetryTimer = null
+  }
+}
+
+const isNearBottom = (container: HTMLElement) =>
+  container.scrollHeight - container.scrollTop - container.clientHeight <= SCROLL_STICKY_THRESHOLD_PX
+
+const rememberScrollState = () => {
+  if (!scrollContainer.value) {
+    return
+  }
+
+  sharedScrollPositions.set(scrollStateKey.value, scrollContainer.value.scrollTop)
+  sharedStickToBottomStates.set(scrollStateKey.value, isNearBottom(scrollContainer.value))
+}
+
+const restoreScrollState = () => {
+  if (!scrollContainer.value) {
+    return
+  }
+
+  const savedTop = sharedScrollPositions.get(scrollStateKey.value)
+  if (savedTop !== undefined) {
+    scrollContainer.value.scrollTop = savedTop
+  }
+
+  sharedStickToBottomStates.set(
+    scrollStateKey.value,
+    savedTop === undefined || isNearBottom(scrollContainer.value)
+  )
+}
+
+const scrollToBottom = () => {
+  if (!scrollContainer.value) {
+    return
+  }
+
+  scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
+  rememberScrollState()
+}
+
+const queueScrollToBottom = (attempt = 0) => {
+  if (!import.meta.client) {
+    return
+  }
+
+  if (attempt === 0) {
+    clearScrollRetry()
+    if (isTickPending) {
+      return
+    }
+    isTickPending = true
+  }
+
+  void nextTick(() => {
+    if (attempt === 0) {
+      isTickPending = false
+    }
+
+    scrollToBottom()
+    if (attempt >= SCROLL_RETRY_COUNT) {
+      return
+    }
+
+    scrollRetryTimer = window.setTimeout(() => {
+      queueScrollToBottom(attempt + 1)
+    }, SCROLL_RETRY_DELAY_MS)
+  })
+}
+
+const onScroll = () => {
+  rememberScrollState()
+}
+
+watch(scrollContainer, (container) => {
+  if (!container) {
+    clearScrollRetry()
+    return
+  }
+
+  restoreScrollState()
+  if (!sharedScrollPositions.has(scrollStateKey.value)) {
+    queueScrollToBottom()
+  }
+}, { immediate: true })
+
+watch(() => props.agent.threadId, (_, previousThreadId) => {
+  if (previousThreadId) {
+    rememberScrollState()
+  }
+
+  clearScrollRetry()
+  void nextTick(() => {
+    restoreScrollState()
+    if (!sharedScrollPositions.has(scrollStateKey.value)) {
+      queueScrollToBottom()
+    }
+  })
+})
+
+watch(panelSignature, () => {
+  if (sharedStickToBottomStates.get(scrollStateKey.value) === false) {
+    return
+  }
+
+  queueScrollToBottom()
+})
+
+onBeforeUnmount(() => {
+  rememberScrollState()
+  clearScrollRetry()
+})
+</script>
+
+<template>
+  <section class="flex h-full min-h-0 flex-col bg-elevated/25">
+    <header
+      class="flex items-center justify-between gap-2 border-b border-default px-3 py-2"
+      :class="props.accent?.headerClass"
+    >
+      <div class="min-w-0">
+        <p
+          class="truncate text-sm font-semibold"
+          :class="props.accent?.textClass || 'text-highlighted'"
+        >
+          {{ agent.name }}
+        </p>
+        <p
+          v-if="expanded"
+          class="text-xs text-muted"
+        >
+          Focused subagent transcript
+        </p>
+      </div>
+
+      <div class="flex shrink-0 items-center gap-1.5">
+        <UBadge
+          :color="statusMeta.color"
+          variant="soft"
+          size="sm"
+        >
+          {{ statusMeta.label }}
+        </UBadge>
+        <UButton
+          v-if="showExpandButton"
+          icon="i-lucide-expand"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          square
+          aria-label="Expand subagent"
+          @click="emit('expand')"
+        />
+        <UButton
+          v-if="showCollapseButton"
+          icon="i-lucide-shrink"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          square
+          aria-label="Collapse subagent"
+          @click="emit('collapse')"
+        />
+      </div>
+    </header>
+
+    <div
+      ref="scrollContainer"
+      class="min-h-0 flex-1 overflow-y-auto px-3 py-2"
+      @scroll="onScroll"
+    >
+      <div
+        v-if="agent.messages.length === 0"
+        class="rounded-lg border border-dashed border-default px-3 py-4 text-sm text-muted"
+      >
+        Waiting for subagent output...
+      </div>
+
+      <UChatMessages
+        v-else
+        :messages="agent.messages"
+        :status="agent.status === 'pendingInit' || agent.status === 'running' ? 'streaming' : 'ready'"
+        :user="{
+          ui: {
+            root: 'scroll-mt-4',
+            container: 'gap-3 pb-8',
+            content: 'px-4 py-3 rounded-lg min-h-12'
+          }
+        }"
+        :ui="{ root: 'subagent-chat-messages min-h-full min-w-0 [&>article]:min-w-0 [&_[data-slot=content]]:min-w-0' }"
+        compact
+      >
+        <template #content="{ message }">
+          <MessageContent :message="message as VisualSubagentPanel['messages'][number]" />
+        </template>
+      </UChatMessages>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.subagent-chat-messages :deep(.cd-markdown),
+.subagent-chat-messages :deep([data-slot='content']) {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.subagent-chat-messages :deep(.cd-markdown p),
+.subagent-chat-messages :deep(.cd-markdown li),
+.subagent-chat-messages :deep(.cd-markdown a),
+.subagent-chat-messages :deep(.cd-markdown code) {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.subagent-chat-messages :deep(.cd-markdown pre),
+.subagent-chat-messages :deep(.cd-markdown .shiki),
+.subagent-chat-messages :deep(.cd-markdown .shiki code) {
+  max-width: 100%;
+  white-space: pre-wrap !important;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  overflow-x: hidden !important;
+}
+</style>

package/app/components/ThreadPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { useThreadPanel } from '../composables/useThreadPanel'
 import ThreadList from './ThreadList.vue'
 
@@ -7,62 +7,81 @@ defineProps<{
   projectId: string | null
 }>()
 
+const readDesktopViewport = () =>
+  import.meta.client ? window.matchMedia('(min-width: 1280px)').matches : false
+
 const { open, closePanel } = useThreadPanel()
 const threadListKey = ref(0)
+const isDesktopViewport = ref(readDesktopViewport())
+
+let viewportQuery: MediaQueryList | null = null
+let removeViewportListener: (() => void) | null = null
 
 const refreshThreads = () => {
   threadListKey.value += 1
 }
+
+onMounted(() => {
+  if (!import.meta.client) {
+    return
+  }
+
+  viewportQuery = window.matchMedia('(min-width: 1280px)')
+  isDesktopViewport.value = viewportQuery.matches
+
+  const handleViewportChange = (event: MediaQueryListEvent) => {
+    isDesktopViewport.value = event.matches
+  }
+
+  viewportQuery.addEventListener('change', handleViewportChange)
+  removeViewportListener = () => {
+    viewportQuery?.removeEventListener('change', handleViewportChange)
+  }
+})
+
+onBeforeUnmount(() => {
+  removeViewportListener?.()
+})
 </script>
 
 <template>
-  <div class="hidden h-full min-h-0 xl:flex">
-    <UDashboardPanel
-      v-if="projectId && open"
-      id="thread-panel"
-      :ui="{ body: 'p-0' }"
-      class="h-full min-h-0 border-l border-default"
-      :default-size="24"
-      :min-size="20"
-      :max-size="30"
-      resizable
-    >
-      <template #header>
-        <div class="flex items-center justify-between gap-2 px-3 py-2">
-          <div class="text-sm font-medium text-highlighted">
-            Resume Threads
-          </div>
-          <div class="flex items-center gap-1">
-            <UButton
-              icon="i-lucide-refresh-cw"
-              color="neutral"
-              variant="ghost"
-              size="xs"
-              square
-              @click="refreshThreads"
-            />
-            <UButton
-              icon="i-lucide-panel-right-close"
-              color="neutral"
-              variant="ghost"
-              size="xs"
-              square
-              @click="closePanel"
-            />
-          </div>
-        </div>
-      </template>
-      <template #body>
-        <ThreadList
-          :key="threadListKey"
-          :project-id="projectId"
+  <aside
+    v-if="projectId && open && isDesktopViewport"
+    class="hidden h-full min-h-0 w-[22rem] shrink-0 flex-col border-l border-default bg-default xl:flex"
+  >
+    <div class="flex items-center justify-between gap-2 border-b border-default px-3 py-2">
+      <div class="text-sm font-medium text-highlighted">
+        Resume Threads
+      </div>
+      <div class="flex items-center gap-1">
+        <UButton
+          icon="i-lucide-refresh-cw"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          square
+          @click="refreshThreads"
+        />
+        <UButton
+          icon="i-lucide-panel-right-close"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          square
+          @click="closePanel"
         />
-      </template>
-    </UDashboardPanel>
-  </div>
+      </div>
+    </div>
+    <div class="min-h-0 flex-1 overflow-hidden">
+      <ThreadList
+        :key="threadListKey"
+        :project-id="projectId"
+      />
+    </div>
+  </aside>
 
   <USlideover
-    v-if="projectId"
+    v-if="projectId && !isDesktopViewport"
     v-model:open="open"
     title="Resume Threads"
     side="right"