waypoi 0.0.0

package/ui/src/pages/peekMedia.ts

@@ -0,0 +1,148 @@
+export type PeekEmbeddedMedia = {
+  path: string
+  source: 'request' | 'response'
+  mime: string
+  kind: 'image' | 'audio' | 'binary'
+  url: string
+  origin: 'b64_json' | 'data_url'
+  sizeHint: number
+}
+
+type MediaSource = PeekEmbeddedMedia['source']
+
+const DATA_URL_RE = /^data:([^;,]+)(?:;[^,]*)?,(.*)$/i
+
+export function extractEmbeddedMedia(source: MediaSource, value: unknown): PeekEmbeddedMedia[] {
+  const results: PeekEmbeddedMedia[] = []
+  const seen = new Set<string>()
+  walkValue(value, source, '$', results, seen)
+  return results
+}
+
+export function redactEmbeddedMedia(value: unknown): unknown {
+  return redactValue(value)
+}
+
+function walkValue(
+  value: unknown,
+  source: MediaSource,
+  path: string,
+  results: PeekEmbeddedMedia[],
+  seen: Set<string>,
+): void {
+  if (typeof value === 'string') {
+    const parsed = parseDataUrl(value)
+    if (parsed) {
+      pushMedia(results, seen, {
+        path,
+        source,
+        mime: parsed.mime,
+        kind: kindFromMime(parsed.mime),
+        url: value,
+        origin: 'data_url',
+        sizeHint: parsed.payload.length,
+      })
+    }
+    return
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => walkValue(item, source, `${path}[${index}]`, results, seen))
+    return
+  }
+
+  if (!value || typeof value !== 'object') {
+    return
+  }
+
+  const record = value as Record<string, unknown>
+  const b64Json = typeof record.b64_json === 'string' ? record.b64_json : null
+  const siblingDataUrl = findSiblingDataUrl(record)
+  if (b64Json) {
+    const mime = siblingDataUrl?.mime ?? inferMime(record) ?? 'image/png'
+    pushMedia(results, seen, {
+      path: `${path}.b64_json`,
+      source,
+      mime,
+      kind: kindFromMime(mime),
+      url: siblingDataUrl?.url ?? `data:${mime};base64,${b64Json}`,
+      origin: 'b64_json',
+      sizeHint: b64Json.length,
+    })
+  }
+
+  for (const [key, child] of Object.entries(record)) {
+    if (b64Json && siblingDataUrl?.url === child && (key === 'url' || key === 'image_url' || key === 'audio_url')) {
+      continue
+    }
+    walkValue(child, source, `${path}.${key}`, results, seen)
+  }
+}
+
+function redactValue(value: unknown): unknown {
+  if (typeof value === 'string') {
+    const parsed = parseDataUrl(value)
+    if (!parsed) return value
+    return `[data URL omitted: ${parsed.mime}, ${parsed.payload.length} chars]`
+  }
+  if (Array.isArray(value)) {
+    return value.map(redactValue)
+  }
+  if (!value || typeof value !== 'object') {
+    return value
+  }
+
+  const record = value as Record<string, unknown>
+  const next: Record<string, unknown> = {}
+  const inferredMime = inferMime(record) ?? findSiblingDataUrl(record)?.mime ?? 'image/png'
+  for (const [key, child] of Object.entries(record)) {
+    if (key === 'b64_json' && typeof child === 'string') {
+      next[key] = `[base64 media omitted: ${inferredMime}, ${child.length} chars]`
+      continue
+    }
+    next[key] = redactValue(child)
+  }
+  return next
+}
+
+function pushMedia(results: PeekEmbeddedMedia[], seen: Set<string>, media: PeekEmbeddedMedia) {
+  const key = `${media.source}:${media.path}:${media.url}`
+  if (seen.has(key)) return
+  seen.add(key)
+  results.push(media)
+}
+
+function findSiblingDataUrl(record: Record<string, unknown>): { mime: string; payload: string; url: string } | null {
+  for (const key of ['url', 'image_url', 'audio_url']) {
+    const value = record[key]
+    if (typeof value !== 'string') continue
+    const parsed = parseDataUrl(value)
+    if (parsed) return { ...parsed, url: value }
+  }
+  return null
+}
+
+function inferMime(record: Record<string, unknown>): string | null {
+  for (const key of ['mime', 'mime_type', 'content_type', 'media_type']) {
+    const value = record[key]
+    if (typeof value === 'string' && value.includes('/')) {
+      return value
+    }
+  }
+  return null
+}
+
+function parseDataUrl(value: string): { mime: string; payload: string } | null {
+  const match = value.match(DATA_URL_RE)
+  if (!match) return null
+  return {
+    mime: match[1].trim().toLowerCase(),
+    payload: match[2],
+  }
+}
+
+function kindFromMime(mime: string): PeekEmbeddedMedia['kind'] {
+  if (mime.startsWith('image/')) return 'image'
+  if (mime.startsWith('audio/')) return 'audio'
+  return 'binary'
+}

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

