@mseep/anything-analyzer 3.6.50

package/src/renderer/components/RequestDetail.tsx

@@ -0,0 +1,202 @@
+import React, { useMemo, useState } from 'react'
+import { Tag, Empty } from '../ui'
+import type { CapturedRequest, JsHookRecord } from '@shared/types'
+import styles from './RequestDetail.module.css'
+
+interface RequestDetailProps {
+  request: CapturedRequest | null
+  hooks: JsHookRecord[]
+}
+
+function safeParse(json: string | null): Record<string, string> | null {
+  if (!json) return null
+  try { return JSON.parse(json) } catch { return null }
+}
+
+function formatContent(content: string | null, contentType?: string | null): string {
+  if (!content) return '(empty)'
+  const isJson = contentType?.includes('application/json') || content.trimStart().startsWith('{') || content.trimStart().startsWith('[')
+  if (isJson) {
+    try { return JSON.stringify(JSON.parse(content), null, 2) } catch { return content }
+  }
+  return content
+}
+
+function extractPath(url: string): string {
+  try {
+    const parsed = new URL(url)
+    return parsed.pathname + parsed.search
+  } catch {
+    return url
+  }
+}
+
+const METHOD_COLORS: Record<string, string> = {
+  GET: 'var(--color-success)',
+  POST: 'var(--color-info)',
+  PUT: 'var(--color-orange)',
+  DELETE: 'var(--color-error)',
+  PATCH: 'var(--color-info)',
+}
+
+const HOOK_TYPE_COLORS: Record<string, 'info' | 'success' | 'purple' | 'orange'> = {
+  fetch: 'info',
+  xhr: 'success',
+  crypto: 'purple',
+  crypto_lib: 'purple',
+  cookie_set: 'orange',
+}
+
+// Sensitive header value highlighting
+const HIGHLIGHT_HEADERS: Record<string, string> = {
+  authorization: 'var(--color-warning)',
+  'x-ss-token': 'var(--color-purple)',
+  'x-csrf-token': 'var(--color-warning)',
+  cookie: 'var(--color-orange)',
+  'set-cookie': 'var(--color-orange)',
+}
+
+type DetailTab = 'headers' | 'body' | 'response' | 'hooks'
+
+// KV row component for headers
+const KVRow: React.FC<{ k: string; v: string }> = ({ k, v }) => {
+  const highlight = HIGHLIGHT_HEADERS[k.toLowerCase()]
+  return (
+    <div className={styles.kvRow}>
+      <div className={styles.kvKey}>{k}</div>
+      <div className={styles.kvVal} style={highlight ? { color: highlight } : undefined}>{v}</div>
+    </div>
+  )
+}
+
+// Headers tab — KV pairs layout
+const HeadersTab: React.FC<{ request: CapturedRequest }> = ({ request }) => {
+  const reqHeaders = safeParse(request.request_headers)
+  const resHeaders = safeParse(request.response_headers)
+  return (
+    <div className={styles.kvSection}>
+      <div className={styles.sectionLabel}>REQUEST HEADERS</div>
+      {reqHeaders ? (
+        Object.entries(reqHeaders).map(([k, v]) => <KVRow key={k} k={k} v={String(v)} />)
+      ) : (
+        <div className={styles.emptyHint}>(none)</div>
+      )}
+      <div className={styles.sectionLabel} style={{ marginTop: 14 }}>RESPONSE HEADERS</div>
+      {resHeaders ? (
+        Object.entries(resHeaders).map(([k, v]) => <KVRow key={k} k={k} v={String(v)} />)
+      ) : (
+        <div className={styles.emptyHint}>(none)</div>
+      )}
+    </div>
+  )
+}
+
+// Body tab
+const BodyTab: React.FC<{ request: CapturedRequest }> = ({ request }) => (
+  <div className={styles.kvSection}>
+    <div className={styles.sectionLabel}>REQUEST BODY</div>
+    <pre className={styles.codeBlock}>{formatContent(request.request_body, request.content_type)}</pre>
+  </div>
+)
+
+// Response tab
+const ResponseTab: React.FC<{ request: CapturedRequest }> = ({ request }) => (
+  <div className={styles.kvSection}>
+    <div className={styles.metaGrid}>
+      <div className={styles.metaLabel}>Status</div>
+      <div className={styles.metaValue}>{request.status_code ?? '--'}</div>
+      <div className={styles.metaLabel}>Content-Type</div>
+      <div className={styles.metaValue}>{request.content_type ?? '--'}</div>
+      <div className={styles.metaLabel}>Duration</div>
+      <div className={styles.metaValue}>{request.duration_ms != null ? `${request.duration_ms} ms` : '--'}</div>
+    </div>
+    <div className={styles.sectionLabel}>RESPONSE BODY</div>
+    <pre className={styles.codeBlock}>{formatContent(request.response_body, request.content_type)}</pre>
+  </div>
+)
+
+// Hooks tab
+const HooksTab: React.FC<{ hooks: JsHookRecord[] }> = ({ hooks }) => {
+  if (hooks.length === 0) return <Empty description="No related hooks found" />
+  return (
+    <div className={styles.hookList}>
+      {hooks.map((hook) => (
+        <div key={hook.id} className={styles.hookItem}>
+          <div className={styles.hookHeader}>
+            <Tag color={HOOK_TYPE_COLORS[hook.hook_type] || 'default'}>{hook.hook_type}</Tag>
+            <code className={styles.hookFn}>{hook.function_name}</code>
+            <span className={styles.hookTime}>{new Date(hook.timestamp).toLocaleTimeString()}</span>
+          </div>
+          <div className={styles.hookArgs}>{hook.arguments}</div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const TAB_LIST: { key: DetailTab; label: string }[] = [
+  { key: 'headers', label: 'Headers' },
+  { key: 'body', label: 'Body' },
+  { key: 'response', label: 'Response' },
+  { key: 'hooks', label: 'Hooks' },
+]
+
+const RequestDetail: React.FC<RequestDetailProps> = ({ request, hooks }) => {
+  const [activeKey, setActiveKey] = useState<DetailTab>('headers')
+
+  const relatedHooks = useMemo(() => {
+    if (!request) return []
+    return hooks.filter((h) => {
+      if (h.related_request_id === request.id) return true
+      const timeDiff = request.timestamp - h.timestamp
+      return timeDiff >= 0 && timeDiff <= 500
+    })
+  }, [request, hooks])
+
+  if (!request) {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', minHeight: 200 }}>
+        <Empty description="Select a request to view details" />
+      </div>
+    )
+  }
+
+  const methodColor = METHOD_COLORS[request.method.toUpperCase()] || 'var(--text-muted)'
+
+  return (
+    <div className={styles.container}>
+      {/* Header: METHOD STATUS · TIME */}
+      <div className={styles.detailHeader}>
+        <div className={styles.detailTitle}>
+          <span style={{ color: methodColor, fontWeight: 600 }}>{request.method.toUpperCase()}</span>
+          {' '}
+          {request.status_code ?? '--'} · {request.duration_ms != null ? `${request.duration_ms}ms` : '--'}
+        </div>
+        <div className={styles.detailUrl}>{request.url}</div>
+      </div>
+
+      {/* Simple text tabs */}
+      <div className={styles.detailTabs}>
+        {TAB_LIST.map(tab => (
+          <button
+            key={tab.key}
+            className={`${styles.detailTab} ${activeKey === tab.key ? styles.detailTabActive : ''}`}
+            onClick={() => setActiveKey(tab.key)}
+          >
+            {tab.label}{tab.key === 'hooks' ? ` (${relatedHooks.length})` : ''}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <div className={styles.detailBody}>
+        {activeKey === 'headers' && <HeadersTab request={request} />}
+        {activeKey === 'body' && <BodyTab request={request} />}
+        {activeKey === 'response' && <ResponseTab request={request} />}
+        {activeKey === 'hooks' && <HooksTab hooks={relatedHooks} />}
+      </div>
+    </div>
+  )
+}
+
+export default RequestDetail

package/src/renderer/components/RequestLog.module.css

@@ -0,0 +1,69 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Search toolbar */
+.toolbar {
+  height: 34px;
+  background: var(--color-frame);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+/* Search box */
+.searchBox {
+  flex: 1;
+  height: 22px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-badge);
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  gap: 4px;
+}
+
+.searchIcon {
+  font-size: 10px;
+  color: var(--text-disabled);
+  flex-shrink: 0;
+}
+
+.searchInput {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  font-size: var(--font-size-3xs);
+  color: var(--text-secondary);
+  font-family: var(--font-sans);
+}
+
+.searchInput::placeholder {
+  color: var(--text-disabled);
+}
+
+/* Source badges */
+.srcCdp {
+  font-size: 8px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: var(--color-orange-bg);
+  color: var(--color-orange);
+}
+
+.srcProxy {
+  font-size: 8px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: var(--color-purple-bg);
+  color: var(--color-purple);
+}

package/src/renderer/components/RequestLog.tsx

@@ -0,0 +1,208 @@
+import React, { useMemo, useCallback, useState } from 'react'
+import { VirtualTable } from '../ui'
+import type { VTColumn, VTRowSelection } from '../ui'
+import type { CapturedRequest } from '@shared/types'
+import styles from './RequestLog.module.css'
+
+interface RequestLogProps {
+  requests: CapturedRequest[]
+  selectedId: string | null
+  onSelect: (request: CapturedRequest) => void
+  selectedSeqs: number[]
+  onSelectedSeqsChange: (seqs: number[]) => void
+}
+
+// Color mapping for HTTP methods
+const METHOD_COLORS: Record<string, string> = {
+  GET: 'var(--color-success)',
+  POST: 'var(--color-info)',
+  PUT: 'var(--color-orange)',
+  DELETE: 'var(--color-error)',
+  PATCH: 'var(--color-info)',
+  HEAD: 'var(--text-muted)',
+  OPTIONS: 'var(--text-muted)',
+}
+
+// Color for status codes
+function getStatusColor(code: number | null): string {
+  if (code === null) return 'var(--text-muted)'
+  if (code >= 200 && code < 300) return 'var(--color-success)'
+  if (code >= 300 && code < 400) return 'var(--color-warning)'
+  if (code >= 400 && code < 500) return 'var(--color-error)'
+  if (code >= 500) return 'var(--color-error)'
+  return 'var(--text-muted)'
+}
+
+function extractPath(url: string): string {
+  try {
+    const parsed = new URL(url)
+    return parsed.pathname + parsed.search
+  } catch {
+    return url
+  }
+}
+
+function extractHost(url: string): string {
+  try {
+    return new URL(url).host
+  } catch {
+    return url
+  }
+}
+
+const RequestLog: React.FC<RequestLogProps> = ({ requests, selectedId, onSelect, selectedSeqs, onSelectedSeqsChange }) => {
+  const [searchText, setSearchText] = useState('')
+
+  // Pre-filter by search text only (method filter now handled by VirtualTable column filter)
+  const filteredRequests = useMemo(() => {
+    if (!searchText.trim()) return requests
+    const q = searchText.trim().toLowerCase()
+    return requests.filter(r => r.url.toLowerCase().includes(q))
+  }, [requests, searchText])
+
+  // Collect unique methods for column filter
+  const methodFilters = useMemo(() => {
+    const methods = new Set(requests.map(r => r.method.toUpperCase()))
+    return Array.from(methods).sort().map(m => ({ text: m, value: m }))
+  }, [requests])
+
+  // Collect unique domains for column filter
+  const domainFilters = useMemo(() => {
+    const domains = new Set(requests.map(r => extractHost(r.url)))
+    return Array.from(domains).sort().map(d => ({ text: d, value: d }))
+  }, [requests])
+
+  // Collect unique sources for column filter
+  const sourceFilters = useMemo(() => [
+    { text: 'CDP', value: 'cdp' },
+    { text: 'Proxy', value: 'proxy' },
+  ], [])
+
+  const columns: VTColumn<CapturedRequest>[] = useMemo(() => [
+    {
+      key: 'sequence',
+      title: '#',
+      dataIndex: 'sequence',
+      width: 50,
+      render: (val) => <span style={{ color: 'var(--text-muted)', fontVariantNumeric: 'tabular-nums' }}>{val as number}</span>,
+      sorter: (a, b) => a.sequence - b.sequence,
+    },
+    {
+      key: 'method',
+      title: 'Method',
+      dataIndex: 'method',
+      width: 100,
+      filters: methodFilters,
+      onFilter: (value, record) => record.method.toUpperCase() === value,
+      render: (val) => {
+        const m = (val as string).toUpperCase()
+        return <span style={{ color: METHOD_COLORS[m] || 'var(--text-muted)', fontWeight: 600 }}>{m}</span>
+      },
+    },
+    {
+      key: 'domain',
+      title: 'Domain',
+      dataIndex: 'url',
+      width: 180,
+      filters: domainFilters,
+      filterSearch: true,
+      onFilter: (value, record) => extractHost(record.url) === value,
+      render: (_val, record) => (
+        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={extractHost(record.url)}>
+          {extractHost(record.url)}
+        </span>
+      ),
+    },
+    {
+      key: 'url',
+      title: 'Path',
+      dataIndex: 'url',
+      render: (_val, record) => (
+        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={record.url}>
+          {extractPath(record.url)}
+        </span>
+      ),
+    },
+    {
+      key: 'status_code',
+      title: 'Status',
+      dataIndex: 'status_code',
+      width: 70,
+      render: (val) => {
+        const code = val as number | null
+        return <span style={{ color: getStatusColor(code), fontWeight: 500 }}>{code ?? '--'}</span>
+      },
+      sorter: (a, b) => (a.status_code ?? 0) - (b.status_code ?? 0),
+    },
+    {
+      key: 'duration_ms',
+      title: 'Time',
+      dataIndex: 'duration_ms',
+      width: 80,
+      render: (val) => {
+        const ms = val as number | null
+        return <span style={{ color: 'var(--text-muted)' }}>{ms !== null ? `${ms}ms` : '--'}</span>
+      },
+      sorter: (a, b) => (a.duration_ms ?? 0) - (b.duration_ms ?? 0),
+    },
+    {
+      key: 'source',
+      title: 'Source',
+      dataIndex: 'source',
+      width: 90,
+      filters: sourceFilters,
+      onFilter: (value, record) => (record.source || 'cdp') === value,
+      render: (val) => {
+        const src = (val as string) || 'cdp'
+        const isProxy = src === 'proxy'
+        return (
+          <span className={isProxy ? styles.srcProxy : styles.srcCdp}>
+            {isProxy ? 'Proxy' : 'CDP'}
+          </span>
+        )
+      },
+    },
+  ], [methodFilters, domainFilters, sourceFilters])
+
+  const handleRow = useCallback((record: CapturedRequest) => ({
+    onClick: () => onSelect(record),
+    className: record.id === selectedId ? 'vtRowHighlight' : '',
+  }), [selectedId, onSelect])
+
+  const rowSelection: VTRowSelection<CapturedRequest> = useMemo(() => ({
+    selectedKeys: selectedSeqs,
+    onChange: (_keys, rows) => {
+      onSelectedSeqsChange(rows.map(r => r.sequence))
+    },
+  }), [selectedSeqs, onSelectedSeqsChange])
+
+  return (
+    <div className={styles.container}>
+      {/* Search toolbar */}
+      <div className={styles.toolbar}>
+        <div className={styles.searchBox}>
+          <span className={styles.searchIcon}>🔍</span>
+          <input
+            className={styles.searchInput}
+            value={searchText}
+            onChange={e => setSearchText(e.target.value)}
+            placeholder="搜索 URL..."
+          />
+        </div>
+      </div>
+
+      {/* Request list with column headers and filters */}
+      <VirtualTable<CapturedRequest>
+        columns={columns}
+        data={filteredRequests}
+        rowKey="sequence"
+        rowHeight={32}
+        rowSelection={rowSelection}
+        onRow={handleRow}
+        emptyText="No requests captured yet"
+      />
+    </div>
+  )
+}
+
+export default RequestLog