waypoi 0.0.0

package/ui/src/pages/agentPlaygroundPayload.test.ts

@@ -0,0 +1,109 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { buildUserPayload, findNonDataImageUrls, toApiMessage } from './agentPlaygroundPayload'
+
+const DATA_URL_1 = 'data:image/png;base64,AAA'
+const DATA_URL_2 = 'data:image/jpeg;base64,BBB'
+
+test('uses inline data URLs for request even when display refs are cached URLs', () => {
+  const payload = buildUserPayload({
+    callModeEnabled: false,
+    text: 'what does the picture say',
+    requestImageUrls: [DATA_URL_1],
+    displayImageRefs: ['/admin/media/abc123'],
+  })
+
+  const apiMessage = toApiMessage({
+    role: 'user',
+    content: payload.content,
+    images: payload.images,
+    requestImages: payload.requestImages,
+  })
+
+  assert.equal(Array.isArray(apiMessage.content), true)
+  const imagePart = (apiMessage.content as Array<{ type: string; image_url?: { url: string } }>)[1]
+  assert.equal(imagePart.type, 'image_url')
+  assert.equal(imagePart.image_url?.url, DATA_URL_1)
+})
+
+test('falls back to inline data URLs for display and request when cache misses', () => {
+  const payload = buildUserPayload({
+    callModeEnabled: false,
+    text: 'describe',
+    requestImageUrls: [DATA_URL_1],
+  })
+
+  assert.deepEqual(payload.images, [DATA_URL_1])
+  assert.deepEqual(payload.requestImages, [DATA_URL_1])
+})
+
+test('preserves image ordering across multiple images', () => {
+  const payload = buildUserPayload({
+    callModeEnabled: false,
+    text: '',
+    requestImageUrls: [DATA_URL_1, DATA_URL_2],
+    displayImageRefs: ['/admin/media/one', '/admin/media/two'],
+  })
+  const apiMessage = toApiMessage({
+    role: 'user',
+    content: payload.content,
+    images: payload.images,
+    requestImages: payload.requestImages,
+  })
+  const content = apiMessage.content as Array<{ type: string; image_url?: { url: string } }>
+  assert.equal(content[0].image_url?.url, DATA_URL_1)
+  assert.equal(content[1].image_url?.url, DATA_URL_2)
+})
+
+test('call mode keeps audio and uses inline image URL', () => {
+  const payload = buildUserPayload({
+    callModeEnabled: true,
+    text: 'read this',
+    requestImageUrls: [DATA_URL_1],
+    displayImageRefs: ['/admin/media/cached'],
+    audioRef: '/admin/media/audio',
+  })
+
+  const apiMessage = toApiMessage({
+    role: 'user',
+    content: payload.content,
+    images: payload.images,
+    requestImages: payload.requestImages,
+  })
+
+  const content = apiMessage.content as Array<{ type: string; image_url?: { url: string }; input_audio?: { url?: string } }>
+  assert.equal(content[0].type, 'input_audio')
+  assert.equal(content[0].input_audio?.url, '/admin/media/audio')
+  assert.equal(content[1].type, 'image_url')
+  assert.equal(content[1].image_url?.url, DATA_URL_1)
+  assert.equal(content[2].type, 'text')
+})
+
+test('text-only payload does not inject image parts', () => {
+  const payload = buildUserPayload({
+    callModeEnabled: false,
+    text: 'hello world',
+    requestImageUrls: [],
+  })
+  const apiMessage = toApiMessage({
+    role: 'user',
+    content: payload.content,
+    images: payload.images,
+    requestImages: payload.requestImages,
+  })
+
+  assert.equal(typeof apiMessage.content, 'string')
+  assert.equal(apiMessage.content, 'hello world')
+})
+
+test('debug detector flags non-data image URLs', () => {
+  const apiMessage = toApiMessage({
+    role: 'user',
+    content: 'hello',
+    images: ['/admin/media/abc'],
+    requestImages: undefined,
+  })
+
+  const invalid = findNonDataImageUrls([apiMessage])
+  assert.deepEqual(invalid, ['/admin/media/abc'])
+})

package/ui/src/pages/agentPlaygroundPayload.ts

