import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { svelteTesting } from '@testing-library/svelte/vite'

// Inside the package, gitignored (§F4.15): pip collects it when it exists and
// installs fine without it (§F4.17). Never `build/` — setuptools prunes it
// from the sdist.
const OUT = '../kubed/selenium_flow/http/static'

// One surface per build. Each must be ONE script and ONE stylesheet, because
// page() inlines them: a shared chunk would be an import an inlined module
// cannot resolve.
export default defineConfig(({ mode }) => {
  const surface = mode === 'app' ? 'app' : 'admin'
  return {
    plugins: [svelte(), svelteTesting()],
    // The shells are copied once, by the admin build.
    publicDir: surface === 'admin' ? 'public' : false,
    build: {
      outDir: OUT,
      emptyOutDir: false,
      target: 'es2022',
      cssCodeSplit: false,
      rolldownOptions: {
        input: `src/${surface}.ts`,
        output: {
          entryFileNames: `${surface}.js`,
          assetFileNames: `${surface}[extname]`,
          codeSplitting: false,
        },
      },
    },
    test: {
      environment: 'jsdom',
      setupFiles: ['src/test/setup.ts'],
      include: ['src/**/*.test.ts'],
      restoreMocks: true,
      unstubGlobals: true,
    },
  }
})

import './app.css'
import { mount } from 'svelte'
import Admin from './admin/Admin.svelte'

const root = document.getElementById('root')!
mount(Admin, {
  target: root,
  props: { mount: root.dataset.mount ?? '', console: root.dataset.console ?? '/' },
})

import './app.css'
import { mount } from 'svelte'
import App from './App.svelte'

const root = document.getElementById('root')!
root.textContent = ''
mount(App, { target: root })

import '@testing-library/jest-dom/vitest'

import { vi } from 'vitest'

export interface Reply { status?: number; body?: unknown }
type Route = Reply | ((init: RequestInit) => Reply | Promise<Reply>)

export function deferred<T = void>() {
  let resolve!: (value: T) => void
  let reject!: (reason: unknown) => void
  const promise = new Promise<T>((a, b) => { resolve = a; reject = b })
  return { promise, resolve, reject }
}

/** A fetch that answers `"METHOD /path"`; anything else is a 404 with an error body. */
export function fakeFetch(routes: Record<string, Route>) {
  const calls: { method: string; path: string; body?: unknown; headers: Headers; signal?: AbortSignal }[] = []
  const fn = vi.fn(async (url: string, init: RequestInit = {}) => {
    const method = (init.method ?? 'GET').toUpperCase()
    const path = new URL(url, 'http://test').pathname
    calls.push({
      method, path, headers: new Headers(init.headers),
      body: init.body ? JSON.parse(String(init.body)) : undefined,
      signal: init.signal ?? undefined,
    })
    const route = routes[`${method} ${path}`]
    const reply = typeof route === 'function' ? await route(init) : route
    if (init.signal?.aborted) throw new DOMException('aborted', 'AbortError')
    const r = reply ?? { status: 404, body: { error: `no route ${method} ${path}` } }
    return new Response(JSON.stringify(r.body ?? {}), {
      status: r.status ?? 200, headers: { 'Content-Type': 'application/json' },
    })
  })
  vi.stubGlobal('fetch', fn)
  return { fn, calls }
}

export class FakeEventSource {
  static last: FakeEventSource | null = null
  onopen: (() => void) | null = null
  onmessage: ((e: { data: string }) => void) | null = null
  onerror: (() => void) | null = null
  closed = false
  constructor(public url: string) { FakeEventSource.last = this }
  close() { this.closed = true }
  emit(data: unknown) { this.onmessage?.({ data: JSON.stringify(data) }) }
}

import { render, screen } from '@testing-library/svelte'
import { expect, test } from 'vitest'
import Admin from './admin/Admin.svelte'

test('a component renders under jsdom', () => {
  render(Admin, { mount: '/flow', console: '/' })
  expect(screen.getByText('selenium-flow')).toHaveAttribute('data-mount', '/flow')
})

export type Folder = 'downloads' | 'screenshots' | 'files'

export interface FileEntry {
  name: string
  size: number
  url: string
  image?: boolean
  created?: number | null
  content_type?: string | null
}

