https://github.com/vectorleap-pulse/portfolio-research-agent-frontend
https://github.com/vectorleap-pulse/portfolio-research-agent-frontend
Last synced: about 13 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/vectorleap-pulse/portfolio-research-agent-frontend
- Owner: vectorleap-pulse
- Created: 2026-05-09T13:16:56.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-05-09T19:49:13.000Z (about 2 months ago)
- Last Synced: 2026-05-09T21:39:40.891Z (about 2 months ago)
- Language: TypeScript
- Size: 8.82 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Research Agent - Frontend
Next.js frontend for the [AI Research Command Center](https://github.com/vectorleap-pulse/portfolio-research-agent).
## Repositories
| | Link |
| --------------- | --------------------------------------------------------------------------------------------------- |
| Main | [portfolio-research-agent](https://github.com/vectorleap-pulse/portfolio-research-agent) |
| Backend | [portfolio-research-agent-backend](https://github.com/vectorleap-pulse/portfolio-research-agent-backend) |
| Frontend (this) | [portfolio-research-agent-frontend](https://github.com/vectorleap-pulse/portfolio-research-agent-frontend) |
## Stack
| Layer | Technology |
| ---------- | --------------------------- |
| Framework | Next.js 16 + React 19 |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| UI | Radix UI + Lucide React |
| Animations | Framer Motion |
| State | Zustand |
| Markdown | react-markdown + remark-gfm |
| Dates | date-fns |
## Prerequisites
- Node.js 20+
- pnpm
## Setup
```bash
pnpm install
cp .env.example .env.local # set API URL
```
## Environment Variables
```env
VITE_API_URL=http://localhost:8000
VITE_WS_URL=ws://localhost:8000
```
## Run
```bash
pnpm dev # dev server → http://localhost:5173
pnpm build # production build → dist/
pnpm preview # preview production build
```
## UI Layout
```
┌─────────────────────────────────────────────────────────────────┐
│ HEADER: logo + provider selector (OpenAI / Groq) + model pick │
├─────────────────────────────────────────────────────────────────┤
│ COMMAND BAR: full-width query input │
├──────────────┬──────────────────────────┬───────────────────────┤
│ AGENT TRACE │ LIVE LOG STREAM │ SOURCES PANEL │
│ (left 20%) │ (center 50%) │ (right 30%) │
├──────────────┴──────────────────────────┴───────────────────────┤
│ REPORT PANEL (expands on REPORT_DONE) │
├─────────────────────────────────────────────────────────────────┤
│ SESSION HISTORY (bottom drawer) │
└─────────────────────────────────────────────────────────────────┘
```
## Components
| Component | Description |
| -------------------- | ------------------------------------------------------------ |
| `CommandBar` | Full-width query input with animated placeholder |
| `ProviderSelector` | OpenAI / Groq + model picker |
| `AgentTraceTree` | Animated tree: idle → active → done → error per node |
| `LogStream` | Auto-scrolling terminal log, color-coded by event type |
| `SourcesPanel` | Tabbed by subtopic, source cards with domain badge and score |
| `ReportViewer` | Streaming markdown renderer, serif font, section anchors |
| `SessionDrawer` | Slide-up list of past sessions from `/api/sessions` |
| `StatusBar` | Current agent, token count, latency |
## State
Zustand store `useResearchStore` holds: `session`, `events[]`, `sources[]`, `reportChunks[]`, `agentStatuses{}`.
## Lint
```bash
pnpm lint
```