reqwise-core 1.0.0

package/src/renderer.ts

@@ -0,0 +1,574 @@
+import { getEntries, subscribe } from './storage'
+import ReqwiseClient from './client'
+import panel from './panel'
+import i18n from './i18n'
+
+const ENDPOINTS_KEY = 'reqwise_endpoints_v1'
+
+function safeParseJSON(s: string | null) {
+  try { return s ? JSON.parse(s) : null } catch (e) { return null }
+}
+
+function saveEndpoints(obj: any) {
+  try { localStorage.setItem(ENDPOINTS_KEY, JSON.stringify(obj)) } catch (e) { }
+}
+
+function loadEndpoints() {
+  return safeParseJSON(localStorage.getItem(ENDPOINTS_KEY)) || {}
+}
+
+function normalizePath(urlStr: string) {
+  try {
+    const u = new URL(urlStr, window.location.origin)
+    return { pathname: u.pathname, search: u.search, origin: u.origin }
+  } catch (e) {
+    return { pathname: urlStr, search: '', origin: '' }
+  }
+}
+
+function inferType(val: string) {
+  if (val === 'true' || val === 'false') return 'boolean'
+  if (!isNaN(Number(val)) && val.trim() !== '') return 'number'
+  return 'string'
+}
+
+function updateEndpointsFromEntry(entry: any) {
+  try {
+    if (!entry || !entry.url) return
+    const { pathname, search } = normalizePath(entry.url)
+    const endpoints = loadEndpoints()
+    const key = pathname
+    if (!endpoints[key]) endpoints[key] = { path: key, methods: {}, params: {}, examples: [], count: 0, lastSeen: 0 }
+    const meta = endpoints[key]
+    meta.count = (meta.count || 0) + 1
+    meta.lastSeen = Date.now()
+    const m = (entry.method || 'GET').toUpperCase()
+    meta.methods[m] = (meta.methods[m] || 0) + 1
+    if (search) {
+      const sp = new URLSearchParams(search)
+      for (const [k, v] of sp.entries()) {
+        const t = inferType(v)
+        if (!meta.params[k]) meta.params[k] = { types: {}, examples: [] }
+        meta.params[k].types[t] = (meta.params[k].types[t] || 0) + 1
+        if (!meta.params[k].examples.includes(v)) meta.params[k].examples.push(v)
+      }
+    }
+    const example = entry.url + (entry.method ? ` (${entry.method})` : '')
+    if (!meta.examples.includes(example)) meta.examples.push(example)
+    endpoints[key] = meta
+    saveEndpoints(endpoints)
+  } catch (e) {
+    console.error('[reqwise] updateEndpointsFromEntry', e)
+  }
+}
+
+function renderTabs(container: HTMLElement, active: string, onChange: (t: string)=>void) {
+  // container = .rq-body, which has .rq-tabs and .rq-main children
+  const tabsEl = container.querySelector('.rq-tabs') as HTMLElement
+  const mainEl = container.querySelector('.rq-main') as HTMLElement
+  
+  if (!tabsEl || !mainEl) {
+    console.warn('[reqwise] rq-tabs or rq-main container missing')
+    return
+  }
+  
+  // Always (re)render tabs so labels update when language changes
+  const tabsHtml = `
+    <button data-tab="current" class="rq-tab ${active==='current'?'active':''}" data-tabname="current">${i18n.t('tab_current')}</button>
+    <button data-tab="history" class="rq-tab ${active==='history'?'active':''}" data-tabname="history">${i18n.t('tab_history')}</button>
+    <button data-tab="send" class="rq-tab ${active==='send'?'active':''}" data-tabname="send">${i18n.t('tab_send')}</button>
+    <button data-tab="endpoints" class="rq-tab ${active==='endpoints'?'active':''}" data-tabname="endpoints">${i18n.t('tab_endpoints')}</button>
+  `
+  tabsEl.innerHTML = tabsHtml
+  
+  const tabs = Array.from(tabsEl.querySelectorAll('.rq-tab')) as HTMLElement[]
+  for (let i = 0; i < tabs.length; i++) {
+    const b = tabs[i]
+    b.addEventListener('click', (ev)=>{
+      const t = (ev.currentTarget as HTMLElement).getAttribute('data-tabname') || 'current'
+      // toggle active styles
+      const tabs2 = Array.from(tabsEl.querySelectorAll('.rq-tab')) as HTMLElement[]
+      for (let j = 0; j < tabs2.length; j++) { tabs2[j].classList.remove('active'); }
+      (ev.currentTarget as HTMLElement).classList.add('active')
+      onChange(t)
+    })
+  }
+}
+
+function renderCurrent(container: HTMLElement) {
+  const currentPath = window.location.pathname
+  const currentHref = window.location.href
+  const entries = getEntries().filter((e:any)=> {
+    const page = e.page || ''
+    return page.includes(currentPath) || page.includes(currentHref) || page === currentPath
+  })
+
+  const main = container.querySelector('.rq-main') as HTMLElement
+  
+  if (!entries.length) {
+    main.innerHTML = `
+      <div class="rq-empty">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
+        </svg>
+        <p>${i18n.t('no_requests_page')}</p>
+      </div>
+    `
+    return
+  }
+
+  const html = entries.map((e:any) => formatCard(e)).join('')
+  main.innerHTML = html
+}
+
+function formatCard(e: any) {
+  const statusBadge = getStatusBadge(e.status)
+  const sourceClass = e.source === 'manual' ? 'manual' : ''
+  const errorClass = e.error ? 'error' : ''
+  const duration = e.duration ? `${e.duration}ms` : '—'
+  const statusText = e.statusText ? e.statusText : ''
+  
+  return `
+    <div class="rq-card">
+      <div class="rq-card-header">
+        <h3 class="rq-card-title">${e.method || 'GET'} ${extractPath(e.url)}</h3>
+        ${e.source === 'manual' ? ('<span class="rq-badge">' + i18n.t('manual_badge') + '</span>') : ''}
+        ${statusBadge}
+      </div>
+      
+      <div class="rq-meta">
+        <div class="rq-meta-item">
+          <span class="rq-meta-label">${i18n.t('form_url')}:</span>
+          <code class="rq-meta-code">${escapeHtml(e.url)}</code>
+        </div>
+        ${e.status ? `
+          <div class="rq-meta-item">
+            <span class="rq-meta-label">${i18n.t('status')}:</span>
+            <code class="rq-meta-status ${getStatusClass(e.status)}">${e.status}${statusText ? ' ' + statusText : ''}</code>
+          </div>
+        ` : ''}
+        <div class="rq-meta-item">
+          <span class="rq-meta-label">${i18n.t('duration')}:</span>
+          <code class="rq-meta-code">${duration}</code>
+        </div>
+        <div class="rq-meta-item">
+          <span class="rq-meta-label">${i18n.t('time')}:</span>
+          <code class="rq-meta-code">${new Date(e.timestamp).toLocaleTimeString()}</code>
+        </div>
+      </div>
+
+      ${e.requestBody && ['POST', 'PUT', 'PATCH'].includes(e.method || '') ? `
+        <div class="rq-section">
+          <div class="rq-section-label">${i18n.t('request')} ${i18n.t('body')}</div>
+          <div class="rq-json">${highlightJSON(e.requestBody)}</div>
+        </div>
+      ` : ''}
+
+      ${e.error ? `
+        <div class="rq-section">
+          <div class="rq-section-label">${i18n.t('error_label')}</div>
+          <div style="background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 6px; padding: 12px; color: #ef4444; font-size: 13px;">
+            <strong>${e.error.message || 'Unknown error'}</strong>
+            ${e.error.stack ? `<pre style="margin-top: 8px; font-size: 12px; white-space: pre-wrap;">${escapeHtml(e.error.stack)}</pre>` : ''}
+          </div>
+        </div>
+      ` : ''}
+
+      ${e.responseBody !== undefined ? `
+        <div class="rq-section">
+          <div class="rq-section-label">${i18n.t('response_label')}</div>
+          <div class="rq-json">${highlightJSON(e.responseBody)}</div>
+        </div>
+      ` : ''}
+    </div>
+  `
+}
+
+function highlightJSON(obj: any): string {
+  if (!obj) return 'null'
+  try {
+    const json = typeof obj === 'string' ? obj : JSON.stringify(obj, null, 2)
+    return highlightJSONString(json)
+  } catch (e) {
+    return escapeHtml(String(obj))
+  }
+}
+
+function highlightJSONString(str: string): string {
+  return str
+    .split('\n')
+    .map(line => {
+      // Key: "someKey":
+      const keyMatch = line.match(/^(\s*)("[\w\s]+")(:\s*)(.*)/)
+      if (keyMatch) {
+        const [, indent, key, colon, rest] = keyMatch
+        const keyHTML = `<span class="rq-json-key">${key}</span>`
+        const colonHTML = `<span class="rq-json-bracket">${colon}</span>`
+        const restHTML = highlightValue(rest.trim())
+        return `<div>${escapeHtml(indent)}<span>${keyHTML}</span>${colonHTML}${restHTML}</div>`
+      }
+      return `<div>${highlightValue(line)}</div>`
+    })
+    .join('')
+}
+
+function highlightValue(str: string): string {
+  const trimmed = str.trim()
+  
+  // String
+  if (trimmed.startsWith('"')) {
+    return `<span class="rq-json-string">${escapeHtml(str)}</span>`
+  }
+  // Number
+  if (/^-?\d+(\.\d+)?[,]?$/.test(trimmed)) {
+    return `<span class="rq-json-number">${escapeHtml(str)}</span>`
+  }
+  // Boolean
+  if (/^(true|false)[,]?$/.test(trimmed)) {
+    return `<span class="rq-json-boolean">${escapeHtml(str)}</span>`
+  }
+  // Null
+  if (/^null[,]?$/.test(trimmed)) {
+    return `<span class="rq-json-null">${escapeHtml(str)}</span>`
+  }
+  // Brackets
+  return `<span class="rq-json-bracket">${escapeHtml(str)}</span>`
+}
+
+function getStatusBadge(status?: number): string {
+  if (!status) return ''
+  if (status >= 200 && status < 300) {
+    return `<span class="rq-badge success">${i18n.t('status_success')}</span>`
+  } else if (status >= 400 && status < 500) {
+    return `<span class="rq-badge error">${i18n.t('status_client_error')}</span>`
+  } else if (status >= 500) {
+    return `<span class="rq-badge error">${i18n.t('status_server_error')}</span>`
+  }
+  return ''
+}
+
+function getStatusClass(status: number): string {
+  if (status >= 200 && status < 300) return 'status-2xx'
+  if (status >= 400 && status < 500) return 'status-4xx'
+  if (status >= 500) return 'status-5xx'
+  return ''
+}
+
+function extractPath(url: string): string {
+  try {
+    const u = new URL(url, window.location.origin)
+    return u.pathname + u.search
+  } catch (e) {
+    return url
+  }
+}
+
+function renderHistory(container: HTMLElement) {
+  const entries = getEntries()
+  const main = container.querySelector('.rq-main') as HTMLElement
+  
+  if (!entries.length) {
+    main.innerHTML = `
+      <div class="rq-empty">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
+        </svg>
+        <p>${i18n.t('no_history_yet')}</p>
+      </div>
+    `
+    return
+  }
+
+  main.innerHTML = `
+    <div class="rq-section" style="margin-bottom: 16px;">
+      <input type="text" class="rq-filter rq-form-input" placeholder="${i18n.t('filter_placeholder')}" style="width: 100%;" />
+    </div>
+    <div class="rq-list"></div>
+  `
+
+  function renderList(items: any[]) {
+    const list = main.querySelector('.rq-list') as HTMLElement
+    if (!items.length) {
+      list.innerHTML = `<div class="rq-empty" style="min-height: 200px;"><p>${i18n.t('no_matching_requests')}</p></div>`
+      return
+    }
+    list.innerHTML = items.map((e:any) => formatHistoryCard(e)).join('')
+  }
+
+  const filter = main.querySelector('.rq-filter') as HTMLInputElement
+  filter.addEventListener('input', () => {
+    const q = filter.value.toLowerCase()
+    const filtered = entries.filter((e:any) => 
+      (e.method || '').toLowerCase().includes(q) ||
+      (e.status || '').toString().includes(q) ||
+      (e.url || '').toLowerCase().includes(q) ||
+      (e.page || '').toLowerCase().includes(q)
+    )
+    renderList(filtered)
+  })
+
+  renderList(entries)
+}
+
+function formatHistoryCard(e: any): string {
+  const statusBadge = getStatusBadge(e.status)
+  const duration = e.duration ? `${e.duration}ms` : '—'
+  const statusText = e.statusText ? e.statusText : ''
+
+  return `
+    <div class="rq-card" style="border: 1px solid var(--rq-border); border-radius: 8px; padding: 16px; margin-bottom: 12px;">
+      <div class="rq-card-header">
+        <h4 class="rq-card-title">${e.method || 'GET'} ${extractPath(e.url)}</h4>
+        ${statusBadge}
+        ${e.source === 'manual' ? ('<span class="rq-badge">' + i18n.t('manual_badge') + '</span>') : ''}
+      </div>
+      
+      <div class="rq-meta" style="gap: 12px; margin-top: 8px;">
+        <div class="rq-meta-item">
+          <span class="rq-meta-label">${i18n.t('endpoint_label')}:</span>
+          <code class="rq-meta-code">${escapeHtml(e.url)}</code>
+        </div>
+        ${e.status ? `
+          <div class="rq-meta-item">
+            <span class="rq-meta-label">${i18n.t('status')}:</span>
+            <code class="rq-meta-status ${getStatusClass(e.status)}">${e.status}</code>
+          </div>
+        ` : ''}
+        <div class="rq-meta-item">
+          <span class="rq-meta-label">${i18n.t('time')}:</span>
+          <code class="rq-meta-code">${new Date(e.timestamp).toLocaleTimeString()}</code>
+        </div>
+      </div>
+    </div>
+  `
+}
+
+function renderSend(container: HTMLElement) {
+  const main = container.querySelector('.rq-main') as HTMLElement
+  main.innerHTML = `
+    <form class="rq-form" style="display: flex; flex-direction: column; gap: 16px;">
+      
+      <div class="rq-form-group">
+        <label class="rq-form-label">${i18n.t('form_method')}</label>
+        <select name="method" class="rq-form-select">
+          <option>GET</option>
+          <option>POST</option>
+          <option>PUT</option>
+          <option>PATCH</option>
+          <option>DELETE</option>
+        </select>
+      </div>
+
+      <div class="rq-form-group">
+        <label class="rq-form-label">${i18n.t('form_url')}</label>
+        <input type="text" name="url" class="rq-form-input" placeholder="https://api.example.com/users" />
+      </div>
+
+      <div class="rq-form-group">
+        <label class="rq-form-label">${i18n.t('form_headers')}</label>
+        <textarea name="headers" class="rq-form-textarea" placeholder='{"Authorization": "Bearer token", "Content-Type": "application/json"}'></textarea>
+      </div>
+
+      <div class="rq-form-group">
+        <label class="rq-form-label">${i18n.t('form_body')}</label>
+        <textarea name="body" class="rq-form-textarea" placeholder='{"name": "John", "email": "john@example.com"}'></textarea>
+      </div>
+
+      <div style="display: flex; gap: 8px;">
+        <button type="button" class="rq-btn primary" style="flex: 1;">${i18n.t('send_request')}</button>
+        <button type="button" class="rq-btn" style="flex: 1;">${i18n.t('clear_form')}</button>
+      </div>
+
+      <div class="rq-response" style="margin-top: 16px;"></div>
+    </form>
+  `
+
+  const form = main.querySelector('.rq-form') as HTMLFormElement
+  const sendBtn = form.querySelector('button:first-of-type') as HTMLElement
+  const clearBtn = form.querySelector('button:last-of-type') as HTMLElement
+  const responseDiv = form.querySelector('.rq-response') as HTMLElement
+
+  clearBtn.addEventListener('click', (e) => {
+    e.preventDefault()
+    form.reset()
+    responseDiv.innerHTML = ''
+  })
+
+  sendBtn.addEventListener('click', async (e) => {
+    e.preventDefault()
+    const method = (form.elements.namedItem('method') as HTMLSelectElement).value
+    const url = (form.elements.namedItem('url') as HTMLInputElement).value
+    const headersStr = (form.elements.namedItem('headers') as HTMLTextAreaElement).value
+    const bodyStr = (form.elements.namedItem('body') as HTMLTextAreaElement).value
+
+    if (!url) {
+      responseDiv.innerHTML = '<div style="color: #ef4444; padding: 12px; background: rgba(239,68,68,0.1); border-radius: 6px;">' + i18n.t('enter_url_warning') + '</div>'
+      return
+    }
+
+    try {
+      responseDiv.innerHTML = '<div style="color: var(--rq-fg-secondary); padding: 12px;">' + i18n.t('loading') + '</div>'
+
+      let headers: any = {}
+      try {
+        headers = headersStr ? JSON.parse(headersStr) : {}
+      } catch (e) {}
+
+      let body: any = undefined
+      if (method !== 'GET' && bodyStr) {
+        try {
+          body = JSON.parse(bodyStr)
+        } catch (e) {
+          body = bodyStr
+        }
+      }
+
+      const res = await ReqwiseClient.fetch(url, {
+        method,
+        headers,
+        body: body ? (typeof body === 'string' ? body : JSON.stringify(body)) : undefined
+      })
+
+      const text = await res.text()
+      let displayText = text
+      try {
+        displayText = JSON.stringify(JSON.parse(text), null, 2)
+      } catch (e) {}
+
+      const statusClass = res.status >= 200 && res.status < 300 ? 'status-2xx' : 'status-4xx'
+      responseDiv.innerHTML = `
+        <div class="rq-section">
+          <div class="rq-section-label">${i18n.t('response_label')}</div>
+          <div style="display: flex; gap: 8px; margin-bottom: 12px;">
+            <code class="rq-meta-status ${statusClass}">${res.status} ${res.statusText}</code>
+            <code class="rq-meta-code">${text.length} ${i18n.t('bytes')}</code>
+          </div>
+          <div class="rq-json">${highlightJSON(displayText)}</div>
+        </div>
+      `
+    } catch (err: any) {
+      responseDiv.innerHTML = `
+        <div class="rq-section">
+          <div class="rq-section-label">${i18n.t('error_label')}</div>
+          <div style="background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 6px; padding: 12px; color: #ef4444; font-size: 13px;">
+            <strong>${err.message || i18n.t('request_failed')}</strong>
+          </div>
+        </div>
+      `
+    }
+  })
+}
+
+function escapeHtml(s: string) {
+  return s.replace(/[&<>"']/g, (c)=>({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c] || c))
+}
+
+function renderEndpoints(container: HTMLElement) {
+  const main = container.querySelector('.rq-main') as HTMLElement
+  const endpoints = loadEndpoints()
+  const keys = Object.keys(endpoints).sort((a, b) => (endpoints[b].lastSeen || 0) - (endpoints[a].lastSeen || 0))
+
+  if (!keys.length) {
+    main.innerHTML = `
+      <div class="rq-empty">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
+        </svg>
+        <p>${i18n.t('no_endpoints')}</p>
+      </div>
+    `
+    return
+  }
+
+  const html = keys.map(k => {
+    const e = endpoints[k]
+    const methods = Object.keys(e.methods || {})
+      .map(m => `<code class="rq-meta-code">${m}(${e.methods[m]})</code>`)
+      .join('')
+    
+    const params = Object.keys(e.params || {})
+      .map(p => {
+        const types = Object.keys(e.params[p].types || {}).join(', ')
+        const examples = (e.params[p].examples || []).slice(0, 2).join(', ')
+        return `
+          <div style="margin-bottom: 8px;">
+            <code class="rq-meta-code">${p}</code>
+            <span style="color: var(--rq-fg-secondary); font-size: 12px;">• ${types}${examples ? ' • ' + examples : ''}</span>
+          </div>
+        `
+      })
+      .join('')
+
+    const examples = (e.examples || []).slice(0, 3).map((ex: any) => `<code class="rq-meta-code">${escapeHtml(ex)}</code>`).join('<br/>')
+
+    return `
+      <div class="rq-card" style="border: 1px solid var(--rq-border); border-radius: 8px; padding: 16px; margin-bottom: 12px;">
+        <div class="rq-card-header">
+          <h4 class="rq-card-title">${escapeHtml(e.path)}</h4>
+            <span style="background: var(--rq-bg-secondary); padding: 4px 12px; border-radius: 4px; font-size: 12px; color: var(--rq-fg-secondary);">${e.count || 0} ${i18n.t('hits')}</span>
+        </div>
+
+        <div class="rq-section" style="margin-top: 12px;">
+          <div class="rq-section-label">${i18n.t('methods')}</div>
+          <div style="display: flex; gap: 8px; flex-wrap: wrap;">${methods}</div>
+        </div>
+
+        ${params ? `
+          <div class="rq-section" style="margin-top: 12px;">
+            <div class="rq-section-label">${i18n.t('parameters')}</div>
+            <div>${params}</div>
+          </div>
+        ` : ''}
+
+        <div class="rq-section" style="margin-top: 12px;">
+          <div class="rq-section-label">${i18n.t('examples')}</div>
+          <div>${examples || ('<span style="color: var(--rq-fg-secondary);">' + i18n.t('no_examples') + '</span>')}</div>
+        </div>
+
+        <div style="margin-top: 12px; font-size: 12px; color: var(--rq-fg-secondary);">
+          ${i18n.t('last_seen')}: ${new Date(e.lastSeen).toLocaleTimeString()}
+        </div>
+      </div>
+    `
+  }).join('')
+
+  main.innerHTML = html
+}
+
+export function renderer(container: HTMLElement) {
+  try {
+    renderTabs(container, 'current', (tab)=>{
+      if (tab === 'current') renderCurrent(container)
+      else if (tab === 'history') renderHistory(container)
+      else if (tab === 'send') renderSend(container)
+      else if (tab === 'endpoints') renderEndpoints(container)
+    })
+    // Note: initial render happens via subscription callback below (subscribe calls immediately)
+
+    // process existing entries into endpoints
+    try { getEntries().forEach((e:any)=> updateEndpointsFromEntry(e)) } catch(e){}
+
+    // subscribe to storage updates — this immediately calls callback with current snapshot
+    const unsub = subscribe((list:any[])=>{
+      // update endpoints for latest
+      if (list && list.length) updateEndpointsFromEntry(list[0])
+      // re-render the currently active tab
+      const panelEl = document.getElementById('reqwise-panel')
+      if (!panelEl) return
+      const active = panelEl.querySelector('.rq-tab.active') as HTMLElement | null
+      if (!active) return
+      const tabName = active.getAttribute('data-tabname')
+      if (tabName === 'current') renderCurrent(panelEl)
+      else if (tabName === 'history') renderHistory(panelEl)
+      else if (tabName === 'endpoints') renderEndpoints(panelEl)
+    })
+
+    ;(container as any)._reqwise_unsub = unsub
+  } catch (e) {
+    console.error('[reqwise] renderer error', e)
+  }
+}
+
+// auto-register removed: ReqwiseDevTools explicitly calls panel.setRenderer(renderer)
+
+export default renderer

package/src/storage.ts

@@ -0,0 +1,102 @@
+import { ReqwiseEntry, ReqwiseConfig } from './types'
+
+const STORAGE_KEY = 'reqwise_history_v1'
+
+let config: ReqwiseConfig = {
+  maxItems: 200,
+  persistHistory: true,
+}
+
+let memory: ReqwiseEntry[] = []
+const subscribers: Array<(items: ReqwiseEntry[]) => void> = []
+
+function canUseLocalStorage() {
+  try {
+    return typeof window !== 'undefined' && typeof window.localStorage !== 'undefined'
+  } catch (e) {
+    return false
+  }
+}
+
+function notify() {
+  const snapshot = memory.slice()
+  for (const s of subscribers) s(snapshot)
+}
+
+function load() {
+  if (!config.persistHistory) return
+  if (!canUseLocalStorage()) return
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY)
+    if (!raw) return
+    const parsed = JSON.parse(raw) as ReqwiseEntry[]
+    memory = Array.isArray(parsed) ? parsed.slice(-config.maxItems!) : []
+  } catch (e) {
+    memory = []
+  }
+}
+
+function persist() {
+  if (!config.persistHistory) return
+  if (!canUseLocalStorage()) return
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(memory))
+  } catch (e) {
+    // ignore
+  }
+}
+
+export function initStorage(cfg?: Partial<ReqwiseConfig>) {
+  config = { ...config, ...(cfg || {}) } as ReqwiseConfig
+  if (config.persistHistory) load()
+}
+
+export function saveEntry(entry: ReqwiseEntry) {
+  memory.push(entry)
+  if (config.maxItems && memory.length > config.maxItems) {
+    memory = memory.slice(-config.maxItems)
+  }
+  persist()
+  notify()
+}
+
+export function getEntries(): ReqwiseEntry[] {
+  return memory.slice().reverse()
+}
+
+export function clearEntries() {
+  memory = []
+  if (canUseLocalStorage()) {
+    try {
+      window.localStorage.removeItem(STORAGE_KEY)
+    } catch (e) {
+      // ignore
+    }
+  }
+  notify()
+}
+
+export function subscribe(fn: (items: ReqwiseEntry[]) => void) {
+  subscribers.push(fn)
+  // call immediately with current snapshot
+  fn(memory.slice().reverse())
+  return () => {
+    const idx = subscribers.indexOf(fn)
+    if (idx !== -1) subscribers.splice(idx, 1)
+  }
+}
+
+export function replaceAll(entries: ReqwiseEntry[]) {
+  memory = entries.slice(-config.maxItems!)
+  persist()
+  notify()
+}
+
+export default {
+  initStorage,
+  saveEntry,
+  getEntries,
+  clearEntries,
+  subscribe,
+  replaceAll,
+}