kjannette/citation_sentinel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Syntax changes in front and back end dirs. These do not affect functionality and are purely intended to better capture and describe the app's functionality and purpose

Browse Source
This commit is contained in:
KS Jannette
2026-08-03 00:07:58 -04:00
parent 4a5e5d6612
commit 0352bdf516
42 changed files with 812 additions and 812 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='50' fill='black'/></svg>">
<title>NotebookLM Clone</title>
<title>Source Sentinel</title>
</head>
<body>
<div id="root"></div>

4
client/package-lock.json generated
View File

@@ -1,11 +1,11 @@
{
"name": "notebook-clone-web",
"name": "source-sentinel-web",
"version": "0.1.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "notebook-clone-web",
"name": "source-sentinel-web",
"version": "0.1.0",
"dependencies": {
"react": "^19.0.0",

2
client/package.json
View File

@@ -1,5 +1,5 @@
{
"name": "notebook-clone-web",
"name": "source-sentinel-web",
"version": "0.1.0",
"private": true,
"engines": { "node": ">=18" },

44
client/src/App.jsx
View File

@@ -1,20 +1,20 @@
import { useState } from 'react';
import NotebookList from './components/NotebookList.jsx';
import SourceCorpusList from './components/SourceCorpusList.jsx';
import SourcePanel from './components/SourcePanel.jsx';
import DocumentButtons from './components/DocumentButtons.jsx';
import ChatPanel from './components/ChatPanel.jsx';
import DocumentModal from './components/DocumentModal.jsx';
import { useNotebook } from './hooks/useNotebook.js';
import { useSourceCorpus } from './hooks/useSourceCorpus.js';
import { generateDocument } from './api/documents.js';
function App() {
const {
notebooks,
activeNotebook,
selectNotebook,
createNotebook,
deleteNotebook,
} = useNotebook();
sourceCorpora,
activeSourceCorpus,
selectSourceCorpus,
createSourceCorpus,
deleteSourceCorpus,
} = useSourceCorpus();
const [hoverState, setHoverState] = useState(null);
const [sourceCount, setSourceCount] = useState(0);
@@ -22,9 +22,9 @@ function App() {
const [docModal, setDocModal] = useState({ open: false, type: null, document: null, loading: false });
const [chatReady, setChatReady] = useState(false);
const handleSelectNotebook = (id) => {
const handleSelectSourceCorpus = (id) => {
setChatReady(false);
selectNotebook(id);
selectSourceCorpus(id);
};
const handleSourceHover = (val) => {
@@ -42,7 +42,7 @@ function App() {
setDocModal({ open: true, type, document: null, loading: true });
try {
const res = await generateDocument(activeNotebook.id, type);
const res = await generateDocument(activeSourceCorpus.id, type);
setDocModal({ open: true, type, document: res.document, loading: false });
} catch (err) {
console.error('document generation failed', err);
@@ -58,17 +58,17 @@ function App() {
return (
<div className="app">
<aside className="sidebar">
<NotebookList
notebooks={notebooks}
activeId={activeNotebook?.id}
onSelect={handleSelectNotebook}
onCreate={createNotebook}
onDelete={deleteNotebook}
<SourceCorpusList
sourceCorpora={sourceCorpora}
activeId={activeSourceCorpus?.id}
onSelect={handleSelectSourceCorpus}
onCreate={createSourceCorpus}
onDelete={deleteSourceCorpus}
/>
{activeNotebook && (
{activeSourceCorpus && (
<>
<SourcePanel
notebookId={activeNotebook.id}
sourceCorpusId={activeSourceCorpus.id}
hoveredSourceIndex={hoveredDocIndex}
onSourceHover={handleSourceHover}
onSourcesChange={setSourceCount}
@@ -85,16 +85,16 @@ function App() {
)}
</aside>
<main className="main">
{activeNotebook ? (
{activeSourceCorpus ? (
<ChatPanel
notebookId={activeNotebook.id}
sourceCorpusId={activeSourceCorpus.id}
hoveredSource={hoveredInstanceId}
hoveredDocIndex={hoveredDocIndex}
onSourceHover={handleSourceHover}
onFirstResponse={() => setChatReady(true)}
/>
) : (
<p>Select or create a notebook to get started.</p>
<p>Select or create a source corpus to get started.</p>
)}
</main>
<DocumentModal

4
client/src/api/documents.js
View File

@@ -4,11 +4,11 @@ import { handleResponse } from './client.js';
const BASE = '/api/documents';
export async function generateDocument(notebookId, type) {
export async function generateDocument(sourceCorpusId, type) {
const res = await fetch(`${BASE}/generate`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ notebookId, type }),
body: JSON.stringify({ sourceCorpusId, type }),
});
return handleResponse(res);
}

4
client/src/api/query.js
View File

@@ -5,11 +5,11 @@ import { handleResponse } from './client.js';
const BASE = '/api/query';
const CITATION_DETAIL_BASE = '/api/citation-detail';
export async function sendQuery(notebookId, question, onCitationDetails) {
export async function sendQuery(sourceCorpusId, question, onCitationDetails) {
const res = await fetch(BASE, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ notebookId, question }),
body: JSON.stringify({ sourceCorpusId, question }),
});
const data = await handleResponse(res);

4
client/src/api/query.test.js
View File

@@ -16,7 +16,7 @@ describe('sendQuery', () => {
vi.restoreAllMocks();
});
it('sends POST to /api/query with notebookId and question', async () => {
it('sends POST to /api/query with sourceCorpusId and question', async () => {
const data = { answer: 'The answer', citations: [] };
fetch.mockResolvedValue(okResponse(data));
@@ -25,7 +25,7 @@ describe('sendQuery', () => {
expect(fetch).toHaveBeenCalledWith('/api/query', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ notebookId: 'nb-1', question: 'What is AI?' }),
body: JSON.stringify({ sourceCorpusId: 'nb-1', question: 'What is AI?' }),
});
expect(result).toEqual(data);
});

8
client/src/api/notebooks.js → client/src/api/sourceCorpus.js
View File

@@ -2,14 +2,14 @@
import { handleResponse } from './client.js';
const BASE = '/api/notebooks';
const BASE = '/api/source-corpus';
export async function listNotebooks() {
export async function listSourceCorpora() {
const res = await fetch(BASE);
return handleResponse(res);
}
export async function createNotebook(name) {
export async function createSourceCorpus(name) {
const res = await fetch(BASE, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
@@ -18,7 +18,7 @@ export async function createNotebook(name) {
return handleResponse(res);
}
export async function deleteNotebook(id) {
export async function deleteSourceCorpus(id) {
const res = await fetch(`${BASE}/${id}`, { method: 'DELETE' });
return handleResponse(res);
}

34
client/src/api/notebooks.test.js → client/src/api/sourceCorpus.test.js
View File

@@ -1,5 +1,5 @@
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { listNotebooks, createNotebook, deleteNotebook } from './notebooks.js';
import { listSourceCorpora, createSourceCorpus, deleteSourceCorpus } from './sourceCorpus.js';
const okResponse = (body) => ({
ok: true,
@@ -7,7 +7,7 @@ const okResponse = (body) => ({
json: () => Promise.resolve(body),
});
describe('notebooks API', () => {
describe('sourceCorpora API', () => {
beforeEach(() => {
vi.stubGlobal('fetch', vi.fn());
});
@@ -16,41 +16,41 @@ describe('notebooks API', () => {
vi.restoreAllMocks();
});
describe('listNotebooks', () => {
it('fetches GET /api/notebooks', async () => {
describe('listSourceCorpora', () => {
it('fetches GET /api/source-corpus', async () => {
const data = [{ id: '1', name: 'NB' }];
fetch.mockResolvedValue(okResponse(data));
const result = await listNotebooks();
const result = await listSourceCorpora();
expect(fetch).toHaveBeenCalledWith('/api/notebooks');
expect(fetch).toHaveBeenCalledWith('/api/source-corpus');
expect(result).toEqual(data);
});
});
describe('createNotebook', () => {
describe('createSourceCorpus', () => {
it('sends POST with name in JSON body', async () => {
const nb = { id: '2', name: 'New' };
fetch.mockResolvedValue(okResponse(nb));
const corpus = { id: '2', name: 'New' };
fetch.mockResolvedValue(okResponse(corpus));
const result = await createNotebook('New');
const result = await createSourceCorpus('New');
expect(fetch).toHaveBeenCalledWith('/api/notebooks', {
expect(fetch).toHaveBeenCalledWith('/api/source-corpus', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'New' }),
});
expect(result).toEqual(nb);
expect(result).toEqual(corpus);
});
});
describe('deleteNotebook', () => {
it('sends DELETE to /api/notebooks/:id', async () => {
describe('deleteSourceCorpus', () => {
it('sends DELETE to /api/source-corpus/:id', async () => {
fetch.mockResolvedValue(okResponse({}));
await deleteNotebook('abc-123');
await deleteSourceCorpus('abc-123');
expect(fetch).toHaveBeenCalledWith('/api/notebooks/abc-123', {
expect(fetch).toHaveBeenCalledWith('/api/source-corpus/abc-123', {
method: 'DELETE',
});
});
@@ -63,6 +63,6 @@ describe('notebooks API', () => {
json: () => Promise.resolve({ error: 'Server down' }),
});
await expect(listNotebooks()).rejects.toThrow('Server down');
await expect(listSourceCorpora()).rejects.toThrow('Server down');
});
});

12
client/src/api/sources.js
View File

@@ -4,15 +4,15 @@ import { handleResponse } from './client.js';
const BASE = '/api/sources';
export async function listSources(notebookId) {
const res = await fetch(`${BASE}?notebookId=${notebookId}`);
export async function listSources(sourceCorpusId) {
const res = await fetch(`${BASE}?sourceCorpusId=${sourceCorpusId}`);
return handleResponse(res);
}
export async function uploadSource(notebookId, file) {
export async function uploadSource(sourceCorpusId, file) {
const formData = new FormData();
formData.append('file', file);
formData.append('notebookId', notebookId);
formData.append('sourceCorpusId', sourceCorpusId);
const res = await fetch(BASE, {
method: 'POST',
body: formData,
@@ -20,11 +20,11 @@ export async function uploadSource(notebookId, file) {
return handleResponse(res);
}
export async function addUrlSource(notebookId, url) {
export async function addUrlSource(sourceCorpusId, url) {
const res = await fetch(`${BASE}/url`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ notebookId, url }),
body: JSON.stringify({ sourceCorpusId, url }),
});
return handleResponse(res);
}

10
client/src/api/sources.test.js
View File

@@ -17,19 +17,19 @@ describe('sources API', () => {
});
describe('listSources', () => {
it('fetches GET /api/sources with notebookId query param', async () => {
it('fetches GET /api/sources with sourceCorpusId query param', async () => {
const data = [{ id: 's1', name: 'file.pdf' }];
fetch.mockResolvedValue(okResponse(data));
const result = await listSources('nb-42');
expect(fetch).toHaveBeenCalledWith('/api/sources?notebookId=nb-42');
expect(fetch).toHaveBeenCalledWith('/api/sources?sourceCorpusId=nb-42');
expect(result).toEqual(data);
});
});
describe('uploadSource', () => {
it('sends POST with FormData containing file and notebookId', async () => {
it('sends POST with FormData containing file and sourceCorpusId', async () => {
const source = { id: 's2', name: 'doc.pdf' };
fetch.mockResolvedValue(okResponse(source));
@@ -42,7 +42,7 @@ describe('sources API', () => {
});
const formData = fetch.mock.calls[0][1].body;
expect(formData.get('notebookId')).toBe('nb-1');
expect(formData.get('sourceCorpusId')).toBe('nb-1');
expect(formData.get('file')).toBeInstanceOf(File);
expect(result).toEqual(source);
});
@@ -58,7 +58,7 @@ describe('sources API', () => {
expect(fetch).toHaveBeenCalledWith('/api/sources/url', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ notebookId: 'nb-5', url: 'https://example.com' }),
body: JSON.stringify({ sourceCorpusId: 'nb-5', url: 'https://example.com' }),
});
expect(result).toEqual(source);
});

6
client/src/components/ChatPanel.jsx
View File

@@ -3,7 +3,7 @@ import { sendQuery } from '../api/query.js';
import ChatMessage from './ChatMessage.jsx';
import CitationDetailModal from './CitationDetailModal.jsx';
function ChatPanel({ notebookId, hoveredSource, hoveredDocIndex, onSourceHover, onFirstResponse }) {
function ChatPanel({ sourceCorpusId, hoveredSource, hoveredDocIndex, onSourceHover, onFirstResponse }) {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState('');
const [loading, setLoading] = useState(false);
@@ -18,7 +18,7 @@ function ChatPanel({ notebookId, hoveredSource, hoveredDocIndex, onSourceHover,
setCitationDetails({});
setActiveCitation(null);
firstResponseFired.current = false;
}, [notebookId]);
}, [sourceCorpusId]);
useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -35,7 +35,7 @@ function ChatPanel({ notebookId, hoveredSource, hoveredDocIndex, onSourceHover,
const msgId = crypto.randomUUID();
try {
const res = await sendQuery(notebookId, question, (details) => {
const res = await sendQuery(sourceCorpusId, question, (details) => {
const detailMap = {};
for (const d of details) {
detailMap[d.sourceIndex] = d;

99
client/src/components/CreateNotebookModal.test.jsx
View File

@@ -1,99 +0,0 @@
import { describe, it, expect, vi } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import CreateNotebookModal from './CreateNotebookModal.jsx';
describe('CreateNotebookModal', () => {
it('renders nothing when open is false', () => {
const { container } = render(
<CreateNotebookModal open={false} onConfirm={() => {}} onCancel={() => {}} />,
);
expect(container.innerHTML).toBe('');
});
it('renders the modal with title when open', () => {
render(<CreateNotebookModal open={true} onConfirm={() => {}} onCancel={() => {}} />);
expect(screen.getByText('New Notebook')).toBeInTheDocument();
});
it('renders input and buttons', () => {
render(<CreateNotebookModal open={true} onConfirm={() => {}} onCancel={() => {}} />);
expect(screen.getByPlaceholderText('Enter notebook name')).toBeInTheDocument();
expect(screen.getByText('Cancel')).toBeInTheDocument();
expect(screen.getByText('Create')).toBeInTheDocument();
});
it('disables Create button when input is empty', () => {
render(<CreateNotebookModal open={true} onConfirm={() => {}} onCancel={() => {}} />);
expect(screen.getByText('Create')).toBeDisabled();
});
it('enables Create button when input has text', async () => {
const user = userEvent.setup();
render(<CreateNotebookModal open={true} onConfirm={() => {}} onCancel={() => {}} />);
await user.type(screen.getByPlaceholderText('Enter notebook name'), 'My Notebook');
expect(screen.getByText('Create')).toBeEnabled();
});
it('calls onConfirm with trimmed name on submit', async () => {
const user = userEvent.setup();
const onConfirm = vi.fn();
render(<CreateNotebookModal open={true} onConfirm={onConfirm} onCancel={() => {}} />);
await user.type(screen.getByPlaceholderText('Enter notebook name'), ' Research Notes ');
await user.click(screen.getByText('Create'));
expect(onConfirm).toHaveBeenCalledWith('Research Notes');
});
it('calls onConfirm on Enter key', async () => {
const user = userEvent.setup();
const onConfirm = vi.fn();
render(<CreateNotebookModal open={true} onConfirm={onConfirm} onCancel={() => {}} />);
await user.type(screen.getByPlaceholderText('Enter notebook name'), 'Test{Enter}');
expect(onConfirm).toHaveBeenCalledWith('Test');
});
it('does not call onConfirm when input is only whitespace', async () => {
const user = userEvent.setup();
const onConfirm = vi.fn();
render(<CreateNotebookModal open={true} onConfirm={onConfirm} onCancel={() => {}} />);
const input = screen.getByPlaceholderText('Enter notebook name');
await user.type(input, ' ');
await user.type(input, '{Enter}');
expect(onConfirm).not.toHaveBeenCalled();
});
it('calls onCancel when Cancel button is clicked', async () => {
const user = userEvent.setup();
const onCancel = vi.fn();
render(<CreateNotebookModal open={true} onConfirm={() => {}} onCancel={onCancel} />);
await user.click(screen.getByText('Cancel'));
expect(onCancel).toHaveBeenCalledOnce();
});
it('resets input when reopened', async () => {
const user = userEvent.setup();
const { rerender } = render(
<CreateNotebookModal open={true} onConfirm={() => {}} onCancel={() => {}} />,
);
await user.type(screen.getByPlaceholderText('Enter notebook name'), 'Old name');
rerender(<CreateNotebookModal open={false} onConfirm={() => {}} onCancel={() => {}} />);
rerender(<CreateNotebookModal open={true} onConfirm={() => {}} onCancel={() => {}} />);
expect(screen.getByPlaceholderText('Enter notebook name')).toHaveValue('');
});
it('auto-focuses the input when opened', async () => {
render(<CreateNotebookModal open={true} onConfirm={() => {}} onCancel={() => {}} />);
await waitFor(() => {
expect(screen.getByPlaceholderText('Enter notebook name')).toHaveFocus();
}, { timeout: 200 });
});
});

8
client/src/components/CreateNotebookModal.jsx → client/src/components/CreateSourceCorpusModal.jsx
View File

@@ -1,7 +1,7 @@
import { useState, useEffect, useRef } from 'react';
import Modal from './Modal.jsx';
function CreateNotebookModal({ open, onConfirm, onCancel }) {
function CreateSourceCorpusModal({ open, onConfirm, onCancel }) {
const [name, setName] = useState('');
const inputRef = useRef(null);
@@ -19,13 +19,13 @@ function CreateNotebookModal({ open, onConfirm, onCancel }) {
};
return (
<Modal open={open} onClose={onCancel} title="New Notebook">
<Modal open={open} onClose={onCancel} title="New Source Corpus">
<form onSubmit={handleSubmit}>
<input
ref={inputRef}
className="modal-input"
type="text"
placeholder="Enter notebook name"
placeholder="Enter source corpus name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
@@ -50,4 +50,4 @@ function CreateNotebookModal({ open, onConfirm, onCancel }) {
);
}
export default CreateNotebookModal;
export default CreateSourceCorpusModal;

99
client/src/components/CreateSourceCorpusModal.test.jsx Normal file
View File

@@ -0,0 +1,99 @@
import { describe, it, expect, vi } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import CreateSourceCorpusModal from './CreateSourceCorpusModal.jsx';
describe('CreateSourceCorpusModal', () => {
it('renders nothing when open is false', () => {
const { container } = render(
<CreateSourceCorpusModal open={false} onConfirm={() => {}} onCancel={() => {}} />,
);
expect(container.innerHTML).toBe('');
});
it('renders the modal with title when open', () => {
render(<CreateSourceCorpusModal open={true} onConfirm={() => {}} onCancel={() => {}} />);
expect(screen.getByText('New Source Corpus')).toBeInTheDocument();
});
it('renders input and buttons', () => {
render(<CreateSourceCorpusModal open={true} onConfirm={() => {}} onCancel={() => {}} />);
expect(screen.getByPlaceholderText('Enter source corpus name')).toBeInTheDocument();
expect(screen.getByText('Cancel')).toBeInTheDocument();
expect(screen.getByText('Create')).toBeInTheDocument();
});
it('disables Create button when input is empty', () => {
render(<CreateSourceCorpusModal open={true} onConfirm={() => {}} onCancel={() => {}} />);
expect(screen.getByText('Create')).toBeDisabled();
});
it('enables Create button when input has text', async () => {
const user = userEvent.setup();
render(<CreateSourceCorpusModal open={true} onConfirm={() => {}} onCancel={() => {}} />);
await user.type(screen.getByPlaceholderText('Enter source corpus name'), 'My SourceCorpus');
expect(screen.getByText('Create')).toBeEnabled();
});
it('calls onConfirm with trimmed name on submit', async () => {
const user = userEvent.setup();
const onConfirm = vi.fn();
render(<CreateSourceCorpusModal open={true} onConfirm={onConfirm} onCancel={() => {}} />);
await user.type(screen.getByPlaceholderText('Enter source corpus name'), ' Research Notes ');
await user.click(screen.getByText('Create'));
expect(onConfirm).toHaveBeenCalledWith('Research Notes');
});
it('calls onConfirm on Enter key', async () => {
const user = userEvent.setup();
const onConfirm = vi.fn();
render(<CreateSourceCorpusModal open={true} onConfirm={onConfirm} onCancel={() => {}} />);
await user.type(screen.getByPlaceholderText('Enter source corpus name'), 'Test{Enter}');
expect(onConfirm).toHaveBeenCalledWith('Test');
});
it('does not call onConfirm when input is only whitespace', async () => {
const user = userEvent.setup();
const onConfirm = vi.fn();
render(<CreateSourceCorpusModal open={true} onConfirm={onConfirm} onCancel={() => {}} />);
const input = screen.getByPlaceholderText('Enter source corpus name');
await user.type(input, ' ');
await user.type(input, '{Enter}');
expect(onConfirm).not.toHaveBeenCalled();
});
it('calls onCancel when Cancel button is clicked', async () => {
const user = userEvent.setup();
const onCancel = vi.fn();
render(<CreateSourceCorpusModal open={true} onConfirm={() => {}} onCancel={onCancel} />);
await user.click(screen.getByText('Cancel'));
expect(onCancel).toHaveBeenCalledOnce();
});
it('resets input when reopened', async () => {
const user = userEvent.setup();
const { rerender } = render(
<CreateSourceCorpusModal open={true} onConfirm={() => {}} onCancel={() => {}} />,
);
await user.type(screen.getByPlaceholderText('Enter source corpus name'), 'Old name');
rerender(<CreateSourceCorpusModal open={false} onConfirm={() => {}} onCancel={() => {}} />);
rerender(<CreateSourceCorpusModal open={true} onConfirm={() => {}} onCancel={() => {}} />);
expect(screen.getByPlaceholderText('Enter source corpus name')).toHaveValue('');
});
it('auto-focuses the input when opened', async () => {
render(<CreateSourceCorpusModal open={true} onConfirm={() => {}} onCancel={() => {}} />);
await waitFor(() => {
expect(screen.getByPlaceholderText('Enter source corpus name')).toHaveFocus();
}, { timeout: 200 });
});
});

53
client/src/components/NotebookList.jsx
View File

@@ -1,53 +0,0 @@
import { useState } from 'react';
import CreateNotebookModal from './CreateNotebookModal.jsx';
function NotebookList({ notebooks, activeId, onSelect, onCreate, onDelete }) {
const [modalOpen, setModalOpen] = useState(false);
const handleDelete = (e, id) => {
e.stopPropagation();
onDelete(id);
};
const handleConfirm = (name) => {
setModalOpen(false);
onCreate(name);
};
return (
<div className="notebook-list">
<h2>Notebooks</h2>
<ul>
{notebooks.map((nb) => (
<li
key={nb.id}
className={nb.id === activeId ? 'active' : ''}
onClick={() => onSelect(nb.id)}
>
<span className="nb-name">{nb.name}</span>
<button
className="nb-delete"
onClick={(e) => handleDelete(e, nb.id)}
title="Delete notebook"
>
&times;
</button>
</li>
))}
</ul>
<button
className="btn-new-notebook"
onClick={() => setModalOpen(true)}
>
+ New Notebook
</button>
<CreateNotebookModal
open={modalOpen}
onConfirm={handleConfirm}
onCancel={() => setModalOpen(false)}
/>
</div>
);
}
export default NotebookList;

53
client/src/components/SourceCorpusList.jsx Normal file
View File

@@ -0,0 +1,53 @@
import { useState } from 'react';
import CreateSourceCorpusModal from './CreateSourceCorpusModal.jsx';
function SourceCorpusList({ sourceCorpora, activeId, onSelect, onCreate, onDelete }) {
const [modalOpen, setModalOpen] = useState(false);
const handleDelete = (e, id) => {
e.stopPropagation();
onDelete(id);
};
const handleConfirm = (name) => {
setModalOpen(false);
onCreate(name);
};
return (
<div className="source-corpus-list">
<h2>Source Corpora</h2>
<ul>
{sourceCorpora.map((corpus) => (
<li
key={corpus.id}
className={corpus.id === activeId ? 'active' : ''}
onClick={() => onSelect(corpus.id)}
>
<span className="sc-name">{corpus.name}</span>
<button
className="sc-delete"
onClick={(e) => handleDelete(e, corpus.id)}
title="Delete source corpus"
>
&times;
</button>
</li>
))}
</ul>
<button
className="btn-new-corpus"
onClick={() => setModalOpen(true)}
>
+ New Source Corpus
</button>
<CreateSourceCorpusModal
open={modalOpen}
onConfirm={handleConfirm}
onCancel={() => setModalOpen(false)}
/>
</div>
);
}
export default SourceCorpusList;

10
client/src/components/SourcePanel.jsx
View File

@@ -10,7 +10,7 @@ function isFileAllowed(file) {
return ALLOWED_EXTENSIONS.includes(ext);
}
function SourcePanel({ notebookId, hoveredSourceIndex, onSourceHover, onSourcesChange, children }) {
function SourcePanel({ sourceCorpusId, hoveredSourceIndex, onSourceHover, onSourcesChange, children }) {
const [sources, setSources] = useState([]);
const [uploading, setUploading] = useState(false);
const [isDragging, setIsDragging] = useState(false);
@@ -30,11 +30,11 @@ function SourcePanel({ notebookId, hoveredSourceIndex, onSourceHover, onSourcesC
useEffect(() => {
setSources([]);
onSourcesChange?.(0);
sourcesApi.listSources(notebookId).then((s) => {
sourcesApi.listSources(sourceCorpusId).then((s) => {
setSources(s);
onSourcesChange?.(s.length);
}).catch((err) => showError(err.message || 'Failed to load sources'));
}, [notebookId, onSourcesChange]);
}, [sourceCorpusId, onSourcesChange]);
useEffect(() => () => clearTimeout(errorTimer.current), []);
@@ -47,7 +47,7 @@ function SourcePanel({ notebookId, hoveredSourceIndex, onSourceHover, onSourcesC
setError(null);
setUploading(true);
try {
const src = await sourcesApi.uploadSource(notebookId, file);
const src = await sourcesApi.uploadSource(sourceCorpusId, file);
setSources((prev) => {
const next = [...prev, src];
onSourcesChange?.(next.length);
@@ -72,7 +72,7 @@ function SourcePanel({ notebookId, hoveredSourceIndex, onSourceHover, onSourcesC
setError(null);
setAddingUrl(true);
try {
const src = await sourcesApi.addUrlSource(notebookId, url);
const src = await sourcesApi.addUrlSource(sourceCorpusId, url);
if (src.error) {
showError(src.error);
} else {

50
client/src/hooks/useNotebook.js
View File

@@ -1,50 +0,0 @@
import { useState, useEffect, useCallback } from 'react';
import * as notebooksApi from '../api/notebooks.js';
export function useNotebook() {
const [notebooks, setNotebooks] = useState([]);
const [activeNotebook, setActiveNotebook] = useState(null);
useEffect(() => {
notebooksApi.listNotebooks().then(setNotebooks).catch(console.error);
}, []);
const selectNotebook = useCallback(
(id) => {
const nb = notebooks.find((n) => n.id === id) || null;
setActiveNotebook(nb);
},
[notebooks],
);
const createNotebook = useCallback(async (name) => {
if (!name) return;
const nb = await notebooksApi.createNotebook(name);
setNotebooks((prev) => [...prev, nb]);
setActiveNotebook(nb);
}, []);
const deleteNotebook = useCallback(
async (id) => {
try {
await notebooksApi.deleteNotebook(id);
} catch (err) {
console.error('Failed to delete notebook', err);
return;
}
setNotebooks((prev) => prev.filter((n) => n.id !== id));
if (activeNotebook?.id === id) {
setActiveNotebook(null);
}
},
[activeNotebook],
);
return {
notebooks,
activeNotebook,
selectNotebook,
createNotebook,
deleteNotebook,
};
}

176
client/src/hooks/useNotebook.test.js
View File

@@ -1,176 +0,0 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { renderHook, act, waitFor } from '@testing-library/react';
vi.mock('../api/notebooks.js', () => ({
listNotebooks: vi.fn(),
createNotebook: vi.fn(),
deleteNotebook: vi.fn(),
}));
import { useNotebook } from './useNotebook.js';
import * as notebooksApi from '../api/notebooks.js';
const notebooks = [
{ id: 'nb-1', name: 'Research' },
{ id: 'nb-2', name: 'Personal' },
];
beforeEach(() => {
vi.resetAllMocks();
notebooksApi.listNotebooks.mockResolvedValue(notebooks);
notebooksApi.createNotebook.mockImplementation(async (name) => ({
id: `nb-${Date.now()}`,
name,
}));
notebooksApi.deleteNotebook.mockResolvedValue({});
});
describe('useNotebook', () => {
it('loads notebooks on mount', async () => {
const { result } = renderHook(() => useNotebook());
await waitFor(() => {
expect(result.current.notebooks).toEqual(notebooks);
});
expect(notebooksApi.listNotebooks).toHaveBeenCalledOnce();
});
it('starts with no active notebook', () => {
const { result } = renderHook(() => useNotebook());
expect(result.current.activeNotebook).toBeNull();
});
it('selectNotebook sets the active notebook', async () => {
const { result } = renderHook(() => useNotebook());
await waitFor(() => {
expect(result.current.notebooks).toHaveLength(2);
});
act(() => {
result.current.selectNotebook('nb-2');
});
expect(result.current.activeNotebook).toEqual({ id: 'nb-2', name: 'Personal' });
});
it('selectNotebook sets null for unknown id', async () => {
const { result } = renderHook(() => useNotebook());
await waitFor(() => {
expect(result.current.notebooks).toHaveLength(2);
});
act(() => {
result.current.selectNotebook('nb-2');
});
expect(result.current.activeNotebook).not.toBeNull();
act(() => {
result.current.selectNotebook('nonexistent');
});
expect(result.current.activeNotebook).toBeNull();
});
it('createNotebook calls API and adds to list', async () => {
const newNb = { id: 'nb-new', name: 'New One' };
notebooksApi.createNotebook.mockResolvedValue(newNb);
const { result } = renderHook(() => useNotebook());
await waitFor(() => expect(result.current.notebooks).toHaveLength(2));
await act(async () => {
await result.current.createNotebook('New One');
});
expect(notebooksApi.createNotebook).toHaveBeenCalledWith('New One');
expect(result.current.notebooks).toHaveLength(3);
expect(result.current.notebooks[2]).toEqual(newNb);
expect(result.current.activeNotebook).toEqual(newNb);
});
it('createNotebook does nothing for empty name', async () => {
const { result } = renderHook(() => useNotebook());
await waitFor(() => expect(result.current.notebooks).toHaveLength(2));
await act(async () => {
await result.current.createNotebook('');
});
expect(notebooksApi.createNotebook).not.toHaveBeenCalled();
expect(result.current.notebooks).toHaveLength(2);
});
it('deleteNotebook removes from list', async () => {
const { result } = renderHook(() => useNotebook());
await waitFor(() => expect(result.current.notebooks).toHaveLength(2));
await act(async () => {
await result.current.deleteNotebook('nb-1');
});
expect(notebooksApi.deleteNotebook).toHaveBeenCalledWith('nb-1');
expect(result.current.notebooks).toHaveLength(1);
expect(result.current.notebooks[0].id).toBe('nb-2');
});
it('deleteNotebook clears activeNotebook if it was the deleted one', async () => {
const { result } = renderHook(() => useNotebook());
await waitFor(() => expect(result.current.notebooks).toHaveLength(2));
act(() => {
result.current.selectNotebook('nb-1');
});
expect(result.current.activeNotebook?.id).toBe('nb-1');
await act(async () => {
await result.current.deleteNotebook('nb-1');
});
expect(result.current.activeNotebook).toBeNull();
});
it('deleteNotebook preserves activeNotebook if different one deleted', async () => {
const { result } = renderHook(() => useNotebook());
await waitFor(() => expect(result.current.notebooks).toHaveLength(2));
act(() => {
result.current.selectNotebook('nb-2');
});
await act(async () => {
await result.current.deleteNotebook('nb-1');
});
expect(result.current.activeNotebook).toEqual({ id: 'nb-2', name: 'Personal' });
});
it('deleteNotebook does not remove from list on API error', async () => {
notebooksApi.deleteNotebook.mockRejectedValue(new Error('Server error'));
vi.spyOn(console, 'error').mockImplementation(() => {});
const { result } = renderHook(() => useNotebook());
await waitFor(() => expect(result.current.notebooks).toHaveLength(2));
await act(async () => {
await result.current.deleteNotebook('nb-1');
});
expect(result.current.notebooks).toHaveLength(2);
console.error.mockRestore();
});
it('handles listNotebooks API failure gracefully', async () => {
notebooksApi.listNotebooks.mockRejectedValue(new Error('Network error'));
vi.spyOn(console, 'error').mockImplementation(() => {});
const { result } = renderHook(() => useNotebook());
await waitFor(() => {
expect(notebooksApi.listNotebooks).toHaveBeenCalled();
});
expect(result.current.notebooks).toEqual([]);
console.error.mockRestore();
});
});

50
client/src/hooks/useSourceCorpus.js Normal file
View File

@@ -0,0 +1,50 @@
import { useState, useEffect, useCallback } from 'react';
import * as sourceCorpusApi from '../api/sourceCorpus.js';
export function useSourceCorpus() {
const [sourceCorpora, setSourceCorpora] = useState([]);
const [activeSourceCorpus, setActiveSourceCorpus] = useState(null);
useEffect(() => {
sourceCorpusApi.listSourceCorpora().then(setSourceCorpora).catch(console.error);
}, []);
const selectSourceCorpus = useCallback(
(id) => {
const corpus = sourceCorpora.find((n) => n.id === id) || null;
setActiveSourceCorpus(corpus);
},
[sourceCorpora],
);
const createSourceCorpus = useCallback(async (name) => {
if (!name) return;
const corpus = await sourceCorpusApi.createSourceCorpus(name);
setSourceCorpora((prev) => [...prev, corpus]);
setActiveSourceCorpus(corpus);
}, []);
const deleteSourceCorpus = useCallback(
async (id) => {
try {
await sourceCorpusApi.deleteSourceCorpus(id);
} catch (err) {
console.error('Failed to delete sourceCorpus', err);
return;
}
setSourceCorpora((prev) => prev.filter((n) => n.id !== id));
if (activeSourceCorpus?.id === id) {
setActiveSourceCorpus(null);
}
},
[activeSourceCorpus],
);
return {
sourceCorpora,
activeSourceCorpus,
selectSourceCorpus,
createSourceCorpus,
deleteSourceCorpus,
};
}

176
client/src/hooks/useSourceCorpus.test.js Normal file
View File

@@ -0,0 +1,176 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { renderHook, act, waitFor } from '@testing-library/react';
vi.mock('../api/sourceCorpus.js', () => ({
listSourceCorpora: vi.fn(),
createSourceCorpus: vi.fn(),
deleteSourceCorpus: vi.fn(),
}));
import { useSourceCorpus } from './useSourceCorpus.js';
import * as sourceCorpusApi from '../api/sourceCorpus.js';
const sourceCorpora = [
{ id: 'nb-1', name: 'Research' },
{ id: 'nb-2', name: 'Personal' },
];
beforeEach(() => {
vi.resetAllMocks();
sourceCorpusApi.listSourceCorpora.mockResolvedValue(sourceCorpora);
sourceCorpusApi.createSourceCorpus.mockImplementation(async (name) => ({
id: `nb-${Date.now()}`,
name,
}));
sourceCorpusApi.deleteSourceCorpus.mockResolvedValue({});
});
describe('useSourceCorpus', () => {
it('loads sourceCorpora on mount', async () => {
const { result } = renderHook(() => useSourceCorpus());
await waitFor(() => {
expect(result.current.sourceCorpora).toEqual(sourceCorpora);
});
expect(sourceCorpusApi.listSourceCorpora).toHaveBeenCalledOnce();
});
it('starts with no active sourceCorpus', () => {
const { result } = renderHook(() => useSourceCorpus());
expect(result.current.activeSourceCorpus).toBeNull();
});
it('selectSourceCorpus sets the active sourceCorpus', async () => {
const { result } = renderHook(() => useSourceCorpus());
await waitFor(() => {
expect(result.current.sourceCorpora).toHaveLength(2);
});
act(() => {
result.current.selectSourceCorpus('nb-2');
});
expect(result.current.activeSourceCorpus).toEqual({ id: 'nb-2', name: 'Personal' });
});
it('selectSourceCorpus sets null for unknown id', async () => {
const { result } = renderHook(() => useSourceCorpus());
await waitFor(() => {
expect(result.current.sourceCorpora).toHaveLength(2);
});
act(() => {
result.current.selectSourceCorpus('nb-2');
});
expect(result.current.activeSourceCorpus).not.toBeNull();
act(() => {
result.current.selectSourceCorpus('nonexistent');
});
expect(result.current.activeSourceCorpus).toBeNull();
});
it('createSourceCorpus calls API and adds to list', async () => {
const newCorpus = { id: 'nb-new', name: 'New One' };
sourceCorpusApi.createSourceCorpus.mockResolvedValue(newCorpus);
const { result } = renderHook(() => useSourceCorpus());
await waitFor(() => expect(result.current.sourceCorpora).toHaveLength(2));
await act(async () => {
await result.current.createSourceCorpus('New One');
});
expect(sourceCorpusApi.createSourceCorpus).toHaveBeenCalledWith('New One');
expect(result.current.sourceCorpora).toHaveLength(3);
expect(result.current.sourceCorpora[2]).toEqual(newCorpus);
expect(result.current.activeSourceCorpus).toEqual(newCorpus);
});
it('createSourceCorpus does nothing for empty name', async () => {
const { result } = renderHook(() => useSourceCorpus());
await waitFor(() => expect(result.current.sourceCorpora).toHaveLength(2));
await act(async () => {
await result.current.createSourceCorpus('');
});
expect(sourceCorpusApi.createSourceCorpus).not.toHaveBeenCalled();
expect(result.current.sourceCorpora).toHaveLength(2);
});
it('deleteSourceCorpus removes from list', async () => {
const { result } = renderHook(() => useSourceCorpus());
await waitFor(() => expect(result.current.sourceCorpora).toHaveLength(2));
await act(async () => {
await result.current.deleteSourceCorpus('nb-1');
});
expect(sourceCorpusApi.deleteSourceCorpus).toHaveBeenCalledWith('nb-1');
expect(result.current.sourceCorpora).toHaveLength(1);
expect(result.current.sourceCorpora[0].id).toBe('nb-2');
});
it('deleteSourceCorpus clears activeSourceCorpus if it was the deleted one', async () => {
const { result } = renderHook(() => useSourceCorpus());
await waitFor(() => expect(result.current.sourceCorpora).toHaveLength(2));
act(() => {
result.current.selectSourceCorpus('nb-1');
});
expect(result.current.activeSourceCorpus?.id).toBe('nb-1');
await act(async () => {
await result.current.deleteSourceCorpus('nb-1');
});
expect(result.current.activeSourceCorpus).toBeNull();
});
it('deleteSourceCorpus preserves activeSourceCorpus if different one deleted', async () => {
const { result } = renderHook(() => useSourceCorpus());
await waitFor(() => expect(result.current.sourceCorpora).toHaveLength(2));
act(() => {
result.current.selectSourceCorpus('nb-2');
});
await act(async () => {
await result.current.deleteSourceCorpus('nb-1');
});
expect(result.current.activeSourceCorpus).toEqual({ id: 'nb-2', name: 'Personal' });
});
it('deleteSourceCorpus does not remove from list on API error', async () => {
sourceCorpusApi.deleteSourceCorpus.mockRejectedValue(new Error('Server error'));
vi.spyOn(console, 'error').mockImplementation(() => {});
const { result } = renderHook(() => useSourceCorpus());
await waitFor(() => expect(result.current.sourceCorpora).toHaveLength(2));
await act(async () => {
await result.current.deleteSourceCorpus('nb-1');
});
expect(result.current.sourceCorpora).toHaveLength(2);
console.error.mockRestore();
});
it('handles listSourceCorpora API failure gracefully', async () => {
sourceCorpusApi.listSourceCorpora.mockRejectedValue(new Error('Network error'));
vi.spyOn(console, 'error').mockImplementation(() => {});
const { result } = renderHook(() => useSourceCorpus());
await waitFor(() => {
expect(sourceCorpusApi.listSourceCorpora).toHaveBeenCalled();
});
expect(result.current.sourceCorpora).toEqual([]);
console.error.mockRestore();
});
});

26
client/src/index.css
View File

@@ -75,14 +75,14 @@ body {
font-size: 16px;
}
/* ── Notebook List ─────────────────────────────────── */
/* ── SourceCorpus List ─────────────────────────────────── */
.notebook-list {
.source-corpus-list {
padding: 20px 16px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.notebook-list h2 {
.source-corpus-list h2 {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
@@ -91,12 +91,12 @@ body {
margin-bottom: 12px;
}
.notebook-list ul {
.source-corpus-list ul {
list-style: none;
margin-bottom: 8px;
}
.notebook-list li {
.source-corpus-list li {
display: flex;
align-items: center;
justify-content: space-between;
@@ -107,23 +107,23 @@ body {
transition: background 0.15s;
}
.notebook-list li:hover {
.source-corpus-list li:hover {
background: var(--sidebar-hover);
}
.notebook-list li.active {
.source-corpus-list li.active {
background: var(--sidebar-active);
color: #fff;
font-weight: 500;
}
.notebook-list li .nb-name {
.source-corpus-list li .sc-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notebook-list li .nb-delete {
.source-corpus-list li .sc-delete {
opacity: 0;
background: none;
border: none;
@@ -135,15 +135,15 @@ body {
transition: opacity 0.15s, color 0.15s;
}
.notebook-list li:hover .nb-delete {
.source-corpus-list li:hover .sc-delete {
opacity: 1;
}
.notebook-list li .nb-delete:hover {
.source-corpus-list li .sc-delete:hover {
color: var(--danger);
}
.btn-new-notebook {
.btn-new-corpus {
width: 100%;
padding: 8px;
border: 1px dashed rgba(255, 255, 255, 0.2);
@@ -155,7 +155,7 @@ body {
transition: border-color 0.15s, color 0.15s;
}
.btn-new-notebook:hover {
.btn-new-corpus:hover {
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
}