chronicle-ai 0.0.1

package/packages/ui/app/actions.ts

@@ -0,0 +1,73 @@
+'use server';
+
+import { enqueueJob, clearQueue, killCurrentJob, getProjectConfigRaw, saveProjectConfig, toggleProjectPaused, killAIActivity, killAllRunningAIActivities } from '../lib/db';
+import { revalidatePath } from 'next/cache';
+
+export async function togglePause(path: string, paused: boolean) {
+    toggleProjectPaused(path, paused);
+    revalidatePath('/');
+}
+
+export async function addProjectAction(formData: FormData) {
+    const projectPath = formData.get('path') as string;
+
+    if (!projectPath) return;
+
+    // Enqueue the job for the Daemon to pick up
+    enqueueJob('system:project_add', { path: projectPath, action: 'add' });
+
+    // Revalidate the page so the list updates eventually (polling handles it too, but this helps)
+    revalidatePath('/');
+}
+
+export async function removeProjectAction(projectPath: string) {
+    if (!projectPath) return;
+
+    // Enqueue the job for the Daemon to remove the project
+    enqueueJob('system:project_remove', { path: projectPath, action: 'remove' });
+
+    // Revalidate the page so the list updates
+    revalidatePath('/');
+}
+
+export async function clearQueueAction() {
+    clearQueue();
+    revalidatePath('/');
+}
+
+export async function killCurrentJobAction() {
+    killCurrentJob();
+    revalidatePath('/');
+}
+
+export async function getConfigAction(projectPath: string): Promise<string | null> {
+    return getProjectConfigRaw(projectPath);
+}
+
+export async function saveConfigAction(projectPath: string, content: string): Promise<boolean> {
+    const success = saveProjectConfig(projectPath, content);
+    if (success) {
+        revalidatePath('/');
+    }
+    return success;
+}
+
+export async function triggerDocUpdate(projectPath: string) {
+    enqueueJob('doc:update', {
+        projectPath,
+        triggerType: 'manual',
+        incremental: true
+    });
+    revalidatePath('/');
+}
+
+export async function killAIActivityAction(activityId: number) {
+    killAIActivity(activityId);
+    revalidatePath('/');
+}
+
+export async function killAllRunningAIActivitiesAction() {
+    const count = killAllRunningAIActivities();
+    revalidatePath('/');
+    return count;
+}

package/packages/ui/app/api/ai-activity/route.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from 'next/server';
+import { getRecentAIActivity } from '../../../lib/db';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+    try {
+        const activities = getRecentAIActivity(30);
+        return NextResponse.json(activities);
+    } catch (error) {
+        console.error('Failed to fetch AI activity:', error);
+        return NextResponse.json([], { status: 500 });
+    }
+}

package/packages/ui/app/globals.css

@@ -0,0 +1,98 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-paper-100 text-black;
+  }
+}
+
+/* Documentation Markdown Styles */
+.markdown-content {
+  @apply text-gray-800 leading-relaxed;
+}
+
+.markdown-content h1 {
+  @apply text-2xl font-bold text-gray-900 border-b border-gray-200 pb-2 mb-4 mt-6;
+}
+
+.markdown-content h2 {
+  @apply text-xl font-bold text-gray-800 border-b border-gray-100 pb-1.5 mb-3 mt-5;
+}
+
+.markdown-content h3 {
+  @apply text-lg font-semibold text-gray-800 mb-2 mt-4;
+}
+
+.markdown-content h4 {
+  @apply text-base font-semibold text-gray-700 mb-2 mt-3;
+}
+
+.markdown-content p {
+  @apply mb-3 text-gray-700;
+}
+
+.markdown-content ul {
+  @apply list-disc list-inside mb-3 space-y-1 text-gray-700;
+}
+
+.markdown-content ol {
+  @apply list-decimal list-inside mb-3 space-y-1 text-gray-700;
+}
+
+.markdown-content li {
+  @apply ml-2;
+}
+
+.markdown-content a {
+  @apply text-blue-600 hover:text-blue-800 underline;
+}
+
+.markdown-content code {
+  @apply bg-gray-100 text-pink-600 px-1.5 py-0.5 rounded text-sm font-mono;
+}
+
+.markdown-content pre {
+  @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-4 text-sm;
+}
+
+.markdown-content pre code {
+  @apply bg-transparent text-gray-100 p-0;
+}
+
+.markdown-content blockquote {
+  @apply border-l-4 border-blue-400 pl-4 italic text-gray-600 my-4 bg-blue-50 py-2 rounded-r;
+}
+
+.markdown-content hr {
+  @apply border-t border-gray-200 my-6;
+}
+
+.markdown-content table {
+  @apply w-full border-collapse mb-4 text-sm;
+}
+
+.markdown-content th {
+  @apply bg-gray-100 border border-gray-200 px-3 py-2 text-left font-semibold text-gray-700;
+}
+
+.markdown-content td {
+  @apply border border-gray-200 px-3 py-2 text-gray-600;
+}
+
+.markdown-content tr:nth-child(even) {
+  @apply bg-gray-50;
+}
+
+.markdown-content img {
+  @apply max-w-full h-auto rounded-lg shadow-sm my-4;
+}
+
+.markdown-content strong {
+  @apply font-semibold text-gray-900;
+}
+
+.markdown-content em {
+  @apply italic;
+}

