@mseep/anything-analyzer 3.6.50

package/src/renderer/components/AiLogView.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import { useLocale } from '../i18n'
+import { Empty } from '../ui'
+import { AiLogList } from './AiLogList'
+import { AiLogDetail } from './AiLogDetail'
+import type { AiRequestLog } from '@shared/types'
+import styles from './AiLogView.module.css'
+
+interface AiLogViewProps {
+  sessionId: string
+  sessionName?: string
+  onBack: () => void
+}
+
+export const AiLogView: React.FC<AiLogViewProps> = ({ sessionId, sessionName, onBack }) => {
+  const { t } = useLocale()
+  const [logs, setLogs] = useState<AiRequestLog[]>([])
+  const [selectedId, setSelectedId] = useState<number | null>(null)
+  const [isGlobal, setIsGlobal] = useState(false)
+
+  const loadLogs = useCallback(async () => {
+    const data = isGlobal
+      ? await window.electronAPI.getAiRequestLogsAll(200, 0)
+      : await window.electronAPI.getAiRequestLogs(sessionId)
+    setLogs(data)
+    // Auto-select first if current selection not in list
+    if (data.length > 0 && (selectedId === null || !data.some(l => l.id === selectedId))) {
+      setSelectedId(data[0].id)
+    }
+    if (data.length === 0) setSelectedId(null)
+  }, [sessionId, isGlobal, selectedId])
+
+  useEffect(() => {
+    loadLogs()
+  }, [sessionId, isGlobal])  // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (logs.length === 0) {
+    return (
+      <div className={styles.container}>
+        <div className={styles.toolbar}>
+          <button className={styles.backBtn} onClick={onBack}>{t('aiLog.backToReport')}</button>
+        </div>
+        <div className={styles.emptyContainer}>
+          <Empty description={t('aiLog.noData')} />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.container}>
+      {/* Toolbar */}
+      <div className={styles.toolbar}>
+        <button className={styles.backBtn} onClick={onBack}>
+          {isGlobal ? t('aiLog.backToSession') : t('aiLog.backToReport')}
+        </button>
+        <div className={styles.toolbarSpacer} />
+        {!isGlobal && sessionName && (
+          <span className={styles.sessionLabel}>Session: {sessionName}</span>
+        )}
+        {isGlobal && (
+          <span className={styles.globalLabel}>{t('aiLog.globalMode')}</span>
+        )}
+        <button
+          className={styles.toggleBtn}
+          onClick={() => {
+            if (isGlobal) {
+              setIsGlobal(false)
+            } else {
+              setIsGlobal(true)
+            }
+            setSelectedId(null)
+          }}
+        >
+          {isGlobal ? t('aiLog.backToSession') : t('aiLog.viewAllSessions')}
+        </button>
+      </div>
+
+      {/* Main content: list + detail */}
+      <div className={styles.mainContent}>
+        <AiLogList logs={logs} selectedId={selectedId} onSelect={setSelectedId} />
+        <AiLogDetail logId={selectedId} />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,79 @@
+.analyzeBar {
+  height: 42px;
+  background: var(--color-sidebar);
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.analyzeSelect {
+  padding: 5px 10px;
+  border-radius: 6px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  font-size: var(--font-size-3xs);
+  color: var(--text-secondary);
+  font-family: var(--font-sans);
+  cursor: pointer;
+  outline: none;
+}
+
+.analyzeSelect:focus {
+  border-color: var(--color-border-hover);
+}
+
+.analyzeBtnPrimary {
+  padding: 6px 20px;
+  border-radius: 6px;
+  background: var(--text-primary);
+  color: var(--color-base);
+  font-size: var(--font-size-2xs);
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  font-family: var(--font-sans);
+  transition: opacity var(--transition-fast);
+}
+
+.analyzeBtnPrimary:hover {
+  opacity: 0.9;
+}
+
+.analyzeBtnPrimary:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.analyzeBtnDim {
+  padding: 6px 16px;
+  border-radius: 6px;
+  background: var(--color-active);
+  border: 1px solid var(--color-border-subtle);
+  color: var(--text-secondary);
+  font-size: var(--font-size-3xs);
+  cursor: pointer;
+  font-family: var(--font-sans);
+  transition: border-color var(--transition-fast), color var(--transition-fast);
+}
+
+.analyzeBtnDim:hover {
+  border-color: var(--color-border-hover);
+  color: var(--text-primary);
+}
+
+.analyzeBtnDim:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.spacer {
+  flex: 1;
+}
+
+.info {
+  font-size: var(--font-size-3xs);
+  color: var(--text-muted);
+}

package/src/renderer/components/AnalyzeBar.tsx

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react'
+import { useLocale } from '../i18n'
+import type { PromptTemplate } from '../../shared/types'
+import styles from './AnalyzeBar.module.css'
+
+interface AnalyzeBarProps {
+  onAnalyze: (purpose?: string) => void
+  onExport: () => void
+  hasRequests: boolean
+  isAnalyzing: boolean
+  isStopped: boolean
+  selectedSeqCount: number
+  totalCount: number
+}
+
+const AnalyzeBar: React.FC<AnalyzeBarProps> = ({
+  onAnalyze,
+  onExport,
+  hasRequests,
+  isAnalyzing,
+  isStopped,
+  selectedSeqCount,
+  totalCount,
+}) => {
+  const { t } = useLocale()
+  const [purposeId, setPurposeId] = useState('auto')
+  const [templates, setTemplates] = useState<PromptTemplate[]>([])
+
+  useEffect(() => {
+    window.electronAPI.getPromptTemplates().then(setTemplates).catch(() => {})
+  }, [])
+
+  const handleAnalyze = () => {
+    if (purposeId === 'auto') {
+      onAnalyze(undefined)
+    } else {
+      onAnalyze(purposeId)
+    }
+  }
+
+  const handleAnalyzeSelected = () => {
+    if (purposeId === 'auto') {
+      onAnalyze(undefined)
+    } else {
+      onAnalyze(purposeId)
+    }
+  }
+
+  const canAnalyze = isStopped && hasRequests && !isAnalyzing
+
+  return (
+    <div className={styles.analyzeBar}>
+      <select
+        className={styles.analyzeSelect}
+        value={purposeId}
+        onChange={(e) => setPurposeId(e.target.value)}
+        disabled={isAnalyzing}
+      >
+        <option value="auto">▾ {t('capture.autoDetect') ?? '自动检测'}</option>
+        {templates.map((tpl) => (
+          <option key={tpl.id} value={tpl.id}>{tpl.name}</option>
+        ))}
+      </select>
+
+      <button
+        className={styles.analyzeBtnPrimary}
+        disabled={!canAnalyze}
+        onClick={handleAnalyze}
+      >
+        ✦ {t('capture.analyze')}
+      </button>
+
+      {selectedSeqCount > 0 && (
+        <button
+          className={styles.analyzeBtnDim}
+          disabled={!canAnalyze}
+          onClick={handleAnalyzeSelected}
+        >
+          {t('capture.analyzeSelected', { count: selectedSeqCount })}
+        </button>
+      )}
+
+      <div className={styles.spacer} />
+
+      <div className={styles.info}>
+        {selectedSeqCount > 0
+          ? `${t('data.selected') ?? '已选'} ${selectedSeqCount} / ${t('data.total') ?? '共'} ${totalCount} ${t('data.requests')}`
+          : `${t('data.total') ?? '共'} ${totalCount} ${t('data.requests')}`
+        }
+      </div>
+
+      <button
+        className={styles.analyzeBtnDim}
+        disabled={!(isStopped && hasRequests) || isAnalyzing}
+        onClick={onExport}
+        style={{ marginLeft: 8 }}
+      >
+        ⬇ {t('data.export')}
+      </button>
+    </div>
+  )
+}
+
+export default AnalyzeBar

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

@@ -0,0 +1,67 @@
+.panel {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  position: relative;
+}
+
+.navBtns {
+  display: flex;
+  gap: 2px;
+}
+
+.addressBar {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  background: var(--color-content);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-input);
+  overflow: hidden;
+  transition: border-color var(--transition-fast);
+}
+
+.addressBar:focus-within {
+  border-color: var(--color-border-hover);
+}
+
+.addressInput {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  padding: 6px 10px;
+  font-family: var(--font-sans);
+}
+
+.addressInput::placeholder {
+  color: var(--text-disabled);
+}
+
+/* Capture controls (pill buttons) */
+.captureControls {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+/* Loading progress bar */
+.loadingBar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background: var(--color-primary, #5865f2);
+  animation: loadingSlide 1.5s ease-in-out infinite;
+}
+
+@keyframes loadingSlide {
+  0% { width: 0; left: 0; }
+  50% { width: 60%; left: 20%; }
+  100% { width: 0; left: 100%; }
+}

package/src/renderer/components/BrowserPanel.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useCallback } from 'react'
+import { Button } from '../ui'
+import { IconArrowLeft, IconArrowRight, IconReload, IconSend, IconDelete, IconCode } from '../ui/Icons'
+import { useLocale } from '../i18n'
+import styles from './BrowserPanel.module.css'
+
+interface BrowserPanelProps {
+  currentUrl?: string
+  isLoading?: boolean
+  onNavigate: (url: string) => void
+  onBack: () => void
+  onForward: () => void
+  onReload: () => void
+  captureSlot?: React.ReactNode
+  onClearEnv?: () => void
+  onToggleDevTools?: () => void
+}
+
+const BrowserPanel: React.FC<BrowserPanelProps> = ({
+  currentUrl = '',
+  isLoading = false,
+  onNavigate,
+  onBack,
+  onForward,
+  onReload,
+  captureSlot,
+  onClearEnv,
+  onToggleDevTools,
+}) => {
+  const [addressValue, setAddressValue] = useState(currentUrl)
+  const { t } = useLocale()
+
+  // Sync when currentUrl prop changes externally
+  React.useEffect(() => {
+    setAddressValue(currentUrl)
+  }, [currentUrl])
+
+  const handleNavigate = useCallback(() => {
+    const url = addressValue.trim()
+    if (!url) return
+
+    const finalUrl = /^https?:\/\//i.test(url) ? url : `https://${url}`
+    setAddressValue(finalUrl)
+    onNavigate(finalUrl)
+  }, [addressValue, onNavigate])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') handleNavigate()
+    },
+    [handleNavigate]
+  )
+
+  return (
+    <div className={styles.panel}>
+      {/* Navigation buttons */}
+      <div className={styles.navBtns}>
+        <Button variant="ghost" size="sm" iconOnly icon={<IconArrowLeft size={14} />} onClick={onBack} title="Back" />
+        <Button variant="ghost" size="sm" iconOnly icon={<IconArrowRight size={14} />} onClick={onForward} title="Forward" />
+        <Button variant="ghost" size="sm" iconOnly icon={<IconReload size={14} />} onClick={onReload} title="Reload" />
+        {onToggleDevTools && (
+          <Button variant="ghost" size="sm" iconOnly icon={<IconCode size={14} />} title="DevTools" onClick={onToggleDevTools} />
+        )}
+        {onClearEnv && (
+          <Button variant="ghost" size="sm" iconOnly icon={<IconDelete size={14} />} title={t('data.clearEnv')} onClick={onClearEnv} />
+        )}
+      </div>
+
+      {/* Address bar */}
+      <div className={styles.addressBar}>
+        <input
+          className={styles.addressInput}
+          value={addressValue}
+          onChange={(e) => setAddressValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Enter URL..."
+        />
+        <Button variant="ghost" size="sm" iconOnly icon={<IconSend size={14} />} onClick={handleNavigate} title="Navigate" />
+      </div>
+
+      {/* Capture controls slot */}
+      {captureSlot && <div className={styles.captureControls}>{captureSlot}</div>}
+
+      {/* Loading progress bar */}
+      {isLoading && <div className={styles.loadingBar} />}
+    </div>
+  )
+}
+
+export default BrowserPanel

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

