clawport-ui 0.1.0

package/lib/audio-recorder.test.ts

@@ -0,0 +1,72 @@
+// @vitest-environment node
+import { describe, it, expect } from 'vitest'
+import { formatDuration, estimateStorageSize } from './audio-recorder'
+
+// --- formatDuration ---
+
+describe('formatDuration', () => {
+  it('formats zero seconds', () => {
+    expect(formatDuration(0)).toBe('0:00')
+  })
+
+  it('formats seconds under a minute', () => {
+    expect(formatDuration(5)).toBe('0:05')
+    expect(formatDuration(12)).toBe('0:12')
+    expect(formatDuration(59)).toBe('0:59')
+  })
+
+  it('formats exact minutes', () => {
+    expect(formatDuration(60)).toBe('1:00')
+    expect(formatDuration(120)).toBe('2:00')
+  })
+
+  it('formats minutes and seconds', () => {
+    expect(formatDuration(65)).toBe('1:05')
+    expect(formatDuration(130)).toBe('2:10')
+  })
+
+  it('pads single-digit seconds with leading zero', () => {
+    expect(formatDuration(61)).toBe('1:01')
+    expect(formatDuration(9)).toBe('0:09')
+  })
+
+  it('handles fractional seconds by flooring', () => {
+    expect(formatDuration(5.7)).toBe('0:05')
+    expect(formatDuration(65.9)).toBe('1:05')
+  })
+
+  it('handles large values', () => {
+    expect(formatDuration(3661)).toBe('61:01')
+  })
+})
+
+// --- estimateStorageSize ---
+
+describe('estimateStorageSize', () => {
+  it('estimates size from base64 data URL', () => {
+    // "data:audio/webm;base64," prefix = 23 chars
+    // base64 payload of 100 chars ≈ 75 bytes
+    const prefix = 'data:audio/webm;base64,'
+    const payload = 'A'.repeat(100)
+    const dataUrl = prefix + payload
+    const size = estimateStorageSize(dataUrl)
+    expect(size).toBe(75) // ceil(100 * 0.75)
+  })
+
+  it('returns full length when no comma found', () => {
+    const size = estimateStorageSize('no-comma-here')
+    expect(size).toBe(13)
+  })
+
+  it('handles empty payload after comma', () => {
+    const size = estimateStorageSize('data:audio/webm;base64,')
+    expect(size).toBe(0)
+  })
+
+  it('handles realistic-sized data URL', () => {
+    const prefix = 'data:audio/webm;base64,'
+    const payload = 'A'.repeat(10000) // ~7500 bytes of audio
+    const size = estimateStorageSize(prefix + payload)
+    expect(size).toBe(7500)
+  })
+})

package/lib/audio-recorder.ts