package/packages/ui/app/layout.tsx

@@ -0,0 +1,29 @@
+import type { Metadata } from 'next'
+import { MermaidInit } from '../components/MermaidInit'
+import './globals.css'
+
+export const metadata: Metadata = {
+    title: 'Chronicle Dashboard',
+    description: 'Living Documentation Agent',
+}
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    return (
+        <html lang="en">
+            <head>
+                <script
+                    src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"
+                    async
+                />
+            </head>
+            <body className="bg-paper-100 text-black font-mono antialiased overflow-hidden h-screen">
+                <MermaidInit />
+                {children}
+            </body>
+        </html>
+    )
+}

package/packages/ui/app/page.tsx

@@ -0,0 +1,109 @@
+import { getStats, getRecentFiles, getJobs, getProjects, getProjectDocs, getProjectConfig, getDocStage, getDocVersions, getActiveDocVersion, getThoughtLogsForVersion, getRecentAIActivity } from '../lib/db';
+import { AutoRefresh } from '../components/AutoRefresh';
+import { ProjectList } from '../components/ProjectList';
+import { FileList } from '../components/FileList';
+import { JobQueueWrapper } from '../components/JobQueueWrapper';
+import { ProjectContentArea } from '../components/ProjectContentArea';
+import { HeaderWithThinking } from '../components/HeaderWithThinking';
+import clsx from 'clsx';
+
+export const dynamic = 'force-dynamic';
+
+export default function Home({ searchParams }: { searchParams: { projectId?: string } }) {
+    let stats, recentFiles, jobs, projects, docs: any[] = [];
+    let triggerConfig: any = null;
+    let docStage: any = null;
+    let docVersions: any[] = [];
+    let activeVersionId: number | null = null;
+    let thoughtLogs: any[] = [];
+    let aiActivities: any[] = [];
+    const activeProjectId = searchParams.projectId;
+    let activeProjectTitle = 'Recent Files';
+    let projectPath: string = '';
+
+    try {
+        projects = getProjects();
+
+        if (activeProjectId) {
+            const project = projects.find(p => String(p.id) === activeProjectId);
+            if (project) {
+                projectPath = project.path;
+                activeProjectTitle = project.path.split('/').pop() || 'Project Files';
+                docs = getProjectDocs(project.path);
+                const config = getProjectConfig(project.path);
+                if (config) {
+                    triggerConfig = config.triggers;
+                }
+
+                // Fetch doc stage (only show if there's an active job)
+                docStage = getDocStage(project.id, project.path);
+
+                // Fetch doc versions and thought logs
+                docVersions = getDocVersions(project.id);
+                const activeVersion = getActiveDocVersion(project.id);
+                if (activeVersion) {
+                    activeVersionId = activeVersion.id;
+                    thoughtLogs = getThoughtLogsForVersion(activeVersion.id);
+                }
+            }
+        }
+
+        recentFiles = getRecentFiles(50, projectPath || undefined);
+        jobs = getJobs(50);
+        aiActivities = getRecentAIActivity(30);
+    } catch (error) {
+        return (
+            <div className="min-h-screen flex items-center justify-center bg-gray-50 text-gray-900 font-mono">
+                <div className="text-center p-8 border border-red-200 bg-red-50 rounded">
+                    <h1 className="text-xl font-bold mb-2 text-red-700">⚠️ Connection Error</h1>
+                    <p className="text-red-500 text-sm">Could not connect to Daemon database.</p>
+                    <p className="text-xs text-gray-500 mt-4 font-mono">{String(error)}</p>
+                    <div className="mt-4">
+                        <AutoRefresh />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <main className="h-screen w-screen flex flex-col bg-white text-gray-900 font-mono overflow-hidden">
+            <AutoRefresh />
+
+            {/* Top Header with Thinking Platform */}
+            <HeaderWithThinking initialActivities={aiActivities} />
+
+            {/* Main Workspace */}
+            <div className="flex-1 flex overflow-hidden">
+                {/* Sidebar: Projects */}
+                <aside className="w-64 border-r border-gray-200 bg-gray-50 flex-none overflow-hidden flex flex-col">
+                    <ProjectList projects={projects} activeProjectId={activeProjectId} />
+                </aside>
+
+                {/* Main Content: Tabs */}
+                <section className="flex-1 flex flex-col overflow-hidden bg-white relative">
+                    <ProjectContentArea
+                        docs={docs}
+                        files={recentFiles}
+                        projectName={activeProjectTitle}
+                        projectPath={projectPath}
+                        hasProject={!!activeProjectId}
+                        triggerConfig={triggerConfig}
+                        docStage={docStage}
+                        isPaused={activeProjectId ? projects.find(p => String(p.id) === activeProjectId)?.is_paused === 1 : false}
+                        docVersions={docVersions}
+                        activeVersionId={activeVersionId}
+                        thoughtLogs={thoughtLogs}
+                    />
+                </section>
+            </div>
+
+            {/* Footer / Job Queue Drawer */}
+            <footer className="border-t border-gray-200 flex-none overflow-hidden">
+                <JobQueueWrapper jobs={jobs} />
+            </footer>
+        </main>
+    );
+}
+
+

package/packages/ui/components/AutoRefresh.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+export function AutoRefresh() {
+    const router = useRouter();
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            router.refresh();
+        }, 2000); // 2s refresh
+
+        return () => clearInterval(interval);
+    }, [router]);
+
+    return null;
+}

