Version 1

api/chat.php

@@ -0,0 +1,109 @@
+<?php
+require_once __DIR__ . '/../db/config.php';
+require_once __DIR__ . '/../ai/LocalAIApi.php';
+
+header('Content-Type: application/json');
+
+$input = json_decode(file_get_contents('php://input'), true);
+
+if (isset($input['action']) && $input['action'] === 'get_past_timesheets') {
+    try {
+        $pdo = db();
+        $stmt = $pdo->query("SELECT DATE(created_at) as timesheet_date, JSON_ARRAYAGG(JSON_OBJECT('id', id, 'task', task, 'project', project, 'output_type', output_type, 'duration', duration, 'timestamp', DATE_FORMAT(created_at, '%Y-%m-%d %H:%i:%s'))) as activities FROM activity_log GROUP BY timesheet_date ORDER BY timesheet_date DESC");
+        $past_timesheets = $stmt->fetchAll(PDO::FETCH_ASSOC);
+        echo json_encode(['past_timesheets' => $past_timesheets]);
+    } catch (PDOException $e) {
+        http_response_code(500);
+        error_log("DB Error: " . $e->getMessage());
+        echo json_encode(['error' => 'Database error while fetching past timesheets']);
+    }
+    exit;
+}
+
+if (isset($input['action']) && $input['action'] === 'manual_log') {
+    $task_description = $input['type'] . ': ' . $input['task'];
+    $project = $input['project'];
+    // For manual entries, we can set a duration of 0 or make it an optional field.
+    $duration_formatted = '00:00:00'; 
+
+    try {
+        $pdo = db();
+        $stmt = $pdo->prepare("INSERT INTO activity_log (task, project, output_type, duration) VALUES (?, ?, ?, ?)");
+        $stmt->execute([$task_description, $project, 'Human', $duration_formatted]);
+        
+        $new_log_id = $pdo->lastInsertId();
+        $log_stmt = $pdo->prepare("SELECT *, DATE_FORMAT(created_at, '%Y-%m-%d %H:%i:%s') as timestamp FROM activity_log WHERE id = ?");
+        $log_stmt->execute([$new_log_id]);
+        $new_log_entry = $log_stmt->fetch(PDO::FETCH_ASSOC);
+
+        echo json_encode(['new_log_entry' => $new_log_entry]);
+
+    } catch (PDOException $e) {
+        http_response_code(500);
+        error_log("DB Error: " . $e->getMessage());
+        echo json_encode(['error' => 'Database error while logging manual entry']);
+    }
+    exit;
+}
+
+
+$user_message = $input['message'] ?? '';
+
+if (empty($user_message)) {
+    echo json_encode(['error' => 'Empty message']);
+    exit;
+}
+
+$start_time = microtime(true);
+
+// Use the LocalAIApi to get a response from the AI
+$ai_response_data = LocalAIApi::createResponse([
+    'input' => [
+        ['role' => 'system', 'content' => 'You are a helpful assistant.'],
+        ['role' => 'user', 'content' => $user_message],
+    ],
+]);
+
+if (empty($ai_response_data['success'])) {
+    http_response_code(500);
+    error_log('AI API Error: ' . ($ai_response_data['error'] ?? 'Unknown error'));
+    echo json_encode(['error' => 'Failed to get response from AI', 'details' => $ai_response_data['error'] ?? '']);
+    exit;
+}
+
+$ai_message = LocalAIApi::extractText($ai_response_data);
+
+if ($ai_message === '') {
+    $decoded = LocalAIApi::decodeJsonFromResponse($ai_response_data);
+    $ai_message = $decoded ? json_encode($decoded, JSON_UNESCAPED_UNICODE) : 'Empty response from AI.';
+}
+
+
+$end_time = microtime(true);
+$duration_seconds = round($end_time - $start_time);
+$duration_formatted = gmdate("H:i:s", $duration_seconds);
+
+$project_name = 'Chat Interaction';
+
+try {
+    $pdo = db();
+    $stmt = $pdo->prepare("INSERT INTO activity_log (task, project, output_type, duration) VALUES (?, ?, ?, ?)");
+    $stmt->execute([$ai_message, $project_name, 'AI', $duration_formatted]);
+    
+    // Fetch the new log entry to return it
+    $new_log_id = $pdo->lastInsertId();
+    $log_stmt = $pdo->prepare("SELECT *, DATE_FORMAT(created_at, '%Y-%m-%d %H:%i:%s') as timestamp FROM activity_log WHERE id = ?");
+    $log_stmt->execute([$new_log_id]);
+    $new_log_entry = $log_stmt->fetch(PDO::FETCH_ASSOC);
+
+} catch (PDOException $e) {
+    http_response_code(500);
+    error_log("DB Error: " . $e->getMessage());
+    echo json_encode(['error' => 'Database error while logging']);
+    exit;
+}
+
+echo json_encode([
+    'reply' => $ai_message,
+    'new_log_entry' => $new_log_entry
+]);