@@ -0,0 +1,128 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import {
+  applyAutoTitleToSessions,
+  createDeferredAutoTitleCandidate,
+  flushDeferredAutoTitle,
+  isDefaultSessionName,
+} from './sessionAutoTitle'
+
+test('recognizes default session names', () => {
+  assert.equal(isDefaultSessionName('Session 3/17/2026'), true)
+  assert.equal(isDefaultSessionName('Trip planning'), false)
+})
+
+test('creates deferred title candidate only for default sessions with text', () => {
+  assert.deepEqual(
+    createDeferredAutoTitleCandidate('session-1', 'Session 3/17/2026', '  hello world  '),
+    { sessionId: 'session-1', seedText: 'hello world' }
+  )
+  assert.equal(createDeferredAutoTitleCandidate('session-1', 'Trip planning', 'hello world'), null)
+  assert.equal(createDeferredAutoTitleCandidate('session-1', 'Session 3/17/2026', '   '), null)
+  assert.equal(createDeferredAutoTitleCandidate(null, 'Session 3/17/2026', 'hello world'), null)
+})
+
+test('flushDeferredAutoTitle runs once and updates status lifecycle', async () => {
+  const generationStates: Array<string | null> = []
+  const resolved: Array<{ name: string }> = []
+  let cleared = 0
+  const calls: Array<{ sessionId: string; model?: string; seedText?: string }> = []
+
+  const didRun = await flushDeferredAutoTitle({
+    sessionId: 'session-1',
+    sessionName: 'Session 3/17/2026',
+    model: 'gpt-test',
+    queuedCandidate: { sessionId: 'session-1', seedText: 'hello world' },
+    generatingSessionId: null,
+    autoTitleSession: async (sessionId, payload) => {
+      calls.push({ sessionId, ...payload })
+      return { name: 'Hello world summary', titleStatus: 'generated' }
+    },
+    onGenerationChange: (sessionId) => generationStates.push(sessionId),
+    onResolved: (response) => resolved.push({ name: response.name }),
+    clearQueuedCandidate: () => {
+      cleared += 1
+    },
+  })
+
+  assert.equal(didRun, true)
+  assert.deepEqual(calls, [
+    { sessionId: 'session-1', model: 'gpt-test', seedText: 'hello world' },
+  ])
+  assert.deepEqual(generationStates, ['session-1', null])
+  assert.deepEqual(resolved, [{ name: 'Hello world summary' }])
+  assert.equal(cleared, 1)
+})
+
+test('flushDeferredAutoTitle skips duplicate or stale candidates', async () => {
+  let called = false
+
+  const staleRun = await flushDeferredAutoTitle({
+    sessionId: 'session-1',
+    sessionName: 'Session 3/17/2026',
+    queuedCandidate: { sessionId: 'session-2', seedText: 'hello world' },
+    generatingSessionId: null,
+    autoTitleSession: async () => {
+      called = true
+      return { name: 'unused' }
+    },
+    onGenerationChange: () => undefined,
+    onResolved: () => undefined,
+    clearQueuedCandidate: () => undefined,
+  })
+
+  const duplicateRun = await flushDeferredAutoTitle({
+    sessionId: 'session-1',
+    sessionName: 'Session 3/17/2026',
+    queuedCandidate: { sessionId: 'session-1', seedText: 'hello world' },
+    generatingSessionId: 'session-1',
+    autoTitleSession: async () => {
+      called = true
+      return { name: 'unused' }
+    },
+    onGenerationChange: () => undefined,
+    onResolved: () => undefined,
+    clearQueuedCandidate: () => undefined,
+  })
+
+  assert.equal(staleRun, false)
+  assert.equal(duplicateRun, false)
+  assert.equal(called, false)
+})
+
+test('flushDeferredAutoTitle clears status on failure and non-default names do not retry', async () => {
+  const generationStates: Array<string | null> = []
+  let cleared = 0
+  const errors: unknown[] = []
+
+  const failedRun = await flushDeferredAutoTitle({
+    sessionId: 'session-1',
+    sessionName: 'Session 3/17/2026',
+    queuedCandidate: { sessionId: 'session-1', seedText: 'hello world' },
+    generatingSessionId: null,
+    autoTitleSession: async () => {
+      throw new Error('boom')
+    },
+    onGenerationChange: (sessionId) => generationStates.push(sessionId),
+    onResolved: () => undefined,
+    clearQueuedCandidate: () => {
+      cleared += 1
+    },
+    onError: (error) => errors.push(error),
+  })
+
+  assert.equal(failedRun, false)
+  assert.deepEqual(generationStates, ['session-1', null])
+  assert.equal(cleared, 1)
+  assert.equal(errors.length, 1)
+
+  const sessions = applyAutoTitleToSessions(
+    [{ id: 'session-1', name: 'Session 3/17/2026', messageCount: 1, createdAt: '', updatedAt: '' }],
+    'session-1',
+    { name: 'Trip planning', titleStatus: 'generated', titleUpdatedAt: 'now' }
+  )
+  assert.equal(
+    createDeferredAutoTitleCandidate('session-1', sessions[0].name, 'another message'),
+    null
+  )
+})

