feat: add theme system, branding, and task logging

- Add light/dark/system theme toggle in settings
- Add DearDiary.io branding in navbar
- Add task logging for journal generation with request/response
- Rename project from TotalRecall to DearDiary
- Update Docker configuration

frontend/src/pages/Journal.tsx

@@ -1,15 +1,19 @@
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { api, Journal } from '../lib/api';
+import { api, Journal, Task } from '../lib/api';
 
 export default function JournalPage() {
   const { date } = useParams<{ date: string }>();
   const [journal, setJournal] = useState<Journal | null>(null);
+  const [tasks, setTasks] = useState<Task[]>([]);
   const [loading, setLoading] = useState(true);
   const [generating, setGenerating] = useState(false);
 
   useEffect(() => {
-    if (date) loadJournal();
+    if (date) {
+      loadJournal();
+      loadTasks();
+    }
   }, [date]);
 
   const loadJournal = async () => {
@@ -22,12 +26,21 @@ export default function JournalPage() {
     setLoading(false);
   };
 
+  const loadTasks = async () => {
+    if (!date) return;
+    const res = await api.getJournalTasks(date);
+    if (res.data) {
+      setTasks(res.data);
+    }
+  };
+
   const handleGenerate = async () => {
     if (!date) return;
     setGenerating(true);
     const res = await api.generateJournal(date);
     if (res.data) {
-      setJournal(res.data);
+      setJournal(res.data.journal);
+      setTasks(prev => [res.data!.task, ...prev]);
     }
     setGenerating(false);
   };
@@ -81,6 +94,63 @@ export default function JournalPage() {
           </div>
         </div>
       )}
+
+      {tasks.length > 0 && (
+        <div className="mt-8">
+          <h2 className="text-lg font-medium mb-4">Generation History</h2>
+          <div className="space-y-3">
+            {tasks.map(task => (
+              <details key={task.id} className="bg-slate-900 rounded-lg border border-slate-800">
+                <summary className="p-4 cursor-pointer flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <span className={`w-2 h-2 rounded-full ${
+                      task.status === 'completed' ? 'bg-green-500' :
+                      task.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500'
+                    }`} />
+                    <span className="font-medium">
+                      {task.provider.charAt(0).toUpperCase() + task.provider.slice(1)}
+                      {task.model && ` - ${task.model}`}
+                    </span>
+                    <span className="text-sm text-slate-400">
+                      {new Date(task.createdAt).toLocaleString()}
+                    </span>
+                  </div>
+                  <span className={`text-xs px-2 py-1 rounded ${
+                    task.status === 'completed' ? 'bg-green-500/20 text-green-400' :
+                    task.status === 'failed' ? 'bg-red-500/20 text-red-400' : 'bg-yellow-500/20 text-yellow-400'
+                  }`}>
+                    {task.status}
+                  </span>
+                </summary>
+                <div className="px-4 pb-4 space-y-3">
+                  {task.error && (
+                    <div className="bg-red-500/10 border border-red-500/20 rounded p-3">
+                      <p className="text-sm text-red-400 font-medium mb-1">Error:</p>
+                      <pre className="text-sm text-red-300 whitespace-pre-wrap">{task.error}</pre>
+                    </div>
+                  )}
+                  {task.request && (
+                    <div>
+                      <p className="text-sm text-slate-400 font-medium mb-1">Request:</p>
+                      <pre className="bg-slate-950 rounded p-3 text-xs text-slate-300 overflow-x-auto max-h-64">
+                        {JSON.stringify(JSON.parse(task.request), null, 2)}
+                      </pre>
+                    </div>
+                  )}
+                  {task.response && (
+                    <div>
+                      <p className="text-sm text-slate-400 font-medium mb-1">Response:</p>
+                      <pre className="bg-slate-950 rounded p-3 text-xs text-slate-300 overflow-x-auto max-h-64">
+                        {JSON.stringify(JSON.parse(task.response), null, 2)}
+                      </pre>
+                    </div>
+                  )}
+                </div>
+              </details>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 }