@mseep/anything-analyzer 3.6.50

package/src/renderer/components/AiLogDetail.tsx

@@ -0,0 +1,173 @@
+import React, { useEffect, useState } from 'react'
+import { useLocale } from '../i18n'
+import type { AiRequestLog } from '@shared/types'
+import styles from './AiLogView.module.css'
+
+interface AiLogDetailProps {
+  logId: number | null
+}
+
+type DetailTab = 'request' | 'response' | 'headers' | 'meta'
+
+function formatTokenCount(prompt: number, completion: number): string {
+  const fmt = (n: number) => n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n)
+  return `${fmt(prompt)} + ${fmt(completion)} tokens`
+}
+
+function formatDuration(ms: number | null): string {
+  if (ms === null) return '--'
+  if (ms < 1000) return `${ms}ms`
+  return `${(ms / 1000).toFixed(1)}s`
+}
+
+function tryFormatJson(text: string): string {
+  try {
+    return JSON.stringify(JSON.parse(text), null, 2)
+  } catch {
+    return text
+  }
+}
+
+function formatHeaders(headersJson: string | null): Array<[string, string]> {
+  if (!headersJson) return []
+  try {
+    const obj = JSON.parse(headersJson)
+    return Object.entries(obj) as Array<[string, string]>
+  } catch {
+    return []
+  }
+}
+
+export const AiLogDetail: React.FC<AiLogDetailProps> = ({ logId }) => {
+  const { t } = useLocale()
+  const [tab, setTab] = useState<DetailTab>('request')
+  const [detail, setDetail] = useState<AiRequestLog | null>(null)
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    if (logId === null) {
+      setDetail(null)
+      return
+    }
+    window.electronAPI.getAiRequestLogDetail(logId).then(setDetail)
+  }, [logId])
+
+  if (!detail) {
+    return <div className={styles.detailEmpty}>← Select a log entry</div>
+  }
+
+  const statusText = detail.status_code
+    ? `${detail.status_code} ${detail.status_code >= 200 && detail.status_code < 300 ? 'OK' : 'ERR'}`
+    : 'N/A'
+
+  const urlPath = (() => {
+    try { return new URL(detail.request_url).pathname }
+    catch { return detail.request_url }
+  })()
+
+  const handleCopy = () => {
+    let content = ''
+    switch (tab) {
+      case 'request': content = detail.request_body; break
+      case 'response': content = detail.response_body ?? ''; break
+      case 'headers': content = JSON.stringify({
+        request: formatHeaders(detail.request_headers),
+        response: formatHeaders(detail.response_headers ?? null),
+      }, null, 2); break
+      case 'meta': content = JSON.stringify({
+        provider: detail.provider, model: detail.model, type: detail.type,
+        session_id: detail.session_id, report_id: detail.report_id,
+        created_at: new Date(detail.created_at).toISOString(),
+      }, null, 2); break
+    }
+    navigator.clipboard.writeText(content).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    })
+  }
+
+  const tabs: { key: DetailTab; label: string }[] = [
+    { key: 'request', label: t('aiLog.tabRequest') },
+    { key: 'response', label: t('aiLog.tabResponse') },
+    { key: 'headers', label: t('aiLog.tabHeaders') },
+    { key: 'meta', label: t('aiLog.tabMeta') },
+  ]
+
+  return (
+    <div className={styles.detailPanel}>
+      {/* Tab bar */}
+      <div className={styles.detailTabBar}>
+        {tabs.map(tb => (
+          <button
+            key={tb.key}
+            className={`${styles.detailTab} ${tab === tb.key ? styles.detailTabActive : ''}`}
+            onClick={() => setTab(tb.key)}
+          >
+            {tb.label}
+          </button>
+        ))}
+        <div className={styles.detailTabSpacer} />
+        <button className={styles.copyBtn} onClick={handleCopy}>
+          {copied ? t('aiLog.copied') : t('aiLog.copy')}
+        </button>
+      </div>
+
+      {/* Meta info line */}
+      <div className={styles.metaLine}>
+        <span>{detail.request_method} {urlPath}</span>
+        <span className={detail.error ? styles.statusError : styles.statusOk}>{statusText}</span>
+        <span>{formatDuration(detail.duration_ms)}</span>
+        <span>{formatTokenCount(detail.prompt_tokens, detail.completion_tokens)}</span>
+      </div>
+
+      {/* Error banner */}
+      {detail.error && (
+        <div className={styles.errorBanner}>{detail.error}</div>
+      )}
+
+      {/* Content area */}
+      <div className={styles.detailContent}>
+        {tab === 'request' && (
+          <pre className={styles.jsonBlock}>{tryFormatJson(detail.request_body)}</pre>
+        )}
+        {tab === 'response' && (
+          <pre className={styles.jsonBlock}>{detail.response_body ? tryFormatJson(detail.response_body) : '(empty)'}</pre>
+        )}
+        {tab === 'headers' && (
+          <div className={styles.headersBlock}>
+            <h4>{t('aiLog.requestHeaders')}</h4>
+            <table className={styles.headersTable}>
+              <tbody>
+                {formatHeaders(detail.request_headers).map(([k, v]) => (
+                  <tr key={`req-${k}`}><td className={styles.headerKey}>{k}</td><td>{v}</td></tr>
+                ))}
+              </tbody>
+            </table>
+            <h4>{t('aiLog.responseHeaders')}</h4>
+            <table className={styles.headersTable}>
+              <tbody>
+                {formatHeaders(detail.response_headers ?? null).map(([k, v]) => (
+                  <tr key={`res-${k}`}><td className={styles.headerKey}>{k}</td><td>{v}</td></tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+        {tab === 'meta' && (
+          <table className={styles.metaTable}>
+            <tbody>
+              <tr><td>Provider</td><td>{detail.provider}</td></tr>
+              <tr><td>Model</td><td>{detail.model}</td></tr>
+              <tr><td>Type</td><td>{detail.type}</td></tr>
+              <tr><td>Session ID</td><td>{detail.session_id ?? '--'}</td></tr>
+              <tr><td>Report ID</td><td>{detail.report_id ?? '--'}</td></tr>
+              <tr><td>Prompt Tokens</td><td>{detail.prompt_tokens}</td></tr>
+              <tr><td>Completion Tokens</td><td>{detail.completion_tokens}</td></tr>
+              <tr><td>Created</td><td>{new Date(detail.created_at).toLocaleString()}</td></tr>
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/renderer/components/AiLogList.tsx

@@ -0,0 +1,101 @@
+import React, { useMemo, useState } from 'react'
+import { useLocale } from '../i18n'
+import type { AiRequestLog } from '@shared/types'
+import styles from './AiLogView.module.css'
+
+interface AiLogListProps {
+  logs: AiRequestLog[]
+  selectedId: number | null
+  onSelect: (id: number) => void
+}
+
+type FilterType = 'all' | 'analyze' | 'chat' | 'filter'
+
+function formatDuration(ms: number | null): string {
+  if (ms === null) return '--'
+  if (ms < 1000) return `${ms}ms`
+  return `${(ms / 1000).toFixed(1)}s`
+}
+
+function formatTokenCount(prompt: number, completion: number): string {
+  const total = prompt + completion
+  if (total === 0) return '--'
+  if (total >= 1000) return `${(total / 1000).toFixed(1)}k`
+  return String(total)
+}
+
+export const AiLogList: React.FC<AiLogListProps> = ({ logs, selectedId, onSelect }) => {
+  const { t } = useLocale()
+  const [filterType, setFilterType] = useState<FilterType>('all')
+  const [search, setSearch] = useState('')
+
+  const filteredLogs = useMemo(() => {
+    let result = logs
+    if (filterType !== 'all') {
+      result = result.filter(l => l.type === filterType)
+    }
+    if (search.trim()) {
+      const q = search.toLowerCase()
+      result = result.filter(l =>
+        l.model.toLowerCase().includes(q) ||
+        l.request_url.toLowerCase().includes(q) ||
+        l.provider.toLowerCase().includes(q)
+      )
+    }
+    return result
+  }, [logs, filterType, search])
+
+  const filterOptions: { key: FilterType; label: string }[] = [
+    { key: 'all', label: `${t('aiLog.filterAll')} (${logs.length})` },
+    { key: 'analyze', label: t('aiLog.filterAnalyze') },
+    { key: 'chat', label: t('aiLog.filterChat') },
+    { key: 'filter', label: t('aiLog.filterFilter') },
+  ]
+
+  return (
+    <div className={styles.listPanel}>
+      {/* Filter tags */}
+      <div className={styles.filterRow}>
+        {filterOptions.map(opt => (
+          <button
+            key={opt.key}
+            className={`${styles.filterTag} ${filterType === opt.key ? styles.filterTagActive : ''}`}
+            onClick={() => setFilterType(opt.key)}
+          >
+            {opt.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Search */}
+      <input
+        className={styles.searchInput}
+        placeholder={t('aiLog.searchPlaceholder')}
+        value={search}
+        onChange={e => setSearch(e.target.value)}
+      />
+
+      {/* List */}
+      <div className={styles.listScroll}>
+        {filteredLogs.map(log => (
+          <div
+            key={log.id}
+            className={`${styles.listItem} ${log.id === selectedId ? styles.listItemActive : ''} ${log.error ? styles.listItemError : ''}`}
+            onClick={() => onSelect(log.id)}
+          >
+            <span className={styles.listItemLeft}>
+              #{log.id} {log.type} — {log.model}
+              {log.error && log.status_code ? ` ✗ ${log.status_code}` : ''}
+            </span>
+            <span className={styles.listItemRight}>
+              {formatDuration(log.duration_ms)} · {formatTokenCount(log.prompt_tokens, log.completion_tokens)}
+            </span>
+          </div>
+        ))}
+        {filteredLogs.length === 0 && (
+          <div className={styles.emptyList}>{t('aiLog.noData')}</div>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,364 @@
+/* ==============================
+   AI Request Log View
+   Follows tokens.css design system
+   ============================== */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  color: var(--text-primary);
+  background: var(--color-content);
+}
+
+/* Toolbar */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-lg);
+  padding: 0 var(--space-xl);
+  height: 38px;
+  min-height: 38px;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-bar);
+  font-size: var(--font-size-2xs);
+}
+
+.backBtn {
+  background: var(--color-accent-bg);
+  color: var(--color-accent);
+  border: 1px solid var(--color-accent-border);
+  border-radius: var(--radius-button);
+  padding: var(--space-2xs) var(--space-lg);
+  font-size: var(--font-size-3xs);
+  font-family: var(--font-sans);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: border-color var(--transition-fast), color var(--transition-fast);
+}
+.backBtn:hover {
+  border-color: var(--color-accent);
+  color: var(--text-primary);
+}
+
+.toolbarSpacer { flex: 1; }
+
+.sessionLabel {
+  font-size: var(--font-size-3xs);
+  color: var(--text-muted);
+}
+
+.globalLabel {
+  font-size: var(--font-size-3xs);
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.toggleBtn {
+  background: none;
+  border: none;
+  color: var(--color-accent);
+  font-size: var(--font-size-3xs);
+  font-family: var(--font-sans);
+  cursor: pointer;
+  padding: var(--space-2xs) var(--space-sm);
+  transition: color var(--transition-fast);
+}
+.toggleBtn:hover {
+  color: var(--text-primary);
+  text-decoration: underline;
+}
+
+/* Main content split */
+.mainContent {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* ---- List Panel (left 42%) ---- */
+.listPanel {
+  width: 42%;
+  min-width: 240px;
+  border-right: 1px solid var(--color-border);
+  background: var(--color-sidebar);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.filterRow {
+  display: flex;
+  gap: var(--space-sm);
+  padding: var(--space-md) var(--space-md) var(--space-xs);
+  flex-wrap: wrap;
+}
+
+.filterTag {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-badge);
+  padding: var(--space-2xs) var(--space-md);
+  font-size: var(--font-size-3xs);
+  font-family: var(--font-sans);
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: border-color var(--transition-fast), color var(--transition-fast);
+}
+.filterTag:hover {
+  border-color: var(--color-border-hover);
+  color: var(--text-primary);
+}
+.filterTagActive {
+  background: var(--color-accent-bg);
+  color: var(--color-accent);
+  border-color: var(--color-accent-border);
+}
+
+.searchInput {
+  margin: var(--space-xs) var(--space-md) var(--space-md);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-badge);
+  padding: var(--space-xs) var(--space-md);
+  font-size: var(--font-size-3xs);
+  font-family: var(--font-sans);
+  color: var(--text-secondary);
+  outline: none;
+  transition: border-color var(--transition-fast);
+}
+.searchInput:focus {
+  border-color: var(--color-accent);
+}
+.searchInput::placeholder {
+  color: var(--text-disabled);
+}
+
+.listScroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 var(--space-xs) var(--space-xs);
+}
+
+.listItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-sm) var(--space-md);
+  margin-bottom: var(--space-2xs);
+  border-radius: var(--radius-badge);
+  font-size: var(--font-size-3xs);
+  cursor: pointer;
+  color: var(--text-secondary);
+  gap: var(--space-md);
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+.listItem:hover {
+  background: var(--color-hover);
+  color: var(--text-primary);
+}
+
+.listItemActive {
+  background: var(--color-accent-bg) !important;
+  color: var(--color-accent) !important;
+  border: 1px solid var(--color-accent-border);
+}
+
+.listItemError {
+  color: var(--color-error);
+}
+.listItemActive.listItemError {
+  color: var(--color-error);
+}
+
+.listItemLeft {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.listItemRight {
+  white-space: nowrap;
+  font-size: var(--font-size-3xs);
+  color: var(--text-muted);
+}
+.listItemActive .listItemRight {
+  color: var(--color-accent);
+  opacity: 0.8;
+}
+
+.emptyList {
+  padding: var(--space-3xl) var(--space-lg);
+  text-align: center;
+  font-size: var(--font-size-2xs);
+  color: var(--text-disabled);
+}
+
+/* ---- Detail Panel (right 58%) ---- */
+.detailPanel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--color-content);
+  color: var(--text-secondary);
+}
+
+.detailEmpty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-xs);
+  color: var(--text-disabled);
+}
+
+.detailTabBar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-bar);
+}
+
+.detailTab {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-badge);
+  padding: var(--space-2xs) var(--space-lg);
+  font-size: var(--font-size-3xs);
+  font-family: var(--font-sans);
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: border-color var(--transition-fast), color var(--transition-fast);
+}
+.detailTab:hover {
+  border-color: var(--color-border-hover);
+  color: var(--text-primary);
+}
+.detailTabActive {
+  background: var(--color-accent-bg);
+  color: var(--color-accent);
+  border-color: var(--color-accent-border);
+}
+
+.detailTabSpacer { flex: 1; }
+
+.copyBtn {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-badge);
+  padding: var(--space-2xs) var(--space-lg);
+  font-size: var(--font-size-3xs);
+  font-family: var(--font-sans);
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: border-color var(--transition-fast), color var(--transition-fast);
+}
+.copyBtn:hover {
+  border-color: var(--color-border-hover);
+  color: var(--text-primary);
+}
+
+/* Meta info line */
+.metaLine {
+  display: flex;
+  gap: var(--space-xl);
+  padding: var(--space-sm) var(--space-lg);
+  font-size: var(--font-size-3xs);
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface);
+}
+
+.statusOk { color: var(--color-success); }
+.statusError { color: var(--color-error); }
+
+.errorBanner {
+  padding: var(--space-sm) var(--space-lg);
+  background: var(--color-error-bg);
+  color: var(--color-error);
+  font-size: var(--font-size-3xs);
+  border-bottom: 1px solid var(--color-error-border);
+}
+
+/* Content area */
+.detailContent {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-md);
+}
+
+.jsonBlock {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-button);
+  padding: var(--space-lg);
+  font-size: var(--font-size-3xs);
+  font-family: var(--font-mono);
+  line-height: var(--line-height-normal);
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+  overflow-x: auto;
+}
+
+/* Headers table */
+.headersBlock h4 {
+  font-size: var(--font-size-3xs);
+  color: var(--text-label);
+  letter-spacing: var(--letter-spacing-label);
+  text-transform: uppercase;
+  margin: var(--space-lg) 0 var(--space-sm);
+}
+.headersBlock h4:first-child { margin-top: 0; }
+
+.headersTable {
+  width: 100%;
+  font-size: var(--font-size-3xs);
+  border-collapse: collapse;
+}
+.headersTable td {
+  padding: var(--space-2xs) var(--space-md);
+  border-bottom: 1px solid var(--color-border-subtle);
+  vertical-align: top;
+  word-break: break-all;
+  color: var(--text-secondary);
+}
+.headerKey {
+  font-weight: 600;
+  white-space: nowrap;
+  width: 180px;
+  color: var(--color-accent);
+  font-family: var(--font-mono);
+}
+
+/* Meta table */
+.metaTable {
+  width: 100%;
+  font-size: var(--font-size-3xs);
+  border-collapse: collapse;
+}
+.metaTable td {
+  padding: var(--space-xs) var(--space-md);
+  border-bottom: 1px solid var(--color-border-subtle);
+  color: var(--text-secondary);
+}
+.metaTable td:first-child {
+  font-weight: 600;
+  width: 140px;
+  color: var(--text-label);
+}
+
+/* Empty container */
+.emptyContainer {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}