assets/css/custom.css

@@ -0,0 +1,118 @@
+/* Inter font from Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    background-color: #F8F9FA;
+    color: #212529;
+}
+
+.card {
+    border-radius: 0.25rem;
+    border: 1px solid #DEE2E6;
+}
+
+.table {
+    border: 1px solid #DEE2E6;
+}
+
+.badge-ai {
+    background-color: #007BFF;
+    color: white;
+}
+
+.badge-human {
+    background-color: #6C757D;
+    color: white;
+}
+
+#chat-container {
+    height: 70vh;
+    display: flex;
+    flex-direction: column;
+}
+
+#chat-box {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.message {
+    padding: 0.5rem 1rem;
+    border-radius: 1rem;
+    max-width: 80%;
+    word-wrap: break-word;
+}
+
+.user-message {
+    background-color: #007BFF;
+    color: white;
+    align-self: flex-end;
+    border-bottom-right-radius: 0;
+}
+
+.bot-message {
+    background-color: #E9ECEF;
+    color: #212529;
+    align-self: flex-start;
+    border-bottom-left-radius: 0;
+}
+
+.bot-message.typing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.dot-flashing {
+    position: relative;
+    width: 6px;
+    height: 6px;
+    border-radius: 5px;
+    background-color: #6C757D;
+    color: #6C757D;
+    animation: dotFlashing 1s infinite linear alternate;
+    animation-delay: .5s;
+}
+
+.dot-flashing::before, .dot-flashing::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+}
+
+.dot-flashing::before {
+    left: -10px;
+    width: 6px;
+    height: 6px;
+    border-radius: 5px;
+    background-color: #6C757D;
+    color: #6C757D;
+    animation: dotFlashing 1s infinite alternate;
+    animation-delay: 0s;
+}
+
+.dot-flashing::after {
+    left: 10px;
+    width: 6px;
+    height: 6px;
+    border-radius: 5px;
+    background-color: #6C757D;
+    color: #6C757D;
+    animation: dotFlashing 1s infinite alternate;
+    animation-delay: 1s;
+}
+
+@keyframes dotFlashing {
+    0% {
+        background-color: #6C757D;
+    }
+    50%, 100% {
+        background-color: #E9ECEF;
+    }
+}

assets/js/main.js

@@ -0,0 +1,276 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const chatForm = document.getElementById('chat-form');
+    const chatInput = document.getElementById('chat-input');
+    const chatBox = document.getElementById('chat-box');
+    const activityLogBody = document.getElementById('activity-log-body');
+    const logCount = document.getElementById('log-count');
+    const emptyLogRew = document.getElementById('empty-log-row');
+    const manualLogForm = document.getElementById('manual-log-form');
+    const clockElement = document.getElementById('clock');
+    const pastTimesheetsTab = document.getElementById('past-timesheets-tab');
+    const pastTimesheetsContainer = document.getElementById('past-timesheets');
+
+    function updateClock() {
+        if (clockElement) {
+            const now = new Date();
+            const time = now.toLocaleTimeString();
+            const month = String(now.getMonth() + 1).padStart(2, '0');
+            const day = String(now.getDate()).padStart(2, '0');
+            const year = now.getFullYear();
+            const date = `${month}-${day}-${year}`;
+            clockElement.textContent = `${time} ${date}`;
+        }
+    }
+
+    updateClock();
+    setInterval(updateClock, 1000);
+
+    if (pastTimesheetsTab) {
+        pastTimesheetsTab.addEventListener('shown.bs.tab', () => {
+            loadPastTimesheets();
+        });
+    }
+
+    async function loadPastTimesheets() {
+        pastTimesheetsContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>';
+
+        try {
+            const response = await fetch('api/chat.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ action: 'get_past_timesheets' })
+            });
+
+            if (!response.ok) {
+                pastTimesheetsContainer.innerHTML = '<p class="text-center text-danger">Failed to load past timesheets.</p>';
+                return;
+            }
+
+            const data = await response.json();
+
+            if (data.error) {
+                pastTimesheetsContainer.innerHTML = `<p class="text-center text-danger">${data.error}</p>`;
+                return;
+            }
+
+            if (!data.past_timesheets || data.past_timesheets.length === 0) {
+                pastTimesheetsContainer.innerHTML = '<div class="card"><div class="card-body text-center text-muted">No past timesheets found.</div></div>';
+                return;
+            }
+
+            const accordion = document.createElement('div');
+            accordion.className = 'accordion';
+            accordion.id = 'past-timesheets-accordion';
+
+            data.past_timesheets.forEach((sheet, index) => {
+                const activities = JSON.parse(sheet.activities);
+                const item = document.createElement('div');
+                item.className = 'accordion-item';
+
+                const header = document.createElement('h2');
+                header.className = 'accordion-header';
+                header.innerHTML = `
+                    <button class="accordion-button ${index === 0 ? '' : 'collapsed'}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-${index}" aria-expanded="${index === 0}" aria-controls="collapse-${index}">
+                        ${sheet.timesheet_date}
+                    </button>
+                `;
+
+                const collapse = document.createElement('div');
+                collapse.id = `collapse-${index}`;
+                collapse.className = `accordion-collapse collapse ${index === 0 ? 'show' : ''}`;
+                collapse.setAttribute('data-bs-parent', '#past-timesheets-accordion');
+
+                const body = document.createElement('div');
+                body.className = 'accordion-body';
+                
+                let tableHtml = `
+                    <div class="table-responsive">
+                        <table class="table table-sm table-striped">
+                            <thead>
+                                <tr>
+                                    <th>Timestamp</th>
+                                    <th>Task</th>
+                                    <th>Project</th>
+                                    <th class="text-center">Output</th>
+                                    <th class="text-end">Duration</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                `;
+
+                activities.forEach(activity => {
+                     const badgeClass = activity.output_type === 'AI' ? 'badge-ai' : 'badge-human';
+                     tableHtml += `
+                        <tr>
+                            <td>${activity.timestamp}</td>
+                            <td>${escapeHTML(activity.task)}</td>
+                            <td>${escapeHTML(activity.project)}</td>
+                            <td class="text-center"><span class="badge rounded-pill ${badgeClass}">${escapeHTML(activity.output_type)}</span></td>
+                            <td class="text-end">${escapeHTML(activity.duration)}</td>
+                        </tr>
+                    `;
+                });
+
+                tableHtml += '</tbody></table></div>';
+                body.innerHTML = tableHtml;
+
+                collapse.appendChild(body);
+                item.appendChild(header);
+                item.appendChild(collapse);
+                accordion.appendChild(item);
+            });
+
+            pastTimesheetsContainer.innerHTML = '';
+            pastTimesheetsContainer.appendChild(accordion);
+
+        } catch (error) {
+            console.error('Error loading past timesheets:', error);
+            pastTimesheetsContainer.innerHTML = '<p class="text-center text-danger">An error occurred while fetching data.</p>';
+        }
+    }
+
+    chatForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const userMessage = chatInput.value.trim();
+        if (!userMessage) return;
+
+        appendMessage(userMessage, 'user');
+        chatInput.value = '';
+        showTypingIndicator();
+
+        try {
+            const response = await fetch('api/chat.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ message: userMessage })
+            });
+
+            removeTypingIndicator();
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                const errorMsg = errorData.error || 'An unknown error occurred.';
+                appendMessage(`Error: ${errorMsg}`, 'bot');
+                return;
+            }
+
+            const data = await response.json();
+            
+            if (data.error) {
+                appendMessage(`Error: ${data.error}`, 'bot');
+                return;
+            }
+            
+            appendMessage(data.reply, 'bot');
+
+            if (data.new_log_entry) {
+                updateActivityLog(data.new_log_entry);
+            }
+
+        } catch (error) {
+            removeTypingIndicator();
+            appendMessage('Could not connect to the server. Please try again later.', 'bot');
+            console.error("Fetch Error:", error);
+        }
+    });
+    
+    manualLogForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const actionType = document.getElementById('action-type').value;
+        const project = document.getElementById('manual-project').value.trim();
+        const task = document.getElementById('manual-task').value.trim();
+
+        if (!project || !task) {
+            // You might want to show an error to the user
+            return;
+        }
+
+        const payload = {
+            action: 'manual_log',
+            type: actionType,
+            project: project,
+            task: task
+        };
+        
+        try {
+            const response = await fetch('api/chat.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(payload)
+            });
+
+            if (!response.ok) {
+                console.error('Manual log submission failed');
+                return;
+            }
+
+            const data = await response.json();
+
+            if (data.new_log_entry) {
+                updateActivityLog(data.new_log_entry);
+                manualLogForm.reset();
+            }
+        } catch (error) {
+            console.error("Fetch Error:", error);
+        }
+    });
+
+    function appendMessage(message, sender) {
+        const messageElement = document.createElement('div');
+        messageElement.classList.add('message', `${sender}-message`);
+        messageElement.textContent = message;
+        chatBox.appendChild(messageElement);
+        chatBox.scrollTop = chatBox.scrollHeight;
+    }
+
+    function showTypingIndicator() {
+        const typingIndicator = document.createElement('div');
+        typingIndicator.classList.add('message', 'bot-message', 'typing-indicator');
+        typingIndicator.innerHTML = '<div class="dot-flashing"></div>';
+        typingIndicator.id = 'typing-indicator';
+        chatBox.appendChild(typingIndicator);
+        chatBox.scrollTop = chatBox.scrollHeight;
+    }
+
+    function removeTypingIndicator() {
+        const typingIndicator = document.getElementById('typing-indicator');
+        if (typingIndicator) {
+            typingIndicator.remove();
+        }
+    }
+    
+    function updateActivityLog(logEntry) {
+        if(emptyLogRew) {
+            emptyLogRew.remove();
+        }
+        
+        const newRow = document.createElement('tr');
+        const badgeClass = logEntry.output_type === 'AI' ? 'badge-ai' : 'badge-human';
+        newRow.innerHTML = `
+            <td>${logEntry.timestamp}</td>
+            <td>${escapeHTML(logEntry.task)}</td>
+            <td>${escapeHTML(logEntry.project)}</td>
+            <td class="text-center">
+                <span class="badge rounded-pill ${badgeClass}">
+                    ${escapeHTML(logEntry.output_type)}
+                </span>
+            </td>
+            <td class="text-end">${escapeHTML(logEntry.duration)}</td>
+        `;
+        activityLogBody.prepend(newRow);
+        logCount.textContent = parseInt(logCount.textContent) + 1;
+    }
+
+    function escapeHTML(str) {
+        if (typeof str !== 'string') return '';
+        const p = document.createElement('p');
+        p.appendChild(document.createTextNode(str));
+        return p.innerHTML;
+    }
+});

index.php

@@ -1,150 +1,235 @@
 <?php
-declare(strict_types=1);
+require_once 'db/config.php';
-@ini_set('display_errors', '1');
+
-@error_reporting(E_ALL);
+// Handle form submission
-@date_default_timezone_set('UTC');
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $task = $_POST['task'] ?? '';
+    $project = $_POST['project'] ?? '';
+    $output_type = $_POST['output_type'] ?? '';
+    $duration = $_POST['duration'] ?? '';
+
+    if ($task && $project && $output_type && $duration) {
+        try {
+            $pdo = db();
+            $stmt = $pdo->prepare("INSERT INTO activity_log (task, project, output_type, duration) VALUES (?, ?, ?, ?)");
+            $stmt->execute([$task, $project, $output_type, $duration]);
+            header("Location: " . $_SERVER['PHP_SELF']);
+            exit;
+        } catch (PDOException $e) {
+            error_log("DB Error: " . $e->getMessage());
+        }
+    }
+}
+
+
+try {
+    $pdo = db();
+    
+    // Seed data if the table is empty
+    $stmt = $pdo->query("SELECT COUNT(*) FROM activity_log");
+    if ($stmt->fetchColumn() == 0) {
+        $seed_data = [
+            ['task' => 'Analyzed quarterly sales report for new market trends.', 'output_type' => 'AI', 'duration' => '00:02:35', 'project' => 'Q1 Sales Analysis'],
+            ['task' => 'Verified data extraction accuracy from scanned invoices.', 'output_type' => 'Human', 'duration' => '00:05:10', 'project' => 'Invoice Processing'],
+            ['task' => 'Generated Python script for automating data cleanup.', 'output_type' => 'AI', 'duration' => '00:03:50', 'project' => 'Data Migration Tool'],
+        ];
+
+        $stmt = $pdo->prepare("INSERT INTO activity_log (task, output_type, duration, project) VALUES (?, ?, ?, ?)");
+        foreach ($seed_data as $row) {
+            $stmt->execute([$row['task'], $row['output_type'], $row['duration'], $row['project']]);
+        }
+    }
+
+    // Fetch data for the log
+    $log_stmt = $pdo->query("SELECT *, DATE_FORMAT(created_at, '%Y-%m-%d %H:%i:%s') as timestamp FROM activity_log ORDER BY created_at DESC");
+    $log_data = $log_stmt->fetchAll();
+
+} catch (PDOException $e) {
+    die("DB ERROR: " . $e->getMessage());
+}
+
+
+// Calculate AI vs Human contribution
+$total_duration_ai = 0;
+$total_duration_human = 0;
+
+foreach ($log_data as $log) {
+    list($h, $m, $s) = explode(':', $log['duration']);
+    $duration_in_seconds = $h * 3600 + $m * 60 + $s;
+    if ($log['output_type'] === 'AI') {
+        $total_duration_ai += $duration_in_seconds;
+    } else {
+        $total_duration_human += $duration_in_seconds;
+    }
+}
+
+$total_duration = $total_duration_ai + $total_duration_human;
+$ai_percentage = $total_duration > 0 ? round(($total_duration_ai / $total_duration) * 100) : 0;
+$human_percentage = $total_duration > 0 ? round(($total_duration_human / $total_duration) * 100) : 0;
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
 ?>
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
+    <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>New Style</title>
+    <title><?php echo htmlspecialchars($_SERVER['PROJECT_NAME'] ?? 'AI Agent Digital Labor'); ?></title>
-<?php
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-// Read project preview data from environment
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
 </head>
 <body>
-  <main>
+
-    <div class="card">
+    <div class="container my-5">
-      <h1>Analyzing your requirements and generating your website…</h1>
+        <header class="mb-5 text-center">
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
+            <h1 class="display-5 fw-bold"><?php echo htmlspecialchars($_SERVER['PROJECT_NAME'] ?? 'AI Agent Digital Labor'); ?></h1>
-        <span class="sr-only">Loading…</span>
+            <p class="lead text-secondary"><?php echo htmlspecialchars($_SERVER['PROJECT_DESCRIPTION'] ?? 'A real-time demonstration of an AI Agent for enterprise automation.'); ?></p>
-      </div>
+            <div id="clock" class="fs-4 text-muted"></div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
+        </header>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
+
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+        <div class="row">
+            <div class="col-md-5">
+                <div class="card" id="chat-container">
+                    <div class="card-header">
+                        AI Agent Chat
+                    </div>
+                    <div class="card-body" id="chat-box">
+                        <div class="message bot-message">
+                            Hello! How can I help you today?
+                        </div>
+                    </div>
+                    <div class="card-footer">
+                        <form id="chat-form">
+                            <div class="input-group">
+                                <input type="text" id="chat-input" class="form-control" placeholder="Type your message..." autocomplete="off">
+                                <button class="btn btn-primary" type="submit" id="chat-submit">Send</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-7">
+                <div class="card mb-4" id="manual-log-container">
+                    <div class="card-header">
+                        Log Human Action
+                    </div>
+                    <div class="card-body">
+                        <form id="manual-log-form">
+                            <div class="row">
+                                <div class="col-md-6 mb-3">
+                                    <label for="action-type" class="form-label">Action Type</label>
+                                    <select id="action-type" class="form-select">
+                                        <option>Opened App</option>
+                                        <option>Browsed URL</option>
+                                        <option>Typing</option>
+                                        <option>Cursor Control</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-6 mb-3">
+                                    <label for="manual-project" class="form-label">Project</label>
+                                    <input type="text" id="manual-project" class="form-control" placeholder="E.g., Q2 Marketing">
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <label for="manual-task" class="form-label">Task Description</label>
+                                <textarea id="manual-task" class="form-control" rows="2" placeholder="Describe the action taken..."></textarea>
+                            </div>
+                            <button class="btn btn-secondary w-100" type="submit" id="manual-log-submit">Log Action</button>
+                        </form>
+                    </div>
+                </div>
+                <main>
+                    <div class="row justify-content-center mb-4">
+                        <div class="col-lg-8">
+                            <div class="card text-center">
+                                <div class="card-header">
+                                    Today's Contribution
+                                </div>
+                                <div class="card-body">
+                                    <div class="row">
+                                        <div class="col">
+                                            <h3 class="fw-bold text-primary"><?php echo $ai_percentage; ?>%</h3>
+                                            <p class="text-secondary mb-0">AI Contribution</p>
+                                        </div>
+                                        <div class="col">
+                                            <h3 class="fw-bold text-secondary"><?php echo $human_percentage; ?>%</h3>
+                                            <p class="text-secondary mb-0">Human Contribution</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <ul class="nav nav-tabs" id="timesheetTabs" role="tablist">
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link active" id="live-activity-tab" data-bs-toggle="tab" data-bs-target="#live-activity" type="button" role="tab" aria-controls="live-activity" aria-selected="true">Live Activity</button>
+                        </li>
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link" id="past-timesheets-tab" data-bs-toggle="tab" data-bs-target="#past-timesheets" type="button" role="tab" aria-controls="past-timesheets" aria-selected="false">Past Daily Timesheets</button>
+                        </li>
+                    </ul>
+
+                    <div class="tab-content" id="timesheetTabsContent">
+                        <div class="tab-pane fade show active" id="live-activity" role="tabpanel" aria-labelledby="live-activity-tab">
+                            <div class="card">
+                                <div class="card-header">
+                                    Live Activity Log
+                                </div>
+                                <div class="table-responsive">
+                                    <table class="table table-striped table-hover mb-0">
+                                        <thead class="table-light">
+                                            <tr>
+                                                <th scope="col">Timestamp</th>
+                                                <th scope="col">Task</th>
+                                                <th scope="col">Project</th>
+                                                <th scope="col" class="text-center">Output Type</th>
+                                                <th scope="col" class="text-end">Duration</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody id="activity-log-body">
+                                            <?php foreach ($log_data as $log): ?>
+                                                <tr>
+                                                    <td><?php echo htmlspecialchars($log['timestamp']); ?></td>
+                                                    <td><?php echo htmlspecialchars($log['task']); ?></td>
+                                                    <td><?php echo htmlspecialchars($log['project']); ?></td>
+                                                    <td class="text-center">
+                                                        <span class="badge rounded-pill <?php echo $log['output_type'] === 'AI' ? 'badge-ai' : 'badge-human'; ?>">
+                                                            <?php echo htmlspecialchars($log['output_type']); ?>
+                                                        </span>
+                                                    </td>
+                                                    <td class="text-end"><?php echo htmlspecialchars($log['duration']); ?></td>
+                                                </tr>
+                                            <?php endforeach; ?>
+                                            <?php if (empty($log_data)): ?>
+                                                <tr id="empty-log-row">
+                                                    <td colspan="5" class="text-center text-muted">No activity logged yet.</td>
+                                                </tr>
+                                            <?php endif; ?>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <div class="card-footer text-muted">
+                                    Showing <span id="log-count"><?php echo count($log_data); ?></span> most recent events.
+                                </div>
+                            </div>
+                        </div>
+                        <div class="tab-pane fade" id="past-timesheets" role="tabpanel" aria-labelledby="past-timesheets-tab">
+                            <div class="card">
+                                <div class="card-header">
+                                    Past Daily Timesheets
+                                </div>
+                                <div class="card-body">
+                                    <p class="text-center text-muted">Past timesheets will be shown here.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </main>
+            </div>
+        </div>
     </div>
-  </main>
+
-  <footer>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
-  </footer>
 </body>
-</html>
+</html>