@mseep/anything-analyzer 3.6.50

package/src/renderer/components/StatusBar.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import { useLocale } from '../i18n'
+import type { SessionStatus } from '@shared/types'
+import type { AppView } from './Titlebar'
+import styles from './StatusBar.module.css'
+
+interface StatusBarProps {
+  status: SessionStatus | null
+  requestCount: number
+  hookCount: number
+  interactionCount?: number
+  sessionName?: string
+  activeView?: AppView
+  llmModel?: string
+  tokenCount?: number
+}
+
+const StatusBar: React.FC<StatusBarProps> = ({
+  status,
+  requestCount,
+  hookCount,
+  interactionCount = 0,
+  sessionName,
+  activeView = 'browser',
+  llmModel,
+  tokenCount,
+}) => {
+  const { t } = useLocale()
+  const statusLabels: Record<string, { color: string; label: string; pulse: boolean }> = {
+    running: { color: 'var(--color-success)', label: t('capture.running'), pulse: true },
+    paused: { color: 'var(--color-warning)', label: t('capture.paused'), pulse: false },
+    stopped: { color: 'var(--text-muted)', label: t('capture.stopped'), pulse: false },
+  }
+  const statusCfg = status ? statusLabels[status] : null
+
+  return (
+    <div className={styles.statusBar}>
+      {/* Status dot + label */}
+      <div className={styles.item}>
+        <span
+          className={`${styles.dot} ${statusCfg?.pulse ? styles.pulse : ''}`}
+          style={{ background: statusCfg?.color ?? 'var(--text-disabled)' }}
+        />
+        <span className={styles.label}>{t('status.session')}</span>
+        <span className={styles.value} style={{ color: statusCfg?.color }}>
+          {statusCfg?.label ?? 'Idle'}
+        </span>
+      </div>
+
+      {/* Request count */}
+      <div className={styles.item}>
+        <span className={styles.label}>{t('status.requests')}</span>
+        <span className={styles.value}>{requestCount}</span>
+      </div>
+
+      {/* Hooks count — browser/inspector only */}
+      {activeView !== 'report' && (
+        <div className={styles.item}>
+          <span className={styles.label}>{t('status.hooks')}</span>
+          <span className={styles.value}>{hookCount}</span>
+        </div>
+      )}
+
+      {/* Interaction recording count */}
+      {activeView !== 'report' && interactionCount > 0 && (
+        <div className={styles.item}>
+          <span
+            className={`${styles.dot} ${status === 'running' ? styles.pulse : ''}`}
+            style={{ background: status === 'running' ? 'var(--color-error)' : 'var(--text-muted)' }}
+          />
+          <span className={styles.label}>{t('data.interactions')}</span>
+          <span className={styles.value}>{interactionCount}</span>
+        </div>
+      )}
+
+      {/* Report view: LLM + Tokens */}
+      {activeView === 'report' && llmModel && (
+        <div className={styles.item}>
+          <span className={styles.label}>LLM</span>
+          <span className={styles.value}>{llmModel}</span>
+        </div>
+      )}
+      {activeView === 'report' && tokenCount != null && tokenCount > 0 && (
+        <div className={styles.item}>
+          <span className={styles.label}>Tokens</span>
+          <span className={styles.value}>{tokenCount.toLocaleString()}</span>
+        </div>
+      )}
+
+      <div className={styles.spacer} />
+
+      {/* Session name on the right */}
+      {sessionName && (
+        <div className={styles.item}>
+          <span className={styles.value}>{sessionName}</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default StatusBar

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

@@ -0,0 +1,41 @@
+.kvTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-xs);
+}
+
+.kvTable th,
+.kvTable td {
+  border: 1px solid var(--color-border);
+  padding: 5px 10px;
+  text-align: left;
+}
+
+.kvTable th {
+  background: var(--color-surface);
+  color: var(--text-secondary);
+  font-weight: 600;
+  font-size: var(--font-size-xs);
+}
+
+.kvTable td {
+  color: var(--text-secondary);
+}
+
+.valueCell {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  max-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.codeInline {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  background: var(--color-surface);
+  padding: 1px 4px;
+  border-radius: 3px;
+  color: var(--color-warning);
+}

package/src/renderer/components/StorageView.tsx

@@ -0,0 +1,178 @@
+import React, { useMemo } from 'react'
+import { Collapse, Tag, Empty, Timeline } from '../ui'
+import { IconShield, IconDatabase, IconApp } from '../ui/Icons'
+import type { StorageSnapshot, StorageType } from '@shared/types'
+import styles from './StorageView.module.css'
+
+interface StorageViewProps {
+  snapshots: StorageSnapshot[]
+}
+
+const STORAGE_META: Record<StorageType, { label: string; icon: React.ReactNode; color: 'orange' | 'info' | 'success' }> = {
+  cookie: { label: 'Cookies', icon: <IconShield size={14} />, color: 'orange' },
+  localStorage: { label: 'Local Storage', icon: <IconDatabase size={14} />, color: 'info' },
+  sessionStorage: { label: 'Session Storage', icon: <IconApp size={14} />, color: 'success' },
+}
+
+function parseStorageData(data: string): Array<{ key: string; value: string }> {
+  try {
+    const parsed = JSON.parse(data)
+    if (typeof parsed === 'object' && parsed !== null) {
+      return Object.entries(parsed).map(([key, value]) => ({
+        key,
+        value: typeof value === 'string' ? value : JSON.stringify(value),
+      }))
+    }
+  } catch { /* ignore */ }
+  return []
+}
+
+function computeDiff(
+  oldData: string,
+  newData: string
+): Array<{ key: string; action: 'added' | 'removed' | 'changed'; oldValue?: string; newValue?: string }> {
+  const oldEntries = parseStorageData(oldData)
+  const newEntries = parseStorageData(newData)
+  const oldMap = new Map(oldEntries.map(e => [e.key, e.value]))
+  const newMap = new Map(newEntries.map(e => [e.key, e.value]))
+  const diffs: Array<{ key: string; action: 'added' | 'removed' | 'changed'; oldValue?: string; newValue?: string }> = []
+
+  for (const [key, value] of newMap) {
+    if (!oldMap.has(key)) diffs.push({ key, action: 'added', newValue: value })
+    else if (oldMap.get(key) !== value) diffs.push({ key, action: 'changed', oldValue: oldMap.get(key), newValue: value })
+  }
+  for (const [key] of oldMap) {
+    if (!newMap.has(key)) diffs.push({ key, action: 'removed', oldValue: oldMap.get(key) })
+  }
+  return diffs
+}
+
+const DIFF_COLORS: Record<string, 'success' | 'error' | 'info'> = { added: 'success', removed: 'error', changed: 'info' }
+
+// KV Table using plain HTML table
+const KVTable: React.FC<{ entries: Array<{ key: string; value: string }> }> = ({ entries }) => (
+  <table className={styles.kvTable}>
+    <thead>
+      <tr>
+        <th style={{ width: '35%' }}>Key</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      {entries.map(e => (
+        <tr key={e.key}>
+          <td><code className={styles.codeInline}>{e.key}</code></td>
+          <td className={styles.valueCell} title={e.value}>{e.value}</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+)
+
+// Diff timeline
+const DiffTimeline: React.FC<{ snapshots: StorageSnapshot[] }> = ({ snapshots }) => {
+  if (snapshots.length < 2) return null
+
+  const sorted = [...snapshots].sort((a, b) => a.timestamp - b.timestamp)
+  const items: Array<{ key: string; color?: string; children: React.ReactNode }> = []
+
+  for (let i = 1; i < sorted.length; i++) {
+    const diffs = computeDiff(sorted[i - 1].data, sorted[i].data)
+    if (diffs.length === 0) continue
+
+    items.push({
+      key: `diff-${i}`,
+      color: 'var(--color-info)',
+      children: (
+        <div>
+          <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--text-muted)' }}>
+            {new Date(sorted[i].timestamp).toLocaleString()}
+          </span>
+          <div style={{ marginTop: 4 }}>
+            {diffs.map(d => (
+              <div key={d.key} style={{ marginBottom: 2, display: 'flex', alignItems: 'center', gap: 4 }}>
+                <Tag color={DIFF_COLORS[d.action]}>{d.action}</Tag>
+                <code className={styles.codeInline}>{d.key}</code>
+                {d.newValue && (
+                  <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--text-muted)', marginLeft: 4 }}>
+                    = {d.newValue.length > 60 ? d.newValue.slice(0, 60) + '...' : d.newValue}
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      ),
+    })
+  }
+
+  if (items.length === 0) return null
+
+  return (
+    <div style={{ marginTop: 12 }}>
+      <div style={{ fontWeight: 600, fontSize: 'var(--font-size-base)', color: 'var(--text-primary)', marginBottom: 8 }}>Changes Timeline</div>
+      <Timeline items={items} />
+    </div>
+  )
+}
+
+// Single storage type section
+const StorageSection: React.FC<{ type: StorageType; snapshots: StorageSnapshot[] }> = ({ type, snapshots }) => {
+  const meta = STORAGE_META[type]
+  const sorted = [...snapshots].sort((a, b) => b.timestamp - a.timestamp)
+  const latestEntries = sorted.length > 0 ? parseStorageData(sorted[0].data) : []
+
+  return (
+    <div>
+      {latestEntries.length > 0 ? (
+        <>
+          <div style={{ fontSize: 'var(--font-size-xs)', color: 'var(--text-muted)', marginBottom: 8 }}>
+            Latest snapshot: {new Date(sorted[0].timestamp).toLocaleString()} | {latestEntries.length} entries | Domain: {sorted[0].domain}
+          </div>
+          <KVTable entries={latestEntries} />
+          {sorted.length > 1 && <DiffTimeline snapshots={sorted} />}
+        </>
+      ) : (
+        <Empty description={`No ${meta.label.toLowerCase()} data`} />
+      )}
+    </div>
+  )
+}
+
+const StorageView: React.FC<StorageViewProps> = ({ snapshots }) => {
+  const grouped = useMemo(() => {
+    const groups: Record<StorageType, StorageSnapshot[]> = { cookie: [], localStorage: [], sessionStorage: [] }
+    for (const snap of snapshots) {
+      if (groups[snap.storage_type]) groups[snap.storage_type].push(snap)
+    }
+    return groups
+  }, [snapshots])
+
+  if (snapshots.length === 0) {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', minHeight: 200 }}>
+        <Empty description="No storage snapshots captured yet" />
+      </div>
+    )
+  }
+
+  const collapseItems = (['cookie', 'localStorage', 'sessionStorage'] as StorageType[]).map(type => {
+    const meta = STORAGE_META[type]
+    const count = grouped[type].length
+    return {
+      key: type,
+      label: (
+        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+          {meta.icon}
+          <span>{meta.label}</span>
+          {count > 0 && <Tag color={meta.color}>{count} snapshot{count > 1 ? 's' : ''}</Tag>}
+        </span>
+      ),
+      children: <StorageSection type={type} snapshots={grouped[type]} />,
+    }
+  })
+
+  return <Collapse items={collapseItems} defaultActiveKey={['cookie', 'localStorage', 'sessionStorage']} />
+}
+
+export default StorageView

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

@@ -0,0 +1,88 @@
+.tabBar {
+  height: 32px;
+  display: flex;
+  align-items: stretch;
+  background: var(--color-sidebar);
+  border-bottom: 1px solid var(--color-border);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.tabList {
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+  flex: 1;
+  min-width: 0;
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  min-width: 0;
+  max-width: 180px;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  border-right: 1px solid var(--color-border);
+  transition: background var(--transition-fast);
+  background: transparent;
+}
+
+.tab:hover {
+  background: var(--color-surface);
+}
+
+.tabActive {
+  background: var(--color-surface-hover);
+  border-bottom-color: var(--color-info);
+}
+
+.tabLabel {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+  user-select: none;
+}
+
+.tabActive .tabLabel {
+  color: var(--text-secondary);
+}
+
+.closeBtn {
+  display: flex;
+  align-items: center;
+  color: var(--text-disabled);
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+  cursor: pointer;
+}
+
+.tab:hover .closeBtn,
+.tabActive .closeBtn {
+  opacity: 1;
+}
+
+.closeBtn:hover {
+  color: var(--text-secondary);
+}
+
+.newTabBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  flex-shrink: 0;
+  cursor: pointer;
+  color: var(--text-disabled);
+  transition: color var(--transition-fast);
+}
+
+.newTabBtn:hover {
+  color: var(--text-secondary);
+}

package/src/renderer/components/TabBar.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import { IconPlus, IconClose, IconLoading } from '../ui/Icons'
+import type { BrowserTab } from '@shared/types'
+import styles from './TabBar.module.css'
+
+interface TabBarProps {
+  tabs: BrowserTab[]
+  activeTabId: string | null
+  onActivate: (tabId: string) => void
+  onClose: (tabId: string) => void
+  onCreate: () => void
+}
+
+/** Extracts a display label for a tab: title > hostname > 'New Tab' */
+function getTabLabel(tab: BrowserTab): string {
+  if (tab.title && tab.title !== 'New Tab') return tab.title
+  if (tab.url) {
+    try { return new URL(tab.url).hostname || 'New Tab' } catch { /* invalid URL */ }
+  }
+  return 'New Tab'
+}
+
+const TabBar: React.FC<TabBarProps> = ({ tabs, activeTabId, onActivate, onClose, onCreate }) => {
+  const [hoveredTabId, setHoveredTabId] = useState<string | null>(null)
+
+  return (
+    <div className={styles.tabBar}>
+      <div className={styles.tabList}>
+        {tabs.map((tab) => {
+          const isActive = tab.id === activeTabId
+          const isHovered = tab.id === hoveredTabId
+          const label = getTabLabel(tab)
+
+          return (
+            <div
+              key={tab.id}
+              className={`${styles.tab} ${isActive ? styles.tabActive : ''}`}
+              onClick={() => onActivate(tab.id)}
+              onMouseEnter={() => setHoveredTabId(tab.id)}
+              onMouseLeave={() => setHoveredTabId(null)}
+            >
+              <span className={styles.tabLabel} title={tab.url || label}>
+                {tab.isLoading && <IconLoading size={10} />}
+                {label}
+              </span>
+              {(isHovered || isActive) && (
+                <span
+                  className={styles.closeBtn}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onClose(tab.id)
+                  }}
+                  style={{ opacity: 1 }}
+                >
+                  <IconClose size={10} />
+                </span>
+              )}
+            </div>
+          )
+        })}
+      </div>
+
+      <div className={styles.newTabBtn} onClick={onCreate} title="New Tab">
+        <IconPlus size={12} />
+      </div>
+    </div>
+  )
+}
+
+export default TabBar