memhouse 0.0.1 → 0.3.0

package/ui/src/pages/RelayUserDetail.jsx

@@ -0,0 +1,466 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { ArrowLeft, MessageSquare, FolderOpen, ChevronDown, ChevronRight, Hash } from 'lucide-react'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement } from 'chart.js'
+import { Doughnut, Bar } from 'react-chartjs-2'
+import KpiCard from '../components/KpiCard'
+import EditorIcon from '../components/EditorIcon'
+import SectionTitle from '../components/SectionTitle'
+import ChatSidebar from '../components/ChatSidebar'
+import LiveFeed from '../components/LiveFeed'
+import { editorColor, editorLabel, formatNumber, formatDate } from '../lib/constants'
+import { fetchRelayUserActivity, fetchRelaySession } from '../lib/api'
+import { useTheme } from '../lib/theme'
+
+ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement)
+
+const MONO = 'JetBrains Mono, monospace'
+const MODEL_COLORS = ['#6366f1', '#a78bfa', '#818cf8', '#c084fc', '#e879f9', '#f472b6', '#fb7185', '#f87171', '#fbbf24', '#34d399']
+
+function ProportionBar({ segments, height = 6 }) {
+  const total = segments.reduce((s, seg) => s + seg.value, 0)
+  if (total === 0) return null
+  return (
+    <div className="flex w-full rounded-full overflow-hidden" style={{ height }}>
+      {segments.filter(s => s.value > 0).map((seg, i) => (
+        <div
+          key={i}
+          title={`${seg.label}: ${formatNumber(seg.value)}`}
+          className="h-full transition-all"
+          style={{ width: `${(seg.value / total * 100).toFixed(1)}%`, background: seg.color }}
+        />
+      ))}
+    </div>
+  )
+}
+
+// Left sidebar: sessions grouped by project (folder-tree)
+function SessionSidebar({ sessions, projects, selectedChat, onSelectChat }) {
+  const [collapsed, setCollapsed] = useState(new Set())
+
+  const toggle = (key) => {
+    setCollapsed(prev => {
+      const next = new Set(prev)
+      next.has(key) ? next.delete(key) : next.add(key)
+      return next
+    })
+  }
+
+  // Group sessions by project
+  const grouped = useMemo(() => {
+    const map = {}
+    const noProject = []
+    for (const s of sessions) {
+      if (s.folder) {
+        if (!map[s.folder]) map[s.folder] = []
+        map[s.folder].push(s)
+      } else {
+        noProject.push(s)
+      }
+    }
+    const sorted = Object.entries(map).sort((a, b) => b[1].length - a[1].length)
+    return { sorted, noProject }
+  }, [sessions])
+
+  const SessionItem = ({ s }) => (
+    <div
+      className="flex items-center gap-1.5 px-2 py-1.5 cursor-pointer transition rounded-sm"
+      style={{ background: selectedChat === s.id ? 'rgba(99,102,241,0.12)' : 'transparent' }}
+      onMouseEnter={e => { if (selectedChat !== s.id) e.currentTarget.style.background = 'var(--c-bg3)' }}
+      onMouseLeave={e => { if (selectedChat !== s.id) e.currentTarget.style.background = 'transparent' }}
+      onClick={() => onSelectChat(s.id)}
+    >
+      <EditorIcon source={s.source} size={10} />
+      <div className="flex-1 min-w-0">
+        <div className="text-[11px] font-medium truncate" style={{ color: 'var(--c-white)' }}>{s.name || 'Untitled'}</div>
+        <div className="flex items-center gap-1 text-[8px]" style={{ color: 'var(--c-text3)' }}>
+          {s.totalMessages > 0 && <span>{s.totalMessages}m</span>}
+          {s.totalMessages > 0 && s.lastUpdatedAt && <span>·</span>}
+          {s.lastUpdatedAt && <span>{formatDate(s.lastUpdatedAt)}</span>}
+        </div>
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center gap-2 px-3 py-2.5 shrink-0" style={{ borderBottom: '1px solid var(--c-border)' }}>
+        <Hash size={12} style={{ color: 'var(--c-accent)' }} />
+        <span className="text-[12px] font-medium uppercase tracking-wider" style={{ color: 'var(--c-text2)' }}>Sessions</span>
+        <span className="text-[10px] ml-auto" style={{ color: 'var(--c-text3)' }}>{sessions.length}</span>
+      </div>
+
+      <div className="flex-1 overflow-y-auto scrollbar-thin py-1">
+        {grouped.sorted.map(([folder, list]) => {
+          const isCollapsed = collapsed.has(folder)
+          const folderName = folder.split('/').pop()
+          return (
+            <div key={folder}>
+              <div
+                className="flex items-center gap-1.5 px-2 py-1.5 cursor-pointer transition"
+                onMouseEnter={e => e.currentTarget.style.background = 'var(--c-bg3)'}
+                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                onClick={() => toggle(folder)}
+              >
+                {isCollapsed ? <ChevronRight size={10} style={{ color: 'var(--c-text3)' }} /> : <ChevronDown size={10} style={{ color: 'var(--c-text3)' }} />}
+                <FolderOpen size={10} style={{ color: '#818cf8' }} />
+                <span className="text-[11px] font-medium truncate flex-1" style={{ color: 'var(--c-text2)' }} title={folder}>{folderName}</span>
+                <span className="text-[8px]" style={{ color: 'var(--c-text3)' }}>{list.length}</span>
+              </div>
+              {!isCollapsed && (
+                <div className="pl-3">
+                  {list.map(s => <SessionItem key={s.id} s={s} />)}
+                </div>
+              )}
+            </div>
+          )
+        })}
+
+        {grouped.noProject.length > 0 && (
+          <div>
+            {grouped.sorted.length > 0 && (
+              <div className="px-2 py-1.5 text-[10px] uppercase tracking-wider" style={{ color: 'var(--c-text3)' }}>no project</div>
+            )}
+            <div className={grouped.sorted.length > 0 ? 'pl-1' : ''}>
+              {grouped.noProject.map(s => <SessionItem key={s.id} s={s} />)}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default function RelayUserDetail() {
+  const { username } = useParams()
+  const navigate = useNavigate()
+  const [sessions, setSessions] = useState(null)
+  const [selectedChat, setSelectedChat] = useState(null)
+  const { dark } = useTheme()
+
+  const legendColor = dark ? '#888' : '#555'
+  const gridColor = dark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.06)'
+  const txtDim = dark ? '#555' : '#999'
+
+  useEffect(() => {
+    if (username) {
+      fetchRelayUserActivity(username, { limit: 200 }).then(setSessions)
+    }
+  }, [username])
+
+  const fetchFn = useCallback(
+    (id) => fetchRelaySession(id, username),
+    [username]
+  )
+
+  if (!sessions) return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>loading...</div>
+
+  // Aggregate stats
+  const totalSessions = sessions.length
+  const totalMessages = sessions.reduce((s, c) => s + (c.totalMessages || 0), 0)
+  const totalInputTokens = sessions.reduce((s, c) => s + (c.totalInputTokens || 0), 0)
+  const totalOutputTokens = sessions.reduce((s, c) => s + (c.totalOutputTokens || 0), 0)
+  const totalTokens = totalInputTokens + totalOutputTokens
+  const msgsPerSession = totalSessions > 0 ? (totalMessages / totalSessions).toFixed(1) : 0
+  const tokPerSession = totalSessions > 0 ? Math.round(totalTokens / totalSessions) : 0
+
+  // Editor breakdown
+  const editorMap = {}
+  for (const s of sessions) {
+    if (s.source) editorMap[s.source] = (editorMap[s.source] || 0) + 1
+  }
+  const editors = Object.entries(editorMap).sort((a, b) => b[1] - a[1])
+
+  // Project breakdown
+  const projectMap = {}
+  for (const s of sessions) {
+    if (s.folder) {
+      if (!projectMap[s.folder]) projectMap[s.folder] = { count: 0, lastActive: 0, messages: 0, tokens: 0 }
+      projectMap[s.folder].count++
+      projectMap[s.folder].messages += s.totalMessages || 0
+      projectMap[s.folder].tokens += (s.totalInputTokens || 0) + (s.totalOutputTokens || 0)
+      if (s.lastUpdatedAt > projectMap[s.folder].lastActive) projectMap[s.folder].lastActive = s.lastUpdatedAt
+    }
+  }
+  const projects = Object.entries(projectMap).sort((a, b) => b[1].count - a[1].count)
+  const maxProjectSessions = projects.length > 0 ? Math.max(...projects.map(([, p]) => p.count)) : 1
+
+  // Model breakdown
+  const modelMap = {}
+  for (const s of sessions) {
+    if (s.models) {
+      for (const m of s.models) modelMap[m] = (modelMap[m] || 0) + 1
+    }
+  }
+  const models = Object.entries(modelMap).sort((a, b) => b[1] - a[1]).slice(0, 10)
+
+  // Tool breakdown
+  const toolMap = {}
+  for (const s of sessions) {
+    if (s.toolCalls) {
+      for (const t of s.toolCalls) toolMap[t] = (toolMap[t] || 0) + 1
+    }
+  }
+  const tools = Object.entries(toolMap).sort((a, b) => b[1] - a[1]).slice(0, 15)
+
+  // Daily activity (sessions per day)
+  const dayMap = {}
+  for (const s of sessions) {
+    const d = new Date(s.lastUpdatedAt || s.createdAt).toISOString().slice(0, 10)
+    dayMap[d] = (dayMap[d] || 0) + 1
+  }
+  const days = Object.entries(dayMap).sort((a, b) => a[0].localeCompare(b[0])).slice(-14)
+
+  const handleFeedClick = (chatId) => {
+    setSelectedChat(chatId)
+  }
+
+  const sidebarH = 'calc(100vh - 42px)'
+
+  return (
+    <div className="fade-in flex" style={{ height: sidebarH }}>
+      {/* ── Left sidebar: Sessions tree ── */}
+      <div
+        className="hidden lg:flex flex-col w-[250px] shrink-0 sticky top-[42px] self-start"
+        style={{ height: sidebarH, borderRight: '1px solid var(--c-border)', background: 'var(--c-bg)' }}
+      >
+        <SessionSidebar sessions={sessions} projects={projects} selectedChat={selectedChat} onSelectChat={setSelectedChat} />
+      </div>
+
+      {/* ── Center: scrollable content ── */}
+      <div className="flex-1 min-w-0 overflow-y-auto p-4 space-y-3">
+        {/* Header */}
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => navigate('/')}
+            className="p-1.5 transition hover:bg-[var(--c-card)] rounded-sm"
+            style={{ border: '1px solid var(--c-border)', color: 'var(--c-text2)' }}
+          >
+            <ArrowLeft size={14} />
+          </button>
+          <div className="flex items-center gap-2.5">
+            <div className="w-9 h-9 flex items-center justify-center text-[14px] font-bold rounded-sm" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>
+              {username.charAt(0).toUpperCase()}
+            </div>
+            <div>
+              <div className="text-[14px] font-bold" style={{ color: 'var(--c-white)' }}>{username}</div>
+              <div className="flex items-center gap-2 mt-0.5">
+                {editors.map(([src]) => (
+                  <EditorIcon key={src} source={src} size={11} />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* KPIs */}
+        <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))' }}>
+          <KpiCard label="sessions" value={totalSessions} />
+          <KpiCard label="messages" value={formatNumber(totalMessages)} sub={`${msgsPerSession}/session`} />
+          <KpiCard label="editors" value={editors.length} />
+          <KpiCard label="projects" value={projects.length} />
+          <KpiCard label="tokens" value={formatNumber(totalTokens)} sub={`${formatNumber(tokPerSession)}/session`} />
+          <KpiCard label="models" value={models.length} />
+        </div>
+
+        {/* Token overview */}
+        {totalTokens > 0 && (
+          <div className="card p-3">
+            <div className="flex items-center justify-between mb-2">
+              <SectionTitle>token usage</SectionTitle>
+              <span className="text-[11px] font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(totalTokens)} total</span>
+            </div>
+            <ProportionBar height={10} segments={[
+              { label: 'Input', value: totalInputTokens, color: '#6366f1' },
+              { label: 'Output', value: totalOutputTokens, color: '#a78bfa' },
+            ]} />
+            <div className="flex items-center gap-4 mt-1.5 text-[10px]">
+              <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#6366f1' }} /> input {formatNumber(totalInputTokens)}</span>
+              <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#a78bfa' }} /> output {formatNumber(totalOutputTokens)}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Charts: editors + models */}
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
+          {editors.length > 0 && (
+            <div className="card p-3">
+              <SectionTitle>editors</SectionTitle>
+              <div style={{ height: 160 }}>
+                <Doughnut
+                  data={{
+                    labels: editors.map(([src]) => editorLabel(src)),
+                    datasets: [{ data: editors.map(([, c]) => c), backgroundColor: editors.map(([src]) => editorColor(src)), borderWidth: 0 }],
+                  }}
+                  options={{
+                    responsive: true, maintainAspectRatio: false, cutout: '60%',
+                    plugins: {
+                      legend: { position: 'right', labels: { color: legendColor, font: { size: 9, family: MONO }, usePointStyle: true, pointStyle: 'circle', padding: 6 } },
+                      tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } },
+                    },
+                  }}
+                />
+              </div>
+            </div>
+          )}
+          {models.length > 0 && (
+            <div className="card p-3">
+              <SectionTitle>models</SectionTitle>
+              <div style={{ height: 160 }}>
+                <Doughnut
+                  data={{
+                    labels: models.map(([name]) => name),
+                    datasets: [{ data: models.map(([, c]) => c), backgroundColor: MODEL_COLORS, borderWidth: 0 }],
+                  }}
+                  options={{
+                    responsive: true, maintainAspectRatio: false, cutout: '60%',
+                    plugins: {
+                      legend: { position: 'right', labels: { color: legendColor, font: { size: 8, family: MONO }, usePointStyle: true, pointStyle: 'circle', padding: 6 } },
+                      tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } },
+                    },
+                  }}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Daily activity bar */}
+        {days.length > 1 && (
+          <div className="card p-3">
+            <SectionTitle>daily activity (last 14 days)</SectionTitle>
+            <div style={{ height: 120 }}>
+              <Bar
+                data={{
+                  labels: days.map(([d]) => d.slice(5)),
+                  datasets: [{
+                    data: days.map(([, c]) => c),
+                    backgroundColor: '#6366f1',
+                    borderRadius: 2,
+                  }],
+                }}
+                options={{
+                  responsive: true, maintainAspectRatio: false,
+                  plugins: { legend: { display: false }, tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } } },
+                  scales: {
+                    x: { grid: { display: false }, ticks: { color: txtDim, font: { size: 8, family: MONO } } },
+                    y: { grid: { color: gridColor }, ticks: { color: txtDim, font: { size: 8, family: MONO }, stepSize: 1 }, beginAtZero: true },
+                  },
+                }}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Projects */}
+        {projects.length > 0 && (
+          <div>
+            <SectionTitle>projects</SectionTitle>
+            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-2 mt-2">
+              {projects.map(([folder, info]) => (
+                <div key={folder} className="card px-3 py-2.5">
+                  <div className="flex items-center gap-1.5 mb-1.5">
+                    <FolderOpen size={11} style={{ color: '#818cf8' }} />
+                    <span className="text-[12px] font-medium truncate" style={{ color: 'var(--c-white)' }}>{folder.split('/').pop()}</span>
+                  </div>
+                  <div className="text-[8px] truncate mb-2" style={{ color: 'var(--c-text3)' }}>{folder}</div>
+                  <div className="grid grid-cols-3 gap-1 text-center mb-1.5">
+                    <div className="p-1 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
+                      <div className="text-[11px] font-bold" style={{ color: 'var(--c-white)' }}>{info.count}</div>
+                      <div className="text-[7px]" style={{ color: 'var(--c-text3)' }}>sessions</div>
+                    </div>
+                    <div className="p-1 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
+                      <div className="text-[11px] font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(info.messages)}</div>
+                      <div className="text-[7px]" style={{ color: 'var(--c-text3)' }}>messages</div>
+                    </div>
+                    <div className="p-1 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
+                      <div className="text-[11px] font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(info.tokens)}</div>
+                      <div className="text-[7px]" style={{ color: 'var(--c-text3)' }}>tokens</div>
+                    </div>
+                  </div>
+                  <div className="h-1.5 rounded-full overflow-hidden" style={{ background: 'var(--c-code-bg)' }}>
+                    <div className="h-full rounded-full" style={{ width: `${(info.count / maxProjectSessions * 100).toFixed(0)}%`, background: '#6366f1' }} />
+                  </div>
+                  <div className="text-[8px] mt-1" style={{ color: 'var(--c-text3)' }}>{formatDate(info.lastActive)}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Top tools */}
+        {tools.length > 0 && (
+          <div className="card p-3">
+            <SectionTitle>top tools</SectionTitle>
+            <div className="flex flex-wrap gap-1.5 mt-1">
+              {tools.map(([name, count]) => (
+                <span key={name} className="text-[10px] px-2 py-1 rounded-sm" style={{ background: 'var(--c-code-bg)', color: 'var(--c-text2)' }}>
+                  {name} <span style={{ color: 'var(--c-text3)' }}>×{count}</span>
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Recent sessions table */}
+        <div className="card p-3">
+          <SectionTitle>recent sessions</SectionTitle>
+          <div className="max-h-[400px] overflow-y-auto scrollbar-thin">
+            <table className="w-full text-[12px]">
+              <tbody>
+                {sessions.slice(0, 50).map(s => (
+                  <tr
+                    key={s.id}
+                    className="cursor-pointer transition"
+                    style={{ borderBottom: '1px solid var(--c-border)' }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--c-bg3)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                    onClick={() => setSelectedChat(s.id)}
+                  >
+                    <td className="py-2 px-2 w-[24px]"><EditorIcon source={s.source} size={11} /></td>
+                    <td className="py-2 px-2">
+                      <div className="text-[11px] font-medium truncate" style={{ color: 'var(--c-white)' }}>{s.name || 'Untitled'}</div>
+                      <div className="text-[10px] truncate" style={{ color: 'var(--c-text3)' }}>{s.folder ? s.folder.split('/').pop() : ''}</div>
+                    </td>
+                    <td className="py-2 px-2 text-[10px] whitespace-nowrap" style={{ color: 'var(--c-text3)' }}>
+                      {s.totalMessages > 0 && <span>{s.totalMessages}m</span>}
+                    </td>
+                    <td className="py-2 px-2">
+                      {s.mode && (
+                        <span className="text-[8px] px-1.5 py-0.5 rounded-sm" style={{ background: 'rgba(168,85,247,0.1)', color: '#a855f7' }}>{s.mode}</span>
+                      )}
+                    </td>
+                    <td className="py-2 px-2 text-[10px] whitespace-nowrap text-right" style={{ color: 'var(--c-text3)' }}>
+                      {formatDate(s.lastUpdatedAt)}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Right sidebar: Live Feed ── */}
+      <div
+        className="hidden xl:flex flex-col w-[300px] shrink-0 sticky top-[42px] self-start"
+        style={{ height: sidebarH, borderLeft: '1px solid var(--c-border)', background: 'var(--c-bg)' }}
+      >
+        <LiveFeed onSessionClick={handleFeedClick} />
+      </div>
+
+      {/* Session sidebar */}
+      <ChatSidebar
+        chatId={selectedChat}
+        onClose={() => setSelectedChat(null)}
+        fetchFn={fetchFn}
+        username={username}
+        extraHeader={
+          <span className="text-[11px] font-medium px-1.5 py-0.5 shrink-0" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>
+            {username}
+          </span>
+        }
+      />
+    </div>
+  )
+}