@@ -0,0 +1,97 @@
+import type { ChatMessage as ApiChatMessage, ContentPart } from '../api/client'
+
+export interface PayloadMessage {
+  role: ApiChatMessage['role']
+  content: string | ContentPart[] | null
+  images?: string[]
+  requestImages?: string[]
+}
+
+export interface BuildUserPayloadInput {
+  callModeEnabled: boolean
+  text: string
+  requestImageUrls: string[]
+  displayImageRefs?: string[]
+  audioRef?: string
+}
+
+export interface BuildUserPayloadResult {
+  content: string | ContentPart[]
+  images?: string[]
+  requestImages?: string[]
+}
+
+export function buildUserPayload(input: BuildUserPayloadInput): BuildUserPayloadResult {
+  const requestImages = input.requestImageUrls.filter(Boolean)
+  const displayImages = input.displayImageRefs?.length ? input.displayImageRefs : requestImages
+  const trimmedText = input.text.trim()
+
+  const content: string | ContentPart[] = input.callModeEnabled
+    ? [
+        ...(input.audioRef ? [{ type: 'input_audio' as const, input_audio: { url: input.audioRef } }] : []),
+        ...requestImages.map((img) => ({ type: 'image_url' as const, image_url: { url: img } })),
+        ...(trimmedText ? [{ type: 'text' as const, text: trimmedText }] : []),
+      ]
+    : trimmedText
+
+  return {
+    content,
+    images: displayImages.length > 0 ? displayImages : undefined,
+    requestImages: requestImages.length > 0 ? requestImages : undefined,
+  }
+}
+
+export function toApiMessage(message: PayloadMessage): ApiChatMessage {
+  if (Array.isArray(message.content)) {
+    return {
+      role: message.role,
+      content: message.content as unknown as ApiChatMessage['content'],
+    }
+  }
+
+  const imagesForRequest = message.requestImages ?? message.images
+  if (imagesForRequest && imagesForRequest.length > 0) {
+    return {
+      role: message.role,
+      content: [
+        ...(typeof message.content === 'string' && message.content
+          ? [{ type: 'text' as const, text: message.content }]
+          : []),
+        ...imagesForRequest.map((img) => ({
+          type: 'image_url' as const,
+          image_url: { url: img },
+        })),
+      ],
+    }
+  }
+
+  return { role: message.role, content: message.content }
+}
+
+export function findNonDataImageUrls(messages: ApiChatMessage[]): string[] {
+  const urls: string[] = []
+  for (const message of messages) {
+    if (!Array.isArray(message.content)) {
+      continue
+    }
+    for (const part of message.content) {
+      if (
+        part &&
+        typeof part === 'object' &&
+        'type' in part &&
+        part.type === 'image_url' &&
+        'image_url' in part &&
+        part.image_url &&
+        typeof part.image_url === 'object' &&
+        'url' in part.image_url &&
+        typeof part.image_url.url === 'string'
+      ) {
+        const url = part.image_url.url
+        if (!url.startsWith('data:image/')) {
+          urls.push(url)
+        }
+      }
+    }
+  }
+  return urls
+}

package/ui/src/pages/agentThinkingContent.test.ts

@@ -0,0 +1,50 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import {
+  applyThinkingChunk,
+  createThinkingStreamState,
+  toDisplayContent,
+  toFinalContent,
+} from './agentThinkingContent'
+
+test('reasoning then answer content yields wrapped think block', () => {
+  let state = createThinkingStreamState()
+  state = applyThinkingChunk(state, { reasoning: 'I will inspect text.' })
+  state = applyThinkingChunk(state, { content: 'It says hello.' })
+
+  assert.equal(toDisplayContent(state), '<think>I will inspect text.</think>\n\nIt says hello.')
+  assert.equal(toFinalContent(state), '<think>I will inspect text.</think>\n\nIt says hello.')
+})
+
+test('multiple reasoning and content chunks preserve order', () => {
+  let state = createThinkingStreamState()
+  state = applyThinkingChunk(state, { reasoning: 'Step 1. ' })
+  state = applyThinkingChunk(state, { reasoning: 'Step 2. ' })
+  state = applyThinkingChunk(state, { content: 'Answer ' })
+  state = applyThinkingChunk(state, { content: 'final.' })
+
+  assert.equal(toFinalContent(state), '<think>Step 1. Step 2. </think>\n\nAnswer final.')
+})
+
+test('reasoning without content closes at finalize', () => {
+  let state = createThinkingStreamState()
+  state = applyThinkingChunk(state, { reasoning: 'Only internal chain.' })
+
+  assert.equal(toDisplayContent(state), '<think>Only internal chain.')
+  assert.equal(toFinalContent(state), '<think>Only internal chain.</think>')
+})
+
+test('no reasoning and no tags remains plain content', () => {
+  let state = createThinkingStreamState()
+  state = applyThinkingChunk(state, { content: 'Plain output' })
+
+  assert.equal(toDisplayContent(state), 'Plain output')
+  assert.equal(toFinalContent(state), 'Plain output')
+})
+
+test('literal think tags in content pass through unchanged', () => {
+  let state = createThinkingStreamState()
+  state = applyThinkingChunk(state, { content: '<think>raw</think>\n\nanswer' })
+
+  assert.equal(toFinalContent(state), '<think>raw</think>\n\nanswer')
+})