package/ui/src/pages/sessionAutoTitle.ts

@@ -0,0 +1,106 @@
+import type { SessionListItem } from '../api/client'
+
+export interface DeferredAutoTitleCandidate {
+  sessionId: string
+  seedText: string
+}
+
+export interface AutoTitleSessionResponse {
+  name: string
+  titleStatus?: 'pending' | 'generated' | 'manual' | 'failed'
+  titleUpdatedAt?: string
+}
+
+export const DEFAULT_SESSION_NAME_PATTERN = /^Session\s+\d{1,2}\/\d{1,2}\/\d{2,4}$/
+
+export function isDefaultSessionName(sessionName: string): boolean {
+  return DEFAULT_SESSION_NAME_PATTERN.test(sessionName)
+}
+
+export function createDeferredAutoTitleCandidate(
+  sessionId: string | null,
+  sessionName: string,
+  seedText: string
+): DeferredAutoTitleCandidate | null {
+  const trimmed = seedText.trim()
+  if (!sessionId || !trimmed || !isDefaultSessionName(sessionName)) {
+    return null
+  }
+  return {
+    sessionId,
+    seedText: trimmed,
+  }
+}
+
+export function applyAutoTitleToSessions(
+  sessions: SessionListItem[],
+  sessionId: string,
+  response: AutoTitleSessionResponse
+): SessionListItem[] {
+  return sessions.map((item) =>
+    item.id === sessionId
+      ? {
+          ...item,
+          name: response.name,
+          titleStatus: response.titleStatus,
+          titleUpdatedAt: response.titleUpdatedAt,
+        }
+      : item
+  )
+}
+
+interface FlushDeferredAutoTitleArgs {
+  sessionId: string
+  sessionName: string
+  model?: string
+  queuedCandidate: DeferredAutoTitleCandidate | null
+  generatingSessionId: string | null
+  autoTitleSession: (
+    sessionId: string,
+    payload: { model?: string; seedText?: string }
+  ) => Promise<AutoTitleSessionResponse>
+  onGenerationChange: (sessionId: string | null) => void
+  onResolved: (response: AutoTitleSessionResponse) => void
+  clearQueuedCandidate: () => void
+  onError?: (error: unknown) => void
+}
+
+export async function flushDeferredAutoTitle({
+  sessionId,
+  sessionName,
+  model,
+  queuedCandidate,
+  generatingSessionId,
+  autoTitleSession,
+  onGenerationChange,
+  onResolved,
+  clearQueuedCandidate,
+  onError,
+}: FlushDeferredAutoTitleArgs): Promise<boolean> {
+  if (!queuedCandidate || queuedCandidate.sessionId !== sessionId) {
+    return false
+  }
+  if (generatingSessionId === sessionId) {
+    return false
+  }
+  if (!isDefaultSessionName(sessionName)) {
+    clearQueuedCandidate()
+    return false
+  }
+
+  clearQueuedCandidate()
+  onGenerationChange(sessionId)
+  try {
+    const response = await autoTitleSession(sessionId, {
+      model,
+      seedText: queuedCandidate.seedText,
+    })
+    onResolved(response)
+    return true
+  } catch (error) {
+    onError?.(error)
+    return false
+  } finally {
+    onGenerationChange(null)
+  }
+}