export interface FilesData {
  downloads: FileEntry[]
  screenshots: FileEntry[]
  files: FileEntry[]
  browser: boolean
}

export interface Counts { downloads: number; screenshots: number; files: number }

export interface SessionRow {
  key: string
  name?: string | null
  owner?: string | null
  browser?: string | null
  version?: string | null
  session_id?: string | null
  live?: boolean
  attached?: boolean
  started?: number | null
  node?: string | null
  url?: string | null
  window?: string | null
  counts?: Counts | null
  files_count?: number | null
  files_rev?: string | number | null
  flows_rev?: string | number | null
}

export interface SessionsPayload { sessions: SessionRow[]; events_url?: string }

export interface FilesResponse {
  session?: SessionRow
  downloads?: FileEntry[]
  screenshots?: FileEntry[]
  files?: FileEntry[]
  browser?: boolean
}

export interface FlowSummary { name: string; step_count: number; shared?: boolean }
export interface FlowsListing { enabled: boolean; flows?: FlowSummary[]; session?: string; rev?: string | number | null }

/** A stored flow, as edited by a person: nothing about its shape is guaranteed (§F1.6). */
export interface FlowDoc {
  name: string
  shared?: boolean
  description?: string
  steps?: unknown
  parameters?: unknown
  uses?: unknown
  yaml?: string
}

export interface SecretUse { flow: string; steps: number[]; shared?: boolean; session?: string }
export interface Secret {
  name: string
  description?: string
  keys?: string[]
  restricted?: boolean
  allowed_urls?: string[]
  allowed_urls_rejected?: string | string[]
  source?: string
  location?: string
  uses?: SecretUse[]
}
export interface SecretsPayload {
  enabled: boolean
  secrets: Secret[]
  undefined: { name: string; uses: SecretUse[] }[]
}

import { describe, expect, test } from 'vitest'
import { ago, browserMark, bytes, countsText, glyphFor, metaLine, safeHref, sessionLabel } from './format'

describe('format', () => {
  test('bytes', () => {
    expect(bytes(512)).toBe('512 B')
    expect(bytes(2048)).toBe('2.0 KB')
    expect(bytes(3 * 1048576)).toBe('3.0 MB')
    expect(bytes(Number.NaN)).toBe('')
  })
  test('ago', () => {
    const now = 1_000_000_000
    expect(ago(0, now)).toBe('')
    expect(ago(now - 5_000, now)).toBe('5s ago')
    expect(ago(now - 120_000, now)).toBe('2m ago')
    expect(ago(now - 7_200_000, now)).toBe('2h ago')
  })
  test('browserMark is keyed on the browser actually running', () => {
    expect(browserMark('chrome')).toBe('🟢')
    expect(browserMark('Firefox')).toBe('🦊')
    expect(browserMark('msedge')).toBe('🌊')
    expect(browserMark('safari')).toBe('🧭')
    expect(browserMark(null)).toBe('🌐')
  })
  test('glyphFor never finds what Object gave the map', () => {
    expect(glyphFor('a.PDF')).toBe('📄')
    expect(glyphFor('noext')).toBe('📁')
    expect(glyphFor('x.constructor')).toBe('📁')
  })
  test('safeHref only lets http(s) through', () => {
    expect(safeHref('https://a.b/c')).toBe('https://a.b/c')
    expect(safeHref('javascript:alert(1)')).toBe('')
    expect(safeHref(null)).toBe('')
  })
  test('countsText says each folder in its own word, and falls back to files_count', () => {
    expect(countsText({ key: 'k', counts: { downloads: 1, screenshots: 2, files: 0 } })).toBe('1 download · 2 screenshots')
    expect(countsText({ key: 'k', files_count: 1 })).toBe('1 file')
    expect(countsText({ key: 'k' })).toBe('')
  })
  test('metaLine', () => {
    const now = 1_000_000_000
    expect(metaLine({ key: 'k', browser: 'chrome', version: '140', counts: { downloads: 0, screenshots: 1, files: 0 }, started: (now - 60_000) / 1000, node: 'n1' }, now))
      .toBe('chrome 140 · 1 screenshot · 1m ago · n1')
  })
  test('sessionLabel', () => {
    expect(sessionLabel({ key: 'k', name: 'mine' })).toBe('mine')
    expect(sessionLabel({ key: 'k', owner: 'stdio' })).toBe('stdio')
    expect(sessionLabel({ key: 'k' })).toBe('session')
  })
})