package/ui/src/pages/agentThinkingContent.ts

@@ -0,0 +1,57 @@
+export interface ThinkingStreamState {
+  regularContent: string
+  reasoningContent: string
+  hasReasoning: boolean
+  reasoningClosed: boolean
+}
+
+export function createThinkingStreamState(): ThinkingStreamState {
+  return {
+    regularContent: '',
+    reasoningContent: '',
+    hasReasoning: false,
+    reasoningClosed: false,
+  }
+}
+
+export function applyThinkingChunk(
+  state: ThinkingStreamState,
+  chunk: { content?: string; reasoning?: string }
+): ThinkingStreamState {
+  const next: ThinkingStreamState = { ...state }
+
+  if (chunk.reasoning) {
+    if (!next.hasReasoning) {
+      next.hasReasoning = true
+      next.reasoningContent = chunk.reasoning
+    } else {
+      next.reasoningContent += chunk.reasoning
+    }
+  }
+
+  if (chunk.content) {
+    if (next.hasReasoning && !next.reasoningClosed && next.reasoningContent) {
+      next.reasoningClosed = true
+    }
+    next.regularContent += chunk.content
+  }
+
+  return next
+}
+
+export function toDisplayContent(state: ThinkingStreamState): string {
+  if (!state.hasReasoning) {
+    return state.regularContent
+  }
+  const closingTag = state.reasoningClosed ? '</think>' : ''
+  const answerBody = state.regularContent ? `\n\n${state.regularContent}` : ''
+  return `<think>${state.reasoningContent}${closingTag}${answerBody}`
+}
+
+export function toFinalContent(state: ThinkingStreamState): string {
+  if (!state.hasReasoning) {
+    return state.regularContent
+  }
+  const answerBody = state.regularContent ? `\n\n${state.regularContent}` : ''
+  return `<think>${state.reasoningContent}</think>${answerBody}`
+}

package/ui/src/pages/dashboardTokenUsage.test.ts

@@ -0,0 +1,66 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { buildDashboardTokenChartData, buildDashboardTokenMetadata } from './dashboardTokenUsage'
+
+test('dashboard token chart rows use total tokens only', () => {
+  const rows = buildDashboardTokenChartData({
+    window: '24h',
+    totalTokens: 300,
+    totalInputTokens: 120,
+    totalOutputTokens: 180,
+    totalRequests: 2,
+    avgTokensPerRequest: 150,
+    tokenEstimatedCount: 1,
+    tokenEstimatedRate: 0.5,
+    splitUnknownCount: 1,
+    splitUnknownRate: 0.5,
+    bucketGranularity: 'hour',
+    bucketTimeZone: 'America/Chicago',
+    byDay: [
+      {
+        date: '2026-03-17T12:00',
+        count: 2,
+        tokens: 300,
+        estimated: 1,
+        inputTokens: 120,
+        outputTokens: 180,
+        splitUnknown: 1,
+      },
+    ],
+  })
+
+  assert.deepEqual(rows, [
+    {
+      date: '2026-03-17T12:00',
+      count: 2,
+      tokens: 300,
+      estimated: 1,
+    },
+  ])
+})
+
+test('dashboard token metadata keeps non-split status messaging', () => {
+  const metadata = buildDashboardTokenMetadata(
+    {
+      window: '7d',
+      totalTokens: 500,
+      totalInputTokens: 0,
+      totalOutputTokens: 0,
+      totalRequests: 5,
+      avgTokensPerRequest: 100,
+      tokenEstimatedCount: 2,
+      tokenEstimatedRate: 0.4,
+      bucketGranularity: 'day',
+      bucketTimeZone: 'UTC',
+      byDay: [],
+    },
+    'America/Chicago',
+  )
+
+  assert.deepEqual(metadata, {
+    estimatedCount: 2,
+    estimatedRate: 0.4,
+    granularityLabel: 'daily',
+    timeZoneLabel: 'UTC',
+  })
+})

package/ui/src/pages/dashboardTokenUsage.ts