package/ui/src/stores/settings.ts

@@ -0,0 +1,58 @@
+/**
+ * Settings Store
+ * 
+ * Manages user preferences with localStorage persistence.
+ */
+
+export type ImageSize = '256x256' | '512x512' | '1024x1024' | '1024x1792' | '1792x1024'
+
+export interface UserSettings {
+  defaultImageSize: ImageSize
+  // Future settings can be added here
+}
+
+const STORAGE_KEY = 'waypoi-settings'
+
+const DEFAULT_SETTINGS: UserSettings = {
+  defaultImageSize: '1024x1024',
+}
+
+// Available image size options
+export const IMAGE_SIZE_OPTIONS: { value: ImageSize; label: string; aspect: string }[] = [
+  { value: '256x256', label: '256×256', aspect: '1:1' },
+  { value: '512x512', label: '512×512', aspect: '1:1' },
+  { value: '1024x1024', label: '1024×1024', aspect: '1:1' },
+  { value: '1024x1792', label: '1024×1792', aspect: '9:16 (Portrait)' },
+  { value: '1792x1024', label: '1792×1024', aspect: '16:9 (Landscape)' },
+]
+
+export function loadSettings(): UserSettings {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored) {
+      const parsed = JSON.parse(stored)
+      return { ...DEFAULT_SETTINGS, ...parsed }
+    }
+  } catch (error) {
+    console.error('Failed to load settings:', error)
+  }
+  return DEFAULT_SETTINGS
+}
+
+export function saveSettings(settings: UserSettings): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
+  } catch (error) {
+    console.error('Failed to save settings:', error)
+  }
+}
+
+export function updateSetting<K extends keyof UserSettings>(
+  key: K,
+  value: UserSettings[K]
+): UserSettings {
+  const settings = loadSettings()
+  settings[key] = value
+  saveSettings(settings)
+  return settings
+}

package/ui/src/styles/globals.css

