@codori/client 0.0.8 → 0.0.9

package/app/components/LocalFileViewerModal.vue

@@ -0,0 +1,314 @@
+<script setup lang="ts">
+import { Comark } from '@comark/vue'
+import highlight from '@comark/vue/plugins/highlight'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useRuntimeConfig } from '#imports'
+import { useLocalFileViewer } from '../composables/useLocalFileViewer'
+import { formatLocalFileSize, resolveProjectLocalFileUrl, type ProjectLocalFileResponse } from '../../shared/local-files'
+import {
+  buildHighlightedFileMarkdown,
+  inferLocalFileLanguage,
+  resolveLocalFileLanguageLabel
+} from '../../shared/file-highlighting'
+
+const runtimeConfig = useRuntimeConfig()
+const { state, closeViewer } = useLocalFileViewer()
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+const file = ref<ProjectLocalFileResponse['file'] | null>(null)
+const lineContainer = ref<HTMLElement | null>(null)
+const viewerPlugins = [
+  highlight({ preStyles: false })
+]
+
+const isOpen = computed({
+  get: () => state.value.open,
+  set: (open: boolean) => {
+    if (!open) {
+      closeViewer()
+    }
+  }
+})
+
+const relativePathLabel = computed(() => {
+  if (!file.value) {
+    return state.value.path ?? ''
+  }
+
+  return file.value.relativePath || file.value.name
+})
+
+const lineCount = computed(() => {
+  if (!file.value) {
+    return 0
+  }
+
+  return file.value.text.split('\n').length
+})
+
+const inferredLanguage = computed(() =>
+  file.value ? inferLocalFileLanguage(file.value.path, file.value.text) : null
+)
+
+const languageLabel = computed(() =>
+  resolveLocalFileLanguageLabel(inferredLanguage.value)
+)
+
+const highlightedMarkdown = computed(() => {
+  if (!file.value) {
+    return ''
+  }
+
+  return buildHighlightedFileMarkdown(file.value.text, inferredLanguage.value)
+})
+
+const lineNumberWidth = computed(() =>
+  `${Math.max(3, String(lineCount.value || 1).length + 1)}ch`
+)
+
+const updatedAtLabel = computed(() => {
+  if (!file.value) {
+    return null
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit'
+  }).format(new Date(file.value.updatedAt))
+})
+
+const syncRenderedCodeLines = async () => {
+  if (!lineContainer.value) {
+    return
+  }
+
+  await nextTick()
+  requestAnimationFrame(() => {
+    const renderedLines = Array.from(lineContainer.value?.querySelectorAll<HTMLElement>('.line') ?? [])
+    for (const [index, line] of renderedLines.entries()) {
+      const lineNumber = index + 1
+      line.dataset.fileLine = String(lineNumber)
+      line.classList.toggle('is-target-line', state.value.line === lineNumber)
+    }
+
+    const targetLine = state.value.line
+    if (!targetLine) {
+      return
+    }
+
+    const target = lineContainer.value?.querySelector<HTMLElement>(`[data-file-line="${targetLine}"]`)
+    target?.scrollIntoView({
+      block: 'center'
+    })
+  })
+}
+
+watch(
+  () => [state.value.open, state.value.projectId, state.value.path] as const,
+  async ([open, projectId, path]) => {
+    if (!open || !projectId || !path) {
+      loading.value = false
+      error.value = null
+      file.value = null
+      return
+    }
+
+    loading.value = true
+    error.value = null
+    file.value = null
+
+    try {
+      const response = await $fetch<ProjectLocalFileResponse>(resolveProjectLocalFileUrl({
+        projectId,
+        path,
+        configuredBase: String(runtimeConfig.public.serverBase ?? '')
+      }))
+      if (!state.value.open || state.value.projectId !== projectId || state.value.path !== path) {
+        return
+      }
+
+      file.value = response.file
+      await syncRenderedCodeLines()
+    } catch (caughtError) {
+      if (!state.value.open || state.value.projectId !== projectId || state.value.path !== path) {
+        return
+      }
+
+      error.value = caughtError instanceof Error ? caughtError.message : String(caughtError)
+    } finally {
+      if (state.value.open && state.value.projectId === projectId && state.value.path === path) {
+        loading.value = false
+      }
+    }
+  },
+  { immediate: true }
+)
+
+watch(() => state.value.line, () => {
+  if (file.value) {
+    void syncRenderedCodeLines()
+  }
+})
+
+watch(highlightedMarkdown, () => {
+  if (file.value) {
+    void syncRenderedCodeLines()
+  }
+}, { flush: 'post' })
+</script>
+
+<template>
+  <UModal
+    v-model:open="isOpen"
+    fullscreen
+    :ui="{
+      header: 'hidden',
+      close: 'hidden',
+      content: 'overflow-hidden bg-default',
+      body: '!h-full !p-0'
+    }"
+  >
+    <template #body>
+      <section class="flex h-full min-h-0 flex-col bg-default">
+        <header class="flex items-center justify-between gap-3 border-b border-default px-4 py-3">
+          <div class="min-w-0">
+            <div class="truncate text-xs font-medium uppercase tracking-[0.22em] text-primary">
+              Local File Viewer
+            </div>
+            <div class="truncate text-sm font-semibold text-highlighted">
+              {{ relativePathLabel }}
+            </div>
+            <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted">
+              <span v-if="file">{{ formatLocalFileSize(file.size) }}</span>
+              <span v-if="file">{{ lineCount }} lines</span>
+              <span v-if="updatedAtLabel">{{ updatedAtLabel }}</span>
+              <span v-if="languageLabel">{{ languageLabel }}</span>
+              <span v-if="state.line">Line {{ state.line }}</span>
+            </div>
+          </div>
+
+          <UButton
+            icon="i-lucide-x"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            aria-label="Close local file viewer"
+            @click="closeViewer"
+          />
+        </header>
+
+        <div
+          v-if="loading"
+          class="flex min-h-0 flex-1 items-center justify-center px-6 py-10 text-sm text-muted"
+        >
+          Loading local file preview...
+        </div>
+
+        <div
+          v-else-if="error"
+          class="flex min-h-0 flex-1 items-center justify-center px-6 py-10"
+        >
+          <UAlert
+            color="error"
+            variant="soft"
+            icon="i-lucide-circle-alert"
+            :title="error"
+            class="w-full max-w-2xl"
+          />
+        </div>
+
+        <div
+          v-else-if="file"
+          ref="lineContainer"
+          class="local-file-viewer-code min-h-0 flex-1 overflow-auto bg-elevated/15"
+          :style="{ '--lfv-line-number-width': lineNumberWidth }"
+        >
+          <Suspense>
+            <Comark
+              class="local-file-viewer-markdown"
+              :markdown="highlightedMarkdown"
+              :plugins="viewerPlugins"
+            />
+          </Suspense>
+        </div>
+      </section>
+    </template>
+  </UModal>
+</template>
+
+<style scoped>
+.local-file-viewer-code :deep(.local-file-viewer-markdown) {
+  min-width: max-content;
+}
+
+.local-file-viewer-code :deep(.local-file-viewer-markdown > * + *) {
+  margin-top: 0;
+}
+
+.local-file-viewer-code :deep(pre),
+.local-file-viewer-code :deep(.shiki) {
+  margin: 0;
+  min-width: max-content;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: transparent !important;
+}
+
+.local-file-viewer-code :deep(pre code),
+.local-file-viewer-code :deep(.shiki code) {
+  display: block;
+  min-width: max-content;
+  padding: 0;
+}
+
+.local-file-viewer-code :deep(.line) {
+  display: block;
+  min-width: max-content;
+  padding: 0 1.5rem 0 0;
+  padding-left: calc(var(--lfv-line-number-width) + 1.5rem);
+  position: relative;
+  white-space: pre;
+}
+
+.local-file-viewer-code :deep(.line::before) {
+  content: attr(data-file-line);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--lfv-line-number-width);
+  padding-right: 0.75rem;
+  text-align: right;
+  color: var(--ui-text-muted);
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.local-file-viewer-code :deep(.line.is-target-line) {
+  background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
+}
+
+.local-file-viewer-code :deep(.line.is-target-line::before) {
+  color: var(--ui-primary);
+}
+
+.local-file-viewer-code :deep(.shiki),
+.local-file-viewer-code :deep(.shiki code),
+.local-file-viewer-code :deep(pre),
+.local-file-viewer-code :deep(pre code) {
+  font-size: 13px;
+  line-height: 1.75;
+}
+
+:global(.dark) .local-file-viewer-code :deep(.shiki),
+:global(.dark) .local-file-viewer-code :deep(.shiki span) {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+</style>

package/app/components/MessagePartRenderer.ts

@@ -32,6 +32,7 @@ export default defineComponent({
         case 'text':
           return h(MessagePartText, {
             role: props.message?.role,
+            projectId: props.projectId,
             part: props.part
           })
         case 'reasoning':

package/app/components/SubagentTranscriptPanel.vue

@@ -10,6 +10,7 @@ import { resolveSubagentStatusMeta, type SubagentAccent } from '~~/shared/subage
 
 const props = withDefaults(defineProps<{
   agent: VisualSubagentPanel
+  projectId?: string | null
   accent?: SubagentAccent | null
   expanded?: boolean
   showExpandButton?: boolean
@@ -271,7 +272,10 @@ onBeforeUnmount(() => {
         compact
       >
         <template #content="{ message }">
-          <MessageContent :message="message as VisualSubagentPanel['messages'][number]" />
+          <MessageContent
+            :message="message as VisualSubagentPanel['messages'][number]"
+            :project-id="projectId ?? undefined"
+          />
         </template>
       </UChatMessages>
     </div>

package/app/components/UsageStatusModal.vue

@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { useProjects } from '../composables/useProjects'
+import { useRpc } from '../composables/useRpc'
+import {
+  normalizeAccountRateLimits,
+  formatRateLimitWindowDuration,
+  type RateLimitBucket
+} from '../../shared/account-rate-limits'
+
+const props = withDefaults(defineProps<{
+  projectId: string
+  open?: boolean
+}>(), {
+  open: false
+})
+
+const emit = defineEmits<{
+  'update:open': [open: boolean]
+}>()
+
+const { getClient } = useRpc()
+const {
+  loaded,
+  refreshProjects,
+  getProject,
+  startProject
+} = useProjects()
+const loading = ref(false)
+const error = ref<string | null>(null)
+const buckets = ref<RateLimitBucket[]>([])
+const selectedProject = computed(() => getProject(props.projectId))
+let usageStatusLoadToken = 0
+let releaseUsageStatusSubscription: (() => void) | null = null
+
+const nextResetFormatter = new Intl.DateTimeFormat(undefined, {
+  month: 'short',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit'
+})
+
+const toRemainingPercent = (usedPercent: number | null) =>
+  usedPercent == null ? null : Math.max(0, 100 - usedPercent)
+
+const formatProgressLabel = (usedPercent: number | null) => {
+  const remainingPercent = toRemainingPercent(usedPercent)
+  return remainingPercent == null ? 'Remaining quota unavailable' : `${Math.round(remainingPercent)}% remaining`
+}
+
+const formatNextResetLabel = (value: string | null) =>
+  value ? `Next reset ${nextResetFormatter.format(new Date(value))}` : 'Next reset unavailable'
+
+const cards = computed(() =>
+  buckets.value.map((bucket) => {
+    const windows = [{
+      id: `${bucket.limitId}-primary`,
+      title: formatRateLimitWindowDuration(bucket.primary?.windowDurationMins ?? null) ?? 'Primary window',
+      remainingPercent: toRemainingPercent(bucket.primary?.usedPercent ?? null),
+      progressLabel: formatProgressLabel(bucket.primary?.usedPercent ?? null),
+      resetsAt: bucket.primary?.resetsAt ?? null,
+      nextResetLabel: formatNextResetLabel(bucket.primary?.resetsAt ?? null),
+      durationMins: bucket.primary?.windowDurationMins ?? null
+    }, {
+      id: `${bucket.limitId}-secondary`,
+      title: formatRateLimitWindowDuration(bucket.secondary?.windowDurationMins ?? null) ?? 'Secondary window',
+      remainingPercent: toRemainingPercent(bucket.secondary?.usedPercent ?? null),
+      progressLabel: formatProgressLabel(bucket.secondary?.usedPercent ?? null),
+      resetsAt: bucket.secondary?.resetsAt ?? null,
+      nextResetLabel: formatNextResetLabel(bucket.secondary?.resetsAt ?? null),
+      durationMins: bucket.secondary?.windowDurationMins ?? null
+    }]
+      .filter((window) =>
+        window.remainingPercent != null
+        || window.resetsAt != null
+        || window.durationMins != null
+      )
+      .sort((left, right) => (left.durationMins ?? Number.POSITIVE_INFINITY) - (right.durationMins ?? Number.POSITIVE_INFINITY))
+
+    return {
+      id: bucket.limitId,
+      label: bucket.limitName ?? bucket.limitId,
+      detail: bucket.limitName && bucket.limitName !== bucket.limitId ? bucket.limitId : null,
+      windows
+    }
+  })
+)
+
+const resetUsageStatusState = () => {
+  loading.value = false
+  error.value = null
+  buckets.value = []
+}
+
+const closeUsageStatus = () => {
+  usageStatusLoadToken += 1
+  releaseUsageStatusSubscription?.()
+  releaseUsageStatusSubscription = null
+  resetUsageStatusState()
+}
+
+const applyUsageStatusSnapshot = (value: unknown) => {
+  buckets.value = normalizeAccountRateLimits(value)
+  error.value = null
+}
+
+const ensureProjectRuntime = async () => {
+  if (!loaded.value) {
+    await refreshProjects()
+  }
+
+  if (selectedProject.value?.status === 'running') {
+    return
+  }
+
+  await startProject(props.projectId)
+}
+
+const openUsageStatus = async () => {
+  usageStatusLoadToken += 1
+  const loadToken = usageStatusLoadToken
+  loading.value = true
+  error.value = null
+  buckets.value = []
+
+  const client = getClient(props.projectId)
+  releaseUsageStatusSubscription?.()
+  releaseUsageStatusSubscription = client.subscribe((notification) => {
+    if (notification.method !== 'account/rateLimits/updated' || !props.open) {
+      return
+    }
+
+    applyUsageStatusSnapshot(notification.params)
+    loading.value = false
+  })
+
+  try {
+    await ensureProjectRuntime()
+    const response = await client.request('account/rateLimits/read')
+    if (!props.open || loadToken !== usageStatusLoadToken) {
+      return
+    }
+
+    applyUsageStatusSnapshot(response)
+  } catch (caughtError) {
+    if (!props.open || loadToken !== usageStatusLoadToken) {
+      return
+    }
+
+    error.value = caughtError instanceof Error ? caughtError.message : String(caughtError)
+  } finally {
+    if (loadToken === usageStatusLoadToken) {
+      loading.value = false
+    }
+  }
+}
+
+watch(() => [props.open, props.projectId] as const, ([open, projectId], previous) => {
+  const [wasOpen, previousProjectId] = previous ?? [false, projectId]
+
+  if (!open) {
+    closeUsageStatus()
+    return
+  }
+
+  if (!wasOpen || projectId !== previousProjectId) {
+    void openUsageStatus()
+  }
+}, { immediate: true })
+
+onBeforeUnmount(() => {
+  closeUsageStatus()
+})
+</script>
+
+<template>
+  <UModal
+    :open="open"
+    title="Usage status"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #body>
+      <div class="space-y-3">
+        <div
+          v-if="loading"
+          class="rounded-lg border border-default bg-elevated/40 px-4 py-6 text-sm text-muted"
+        >
+          Loading current quota windows...
+        </div>
+
+        <UAlert
+          v-else-if="error"
+          color="error"
+          variant="soft"
+          icon="i-lucide-circle-alert"
+          :title="error"
+        />
+
+        <div
+          v-else-if="!cards.length"
+          class="rounded-lg border border-dashed border-default px-4 py-6 text-center text-sm text-muted"
+        >
+          No live quota windows were reported.
+        </div>
+
+        <div
+          v-else
+          class="space-y-3"
+        >
+          <section
+            v-for="card in cards"
+            :key="card.id"
+            class="rounded-lg border border-default bg-elevated/35 p-3 sm:p-4"
+          >
+            <div class="mb-3 min-w-0">
+              <div class="min-w-0">
+                <h3 class="truncate text-sm font-semibold text-highlighted">
+                  {{ card.label }}
+                </h3>
+                <p
+                  v-if="card.detail"
+                  class="text-xs text-muted"
+                >
+                  {{ card.detail }}
+                </p>
+              </div>
+            </div>
+
+            <div class="space-y-2">
+              <div
+                v-for="window in card.windows"
+                :key="window.id"
+                class="rounded-lg border border-default/80 bg-default/75 p-3"
+              >
+                <div class="flex items-start justify-between gap-3">
+                  <div class="text-xs font-semibold uppercase tracking-[0.18em] text-muted">
+                    {{ window.title }}
+                  </div>
+                  <div class="text-sm font-semibold text-highlighted">
+                    {{ window.progressLabel }}
+                  </div>
+                </div>
+
+                <div class="mt-2 h-2 overflow-hidden rounded-full bg-muted">
+                  <div
+                    class="h-full rounded-full bg-primary transition-[width]"
+                    :style="{ width: `${window.remainingPercent ?? 0}%` }"
+                  />
+                </div>
+
+                <time
+                  v-if="window.resetsAt"
+                  class="mt-2 block text-xs text-muted"
+                  :datetime="window.resetsAt"
+                >
+                  {{ window.nextResetLabel }}
+                </time>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/VisualSubagentStack.vue

@@ -5,6 +5,7 @@ import { resolveSubagentAccent } from '~~/shared/subagent-panels'
 
 const props = defineProps<{
   agents: VisualSubagentPanel[]
+  projectId?: string | null
 }>()
 
 const emit = defineEmits<{
@@ -26,6 +27,7 @@ const paneSize = computed(() => {
       v-for="(agent, index) in agents"
       :key="agent.threadId"
       :agent="agent"
+      :project-id="projectId ?? null"
       :accent="resolveSubagentAccent(index)"
       scroll-scope="stack"
       show-expand-button

package/app/components/message-part/LocalFileLink.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useProjects } from '../../composables/useProjects'
+import { useLocalFileViewer } from '../../composables/useLocalFileViewer'
+import { isLocalFileWithinProject, parseLocalFileHref } from '../../../shared/local-files'
+
+const props = defineProps<{
+  href?: string | null
+  title?: string | null
+  projectId?: string | null
+}>()
+
+const { getProject } = useProjects()
+const { openViewer } = useLocalFileViewer()
+
+const parsedTarget = computed(() =>
+  props.href ? parseLocalFileHref(props.href) : null
+)
+const projectPath = computed(() =>
+  props.projectId ? getProject(props.projectId)?.projectPath ?? null : null
+)
+const isProjectLocalFile = computed(() =>
+  parsedTarget.value
+  && isLocalFileWithinProject(parsedTarget.value.path, projectPath.value)
+)
+
+const onClick = (event: MouseEvent) => {
+  if (!props.projectId || !parsedTarget.value || !isProjectLocalFile.value) {
+    return
+  }
+
+  event.preventDefault()
+  openViewer({
+    projectId: props.projectId,
+    path: parsedTarget.value.path,
+    line: parsedTarget.value.line,
+    column: parsedTarget.value.column
+  })
+}
+</script>
+
+<template>
+  <a
+    :href="href ?? undefined"
+    :title="title ?? undefined"
+    class="underline decoration-primary/35 underline-offset-3 transition hover:text-primary hover:decoration-primary"
+    @click="onClick"
+  >
+    <slot />
+  </a>
+</template>