package/packages/ui/components/DocumentationViewer.tsx

@@ -0,0 +1,276 @@
+'use client';
+
+import { useState, useRef, useEffect, memo } from 'react';
+import { FileText, FolderOpen, Folder, ChevronRight, ChevronDown, Activity } from 'lucide-react';
+import { clsx } from 'clsx';
+import { VersionSelector } from './VersionSelector';
+import { ThinkingPanel } from './ThinkingPanel';
+
+interface DocFile {
+    name: string;
+    path: string;
+    content: string;
+    type: 'root' | 'docs';
+    relativePath?: string; // Path relative to docs folder
+}
+
+interface FolderNode {
+    name: string;
+    path: string;
+    children: (FolderNode | DocFile)[];
+    isFolder: true;
+}
+
+interface DocVersion {
+    id: number;
+    version_number: number;
+    trigger_type: string;
+    commit_hash: string | null;
+    status: 'draft' | 'pending_review' | 'active' | 'archived';
+    created_at: number;
+}
+
+interface ThoughtLog {
+    doc_path: string;
+    thinking_summary: string;
+}
+
+interface Props {
+    docs: DocFile[];
+    projectName: string;
+    docStage?: { currentStage: number; totalStages: number } | null;
+    versions?: DocVersion[];
+    currentVersionId?: number | null;
+    thoughtLogs?: ThoughtLog[];
+    onVersionChange?: (versionId: number) => void;
+}
+
+// Build folder tree from flat file list
+function buildFolderTree(docs: DocFile[]): (FolderNode | DocFile)[] {
+    const folderDocs = docs.filter(d => d.type === 'docs');
+    const rootDocs = docs.filter(d => d.type === 'root');
+
+    const folderMap = new Map<string, FolderNode>();
+    const tree: (FolderNode | DocFile)[] = [...rootDocs];
+
+    // Sort by path depth (shallower first)
+    folderDocs.sort((a, b) => a.path.split('/').length - b.path.split('/').length);
+
+    for (const doc of folderDocs) {
+        const parts = doc.relativePath?.split('/') || doc.path.split('/docs/').pop()?.split('/') || [];
+
+        if (parts.length === 1) {
+            // Direct child of docs/
+            tree.push(doc);
+        } else {
+            // Nested in subfolder
+            const folderPath = parts.slice(0, -1).join('/');
+
+            // Ensure parent folders exist
+            let currentPath = '';
+            for (let i = 0; i < parts.length - 1; i++) {
+                const folderName = parts[i];
+                const newPath = currentPath ? `${currentPath}/${folderName}` : folderName;
+
+                if (!folderMap.has(newPath)) {
+                    const folder: FolderNode = {
+                        name: folderName,
+                        path: newPath,
+                        children: [],
+                        isFolder: true
+                    };
+                    folderMap.set(newPath, folder);
+
+                    if (currentPath) {
+                        const parent = folderMap.get(currentPath);
+                        if (parent) parent.children.push(folder);
+                    } else {
+                        tree.push(folder);
+                    }
+                }
+                currentPath = newPath;
+            }
+
+            // Add file to its folder
+            const parentFolder = folderMap.get(folderPath);
+            if (parentFolder) {
+                parentFolder.children.push(doc);
+            }
+        }
+    }
+
+    return tree;
+}
+
+function FolderItem({ node, selectedPath, onSelect, depth = 0 }: {
+    node: FolderNode | DocFile;
+    selectedPath: string | null;
+    onSelect: (doc: DocFile) => void;
+    depth?: number;
+}) {
+    const [expanded, setExpanded] = useState(true);
+
+    if ('isFolder' in node) {
+        return (
+            <div>
+                <button
+                    onClick={() => setExpanded(!expanded)}
+                    className="w-full flex items-center gap-1 p-1.5 rounded text-left text-xs hover:bg-gray-100 text-gray-600"
+                    style={{ paddingLeft: `${(depth * 12) + 6}px` }}
+                >
+                    {expanded ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
+                    {expanded ? <FolderOpen size={12} className="text-amber-500" /> : <Folder size={12} className="text-amber-500" />}
+                    <span className="truncate">{node.name}/</span>
+                </button>
+                {expanded && (
+                    <div>
+                        {node.children.map((child, i) => (
+                            <FolderItem
+                                key={'path' in child ? child.path : i}
+                                node={child}
+                                selectedPath={selectedPath}
+                                onSelect={onSelect}
+                                depth={depth + 1}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    return (
+        <button
+            onClick={() => onSelect(node)}
+            className={clsx(
+                "w-full flex items-center gap-2 p-1.5 rounded text-left text-xs transition-colors",
+                selectedPath === node.path
+                    ? "bg-blue-100 text-blue-700"
+                    : "hover:bg-gray-100 text-gray-700"
+            )}
+            style={{ paddingLeft: `${(depth * 12) + 6}px` }}
+        >
+            <FileText size={12} />
+            <span className="truncate">{node.name}</span>
+        </button>
+    );
+}
+
+const DocContent = memo(function DocContent({ content, path }: { content: string; path: string }) {
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (contentRef.current) {
+            // Try to render with mermaid if available
+            if (typeof window !== 'undefined' && (window as any).mermaid) {
+                (window as any).mermaid.run({
+                    nodes: contentRef.current.querySelectorAll('.mermaid')
+                });
+            }
+        }
+    }, [content]);
+
+    return (
+        <div className="prose prose-sm max-w-none" ref={contentRef}>
+            <div className="text-[10px] text-gray-400 mb-2 font-mono">{path}</div>
+            <div
+                className="markdown-content text-sm leading-relaxed"
+                dangerouslySetInnerHTML={{ __html: content }}
+            />
+        </div>
+    );
+});
+
+export function DocumentationViewer({
+    docs,
+    projectName,
+    docStage,
+    versions = [],
+    currentVersionId = null,
+    thoughtLogs = [],
+    onVersionChange
+}: Props) {
+    const [selectedDoc, setSelectedDoc] = useState<DocFile | null>(docs[0] || null);
+
+    // Get thinking summary for selected doc
+    const currentThought = selectedDoc
+        ? thoughtLogs.find(t => selectedDoc.path.includes(t.doc_path) || t.doc_path.includes(selectedDoc.name))?.thinking_summary
+        : null;
+
+    const folderTree = buildFolderTree(docs);
+
+    return (
+        <div className="flex h-full">
+            {/* Doc Sidebar */}
+            <div className="w-52 border-r border-gray-200 bg-gray-50 flex-none overflow-hidden flex flex-col">
+                <div className="p-2 border-b border-gray-200 bg-gray-100 flex items-center justify-between">
+                    <h3 className="text-[10px] font-bold uppercase tracking-wider text-gray-500">Documentation</h3>
+                    {versions.length > 0 && onVersionChange && (
+                        <VersionSelector
+                            versions={versions}
+                            currentVersionId={currentVersionId}
+                            onVersionChange={onVersionChange}
+                        />
+                    )}
+                </div>
+
+                {/* Stage Progress */}
+                {docStage && docStage.currentStage > 0 && (
+                    <div className="p-2 border-b border-gray-200 bg-blue-50">
+                        <div className="flex items-center gap-1 text-[10px] text-blue-600 mb-1">
+                            <Activity size={10} />
+                            <span>Stage {docStage.currentStage}/{docStage.totalStages}</span>
+                        </div>
+                        <div className="h-1 bg-blue-200 rounded-full overflow-hidden">
+                            <div
+                                className="h-full bg-blue-500 transition-all"
+                                style={{ width: `${(docStage.currentStage / docStage.totalStages) * 100}%` }}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                {/* Folder Tree */}
+                <div className="flex-1 overflow-y-auto p-1">
+                    {folderTree.map((node, i) => (
+                        <FolderItem
+                            key={'path' in node ? node.path : i}
+                            node={node}
+                            selectedPath={selectedDoc?.path || null}
+                            onSelect={setSelectedDoc}
+                        />
+                    ))}
+
+                    {docs.length === 0 && (
+                        <div className="p-4 text-center text-xs text-gray-400">
+                            No documentation yet.
+                            <br />
+                            <span className="text-[10px]">Run `chronicle init`</span>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Doc Content */}
+            <div className="flex-1 overflow-hidden flex flex-col bg-white">
+                <div className="flex-1 overflow-auto p-4">
+                    {selectedDoc ? (
+                        <DocContent content={selectedDoc.content} path={selectedDoc.path} />
+                    ) : (
+                        <div className="h-full flex items-center justify-center text-gray-400 text-sm">
+                            Select a document to view
+                        </div>
+                    )}
+                </div>
+
+                {/* Chain of Thought Panel */}
+                {selectedDoc && (
+                    <ThinkingPanel
+                        thinkingSummary={currentThought || null}
+                        docPath={selectedDoc.path}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}

package/packages/ui/components/FileList.tsx

@@ -0,0 +1,69 @@
+import { FileText, Calendar, Clock } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+
+interface FileRecord {
+    id: number;
+    path: string;
+    last_modified: number;
+}
+
+export function FileList({ files, title }: { files: FileRecord[], title?: string }) {
+    return (
+        <div className="flex flex-col h-full bg-white">
+            <div className="px-4 py-3 border-b border-gray-100 bg-white flex items-center justify-between flex-none">
+                <h2 className="text-xs font-bold uppercase tracking-wider text-gray-500 flex items-center gap-2">
+                    <FileText size={14} />
+                    <span>{title || 'Recent Files'}</span>
+                </h2>
+                <span className="bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded text-[10px] font-mono">{files.length} items</span>
+            </div>
+
+            <div className="flex-1 overflow-y-auto">
+                <table className="w-full text-left border-collapse">
+                    <thead className="text-[10px] text-gray-400 uppercase font-medium bg-gray-50/50 sticky top-0 backdrop-blur-sm z-10">
+                        <tr>
+                            <th className="px-4 py-2 font-medium bg-gray-50">Name</th>
+                            <th className="px-4 py-2 font-medium hidden md:table-cell bg-gray-50">Location</th>
+                            <th className="px-4 py-2 font-medium text-right bg-gray-50">Last Modified</th>
+                        </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-50">
+                        {files.map(file => (
+                            <tr key={file.id} className="group hover:bg-blue-50/50 transition-colors cursor-default">
+                                <td className="px-4 py-2.5">
+                                    <div className="flex items-center gap-2.5">
+                                        <FileText size={14} className="text-gray-400 group-hover:text-blue-500 transition-colors" />
+                                        <span className="font-mono text-xs text-gray-700 font-medium group-hover:text-blue-700">
+                                            {file.path.split('/').pop()}
+                                        </span>
+                                    </div>
+                                </td>
+                                <td className="px-4 py-2.5 hidden md:table-cell">
+                                    <div className="font-mono text-[10px] text-gray-400 truncate max-w-[300px]" title={file.path}>
+                                        {file.path}
+                                    </div>
+                                </td>
+                                <td className="px-4 py-2.5 text-right">
+                                    <div className="flex items-center justify-end gap-1.5 text-[10px] text-gray-400 font-mono" suppressHydrationWarning>
+                                        <Clock size={10} />
+                                        {formatDistanceToNow(file.last_modified, { addSuffix: true })}
+                                    </div>
+                                </td>
+                            </tr>
+                        ))}
+                        {files.length === 0 && (
+                            <tr>
+                                <td colSpan={3}>
+                                    <div className="flex flex-col items-center justify-center p-12 text-gray-300 gap-2">
+                                        <FileText size={32} strokeWidth={1} />
+                                        <span className="text-xs font-mono">No files found</span>
+                                    </div>
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}