@@ -0,0 +1,223 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Waypoi Industrial Dark Theme
+       Inspired by control room interfaces and technical dashboards
+       Deep charcoal base with amber/gold accents */
+    
+    --background: 220 15% 6%;
+    --foreground: 40 15% 92%;
+    
+    --card: 220 15% 8%;
+    --card-foreground: 40 15% 92%;
+    
+    --popover: 220 15% 10%;
+    --popover-foreground: 40 15% 92%;
+    
+    /* Amber/Gold primary - warm industrial accent */
+    --primary: 38 92% 50%;
+    --primary-foreground: 220 15% 6%;
+    
+    --secondary: 220 10% 15%;
+    --secondary-foreground: 40 10% 75%;
+    
+    --muted: 220 10% 12%;
+    --muted-foreground: 220 10% 50%;
+    
+    --accent: 38 70% 45%;
+    --accent-foreground: 220 15% 6%;
+    
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 100%;
+    
+    --success: 142 71% 45%;
+    --success-foreground: 142 71% 10%;
+    
+    --warning: 38 92% 50%;
+    --warning-foreground: 38 92% 10%;
+    
+    --border: 220 10% 18%;
+    --input: 220 10% 14%;
+    --ring: 38 92% 50%;
+    
+    --radius: 0.375rem;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans antialiased;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+
+  /* Custom scrollbar - minimal and dark */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-border rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-muted-foreground/50;
+  }
+}
+
+@layer components {
+  /* Industrial panel styling */
+  .panel {
+    @apply bg-card border border-border rounded-md;
+    box-shadow: 
+      inset 0 1px 0 0 hsl(220 10% 20% / 0.5),
+      0 4px 6px -1px hsl(0 0% 0% / 0.3);
+  }
+
+  .panel-header {
+    @apply px-4 py-3 border-b border-border flex items-center gap-3;
+    background: linear-gradient(
+      180deg,
+      hsl(220 15% 10%) 0%,
+      hsl(220 15% 8%) 100%
+    );
+  }
+
+  .panel-title {
+    @apply text-sm font-mono font-medium uppercase tracking-wider text-muted-foreground;
+  }
+
+  /* Status indicators */
+  .status-dot {
+    @apply w-2 h-2 rounded-full;
+  }
+
+  .status-dot-live {
+    @apply bg-success animate-pulse-glow;
+  }
+
+  .status-dot-degraded {
+    @apply bg-warning;
+  }
+
+  .status-dot-down {
+    @apply bg-destructive;
+  }
+
+  /* Terminal-style input */
+  .terminal-input {
+    @apply font-mono bg-input border-0 rounded-sm px-3 py-2 text-sm;
+    @apply focus:ring-1 focus:ring-primary focus:outline-none;
+    @apply placeholder:text-muted-foreground/50;
+  }
+
+  /* Metric card */
+  .metric-card {
+    @apply panel p-4 flex flex-col gap-1;
+  }
+
+  .metric-label {
+    @apply text-2xs font-mono uppercase tracking-widest text-muted-foreground;
+  }
+
+  .metric-value {
+    @apply text-2xl font-mono font-semibold text-foreground tabular-nums;
+  }
+
+  .metric-unit {
+    @apply text-sm text-muted-foreground ml-1;
+  }
+
+  /* Chat message bubbles */
+  .message-user {
+    @apply bg-primary/10 border border-primary/20 rounded-lg px-4 py-3;
+  }
+
+  .message-assistant {
+    @apply bg-secondary border border-border rounded-lg px-4 py-3;
+  }
+
+  .message-system {
+    @apply bg-muted/50 border border-dashed border-border rounded-lg px-4 py-3 text-muted-foreground;
+  }
+
+  /* Code blocks in chat */
+  .prose-code {
+    @apply font-mono text-sm bg-muted rounded px-1.5 py-0.5;
+  }
+
+  /* Glowing accent for important elements */
+  .glow-accent {
+    box-shadow: 0 0 20px hsl(38 92% 50% / 0.15);
+  }
+
+  /* Navigation active state */
+  .nav-active {
+    @apply bg-primary/10 text-primary border-l-2 border-primary;
+  }
+
+  /* Loading skeleton with industrial shimmer */
+  .skeleton {
+    @apply bg-muted animate-pulse rounded;
+  }
+}
+
+@layer utilities {
+  /* Text gradient for headings */
+  .text-gradient {
+    @apply bg-clip-text text-transparent;
+    background-image: linear-gradient(
+      135deg,
+      hsl(40 15% 92%) 0%,
+      hsl(38 92% 50%) 100%
+    );
+  }
+
+  /* Noise texture overlay */
+  .noise-overlay {
+    position: relative;
+  }
+
+  .noise-overlay::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+    opacity: 0.03;
+    pointer-events: none;
+  }
+
+  /* Grid pattern background */
+  .grid-pattern {
+    background-image: 
+      linear-gradient(hsl(220 10% 15% / 0.5) 1px, transparent 1px),
+      linear-gradient(90deg, hsl(220 10% 15% / 0.5) 1px, transparent 1px);
+    background-size: 20px 20px;
+  }
+
+  /* Scanline effect for retro feel */
+  .scanlines::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 2px,
+      hsl(0 0% 0% / 0.03) 2px,
+      hsl(0 0% 0% / 0.03) 4px
+    );
+    pointer-events: none;
+  }
+}

package/ui/src/vite-env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module 'd3-sankey'
+
+declare module '*.css' {
+  const content: string
+  export default content
+}