@mseep/anything-analyzer 3.6.50

package/src/renderer/components/HookLog.tsx

@@ -0,0 +1,132 @@
+import React, { useMemo } from 'react'
+import { VirtualTable, Tag, CopyableBlock } from '../ui'
+import type { VTColumn } from '../ui'
+import type { JsHookRecord, HookType } from '@shared/types'
+
+interface HookLogProps {
+  hooks: JsHookRecord[]
+}
+
+// Color mapping for hook types
+const HOOK_TYPE_COLORS: Record<HookType, 'info' | 'success' | 'purple' | 'orange'> = {
+  fetch: 'info',
+  xhr: 'success',
+  crypto: 'purple',
+  crypto_lib: 'purple',
+  cookie_set: 'orange',
+}
+
+function truncate(str: string | null, maxLen = 80): string {
+  if (!str) return '--'
+  return str.length > maxLen ? str.slice(0, maxLen) + '...' : str
+}
+
+function prettyJson(str: string | null): string {
+  if (!str) return '(empty)'
+  try {
+    return JSON.stringify(JSON.parse(str), null, 2)
+  } catch {
+    return str
+  }
+}
+
+// Expanded row content
+const ExpandedRow: React.FC<{ record: JsHookRecord }> = ({ record }) => (
+  <div style={{ padding: '4px 0' }}>
+    <CopyableBlock label="Arguments" content={prettyJson(record.arguments)} />
+    {record.result && <CopyableBlock label="Result" content={prettyJson(record.result)} />}
+    {record.call_stack && (
+      <div style={{ marginBottom: 12 }}>
+        <div style={{ fontSize: 'var(--font-size-base)', fontWeight: 600, color: 'var(--text-primary)', marginBottom: 6 }}>Call Stack</div>
+        <pre style={{
+          background: 'var(--color-surface)',
+          padding: 10,
+          borderRadius: 6,
+          fontFamily: 'var(--font-mono)',
+          fontSize: 'var(--font-size-xs)',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-all',
+          color: 'var(--text-muted)',
+          margin: 0,
+        }}>
+          {record.call_stack}
+        </pre>
+      </div>
+    )}
+    {record.related_request_id && (
+      <div style={{ fontSize: 'var(--font-size-sm)', color: 'var(--text-muted)' }}>
+        Related Request ID: <code style={{ background: 'var(--color-surface)', padding: '1px 4px', borderRadius: 3, fontSize: 'var(--font-size-xs)' }}>{record.related_request_id}</code>
+      </div>
+    )}
+  </div>
+)
+
+const HookLog: React.FC<HookLogProps> = ({ hooks }) => {
+  const columns: VTColumn<JsHookRecord>[] = useMemo(() => [
+    {
+      key: 'timestamp',
+      title: 'Time',
+      dataIndex: 'timestamp',
+      width: 100,
+      render: (val) => new Date(val as number).toLocaleTimeString(),
+      sorter: (a, b) => a.timestamp - b.timestamp,
+    },
+    {
+      key: 'hook_type',
+      title: 'Type',
+      dataIndex: 'hook_type',
+      width: 110,
+      render: (val) => <Tag color={HOOK_TYPE_COLORS[val as HookType] || 'default'}>{val as string}</Tag>,
+      filters: (['fetch', 'xhr', 'crypto', 'crypto_lib', 'cookie_set'] as HookType[]).map(t => ({ text: t, value: t })),
+      onFilter: (value, record) => record.hook_type === value,
+    },
+    {
+      key: 'function_name',
+      title: 'Function',
+      dataIndex: 'function_name',
+      width: 160,
+      render: (val) => (
+        <code style={{ fontSize: 'var(--font-size-sm)', background: 'var(--color-surface)', padding: '1px 4px', borderRadius: 3, color: 'var(--color-warning)' }}>
+          {val as string}
+        </code>
+      ),
+    },
+    {
+      key: 'arguments',
+      title: 'Arguments',
+      dataIndex: 'arguments',
+      render: (val) => (
+        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-sm)' }} title={val as string}>
+          {truncate(val as string)}
+        </span>
+      ),
+    },
+    {
+      key: 'result',
+      title: 'Result',
+      dataIndex: 'result',
+      width: 200,
+      render: (val) => (
+        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-sm)' }} title={(val as string) || ''}>
+          {truncate(val as string | null)}
+        </span>
+      ),
+    },
+  ], [])
+
+  return (
+    <VirtualTable<JsHookRecord>
+      columns={columns}
+      data={hooks}
+      rowKey="id"
+      height={400}
+      expandable={{
+        expandedRowRender: (record) => <ExpandedRow record={record} />,
+        rowExpandable: () => true,
+      }}
+      emptyText="No hook records captured yet"
+    />
+  )
+}
+
+export default HookLog

package/src/renderer/components/InteractionLog.tsx