@@ -0,0 +1,47 @@
+.controlBar {
+  flex-shrink: 0;
+  background: var(--color-sidebar);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.mainRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-sm) var(--space-md);
+}
+
+.leftGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.rightGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.customRow {
+  padding: 0 var(--space-md) var(--space-sm);
+  display: flex;
+  gap: var(--space-sm);
+  align-items: flex-start;
+}
+
+.customInput {
+  flex: 1;
+}
+
+.customBtns {
+  display: flex;
+  gap: 4px;
+  margin-top: 2px;
+}
+
+.statusTag {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}

package/src/renderer/components/ControlBar.tsx

@@ -0,0 +1,205 @@
+import React, { useState, useEffect } from 'react'
+import { Button, Select, TextArea, Tag } from '../ui'
+import {
+  IconPlay,
+  IconPause,
+  IconStop,
+  IconExperiment,
+  IconCheck,
+  IconClose,
+  IconLoading,
+} from '../ui/Icons'
+import { useLocale } from '../i18n'
+import type { SessionStatus, PromptTemplate } from '../../shared/types'
+import styles from './ControlBar.module.css'
+
+interface ControlBarProps {
+  status: SessionStatus | null
+  onStart: () => void
+  onPause: () => void
+  onResume: () => void
+  onStop: () => void
+  onAnalyze: (purpose?: string) => void
+  hasRequests: boolean
+  isAnalyzing?: boolean
+  selectedSeqCount?: number
+}
+
+const ControlBar: React.FC<ControlBarProps> = ({
+  status,
+  onStart,
+  onPause,
+  onResume,
+  onStop,
+  onAnalyze,
+  hasRequests,
+  isAnalyzing = false,
+  selectedSeqCount = 0,
+}) => {
+  const { t } = useLocale()
+  const [purposeId, setPurposeId] = useState<string>('auto')
+  const [customText, setCustomText] = useState('')
+  const [customExpanded, setCustomExpanded] = useState(false)
+  const [templates, setTemplates] = useState<PromptTemplate[]>([])
+
+  useEffect(() => {
+    window.electronAPI.getPromptTemplates().then(setTemplates).catch(() => {})
+  }, [])
+
+  const isRunning = status === 'running'
+  const isPaused = status === 'paused'
+  const isStopped = status === 'stopped' || status === null
+
+  const handlePurposeChange = (value: string) => {
+    if (value === 'custom') {
+      setCustomExpanded(true)
+    } else {
+      setPurposeId(value)
+      setCustomExpanded(false)
+    }
+  }
+
+  const handleCustomConfirm = () => {
+    const trimmed = customText.trim()
+    if (trimmed) {
+      setPurposeId('custom')
+      setCustomExpanded(false)
+    }
+  }
+
+  const handleCustomCancel = () => {
+    setCustomExpanded(false)
+    if (purposeId !== 'custom') setCustomText('')
+  }
+
+  const handleAnalyze = () => {
+    if (purposeId === 'custom') {
+      onAnalyze(customText.trim() || undefined)
+    } else if (purposeId === 'auto') {
+      onAnalyze(undefined)
+    } else {
+      onAnalyze(purposeId)
+    }
+  }
+
+  const selectOptions = [
+    ...templates.map((tpl) => ({ label: tpl.name, value: tpl.id })),
+    { label: t('capture.custom'), value: 'custom' },
+  ]
+
+  return (
+    <div className={styles.controlBar}>
+      {/* Main control row */}
+      <div className={styles.mainRow}>
+        <div className={styles.leftGroup}>
+          <Button
+            variant="success"
+            icon={<IconPlay size={14} />}
+            disabled={!isStopped}
+            onClick={onStart}
+          >
+            {t('capture.start')}
+          </Button>
+
+          <Button
+            variant="default"
+            icon={isPaused ? <IconPlay size={14} /> : <IconPause size={14} />}
+            disabled={!(isRunning || isPaused)}
+            onClick={isPaused ? onResume : onPause}
+          >
+            {isPaused ? t('capture.resume') : t('capture.pause')}
+          </Button>
+
+          <Button
+            variant="danger"
+            icon={<IconStop size={14} />}
+            disabled={!(isRunning || isPaused)}
+            onClick={onStop}
+          >
+            {t('capture.stop')}
+          </Button>
+
+          <Select
+            value={customExpanded ? 'custom' : purposeId}
+            onChange={handlePurposeChange}
+            style={{ width: 160 }}
+            disabled={isAnalyzing}
+            options={selectOptions}
+          />
+
+          <Button
+            variant="primary"
+            icon={<IconExperiment size={14} />}
+            disabled={!(isStopped && hasRequests) || isAnalyzing}
+            loading={isAnalyzing}
+            onClick={handleAnalyze}
+          >
+            {isAnalyzing
+              ? t('capture.analyze') + '...'
+              : selectedSeqCount > 0
+                ? t('capture.analyzeSelected', { count: selectedSeqCount })
+                : t('capture.analyze')}
+          </Button>
+        </div>
+
+        {/* Right side: status tags */}
+        <div className={styles.rightGroup}>
+          {purposeId === 'custom' && customText.trim() && !customExpanded && (
+            <Tag color="info" style={{ maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {customText.trim()}
+            </Tag>
+          )}
+          {isRunning && (
+            <Tag color="success">
+              <span className={styles.statusTag}>
+                <IconLoading size={12} />
+                {t('capture.running')}
+              </span>
+            </Tag>
+          )}
+          {isPaused && <Tag color="warning">{t('capture.paused')}</Tag>}
+          {isStopped && status !== null && <Tag color="default">{t('capture.stopped')}</Tag>}
+        </div>
+      </div>
+
+      {/* Inline custom purpose input */}
+      {customExpanded && (
+        <div className={styles.customRow}>
+          <div className={styles.customInput}>
+            <TextArea
+              value={customText}
+              onChange={(e) => setCustomText(e.target.value)}
+              placeholder={t('capture.customPurpose')}
+              autoSize={{ minRows: 1, maxRows: 4 }}
+              autoFocus
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault()
+                  handleCustomConfirm()
+                }
+              }}
+            />
+          </div>
+          <div className={styles.customBtns}>
+            <Button
+              variant="primary"
+              size="sm"
+              iconOnly
+              icon={<IconCheck size={14} />}
+              disabled={!customText.trim()}
+              onClick={handleCustomConfirm}
+            />
+            <Button
+              size="sm"
+              iconOnly
+              icon={<IconClose size={14} />}
+              onClick={handleCustomCancel}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ControlBar