@@ -0,0 +1,36 @@
+import type { TokenUsage } from '../api/client'
+
+export interface DashboardTokenChartRow {
+  date: string
+  count: number
+  tokens: number
+  estimated: number
+}
+
+export interface DashboardTokenMetadata {
+  estimatedCount: number
+  estimatedRate: number
+  granularityLabel: string
+  timeZoneLabel: string
+}
+
+export function buildDashboardTokenChartData(tokenUsage: TokenUsage | null | undefined): DashboardTokenChartRow[] {
+  return (tokenUsage?.byDay ?? []).map((row) => ({
+    date: row.date,
+    count: row.count,
+    tokens: row.tokens,
+    estimated: row.estimated,
+  }))
+}
+
+export function buildDashboardTokenMetadata(
+  tokenUsage: TokenUsage | null | undefined,
+  browserTimeZone: string,
+): DashboardTokenMetadata {
+  return {
+    estimatedCount: tokenUsage?.tokenEstimatedCount ?? 0,
+    estimatedRate: tokenUsage?.tokenEstimatedRate ?? 0,
+    granularityLabel: tokenUsage?.bucketGranularity === 'hour' ? 'hourly' : 'daily',
+    timeZoneLabel: tokenUsage?.bucketTimeZone ?? browserTimeZone,
+  }
+}

package/ui/src/pages/imageUpload.test.ts

@@ -0,0 +1,39 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import {
+  calculateContainedImageSize,
+  MAX_UPLOAD_IMAGE_HEIGHT,
+  MAX_UPLOAD_IMAGE_WIDTH,
+} from './imageUpload'
+
+test('does not resize images already within the upload bounds', () => {
+  assert.deepEqual(calculateContainedImageSize(640, 960), {
+    width: 640,
+    height: 960,
+    resized: false,
+  })
+})
+
+test('resizes portrait images to stay within the upload bounds', () => {
+  assert.deepEqual(calculateContainedImageSize(1200, 2400), {
+    width: 640,
+    height: 1280,
+    resized: true,
+  })
+})
+
+test('resizes landscape images to stay within the upload bounds', () => {
+  assert.deepEqual(calculateContainedImageSize(2400, 1200), {
+    width: 720,
+    height: 360,
+    resized: true,
+  })
+})
+
+test('preserves aspect ratio while fitting the bounding box', () => {
+  const resized = calculateContainedImageSize(2000, 1000)
+  assert.equal(resized.resized, true)
+  assert.ok(resized.width <= MAX_UPLOAD_IMAGE_WIDTH)
+  assert.ok(resized.height <= MAX_UPLOAD_IMAGE_HEIGHT)
+  assert.ok(Math.abs(resized.width / resized.height - 2) < 0.01)
+})

package/ui/src/pages/imageUpload.ts

@@ -0,0 +1,71 @@
+export const MAX_UPLOAD_IMAGE_WIDTH = 720
+export const MAX_UPLOAD_IMAGE_HEIGHT = 1280
+
+export interface ImageDimensions {
+  width: number
+  height: number
+}
+
+export interface ResizedImageDimensions extends ImageDimensions {
+  resized: boolean
+}
+
+export function calculateContainedImageSize(
+  width: number,
+  height: number,
+  maxWidth: number = MAX_UPLOAD_IMAGE_WIDTH,
+  maxHeight: number = MAX_UPLOAD_IMAGE_HEIGHT,
+): ResizedImageDimensions {
+  if (width <= 0 || height <= 0) {
+    return { width: Math.max(1, Math.floor(width)), height: Math.max(1, Math.floor(height)), resized: false }
+  }
+
+  const needsResize = width > maxWidth || height > maxHeight
+  if (!needsResize) {
+    return { width, height, resized: false }
+  }
+
+  const scale = Math.min(maxWidth / width, maxHeight / height)
+  return {
+    width: Math.max(1, Math.floor(width * scale)),
+    height: Math.max(1, Math.floor(height * scale)),
+    resized: true,
+  }
+}
+
+export async function fileToDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onerror = () => reject(reader.error)
+    reader.onload = () => resolve(reader.result as string)
+    reader.readAsDataURL(file)
+  })
+}
+
+export async function compressImageFileForUpload(file: File): Promise<string> {
+  const objectUrl = URL.createObjectURL(file)
+  try {
+    const image = new Image()
+    image.src = objectUrl
+    await image.decode()
+
+    const target = calculateContainedImageSize(image.width, image.height)
+    if (!target.resized) {
+      return await fileToDataUrl(file)
+    }
+
+    const canvas = document.createElement('canvas')
+    canvas.width = target.width
+    canvas.height = target.height
+    const context = canvas.getContext('2d')
+    if (!context) {
+      return await fileToDataUrl(file)
+    }
+
+    context.drawImage(image, 0, 0, target.width, target.height)
+    const mimeType = file.type === 'image/jpeg' || file.type === 'image/png' ? file.type : 'image/png'
+    return canvas.toDataURL(mimeType, mimeType === 'image/jpeg' ? 0.9 : undefined)
+  } finally {
+    URL.revokeObjectURL(objectUrl)
+  }
+}