@@ -0,0 +1,183 @@
+import React, { useMemo } from 'react'
+import { VirtualTable, Tag } from '../ui'
+import type { VTColumn } from '../ui'
+import type { InteractionEvent, InteractionType } from '@shared/types'
+import { useLocale } from '../i18n'
+
+interface InteractionLogProps {
+  interactions: InteractionEvent[]
+}
+
+const TYPE_COLORS: Record<InteractionType, 'info' | 'success' | 'purple' | 'orange' | 'warning' | 'error'> = {
+  click: 'info',
+  dblclick: 'info',
+  input: 'success',
+  scroll: 'orange',
+  navigate: 'purple',
+  hover: 'warning',
+}
+
+function truncate(str: string | null, maxLen = 60): string {
+  if (!str) return '--'
+  return str.length > maxLen ? str.slice(0, maxLen) + '...' : str
+}
+
+const ExpandedRow: React.FC<{ record: InteractionEvent }> = ({ record }) => {
+  const { t } = useLocale()
+
+  return (
+    <div style={{ padding: '6px 0', fontSize: 'var(--font-size-xs)', lineHeight: 1.6 }}>
+      {record.selector && (
+        <div style={{ marginBottom: 4 }}>
+          <span style={{ color: 'var(--text-muted)', marginRight: 8 }}>{t('interaction.selector')}:</span>
+          <code style={{ background: 'var(--color-surface)', padding: '1px 6px', borderRadius: 3, fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-xs)' }}>
+            {record.selector}
+          </code>
+        </div>
+      )}
+      {record.xpath && (
+        <div style={{ marginBottom: 4 }}>
+          <span style={{ color: 'var(--text-muted)', marginRight: 8 }}>XPath:</span>
+          <code style={{ background: 'var(--color-surface)', padding: '1px 6px', borderRadius: 3, fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-xs)' }}>
+            {record.xpath}
+          </code>
+        </div>
+      )}
+      {record.attributes && (
+        <div style={{ marginBottom: 4 }}>
+          <span style={{ color: 'var(--text-muted)', marginRight: 8 }}>Attributes:</span>
+          <code style={{ background: 'var(--color-surface)', padding: '2px 6px', borderRadius: 3, fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-xs)', display: 'inline-block', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {record.attributes}
+          </code>
+        </div>
+      )}
+      {record.input_value != null && (
+        <div style={{ marginBottom: 4 }}>
+          <span style={{ color: 'var(--text-muted)', marginRight: 8 }}>{t('interaction.value')}:</span>
+          <code style={{ background: 'var(--color-surface)', padding: '1px 6px', borderRadius: 3, fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-xs)' }}>
+            {record.input_value}
+          </code>
+        </div>
+      )}
+      {record.path && (
+        <div style={{ marginBottom: 4 }}>
+          <span style={{ color: 'var(--text-muted)', marginRight: 8 }}>{t('interaction.path')}:</span>
+          <span>{t('interaction.points', { count: JSON.parse(record.path).length })}</span>
+        </div>
+      )}
+      {record.url && (
+        <div style={{ marginBottom: 4 }}>
+          <span style={{ color: 'var(--text-muted)', marginRight: 8 }}>{t('interaction.url')}:</span>
+          <span style={{ color: 'var(--text-secondary)' }}>{truncate(record.url, 100)}</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+const InteractionLog: React.FC<InteractionLogProps> = ({ interactions }) => {
+  const { t } = useLocale()
+
+  const typeLabel = (type: InteractionType): string => {
+    const key = `interaction.${type}` as const
+    return t(key as Parameters<typeof t>[0])
+  }
+
+  const columns: VTColumn<InteractionEvent>[] = useMemo(() => [
+    {
+      key: 'timestamp',
+      title: 'Time',
+      dataIndex: 'timestamp',
+      width: 90,
+      render: (val) => new Date(val as number).toLocaleTimeString(),
+      sorter: (a, b) => a.timestamp - b.timestamp,
+    },
+    {
+      key: 'type',
+      title: 'Type',
+      dataIndex: 'type',
+      width: 90,
+      render: (val) => (
+        <Tag color={TYPE_COLORS[val as InteractionType] || 'default'}>
+          {typeLabel(val as InteractionType)}
+        </Tag>
+      ),
+      filters: (['click', 'dblclick', 'input', 'scroll', 'navigate', 'hover'] as InteractionType[]).map(tp => ({
+        text: typeLabel(tp),
+        value: tp,
+      })),
+      onFilter: (value, record) => record.type === value,
+    },
+    {
+      key: 'element',
+      title: t('interaction.element'),
+      width: 200,
+      render: (_val, record) => {
+        if (record.type === 'navigate') return truncate(record.url, 50)
+        if (record.type === 'hover') {
+          const points = record.path ? JSON.parse(record.path).length : 0
+          return <span style={{ color: 'var(--text-muted)' }}>{t('interaction.points', { count: points })}</span>
+        }
+        if (record.element_text) return truncate(record.element_text, 40)
+        if (record.tag_name) return `<${record.tag_name}>`
+        return '--'
+      },
+      ellipsis: true,
+    },
+    {
+      key: 'position',
+      title: t('interaction.position'),
+      width: 100,
+      render: (_val, record) => {
+        if (record.viewport_x != null && record.viewport_y != null) {
+          return `(${Math.round(record.viewport_x)}, ${Math.round(record.viewport_y)})`
+        }
+        if (record.x != null && record.y != null) {
+          return `(${Math.round(record.x)}, ${Math.round(record.y)})`
+        }
+        return '--'
+      },
+    },
+    {
+      key: 'detail',
+      title: t('interaction.value'),
+      render: (_val, record) => {
+        if (record.type === 'input') return truncate(record.input_value, 30)
+        if (record.type === 'scroll') return `↕ ${record.scroll_y ?? 0}`
+        if (record.selector) return truncate(record.selector, 40)
+        return '--'
+      },
+      ellipsis: true,
+    },
+  ], [t]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (interactions.length === 0) {
+    return (
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        color: 'var(--text-muted)',
+        fontSize: 'var(--font-size-sm)',
+      }}>
+        {t('interaction.noData')}
+      </div>
+    )
+  }
+
+  return (
+    <VirtualTable<InteractionEvent>
+      columns={columns}
+      data={interactions}
+      rowKey="id"
+      rowHeight={34}
+      expandable={{
+        expandedRowRender: (record) => <ExpandedRow record={record} />,
+        rowExpandable: (record) => record.type !== 'scroll',
+      }}
+    />
+  )
+}
+
+export default InteractionLog