@mseep/anything-analyzer 3.6.50

package/src/renderer/components/ReportView.tsx

@@ -0,0 +1,429 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Button, Tag, Empty, Spinner } from '../ui'
+import { IconRobot, IconFileText } from '../ui/Icons'
+import { useLocale } from '../i18n'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import rehypeHighlight from 'rehype-highlight'
+import type { AnalysisReport, ChatMessage, CapturedRequest, JsHookRecord } from '@shared/types'
+import { stripToolContext } from '@shared/types'
+import { AiLogView } from './AiLogView'
+import styles from './ReportView.module.css'
+
+interface ReportViewProps {
+  report: AnalysisReport | null
+  isAnalyzing: boolean
+  analysisError: string | null
+  streamingContent: string
+  onReAnalyze: (purpose?: string) => void
+  onCancelAnalysis: () => void
+  chatHistory: ChatMessage[]
+  isChatting: boolean
+  chatError: string | null
+  onSendFollowUp: (message: string) => void
+  // Context panel data
+  sessionName?: string
+  requests?: CapturedRequest[]
+  hooks?: JsHookRecord[]
+}
+
+function formatTokens(tokens: number | null): string {
+  if (tokens === null) return '--'
+  return tokens.toLocaleString()
+}
+
+// Streaming text display with cursor blinking effect
+const StreamingDisplay: React.FC<{ content: string }> = ({ content }) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (containerRef.current) containerRef.current.scrollTop = containerRef.current.scrollHeight
+  }, [content])
+
+  return (
+    <div ref={containerRef} className={styles.streamingContainer}>
+      <div className="report-markdown-content">
+        <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
+          {content}
+        </ReactMarkdown>
+        <span className={styles.cursor} />
+      </div>
+    </div>
+  )
+}
+
+// Quick follow-up suggestions
+const QUICK_QUESTION_KEYS = [
+  'report.genPython',
+  'report.explainCrypto',
+  'report.securityRisks',
+  'report.listApiParams',
+] as const
+
+// Extract unique API endpoints from requests
+function extractEndpoints(requests: CapturedRequest[]): { method: string; path: string }[] {
+  const seen = new Set<string>()
+  const endpoints: { method: string; path: string }[] = []
+  for (const r of requests) {
+    try {
+      const url = new URL(r.url)
+      const key = `${r.method} ${url.pathname}`
+      if (!seen.has(key)) {
+        seen.add(key)
+        endpoints.push({ method: r.method, path: url.pathname })
+      }
+    } catch {
+      // skip invalid URLs
+    }
+  }
+  return endpoints.slice(0, 8) // limit to top 8
+}
+
+function getMethodColor(method: string): string {
+  switch (method.toUpperCase()) {
+    case 'GET': return 'var(--color-success)'
+    case 'POST': return 'var(--color-info)'
+    case 'PUT': return 'var(--color-orange)'
+    case 'DELETE': return 'var(--color-error)'
+    default: return 'var(--text-muted)'
+  }
+}
+
+// Summarize hook types
+function summarizeHooks(hooks: JsHookRecord[]): { type: string; count: number; color: string }[] {
+  const counts: Record<string, number> = {}
+  for (const h of hooks) {
+    const type = h.hook_type || 'unknown'
+    counts[type] = (counts[type] || 0) + 1
+  }
+  const colorMap: Record<string, string> = {
+    crypto: 'var(--color-warning)',
+    fetch: 'var(--color-info)',
+    xhr: 'var(--color-info)',
+    cookie: 'var(--color-error)',
+  }
+  return Object.entries(counts).map(([type, count]) => ({
+    type,
+    count,
+    color: colorMap[type] || 'var(--text-muted)',
+  }))
+}
+
+const ReportView: React.FC<ReportViewProps> = ({
+  report,
+  isAnalyzing,
+  analysisError,
+  streamingContent,
+  onReAnalyze,
+  onCancelAnalysis,
+  chatHistory,
+  isChatting,
+  chatError,
+  onSendFollowUp,
+  sessionName,
+  requests = [],
+  hooks = [],
+}) => {
+  const { t } = useLocale()
+  const [chatInput, setChatInput] = useState('')
+  const [showAiLog, setShowAiLog] = useState(false)
+  const reportBodyRef = useRef<HTMLDivElement>(null)
+
+  // Auto-scroll report body when streaming or new chat messages arrive
+  useEffect(() => {
+    if ((streamingContent || isChatting) && reportBodyRef.current) {
+      reportBodyRef.current.scrollTop = reportBodyRef.current.scrollHeight
+    }
+  }, [streamingContent, isChatting])
+
+  useEffect(() => {
+    if (chatHistory.length > 2 && reportBodyRef.current) {
+      requestAnimationFrame(() => {
+        if (reportBodyRef.current) {
+          reportBodyRef.current.scrollTop = reportBodyRef.current.scrollHeight
+        }
+      })
+    }
+  }, [chatHistory.length])
+
+  const handleSend = () => {
+    const trimmed = chatInput.trim()
+    if (!trimmed || isChatting) return
+    onSendFollowUp(trimmed)
+    setChatInput('')
+  }
+
+  const handleExport = async () => {
+    if (!report) return
+    const defaultName = `report-${new Date(report.created_at).toISOString().slice(0, 10)}-${report.llm_model}.md`
+    let content = report.report_content
+    const followUps = chatHistory.slice(2)
+    if (followUps.length > 0) {
+      content += '\n\n---\n\n## Follow-up Chat\n'
+      for (const msg of followUps) {
+        const label = msg.role === 'user' ? '**User**' : '**AI**'
+        content += `\n${label}:\n\n${stripToolContext(msg.content)}\n`
+      }
+    }
+    await window.electronAPI.exportFile(defaultName, content)
+  }
+
+  const endpoints = extractEndpoints(requests)
+  const hookSummary = summarizeHooks(hooks)
+
+  // Render right context panel
+  const renderContextPanel = () => (
+    <div className={styles.reportContext}>
+      <div className={styles.contextHeader}>{t('report.title')}</div>
+
+      {/* Session info */}
+      <div className={styles.contextSection}>
+        <div className={styles.contextLabel}>{t('status.session')}</div>
+        {sessionName && (
+          <div className={styles.contextItem}>
+            <div className={styles.contextDot} style={{ background: 'var(--color-purple)' }} />
+            {sessionName}
+          </div>
+        )}
+        <div className={styles.contextItem}>
+          <div className={styles.contextDot} style={{ background: 'var(--color-success)' }} />
+          {requests.length} {t('data.requests')} · {hooks.length} {t('data.hooks')}
+        </div>
+      </div>
+
+      {/* Key endpoints */}
+      {endpoints.length > 0 && (
+        <div className={styles.contextSection}>
+          <div className={styles.contextLabel}>Endpoints</div>
+          {endpoints.map((ep, i) => (
+            <div key={i} className={styles.contextEndpoint}>
+              <span className={styles.contextMethod} style={{ color: getMethodColor(ep.method) }}>
+                {ep.method}
+              </span>
+              <span className={styles.contextPath}>{ep.path}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Detected hooks */}
+      {hookSummary.length > 0 && (
+        <div className={styles.contextSection}>
+          <div className={styles.contextLabel}>{t('data.hooks')}</div>
+          {hookSummary.map((h, i) => (
+            <div key={i} className={styles.contextItem}>
+              <div className={styles.contextDot} style={{ background: h.color }} />
+              {h.type} × {h.count}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Report metadata if available */}
+      {report && (
+        <div className={styles.contextSection}>
+          <div className={styles.contextLabel}>LLM</div>
+          <div className={styles.contextItem}>
+            <div className={styles.contextDot} style={{ background: 'var(--color-info)' }} />
+            {report.llm_model}
+          </div>
+          {report.prompt_tokens != null && report.completion_tokens != null && (
+            <div className={styles.contextItem}>
+              <div className={styles.contextDot} style={{ background: 'var(--color-success)' }} />
+              {formatTokens(report.prompt_tokens + report.completion_tokens)} tokens
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+
+  // Analyzing state — full width, no context panel
+  if (isAnalyzing) {
+    return (
+      <div className={styles.reportContainer}>
+        <div className={styles.reportMain}>
+          <div className={styles.reportBody} ref={reportBodyRef}>
+            <div className={styles.reportScroll}>
+              <div className={styles.analyzingHeader}>
+                <Spinner size="sm" />
+                <span>
+                  <IconRobot size={14} style={{ marginRight: 4 }} />
+                  {t('report.analyzing')}
+                </span>
+                <div style={{ flex: 1 }} />
+                <Button size="sm" onClick={onCancelAnalysis}>
+                  {t('report.stopAnalysis')}
+                </Button>
+              </div>
+              {streamingContent ? (
+                <StreamingDisplay content={streamingContent} />
+              ) : (
+                <div className={styles.preparingState}>
+                  <Spinner />
+                  <div style={{ marginTop: 12 }}>{t('report.preparing')}</div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+        {renderContextPanel()}
+      </div>
+    )
+  }
+
+  // No report yet
+  if (!report) {
+    return (
+      <div className={styles.reportContainer}>
+        <div className={styles.reportMain}>
+          <div className={styles.emptyState}>
+            {analysisError && (
+              <div className={styles.errorAlert}>
+                <div className={styles.errorTitle}>{t('report.analysisFailed')}</div>
+                <div className={styles.errorDesc}>{analysisError}</div>
+              </div>
+            )}
+            <Empty
+              icon={<IconFileText size={48} style={{ opacity: 0.25 }} />}
+              description={t('report.noReport')}
+            />
+            <Button variant="primary" icon={<IconRobot size={14} />} onClick={() => onReAnalyze()}>
+              {t('report.startAnalysis')}
+            </Button>
+          </div>
+        </div>
+        {renderContextPanel()}
+      </div>
+    )
+  }
+
+  // Has report — show AI Log view if toggled
+  if (showAiLog) {
+    return (
+      <AiLogView
+        sessionId={report.session_id}
+        sessionName={sessionName}
+        onBack={() => setShowAiLog(false)}
+      />
+    )
+  }
+
+  // Has report — full layout with toolbar + content + chat + context panel
+  return (
+    <div className={styles.reportContainer}>
+      <div className={styles.reportMain}>
+        {/* Toolbar */}
+        <div className={styles.reportToolbar}>
+          <div className={styles.toolLabel}>{t('capture.autoDetect')}</div>
+          <button className={styles.toolBtnPrimary}>✦ {report.llm_model}</button>
+          <div className={styles.toolSpacer} />
+          <button className={styles.toolBtn} onClick={handleExport}>⬇ {t('report.export')}</button>
+          <button className={styles.toolBtn} onClick={() => onReAnalyze()}>↻ {t('report.reanalyze')}</button>
+          <button className={styles.toolBtn} onClick={() => setShowAiLog(true)}>📋 {t('aiLog.title')}</button>
+        </div>
+
+        {/* Report content */}
+        <div className={styles.reportBody} ref={reportBodyRef}>
+          <div className={styles.reportScroll}>
+            {/* Metadata row */}
+            <div className={styles.metaRow}>
+              <span>✦ {report.llm_model}</span>
+              <span>◷ {new Date(report.created_at).toLocaleString()}</span>
+              <span>{requests.length} {t('data.requests')}</span>
+            </div>
+
+            {/* Markdown content */}
+            <div className="report-markdown-content" style={{ overflowWrap: 'break-word', wordBreak: 'break-word' }}>
+              <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
+                {report.report_content}
+              </ReactMarkdown>
+            </div>
+
+            {/* Chat history */}
+            {chatHistory.slice(2).map((msg, i) => (
+              <div key={i} className={`${styles.chatMsg} ${msg.role === 'user' ? styles.chatMsgUser : styles.chatMsgAi}`}>
+                <Tag color={msg.role === 'user' ? 'info' : 'success'} style={{ marginBottom: 4 }}>
+                  {msg.role === 'user' ? 'You' : 'AI'}
+                </Tag>
+                <div className="report-markdown-content">
+                  <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
+                    {stripToolContext(msg.content)}
+                  </ReactMarkdown>
+                </div>
+              </div>
+            ))}
+
+            {/* Streaming follow-up */}
+            {isChatting && streamingContent && (
+              <div className={`${styles.chatMsg} ${styles.chatMsgAi}`}>
+                <Tag color="success" style={{ marginBottom: 4 }}>AI</Tag>
+                <StreamingDisplay content={streamingContent} />
+              </div>
+            )}
+
+            {isChatting && !streamingContent && (
+              <div style={{ textAlign: 'center', padding: 12 }}>
+                <Spinner size="sm" />
+                <span style={{ marginLeft: 8, color: 'var(--text-muted)' }}>{t('report.thinking')}</span>
+              </div>
+            )}
+
+            {chatError && (
+              <div className={styles.errorAlert} style={{ marginTop: 12 }}>
+                <div className={styles.errorTitle}>{t('report.followUpFailed')}</div>
+                <div className={styles.errorDesc}>{chatError}</div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Chat section */}
+        <div className={styles.chatSection}>
+          <div className={styles.chatSuggestions}>
+            {QUICK_QUESTION_KEYS.map((key, i) => {
+              const text = t(key)
+              return (
+                <button
+                  key={i}
+                  className={styles.chatChip}
+                  disabled={isChatting}
+                  onClick={() => { if (!isChatting) onSendFollowUp(text) }}
+                >
+                  {text}
+                </button>
+              )
+            })}
+          </div>
+          <div className={styles.chatInputBar}>
+            <input
+              className={styles.chatInput}
+              value={chatInput}
+              onChange={(e) => setChatInput(e.target.value)}
+              placeholder={t('report.askFollowUp')}
+              disabled={isChatting}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault()
+                  handleSend()
+                }
+              }}
+            />
+            <button
+              className={styles.chatSend}
+              onClick={handleSend}
+              disabled={isChatting || !chatInput.trim()}
+            >
+              ↑
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Right context panel */}
+      {renderContextPanel()}
+    </div>
+  )
+}
+
+export default ReportView

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

@@ -0,0 +1,191 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Header: METHOD STATUS · TIME */
+.detailHeader {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.detailTitle {
+  font-size: var(--font-size-2xs);
+  color: var(--text-primary);
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.detailUrl {
+  font-size: var(--font-size-3xs);
+  color: var(--text-muted);
+  word-break: break-all;
+}
+
+/* Simple text tabs */
+.detailTabs {
+  height: 32px;
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  padding: 0 16px;
+  gap: 20px;
+  flex-shrink: 0;
+}
+
+.detailTab {
+  font-size: var(--font-size-3xs);
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-bottom: 1px solid transparent;
+  font-family: var(--font-sans);
+  padding: 0;
+  transition: color var(--transition-fast);
+}
+
+.detailTab:hover {
+  color: var(--text-secondary);
+}
+
+.detailTabActive {
+  color: var(--text-secondary);
+  border-bottom-color: var(--text-secondary);
+}
+
+/* Tab body — scrollable */
+.detailBody {
+  flex: 1;
+  padding: 12px 16px;
+  overflow: auto;
+  min-height: 0;
+}
+
+/* Section labels (REQUEST HEADERS, RESPONSE HEADERS) */
+.sectionLabel {
+  font-size: var(--font-size-3xs);
+  color: var(--text-label);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+}
+
+.kvSection {
+  padding: 0;
+}
+
+/* KV row */
+.kvRow {
+  display: flex;
+  padding: 4px 0;
+  font-size: var(--font-size-3xs);
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.kvKey {
+  width: 140px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.kvVal {
+  color: var(--text-secondary);
+  word-break: break-all;
+}
+
+.emptyHint {
+  font-size: var(--font-size-3xs);
+  color: var(--text-disabled);
+  padding: 4px 0;
+}
+
+/* Code block for body/response */
+.codeBlock {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-button);
+  padding: 10px 14px;
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-2xs);
+  color: var(--text-secondary);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow: auto;
+  max-height: 400px;
+}
+
+/* Key-value metadata grid */
+.metaGrid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 16px;
+  margin-bottom: var(--space-lg);
+  font-size: var(--font-size-sm);
+}
+
+.metaLabel {
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.metaValue {
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+}
+
+/* Hook list */
+.hookList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.hookItem {
+  padding: var(--space-sm) var(--space-md);
+  background: var(--color-surface);
+  border-radius: var(--radius-button);
+  border: 1px solid var(--color-border-subtle);
+}
+
+.hookHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-bottom: 4px;
+}
+
+.hookFn {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  background: var(--color-content);
+  padding: 1px 4px;
+  border-radius: 3px;
+  color: var(--color-warning);
+}
+
+.hookTime {
+  margin-left: auto;
+  font-size: var(--font-size-2xs);
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.hookArgs {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}