jan/website/src/components/ReleaseDatabase.astro
2025-07-24 23:57:14 +10:00

672 lines
19 KiB
Plaintext

---
export interface Props {
className?: string;
}
const { className = '' } = Astro.props;
---
<div class={`release-database ${className}`}>
<table class="newspaper-table">
<caption>Release Database</caption>
<thead>
<tr>
<th>Release Version</th>
<th>Target Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<!-- v0.6.7 - Released -->
<tr class="release-row" data-version="v0.6.7">
<td class="version-cell">
<strong>v0.6.7</strong>
<span class="version-name">Web Search</span>
</td>
<td>Released</td>
<td><span class="status released">Live</span></td>
</tr>
<tr class="release-details" data-for="v0.6.7">
<td colspan="3">
<div class="details-grid">
<div class="detail-section">
<h5>User Stories</h5>
<ul>
<li>As a user, I want to search the web directly from Jan chat for real-time information</li>
<li>As a developer, I want better API documentation for integration</li>
<li>As a researcher, I want source attribution for all search results</li>
</ul>
</div>
<div class="detail-section">
<h5>New Features</h5>
<ul>
<li>Privacy-respecting web search integration</li>
<li>Multiple search engine support</li>
<li>Improved model downloading experience</li>
<li>Enhanced error handling and user feedback</li>
</ul>
</div>
<div class="detail-section">
<h5>Documentation</h5>
<ul>
<li>Web Search API documentation</li>
<li>Privacy policy updates</li>
<li>Search configuration guide</li>
</ul>
</div>
</div>
</td>
</tr>
<!-- v0.6.5 - Released -->
<tr class="release-row" data-version="v0.6.5">
<td class="version-cell">
<strong>v0.6.5</strong>
<span class="version-name">Desktop Stability</span>
</td>
<td>Released</td>
<td><span class="status released">Live</span></td>
</tr>
<tr class="release-details" data-for="v0.6.5">
<td colspan="3">
<div class="details-grid">
<div class="detail-section">
<h5>Improvements</h5>
<ul>
<li>Enhanced memory management for large models</li>
<li>Improved GPU utilization</li>
<li>Better cross-platform compatibility</li>
</ul>
</div>
<div class="detail-section">
<h5>Bug Fixes</h5>
<ul>
<li>Fixed model loading crashes on Windows</li>
<li>Resolved memory leaks in long conversations</li>
<li>Fixed UI freezing during model downloads</li>
</ul>
</div>
<div class="detail-section">
<h5>Performance</h5>
<ul>
<li>30% faster model loading times</li>
<li>Reduced memory footprint by 25%</li>
<li>Improved response streaming</li>
</ul>
</div>
</div>
</td>
</tr>
<!-- v0.7.0 - In Development -->
<tr class="release-row" data-version="v0.7.0">
<td class="version-cell">
<strong>v0.7.0</strong>
<span class="version-name">Deep Research</span>
</td>
<td>January 2025</td>
<td><span class="status development">Building</span></td>
</tr>
<tr class="release-details" data-for="v0.7.0">
<td colspan="3">
<div class="details-grid">
<div class="detail-section">
<h5>User Stories</h5>
<ul>
<li>As a researcher, I want to conduct deep research with multiple sources and citations</li>
<li>As a user, I want Jan Nano to work seamlessly on mobile devices</li>
<li>As a team lead, I want to preview jan.ai for my organization</li>
</ul>
</div>
<div class="detail-section">
<h5>New Features</h5>
<ul>
<li>Deep research capabilities with multi-source analysis</li>
<li>jan.ai web platform beta launch</li>
<li>Improved Jan Nano performance and mobile optimization</li>
<li>Citation management and research reports</li>
</ul>
</div>
<div class="detail-section">
<h5>Documentation</h5>
<ul>
<li>Research methodology guide</li>
<li>jan.ai platform documentation</li>
<li>Mobile optimization best practices</li>
</ul>
</div>
</div>
</td>
</tr>
<!-- v0.8.0 - In Development -->
<tr class="release-row" data-version="v0.8.0">
<td class="version-cell">
<strong>v0.8.0</strong>
<span class="version-name">Browser Automation</span>
</td>
<td>March 2025</td>
<td><span class="status development">Building</span></td>
</tr>
<tr class="release-details" data-for="v0.8.0">
<td colspan="3">
<div class="details-grid">
<div class="detail-section">
<h5>User Stories</h5>
<ul>
<li>As a user, I want Jan to automate web tasks for me safely and efficiently</li>
<li>As a business user, I want to automate repetitive web workflows</li>
<li>As a developer, I want browser automation APIs for custom integrations</li>
</ul>
</div>
<div class="detail-section">
<h5>New Features</h5>
<ul>
<li>Browser automation capabilities (Beta)</li>
<li>Form filling and data extraction</li>
<li>Website navigation and interaction</li>
<li>Safety policies and user confirmation flows</li>
</ul>
</div>
<div class="detail-section">
<h5>Documentation</h5>
<ul>
<li>Browser automation safety guide</li>
<li>Web scraping best practices</li>
<li>API reference for automation tools</li>
</ul>
</div>
</div>
</td>
</tr>
<!-- v0.9.0 - Planned -->
<tr class="release-row" data-version="v0.9.0">
<td class="version-cell">
<strong>v0.9.0</strong>
<span class="version-name">Mobile Launch</span>
</td>
<td>Q1 2025</td>
<td><span class="status planned">Planned</span></td>
</tr>
<tr class="release-details" data-for="v0.9.0">
<td colspan="3">
<div class="details-grid">
<div class="detail-section">
<h5>User Stories</h5>
<ul>
<li>As a mobile user, I want Jan AI available on my iOS/Android device</li>
<li>As a commuter, I want to seamlessly switch between desktop and mobile</li>
<li>As a privacy-conscious user, I want local AI on my phone</li>
</ul>
</div>
<div class="detail-section">
<h5>New Features</h5>
<ul>
<li>iOS and Android mobile applications</li>
<li>Three adaptive modes (Desktop, Server, Local)</li>
<li>Voice-first interface</li>
<li>Cross-device synchronization</li>
<li>Jan Nano on-device processing</li>
</ul>
</div>
<div class="detail-section">
<h5>Documentation</h5>
<ul>
<li>Mobile setup and configuration guide</li>
<li>Voice interaction best practices</li>
<li>Device syncing tutorial</li>
</ul>
</div>
</div>
</td>
</tr>
<!-- v1.0.0 - Planned -->
<tr class="release-row" data-version="v1.0.0">
<td class="version-cell">
<strong>v1.0.0</strong>
<span class="version-name">Server Edition</span>
</td>
<td>Q2 2025</td>
<td><span class="status planned">Planned</span></td>
</tr>
<tr class="release-details" data-for="v1.0.0">
<td colspan="3">
<div class="details-grid">
<div class="detail-section">
<h5>User Stories</h5>
<ul>
<li>As an IT admin, I want to deploy Jan for my entire organization</li>
<li>As a team lead, I want centralized AI with team collaboration features</li>
<li>As a CTO, I want enterprise-grade security and compliance</li>
</ul>
</div>
<div class="detail-section">
<h5>New Features</h5>
<ul>
<li>Multi-user server deployment</li>
<li>Enterprise authentication (SSO, LDAP)</li>
<li>Team collaboration and shared conversations</li>
<li>Docker and Kubernetes deployment options</li>
<li>Admin dashboard and user management</li>
</ul>
</div>
<div class="detail-section">
<h5>Documentation</h5>
<ul>
<li>Enterprise deployment guide</li>
<li>Security and compliance documentation</li>
<li>Admin management tutorials</li>
</ul>
</div>
</div>
</td>
</tr>
<!-- v1.1.0 - Planned -->
<tr class="release-row" data-version="v1.1.0">
<td class="version-cell">
<strong>v1.1.0</strong>
<span class="version-name">AI Agents</span>
</td>
<td>Q1 2026</td>
<td><span class="status planned">Planned</span></td>
</tr>
<tr class="release-details" data-for="v1.1.0">
<td colspan="3">
<div class="details-grid">
<div class="detail-section">
<h5>User Stories</h5>
<ul>
<li>As a user, I want autonomous agents to handle complex multi-step tasks</li>
<li>As a business owner, I want AI that can coordinate multiple tools automatically</li>
<li>As a power user, I want to create custom agent workflows</li>
</ul>
</div>
<div class="detail-section">
<h5>New Features</h5>
<ul>
<li>Autonomous AI agents</li>
<li>Multi-step task planning and execution</li>
<li>Tool orchestration and coordination</li>
<li>Goal-oriented intelligent reasoning</li>
<li>Custom agent workflow builder</li>
</ul>
</div>
<div class="detail-section">
<h5>Documentation</h5>
<ul>
<li>Agent development guide</li>
<li>Workflow automation tutorials</li>
<li>Safety and oversight best practices</li>
</ul>
</div>
</div>
</td>
</tr>
<!-- v1.2.0 - Planned -->
<tr class="release-row" data-version="v1.2.0">
<td class="version-cell">
<strong>v1.2.0</strong>
<span class="version-name">Lucy Multimodal</span>
</td>
<td>Q2 2025</td>
<td><span class="status planned">Planned</span></td>
</tr>
<tr class="release-details" data-for="v1.2.0">
<td colspan="3">
<div class="details-grid">
<div class="detail-section">
<h5>User Stories</h5>
<ul>
<li>As a content creator, I want AI that can understand and process images</li>
<li>As a researcher, I want to analyze documents with both text and visuals</li>
<li>As a designer, I want AI that can help with visual content creation</li>
</ul>
</div>
<div class="detail-section">
<h5>New Features</h5>
<ul>
<li>Lucy multimodal model release</li>
<li>Image understanding and analysis</li>
<li>Document processing with OCR</li>
<li>Visual reasoning capabilities</li>
<li>Audio processing (planned)</li>
</ul>
</div>
<div class="detail-section">
<h5>Documentation</h5>
<ul>
<li>Multimodal AI usage guide</li>
<li>Image processing tutorials</li>
<li>Visual reasoning examples</li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<style>
.release-database {
margin: 3rem 0;
}
/* Newspaper-style table */
.newspaper-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
font-family: Georgia, 'Times New Roman', serif;
margin: 2rem 0;
}
.newspaper-table caption {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 1rem;
text-align: left;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.newspaper-table th,
.newspaper-table td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid #000;
}
.newspaper-table th {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
background: #f0f0f0;
border-top: 3px double #000;
border-bottom: 1px solid #000;
font-size: 0.8rem;
}
.newspaper-table tbody tr:last-child td {
border-bottom: 3px double #000;
}
/* Clickable rows */
.release-row {
cursor: pointer;
transition: background-color 0.2s ease;
}
.release-row:hover {
background: #f8f8f8;
}
.release-row.expanded {
background: #f0f0f0;
font-weight: 600;
}
/* Version cell styling */
.version-cell {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.version-name {
font-size: 0.85rem;
color: #333;
font-weight: normal;
}
/* Status badges */
.status {
display: inline-block;
padding: 0.2rem 0.5rem;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.status.released {
background: #000;
color: #fff;
}
.status.development {
background: #666;
color: #fff;
}
.status.planned {
background: #fff;
color: #000;
border: 1px solid #000;
}
/* Details rows */
.release-details {
display: none;
background: #fafafa;
}
.release-details.expanded {
display: table-row;
}
.release-details td {
padding: 0;
border-bottom: 1px solid #000;
}
.details-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-collapse: collapse;
}
.detail-section {
padding: 1rem;
border-right: 1px solid #ccc;
}
.detail-section:last-child {
border-right: none;
}
.detail-section h5 {
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 0.75rem 0;
color: #000;
}
.detail-section ul {
list-style: none;
margin: 0;
padding: 0;
}
.detail-section li {
margin-bottom: 0.5rem;
padding-left: 1rem;
position: relative;
font-size: 0.85rem;
line-height: 1.4;
color: #333;
}
.detail-section li::before {
content: '•';
position: absolute;
left: 0;
color: #666;
}
/* Responsive */
@media (max-width: 768px) {
.newspaper-table {
font-size: 0.8rem;
}
.newspaper-table th,
.newspaper-table td {
padding: 0.5rem;
}
.version-cell {
flex-direction: column;
gap: 0.25rem;
}
.details-grid {
grid-template-columns: 1fr;
}
.detail-section {
border-right: none;
border-bottom: 1px solid #ccc;
}
.detail-section:last-child {
border-bottom: none;
}
}
/* Print styles */
@media print {
.release-row {
page-break-inside: avoid;
}
.release-details {
display: table-row !important;
}
}
/* Dark mode styles */
html[data-theme="dark"] .newspaper-table {
background: #1a1a1a;
color: #fff;
}
html[data-theme="dark"] .newspaper-table caption {
color: #fff;
}
html[data-theme="dark"] .newspaper-table th {
background: #2a2a2a;
border-color: #666;
color: #fff;
}
html[data-theme="dark"] .newspaper-table td {
border-color: #666;
color: #ccc;
}
html[data-theme="dark"] .newspaper-table tbody tr:last-child td {
border-bottom-color: #666;
}
html[data-theme="dark"] .release-row:hover {
background: #2a2a2a;
}
html[data-theme="dark"] .release-row.expanded {
background: #333;
}
html[data-theme="dark"] .version-name {
color: #999;
}
/* Dark mode status badges */
html[data-theme="dark"] .status.released {
background: #fff;
color: #000;
}
html[data-theme="dark"] .status.development {
background: #999;
color: #000;
}
html[data-theme="dark"] .status.planned {
background: transparent;
color: #fff;
border-color: #fff;
}
/* Dark mode details */
html[data-theme="dark"] .release-details {
background: #252525;
}
html[data-theme="dark"] .release-details td {
border-color: #666;
}
html[data-theme="dark"] .detail-section {
border-right-color: #444;
}
html[data-theme="dark"] .detail-section h5 {
color: #fff;
}
html[data-theme="dark"] .detail-section li {
color: #ccc;
}
html[data-theme="dark"] .detail-section li::before {
color: #999;
}
@media (max-width: 768px) {
html[data-theme="dark"] .detail-section {
border-bottom-color: #444;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const releaseRows = document.querySelectorAll('.release-row');
releaseRows.forEach(row => {
row.addEventListener('click', () => {
const version = row.getAttribute('data-version');
const detailsRow = document.querySelector(`.release-details[data-for="${version}"]`);
if (detailsRow) {
// Toggle expanded state
const isExpanded = detailsRow.classList.contains('expanded');
// Close all other rows
document.querySelectorAll('.release-details').forEach(details => {
details.classList.remove('expanded');
});
document.querySelectorAll('.release-row').forEach(r => {
r.classList.remove('expanded');
});
// Toggle this row
if (!isExpanded) {
detailsRow.classList.add('expanded');
row.classList.add('expanded');
}
}
});
});
});
</script>