@@ -0,0 +1,169 @@
+const WAVEFORM_SAMPLES = 50
+
+function pickMimeType(): string {
+  if (typeof MediaRecorder === 'undefined') return ''
+  for (const t of ['audio/webm;codecs=opus', 'audio/mp4', 'audio/ogg']) {
+    if (MediaRecorder.isTypeSupported(t)) return t
+  }
+  return ''
+}
+
+export function formatDuration(seconds: number): string {
+  const m = Math.floor(seconds / 60)
+  const s = Math.floor(seconds % 60)
+  return `${m}:${s.toString().padStart(2, '0')}`
+}
+
+export function blobToDataUrl(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onloadend = () => resolve(reader.result as string)
+    reader.onerror = reject
+    reader.readAsDataURL(blob)
+  })
+}
+
+export function estimateStorageSize(dataUrl: string): number {
+  // base64 is ~4/3 of binary size; data URL has a prefix like "data:audio/webm;base64,"
+  const commaIndex = dataUrl.indexOf(',')
+  if (commaIndex === -1) return dataUrl.length
+  return Math.ceil((dataUrl.length - commaIndex - 1) * 0.75)
+}
+
+export interface AudioRecordingResult {
+  audioBlob: Blob
+  dataUrl: string
+  duration: number
+  waveform: number[]
+}
+
+export interface AudioRecorderHandle {
+  start: () => Promise<void>
+  stop: () => Promise<AudioRecordingResult>
+  cancel: () => void
+  getElapsed: () => number
+  isRecording: () => boolean
+}
+
+export function createAudioRecorder(): AudioRecorderHandle {
+  let mediaRecorder: MediaRecorder | null = null
+  let audioContext: AudioContext | null = null
+  let analyser: AnalyserNode | null = null
+  let stream: MediaStream | null = null
+  let chunks: Blob[] = []
+  let startTime = 0
+  let recording = false
+  let cancelled = false
+  let rafId = 0
+
+  // Raw amplitude samples collected during recording, downsampled to WAVEFORM_SAMPLES on stop
+  const rawAmplitudes: number[] = []
+
+  function collectAmplitude() {
+    if (!analyser || !recording) return
+    const data = new Uint8Array(analyser.fftSize)
+    analyser.getByteTimeDomainData(data)
+    // RMS amplitude 0-1
+    let sum = 0
+    for (let i = 0; i < data.length; i++) {
+      const v = (data[i] - 128) / 128
+      sum += v * v
+    }
+    rawAmplitudes.push(Math.sqrt(sum / data.length))
+    rafId = requestAnimationFrame(collectAmplitude)
+  }
+
+  function downsample(raw: number[], targetLen: number): number[] {
+    if (raw.length === 0) return Array(targetLen).fill(0.1)
+    const result: number[] = []
+    const step = raw.length / targetLen
+    for (let i = 0; i < targetLen; i++) {
+      const start = Math.floor(i * step)
+      const end = Math.floor((i + 1) * step)
+      let max = 0
+      for (let j = start; j < end && j < raw.length; j++) {
+        if (raw[j] > max) max = raw[j]
+      }
+      // Clamp to 0.05-1 range so bars are always visible
+      result.push(Math.max(0.05, Math.min(1, max)))
+    }
+    return result
+  }
+
+  return {
+    async start() {
+      cancelled = false
+      chunks = []
+      rawAmplitudes.length = 0
+
+      stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      const mimeType = pickMimeType()
+      mediaRecorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined)
+
+      audioContext = new AudioContext()
+      const source = audioContext.createMediaStreamSource(stream)
+      analyser = audioContext.createAnalyser()
+      analyser.fftSize = 256
+      source.connect(analyser)
+
+      mediaRecorder.ondataavailable = (e) => {
+        if (e.data.size > 0) chunks.push(e.data)
+      }
+
+      mediaRecorder.start(100) // 100ms timeslice for frequent chunks
+      startTime = Date.now()
+      recording = true
+      collectAmplitude()
+    },
+
+    async stop(): Promise<AudioRecordingResult> {
+      recording = false
+      cancelAnimationFrame(rafId)
+
+      const duration = (Date.now() - startTime) / 1000
+
+      return new Promise((resolve, reject) => {
+        if (!mediaRecorder || mediaRecorder.state === 'inactive') {
+          reject(new Error('Not recording'))
+          return
+        }
+
+        mediaRecorder.onstop = async () => {
+          // Cleanup
+          stream?.getTracks().forEach(t => t.stop())
+          audioContext?.close().catch(() => {})
+
+          const blob = new Blob(chunks, { type: mediaRecorder!.mimeType || 'audio/webm' })
+          const dataUrl = await blobToDataUrl(blob)
+          const waveform = downsample(rawAmplitudes, WAVEFORM_SAMPLES)
+
+          resolve({ audioBlob: blob, dataUrl, duration, waveform })
+        }
+
+        mediaRecorder.stop()
+      })
+    },
+
+    cancel() {
+      cancelled = true
+      recording = false
+      cancelAnimationFrame(rafId)
+      if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+        mediaRecorder.stop()
+      }
+      stream?.getTracks().forEach(t => t.stop())
+      audioContext?.close().catch(() => {})
+      chunks = []
+      rawAmplitudes.length = 0
+    },
+
+    getElapsed() {
+      if (!recording) return 0
+      return (Date.now() - startTime) / 1000
+    },
+
+    isRecording() {
+      return recording && !cancelled
+    },
+  }
+}