import type { SessionRow } from './types'

const GLYPH: Record<string, string> = {
  pdf: '📄', png: '🖼️', jpg: '🖼️', jpeg: '🖼️', gif: '🖼️', webp: '🖼️', svg: '🖼️',
  html: '🌐', htm: '🌐', csv: '📊', json: '📊', xml: '📊',
  zip: '🗜️', gz: '🗜️', mp4: '🎬', webm: '🎬', mov: '🎬', txt: '📝', md: '📝',
}

/* Keyed on the capability the Grid reports — the browser actually running,
   not the one asked for. */
const BROWSER: Record<string, string> = { chrome: '🟢', firefox: '🦊', msedge: '🌊', edge: '🌊', safari: '🧭' }

const has = (map: Record<string, string>, key: string) => Object.hasOwn(map, key)

export function browserMark(name?: string | null): string {
  const key = String(name ?? '').toLowerCase()
  return has(BROWSER, key) ? BROWSER[key] : '🌐'
}

export function glyphFor(name: string): string {
  const ext = (name.split('.').pop() || '').toLowerCase()
  return has(GLYPH, ext) ? GLYPH[ext] : '📁'
}

/* Escaping makes a URL safe to display, not safe to click: `javascript:` is a
   URL too. */
export const safeHref = (u: unknown): string => (/^https?:\/\//i.test(String(u ?? '')) ? String(u) : '')

export function bytes(n: number): string {
  if (!Number.isFinite(n)) return ''
  if (n < 1024) return n + ' B'
  if (n < 1048576) return (n / 1024).toFixed(1) + ' KB'
  return (n / 1048576).toFixed(1) + ' MB'
}

export function ago(ms?: number | null, now = Date.now()): string {
  if (!ms) return ''
  const s = Math.max(0, (now - ms) / 1000)
  if (s < 60) return Math.round(s) + 's ago'
  if (s < 3600) return Math.round(s / 60) + 'm ago'
  return Math.round(s / 3600) + 'h ago'
}

/* Each folder gets its own word — any one can be zero without the others
   being. Older rows carry only files_count. */
export function countsText(s: SessionRow): string {
  const c = s.counts
  if (c) {
    return ([[c.downloads, ' download'], [c.screenshots, ' screenshot'], [c.files, ' file']] as const)
      .filter(([n]) => n)
      .map(([n, word]) => n + word + (n === 1 ? '' : 's'))
      .join(' · ')
  }
  return s.files_count === undefined || s.files_count === null
    ? '' : s.files_count + ' file' + (s.files_count === 1 ? '' : 's')
}

export function metaLine(s: SessionRow, now = Date.now()): string {
  const meta = countsText(s)
  return [s.browser, s.version].filter(Boolean).join(' ')
    + (meta ? ' · ' + meta : '')
    + (s.started ? ' · ' + ago(s.started * 1000, now) : '')
    + (s.node ? ' · ' + s.node : '')
}

/* The headline is the session, not the browser: a session outlives its browsers. */
export const sessionLabel = (s: SessionRow): string => s.name || s.owner || 'session'

import { expect, test, vi } from 'vitest'
import { fakeFetch } from '../test/helpers'
import { createApi, sessionPath } from './api'

test('every call carries the bearer token and hangs off BASE', async () => {
  const { calls } = fakeFetch({ 'GET /flow/admin/sessions': { body: { sessions: [] } } })
  const api = createApi({ base: '/flow', token: () => 'tok', onUnauthorized: () => {} })
  expect(await api('/admin/sessions')).toEqual({ sessions: [] })
  expect(calls[0].headers.get('Authorization')).toBe('Bearer tok')
})

test('a body is JSON with its content type', async () => {
  const { calls } = fakeFetch({ 'PUT /x': { body: {} } })
  await createApi({ base: '', token: () => 't', onUnauthorized: () => {} })('/x', 'PUT', { yaml: 'a: 1' })
  expect(calls[0].body).toEqual({ yaml: 'a: 1' })
  expect(calls[0].headers.get('Content-Type')).toBe('application/json')
})

test('a 401 signs out and fails the call (A4)', async () => {
  fakeFetch({ 'GET /x': { status: 401 } })
  const onUnauthorized = vi.fn()
  await expect(createApi({ base: '', token: () => 't', onUnauthorized })('/x')).rejects.toThrow('unauthorized')
  expect(onUnauthorized).toHaveBeenCalledOnce()
})

test("a failure says the server's own words, else the status (A5)", async () => {
  fakeFetch({ 'GET /a': { status: 400, body: { error: "the shared 'global' library is read-only" } }, 'GET /b': { status: 502 } })
  const api = createApi({ base: '', token: () => 't', onUnauthorized: () => {} })
  await expect(api('/a')).rejects.toThrow("the shared 'global' library is read-only")
  await expect(api('/b')).rejects.toThrow('request failed (502)')
})

test('sessionPath encodes the key', () => {
  expect(sessionPath('a b/c', '/files')).toBe('/admin/sessions/a%20b%2Fc/files')
})

export type Api = <T = unknown>(path: string, method?: string, body?: unknown, signal?: AbortSignal) => Promise<T>

export function createApi(opts: { base: string; token: () => string; onUnauthorized: () => void }): Api {
  return async function api<T>(path: string, method = 'GET', body?: unknown, signal?: AbortSignal): Promise<T> {
    const res = await fetch(opts.base + path, {
      method,
      signal,
      headers: {
        Authorization: 'Bearer ' + opts.token(),
        ...(body === undefined ? {} : { 'Content-Type': 'application/json' }),
      },
      body: body === undefined ? undefined : JSON.stringify(body),
    })
    if (res.status === 401) { opts.onUnauthorized(); throw new Error('unauthorized') }
    if (!res.ok) {
      // The server's own message: it names the rule an operator hit.
      let said = ''
      try { said = (await res.json()).error || '' } catch { /* not JSON */ }
      throw new Error(said || 'request failed (' + res.status + ')')
    }
    return res.json() as Promise<T>
  }
}

export const sessionPath = (key: string, rest = ''): string =>
  '/admin/sessions/' + encodeURIComponent(key) + rest

import { expect, test, vi } from 'vitest'
import { deferred } from '../test/helpers'
import { Latest } from './latest'

test('an overtaken load never paints, even when it answers last', async () => {
  const loads = new Latest()
  const a = deferred<string>(), b = deferred<string>()
  const paint = vi.fn()
  const first = loads.run(() => a.promise, paint)
  const second = loads.run(() => b.promise, paint)
  b.resolve('B'); await second
  a.resolve('A'); await first
  expect(paint.mock.calls).toEqual([['B']])
})

test('an overtaken load is aborted', async () => {
  const loads = new Latest()
  let signal: AbortSignal | undefined
  void loads.run((s) => { signal = s; return new Promise(() => {}) }, () => {})
  void loads.run(() => Promise.resolve(1), () => {})
  expect(signal?.aborted).toBe(true)
})

test('an overtaken failure is silent too', async () => {
  const loads = new Latest()
  const a = deferred<string>()
  const fail = vi.fn()
  const first = loads.run(() => a.promise, () => {}, fail)
  await loads.run(() => Promise.resolve('B'), () => {}, fail)
  a.reject(new Error('late')); await first
  expect(fail).not.toHaveBeenCalled()
})

test('settled() waits for the newest load, not the one it was handed (the Keep race)', async () => {
  const loads = new Latest()
  const mine = deferred<string>(), poll = deferred<string>()
  const painted: string[] = []
  void loads.run(() => mine.promise, (v) => painted.push(v))
  const settled = loads.settled()
  void loads.run(() => poll.promise, (v) => painted.push(v)) // the poll overtakes
  mine.resolve('stale')
  let done = false
  void settled.then(() => { done = true })
  await Promise.resolve(); await Promise.resolve()
  expect(done).toBe(false)
  poll.resolve('fresh'); await settled
  expect(painted).toEqual(['fresh'])
})

test('abort() stops everything in flight from painting', async () => {
  const loads = new Latest()
  const a = deferred<string>()
  const paint = vi.fn()
  const run = loads.run(() => a.promise, paint)
  loads.abort()
  a.resolve('A'); await run
  expect(paint).not.toHaveBeenCalled()
})

/* One panel's loads. Two can overlap for the same session — a slow answer for
   revision A landing after a fast one for B — so only the newest may paint, and
   the older one is aborted rather than left to finish for nothing. */
export class Latest {
  #controller: AbortController | null = null
  #seq = 0
  #current: Promise<void> = Promise.resolve()

  run<T>(load: (signal: AbortSignal) => Promise<T>, paint: (value: T) => void, fail?: (error: Error) => void): Promise<void> {
    this.#controller?.abort()
    const controller = (this.#controller = new AbortController())
    const mine = ++this.#seq
    const live = () => mine === this.#seq && !controller.signal.aborted
    const done = (async () => {
      try {
        const value = await load(controller.signal)
        if (live()) paint(value)
      } catch (error) {
        if (live() && fail) fail(error as Error)
      }
    })()
    this.#current = done
    return done
  }

  /* An overtaken load returns without painting, so awaiting it alone can hand
     back data from before what the caller just did. Wait for the newest. */
  async settled(): Promise<void> {
    let seen: number
    do { seen = this.#seq; await this.#current } while (seen !== this.#seq)
  }

  abort(): void {
    this.#controller?.abort()
    this.#seq++
  }
}

import { afterEach, expect, test } from 'vitest'
import { go, hashes, listen, parse, replace, router } from './router.svelte'

afterEach(() => { history.replaceState(null, '', '#/') })

test('parse (R2)', () => {
  expect(parse('')).toEqual({ view: 'list' })
  expect(parse('#/')).toEqual({ view: 'list' })
  expect(parse('#/console')).toEqual({ view: 'console' })
  expect(parse('#/secrets')).toEqual({ view: 'secrets' })
  expect(parse('#/sessions/a%20b')).toEqual({ view: 'session', key: 'a b', tab: 'files', flow: undefined })
  expect(parse('#/sessions/k/flows')).toEqual({ view: 'session', key: 'k', tab: 'flows', flow: undefined })
  expect(parse('#/sessions/k/flows/my%2Fflow')).toEqual({ view: 'session', key: 'k', tab: 'flows', flow: 'my/flow' })
  expect(parse('#/nonsense')).toEqual({ view: 'list' })
})

test('hashes round-trip through parse', () => {
  expect(parse(hashes.flow('a b', 'f/1'))).toEqual({ view: 'session', key: 'a b', tab: 'flows', flow: 'f/1' })
  expect(hashes.session('k')).toBe('#/sessions/k')
  expect(hashes.flows('k')).toBe('#/sessions/k/flows')
})

test('replace moves the address and the route without a history entry', () => {
  const before = history.length
  replace(hashes.flows('k'))
  expect(location.hash).toBe('#/sessions/k/flows')
  expect(router.route).toEqual({ view: 'session', key: 'k', tab: 'flows', flow: undefined })
  expect(history.length).toBe(before)
})

test('go routes through hashchange', async () => {
  const stop = listen()
  go('#/secrets')
  await new Promise((r) => window.addEventListener('hashchange', r, { once: true }))
  expect(router.route).toEqual({ view: 'secrets' })
  stop()
})

/* The hash, not the history API: every other path under this mount is a real
   endpoint, and a history route would need a catch-all that answers a mistyped
   API call with HTML. A hash never reaches the server. */
export type Route =
  | { view: 'list' }
  | { view: 'console' }
  | { view: 'secrets' }
  | { view: 'session'; key: string; tab: 'files' | 'flows'; flow: string | undefined }

export function parse(hash: string): Route {
  const [view, key, tab, flow] = hash.replace(/^#\/?/, '').split('/')
  if (view === 'console') return { view: 'console' }
  if (view === 'secrets') return { view: 'secrets' }
  if (view === 'sessions' && key) {
    return {
      view: 'session',
      key: decodeURIComponent(key),
      tab: tab === 'flows' ? 'flows' : 'files',
      flow: flow ? decodeURIComponent(flow) : undefined,
    }
  }
  return { view: 'list' }
}

const enc = encodeURIComponent
export const hashes = {
  list: '#/',
  console: '#/console',
  secrets: '#/secrets',
  session: (key: string) => '#/sessions/' + enc(key),
  flows: (key: string) => '#/sessions/' + enc(key) + '/flows',
  flow: (key: string, name: string) => '#/sessions/' + enc(key) + '/flows/' + enc(name),
}

export const router = $state<{ route: Route }>({ route: parse(location.hash) })

export const go = (hash: string) => { location.hash = hash }

/* In the address bar and the route, without a history entry and without
   hashchange: picking through a dozen flows should not take a dozen Backs. */
export function replace(hash: string) {
  history.replaceState(null, '', hash)
  router.route = parse(hash)
}

export function listen(): () => void {
  const on = () => { router.route = parse(location.hash) }
  window.addEventListener('hashchange', on)
  on()
  return () => window.removeEventListener('hashchange', on)
}

import { expect, test } from 'vitest'
import { argValue, bindsSecret, listed, mapping, own, selectorText, TOOL_ICON } from './flow'

test('mapping and listed say what a thing has to be to be used as one (W8)', () => {
  expect(mapping({ a: 1 })).toEqual({ a: 1 })
  expect(mapping([1])).toEqual({})
  expect(mapping(null)).toEqual({})
  expect(listed([1])).toEqual([1])
  expect(listed({})).toEqual([])
})

test('own never finds what Object gave the map (W8)', () => {
  expect(own(TOOL_ICON, 'navigate')).toBe('🧭')
  expect(own(TOOL_ICON, 'constructor')).toBeUndefined()
  expect(own(TOOL_ICON, 'toString')).toBeUndefined()
})

test('a selector reads as one expression (W3)', () => {
  expect(selectorText({ css: 'button.go' })).toBe('css button.go')
  expect(selectorText({ xpath: '//a' })).toBe('xpath //a')
  expect(selectorText({ css: 'a', xpath: '//a' })).toBeNull()
  expect(selectorText('css a')).toBeNull()
})

test('argValue: a secret by reference, a selector unwrapped, objects as JSON', () => {
  expect(argValue('secret', { name: 'admin', key: 'token' })).toBe('admin / token')
  expect(argValue('secret', {})).toBe('a secret')
  expect(argValue('selector', { css: 'a' })).toBe('css a')
  expect(argValue('options', { a: 1 })).toBe('{"a":1}')
  expect(argValue('url', '${admin}/')).toBe('${admin}/')
  expect(argValue('n', null)).toBe('null')
})

test('bindsSecret', () => {
  expect(bindsSecret({ args: { secret: { name: 'a', key: 'b' } } })).toBe(true)
  expect(bindsSecret({ args: {} })).toBe(false)
  expect(bindsSecret(null)).toBe(false)
})

/* A stored flow is a file a person edits (§F1.6) and nothing validates its
   shape on the way out, so `steps: {}` and `parameters: 1` reach the panel —
   the screen you open in order to reach the editor and fix them. */
export const mapping = (v: unknown): Record<string, unknown> =>
  v && typeof v === 'object' && !Array.isArray(v) ? (v as Record<string, unknown>) : {}

export const listed = (v: unknown): unknown[] => (Array.isArray(v) ? v : [])

/* Keys come from that same YAML, so `tool: constructor` is reachable. */
export const own = <T>(map: Record<string, T>, key: string): T | undefined =>
  Object.hasOwn(map, key) ? map[key] : undefined

/* One glyph per action a step may dispatch to (`flowrun.RUNNABLE`); anything
   else is refused by the runner, and its ❓ is meant to look wrong. */
export const TOOL_ICON: Record<string, string> = {
  navigate: '🧭', interact: '👆', drag: '🤜', write: '✍️', press_key: '⌨️',
  extract: '🔍', execute_script: '📜', screenshot: '📷', frame: '🪟', resize: '📐',
  dialog: '💬', upload_file: '📤', print: '🖨️', assert: '✅',
}

/* JSON types already have glyphs everyone reads; at 12px an emoji is a smudge. */
export const TYPE_ICON: Record<string, string> = {
  string: '"', number: '#', integer: '#', boolean: '?', object: '{}', array: '[]',
}

/* Only `write` has a `secret` argument; it types what nobody can see. */
export const bindsSecret = (step: unknown): boolean => !!mapping(mapping(step).args).secret

/* A selector carries exactly one of css/xpath (§F2.14); the run report
   unwraps it the same way (`flows.run.summarise`). */
export function selectorText(v: unknown): string | null {
  if (!v || typeof v !== 'object' || Array.isArray(v)) return null
  const o = v as Record<string, unknown>
  const named = ['css', 'xpath'].filter((k) => own(o, k))
  return named.length === 1 && Object.keys(o).length === 1 ? named[0] + ' ' + o[named[0]] : null
}

export function argValue(key: string, v: unknown): string {
  if (key === 'secret') {
    const s = mapping(v)
    return s.name ? s.name + ' / ' + s.key : 'a secret'
  }
  const selector = selectorText(v)
  if (selector !== null) return selector
  return v !== null && typeof v === 'object' ? JSON.stringify(v) : String(v)
}

import { fireEvent, render, screen } from '@testing-library/svelte'
import { expect, test, vi } from 'vitest'
import FileGrid from './FileGrid.svelte'

const png = { name: 'hangar-check.png', size: 2048, url: '/f/1', image: true, created: Date.now() - 5000 }
const pdf = { name: 'report.pdf', size: 10, url: '/f/2' }

test('an empty grid says so (F6)', () => {
  render(FileGrid, { files: [], empty: 'No screenshots yet.' })
  expect(screen.getByText('No screenshots yet.')).toHaveClass('empty')
})

test('the default empty text', () => {
  render(FileGrid, { files: [] })
  expect(screen.getByText('No files in this session yet.')).toBeInTheDocument()
})

test('a tile: thumbnail or glyph, name with an exact class, size and age (F5, frozen selector)', () => {
  const { container } = render(FileGrid, { files: [png, pdf], base: '/root' })
  const tiles = container.querySelectorAll('.files > .file')
  expect(tiles).toHaveLength(2)
  expect(tiles[0].querySelector('img')).toHaveAttribute('src', '/root/f/1')
  expect(tiles[0].querySelector('img')).toHaveAttribute('loading', 'lazy')
  expect(tiles[1].querySelector('.glyph')).toHaveTextContent('📄')
  const name = tiles[0].querySelector('.meta > div')!
  expect(name.getAttribute('class')).toBe('name')
  expect(name).toHaveTextContent('hangar-check.png')
  expect(tiles[0].querySelector('.meta .small')).toHaveTextContent('2.0 KB · 5s ago')
  expect(tiles[0].querySelector('a.thumb')).toHaveAttribute('target', '_blank')
})

test('no action, no button — the MCP App holds no credential', () => {
  const { container } = render(FileGrid, { files: [png] })
  expect(container.querySelector('button')).toBeNull()
})

test('keep: 📌 top-left, disabled for the round trip, re-armed on failure (F5)', async () => {
  let answer!: (ok: boolean) => void
  const onkeep = vi.fn(() => new Promise<boolean>((r) => { answer = r }))
  const { container } = render(FileGrid, { files: [png], action: 'keep', onkeep })
  const btn = container.querySelector('button.act.keep') as HTMLButtonElement
  expect(btn).toHaveAttribute('aria-label', 'Keep hangar-check.png beyond this browser')
  expect(btn).toHaveAttribute('title', 'Keep it beyond this browser')
  expect(btn).toHaveTextContent('📌')
  await fireEvent.click(btn)
  expect(btn).toBeDisabled()
  answer(false); await Promise.resolve(); await Promise.resolve()
  expect(btn).not.toBeDisabled()
})

test('delete: 🗑 hands the file to the page', async () => {
  const ondelete = vi.fn()
  const { container } = render(FileGrid, { files: [png], action: 'delete', ondelete })
  const btn = container.querySelector('button.act.drop')!
  expect(btn).toHaveAttribute('aria-label', 'Delete hangar-check.png')
  await fireEvent.click(btn)
  expect(ondelete).toHaveBeenCalledWith(png)
})

test('a plain click opens the viewer; a modified click follows the link', async () => {
  const onopen = vi.fn()
  const { container } = render(FileGrid, { files: [pdf, png], onopen })
  const thumb = container.querySelectorAll('a.thumb')[1]
  await fireEvent.click(thumb, { ctrlKey: true })
  expect(onopen).not.toHaveBeenCalled()
  await fireEvent.click(thumb)
  expect(onopen).toHaveBeenCalledWith(1)
})

test('without onopen the grid opens its own read-only lightbox (P1)', async () => {
  const { container } = render(FileGrid, { files: [png] })
  await fireEvent.click(container.querySelector('a.thumb')!)
  expect(container.ownerDocument.querySelector('.lightbox')).not.toBeNull()
  expect(screen.queryByText('📌 Keep')).toBeNull()
})

import { fireEvent, render, screen } from '@testing-library/svelte'
import { expect, test, vi } from 'vitest'
import Lightbox from './Lightbox.svelte'

const a = { name: 'a.png', size: 1, url: '/a', image: true }
const b = { name: 'b.pdf', size: 1, url: '/b', content_type: 'application/pdf' }
const c = { name: 'c.zip', size: 1, url: '/c' }

test('steps through the row it was opened on, stopping at the ends (X1, X2)', async () => {
  render(Lightbox, { files: [a, b, c], index: 0, base: '/r', onclose: () => {} })
  expect(screen.getByText('1 / 3')).toBeInTheDocument()
  expect(screen.getByText('‹ Prev')).toBeDisabled()
  expect(screen.getByRole('img')).toHaveAttribute('src', '/r/a')
  await fireEvent.keyDown(document, { key: 'ArrowRight' })
  expect(screen.getByTitle('b.pdf').tagName).toBe('IFRAME')
  await fireEvent.click(screen.getByText('Next ›'))
  expect(screen.getByText('No preview for this kind of file.')).toBeInTheDocument()
  expect(screen.getByText('Next ›')).toBeDisabled()
  expect(screen.getAllByText('Download')[0]).toHaveAttribute('download', 'c.zip')
})

test('Esc, Close and the backdrop close it; keys are ignored under a modal (X2)', async () => {
  const onclose = vi.fn()
  const { container } = render(Lightbox, { files: [a, b], index: 0, onclose })
  const modal = document.createElement('div'); modal.className = 'modal'; document.body.append(modal)
  await fireEvent.keyDown(document, { key: 'ArrowRight' })
  await fireEvent.keyDown(document, { key: 'Escape' })
  expect(screen.getByText('1 / 2')).toBeInTheDocument()
  expect(onclose).not.toHaveBeenCalled()
  modal.remove()
  await fireEvent.keyDown(document, { key: 'Escape' })
  await fireEvent.click(screen.getByText('Close'))
  await fireEvent.click(container.querySelector('.lightbox')!)
  expect(onclose).toHaveBeenCalledTimes(3)
})

test('the action moves on: the refreshed list at the same index, clamped (X3)', async () => {
  const run = vi.fn(async () => {})
  const refresh = vi.fn(async (at: number) => ({ files: [a, c], index: at }))
  render(Lightbox, { files: [a, b, c], index: 1, action: { label: '📌 Keep', run }, refresh, onclose: () => {} })
  await fireEvent.click(screen.getByText('📌 Keep'))
  await vi.waitFor(() => expect(screen.getByText('2 / 2')).toBeInTheDocument())
  expect(run).toHaveBeenCalledWith(b)
  expect(screen.getByText('📌 Keep')).not.toBeDisabled()
})

test('an empty refresh closes; cancelled is silent; any other failure alerts (X3)', async () => {
  const alert = vi.fn(); vi.stubGlobal('alert', alert)
  const onclose = vi.fn()
  const r1 = render(Lightbox, { files: [a], index: 0, action: { label: 'Go', run: async () => {} }, refresh: async () => ({ files: [], index: 0 }), onclose })
  await fireEvent.click(screen.getByText('Go'))
  await vi.waitFor(() => expect(onclose).toHaveBeenCalled())
  r1.unmount()
  render(Lightbox, { files: [a], index: 0, action: { label: 'No', run: async () => { throw new Error('cancelled') } }, onclose: () => {} })
  await fireEvent.click(screen.getByText('No'))
  await vi.waitFor(() => expect(screen.getByText('No')).not.toBeDisabled())
  expect(alert).not.toHaveBeenCalled()
})