219 lines
8.5 KiB
HTML
219 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Agentic Research</title>
|
|
<link rel="stylesheet" href="/static/css/styles.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Sidebar -->
|
|
<div id="sidebar" class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2 class="sidebar-title">Agentic Research</h2>
|
|
<div class="sidebar-stats" id="sidebar-stats"></div>
|
|
</div>
|
|
|
|
<!-- Query -->
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-label">Research Query</div>
|
|
<textarea id="query-input" placeholder="Enter your research question..." rows="3"></textarea>
|
|
<div class="sidebar-actions">
|
|
<div class="mode-section">
|
|
<label class="mode-toggle">
|
|
<input type="checkbox" id="pipeline-mode">
|
|
<span>Pipeline Mode</span>
|
|
</label>
|
|
<select id="pipeline-output-mode" class="mode-select" style="display:none">
|
|
<option value="">Auto (detect)</option>
|
|
<option value="brief">Brief</option>
|
|
<option value="report">Report</option>
|
|
<option value="gap">Gap Analysis</option>
|
|
<option value="matrix">Matrix</option>
|
|
</select>
|
|
</div>
|
|
<div class="skill-toggles" id="skill-toggles">
|
|
<label class="skill-toggle"><input type="checkbox" value="researcher" checked> Research</label>
|
|
<label class="skill-toggle"><input type="checkbox" value="extractor"> Extract</label>
|
|
<label class="skill-toggle"><input type="checkbox" value="summarizer"> Summarize</label>
|
|
<label class="skill-toggle"><input type="checkbox" value="qa_agent"> QA</label>
|
|
<label class="skill-toggle"><input type="checkbox" value="critic"> Critique</label>
|
|
<label class="skill-toggle"><input type="checkbox" value="comparator"> Compare</label>
|
|
<label class="skill-toggle"><input type="checkbox" value="aggregator"> Aggregate</label>
|
|
<label class="skill-toggle"><input type="checkbox" value="context_agent"> Context</label>
|
|
</div>
|
|
</div>
|
|
<button id="run-research" class="btn btn-primary">Run Research</button>
|
|
</div>
|
|
|
|
<!-- Documents -->
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-section-header">
|
|
<span class="sidebar-label">Documents</span>
|
|
<label class="upload-label">
|
|
<input type="file" id="doc-upload" accept=".pdf,.txt,.md,.doc" style="display:none">
|
|
<span class="btn btn-secondary">Upload</span>
|
|
</label>
|
|
</div>
|
|
<div id="doc-list" class="doc-list"></div>
|
|
</div>
|
|
|
|
<!-- Sessions -->
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-section-header">
|
|
<span class="sidebar-label">Sessions</span>
|
|
</div>
|
|
<div id="session-list" class="doc-list"></div>
|
|
</div>
|
|
|
|
<!-- Models -->
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-section-header">
|
|
<span class="sidebar-label">Models</span>
|
|
<button id="check-models" class="btn btn-small">Check</button>
|
|
</div>
|
|
<div id="model-list" class="doc-list"></div>
|
|
</div>
|
|
|
|
<div class="sidebar-footer">
|
|
<div id="health-indicator" class="health-indicator"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div id="main" class="main-content">
|
|
<div id="main-toolbar" class="toolbar">
|
|
<div class="toolbar-tabs" id="main-tabs">
|
|
<button class="tab active" data-tab="analysis">Analysis</button>
|
|
<button class="tab" data-tab="pipeline">Pipeline</button>
|
|
<button class="tab" data-tab="viewer">Document Viewer</button>
|
|
<button class="tab" data-tab="search">Search</button>
|
|
<button class="tab" data-tab="memories">Memories</button>
|
|
<button class="tab" data-tab="findings">Findings</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div id="tab-content" class="tab-panes">
|
|
<!-- Analysis Tab -->
|
|
<div id="tab-analysis" class="tab-pane active">
|
|
<div class="analysis-container">
|
|
<div id="research-output" class="research-output">
|
|
<div class="empty-state">
|
|
<div class="empty-icon">⚙</div>
|
|
<div class="empty-text">Run a research query to see results</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Viewer Tab -->
|
|
<div id="tab-viewer" class="tab-pane">
|
|
<div class="viewer-container">
|
|
<div id="viewer-toolbar">
|
|
<span id="viewer-doc-name">No document selected</span>
|
|
<span id="viewer-page-info">Page 0 / 0</span>
|
|
<div class="viewer-controls">
|
|
<button id="viewer-prev" class="btn btn-small">◀ Prev</button>
|
|
<input id="viewer-page-input" type="number" min="0" value="0" class="page-input">
|
|
<button id="viewer-next" class="btn btn-small">Next ▶</button>
|
|
</div>
|
|
<div class="viewer-toggle">
|
|
<label><input type="checkbox" id="show-polygons" checked> Polygons</label>
|
|
<label><input type="checkbox" id="show-text-layers" checked> Text</label>
|
|
<label><input type="checkbox" id="show-chunk-labels" checked> Chunk labels</label>
|
|
</div>
|
|
</div>
|
|
<div id="polygon-viewer" class="polygon-viewer">
|
|
<svg id="polygon-svg" class="polygon-svg"></svg>
|
|
<canvas id="polygon-canvas" class="polygon-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Tab -->
|
|
<div id="tab-search" class="tab-pane">
|
|
<div class="search-container">
|
|
<div class="search-input-row">
|
|
<input id="search-query" type="text" placeholder="Search documents (text or semantic)..." class="search-input">
|
|
<select id="search-type" class="search-type-select">
|
|
<option value="semantic">Semantic</option>
|
|
<option value="text">Text</option>
|
|
</select>
|
|
<button id="execute-search" class="btn btn-primary">Search</button>
|
|
</div>
|
|
<div id="search-results" class="search-results-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Memories Tab -->
|
|
<div id="tab-memories" class="tab-pane">
|
|
<div class="memories-container">
|
|
<div class="memories-section">
|
|
<h3>Saved Memories</h3>
|
|
<div id="memories-list" class="memories-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Findings Tab -->
|
|
<div id="tab-findings" class="tab-pane">
|
|
<div class="findings-container">
|
|
<h3>Research Findings</h3>
|
|
<div id="findings-list" class="findings-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pipeline Tab -->
|
|
<div id="tab-pipeline" class="tab-pane">
|
|
<div class="pipeline-container">
|
|
<div class="pipeline-header-row">
|
|
<h3>Research Pipeline</h3>
|
|
<div class="pipeline-controls">
|
|
<select id="pipeline-output-mode-tab" class="mode-select">
|
|
<option value="">Auto (detect)</option>
|
|
<option value="brief">Brief</option>
|
|
<option value="report">Report</option>
|
|
<option value="gap">Gap Analysis</option>
|
|
<option value="matrix">Matrix</option>
|
|
</select>
|
|
<button id="rebuild-pipeline" class="btn btn-secondary">Rebuild Pipeline</button>
|
|
</div>
|
|
</div>
|
|
<div id="pipeline-output" class="pipeline-output">
|
|
<div class="empty-state">
|
|
<div class="empty-icon">⚙</div>
|
|
<div class="empty-text">Run a research query in Pipeline mode to see staged results here</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat overlay -->
|
|
<div id="chat-overlay" class="chat-overlay" style="display:none">
|
|
<div class="chat-window">
|
|
<div class="chat-header">
|
|
<span>Agent Chat</span>
|
|
<button class="btn-close" id="chat-close">×</button>
|
|
</div>
|
|
<div class="chat-body" id="chat-body"></div>
|
|
<div class="chat-input-row">
|
|
<input id="chat-input" type="text" placeholder="Ask the agent..." class="chat-input">
|
|
<button id="chat-send" class="btn btn-primary">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/js/store.js"></script>
|
|
<script src="/static/js/utils.js"></script>
|
|
<script src="/static/js/doc-viewer.js"></script>
|
|
<script src="/static/js/research.js"></script>
|
|
<script src="/static/js/ui.js"></script>
|
|
<script src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|