package/lib/conversations.test.ts

@@ -0,0 +1,331 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import {
+  addMessage,
+  markRead,
+  updateLastMessage,
+  parseMedia,
+  getOrCreateConversation,
+  loadConversations,
+  saveConversations,
+  type Message,
+  type ConversationStore,
+  type Conversation,
+} from './conversations'
+import type { Agent } from './types'
+
+// --- helpers ---
+
+function makeMessage(overrides: Partial<Message> = {}): Message {
+  return {
+    id: overrides.id ?? 'msg-1',
+    role: overrides.role ?? 'user',
+    content: overrides.content ?? 'hello',
+    timestamp: overrides.timestamp ?? 1000,
+    ...overrides,
+  }
+}
+
+function makeConversation(overrides: Partial<Conversation> = {}): Conversation {
+  return {
+    agentId: overrides.agentId ?? 'vera',
+    messages: overrides.messages ?? [],
+    unread: overrides.unread ?? 0,
+    lastActivity: overrides.lastActivity ?? 1000,
+  }
+}
+
+function makeStore(entries: Record<string, Partial<Conversation>> = {}): ConversationStore {
+  const store: ConversationStore = {}
+  for (const [id, overrides] of Object.entries(entries)) {
+    store[id] = makeConversation({ agentId: id, ...overrides })
+  }
+  return store
+}
+
+const fakeAgent: Agent = {
+  id: 'vera',
+  name: 'VERA',
+  title: 'Chief Strategy Officer',
+  reportsTo: 'jarvis',
+  directReports: ['robin'],
+  soulPath: null,
+  soul: null,
+  voiceId: null,
+  color: '#a855f7',
+  emoji: '?',
+  tools: [],
+  crons: [],
+  memoryPath: null,
+  description: 'CSO. Decides what gets built.',
+}
+
+// --- addMessage ---
+
+describe('addMessage', () => {
+  it('appends a user message without incrementing unread', () => {
+    const store = makeStore({ vera: { messages: [] } })
+    const msg = makeMessage({ role: 'user' })
+    const result = addMessage(store, 'vera', msg)
+
+    expect(result.vera.messages).toHaveLength(1)
+    expect(result.vera.messages[0]).toEqual(msg)
+    expect(result.vera.unread).toBe(0)
+  })
+
+  it('appends an assistant message and increments unread', () => {
+    const store = makeStore({ vera: { messages: [], unread: 2 } })
+    const msg = makeMessage({ role: 'assistant' })
+    const result = addMessage(store, 'vera', msg)
+
+    expect(result.vera.messages).toHaveLength(1)
+    expect(result.vera.unread).toBe(3)
+  })
+
+  it('creates a new conversation entry when agentId not in store', () => {
+    const store: ConversationStore = {}
+    const msg = makeMessage({ role: 'user' })
+    const result = addMessage(store, 'pulse', msg)
+
+    expect(result.pulse).toBeDefined()
+    expect(result.pulse.agentId).toBe('pulse')
+    expect(result.pulse.messages).toHaveLength(1)
+  })
+
+  it('does not mutate the original store (immutability)', () => {
+    const store = makeStore({ vera: { messages: [] } })
+    const msg = makeMessage()
+    const result = addMessage(store, 'vera', msg)
+
+    expect(result).not.toBe(store)
+    expect(result.vera).not.toBe(store.vera)
+    expect(store.vera.messages).toHaveLength(0)
+  })
+
+  it('preserves other agents in the store', () => {
+    const store = makeStore({
+      vera: { messages: [] },
+      pulse: { messages: [makeMessage({ id: 'existing' })] },
+    })
+    const msg = makeMessage()
+    const result = addMessage(store, 'vera', msg)
+
+    expect(result.pulse.messages).toHaveLength(1)
+    expect(result.pulse.messages[0].id).toBe('existing')
+  })
+})
+
+// --- markRead ---
+
+describe('markRead', () => {
+  it('resets unread to 0', () => {
+    const store = makeStore({ vera: { unread: 5 } })
+    const result = markRead(store, 'vera')
+    expect(result.vera.unread).toBe(0)
+  })
+
+  it('returns the same store reference when agentId is missing', () => {
+    const store = makeStore({})
+    const result = markRead(store, 'nonexistent')
+    expect(result).toBe(store)
+  })
+
+  it('does not mutate the original store', () => {
+    const store = makeStore({ vera: { unread: 3 } })
+    const result = markRead(store, 'vera')
+    expect(store.vera.unread).toBe(3)
+    expect(result.vera.unread).toBe(0)
+  })
+})
+
+// --- updateLastMessage ---
+
+describe('updateLastMessage', () => {
+  it('updates the matching message content and streaming flag', () => {
+    const store = makeStore({
+      vera: {
+        messages: [
+          makeMessage({ id: 'msg-1', content: 'old', isStreaming: true }),
+        ],
+      },
+    })
+
+    const result = updateLastMessage(store, 'vera', 'msg-1', 'new content', false)
+    expect(result.vera.messages[0].content).toBe('new content')
+    expect(result.vera.messages[0].isStreaming).toBe(false)
+  })
+
+  it('does not touch messages with different ids', () => {
+    const store = makeStore({
+      vera: {
+        messages: [
+          makeMessage({ id: 'msg-1', content: 'keep me' }),
+          makeMessage({ id: 'msg-2', content: 'update me' }),
+        ],
+      },
+    })
+
+    const result = updateLastMessage(store, 'vera', 'msg-2', 'updated', false)
+    expect(result.vera.messages[0].content).toBe('keep me')
+    expect(result.vera.messages[1].content).toBe('updated')
+  })
+
+  it('returns same store when agentId not found', () => {
+    const store = makeStore({})
+    const result = updateLastMessage(store, 'nonexistent', 'msg-1', 'x', false)
+    expect(result).toBe(store)
+  })
+
+  it('returns store unchanged when msgId not found (no crash)', () => {
+    const store = makeStore({
+      vera: { messages: [makeMessage({ id: 'msg-1', content: 'original' })] },
+    })
+    const result = updateLastMessage(store, 'vera', 'no-such-id', 'x', false)
+    expect(result.vera.messages[0].content).toBe('original')
+  })
+})
+
+// --- getOrCreateConversation ---
+
+describe('getOrCreateConversation', () => {
+  it('returns existing conversation when it exists in store', () => {
+    const existing = makeConversation({ agentId: 'vera', unread: 7 })
+    const store: ConversationStore = { vera: existing }
+
+    const result = getOrCreateConversation(store, fakeAgent)
+    expect(result).toBe(existing)
+    expect(result.unread).toBe(7)
+  })
+
+  it('creates a new conversation with a greeting when not in store', () => {
+    const store: ConversationStore = {}
+    const result = getOrCreateConversation(store, fakeAgent)
+
+    expect(result.agentId).toBe('vera')
+    expect(result.messages).toHaveLength(1)
+    expect(result.messages[0].role).toBe('assistant')
+    expect(result.messages[0].content).toContain('VERA')
+    expect(result.unread).toBe(0)
+  })
+})
+
+// --- parseMedia ---
+
+describe('parseMedia', () => {
+  it('extracts markdown image links', () => {
+    const content = 'Check this out: ![diagram](https://example.com/img.png)'
+    const media = parseMedia(content)
+    expect(media).toHaveLength(1)
+    expect(media[0].type).toBe('image')
+    expect(media[0].url).toBe('https://example.com/img.png')
+    expect(media[0].name).toBe('diagram')
+  })
+
+  it('extracts bare image URLs', () => {
+    const content = 'See https://example.com/photo.jpg for reference'
+    const media = parseMedia(content)
+    expect(media).toHaveLength(1)
+    expect(media[0].type).toBe('image')
+    expect(media[0].url).toBe('https://example.com/photo.jpg')
+  })
+
+  it('does not duplicate an image that appears in both markdown and bare form', () => {
+    const content = '![pic](https://example.com/pic.png) and also https://example.com/pic.png'
+    const media = parseMedia(content)
+    // The markdown image regex captures it first, bare regex should skip the duplicate
+    const imageMedia = media.filter(m => m.type === 'image')
+    expect(imageMedia).toHaveLength(1)
+  })
+
+  it('extracts audio URLs', () => {
+    const content = 'Listen: https://example.com/sound.mp3'
+    const media = parseMedia(content)
+    expect(media).toHaveLength(1)
+    expect(media[0].type).toBe('audio')
+    expect(media[0].url).toBe('https://example.com/sound.mp3')
+  })
+
+  it('extracts multiple media types from one message', () => {
+    const content = [
+      '![chart](https://example.com/chart.png)',
+      'https://example.com/recording.wav',
+      'https://example.com/bg.webp',
+    ].join('\n')
+    const media = parseMedia(content)
+    expect(media).toHaveLength(3)
+    expect(media.map(m => m.type)).toEqual(['image', 'image', 'audio'])
+  })
+
+  it('handles image URLs with query strings', () => {
+    const content = '![thumb](https://cdn.example.com/img.jpg?w=300&h=200)'
+    const media = parseMedia(content)
+    expect(media).toHaveLength(1)
+    expect(media[0].url).toBe('https://cdn.example.com/img.jpg?w=300&h=200')
+  })
+
+  it('returns empty array when no media is present', () => {
+    const content = 'Just a plain text message with no links'
+    const media = parseMedia(content)
+    expect(media).toHaveLength(0)
+  })
+
+  it('returns empty array for empty string', () => {
+    expect(parseMedia('')).toHaveLength(0)
+  })
+
+  it('handles multiple audio formats', () => {
+    const content = [
+      'https://example.com/a.wav',
+      'https://example.com/b.ogg',
+      'https://example.com/c.m4a',
+      'https://example.com/d.aac',
+    ].join(' ')
+    const media = parseMedia(content)
+    expect(media).toHaveLength(4)
+    expect(media.every(m => m.type === 'audio')).toBe(true)
+  })
+})
+
+// --- loadConversations / saveConversations (localStorage) ---
+
+describe('loadConversations', () => {
+  beforeEach(() => {
+    // jsdom provides localStorage
+    localStorage.clear()
+  })
+
+  it('returns empty object when nothing stored', () => {
+    const result = loadConversations()
+    expect(result).toEqual({})
+  })
+
+  it('returns parsed data when valid JSON is stored', () => {
+    const data: ConversationStore = {
+      vera: makeConversation({ agentId: 'vera' }),
+    }
+    localStorage.setItem('clawport-conversations', JSON.stringify(data))
+    const result = loadConversations()
+    expect(result.vera.agentId).toBe('vera')
+  })
+
+  it('returns empty object when localStorage contains invalid JSON', () => {
+    localStorage.setItem('clawport-conversations', 'not-json!!')
+    const result = loadConversations()
+    expect(result).toEqual({})
+  })
+})
+
+describe('saveConversations', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('persists store to localStorage', () => {
+    const data: ConversationStore = {
+      vera: makeConversation({ agentId: 'vera' }),
+    }
+    saveConversations(data)
+    const raw = localStorage.getItem('clawport-conversations')
+    expect(raw).toBeTruthy()
+    expect(JSON.parse(raw!).vera.agentId).toBe('vera')
+  })
+})

