@mseep/anything-analyzer 3.6.50

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

@@ -0,0 +1,245 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+/* Section header: label + count badge */
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 16px 8px;
+}
+
+.sectionLabel {
+  font-size: var(--font-size-3xs);
+  color: var(--text-label);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-section);
+  font-weight: 600;
+}
+
+.sectionCount {
+  font-size: var(--font-size-3xs);
+  color: var(--text-disabled);
+  background: var(--color-active);
+  padding: 1px 6px;
+  border-radius: var(--radius-full);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Session list */
+.list {
+  flex: 1;
+  overflow: auto;
+  padding: 0 8px;
+}
+
+.list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.list::-webkit-scrollbar-thumb {
+  background: var(--color-border-hover);
+  border-radius: var(--radius-full);
+}
+
+.list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Session item — card style */
+.item {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  margin-bottom: 2px;
+  cursor: pointer;
+  border-radius: var(--radius-lg);
+  transition: background var(--transition-fast);
+  position: relative;
+  border-left: 3px solid transparent;
+}
+
+.item:hover {
+  background: var(--color-hover);
+}
+
+.itemActive {
+  background: var(--color-selected);
+  border-left-color: var(--color-accent);
+}
+
+.itemActive:hover {
+  background: var(--color-selected);
+}
+
+.itemActive .sessionName {
+  color: var(--text-primary);
+}
+
+/* Status dot — replaces old bar */
+.statusDot {
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+  margin-right: 10px;
+  box-shadow: 0 0 0 2px var(--color-sidebar);
+}
+
+/* Running dot pulse animation */
+.statusDotRunning {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; box-shadow: 0 0 0 2px var(--color-sidebar); }
+  50% { opacity: 0.6; box-shadow: 0 0 0 2px var(--color-sidebar), 0 0 6px currentColor; }
+}
+
+.sessionInfo {
+  flex: 1;
+  min-width: 0;
+}
+
+.sessionName {
+  font-size: var(--font-size-2xs);
+  color: var(--text-secondary);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: var(--line-height-tight);
+}
+
+.sessionMeta {
+  font-size: var(--font-size-3xs);
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 3px;
+  line-height: 1;
+}
+
+.sessionCount {
+  color: var(--text-muted);
+}
+
+.sessionUrl {
+  font-size: var(--font-size-3xs);
+  color: var(--text-disabled);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 2px;
+}
+
+/* Delete button */
+.deleteBtn {
+  flex-shrink: 0;
+  margin-left: var(--space-sm);
+  padding: 4px;
+  border-radius: var(--radius-badge);
+  color: var(--text-disabled);
+  cursor: pointer;
+  transition: color var(--transition-fast), background var(--transition-fast);
+  display: flex;
+  align-items: center;
+}
+
+.deleteBtn:hover {
+  color: var(--color-error);
+  background: var(--color-error-bg);
+}
+
+.deleteBtnDisabled {
+  cursor: wait;
+  color: var(--text-disabled);
+}
+
+/* Footer: New session button */
+.footer {
+  padding: 10px 12px;
+  flex-shrink: 0;
+}
+
+.newBtn {
+  border: 1px solid var(--color-accent-border);
+  border-radius: var(--radius-lg);
+  padding: 9px 0;
+  text-align: center;
+  font-size: var(--font-size-2xs);
+  color: var(--color-accent);
+  background: var(--color-accent-bg);
+  cursor: pointer;
+  font-weight: 600;
+  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
+}
+
+.newBtn:hover {
+  background: var(--color-accent-border);
+  border-color: var(--color-accent);
+}
+
+.newBtn:active {
+  transform: scale(0.98);
+}
+
+/* Bottom: Settings + Version */
+.sidebarBottom {
+  padding: 10px 16px;
+  border-top: 1px solid var(--color-border);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bottomBtn {
+  font-size: var(--font-size-2xs);
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: var(--radius-badge);
+  transition: color var(--transition-fast), background var(--transition-fast);
+}
+
+.bottomBtn:hover {
+  color: var(--text-secondary);
+  background: var(--color-hover);
+}
+
+.versionText {
+  font-size: var(--font-size-3xs);
+  color: var(--text-disabled);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Modal form */
+.formGroup {
+  margin-bottom: var(--space-lg);
+}
+
+.formLabel {
+  display: block;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  margin-bottom: var(--space-xs);
+  font-weight: 500;
+}
+
+.formHint {
+  font-size: var(--font-size-2xs);
+  color: var(--text-muted);
+  margin-top: var(--space-xs);
+}
+
+.formError {
+  font-size: var(--font-size-2xs);
+  color: var(--color-error);
+  margin-top: var(--space-xs);
+}

package/src/renderer/components/SessionList.tsx

@@ -0,0 +1,247 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { Button, Input, Modal, Empty } from '../ui'
+import { IconPlus, IconDelete } from '../ui/Icons'
+import { useLocale } from '../i18n'
+import type { Session } from '../../shared/types'
+import styles from './SessionList.module.css'
+
+interface SessionListProps {
+  sessions: Session[]
+  currentSessionId: string | null
+  onSelect: (id: string) => void
+  onCreate: (name: string, url: string) => Promise<void>
+  onDelete: (id: string) => Promise<void>
+  onOpenSettings: () => void
+  activeRequestCount?: number
+  /** Incrementing counter to trigger open-create-modal from outside */
+  createTrigger?: number
+}
+
+/**
+ * Session status dot color
+ */
+function getDotColor(session: Session): string {
+  if (session.status === 'running') return 'var(--color-success)'
+  if (session.status === 'paused') return 'var(--color-warning)'
+  return 'var(--text-disabled)'
+}
+
+function getStatusInfo(session: Session): { symbol: string; color: string; labelKey: string } {
+  if (session.status === 'running') return { symbol: '●', color: 'var(--color-success)', labelKey: 'capture.running' }
+  if (session.status === 'paused') return { symbol: '⏸', color: 'var(--color-warning)', labelKey: 'capture.paused' }
+  return { symbol: '■', color: 'var(--text-muted)', labelKey: 'capture.stopped' }
+}
+
+function extractDomain(url: string): string {
+  if (!url) return ''
+  try { return new URL(url).hostname } catch { return url }
+}
+
+const SessionList: React.FC<SessionListProps> = ({
+  sessions,
+  currentSessionId,
+  onSelect,
+  onCreate,
+  onDelete,
+  onOpenSettings,
+  activeRequestCount = 0,
+  createTrigger = 0,
+}) => {
+  const { t } = useLocale()
+  const [modalOpen, setModalOpen] = useState(false)
+  const [creating, setCreating] = useState(false)
+  const [hoveredId, setHoveredId] = useState<string | null>(null)
+  const [deletingId, setDeletingId] = useState<string | null>(null)
+
+  const [formName, setFormName] = useState('')
+  const [formUrl, setFormUrl] = useState('')
+  const [nameError, setNameError] = useState('')
+  const [urlError, setUrlError] = useState('')
+  const [appVersion, setAppVersion] = useState('')
+
+  useEffect(() => {
+    window.electronAPI.getAppVersion().then(v => setAppVersion(v))
+  }, [])
+
+  const openModal = () => {
+    setModalOpen(true)
+    window.electronAPI.setTargetViewVisible(false)
+  }
+
+  // Open create modal when triggered externally
+  useEffect(() => {
+    if (createTrigger > 0) openModal()
+  }, [createTrigger]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const closeModal = () => {
+    setModalOpen(false)
+    setFormName('')
+    setFormUrl('')
+    setNameError('')
+    setUrlError('')
+    // Only restore WebContentsView if a session is selected;
+    // otherwise the empty guide needs to stay clickable
+    if (currentSessionId) {
+      window.electronAPI.setTargetViewVisible(true)
+    }
+  }
+
+  const validate = (): boolean => {
+    let valid = true
+    if (!formName.trim()) {
+      setNameError('Please enter a session name')
+      valid = false
+    } else {
+      setNameError('')
+    }
+    if (formUrl.trim()) {
+      try {
+        new URL(formUrl)
+        setUrlError('')
+      } catch {
+        setUrlError('Please enter a valid URL')
+        valid = false
+      }
+    } else {
+      setUrlError('')
+    }
+    return valid
+  }
+
+  const handleCreate = async () => {
+    if (!validate()) return
+    setCreating(true)
+    try {
+      await onCreate(formName.trim(), formUrl.trim())
+      closeModal()
+    } catch {
+      // create failed
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  const handleDelete = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation()
+    setDeletingId(id)
+    try {
+      await onDelete(id)
+    } catch {
+      // delete failed
+    } finally {
+      setDeletingId(null)
+    }
+  }
+
+  return (
+    <div className={styles.container}>
+      {/* Section header with count */}
+      <div className={styles.sectionHeader}>
+        <span className={styles.sectionLabel}>SESSIONS</span>
+        {sessions.length > 0 && (
+          <span className={styles.sectionCount}>{sessions.length}</span>
+        )}
+      </div>
+
+      {/* Session list */}
+      <div className={styles.list}>
+        {sessions.length === 0 ? (
+          <Empty description="No sessions" style={{ marginTop: 40 }} />
+        ) : (
+          sessions.map((session) => {
+            const isActive = session.id === currentSessionId
+            const isHovered = session.id === hoveredId
+            const dotColor = getDotColor(session)
+            const status = getStatusInfo(session)
+            const domain = extractDomain(session.target_url)
+            return (
+              <div
+                key={session.id}
+                className={`${styles.item} ${isActive ? styles.itemActive : ''}`}
+                onClick={() => onSelect(session.id)}
+                onMouseEnter={() => setHoveredId(session.id)}
+                onMouseLeave={() => setHoveredId(null)}
+              >
+                <div
+                  className={`${styles.statusDot} ${session.status === 'running' ? styles.statusDotRunning : ''}`}
+                  style={{ background: dotColor, color: dotColor }}
+                />
+                <div className={styles.sessionInfo}>
+                  <div className={styles.sessionName}>{session.name}</div>
+                  <div className={styles.sessionMeta}>
+                    <span style={{ color: status.color }}>{status.symbol} {t(status.labelKey as any)}</span>
+                    {isActive && activeRequestCount > 0 && (
+                      <span className={styles.sessionCount}> · {activeRequestCount} reqs</span>
+                    )}
+                  </div>
+                  {domain && <div className={styles.sessionUrl}>{domain}</div>}
+                </div>
+
+                {isHovered && (
+                  <span
+                    className={`${styles.deleteBtn} ${deletingId === session.id ? styles.deleteBtnDisabled : ''}`}
+                    onClick={(e) => handleDelete(e, session.id)}
+                  >
+                    <IconDelete size={13} />
+                  </span>
+                )}
+              </div>
+            )
+          })
+        )}
+      </div>
+
+      {/* New session button */}
+      <div className={styles.footer}>
+        <div className={styles.newBtn} onClick={openModal}>
+          + {t('session.newSession').replace('+ ', '')}
+        </div>
+      </div>
+
+      {/* Bottom: Settings + Version */}
+      <div className={styles.sidebarBottom}>
+        <div className={styles.bottomBtn} onClick={onOpenSettings}>⚙ {t('settings.title')}</div>
+        <div className={styles.versionText}>v{appVersion}</div>
+      </div>
+
+      {/* Create session modal */}
+      <Modal
+        open={modalOpen}
+        onClose={closeModal}
+        title={t('session.createTitle')}
+        footer={
+          <>
+            <Button onClick={closeModal}>{t('session.cancel')}</Button>
+            <Button variant="primary" onClick={handleCreate} loading={creating}>
+              {t('session.create')}
+            </Button>
+          </>
+        }
+      >
+        <div className={styles.formGroup}>
+          <label className={styles.formLabel}>{t('session.name')}</label>
+          <Input
+            value={formName}
+            onChange={(e) => setFormName(e.target.value)}
+            placeholder={t('session.namePlaceholder')}
+            autoFocus
+            onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
+          />
+          {nameError && <div className={styles.formError}>{nameError}</div>}
+        </div>
+        <div className={styles.formGroup}>
+          <label className={styles.formLabel}>{t('session.targetUrl')}</label>
+          <Input
+            value={formUrl}
+            onChange={(e) => setFormUrl(e.target.value)}
+            placeholder={t('session.targetUrlPlaceholder')}
+          />
+          <div className={styles.formHint}>Leave empty to capture traffic via proxy only</div>
+          {urlError && <div className={styles.formError}>{urlError}</div>}
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export default SessionList

package/src/renderer/components/SettingsModal.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react'
+import { Modal } from '../ui'
+import { IconApp, IconRobot, IconGlobe, IconBolt, IconShield, IconCode } from '../ui/Icons'
+import GeneralSection from './settings/GeneralSection'
+import LLMSection from './settings/LLMSection'
+import ProxySection from './settings/ProxySection'
+import MCPServerSection from './settings/MCPServerSection'
+import MitmProxySection from './settings/MitmProxySection'
+import FingerprintSection from './settings/FingerprintSection'
+
+type SettingsSection = 'general' | 'llm' | 'proxy' | 'mcp-server' | 'mitm-proxy' | 'fingerprint'
+
+const menuItems: { key: SettingsSection; icon: React.FC<{ size?: number | string }>; label: string }[] = [
+  { key: 'general', icon: IconApp, label: '通用' },
+  { key: 'llm', icon: IconRobot, label: 'LLM' },
+  { key: 'proxy', icon: IconGlobe, label: '代理' },
+  { key: 'mcp-server', icon: IconBolt, label: 'MCP Server' },
+  { key: 'mitm-proxy', icon: IconShield, label: 'MITM 代理' },
+  { key: 'fingerprint', icon: IconCode, label: '指纹' },
+]
+
+const sectionComponents: Record<SettingsSection, React.ComponentType> = {
+  'general': GeneralSection,
+  'llm': LLMSection,
+  'proxy': ProxySection,
+  'mcp-server': MCPServerSection,
+  'mitm-proxy': MitmProxySection,
+  'fingerprint': FingerprintSection as React.ComponentType,
+}
+
+interface Props { open: boolean; onClose: () => void; currentSessionId?: string | null }
+
+export default function SettingsModal({ open, onClose, currentSessionId }: Props) {
+  const [activeSection, setActiveSection] = useState<SettingsSection>('general')
+
+  const ActiveComponent = sectionComponents[activeSection]
+
+  return (
+    <Modal
+      title="Settings"
+      open={open}
+      onClose={onClose}
+      width={900}
+    >
+      {/* Negate modal body padding so sidebar border runs edge-to-edge */}
+      <div style={{ margin: '-16px -24px', display: 'flex', height: 560, overflow: 'hidden' }}>
+        {/* Left sidebar navigation */}
+        <div style={{
+          width: 180,
+          borderRight: '1px solid var(--color-border)',
+          paddingTop: 12,
+          paddingBottom: 12,
+          flexShrink: 0,
+          overflow: 'auto',
+        }}>
+          {menuItems.map(item => {
+            const Icon = item.icon
+            const isActive = activeSection === item.key
+            return (
+              <div
+                key={item.key}
+                onClick={() => setActiveSection(item.key)}
+                style={{
+                  padding: '8px 16px',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 10,
+                  borderRadius: 6,
+                  margin: '2px 8px',
+                  fontSize: 'var(--font-size-base)',
+                  background: isActive ? 'var(--color-accent-bg)' : 'transparent',
+                  color: isActive ? 'var(--color-accent)' : 'var(--text-secondary)',
+                  transition: 'background 0.2s',
+                }}
+                onMouseEnter={e => {
+                  if (!isActive) (e.currentTarget.style.background = 'var(--color-hover)')
+                }}
+                onMouseLeave={e => {
+                  if (!isActive) (e.currentTarget.style.background = 'transparent')
+                }}
+              >
+                <Icon size={16} />
+                <span style={{ color: 'inherit', fontSize: 'inherit' }}>{item.label}</span>
+              </div>
+            )
+          })}
+        </div>
+
+        {/* Right content area */}
+        <div style={{ flex: 1, padding: 24, overflowY: 'auto' }}>
+          {activeSection === 'fingerprint'
+            ? <FingerprintSection currentSessionId={currentSessionId} />
+            : <ActiveComponent />
+          }
+        </div>
+      </div>
+    </Modal>
+  )
+}

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

@@ -0,0 +1,44 @@
+.statusBar {
+  display: flex;
+  align-items: center;
+  height: var(--statusbar-height);
+  background: var(--color-sidebar);
+  border-top: 1px solid var(--color-border);
+  padding: 0 var(--space-lg);
+  gap: var(--space-xl);
+  flex-shrink: 0;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: var(--font-size-3xs);
+}
+
+.dot {
+  width: 5px;
+  height: 5px;
+  border-radius: var(--radius-full);
+}
+
+.label {
+  color: var(--text-label);
+}
+
+.value {
+  color: var(--text-secondary);
+}
+
+.spacer {
+  flex: 1;
+}
+
+.pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}