package/ui/src/pages/peekFilters.test.ts

@@ -0,0 +1,29 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { filterCaptureRecords, isGetModelsRoute } from './peekFilters'
+import type { CaptureRecordSummary } from '@/api/client'
+
+test('isGetModelsRoute matches GET /v1/models routes', () => {
+  assert.equal(isGetModelsRoute({ method: 'GET', route: '/v1/models' }), true)
+  assert.equal(isGetModelsRoute({ method: 'get', route: '/v1/models?limit=20' }), true)
+  assert.equal(isGetModelsRoute({ method: 'POST', route: '/v1/models' }), false)
+  assert.equal(isGetModelsRoute({ method: 'GET', route: '/v1/chat/completions' }), false)
+})
+
+test('filterCaptureRecords removes only GET /v1/models calls when enabled', () => {
+  const records = [
+    { id: '1', method: 'GET', route: '/v1/models', timestamp: '', statusCode: 200, latencyMs: 10 },
+    { id: '2', method: 'GET', route: '/v1/models?limit=5', timestamp: '', statusCode: 200, latencyMs: 11 },
+    { id: '3', method: 'POST', route: '/v1/models', timestamp: '', statusCode: 200, latencyMs: 12 },
+    { id: '4', method: 'GET', route: '/v1/chat/completions', timestamp: '', statusCode: 200, latencyMs: 13 },
+  ] satisfies CaptureRecordSummary[]
+
+  const filtered = filterCaptureRecords(records, true)
+  assert.deepEqual(
+    filtered.map((record) => record.id),
+    ['3', '4'],
+  )
+
+  const unfiltered = filterCaptureRecords(records, false)
+  assert.equal(unfiltered.length, records.length)
+})

package/ui/src/pages/peekFilters.ts

@@ -0,0 +1,13 @@
+import type { CaptureRecordSummary } from '@/api/client'
+
+export function isGetModelsRoute(record: Pick<CaptureRecordSummary, 'method' | 'route'>): boolean {
+  return record.method.toUpperCase() === 'GET' && record.route.startsWith('/v1/models')
+}
+
+export function filterCaptureRecords(
+  records: CaptureRecordSummary[],
+  ignoreModels: boolean,
+): CaptureRecordSummary[] {
+  if (!ignoreModels) return records
+  return records.filter((record) => !isGetModelsRoute(record))
+}

package/ui/src/pages/peekMedia.test.ts

@@ -0,0 +1,58 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { extractEmbeddedMedia, redactEmbeddedMedia } from './peekMedia'
+
+test('extractEmbeddedMedia treats b64_json payloads as image media', () => {
+  const payload = {
+    created: 1773782955,
+    data: [
+      {
+        b64_json: 'AQID',
+      },
+    ],
+  }
+
+  const media = extractEmbeddedMedia('response', payload)
+
+  assert.equal(media.length, 1)
+  assert.equal(media[0]?.path, '$.data[0].b64_json')
+  assert.equal(media[0]?.source, 'response')
+  assert.equal(media[0]?.kind, 'image')
+  assert.equal(media[0]?.mime, 'image/png')
+  assert.equal(media[0]?.url, 'data:image/png;base64,AQID')
+})
+
+test('extractEmbeddedMedia prefers sibling data-url mime metadata', () => {
+  const payload = {
+    data: [
+      {
+        mime: 'image/webp',
+        b64_json: 'BBBB',
+        url: 'data:image/webp;base64,BBBB',
+      },
+    ],
+  }
+
+  const media = extractEmbeddedMedia('response', payload)
+
+  assert.equal(media.length, 1)
+  assert.equal(media[0]?.mime, 'image/webp')
+  assert.equal(media[0]?.url, 'data:image/webp;base64,BBBB')
+  assert.equal(media[0]?.origin, 'b64_json')
+})
+
+test('redactEmbeddedMedia removes inline binary payloads from pretty json', () => {
+  const payload = {
+    data: [
+      {
+        b64_json: 'AQID',
+        url: 'data:image/png;base64,AQID',
+      },
+    ],
+  }
+
+  const redacted = redactEmbeddedMedia(payload) as { data: Array<{ b64_json: string; url: string }> }
+
+  assert.match(redacted.data[0]!.b64_json, /^\[base64 media omitted: image\/png, 4 chars\]$/)
+  assert.match(redacted.data[0]!.url, /^\[data URL omitted: image\/png, 4 chars\]$/)
+})