package/lib/conversations.ts

@@ -0,0 +1,117 @@
+'use client'
+
+import type { Agent } from './types'
+
+export type MediaType = 'image' | 'audio' | 'file'
+
+export interface MediaAttachment {
+  type: MediaType
+  url: string
+  name?: string
+  mimeType?: string
+  duration?: number
+  waveform?: number[]
+  size?: number
+}
+
+export interface Message {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+  timestamp: number
+  media?: MediaAttachment[]
+  isStreaming?: boolean
+}
+
+export interface Conversation {
+  agentId: string
+  messages: Message[]
+  unread: number
+  lastActivity: number
+}
+
+export type ConversationStore = Record<string, Conversation>
+
+const STORAGE_KEY = 'clawport-conversations'
+
+export function loadConversations(): ConversationStore {
+  if (typeof window === 'undefined') return {}
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    return raw ? JSON.parse(raw) : {}
+  } catch {
+    return {}
+  }
+}
+
+export function saveConversations(store: ConversationStore): void {
+  if (typeof window === 'undefined') return
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(store))
+  } catch {}
+}
+
+export function getOrCreateConversation(store: ConversationStore, agent: Agent): Conversation {
+  if (store[agent.id]) return store[agent.id]
+  return {
+    agentId: agent.id,
+    messages: [{
+      id: crypto.randomUUID(),
+      role: 'assistant',
+      content: `I'm ${agent.name}. ${agent.description} What do you need?`,
+      timestamp: Date.now(),
+    }],
+    unread: 0,
+    lastActivity: Date.now(),
+  }
+}
+
+export function addMessage(store: ConversationStore, agentId: string, msg: Message): ConversationStore {
+  const conv = store[agentId] || { agentId, messages: [], unread: 0, lastActivity: Date.now() }
+  return {
+    ...store,
+    [agentId]: {
+      ...conv,
+      messages: [...conv.messages, msg],
+      lastActivity: Date.now(),
+      unread: msg.role === 'assistant' ? conv.unread + 1 : conv.unread,
+    }
+  }
+}
+
+export function markRead(store: ConversationStore, agentId: string): ConversationStore {
+  if (!store[agentId]) return store
+  return { ...store, [agentId]: { ...store[agentId], unread: 0 } }
+}
+
+export function updateLastMessage(store: ConversationStore, agentId: string, msgId: string, content: string, isStreaming: boolean): ConversationStore {
+  const conv = store[agentId]
+  if (!conv) return store
+  const msgs = conv.messages.map(m => m.id === msgId ? { ...m, content, isStreaming } : m)
+  return { ...store, [agentId]: { ...conv, messages: msgs } }
+}
+
+export function parseMedia(content: string): MediaAttachment[] {
+  const media: MediaAttachment[] = []
+
+  const imgRegex = /!\[([^\]]*)\]\((https?:\/\/[^\)]+\.(jpg|jpeg|png|gif|webp|svg)(\?[^\)]*)?)\)/gi
+  let m: RegExpExecArray | null
+  while ((m = imgRegex.exec(content)) !== null) {
+    media.push({ type: 'image', url: m[2], name: m[1] || 'Image' })
+  }
+
+  const bareImgRegex = /(?<!\]\()https?:\/\/\S+\.(jpg|jpeg|png|gif|webp)(\?\S*)?\b/gi
+  while ((m = bareImgRegex.exec(content)) !== null) {
+    const url = m[0]
+    if (!media.find(x => x.url === url)) {
+      media.push({ type: 'image', url })
+    }
+  }
+
+  const audioRegex = /https?:\/\/\S+\.(mp3|wav|ogg|m4a|aac)(\?\S*)?\b/gi
+  while ((m = audioRegex.exec(content)) !== null) {
+    media.push({ type: 'audio', url: m[0], name: m[0].split('/').pop() })
+  }
+
+  return media
+}