From e2e5d7e5fab8a40fd7932f02dba65aea652f4a01 Mon Sep 17 00:00:00 2001
From: Birdup <34012548+birdup000@users.noreply.github.com>
Date: Sat, 21 Dec 2024 23:21:02 -0600
Subject: [PATCH] checkpoint

---
 app/components/AIAssistantPanel.tsx    |  235 +++++
 app/components/LoadingScreen.tsx       |   16 +
 app/components/LoginForm.tsx           |   48 +-
 app/components/RuleForm.tsx            |  280 ++++++
 app/components/TaskAnalytics.tsx       |  127 +++
 app/components/TaskAttachments.tsx     |  199 ++++
 app/components/TaskAutomation.tsx      |  278 ++++++
 app/components/TaskComments.tsx        |  153 +++
 app/components/TaskDependencies.tsx    |  197 ++++
 app/components/TaskDependencyGraph.tsx |  246 +++++
 app/components/TaskDetailsPanel.tsx    |  282 ++++++
 app/components/TaskHistory.tsx         |  143 +++
 app/components/TaskLabels.tsx          |  238 +++++
 app/components/TaskNotifications.tsx   |  222 +++++
 app/components/TaskPanel.tsx           | 1210 ++++--------------------
 app/components/TaskPriorityMatrix.tsx  |  169 ++++
 app/components/TaskProgress.tsx        |  168 ++++
 app/components/TaskRecurrence.tsx      |  233 +++++
 app/components/TaskTimer.tsx           |  196 ++++
 app/hooks/useAIAssistant.ts            |  165 ++++
 app/page.tsx                           |   29 +-
 app/providers/AuthProvider.tsx         |   41 +-
 app/tasks/page.tsx                     |   27 +
 app/types/task.ts                      |   29 +
 app/utils/auth.ts                      |  150 +--
 package-lock.json                      |  719 ++++++++++++++
 package.json                           |   62 +-
 27 files changed, 4756 insertions(+), 1106 deletions(-)
 create mode 100644 app/components/AIAssistantPanel.tsx
 create mode 100644 app/components/LoadingScreen.tsx
 create mode 100644 app/components/RuleForm.tsx
 create mode 100644 app/components/TaskAnalytics.tsx
 create mode 100644 app/components/TaskAttachments.tsx
 create mode 100644 app/components/TaskAutomation.tsx
 create mode 100644 app/components/TaskComments.tsx
 create mode 100644 app/components/TaskDependencies.tsx
 create mode 100644 app/components/TaskDependencyGraph.tsx
 create mode 100644 app/components/TaskDetailsPanel.tsx
 create mode 100644 app/components/TaskHistory.tsx
 create mode 100644 app/components/TaskLabels.tsx
 create mode 100644 app/components/TaskNotifications.tsx
 create mode 100644 app/components/TaskPriorityMatrix.tsx
 create mode 100644 app/components/TaskProgress.tsx
 create mode 100644 app/components/TaskRecurrence.tsx
 create mode 100644 app/components/TaskTimer.tsx
 create mode 100644 app/hooks/useAIAssistant.ts
 create mode 100644 app/tasks/page.tsx

diff --git a/app/components/AIAssistantPanel.tsx b/app/components/AIAssistantPanel.tsx
new file mode 100644
index 0000000..f30be40
--- /dev/null
+++ b/app/components/AIAssistantPanel.tsx
@@ -0,0 +1,235 @@
+"use client";
+
+import React, { useState } from 'react';
+import { useAIAssistant } from '../hooks/useAIAssistant';
+import { Task } from '../types/task';
+
+interface AIAssistantPanelProps {
+  backendUrl: string;
+  authToken: string;
+  onTaskSuggestion: (task: Partial<Task>) => void;
+  onTaskOptimization: (taskIds: string[]) => void;
+  tasks: Task[];
+  selectedTask: Task | null;
+  className?: string;
+}
+
+const AIAssistantPanel: React.FC<AIAssistantPanelProps> = ({
+  backendUrl,
+  authToken,
+  onTaskSuggestion,
+  onTaskOptimization,
+  tasks,
+  selectedTask,
+  className = '',
+}) => {
+  const [context, setContext] = useState('');
+  const [suggestions, setSuggestions] = useState<any[]>([]);
+  const [analysis, setAnalysis] = useState<any>(null);
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const {
+    isProcessing,
+    error,
+    selectedAgent,
+    setSelectedAgent,
+    generateTaskSuggestions,
+    optimizeTaskOrder,
+    analyzeTaskProgress,
+    generateSubtasks,
+  } = useAIAssistant({ backendUrl, authToken });
+
+  const handleGenerateSuggestions = async () => {
+    const result = await generateTaskSuggestions(context);
+    setSuggestions(result);
+  };
+
+  const handleOptimizeOrder = async () => {
+    const result = await optimizeTaskOrder(tasks);
+    if (result) {
+      onTaskOptimization(result);
+    }
+  };
+
+  const handleAnalyzeTask = async () => {
+    if (!selectedTask) return;
+    const result = await analyzeTaskProgress(selectedTask);
+    setAnalysis(result);
+  };
+
+  const handleGenerateSubtasks = async () => {
+    if (!selectedTask) return;
+    const result = await generateSubtasks(selectedTask);
+    if (result) {
+      onTaskSuggestion({ ...selectedTask, subtasks: result.subtasks });
+    }
+  };
+
+  return (
+    <div 
+      className={`bg-[#1E1E1E] text-white rounded-lg shadow-lg transition-all duration-300 ease-in-out ${className} ${
+        isExpanded ? 'w-80' : 'w-12'
+      }`}
+    >
+      <div className="p-4 border-b border-gray-700 flex items-center justify-between">
+        <h3 className={`font-semibold ${isExpanded ? '' : 'hidden'}`}>AI Assistant</h3>
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="p-1 hover:bg-gray-700 rounded transition-colors"
+          aria-label={isExpanded ? 'Collapse panel' : 'Expand panel'}
+        >
+          {isExpanded ? '←' : '→'}
+        </button>
+      </div>
+
+      {isExpanded && (
+        <div className="p-4 space-y-6">
+          {error && (
+            <div className="bg-red-900/50 text-red-200 p-3 rounded-md text-sm">
+              {error}
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <label className="block text-sm font-medium text-gray-300">
+              AI Agent
+            </label>
+            <select
+              value={selectedAgent}
+              onChange={(e) => setSelectedAgent(e.target.value)}
+              className="w-full px-3 py-2 bg-[#2A2A2A] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            >
+              <option value="">Select an agent</option>
+              <option value="gpt-4">GPT-4</option>
+              <option value="claude">Claude</option>
+            </select>
+          </div>
+
+          <div className="space-y-2">
+            <label className="block text-sm font-medium text-gray-300">
+              Context
+            </label>
+            <textarea
+              value={context}
+              onChange={(e) => setContext(e.target.value)}
+              className="w-full px-3 py-2 bg-[#2A2A2A] rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              rows={3}
+              placeholder="Describe your current work context..."
+            />
+            <button
+              onClick={handleGenerateSuggestions}
+              disabled={isProcessing || !selectedAgent}
+              className="w-full px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 rounded-md transition-colors"
+            >
+              {isProcessing ? 'Generating...' : 'Generate Task Suggestions'}
+            </button>
+          </div>
+
+          {suggestions.length > 0 && (
+            <div className="space-y-2">
+              <h4 className="font-medium text-gray-300">Suggestions</h4>
+              <div className="space-y-2 max-h-60 overflow-y-auto">
+                {suggestions.map((suggestion, index) => (
+                  <div
+                    key={index}
+                    className="p-3 bg-[#2A2A2A] rounded-md cursor-pointer hover:bg-[#333333] transition-colors"
+                    onClick={() => onTaskSuggestion(suggestion)}
+                  >
+                    <div className="font-medium">{suggestion.title}</div>
+                    <div className="text-sm text-gray-400 mt-1">
+                      {suggestion.description}
+                    </div>
+                    <div className="flex items-center gap-2 mt-2 text-sm">
+                      <span className={`px-2 py-0.5 rounded-full ${
+                        suggestion.priority === 'high'
+                          ? 'bg-red-900/50 text-red-200'
+                          : suggestion.priority === 'medium'
+                          ? 'bg-yellow-900/50 text-yellow-200'
+                          : 'bg-green-900/50 text-green-200'
+                      }`}>
+                        {suggestion.priority}
+                      </span>
+                      <span className="text-gray-400">
+                        ~{suggestion.estimatedTime} min
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {selectedTask && (
+            <div className="space-y-4">
+              <div className="border-t border-gray-700 pt-4">
+                <h4 className="font-medium text-gray-300 mb-2">Selected Task Actions</h4>
+                <div className="space-y-2">
+                  <button
+                    onClick={handleAnalyzeTask}
+                    disabled={isProcessing || !selectedAgent}
+                    className="w-full px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 rounded-md transition-colors"
+                  >
+                    Analyze Progress
+                  </button>
+                  <button
+                    onClick={handleGenerateSubtasks}
+                    disabled={isProcessing || !selectedAgent}
+                    className="w-full px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 rounded-md transition-colors"
+                  >
+                    Generate Subtasks
+                  </button>
+                </div>
+              </div>
+
+              {analysis && (
+                <div className="space-y-2">
+                  <h4 className="font-medium text-gray-300">Analysis</h4>
+                  <div className="p-3 bg-[#2A2A2A] rounded-md space-y-3 max-h-60 overflow-y-auto">
+                    <div>
+                      <div className="text-sm font-medium text-gray-400">Progress</div>
+                      <div>{analysis.progressAnalysis}</div>
+                    </div>
+                    <div>
+                      <div className="text-sm font-medium text-gray-400">Potential Blockers</div>
+                      <ul className="list-disc list-inside">
+                        {analysis.potentialBlockers.map((blocker: string, index: number) => (
+                          <li key={index}>{blocker}</li>
+                        ))}
+                      </ul>
+                    </div>
+                    <div>
+                      <div className="text-sm font-medium text-gray-400">Recommendations</div>
+                      <ul className="list-disc list-inside">
+                        {analysis.recommendations.map((rec: string, index: number) => (
+                          <li key={index}>{rec}</li>
+                        ))}
+                      </ul>
+                    </div>
+                    <div>
+                      <div className="text-sm font-medium text-gray-400">Estimated Time to Completion</div>
+                      <div>{analysis.estimatedTimeToCompletion} minutes</div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {tasks.length > 1 && (
+            <div className="border-t border-gray-700 pt-4">
+              <button
+                onClick={handleOptimizeOrder}
+                disabled={isProcessing || !selectedAgent}
+                className="w-full px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 rounded-md transition-colors"
+              >
+                Optimize Task Order
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AIAssistantPanel;
diff --git a/app/components/LoadingScreen.tsx b/app/components/LoadingScreen.tsx
new file mode 100644
index 0000000..7e07809
--- /dev/null
+++ b/app/components/LoadingScreen.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import React from 'react';
+
+const LoadingScreen = () => {
+  return (
+    <div className="fixed inset-0 bg-[#111111] flex items-center justify-center z-50">
+      <div className="text-center">
+        <div className="text-2xl font-bold text-white mb-4">Loading...</div>
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500 mx-auto"></div>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingScreen;
diff --git a/app/components/LoginForm.tsx b/app/components/LoginForm.tsx
index 3f2eaee..38dfa0a 100644
--- a/app/components/LoginForm.tsx
+++ b/app/components/LoginForm.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { useRouter } from 'next/navigation';
 import { useAuthContext } from '../providers/AuthProvider';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Label } from './ui/label';
+import LoadingScreen from './LoadingScreen';
 import {
   Card,
   CardContent,
@@ -15,28 +15,47 @@ import {
 const LoginForm = () => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [showLoadingScreen, setShowLoadingScreen] = useState(false);
   const { loginUser, continueWithoutAuth } = useAuthContext();
-  const router = useRouter();
 
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
+    setIsLoading(true);
     try {
-      const response = await loginUser(username, password);
-      if (response.success) {
-        router.push('/');
+      const result = await loginUser(username, password);
+      if (result.success) {
+        setShowLoadingScreen(true);
       }
     } catch (error: any) {
       console.error('Login failed', error);
+    } finally {
+      setIsLoading(false);
     }
   };
 
   const handleSkipAuth = async () => {
-    const result = await continueWithoutAuth();
-    if (result.success) {
-      router.push('/');
+    setIsLoading(true);
+    try {
+      const result = await continueWithoutAuth();
+      console.log('Continue without auth result:', result);
+      if (result.success) {
+        setShowLoadingScreen(true);
+        // Keep loading screen visible during transition
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      } else {
+        throw new Error(result.message);
+      }
+    } catch (error) {
+      console.error('Error in handleSkipAuth:', error);
+      setIsLoading(false);
     }
   };
 
+  if (showLoadingScreen) {
+    return <LoadingScreen />;
+  }
+
   return (
     <Card className="w-[350px] border border-gray-700">
       <CardHeader>
@@ -53,6 +72,7 @@ const LoginForm = () => {
               value={username}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUsername(e.target.value)}
               required
+              disabled={isLoading}
             />
           </div>
           <div className="space-y-2">
@@ -63,17 +83,25 @@ const LoginForm = () => {
               value={password}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
               required
+              disabled={isLoading}
             />
           </div>
           <div className="space-y-2">
-            <Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700">Login</Button>
+            <Button 
+              type="submit" 
+              className="w-full bg-blue-600 hover:bg-blue-700"
+              disabled={isLoading}
+            >
+              {isLoading ? 'Loading...' : 'Login'}
+            </Button>
             <Button 
               type="button" 
               variant="outline" 
               className="w-full border-gray-700 hover:bg-gray-800"
               onClick={handleSkipAuth}
+              disabled={isLoading}
             >
-              Continue without Login
+              {isLoading ? 'Loading...' : 'Continue without Login'}
             </Button>
           </div>
         </form>
diff --git a/app/components/RuleForm.tsx b/app/components/RuleForm.tsx
new file mode 100644
index 0000000..b6bdedb
--- /dev/null
+++ b/app/components/RuleForm.tsx
@@ -0,0 +1,280 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Task } from '../types/task';
+
+interface RuleFormProps {
+  onSubmit: (rule: {
+    name: string;
+    condition: {
+      field: keyof Task;
+      operator: 'equals' | 'contains' | 'greater_than' | 'less_than';
+      value: any;
+    };
+    action: {
+      type: 'update_status' | 'update_priority' | 'assign_to' | 'add_tag';
+      value: any;
+    };
+  }) => void;
+  onCancel: () => void;
+}
+
+const RuleForm: React.FC<RuleFormProps> = ({ onSubmit, onCancel }) => {
+  const [name, setName] = useState('');
+  const [conditionField, setConditionField] = useState<keyof Task>('status');
+  const [conditionOperator, setConditionOperator] = useState<'equals' | 'contains' | 'greater_than' | 'less_than'>('equals');
+  const [conditionValue, setConditionValue] = useState('');
+  const [actionType, setActionType] = useState<'update_status' | 'update_priority' | 'assign_to' | 'add_tag'>('update_status');
+  const [actionValue, setActionValue] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit({
+      name,
+      condition: {
+        field: conditionField,
+        operator: conditionOperator,
+        value: conditionValue,
+      },
+      action: {
+        type: actionType,
+        value: actionValue,
+      },
+    });
+  };
+
+  const taskFields: { value: keyof Task; label: string }[] = [
+    { value: 'status', label: 'Status' },
+    { value: 'priority', label: 'Priority' },
+    { value: 'progress', label: 'Progress' },
+    { value: 'dueDate', label: 'Due Date' },
+  ];
+
+  const operators = [
+    { value: 'equals', label: 'Equals' },
+    { value: 'contains', label: 'Contains' },
+    { value: 'greater_than', label: 'Greater Than' },
+    { value: 'less_than', label: 'Less Than' },
+  ];
+
+  const actionTypes = [
+    { value: 'update_status', label: 'Update Status' },
+    { value: 'update_priority', label: 'Update Priority' },
+    { value: 'assign_to', label: 'Assign To' },
+    { value: 'add_tag', label: 'Add Tag' },
+  ];
+
+  const renderValueInput = () => {
+    switch (conditionField) {
+      case 'status':
+        return (
+          <select
+            value={conditionValue}
+            onChange={(e) => setConditionValue(e.target.value)}
+            className="w-full px-3 py-2 bg-[#2A2A2A] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          >
+            <option value="">Select Status</option>
+            <option value="todo">To Do</option>
+            <option value="in-progress">In Progress</option>
+            <option value="done">Done</option>
+          </select>
+        );
+      case 'priority':
+        return (
+          <select
+            value={conditionValue}
+            onChange={(e) => setConditionValue(e.target.value)}
+            className="w-full px-3 py-2 bg-[#2A2A2A] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          >
+            <option value="">Select Priority</option>
+            <option value="low">Low</option>
+            <option value="medium">Medium</option>
+            <option value="high">High</option>
+          </select>
+        );
+      case 'progress':
+        return (
+          <input
+            type="number"
+            min="0"
+            max="100"
+            value={conditionValue}
+            onChange={(e) => setConditionValue(e.target.value)}
+            className="w-full px-3 py-2 bg-[#2A2A2A] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            placeholder="Enter progress value (0-100)"
+          />
+        );
+      case 'dueDate':
+        return (
+          <input
+            type="datetime-local"
+            value={conditionValue}
+            onChange={(e) => setConditionValue(e.target.value)}
+            className="w-full px-3 py-2 bg-[#2A2A2A] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          />
+        );
+      default:
+        return (
+          <input
+            type="text"
+            value={conditionValue}
+            onChange={(e) => setConditionValue(e.target.value)}
+            className="w-full px-3 py-2 bg-[#2A2A2A] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            placeholder="Enter value"
+          />
+        );
+    }
+  };
+
+  const renderActionValueInput = () => {
+    switch (actionType) {
+      case 'update_status':
+        return (
+          <select
+            value={actionValue}
+            onChange={(e) => setActionValue(e.target.value)}
+            className="w-full px-3 py-2 bg-[#2A2A2A] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          >
+            <option value="">Select Status</option>
+            <option value="todo">To Do</option>
+            <option value="in-progress">In Progress</option>
+            <option value="done">Done</option>
+          </select>
+        );
+      case 'update_priority':
+        return (
+          <select
+            value={actionValue}
+            onChange={(e) => setActionValue(e.target.value)}
+            className="w-full px-3 py-2 bg-[#2A2A2A] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          >
+            <option value="">Select Priority</option>
+            <option value="low">Low</option>
+            <option value="medium">Medium</option>
+            <option value="high">High</option>
+          </select>
+        );
+      default:
+        return (
+          <input
+            type="text"
+            value={actionValue}
+            onChange={(e) => setActionValue(e.target.value)}
+            className="w-full px-3 py-2 bg-[#2A2A2A] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            placeholder="Enter value"
+          />
+        );
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-1">
+          Rule Name
+        </label>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="w-full px-3 py-2 bg-[#2A2A2A] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          placeholder="Enter rule name"
+          required
+        />
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-medium">Condition</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Field
+            </label>
+            <select
+              value={conditionField}
+              onChange={(e) => setConditionField(e.target.value as keyof Task)}
+              className="w-full px-3 py-2 bg-[#2A2A2A] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            >
+              {taskFields.map((field) => (
+                <option key={field.value} value={field.value}>
+                  {field.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Operator
+            </label>
+            <select
+              value={conditionOperator}
+              onChange={(e) => setConditionOperator(e.target.value as typeof conditionOperator)}
+              className="w-full px-3 py-2 bg-[#2A2A2A] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            >
+              {operators.map((op) => (
+                <option key={op.value} value={op.value}>
+                  {op.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Value
+            </label>
+            {renderValueInput()}
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-medium">Action</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Action Type
+            </label>
+            <select
+              value={actionType}
+              onChange={(e) => setActionType(e.target.value as typeof actionType)}
+              className="w-full px-3 py-2 bg-[#2A2A2A] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            >
+              {actionTypes.map((type) => (
+                <option key={type.value} value={type.value}>
+                  {type.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Value
+            </label>
+            {renderActionValueInput()}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-end gap-4">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded-lg transition-colors"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
+        >
+          Save Rule
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default RuleForm;
diff --git a/app/components/TaskAnalytics.tsx b/app/components/TaskAnalytics.tsx
new file mode 100644
index 0000000..d9458a0
--- /dev/null
+++ b/app/components/TaskAnalytics.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import React from 'react';
+import { Task } from '../types/task';
+
+interface TaskAnalyticsProps {
+  tasks: Task[];
+  className?: string;
+}
+
+const TaskAnalytics: React.FC<TaskAnalyticsProps> = ({ tasks, className = '' }) => {
+  // Calculate analytics
+  const totalTasks = tasks.length;
+  const completedTasks = tasks.filter(task => task.status === 'done').length;
+  const inProgressTasks = tasks.filter(task => task.status === 'in-progress').length;
+  const todoTasks = tasks.filter(task => task.status === 'todo').length;
+  const completionRate = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;
+
+  const highPriorityTasks = tasks.filter(task => task.priority === 'high').length;
+  const overdueTasks = tasks.filter(task => {
+    if (!task.dueDate) return false;
+    return new Date(task.dueDate) < new Date() && task.status !== 'done';
+  }).length;
+
+  const getProductivityScore = () => {
+    if (totalTasks === 0) return 0;
+    
+    const weights = {
+      completed: 1,
+      inProgress: 0.5,
+      onTime: 0.3,
+      highPriority: -0.2
+    };
+
+    const score = (
+      (completedTasks * weights.completed) +
+      (inProgressTasks * weights.inProgress) -
+      (overdueTasks * weights.onTime) -
+      (highPriorityTasks * weights.highPriority)
+    ) / totalTasks * 100;
+
+    return Math.max(0, Math.min(100, score));
+  };
+
+  const productivityScore = getProductivityScore();
+
+  return (
+    <div className={`bg-gray-800 rounded-lg p-6 ${className}`}>
+      <h2 className="text-xl font-semibold mb-6">Task Analytics</h2>
+      
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        <div className="bg-gray-700 rounded-lg p-4">
+          <div className="text-sm text-gray-400">Total Tasks</div>
+          <div className="text-2xl font-bold">{totalTasks}</div>
+        </div>
+        <div className="bg-gray-700 rounded-lg p-4">
+          <div className="text-sm text-gray-400">Completed</div>
+          <div className="text-2xl font-bold text-green-500">{completedTasks}</div>
+        </div>
+        <div className="bg-gray-700 rounded-lg p-4">
+          <div className="text-sm text-gray-400">In Progress</div>
+          <div className="text-2xl font-bold text-yellow-500">{inProgressTasks}</div>
+        </div>
+        <div className="bg-gray-700 rounded-lg p-4">
+          <div className="text-sm text-gray-400">To Do</div>
+          <div className="text-2xl font-bold text-blue-500">{todoTasks}</div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="space-y-4">
+          <h3 className="text-lg font-medium">Progress Overview</h3>
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span>Completion Rate</span>
+              <span>{completionRate.toFixed(1)}%</span>
+            </div>
+            <div className="w-full bg-gray-700 rounded-full h-2">
+              <div
+                className="bg-green-500 rounded-full h-2 transition-all duration-300"
+                style={{ width: `${completionRate}%` }}
+              />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span>Productivity Score</span>
+              <span>{productivityScore.toFixed(1)}%</span>
+            </div>
+            <div className="w-full bg-gray-700 rounded-full h-2">
+              <div
+                className="bg-blue-500 rounded-full h-2 transition-all duration-300"
+                style={{ width: `${productivityScore}%` }}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="text-lg font-medium">Attention Required</h3>
+          <div className="space-y-3">
+            <div className="flex justify-between items-center">
+              <span className="text-sm">High Priority Tasks</span>
+              <span className="px-3 py-1 bg-red-900/50 text-red-200 rounded-full text-sm">
+                {highPriorityTasks}
+              </span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-sm">Overdue Tasks</span>
+              <span className="px-3 py-1 bg-yellow-900/50 text-yellow-200 rounded-full text-sm">
+                {overdueTasks}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {tasks.length === 0 && (
+        <div className="text-center text-gray-400 mt-4">
+          No tasks available. Create some tasks to see analytics.
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TaskAnalytics;
diff --git a/app/components/TaskAttachments.tsx b/app/components/TaskAttachments.tsx
new file mode 100644
index 0000000..a0b0cf9
--- /dev/null
+++ b/app/components/TaskAttachments.tsx
@@ -0,0 +1,199 @@
+"use client";
+
+import React, { useState, useRef } from 'react';
+import { Task } from '../types/task';
+
+interface Attachment {
+  id: string;
+  name: string;
+  type: string;
+  size: number;
+  url: string;
+  uploadedAt: Date;
+  uploadedBy: string;
+}
+
+interface TaskAttachmentsProps {
+  task: Task;
+  onUpdateTask: (task: Task) => void;
+  className?: string;
+}
+
+const TaskAttachments: React.FC<TaskAttachmentsProps> = ({
+  task,
+  onUpdateTask,
+  className = '',
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const formatDate = (date: Date) => {
+    return new Date(date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    
+    const files = Array.from(e.dataTransfer.files);
+    await handleFiles(files);
+  };
+
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    await handleFiles(files);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleFiles = async (files: File[]) => {
+    // In a real application, you would upload these files to your storage service
+    // For now, we'll create mock attachments
+    const newAttachments: Attachment[] = files.map(file => ({
+      id: Date.now().toString() + Math.random(),
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      url: URL.createObjectURL(file), // In production, this would be the uploaded file URL
+      uploadedAt: new Date(),
+      uploadedBy: 'current-user', // Replace with actual user ID from auth
+    }));
+
+    const updatedTask = {
+      ...task,
+      attachments: [...(task.attachments || []), ...newAttachments],
+    };
+
+    onUpdateTask(updatedTask);
+  };
+
+  const handleRemoveAttachment = (attachmentId: string) => {
+    const updatedTask = {
+      ...task,
+      attachments: task.attachments?.filter(a => a.id !== attachmentId) || [],
+    };
+
+    onUpdateTask(updatedTask);
+  };
+
+  const getFileIcon = (type: string) => {
+    if (type.startsWith('image/')) return '🖼️';
+    if (type.startsWith('video/')) return '🎥';
+    if (type.startsWith('audio/')) return '🎵';
+    if (type.includes('pdf')) return '📄';
+    if (type.includes('document') || type.includes('sheet')) return '📝';
+    return '📎';
+  };
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      <div className="flex items-center justify-between mb-2">
+        <h4 className="text-sm font-medium text-gray-300">Attachments</h4>
+        <span className="text-xs text-gray-400">
+          {task.attachments?.length || 0} files
+        </span>
+      </div>
+
+      {/* Upload area */}
+      <div
+        onDragEnter={handleDragEnter}
+        onDragOver={(e) => e.preventDefault()}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors ${
+          isDragging
+            ? 'border-indigo-500 bg-indigo-500/10'
+            : 'border-gray-600 hover:border-gray-500'
+        }`}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          onChange={handleFileSelect}
+          className="hidden"
+        />
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          className="text-sm text-gray-400 hover:text-white"
+        >
+          <div className="text-2xl mb-2">📁</div>
+          <p>Drop files here or click to upload</p>
+          <p className="text-xs mt-1">Maximum file size: 10MB</p>
+        </button>
+      </div>
+
+      {/* Attachments list */}
+      <div className="space-y-2">
+        {task.attachments?.map((attachment) => (
+          <div
+            key={attachment.id}
+            className="flex items-center justify-between p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors group"
+          >
+            <div className="flex items-center gap-3">
+              <span className="text-2xl">{getFileIcon(attachment.type)}</span>
+              <div>
+                <p className="text-sm font-medium">{attachment.name}</p>
+                <div className="flex items-center gap-2 text-xs text-gray-400">
+                  <span>{formatFileSize(attachment.size)}</span>
+                  <span>•</span>
+                  <span>{formatDate(attachment.uploadedAt)}</span>
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <a
+                href={attachment.url}
+                download={attachment.name}
+                className="p-2 text-gray-400 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity"
+                title="Download"
+              >
+                ⬇️
+              </a>
+              <button
+                onClick={() => handleRemoveAttachment(attachment.id)}
+                className="p-2 text-gray-400 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
+                title="Remove"
+              >
+                ×
+              </button>
+            </div>
+          </div>
+        ))}
+
+        {(!task.attachments || task.attachments.length === 0) && (
+          <div className="text-center py-6 text-gray-400">
+            <p>No attachments yet</p>
+            <p className="text-sm">Upload files to share with collaborators</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TaskAttachments;
diff --git a/app/components/TaskAutomation.tsx b/app/components/TaskAutomation.tsx
new file mode 100644
index 0000000..c2dcd31
--- /dev/null
+++ b/app/components/TaskAutomation.tsx
@@ -0,0 +1,278 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { Task } from '../types/task';
+import RuleForm from './RuleForm';
+
+interface AutomationRule {
+  id: string;
+  name: string;
+  condition: {
+    field: keyof Task;
+    operator: 'equals' | 'contains' | 'greater_than' | 'less_than';
+    value: any;
+  };
+  action: {
+    type: 'update_status' | 'update_priority' | 'assign_to' | 'add_tag';
+    value: any;
+  };
+  enabled: boolean;
+}
+
+interface TaskAutomationProps {
+  tasks: Task[];
+  onUpdateTask: (task: Task) => void;
+  className?: string;
+}
+
+const defaultRules: AutomationRule[] = [
+  {
+    id: '1',
+    name: 'High Priority for Overdue Tasks',
+    condition: {
+      field: 'dueDate',
+      operator: 'less_than',
+      value: new Date(),
+    },
+    action: {
+      type: 'update_priority',
+      value: 'high',
+    },
+    enabled: true,
+  },
+  {
+    id: '2',
+    name: 'Auto-assign In Progress',
+    condition: {
+      field: 'progress',
+      operator: 'greater_than',
+      value: 0,
+    },
+    action: {
+      type: 'update_status',
+      value: 'in-progress',
+    },
+    enabled: true,
+  },
+];
+
+const TaskAutomation: React.FC<TaskAutomationProps> = ({
+  tasks,
+  onUpdateTask,
+  className = '',
+}) => {
+  const [rules, setRules] = useState<AutomationRule[]>(defaultRules);
+  const [isAddingRule, setIsAddingRule] = useState(false);
+  const [editingRule, setEditingRule] = useState<AutomationRule | null>(null);
+
+  const evaluateCondition = (task: Task, condition: AutomationRule['condition']) => {
+    const taskValue = task[condition.field];
+
+    // Handle undefined values
+    if (taskValue === undefined) {
+      return false;
+    }
+
+    const conditionValue = condition.value;
+
+    switch (condition.operator) {
+      case 'equals':
+        return taskValue === conditionValue;
+      case 'contains':
+        if (Array.isArray(taskValue)) {
+          return taskValue.includes(conditionValue);
+        }
+        return String(taskValue).includes(String(conditionValue));
+      case 'greater_than':
+        if (condition.field === 'dueDate') {
+          const taskDate = taskValue instanceof Date ? taskValue : new Date(taskValue as string);
+          const compareDate = conditionValue instanceof Date ? conditionValue : new Date(conditionValue);
+          return taskDate > compareDate;
+        }
+        return Number(taskValue) > Number(conditionValue);
+      case 'less_than':
+        if (condition.field === 'dueDate') {
+          const taskDate = taskValue instanceof Date ? taskValue : new Date(taskValue as string);
+          const compareDate = conditionValue instanceof Date ? conditionValue : new Date(conditionValue);
+          return taskDate < compareDate;
+        }
+        return Number(taskValue) < Number(conditionValue);
+      default:
+        return false;
+    }
+  };
+
+  const applyAction = (task: Task, action: AutomationRule['action']): Task => {
+    const updatedTask = { ...task };
+
+    switch (action.type) {
+      case 'update_status':
+        updatedTask.status = action.value as Task['status'];
+        break;
+      case 'update_priority':
+        updatedTask.priority = action.value as Task['priority'];
+        break;
+      case 'assign_to':
+        updatedTask.assignees = [...(updatedTask.assignees || []), action.value];
+        break;
+      case 'add_tag':
+        updatedTask.tags = [...(updatedTask.tags || []), action.value];
+        break;
+    }
+
+    return updatedTask;
+  };
+
+  const processAutomationRules = () => {
+    const enabledRules = rules.filter(rule => rule.enabled);
+    
+    tasks.forEach(task => {
+      let updatedTask = { ...task };
+      let wasUpdated = false;
+
+      enabledRules.forEach(rule => {
+        if (evaluateCondition(updatedTask, rule.condition)) {
+          const newTask = applyAction(updatedTask, rule.action);
+          if (JSON.stringify(newTask) !== JSON.stringify(updatedTask)) {
+            updatedTask = newTask;
+            wasUpdated = true;
+          }
+        }
+      });
+
+      if (wasUpdated) {
+        onUpdateTask(updatedTask);
+      }
+    });
+  };
+
+  useEffect(() => {
+    processAutomationRules();
+  }, [tasks, rules]);
+
+  const handleToggleRule = (ruleId: string) => {
+    setRules(prevRules =>
+      prevRules.map(rule =>
+        rule.id === ruleId ? { ...rule, enabled: !rule.enabled } : rule
+      )
+    );
+  };
+
+  const handleDeleteRule = (ruleId: string) => {
+    setRules(prevRules => prevRules.filter(rule => rule.id !== ruleId));
+  };
+
+  const handleEditRule = (rule: AutomationRule) => {
+    setEditingRule(rule);
+    setIsAddingRule(true);
+  };
+
+  const handleSaveRule = (ruleData: Omit<AutomationRule, 'id' | 'enabled'>) => {
+    if (editingRule) {
+      setRules(prevRules =>
+        prevRules.map(rule =>
+          rule.id === editingRule.id
+            ? { ...rule, ...ruleData }
+            : rule
+        )
+      );
+    } else {
+      const newRule: AutomationRule = {
+        id: Date.now().toString(),
+        ...ruleData,
+        enabled: true,
+      };
+      setRules(prevRules => [...prevRules, newRule]);
+    }
+    setIsAddingRule(false);
+    setEditingRule(null);
+  };
+
+  const formatConditionValue = (condition: AutomationRule['condition']) => {
+    if (condition.field === 'dueDate') {
+      return new Date(condition.value).toLocaleDateString();
+    }
+    return condition.value;
+  };
+
+  return (
+    <div className={`bg-gray-800 rounded-lg p-6 ${className}`}>
+      <div className="flex justify-between items-center mb-6">
+        <h2 className="text-xl font-semibold">Task Automation</h2>
+        <button
+          onClick={() => setIsAddingRule(true)}
+          className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
+        >
+          Add Rule
+        </button>
+      </div>
+
+      <div className="space-y-4">
+        {rules.map(rule => (
+          <div
+            key={rule.id}
+            className="bg-gray-700 rounded-lg p-4 flex items-center justify-between group"
+          >
+            <div className="flex-1">
+              <div className="font-medium">{rule.name}</div>
+              <div className="text-sm text-gray-400 mt-1">
+                When {rule.condition.field} {rule.condition.operator.replace('_', ' ')}{' '}
+                {formatConditionValue(rule.condition)},
+                {' '}{rule.action.type.replace('_', ' ')} to {rule.action.value}
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+              <button
+                onClick={() => handleEditRule(rule)}
+                className="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-white transition-opacity"
+              >
+                Edit
+              </button>
+              <button
+                onClick={() => handleToggleRule(rule.id)}
+                className={`px-3 py-1 rounded-full text-sm ${
+                  rule.enabled
+                    ? 'bg-green-900/50 text-green-200'
+                    : 'bg-gray-600 text-gray-300'
+                }`}
+              >
+                {rule.enabled ? 'Enabled' : 'Disabled'}
+              </button>
+              <button
+                onClick={() => handleDeleteRule(rule.id)}
+                className="text-gray-400 hover:text-red-400"
+              >
+                ×
+              </button>
+            </div>
+          </div>
+        ))}
+
+        {rules.length === 0 && (
+          <div className="text-center text-gray-400 py-8">
+            No automation rules configured. Add a rule to get started.
+          </div>
+        )}
+      </div>
+
+      {isAddingRule && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-gray-800 p-6 rounded-lg w-full max-w-2xl mx-4">
+            <h3 className="text-lg font-medium mb-4">
+              {editingRule ? 'Edit Rule' : 'Add Automation Rule'}
+            </h3>
+            <RuleForm
+              onSubmit={handleSaveRule}
+              onCancel={() => {
+                setIsAddingRule(false);
+                setEditingRule(null);
+              }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TaskAutomation;
diff --git a/app/components/TaskComments.tsx b/app/components/TaskComments.tsx
new file mode 100644
index 0000000..8cba030
--- /dev/null
+++ b/app/components/TaskComments.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Task } from '../types/task';
+import { ActivityLog, Comment } from '../types/collaboration';
+
+interface TaskCommentsProps {
+  task: Task;
+  onUpdateTask: (task: Task) => void;
+  className?: string;
+}
+
+const TaskComments: React.FC<TaskCommentsProps> = ({
+  task,
+  onUpdateTask,
+  className = '',
+}) => {
+  const [newComment, setNewComment] = useState('');
+
+  const formatDate = (date: Date) => {
+    return new Date(date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const handleAddComment = () => {
+    if (!newComment.trim()) return;
+
+    const comment: Comment = {
+      id: Date.now().toString(),
+      taskId: task.id,
+      userId: 'current-user', // Replace with actual user ID from auth
+      content: newComment.trim(),
+      createdAt: new Date(),
+    };
+
+    const activityLogEntry: ActivityLog = {
+      id: Date.now().toString(),
+      taskId: task.id,
+      userId: 'current-user', // Replace with actual user ID from auth
+      action: 'commented',
+      timestamp: new Date(),
+    };
+
+    const updatedTask = {
+      ...task,
+      comments: [...(task.comments || []), comment],
+      activityLog: [...(task.activityLog || []), activityLogEntry],
+    };
+
+    onUpdateTask(updatedTask);
+    setNewComment('');
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleAddComment();
+    }
+  };
+
+  const handleDeleteComment = (commentId: string) => {
+    const updatedTask = {
+      ...task,
+      comments: task.comments?.filter(comment => comment.id !== commentId) || [],
+    };
+    onUpdateTask(updatedTask);
+  };
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      <div className="flex items-center justify-between mb-2">
+        <h4 className="text-sm font-medium text-gray-300">Comments</h4>
+        <span className="text-xs text-gray-400">
+          {task.comments?.length || 0} comments
+        </span>
+      </div>
+
+      {/* Comment input */}
+      <div className="space-y-2">
+        <textarea
+          value={newComment}
+          onChange={(e) => setNewComment(e.target.value)}
+          onKeyPress={handleKeyPress}
+          placeholder="Add a comment... (Press Enter to submit)"
+          className="w-full px-3 py-2 bg-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
+          rows={3}
+        />
+        <div className="flex justify-end">
+          <button
+            onClick={handleAddComment}
+            disabled={!newComment.trim()}
+            className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 rounded-lg transition-colors text-sm"
+          >
+            Add Comment
+          </button>
+        </div>
+      </div>
+
+      {/* Comments list */}
+      <div className="space-y-4">
+        {task.comments?.map((comment) => (
+          <div
+            key={comment.id}
+            className="bg-gray-700 rounded-lg p-4 space-y-2 hover:bg-gray-600 transition-colors"
+          >
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center">
+                  <span className="text-sm">{comment.userId[0]}</span>
+                </div>
+                <div>
+                  <p className="text-sm font-medium">{comment.userId}</p>
+                  <p className="text-xs text-gray-400">
+                    {formatDate(comment.createdAt)}
+                  </p>
+                </div>
+              </div>
+              <div className="relative group">
+                <button className="text-gray-400 hover:text-white p-1">
+                  •••
+                </button>
+                <div className="absolute right-0 mt-1 w-32 bg-gray-800 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
+                  <button
+                    onClick={() => handleDeleteComment(comment.id)}
+                    className="w-full px-4 py-2 text-left text-sm text-red-400 hover:bg-gray-700 rounded-lg"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div className="pl-10">
+              <p className="text-sm whitespace-pre-wrap">{comment.content}</p>
+            </div>
+          </div>
+        ))}
+
+        {(!task.comments || task.comments.length === 0) && (
+          <div className="text-center py-6 text-gray-400">
+            <p>No comments yet</p>
+            <p className="text-sm">Be the first to add a comment!</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TaskComments;
diff --git a/app/components/TaskDependencies.tsx b/app/components/TaskDependencies.tsx
new file mode 100644
index 0000000..aba3f3b
--- /dev/null
+++ b/app/components/TaskDependencies.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Task } from '../types/task';
+
+interface TaskDependenciesProps {
+  task: Task;
+  allTasks: Task[];
+  onUpdateTask: (task: Task) => void;
+  className?: string;
+}
+
+const TaskDependencies: React.FC<TaskDependenciesProps> = ({
+  task,
+  allTasks,
+  onUpdateTask,
+  className = '',
+}) => {
+  const [isAddingDependency, setIsAddingDependency] = useState(false);
+  const [selectedTaskId, setSelectedTaskId] = useState<string>('');
+
+  const availableTasks = allTasks.filter(t => 
+    t.id !== task.id && 
+    !task.dependsOn?.includes(t.id) &&
+    !hasCyclicDependency(t.id)
+  );
+
+  function hasCyclicDependency(taskId: string, visited = new Set<string>()): boolean {
+    if (visited.has(taskId)) return true;
+    visited.add(taskId);
+
+    const dependentTask = allTasks.find(t => t.id === taskId);
+    if (!dependentTask?.dependsOn) return false;
+
+    return dependentTask.dependsOn.some(depId => hasCyclicDependency(depId, new Set(visited)));
+  }
+
+  const handleAddDependency = () => {
+    if (!selectedTaskId) return;
+
+    const updatedDependencies = [...(task.dependsOn || []), selectedTaskId];
+
+    onUpdateTask({
+      ...task,
+      dependsOn: updatedDependencies,
+      activityLog: [
+        ...task.activityLog,
+        {
+          id: Date.now().toString(),
+          taskId: task.id,
+          userId: 'current-user',
+          action: 'updated',
+          timestamp: new Date(),
+        },
+      ],
+    });
+
+    setSelectedTaskId('');
+    setIsAddingDependency(false);
+  };
+
+  const handleRemoveDependency = (dependencyId: string) => {
+    const updatedDependencies = (task.dependsOn || []).filter(id => id !== dependencyId);
+
+    onUpdateTask({
+      ...task,
+      dependsOn: updatedDependencies,
+      activityLog: [
+        ...task.activityLog,
+        {
+          id: Date.now().toString(),
+          taskId: task.id,
+          userId: 'current-user',
+          action: 'updated',
+          timestamp: new Date(),
+        },
+      ],
+    });
+  };
+
+  const getDependentTaskTitle = (taskId: string) => {
+    const dependentTask = allTasks.find(t => t.id === taskId);
+    return dependentTask?.title || 'Unknown Task';
+  };
+
+  const getDependentTaskStatus = (taskId: string): Task['status'] => {
+    const dependentTask = allTasks.find(t => t.id === taskId);
+    return dependentTask?.status || 'todo';
+  };
+
+  const getStatusColor = (status: Task['status']) => {
+    switch (status) {
+      case 'done':
+        return 'bg-green-600';
+      case 'in-progress':
+        return 'bg-yellow-600';
+      case 'todo':
+        return 'bg-gray-600';
+    }
+  };
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      <div className="flex items-center justify-between mb-2">
+        <h4 className="text-sm font-medium text-gray-300">Dependencies</h4>
+        <button
+          onClick={() => setIsAddingDependency(true)}
+          className="text-sm text-indigo-400 hover:text-indigo-300"
+          disabled={availableTasks.length === 0}
+        >
+          Add Dependency
+        </button>
+      </div>
+
+      {isAddingDependency && (
+        <div className="space-y-3 bg-gray-700 rounded-lg p-4">
+          <select
+            value={selectedTaskId}
+            onChange={(e) => setSelectedTaskId(e.target.value)}
+            className="w-full px-3 py-2 bg-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          >
+            <option value="">Select a task...</option>
+            {availableTasks.map((t) => (
+              <option key={t.id} value={t.id}>
+                {t.title}
+              </option>
+            ))}
+          </select>
+          <div className="flex justify-end gap-2">
+            <button
+              onClick={() => setIsAddingDependency(false)}
+              className="px-3 py-1 text-sm text-gray-400 hover:text-white"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleAddDependency}
+              disabled={!selectedTaskId}
+              className="px-3 py-1 text-sm bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 rounded-lg"
+            >
+              Add
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="space-y-2">
+        {task.dependsOn?.map((dependencyId) => (
+          <div
+            key={dependencyId}
+            className="flex items-center justify-between p-3 bg-gray-700 rounded-lg group"
+          >
+            <div className="flex items-center gap-3">
+              <div className={`w-2 h-2 rounded-full ${getStatusColor(getDependentTaskStatus(dependencyId))}`} />
+              <span className="text-sm">{getDependentTaskTitle(dependencyId)}</span>
+            </div>
+            <button
+              onClick={() => handleRemoveDependency(dependencyId)}
+              className="text-gray-400 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
+            >
+              ×
+            </button>
+          </div>
+        ))}
+
+        {(!task.dependsOn || task.dependsOn.length === 0) && (
+          <div className="text-center py-6 text-gray-400">
+            <p>No dependencies</p>
+            <p className="text-sm">Add tasks that need to be completed first</p>
+          </div>
+        )}
+      </div>
+
+      {task.dependsOn && task.dependsOn.length > 0 && (
+        <div className="mt-4">
+          <div className="text-xs text-gray-400">
+            Progress of Dependencies:
+            <div className="mt-2 w-full bg-gray-700 rounded-full h-1.5">
+              <div
+                className="bg-indigo-600 rounded-full h-1.5 transition-all duration-300"
+                style={{
+                  width: `${
+                    (task.dependsOn.filter(id => 
+                      getDependentTaskStatus(id) === 'done'
+                    ).length / task.dependsOn.length) * 100
+                  }%`
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TaskDependencies;
diff --git a/app/components/TaskDependencyGraph.tsx b/app/components/TaskDependencyGraph.tsx
new file mode 100644
index 0000000..18e57d6
--- /dev/null
+++ b/app/components/TaskDependencyGraph.tsx
@@ -0,0 +1,246 @@
+"use client";
+
+import React, { useEffect, useRef } from 'react';
+import { Task } from '../types/task';
+import * as d3 from 'd3';
+
+interface TaskDependencyGraphProps {
+  tasks: Task[];
+  onTaskClick?: (task: Task) => void;
+  className?: string;
+}
+
+interface GraphNode extends d3.SimulationNodeDatum {
+  id: string;
+  title: string;
+  status: Task['status'];
+  priority: Task['priority'];
+  x?: number;
+  y?: number;
+  fx?: number | null;
+  fy?: number | null;
+}
+
+interface GraphLink extends d3.SimulationLinkDatum<GraphNode> {
+  source: string | GraphNode;
+  target: string | GraphNode;
+}
+
+const TaskDependencyGraph: React.FC<TaskDependencyGraphProps> = ({
+  tasks,
+  onTaskClick,
+  className = '',
+}) => {
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    if (!svgRef.current) return;
+
+    // Clear previous graph
+    d3.select(svgRef.current).selectAll('*').remove();
+
+    // Prepare data
+    const nodes: GraphNode[] = tasks.map(task => ({
+      id: task.id,
+      title: task.title,
+      status: task.status,
+      priority: task.priority,
+    }));
+
+    const links: GraphLink[] = tasks.reduce((acc: GraphLink[], task) => {
+      if (task.dependsOn) {
+        task.dependsOn.forEach(dependencyId => {
+          acc.push({
+            source: dependencyId,
+            target: task.id,
+          });
+        });
+      }
+      return acc;
+    }, []);
+
+    // Set up SVG
+    const width = svgRef.current.clientWidth;
+    const height = svgRef.current.clientHeight;
+    const svg = d3.select(svgRef.current);
+
+    // Create arrow marker
+    svg.append('defs')
+      .append('marker')
+      .attr('id', 'arrowhead')
+      .attr('viewBox', '-0 -5 10 10')
+      .attr('refX', 20)
+      .attr('refY', 0)
+      .attr('orient', 'auto')
+      .attr('markerWidth', 6)
+      .attr('markerHeight', 6)
+      .append('path')
+      .attr('d', 'M 0,-5 L 10,0 L 0,5')
+      .attr('fill', '#4B5563');
+
+    // Create simulation
+    const simulation = d3.forceSimulation<GraphNode>(nodes)
+      .force('link', d3.forceLink<GraphNode, GraphLink>(links)
+        .id(d => d.id)
+        .distance(100)
+      )
+      .force('charge', d3.forceManyBody().strength(-200))
+      .force('center', d3.forceCenter(width / 2, height / 2))
+      .force('collision', d3.forceCollide().radius(50));
+
+    // Create container for zoom/pan
+    const container = svg.append('g');
+
+    // Add zoom behavior
+    const zoom = d3.zoom<SVGSVGElement, unknown>()
+      .scaleExtent([0.5, 2])
+      .on('zoom', (event: d3.D3ZoomEvent<SVGSVGElement, unknown>) => {
+        container.attr('transform', event.transform.toString());
+      });
+
+    svg.call(zoom);
+
+    // Create links
+    const link = container.append('g')
+      .selectAll<SVGLineElement, GraphLink>('line')
+      .data(links)
+      .join('line')
+      .attr('stroke', '#4B5563')
+      .attr('stroke-width', 1.5)
+      .attr('marker-end', 'url(#arrowhead)');
+
+    // Create nodes
+    const node = container.append('g')
+      .selectAll<SVGGElement, GraphNode>('g')
+      .data(nodes)
+      .join('g')
+      .attr('cursor', 'pointer');
+
+    // Add drag behavior
+    const drag = d3.drag<SVGGElement, GraphNode>()
+      .on('start', (event: d3.D3DragEvent<SVGGElement, GraphNode, GraphNode>) => {
+        if (!event.active) simulation.alphaTarget(0.3).restart();
+        event.subject.fx = event.subject.x;
+        event.subject.fy = event.subject.y;
+      })
+      .on('drag', (event: d3.D3DragEvent<SVGGElement, GraphNode, GraphNode>) => {
+        event.subject.fx = event.x;
+        event.subject.fy = event.y;
+      })
+      .on('end', (event: d3.D3DragEvent<SVGGElement, GraphNode, GraphNode>) => {
+        if (!event.active) simulation.alphaTarget(0);
+        event.subject.fx = null;
+        event.subject.fy = null;
+      });
+
+    node.call(drag);
+
+    // Add click handler
+    node.on('click', (event: MouseEvent, d: GraphNode) => {
+      const task = tasks.find(t => t.id === d.id);
+      if (task && onTaskClick) {
+        onTaskClick(task);
+      }
+    });
+
+    // Add circles to nodes
+    node.append('circle')
+      .attr('r', 25)
+      .attr('fill', d => getStatusColor(d.status))
+      .attr('stroke', d => getPriorityColor(d.priority))
+      .attr('stroke-width', 3);
+
+    // Add text to nodes
+    node.append('text')
+      .text(d => d.title.slice(0, 15) + (d.title.length > 15 ? '...' : ''))
+      .attr('text-anchor', 'middle')
+      .attr('dy', 35)
+      .attr('fill', 'white')
+      .attr('font-size', '12px');
+
+    // Update positions on simulation tick
+    simulation.on('tick', () => {
+      link
+        .attr('x1', d => (d.source as GraphNode).x ?? 0)
+        .attr('y1', d => (d.source as GraphNode).y ?? 0)
+        .attr('x2', d => (d.target as GraphNode).x ?? 0)
+        .attr('y2', d => (d.target as GraphNode).y ?? 0);
+
+      node
+        .attr('transform', d => `translate(${d.x ?? 0},${d.y ?? 0})`);
+    });
+
+    // Cleanup
+    return () => {
+      simulation.stop();
+    };
+  }, [tasks, onTaskClick]);
+
+  const getStatusColor = (status: Task['status']) => {
+    switch (status) {
+      case 'todo':
+        return '#1F2937';
+      case 'in-progress':
+        return '#374151';
+      case 'done':
+        return '#065F46';
+      default:
+        return '#1F2937';
+    }
+  };
+
+  const getPriorityColor = (priority: Task['priority']) => {
+    switch (priority) {
+      case 'high':
+        return '#DC2626';
+      case 'medium':
+        return '#D97706';
+      case 'low':
+        return '#059669';
+      default:
+        return '#6B7280';
+    }
+  };
+
+  return (
+    <div className={`bg-gray-800 rounded-lg p-6 ${className}`}>
+      <h2 className="text-xl font-semibold mb-4">Task Dependencies</h2>
+      <div className="relative w-full" style={{ height: '400px' }}>
+        <svg
+          ref={svgRef}
+          className="w-full h-full"
+          style={{ background: '#1F2937', borderRadius: '0.5rem' }}
+        />
+      </div>
+      <div className="mt-4 flex flex-wrap gap-4">
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-[#1F2937]" />
+          <span className="text-sm">To Do</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-[#374151]" />
+          <span className="text-sm">In Progress</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-[#065F46]" />
+          <span className="text-sm">Done</span>
+        </div>
+        <div className="border-l border-gray-600 mx-2" />
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full border-2 border-[#DC2626]" />
+          <span className="text-sm">High Priority</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full border-2 border-[#D97706]" />
+          <span className="text-sm">Medium Priority</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full border-2 border-[#059669]" />
+          <span className="text-sm">Low Priority</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskDependencyGraph;
diff --git a/app/components/TaskDetailsPanel.tsx b/app/components/TaskDetailsPanel.tsx
new file mode 100644
index 0000000..7bb43ee
--- /dev/null
+++ b/app/components/TaskDetailsPanel.tsx
@@ -0,0 +1,282 @@
+"use client";
+
+import React from 'react';
+import { Task } from '../types/task';
+import TaskProgress from './TaskProgress';
+import TaskComments from './TaskComments';
+import TaskAttachments from './TaskAttachments';
+import TaskTimer from './TaskTimer';
+import TaskNotifications from './TaskNotifications';
+import TaskRecurrence from './TaskRecurrence';
+import TaskHistory from './TaskHistory';
+import TaskLabels from './TaskLabels';
+import TaskDependencies from './TaskDependencies';
+
+interface TaskDetailsPanelProps {
+  task: Task | null;
+  onClose: () => void;
+  onUpdateTask: (task: Task) => void;
+  allTasks: Task[];
+  className?: string;
+}
+
+const TaskDetailsPanel: React.FC<TaskDetailsPanelProps> = ({
+  task,
+  onClose,
+  onUpdateTask,
+  allTasks,
+  className = '',
+}) => {
+  if (!task) return null;
+
+  const formatDate = (date: Date | undefined) => {
+    if (!date) return 'Not set';
+    return new Date(date).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const handleProgressChange = (value: number) => {
+    onUpdateTask({
+      ...task,
+      progress: value,
+      status: value === 100 ? 'done' : value > 0 ? 'in-progress' : task.status,
+      activityLog: [
+        ...task.activityLog,
+        {
+          id: Date.now().toString(),
+          taskId: task.id,
+          userId: 'current-user',
+          action: 'updated',
+          timestamp: new Date(),
+        },
+      ],
+    });
+  };
+
+  const handleStatusChange = (status: Task['status']) => {
+    onUpdateTask({
+      ...task,
+      status,
+      progress: status === 'done' ? 100 : task.progress,
+      activityLog: [
+        ...task.activityLog,
+        {
+          id: Date.now().toString(),
+          taskId: task.id,
+          userId: 'current-user',
+          action: 'status_changed',
+          timestamp: new Date(),
+        },
+      ],
+    });
+  };
+
+  const handlePriorityChange = (priority: Task['priority']) => {
+    onUpdateTask({
+      ...task,
+      priority,
+      activityLog: [
+        ...task.activityLog,
+        {
+          id: Date.now().toString(),
+          taskId: task.id,
+          userId: 'current-user',
+          action: 'updated',
+          timestamp: new Date(),
+        },
+      ],
+    });
+  };
+
+  return (
+    <div className={`fixed inset-y-0 right-0 w-[32rem] bg-gray-800 shadow-xl overflow-y-auto ${className}`}>
+      <div className="sticky top-0 bg-gray-800 p-6 border-b border-gray-700 z-10">
+        <div className="flex justify-between items-center">
+          <h2 className="text-xl font-semibold">Task Details</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-white transition-colors"
+          >
+            ×
+          </button>
+        </div>
+      </div>
+
+      <div className="p-6 space-y-6">
+        <div>
+          <h3 className="text-lg font-medium mb-2">{task.title}</h3>
+          <p className="text-gray-400">{task.description}</p>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Progress
+            </label>
+            <div className="flex items-center gap-4">
+              <input
+                type="range"
+                min="0"
+                max="100"
+                value={task.progress}
+                onChange={(e) => handleProgressChange(Number(e.target.value))}
+                className="flex-1"
+              />
+              <span className="text-sm text-gray-400 w-12">{task.progress}%</span>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Status
+            </label>
+            <div className="flex gap-2">
+              {(['todo', 'in-progress', 'done'] as const).map((status) => (
+                <button
+                  key={status}
+                  onClick={() => handleStatusChange(status)}
+                  className={`px-3 py-1 rounded-full text-sm ${
+                    task.status === status
+                      ? 'bg-indigo-600 text-white'
+                      : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                  }`}
+                >
+                  {status.replace('-', ' ')}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Priority
+            </label>
+            <div className="flex gap-2">
+              {(['low', 'medium', 'high'] as const).map((priority) => (
+                <button
+                  key={priority}
+                  onClick={() => handlePriorityChange(priority)}
+                  className={`px-3 py-1 rounded-full text-sm ${
+                    task.priority === priority
+                      ? {
+                          low: 'bg-green-600 text-white',
+                          medium: 'bg-yellow-600 text-white',
+                          high: 'bg-red-600 text-white',
+                        }[priority]
+                      : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                  }`}
+                >
+                  {priority}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <TaskProgress task={task} />
+
+        <div className="border-t border-gray-700 pt-4 space-y-3">
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Due Date
+            </label>
+            <p className="text-gray-400">{formatDate(task.dueDate)}</p>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Created
+            </label>
+            <p className="text-gray-400">{formatDate(task.createdAt)}</p>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Last Updated
+            </label>
+            <p className="text-gray-400">{formatDate(task.updatedAt)}</p>
+          </div>
+        </div>
+
+        {task.subtasks && task.subtasks.length > 0 && (
+          <div className="border-t border-gray-700 pt-4">
+            <h4 className="text-sm font-medium text-gray-300 mb-2">Subtasks</h4>
+            <div className="space-y-2">
+              {task.subtasks.map((subtask) => (
+                <div
+                  key={subtask.id}
+                  className="flex items-center gap-2 text-sm"
+                >
+                  <input
+                    type="checkbox"
+                    checked={subtask.completed}
+                    onChange={() => {
+                      const updatedSubtasks = task.subtasks?.map((st) =>
+                        st.id === subtask.id
+                          ? { ...st, completed: !st.completed }
+                          : st
+                      );
+                      onUpdateTask({
+                        ...task,
+                        subtasks: updatedSubtasks,
+                        activityLog: [
+                          ...task.activityLog,
+                          {
+                            id: Date.now().toString(),
+                            taskId: task.id,
+                            userId: 'current-user',
+                            action: 'updated',
+                            timestamp: new Date(),
+                          },
+                        ],
+                      });
+                    }}
+                    className="rounded text-indigo-600 focus:ring-indigo-500"
+                  />
+                  <span className={subtask.completed ? 'line-through text-gray-500' : ''}>
+                    {subtask.title}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className="border-t border-gray-700 pt-4">
+          <TaskLabels task={task} onUpdateTask={onUpdateTask} />
+        </div>
+
+        <div className="border-t border-gray-700 pt-4">
+          <TaskDependencies task={task} allTasks={allTasks} onUpdateTask={onUpdateTask} />
+        </div>
+
+        <div className="border-t border-gray-700 pt-4">
+          <TaskNotifications task={task} onUpdateTask={onUpdateTask} />
+        </div>
+
+        <div className="border-t border-gray-700 pt-4">
+          <TaskTimer task={task} onUpdateTask={onUpdateTask} />
+        </div>
+
+        <div className="border-t border-gray-700 pt-4">
+          <TaskAttachments task={task} onUpdateTask={onUpdateTask} />
+        </div>
+
+        <div className="border-t border-gray-700 pt-4">
+          <TaskComments task={task} onUpdateTask={onUpdateTask} />
+        </div>
+
+        <div className="border-t border-gray-700 pt-4">
+          <TaskHistory task={task} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskDetailsPanel;
diff --git a/app/components/TaskHistory.tsx b/app/components/TaskHistory.tsx
new file mode 100644
index 0000000..06be1ec
--- /dev/null
+++ b/app/components/TaskHistory.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import React from 'react';
+import { Task } from '../types/task';
+import { ActivityLog } from '../types/collaboration';
+
+interface TaskHistoryProps {
+  task: Task;
+  className?: string;
+}
+
+const TaskHistory: React.FC<TaskHistoryProps> = ({
+  task,
+  className = '',
+}) => {
+  const formatDateTime = (date: Date) => {
+    return new Date(date).toLocaleString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const formatActivityMessage = (activity: ActivityLog) => {
+    switch (activity.action) {
+      case 'created':
+        return 'created this task';
+      case 'updated':
+        return 'updated this task';
+      case 'commented':
+        return 'commented on this task';
+      case 'status_changed':
+        return 'changed the status';
+      case 'assigned':
+        return 'updated task assignments';
+      default:
+        return 'performed an action';
+    }
+  };
+
+  const getActivityIcon = (action: ActivityLog['action']) => {
+    switch (action) {
+      case 'created':
+        return '✨';
+      case 'updated':
+        return '📝';
+      case 'commented':
+        return '💬';
+      case 'status_changed':
+        return '🔄';
+      case 'assigned':
+        return '👥';
+      default:
+        return '📋';
+    }
+  };
+
+  const groupActivitiesByDate = (activities: ActivityLog[]) => {
+    const groups: { [key: string]: ActivityLog[] } = {};
+    
+    activities.forEach(activity => {
+      const date = new Date(activity.timestamp).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      });
+      
+      if (!groups[date]) {
+        groups[date] = [];
+      }
+      groups[date].push(activity);
+    });
+
+    return Object.entries(groups).sort((a, b) => 
+      new Date(b[0]).getTime() - new Date(a[0]).getTime()
+    );
+  };
+
+  const groupedActivities = groupActivitiesByDate([...task.activityLog].reverse());
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      <div className="flex items-center justify-between mb-2">
+        <h4 className="text-sm font-medium text-gray-300">Activity History</h4>
+        <span className="text-xs text-gray-400">
+          {task.activityLog.length} activities
+        </span>
+      </div>
+
+      <div className="space-y-6">
+        {groupedActivities.map(([date, activities]) => (
+          <div key={date}>
+            <div className="flex items-center gap-2 mb-3">
+              <div className="h-px flex-1 bg-gray-700" />
+              <span className="text-xs text-gray-400">{date}</span>
+              <div className="h-px flex-1 bg-gray-700" />
+            </div>
+
+            <div className="space-y-4">
+              {activities.map((activity) => (
+                <div
+                  key={activity.id}
+                  className="flex items-start gap-3 group"
+                >
+                  <div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center flex-shrink-0">
+                    <span className="text-sm" role="img" aria-label={activity.action}>
+                      {getActivityIcon(activity.action)}
+                    </span>
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="flex items-center gap-2 min-w-0">
+                        <span className="text-sm font-medium truncate">
+                          {activity.userId}
+                        </span>
+                        <span className="text-sm text-gray-400">
+                          {formatActivityMessage(activity)}
+                        </span>
+                      </div>
+                      <span className="text-xs text-gray-400 whitespace-nowrap">
+                        {formatDateTime(activity.timestamp)}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+
+        {task.activityLog.length === 0 && (
+          <div className="text-center py-6 text-gray-400">
+            <p>No activity yet</p>
+            <p className="text-sm">Actions on this task will appear here</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TaskHistory;
diff --git a/app/components/TaskLabels.tsx b/app/components/TaskLabels.tsx
new file mode 100644
index 0000000..907bfdd
--- /dev/null
+++ b/app/components/TaskLabels.tsx
@@ -0,0 +1,238 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Task } from '../types/task';
+
+interface TaskLabelsProps {
+  task: Task;
+  onUpdateTask: (task: Task) => void;
+  className?: string;
+}
+
+const TaskLabels: React.FC<TaskLabelsProps> = ({
+  task,
+  onUpdateTask,
+  className = '',
+}) => {
+  const [newTag, setNewTag] = useState('');
+  const [newCategory, setNewCategory] = useState('');
+  const [isAddingTag, setIsAddingTag] = useState(false);
+  const [isAddingCategory, setIsAddingCategory] = useState(false);
+
+  const handleAddTag = () => {
+    if (!newTag.trim()) return;
+
+    const updatedTags = [...(task.tags || [])];
+    if (!updatedTags.includes(newTag.trim())) {
+      updatedTags.push(newTag.trim());
+
+      onUpdateTask({
+        ...task,
+        tags: updatedTags,
+        activityLog: [
+          ...task.activityLog,
+          {
+            id: Date.now().toString(),
+            taskId: task.id,
+            userId: 'current-user',
+            action: 'updated',
+            timestamp: new Date(),
+          },
+        ],
+      });
+    }
+
+    setNewTag('');
+    setIsAddingTag(false);
+  };
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    const updatedTags = (task.tags || []).filter(tag => tag !== tagToRemove);
+
+    onUpdateTask({
+      ...task,
+      tags: updatedTags,
+      activityLog: [
+        ...task.activityLog,
+        {
+          id: Date.now().toString(),
+          taskId: task.id,
+          userId: 'current-user',
+          action: 'updated',
+          timestamp: new Date(),
+        },
+      ],
+    });
+  };
+
+  const handleUpdateCategory = () => {
+    if (!newCategory.trim()) return;
+
+    onUpdateTask({
+      ...task,
+      category: newCategory.trim(),
+      activityLog: [
+        ...task.activityLog,
+        {
+          id: Date.now().toString(),
+          taskId: task.id,
+          userId: 'current-user',
+          action: 'updated',
+          timestamp: new Date(),
+        },
+      ],
+    });
+
+    setNewCategory('');
+    setIsAddingCategory(false);
+  };
+
+  const handleRemoveCategory = () => {
+    onUpdateTask({
+      ...task,
+      category: undefined,
+      activityLog: [
+        ...task.activityLog,
+        {
+          id: Date.now().toString(),
+          taskId: task.id,
+          userId: 'current-user',
+          action: 'updated',
+          timestamp: new Date(),
+        },
+      ],
+    });
+  };
+
+  const handleKeyPress = (
+    e: React.KeyboardEvent,
+    action: () => void
+  ) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      action();
+    }
+  };
+
+  return (
+    <div className={`space-y-6 ${className}`}>
+      {/* Tags Section */}
+      <div>
+        <div className="flex items-center justify-between mb-2">
+          <h4 className="text-sm font-medium text-gray-300">Tags</h4>
+          <button
+            onClick={() => setIsAddingTag(true)}
+            className="text-sm text-indigo-400 hover:text-indigo-300"
+          >
+            Add Tag
+          </button>
+        </div>
+
+        {isAddingTag ? (
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={newTag}
+              onChange={(e) => setNewTag(e.target.value)}
+              onKeyPress={(e) => handleKeyPress(e, handleAddTag)}
+              placeholder="Enter tag name"
+              className="flex-1 px-3 py-2 bg-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              autoFocus
+            />
+            <button
+              onClick={handleAddTag}
+              className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
+            >
+              Add
+            </button>
+            <button
+              onClick={() => setIsAddingTag(false)}
+              className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        ) : (
+          <div className="flex flex-wrap gap-2">
+            {task.tags?.map((tag) => (
+              <span
+                key={tag}
+                className="px-3 py-1 bg-gray-700 rounded-full text-sm group flex items-center gap-2"
+              >
+                {tag}
+                <button
+                  onClick={() => handleRemoveTag(tag)}
+                  className="text-gray-400 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
+                >
+                  ×
+                </button>
+              </span>
+            ))}
+            {(!task.tags || task.tags.length === 0) && (
+              <span className="text-sm text-gray-400">No tags added</span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Category Section */}
+      <div>
+        <div className="flex items-center justify-between mb-2">
+          <h4 className="text-sm font-medium text-gray-300">Category</h4>
+          <button
+            onClick={() => setIsAddingCategory(true)}
+            className="text-sm text-indigo-400 hover:text-indigo-300"
+          >
+            {task.category ? 'Change' : 'Add'} Category
+          </button>
+        </div>
+
+        {isAddingCategory ? (
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={newCategory}
+              onChange={(e) => setNewCategory(e.target.value)}
+              onKeyPress={(e) => handleKeyPress(e, handleUpdateCategory)}
+              placeholder="Enter category name"
+              className="flex-1 px-3 py-2 bg-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              autoFocus
+            />
+            <button
+              onClick={handleUpdateCategory}
+              className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
+            >
+              Save
+            </button>
+            <button
+              onClick={() => setIsAddingCategory(false)}
+              className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2">
+            {task.category ? (
+              <>
+                <span className="px-3 py-1 bg-gray-700 rounded-lg text-sm">
+                  {task.category}
+                </span>
+                <button
+                  onClick={handleRemoveCategory}
+                  className="text-gray-400 hover:text-red-400"
+                >
+                  ×
+                </button>
+              </>
+            ) : (
+              <span className="text-sm text-gray-400">No category set</span>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TaskLabels;
diff --git a/app/components/TaskNotifications.tsx b/app/components/TaskNotifications.tsx
new file mode 100644
index 0000000..9789f10
--- /dev/null
+++ b/app/components/TaskNotifications.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { Task, Reminder } from '../types/task';
+
+interface TaskNotificationsProps {
+  task: Task;
+  onUpdateTask: (task: Task) => void;
+  className?: string;
+}
+
+const TaskNotifications: React.FC<TaskNotificationsProps> = ({
+  task,
+  onUpdateTask,
+  className = '',
+}) => {
+  const [reminders, setReminders] = useState<Reminder[]>(task.reminders || []);
+  const [newReminderTime, setNewReminderTime] = useState('');
+  const [newReminderMessage, setNewReminderMessage] = useState('');
+  const [isAddingReminder, setIsAddingReminder] = useState(false);
+
+  useEffect(() => {
+    // Initialize reminders from task
+    if (task.dueDate && !reminders.some(r => r.type === 'due_date')) {
+      const dueDateReminder: Reminder = {
+        id: 'due-date',
+        time: new Date(task.dueDate.getTime() - 24 * 60 * 60 * 1000), // 1 day before
+        message: `Task "${task.title}" is due tomorrow!`,
+        type: 'due_date',
+        isEnabled: true,
+      };
+      setReminders(prev => [...prev, dueDateReminder]);
+    }
+  }, [task.dueDate, task.title]);
+
+  useEffect(() => {
+    // Check for reminders that need to be triggered
+    const checkReminders = () => {
+      const now = new Date();
+      reminders.forEach(reminder => {
+        if (reminder.isEnabled && reminder.time > now && reminder.time.getTime() - now.getTime() <= 60000) {
+          // Show notification if reminder is within the next minute
+          if (Notification.permission === 'granted') {
+            new Notification(`Task Reminder: ${task.title}`, {
+              body: reminder.message,
+              icon: '/favicon.ico',
+            });
+          }
+        }
+      });
+    };
+
+    const interval = setInterval(checkReminders, 30000); // Check every 30 seconds
+
+    return () => clearInterval(interval);
+  }, [reminders, task.title]);
+
+  useEffect(() => {
+    // Request notification permission if not already granted
+    if (Notification.permission === 'default') {
+      Notification.requestPermission();
+    }
+  }, []);
+
+  const handleAddReminder = () => {
+    if (!newReminderTime || !newReminderMessage) return;
+
+    const newReminder: Reminder = {
+      id: Date.now().toString(),
+      time: new Date(newReminderTime),
+      message: newReminderMessage,
+      type: 'custom',
+      isEnabled: true,
+    };
+
+    const updatedReminders = [...reminders, newReminder];
+    setReminders(updatedReminders);
+    setNewReminderTime('');
+    setNewReminderMessage('');
+    setIsAddingReminder(false);
+
+    // Update task with new reminders
+    const updatedTask = {
+      ...task,
+      reminders: updatedReminders,
+    };
+    onUpdateTask(updatedTask);
+  };
+
+  const handleToggleReminder = (reminderId: string) => {
+    const updatedReminders = reminders.map(reminder =>
+      reminder.id === reminderId
+        ? { ...reminder, isEnabled: !reminder.isEnabled }
+        : reminder
+    );
+    setReminders(updatedReminders);
+
+    // Update task with toggled reminders
+    const updatedTask = {
+      ...task,
+      reminders: updatedReminders,
+    };
+    onUpdateTask(updatedTask);
+  };
+
+  const handleDeleteReminder = (reminderId: string) => {
+    const updatedReminders = reminders.filter(reminder => reminder.id !== reminderId);
+    setReminders(updatedReminders);
+
+    // Update task with remaining reminders
+    const updatedTask = {
+      ...task,
+      reminders: updatedReminders,
+    };
+    onUpdateTask(updatedTask);
+  };
+
+  const formatDateTime = (date: Date) => {
+    return new Date(date).toLocaleString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      <div className="flex items-center justify-between mb-2">
+        <h4 className="text-sm font-medium text-gray-300">Reminders</h4>
+        <button
+          onClick={() => setIsAddingReminder(true)}
+          className="text-sm text-indigo-400 hover:text-indigo-300"
+        >
+          Add Reminder
+        </button>
+      </div>
+
+      {isAddingReminder && (
+        <div className="space-y-3 bg-gray-700 rounded-lg p-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              When
+            </label>
+            <input
+              type="datetime-local"
+              value={newReminderTime}
+              onChange={(e) => setNewReminderTime(e.target.value)}
+              className="w-full px-3 py-2 bg-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Message
+            </label>
+            <input
+              type="text"
+              value={newReminderMessage}
+              onChange={(e) => setNewReminderMessage(e.target.value)}
+              placeholder="Reminder message"
+              className="w-full px-3 py-2 bg-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            />
+          </div>
+          <div className="flex justify-end gap-2">
+            <button
+              onClick={() => setIsAddingReminder(false)}
+              className="px-3 py-1 text-sm text-gray-400 hover:text-white"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleAddReminder}
+              disabled={!newReminderTime || !newReminderMessage}
+              className="px-3 py-1 text-sm bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 rounded-lg"
+            >
+              Add
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="space-y-2">
+        {reminders.map((reminder) => (
+          <div
+            key={reminder.id}
+            className="flex items-center justify-between p-3 bg-gray-700 rounded-lg group"
+          >
+            <div className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                checked={reminder.isEnabled}
+                onChange={() => handleToggleReminder(reminder.id)}
+                className="rounded text-indigo-600 focus:ring-indigo-500"
+              />
+              <div>
+                <p className="text-sm">{reminder.message}</p>
+                <p className="text-xs text-gray-400">
+                  {formatDateTime(reminder.time)}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={() => handleDeleteReminder(reminder.id)}
+              className="text-gray-400 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
+            >
+              ×
+            </button>
+          </div>
+        ))}
+
+        {reminders.length === 0 && (
+          <div className="text-center py-6 text-gray-400">
+            <p>No reminders set</p>
+            <p className="text-sm">Add a reminder to stay on track</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TaskNotifications;
diff --git a/app/components/TaskPanel.tsx b/app/components/TaskPanel.tsx
index 073ce62..92bc868 100644
--- a/app/components/TaskPanel.tsx
+++ b/app/components/TaskPanel.tsx
@@ -1,100 +1,64 @@
 "use client";
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { DragDropContext, DropResult } from '@hello-pangea/dnd';
 import ExportMenu from './ExportMenu';
 import { TaskList as TaskListComponent } from './TaskList';
-import { ThemeProvider } from '../hooks/useTheme';
+import { ThemeProvider, useTheme, ThemeType } from '../hooks/useTheme';
 import { useTasks } from '../hooks/useTasks';
 import { useSearch } from '../hooks/useSearch';
 import SearchBar from './SearchBar';
-import { TaskCard } from './TaskCard';
 import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
 import ThemeSelector from './ThemeSelector';
 import TaskForm from './TaskForm';
-import CalendarView from './CalendarView';
-import ListView from './ListView';
-import IntegrationButton from './IntegrationButton';
-import TaskDetails from './TaskDetails';
-import LoginForm from './LoginForm';
-import AIAssistant from './AIAssistant';
-import ShortcutsDialog from './ShortcutsDialog';
-import { Task, TaskList } from '../types/task';
-import { StorageConfig } from '../types/storage';
-import CommentSection, { Comment } from './CommentSection';
-import { colors } from '../config/colors';
-import TaskStats from './TaskStats';
-import NotesEditor from './NotesEditor';
-import { WorkspacePanel } from './WorkspacePanel';
-import { ViewType, LayoutType } from '../types/view';
-import { PlusIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import AIAssistantPanel from './AIAssistantPanel';
+import TaskAnalytics from './TaskAnalytics';
+import TaskAutomation from './TaskAutomation';
+import TaskDependencyGraph from './TaskDependencyGraph';
+import TaskDetailsPanel from './TaskDetailsPanel';
+import { useAuthContext } from '../providers/AuthProvider';
 import { useRouter } from 'next/navigation';
-import { initializeAGiXT, getAgents, handleGenerateSubtasks, handleRunChain, updateConversationLog } from '../utils/agixt';
+import { Task } from '../types/task';
+import { colors } from '../config/colors';
 import AGiXTConfig from './AGiXTConfig';
 
-import { ThemeType } from '../hooks/useTheme';
-
 const defaultTheme: ThemeType = {
   primary: colors.primary.DEFAULT,
   background: colors.background,
   foreground: colors.foreground,
-  gray: colors.gray
+  gray: {
+    '50': '#f9fafb',
+    '100': '#f3f4f6',
+    '200': '#e5e7eb',
+    '300': '#d1d5db',
+    '400': '#9ca3af',
+    '500': '#6b7280',
+    '600': '#4b5563',
+    '700': '#374151',
+    '800': '#1f2937',
+    '900': '#111827'
+  }
 };
 
-interface Agent {
-  name: string;
-}
-
 const TaskPanel: React.FC = () => {
-  const handleTaskDelete = (task: Task) => {
-    setTaskToDelete(task);
-    setShowConfirmDelete(true);
-  };
-
-  const handleBatchComplete = () => {
-    const selectedTasks = tasks.filter(task => task.status !== 'done');
-    selectedTasks.forEach(task => {
-      updateTask({ ...task, status: 'done' });
-    });
-  };
-
-  const handleArchiveDone = () => {
-    const doneTasks = tasks.filter(task => task.status === 'done');
-    doneTasks.forEach(task => {
-      deleteTask(task.id);
-    });
-  };
-  const searchInputRef = React.useRef<HTMLInputElement>(null);
-  const [currentTab, setCurrentTab] = React.useState<'tasks' | 'notes' | 'workspaces'>('tasks');
-  const [showCompletedRecurring, setShowCompletedRecurring] = React.useState(true);
-  const [showIntegrations, setShowIntegrations] = React.useState(false);
-  const [isEditorOpen, setIsEditorOpen] = React.useState(false);
-  const [storageConfig, setStorageConfig] = React.useState<StorageConfig>(() => {
-    const email = localStorage.getItem('email');
-    const userId = email || 'anonymous';
-    return {
-      remoteEnabled: localStorage.getItem('remoteStorageEnabled') === 'true',
-      apiKey: localStorage.getItem('remoteStorageApiKey') || undefined,
-      userId
-    };
+  const [mounted, setMounted] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+  const { token, noAuth } = useAuthContext();
+  const [theme, setTheme] = useState<ThemeType>(defaultTheme);
+
+  // Task management state
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+  const [isAGiXTConfigOpen, setIsAGiXTConfigOpen] = useState(false);
+  const [selectedTask, setSelectedTask] = useState<Task | null>(null);
+  const [agixtConfig, setAgixtConfig] = useState({ backendUrl: '', authToken: '' });
+  
+  const { tasks, addTask, updateTask, deleteTask, reorderTasks, lists } = useTasks({
+    remoteEnabled: false,
+    userId: 'anonymous'
   });
-
-  const { 
-    tasks, 
-    addTask, 
-    updateTask, 
-    deleteTask, 
-    reorderTasks, 
-    importTasks, 
-    lists, 
-    addList, 
-    updateList, 
-    deleteList,
-    sync,
-    isLoading
-  } = useTasks(storageConfig);
-
-  const [isSyncing, setIsSyncing] = React.useState(false);
+  
   const {
     searchTerm,
     setSearchTerm,
@@ -104,157 +68,38 @@ const TaskPanel: React.FC = () => {
     setFilterPriority,
     filteredAndSortedTasks
   } = useSearch(tasks);
-  const [selectedTask, setSelectedTask] = React.useState<Task | null>(null);
-  const [comments, setComments] = React.useState<Record<string, Comment[]>>({});
-  const [currentView, setCurrentView] = React.useState<ViewType>('board');
-  const [theme, setTheme] = React.useState<ThemeType>(defaultTheme);
-  const [showConfirmDelete, setShowConfirmDelete] = React.useState(false);
-  const [taskToDelete, setTaskToDelete] = React.useState<Task | null>(null);
-  const [currentList, setCurrentList] = React.useState<string>('default');
-  const [currentLayout, setCurrentLayout] = React.useState<LayoutType>('default');
-  const [isRenamingList, setIsRenamingList] = React.useState(false);
-  const [renamingListId, setRenamingListId] = React.useState<string | null>(null);
-  const [renamingListName, setRenamingListName] = React.useState('');
-  const [isRenamingProject, setIsRenamingProject] = React.useState(false);
-  const [renamingProjectName, setRenamingProjectName] = React.useState('Midnight Eclipse');
-  const [showProjectActions, setShowProjectActions] = React.useState(false);
-  const projectActionsRef = React.useRef<HTMLDivElement>(null);
-  const [showListActions, setShowListActions] = React.useState(false);
-  const [showExportMenu, setShowExportMenu] = React.useState(false);
-  const listActionsRef = React.useRef<HTMLDivElement>(null);
-  const exportMenuRef = React.useRef<HTMLDivElement>(null);
-  // AGiXT state
-  const [agents, setAgents] = React.useState<Agent[]>([]);
-  const [selectedAgent, setSelectedAgent] = React.useState<string>('');
-  const [isLoadingAI, setIsLoadingAI] = React.useState(false);
-  const [showAGiXTConfig, setShowAGiXTConfig] = React.useState(false);
-  const router = useRouter();
-
-  const handleSaveAGiXTConfig = ({ backendUrl, authToken }: { backendUrl: string; authToken: string }) => {
-    localStorage.setItem('agixtapi', backendUrl);
-    localStorage.setItem('agixtkey', authToken);
-    initAGiXT();
-  };
 
-  const initAGiXT = async () => {
-    const backendUrl = localStorage.getItem('agixtapi');
-    const authToken = localStorage.getItem('agixtkey');
-    
-    if (backendUrl && authToken) {
+  useEffect(() => {
+    const initializePanel = async () => {
       try {
-        const agentList = await getAgents(backendUrl, authToken);
-        if (agentList && agentList.length > 0) {
-          setAgents(agentList);
-          setSelectedAgent(agentList[0].name);
-        }
-      } catch (error) {
-        console.error('Error initializing AGiXT:', error);
-        setShowAGiXTConfig(true);
-      }
-    } else {
-      setShowAGiXTConfig(true);
-    }
-  };
+        setMounted(true);
+        console.log('TaskPanel: Initializing with auth state:', { token, noAuth });
 
-  React.useEffect(() => {
-    initAGiXT();
-  }, []);
-
-  const generateSubtasks = async (task: Task) => {
-    const backendUrl = localStorage.getItem('agixtapi');
-    const authToken = localStorage.getItem('authToken');
-
-    if (!backendUrl || !authToken || !selectedAgent) {
-      console.error('AGiXT configuration missing');
-      return;
-    }
+        if (!token && !noAuth) {
+          console.log('TaskPanel: No auth detected, redirecting to login');
+          router.push('/');
+          return;
+        }
 
-    setIsLoadingAI(true);
-    try {
-      const updatedTask = await handleGenerateSubtasks(task, selectedAgent, backendUrl, authToken);
-      if (updatedTask) {
-        updateTask(updatedTask);
+        await new Promise(resolve => setTimeout(resolve, 100));
+        setIsInitialized(true);
+        console.log('TaskPanel: Initialization complete');
+      } catch (err) {
+        console.error('TaskPanel: Initialization error:', err);
+        setError(err instanceof Error ? err.message : 'Failed to initialize task panel');
       }
-    } catch (error) {
-      console.error('Error generating subtasks:', error);
-    } finally {
-      setIsLoadingAI(false);
-    }
-  };
-
-  const runChain = async (task: Task) => {
-    const backendUrl = localStorage.getItem('agixtapi');
-    const authToken = localStorage.getItem('authToken');
+    };
 
-    if (!backendUrl || !authToken || !selectedAgent) {
-      console.error('AGiXT configuration missing');
-      return;
-    }
-
-    setIsLoadingAI(true);
-    try {
-      const updatedTask = await handleRunChain(task, selectedAgent, backendUrl, authToken);
-      if (updatedTask) {
-        updateTask(updatedTask);
-      }
-    } catch (error) {
-      console.error('Error running chain:', error);
-    } finally {
-      setIsLoadingAI(false);
-    }
-  };
+    initializePanel();
+  }, [token, noAuth, router]);
 
   useKeyboardShortcuts({
     onNewTask: () => setIsEditorOpen(true),
-    onSearch: () => searchInputRef.current?.focus(),
-    onToggleView: () => {
-      setCurrentView(current => current === 'board' ? 'calendar' : 'board');
-    },
-    onDelete: () => {
-      if (selectedTask) {
-        setTaskToDelete(selectedTask);
-        setShowConfirmDelete(true);
-      }
-    },
-    onDeleteTask: () => {
-      if (selectedTask) {
-        setTaskToDelete(selectedTask);
-        setShowConfirmDelete(true);
-      }
-    }
+    onSearch: () => document.getElementById('search-input')?.focus(),
+    onToggleView: () => {},
+    onDelete: () => {},
+    onDeleteTask: () => {}
   });
-  const [showLogin, setShowLogin] = React.useState(false);
-  const [showAI, setShowAI] = React.useState(false);
-  const [showShortcuts, setShowShortcuts] = React.useState(false);
-
-  React.useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === '?' && !e.ctrlKey && !e.metaKey) {
-        setShowShortcuts(true);
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
-
-  React.useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (projectActionsRef.current && !projectActionsRef.current.contains(event.target as Node)) {
-        setShowProjectActions(false);
-      }
-      if (listActionsRef.current && !listActionsRef.current.contains(event.target as Node)) {
-        setShowListActions(false);
-      }
-      if (exportMenuRef.current && !exportMenuRef.current.contains(event.target as Node)) {
-        setShowExportMenu(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
 
   const onDragEnd = (result: DropResult) => {
     if (!result.destination) return;
@@ -264,7 +109,6 @@ const TaskPanel: React.FC = () => {
     const taskId = result.draggableId;
 
     if (sourceStatus === destinationStatus) {
-      // Reordering within the same list
       const listTasks = tasks.filter(t => t.status === sourceStatus);
       const [movedTask] = listTasks.splice(result.source.index, 1);
       listTasks.splice(result.destination.index, 0, movedTask);
@@ -279,7 +123,6 @@ const TaskPanel: React.FC = () => {
 
       reorderTasks(updatedTasks);
     } else {
-      // Moving between lists
       const task = tasks.find(t => t.id === taskId);
       if (!task) return;
 
@@ -292,389 +135,90 @@ const TaskPanel: React.FC = () => {
     }
   };
 
-  const filteredTasks = () => {
-    return filteredAndSortedTasks().filter(task => task.listId === currentList);
-  }
+  const handleTaskSuggestion = (taskSuggestion: Partial<Task>) => {
+    const newTask: Task = {
+      id: Date.now().toString(),
+      title: taskSuggestion.title || '',
+      description: taskSuggestion.description || '',
+      priority: taskSuggestion.priority || 'medium',
+      status: 'todo',
+      progress: 0,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      owner: 'current-user',
+      collaborators: [],
+      activityLog: [],
+      comments: [],
+      version: 1,
+      listId: lists[0]?.id || 'default',
+    };
+    addTask(newTask);
+  };
 
-  const handleLogout = () => {
-    localStorage.removeItem('authToken');
-    localStorage.removeItem('noAuth');
-    router.push('/');
+  const handleTaskOptimization = (taskIds: string[]) => {
+    const optimizedTasks = taskIds.map(id => tasks.find(t => t.id === id)).filter(Boolean) as Task[];
+    reorderTasks(optimizedTasks);
   };
 
-  const email = localStorage.getItem('email');
-  const authToken = localStorage.getItem('authToken');
-  const noAuth = localStorage.getItem('noAuth');
+  if (!mounted || !isInitialized) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-[#111111] text-white">
+        <div className="text-center">
+          <div className="text-lg mb-2">Loading Task Panel...</div>
+          <div className="text-sm text-gray-400">Please wait while we set things up</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-[#111111] text-white">
+        <div className="text-center">
+          <div className="text-lg mb-2 text-red-500">Error Loading Task Panel</div>
+          <div className="text-sm text-gray-400">{error}</div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <ThemeProvider value={{ theme, setTheme }}>
-      <div style={{ backgroundColor: theme.background }} className="min-h-screen text-white">
-        <div className="container mx-auto p-4">
-          <header className="flex flex-col gap-4 mb-8">
-            <div className="flex justify-between items-center">
-              <div className="flex items-center gap-4">
-                <div className="relative">
-                  <div className="flex items-center gap-2">
-                    <h1 className="text-2xl font-bold">{renamingProjectName}</h1>
-                    <button
-                      onClick={() => setShowProjectActions(!showProjectActions)}
-                      className="text-gray-400 hover:text-white focus:outline-none"
-                      title="Project Actions"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="h-5 w-5"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                  {showProjectActions && (
-                    <div
-                      ref={projectActionsRef}
-                      className="absolute top-full mt-2 right-0 bg-[#2A2A2A] rounded-md shadow-lg z-10"
-                    >
-                      <button
-                        onClick={() => {
-                          setIsRenamingProject(true);
-                          setShowProjectActions(false);
-                        }}
-                        className="block px-4 py-2 text-white hover:bg-[#333333] w-full text-left"
-                      >
-                        Rename
-                      </button>
-                      {/* Add other project actions here */}
-                    </div>
-                  )}
-                  {isRenamingProject && (
-                    <input
-                      type="text"
-                      value={renamingProjectName}
-                      onChange={(e) => setRenamingProjectName(e.target.value)}
-                      onBlur={() => setIsRenamingProject(false)}
-                      className="text-2xl font-bold bg-[#2A2A2A] rounded-md px-2 py-1 focus:outline-none absolute top-0 left-0"
-                      style={{ width: '100%' }}
-                    />
-                  )}
-                </div>
-                <div className="flex gap-2">
-                  <button
-                    onClick={() => setCurrentTab('tasks')}
-                    className={`px-4 py-2 rounded-md ${currentTab === 'tasks' ? 'bg-indigo-600' : 'bg-[#2A2A2A] hover:bg-[#333333]'} transition-colors`}
-                  >
-                    Tasks
-                  </button>
+      <div className="min-h-screen bg-[#111111] text-white p-4">
+        <div className="flex">
+          <div className="flex-1 max-w-7xl mx-auto">
+            <header className="mb-8">
+              <div className="flex justify-between items-center mb-4">
+                <h1 className="text-2xl font-bold">Task Panel</h1>
+                <div className="flex items-center space-x-4">
+                  <ThemeSelector currentTheme={theme} onThemeChange={setTheme} />
                   <button
-                    onClick={() => setCurrentTab('notes')}
-                    className={`px-4 py-2 rounded-md ${currentTab === 'notes' ? 'bg-indigo-600' : 'bg-[#2A2A2A] hover:bg-[#333333]'} transition-colors`}
+                    onClick={() => setIsAGiXTConfigOpen(true)}
+                    className="px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded-lg transition-colors"
                   >
-                    Notes
+                    AGiXT Config
                   </button>
                   <button
-                    onClick={() => setCurrentTab('workspaces')}
-                    className={`px-4 py-2 rounded-md ${currentTab === 'workspaces' ? 'bg-indigo-600' : 'bg-[#2A2A2A] hover:bg-[#333333]'} transition-colors`}
-                  >
-                    Workspaces
-                  </button>
-                </div>
-                <div className="text-sm text-gray-400">
-                  Press "?" for keyboard shortcuts
-                </div>
-              </div>
-              <div className="flex items-center space-x-4">
-                {currentTab === 'tasks' && (
-                  <div className="flex bg-[#2A2A2A] rounded-lg p-1">
-                    <button
-                      onClick={() => setCurrentView('board')}
-                      className={`px-4 py-2 rounded-md ${currentView === 'board' ? 'bg-indigo-600' : 'hover:bg-[#333333]'} transition-colors`}
-                    >
-                      Board
-                    </button>
-                    <button
-                      onClick={() => setCurrentView('calendar')}
-                      className={`px-4 py-2 rounded-md ${currentView === 'calendar' ? 'bg-indigo-600' : 'hover:bg-[#333333]'} transition-colors`}
-                    >
-                      Calendar
-                    </button>
-                  </div>
-                )}
-                <ThemeSelector currentTheme={theme} onThemeChange={setTheme} />
-                <div className="flex items-center space-x-2">
-                  <div className="flex items-center gap-2">
-                    {agents.length > 0 ? (
-                      <select
-                        value={selectedAgent}
-                        onChange={(e) => setSelectedAgent(e.target.value)}
-                        className="p-2 rounded-lg bg-[#2A2A2A] hover:bg-[#333333] transition-colors text-sm"
-                        title="Select AI Agent"
-                      >
-                        {agents.map((agent) => (
-                          <option key={agent.name} value={agent.name}>
-                            {agent.name}
-                          </option>
-                        ))}
-                      </select>
-                    ) : (
-                      <button
-                        onClick={() => setShowAGiXTConfig(true)}
-                        className="p-2 rounded-lg bg-[#2A2A2A] hover:bg-[#333333] transition-colors text-sm"
-                        title="Configure AGiXT"
-                      >
-                        Configure AGiXT
-                      </button>
-                    )}
-                    <div className="relative group">
-                      <button
-                        onClick={() => setShowAI(true)}
-                        className="p-2 rounded-lg bg-[#2A2A2A] hover:bg-[#333333] transition-colors"
-                        title="AI Assistant"
-                        disabled={isLoadingAI}
-                      >
-                        {isLoadingAI ? (
-                          <span className="animate-spin">⚙️</span>
-                        ) : (
-                          <span>🤖</span>
-                        )}
-                      </button>
-                      <span className="absolute hidden group-hover:block bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs bg-gray-900 text-white rounded whitespace-nowrap">
-                        AI Assistant
-                      </span>
-                    </div>
-                    <div className="relative group">
-                      <button
-                        onClick={() => setCurrentTab('workspaces')}
-                        className="p-2 rounded-lg bg-[#2A2A2A] hover:bg-[#333333] transition-colors"
-                        title="Workspaces"
-                      >
-                        <span>📦</span>
-                      </button>
-                      <span className="absolute hidden group-hover:block bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs bg-gray-900 text-white rounded whitespace-nowrap">
-                        Workspaces
-                      </span>
-                    </div>
-                  </div>
-                  
-                  <button
-                    onClick={() => setShowIntegrations(true)}
-                    className="p-2 rounded-lg bg-[#2A2A2A] hover:bg-[#333333] transition-colors"
-                    title="Integrations"
-                  >
-                    🔌
-                  </button>
-                  {storageConfig.remoteEnabled && (
-                    <div className="relative group">
-                      <button
-                        onClick={async () => {
-                          setIsSyncing(true);
-                          try {
-                            const userId = storageConfig.userId || 'anonymous';
-                            setStorageConfig(prev => ({ ...prev, userId }));
-                            await sync();
-                          } catch (error) {
-                            console.error('Sync failed:', error);
-                          } finally {
-                            setIsSyncing(false);
-                          }
-                        }}
-                        className="p-2 rounded-lg bg-[#2A2A2A] hover:bg-[#333333] transition-colors"
-                        title="Sync Tasks"
-                        disabled={isSyncing || isLoading}
-                      >
-                        {isSyncing ? '⏳' : '🔄'}
-                      </button>
-                      <span className="absolute hidden group-hover:block bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs bg-gray-900 text-white rounded whitespace-nowrap">
-                        {isSyncing ? 'Syncing...' : 'Sync Tasks'}
-                      </span>
-                    </div>
-                  )}
-                  <button
-                    onClick={() => setShowLogin(true)}
-                    className="p-2 rounded-lg bg-[#2A2A2A] hover:bg-[#333333] transition-colors"
-                    title="Account"
-                  >
-                    👤
-                  </button>
-                  <button 
                     onClick={() => setIsEditorOpen(true)}
-                    className="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 transition-colors group relative"
+                    className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
                   >
                     New Task
-                    <span className="absolute hidden group-hover:block bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs bg-gray-900 text-white rounded whitespace-nowrap">
-                      Press Ctrl+N
-                    </span>
                   </button>
                 </div>
-                {(authToken || noAuth) && (
-                  <div className="flex items-center space-x-2">
-                    <span className="text-sm text-gray-400">
-                      {email ? `Logged in as ${email}` : 'Logged in'}
-                    </span>
-                    <button
-                      onClick={handleLogout}
-                      className="px-3 py-1.5 rounded text-sm bg-red-600/20 text-red-300 hover:bg-red-600/30 transition-colors"
-                      title="Logout"
-                    >
-                      Logout
-                    </button>
-                  </div>
-                )}
-              </div>
-            </div>
-            <TaskStats tasks={tasks} />
-            <div className="flex items-center justify-between mb-4">
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={handleBatchComplete}
-                  className="px-3 py-1.5 rounded text-sm bg-indigo-600/20 text-indigo-300 hover:bg-indigo-600/30 transition-colors"
-                  title="Complete all visible tasks"
-                >
-                  Complete All
-                </button>
-                <button
-                  onClick={() => {
-                    const selectedTasks = filteredTasks().filter(t => t.status === 'todo');
-                    selectedTasks.forEach(task => {
-                      updateTask({ ...task, status: 'in-progress' });
-                    });
-                  }}
-                  className="px-3 py-1.5 rounded text-sm bg-blue-600/20 text-blue-300 hover:bg-blue-600/30 transition-colors"
-                  title="Start all todo tasks"
-                >
-                  Start All
-                </button>
-                <button
-                  onClick={() => {
-                    // Create recurring tasks
-                    const template = filteredTasks()
-                      .filter(t => t.recurring)
-                      .map(t => ({
-                        ...t,
-                        id: crypto.randomUUID(),
-                        status: 'todo' as const,
-                        completedAt: undefined,
-                        createdAt: new Date(),
-                        updatedAt: new Date(),
-                      }));
-                    template.forEach(addTask);
-                  }}
-                  className="px-3 py-1.5 rounded text-sm bg-purple-600/20 text-purple-300 hover:bg-purple-600/30 transition-colors"
-                  title="Create recurring tasks"
-                >
-                  Create Recurring
-                </button>
               </div>
-              <div className="flex items-center gap-2">
-                <input
-                    type="file"
-                    id="importFile"
-                    accept=".csv"
-                    className="hidden"
-                    onChange={(e) => {
-                      const file = e.target.files?.[0];
-                      if (file) {
-                        const reader = new FileReader();
-                        reader.onload = (event) => {
-                          const csv = event.target?.result as string;
-                          const lines = csv.split('\n');
-                          const userId = storageConfig.userId || 'anonymous';
-                          const importedTasks = lines.map(line => {
-                            const [title, description, status, priority, dueDate, tags, assignees] = line.split(',');
-                            const task: Task = {
-                              id: crypto.randomUUID(),
-                              title: title || 'Untitled Task',
-                              description: description || '',
-                              status: (status as Task['status']) || 'todo',
-                              priority: (priority as Task['priority']) || 'medium',
-                              dueDate: dueDate ? new Date(dueDate) : undefined,
-                              tags: tags ? tags.split(', ').filter(t => t) : undefined,
-                              assignees: assignees ? assignees.split(', ').filter(a => a) : undefined,
-                              createdAt: new Date(),
-                              updatedAt: new Date(),
-                              listId: currentList,
-                              owner: userId,
-                              collaborators: [],
-                              activityLog: [],
-                              comments: [],
-                              version: 1,
-                              progress: 0
-                            };
-                            return task;
-                          });
-                          importTasks(importedTasks, currentList);
-                          e.target.value = ''; // Reset file input
-                        };
-                        reader.readAsText(file);
-                      }
-                    }}
-                  />
-                  <button
-                    onClick={() => document.getElementById('importFile')?.click()}
-                    className="px-3 py-1.5 rounded text-sm bg-gray-600/20 text-gray-300 hover:bg-gray-600/30 transition-colors"
-                    title="Import tasks from CSV"
-                  >
-                    Import
-                  </button>
-                  <div className="relative">
-                    <button
-                      onClick={() => setShowExportMenu(!showExportMenu)}
-                      className="px-3 py-1.5 rounded text-sm bg-gray-600/20 text-gray-300 hover:bg-gray-600/30 transition-colors flex items-center gap-2"
-                      title="Export options"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="h-4 w-4"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
-                        />
-                      </svg>
-                      Export
-                    </button>
-                    {showExportMenu && (
-                      <div ref={exportMenuRef}>
-                        <ExportMenu
-                          tasks={filteredTasks()}
-                          onClose={() => setShowExportMenu(false)}
-                        />
-                      </div>
-                    )}
+              {isAGiXTConfigOpen && (
+                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+                  <div className="bg-gray-800 p-6 rounded-lg w-full max-w-2xl mx-4">
+                    <AGiXTConfig 
+                      onClose={() => setIsAGiXTConfigOpen(false)} 
+                      onSave={(config) => {
+                        setAgixtConfig(config);
+                        setIsAGiXTConfigOpen(false);
+                      }} 
+                    />
                   </div>
-                <button
-                  onClick={() => {
-                    // Save current tasks as template
-                    const template = {
-                      name: 'My Template',
-                      tasks: tasks.map(t => ({
-                        title: t.title,
-                        description: t.description,
-                        priority: t.priority,
-                        tags: t.tags,
-                      }))
-                    };
-                    localStorage.setItem('taskTemplate', JSON.stringify(template));
-                  }}
-                  className="px-3 py-1.5 rounded text-sm bg-gray-600/20 text-gray-300 hover:bg-gray-600/30 transition-colors"
-                  title="Save as template"
-                >
-                  Save Template
-                </button>
-              </div>
-            </div>
-            <div className="flex items-center justify-between mb-4">
+                </div>
+              )}
               <SearchBar
                 searchTerm={searchTerm}
                 onSearchChange={setSearchTerm}
@@ -683,434 +227,100 @@ const TaskPanel: React.FC = () => {
                 filterPriority={filterPriority}
                 onFilterChange={setFilterPriority}
               />
-              <div className="flex items-center gap-2 relative">
-                {isRenamingList && renamingListId ? (
-                  <input
-                    type="text"
-                    value={renamingListName}
-                    onChange={(e) => setRenamingListName(e.target.value)}
-                    onBlur={() => {
-                      const list = lists.find(l => l.id === renamingListId);
-                      if (list) {
-                        updateList({ ...list, name: renamingListName });
-                      }
-                      setIsRenamingList(false);
-                      setRenamingListId(null);
-                      setRenamingListName('');
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter') {
-                        const list = lists.find(l => l.id === renamingListId);
-                        if (list) {
-                          updateList({ ...list, name: renamingListName });
-                        }
-                        setIsRenamingList(false);
-                        setRenamingListId(null);
-                        setRenamingListName('');
-                      }
-                    }}
-                    className="px-3 py-1.5 rounded text-sm bg-[#2A2A2A] text-white hover:bg-[#333333] transition-colors"
-                  />
-                ) : (
-                  <select
-                    value={currentList}
-                    onChange={(e) => {
-                      setCurrentList(e.target.value);
-                      setIsRenamingList(false);
-                      setRenamingListId(null);
-                      setRenamingListName('');
-                    }}
-                    className="px-3 py-1.5 rounded text-sm bg-[#2A2A2A] text-white hover:bg-[#333333] transition-colors"
-                  >
-                    {lists.map(list => (
-                      <option key={list.id} value={list.id} onDoubleClick={() => {
-                        setIsRenamingList(true);
-                        setRenamingListId(list.id);
-                        setRenamingListName(list.name);
-                      }}>{list.name}</option>
-                    ))}
-                  </select>
-                )}
-                <div className="relative">
-                  <button
-                    onClick={() => setShowListActions(!showListActions)}
-                    className="px-3 py-1.5 rounded text-sm bg-indigo-600/20 text-indigo-300 hover:bg-indigo-600/30 transition-colors flex items-center gap-1"
-                    title="List Actions"
-                  >
-                    List Actions
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      className="h-4 w-4"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
-                  {showListActions && (
-                    <div
-                      ref={listActionsRef}
-                      className="absolute top-full mt-2 left-0 bg-[#2A2A2A] rounded-md shadow-lg z-10"
-                    >
-                      <button
-                        onClick={() => {
-                          const newListId = crypto.randomUUID();
-                          addList({ id: newListId, name: 'New List' });
-                          
-                          // Create a default task for the new list
-                          const userId = storageConfig.userId || 'anonymous';
-                          const newTask: Task = {
-                            id: crypto.randomUUID(),
-                            title: 'New Task',
-                            description: 'This is a default task for the new list.',
-                            status: 'todo',
-                            priority: 'medium',
-                            listId: newListId,
-                            createdAt: new Date(),
-                            updatedAt: new Date(),
-                            owner: userId,
-                            collaborators: [],
-                            activityLog: [],
-                            comments: [],
-                            version: 1,
-                            progress: 0
-                          };
-                          addTask(newTask);
-                          
-                          setCurrentList(newListId);
-                          setShowListActions(false);
-                        }}
-                        className="block px-4 py-2 text-white hover:bg-[#333333] w-full text-left flex items-center gap-2"
-                      >
-                        <PlusIcon className="h-4 w-4" />
-                        Add List
-                      </button>
-                      <button
-                        onClick={() => {
-                          setIsRenamingList(true);
-                          setRenamingListId(currentList);
-                          const list = lists.find(l => l.id === currentList);
-                          if (list) {
-                            setRenamingListName(list.name);
-                          }
-                          setShowListActions(false);
-                        }}
-                        className="block px-4 py-2 text-white hover:bg-[#333333] w-full text-left flex items-center gap-2"
-                      >
-                        <PencilIcon className="h-4 w-4" />
-                        Rename List
-                      </button>
-                      <button
-                        onClick={() => {
-                          if (currentList !== 'default') {
-                            deleteList(currentList);
-                            setCurrentList('default');
-                          }
-                          setShowListActions(false);
-                        }}
-                        className="block px-4 py-2 text-white hover:bg-[#333333] w-full text-left flex items-center gap-2"
-                      >
-                        <TrashIcon className="h-4 w-4" />
-                        Delete List
-                      </button>
-                    </div>
-                  )}
-                </div>
-                <select
-                  onChange={(e) => setCurrentLayout(e.target.value as LayoutType)}
-                  className="px-3 py-1.5 rounded text-sm bg-[#2A2A2A] text-white hover:bg-[#333333] transition-colors"
-                >
-                  <option value="default">Default</option>
-                  <option value="developer">Developer</option>
-                </select>
+            </header>
+
+            <div className="space-y-6 mb-8">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <TaskAnalytics tasks={tasks} />
+                <TaskAutomation tasks={tasks} onUpdateTask={updateTask} />
               </div>
+              <TaskDependencyGraph 
+                tasks={tasks}
+                onTaskClick={setSelectedTask}
+              />
             </div>
-          </header>
-          
-          {currentTab === 'tasks' ? (
+            
             <DragDropContext onDragEnd={onDragEnd}>
-              <main className={`task-board ${currentLayout === 'developer' ? 'flex' : (currentView === 'calendar' ? '' : 'grid grid-cols-1 md:grid-cols-3 gap-6')}`}>
-                {currentLayout === 'developer' ? (
-                  <div className="bg-[#2A2A2A] rounded-lg p-4">
-                    <h2 className="text-xl font-semibold mb-4">Developer Layout</h2>
-                    <p className="text-gray-400">
-                      This is a placeholder for the developer layout.
-                      <br />
-                      Repository information and feature requests will be displayed here.
-                    </p>
-                  </div>
-                ) : (
-                  <>
-                    {/* Task Columns */}
-                    <div className="bg-[#2A2A2A] rounded-lg p-4">
-                      <div className="flex justify-between items-center mb-4">
-                        <h2 className="text-xl font-semibold">To Do</h2>
-                        <span className="text-sm text-gray-400">
-                          {filteredTasks().filter(t => t.status === 'todo').length} tasks
-                        </span>
-                      </div>
-                      <TaskListComponent
-                        droppableId="todo"
-                        tasks={filteredTasks().filter(task => task.status === 'todo')}
-                        onUpdateTask={updateTask}
-                        onTaskClick={(task: Task) => setSelectedTask(task)}
-                        onDeleteTask={(task: Task) => deleteTask(task.id)}
-                        onReorderTasks={reorderTasks}
-                        listId={currentList}
-                      />
-                      
-                      {/* Completed Recurring Tasks Section */}
-                      {filteredTasks().some(t => t.recurring && t.status === 'done') && (
-                        <div className="mt-6 border-t border-[#444444] pt-4">
-                          <div 
-                            className="flex items-center gap-2 mb-4 cursor-pointer hover:text-gray-300 transition-colors"
-                            onClick={() => setShowCompletedRecurring(!showCompletedRecurring)}
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              className={`h-4 w-4 transform transition-transform ${showCompletedRecurring ? 'rotate-90' : ''}`}
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M9 5l7 7-7 7"
-                              />
-                            </svg>
-                            <h3 className="text-md font-medium text-gray-400">Completed Recurring Tasks</h3>
-                            <span className="text-sm text-gray-500">
-                              ({filteredTasks().filter(t => t.recurring && t.status === 'done').length})
-                            </span>
-                          </div>
-                          <div className={`transition-all duration-200 ${showCompletedRecurring ? 'block' : 'hidden'}`}>
-                            <TaskListComponent
-                              droppableId="completed-recurring"
-                              tasks={filteredTasks().filter(task => task.recurring && task.status === 'done')}
-                              onUpdateTask={updateTask}
-                              onTaskClick={(task: Task) => setSelectedTask(task)}
-                              onDeleteTask={(task: Task) => deleteTask(task.id)}
-                              onReorderTasks={reorderTasks}
-                              listId={currentList}
-                            />
-                          </div>
-                        </div>
-                      )}
-                    </div>
+              <main className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div className="bg-gray-800 rounded-lg p-4">
+                  <h2 className="text-xl font-semibold mb-4">To Do</h2>
+                  <TaskListComponent
+                    droppableId="todo"
+                    tasks={filteredAndSortedTasks().filter(task => task.status === 'todo')}
+                    onUpdateTask={updateTask}
+                    onTaskClick={(task) => setSelectedTask(task)}
+                    onDeleteTask={(task) => deleteTask(task.id)}
+                    onReorderTasks={reorderTasks}
+                    listId="default"
+                  />
+                </div>
 
-                    <div className="bg-[#2A2A2A] rounded-lg p-4">
-                      <div className="flex justify-between items-center mb-4">
-                        <h2 className="text-xl font-semibold">In Progress</h2>
-                        <span className="text-sm text-gray-400">
-                          {filteredTasks().filter(t => t.status === 'in-progress').length} tasks
-                        </span>
-                      </div>
-                      <TaskListComponent
-                        droppableId="in-progress"
-                        tasks={filteredTasks().filter(task => task.status === 'in-progress')}
-                        onUpdateTask={updateTask}
-                        onTaskClick={(task: Task) => setSelectedTask(task)}
-                        onDeleteTask={(task: Task) => deleteTask(task.id)}
-                        onReorderTasks={reorderTasks}
-                        listId={currentList}
-                      />
-                    </div>
+                <div className="bg-gray-800 rounded-lg p-4">
+                  <h2 className="text-xl font-semibold mb-4">In Progress</h2>
+                  <TaskListComponent
+                    droppableId="in-progress"
+                    tasks={filteredAndSortedTasks().filter(task => task.status === 'in-progress')}
+                    onUpdateTask={updateTask}
+                    onTaskClick={(task) => setSelectedTask(task)}
+                    onDeleteTask={(task) => deleteTask(task.id)}
+                    onReorderTasks={reorderTasks}
+                    listId="default"
+                  />
+                </div>
 
-                    <div className="bg-[#2A2A2A] rounded-lg p-4">
-                      <div className="flex justify-between items-center mb-4">
-                        <div className="flex items-center gap-2">
-                          <h2 className="text-xl font-semibold">Done</h2>
-                          <span className="text-sm text-gray-400">
-                            {filteredTasks().filter(t => t.status === 'done').length} tasks
-                          </span>
-                        </div>
-                        <button
-                          onClick={handleArchiveDone}
-                          className="text-sm text-gray-400 hover:text-white"
-                          title="Archive completed tasks"
-                        >
-                          Archive
-                        </button>
-                      </div>
-                      <TaskListComponent
-                        droppableId="done"
-                        tasks={filteredTasks().filter(task => task.status === 'done')}
-                        onUpdateTask={updateTask}
-                        onTaskClick={(task: Task) => setSelectedTask(task)}
-                        onDeleteTask={(task: Task) => deleteTask(task.id)}
-                        onReorderTasks={reorderTasks}
-                        listId={currentList}
-                      />
-                    </div>
-                  </>
-                )}
-                
-                {isEditorOpen && (
-                  <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-                    <div className="bg-[#212121] p-6 rounded-lg w-full max-w-2xl mx-4">
-                      <div className="flex justify-between items-center mb-4">
-                        <h2 className="text-xl font-semibold">Create New Task</h2>
-                        <button 
-                          onClick={() => setIsEditorOpen(false)}
-                          className="text-gray-400 hover:text-white"
-                        >
-                          ✕
-                        </button>
-                      </div>
-                      <TaskForm 
-                        onSubmit={(task) => {
-                          addTask(task);
-                          setIsEditorOpen(false);
-                        }}
-                        onCancel={() => setIsEditorOpen(false)}
-                        lists={lists}
-                      />
-                    </div>
-                  </div>
-                )}
+                <div className="bg-gray-800 rounded-lg p-4">
+                  <h2 className="text-xl font-semibold mb-4">Done</h2>
+                  <TaskListComponent
+                    droppableId="done"
+                    tasks={filteredAndSortedTasks().filter(task => task.status === 'done')}
+                    onUpdateTask={updateTask}
+                    onTaskClick={(task) => setSelectedTask(task)}
+                    onDeleteTask={(task) => deleteTask(task.id)}
+                    onReorderTasks={reorderTasks}
+                    listId="default"
+                  />
+                </div>
               </main>
             </DragDropContext>
-          ) : (
-            <main className="bg-[#212121] rounded-lg overflow-hidden h-[calc(100vh-12rem)]">
-              {currentTab === 'notes' ? (
-                <NotesEditor />
-              ) : (
-                <WorkspacePanel />
-              )}
-            </main>
-          )}
-
-          {/* Task Details Modal */}
-          {selectedTask && (
-            <TaskDetails
-              task={selectedTask}
-              onClose={() => setSelectedTask(null)}
-              onUpdateTask={(updatedTask: Task) => {
-                updateTask(updatedTask);
-                setSelectedTask(updatedTask);
-              }}
-              onDeleteTask={(task: Task) => {
-                deleteTask(task.id);
-                setSelectedTask(null);
-              }}
-              comments={comments[selectedTask.id] || []}
-              onAddComment={(taskId: string, comment: Omit<Comment, 'id' | 'createdAt'>) => {
-                const newComment = {
-                  ...comment,
-                  id: Date.now().toString(),
-                  createdAt: new Date(),
-                };
-                setComments({
-                  ...comments,
-                  [taskId]: [...(comments[taskId] || []), newComment],
-                });
-              }}
-            />
-          )}
 
-          {currentView === 'calendar' && (
-            <CalendarView
-              tasks={tasks}
-              onTaskClick={(task: Task) => setSelectedTask(task)}
-              onDeleteTask={(task: Task) => {
-                deleteTask(task.id);
-                setSelectedTask(null);
-              }}
-            />
-          )}
-
-          {/* Integrations Modal */}
-          {showIntegrations && (
-            <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-              <div className="bg-[#212121] p-6 rounded-lg w-full max-w-md mx-4">
-                <div className="flex justify-between items-center mb-6">
-                  <h2 className="text-xl font-semibold">Integrations</h2>
-                  <button
-                    onClick={() => setShowIntegrations(false)}
-                    className="text-gray-400 hover:text-white"
-                  >
-                    ✕
-                  </button>
-                </div>
-                <div className="space-y-4">
-                  <IntegrationButton
-                    type="google"
-                    onClick={() => {
-                      console.log('Connecting to Google Calendar...');
-                      // Implement Google Calendar OAuth flow
+            {isEditorOpen && (
+              <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+                <div className="bg-gray-800 p-6 rounded-lg w-full max-w-2xl mx-4">
+                  <TaskForm
+                    onSubmit={(task) => {
+                      addTask(task);
+                      setIsEditorOpen(false);
                     }}
+                    onCancel={() => setIsEditorOpen(false)}
+                    lists={lists}
                   />
-                  <IntegrationButton
-                    type="slack"
-                    onClick={() => {
-                      console.log('Connecting to Slack...');
-                      // Implement Slack OAuth flow
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Delete Confirmation Modal */}
-          {showConfirmDelete && (
-            <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-              <div className="bg-[#212121] p-6 rounded-lg w-full max-w-md mx-4">
-                <h2 className="text-xl font-semibold mb-4">Confirm Delete</h2>
-                <p className="text-gray-300 mb-6">
-                  Are you sure you want to delete "{taskToDelete?.title}"? This action cannot be undone.
-                </p>
-                <div className="flex justify-end space-x-4">
-                  <button
-                    onClick={() => setShowConfirmDelete(false)}
-                    className="px-4 py-2 rounded-lg bg-gray-600 hover:bg-gray-700 transition-colors"
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    onClick={() => {
-                      if (taskToDelete) {
-                        deleteTask(taskToDelete.id);
-                        setShowConfirmDelete(false);
-                        setTaskToDelete(null);
-                        if (selectedTask?.id === taskToDelete.id) {
-                          setSelectedTask(null);
-                        }
-                      }
-                    }}
-                    className="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 transition-colors"
-                  >
-                    Delete
-                  </button>
                 </div>
               </div>
-            </div>
-          )}
-
-          {showAI && (
-            <AIAssistant 
-              onClose={() => setShowAI(false)}
-              selectedAgent={selectedAgent}
-              onGenerateSubtasks={generateSubtasks}
-              onRunChain={runChain}
-              isLoading={isLoadingAI}
-            />
-          )}
-          {showAGiXTConfig && (
-            <AGiXTConfig
-              onClose={() => setShowAGiXTConfig(false)}
-              onSave={handleSaveAGiXTConfig}
-            />
-          )}
-          {showShortcuts && <ShortcutsDialog onClose={() => setShowShortcuts(false)} />}
+            )}
+          </div>
+
+          <div className="flex flex-col">
+            {agixtConfig.backendUrl && agixtConfig.authToken && (
+              <AIAssistantPanel
+                backendUrl={agixtConfig.backendUrl}
+                authToken={agixtConfig.authToken}
+                onTaskSuggestion={handleTaskSuggestion}
+                onTaskOptimization={handleTaskOptimization}
+                tasks={tasks}
+                selectedTask={selectedTask}
+                className="ml-4"
+              />
+            )}
+            {selectedTask && (
+              <TaskDetailsPanel
+                task={selectedTask}
+                onClose={() => setSelectedTask(null)}
+                onUpdateTask={updateTask}
+                allTasks={tasks}
+                className="ml-4 mt-4"
+              />
+            )}
+          </div>
         </div>
       </div>
     </ThemeProvider>
diff --git a/app/components/TaskPriorityMatrix.tsx b/app/components/TaskPriorityMatrix.tsx
new file mode 100644
index 0000000..af9ae84
--- /dev/null
+++ b/app/components/TaskPriorityMatrix.tsx
@@ -0,0 +1,169 @@
+"use client";
+
+import React from 'react';
+import { Task } from '../types/task';
+import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd';
+
+interface TaskPriorityMatrixProps {
+  tasks: Task[];
+  onTaskClick: (task: Task) => void;
+  onUpdateTask: (task: Task) => void;
+  className?: string;
+}
+
+type QuadrantType = 'urgent-important' | 'not-urgent-important' | 'urgent-not-important' | 'not-urgent-not-important';
+
+const TaskPriorityMatrix: React.FC<TaskPriorityMatrixProps> = ({
+  tasks,
+  onTaskClick,
+  onUpdateTask,
+  className = '',
+}) => {
+  const getQuadrantTasks = (quadrant: QuadrantType) => {
+    return tasks.filter(task => {
+      const isUrgent = task.dueDate ? new Date(task.dueDate) <= new Date(Date.now() + 24 * 60 * 60 * 1000) : false;
+      const isImportant = task.priority === 'high';
+
+      switch (quadrant) {
+        case 'urgent-important':
+          return isUrgent && isImportant;
+        case 'not-urgent-important':
+          return !isUrgent && isImportant;
+        case 'urgent-not-important':
+          return isUrgent && !isImportant;
+        case 'not-urgent-not-important':
+          return !isUrgent && !isImportant;
+      }
+    });
+  };
+
+  const handleDragEnd = (result: DropResult) => {
+    if (!result.destination) return;
+
+    const sourceQuadrant = result.source.droppableId as QuadrantType;
+    const destinationQuadrant = result.destination.droppableId as QuadrantType;
+    const taskId = result.draggableId;
+    const task = tasks.find(t => t.id === taskId);
+
+    if (!task) return;
+
+    // Update task priority and due date based on destination quadrant
+    const updatedTask = { ...task };
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    const nextWeek = new Date();
+    nextWeek.setDate(nextWeek.getDate() + 7);
+
+    switch (destinationQuadrant) {
+      case 'urgent-important':
+        updatedTask.priority = 'high';
+        updatedTask.dueDate = tomorrow;
+        break;
+      case 'not-urgent-important':
+        updatedTask.priority = 'high';
+        updatedTask.dueDate = nextWeek;
+        break;
+      case 'urgent-not-important':
+        updatedTask.priority = 'medium';
+        updatedTask.dueDate = tomorrow;
+        break;
+      case 'not-urgent-not-important':
+        updatedTask.priority = 'low';
+        updatedTask.dueDate = nextWeek;
+        break;
+    }
+
+    onUpdateTask(updatedTask);
+  };
+
+  const renderQuadrant = (title: string, description: string, id: QuadrantType, color: string) => (
+    <div className="bg-gray-800 rounded-lg p-4">
+      <div className="mb-4">
+        <h3 className={`text-lg font-semibold ${color}`}>{title}</h3>
+        <p className="text-sm text-gray-400">{description}</p>
+      </div>
+      <Droppable droppableId={id}>
+        {(provided) => (
+          <div
+            ref={provided.innerRef}
+            {...provided.droppableProps}
+            className="min-h-[200px] space-y-2"
+          >
+            {getQuadrantTasks(id).map((task, index) => (
+              <Draggable key={task.id} draggableId={task.id} index={index}>
+                {(provided, snapshot) => (
+                  <div
+                    ref={provided.innerRef}
+                    {...provided.draggableProps}
+                    {...provided.dragHandleProps}
+                    className={`p-3 rounded-lg cursor-pointer transition-colors ${
+                      snapshot.isDragging
+                        ? 'bg-gray-600'
+                        : 'bg-gray-700 hover:bg-gray-600'
+                    }`}
+                    onClick={() => onTaskClick(task)}
+                  >
+                    <div className="flex items-start justify-between">
+                      <div>
+                        <h4 className="font-medium">{task.title}</h4>
+                        {task.dueDate && (
+                          <p className="text-sm text-gray-400">
+                            Due: {new Date(task.dueDate).toLocaleDateString()}
+                          </p>
+                        )}
+                      </div>
+                      <div className={`w-2 h-2 rounded-full ${
+                        task.priority === 'high'
+                          ? 'bg-red-500'
+                          : task.priority === 'medium'
+                          ? 'bg-yellow-500'
+                          : 'bg-green-500'
+                      }`} />
+                    </div>
+                  </div>
+                )}
+              </Draggable>
+            ))}
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </div>
+  );
+
+  return (
+    <div className={`${className}`}>
+      <h2 className="text-xl font-semibold mb-6">Priority Matrix</h2>
+      <DragDropContext onDragEnd={handleDragEnd}>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {renderQuadrant(
+            'Do First',
+            'Urgent and Important',
+            'urgent-important',
+            'text-red-400'
+          )}
+          {renderQuadrant(
+            'Schedule',
+            'Not Urgent but Important',
+            'not-urgent-important',
+            'text-yellow-400'
+          )}
+          {renderQuadrant(
+            'Delegate',
+            'Urgent but Not Important',
+            'urgent-not-important',
+            'text-blue-400'
+          )}
+          {renderQuadrant(
+            'Don\'t Do',
+            'Not Urgent and Not Important',
+            'not-urgent-not-important',
+            'text-green-400'
+          )}
+        </div>
+      </DragDropContext>
+    </div>
+  );
+};
+
+export default TaskPriorityMatrix;
diff --git a/app/components/TaskProgress.tsx b/app/components/TaskProgress.tsx
new file mode 100644
index 0000000..5d4544c
--- /dev/null
+++ b/app/components/TaskProgress.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import React from 'react';
+import { Task } from '../types/task';
+
+interface TaskProgressProps {
+  task: Task;
+  className?: string;
+}
+
+interface Milestone {
+  date: Date;
+  title: string;
+  type: 'creation' | 'update' | 'checkpoint' | 'completion';
+  description?: string;
+}
+
+const TaskProgress: React.FC<TaskProgressProps> = ({ task, className = '' }) => {
+  const getMilestones = (task: Task): Milestone[] => {
+    const milestones: Milestone[] = [
+      {
+        date: new Date(task.createdAt),
+        title: 'Task Created',
+        type: 'creation',
+        description: `Task "${task.title}" was created`,
+      },
+    ];
+
+    // Add checkpoints as milestones
+    if (task.checkpoints) {
+      task.checkpoints.forEach(checkpoint => {
+        milestones.push({
+          date: new Date(checkpoint.createdAt),
+          title: checkpoint.title,
+          type: 'checkpoint',
+          description: checkpoint.description,
+        });
+      });
+    }
+
+    // Add significant updates from activity log
+    if (task.activityLog) {
+      task.activityLog.forEach(activity => {
+        if (activity.action === 'status_changed') {
+          milestones.push({
+            date: new Date(activity.timestamp),
+            title: 'Status Changed',
+            type: 'update',
+            description: `Task status was updated`,
+          });
+        }
+      });
+    }
+
+    // Add completion milestone if task is done
+    if (task.status === 'done' && task.completedAt) {
+      milestones.push({
+        date: new Date(task.completedAt),
+        title: 'Task Completed',
+        type: 'completion',
+        description: `Task completed with ${task.progress}% progress`,
+      });
+    }
+
+    // Sort milestones by date
+    return milestones.sort((a, b) => a.date.getTime() - b.date.getTime());
+  };
+
+  const formatDate = (date: Date) => {
+    return new Date(date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const getTypeColor = (type: Milestone['type']) => {
+    switch (type) {
+      case 'creation':
+        return 'bg-blue-500';
+      case 'update':
+        return 'bg-yellow-500';
+      case 'checkpoint':
+        return 'bg-indigo-500';
+      case 'completion':
+        return 'bg-green-500';
+      default:
+        return 'bg-gray-500';
+    }
+  };
+
+  const milestones = getMilestones(task);
+
+  return (
+    <div className={`bg-gray-800 rounded-lg p-6 ${className}`}>
+      <h3 className="text-lg font-medium mb-6">Progress Timeline</h3>
+      <div className="relative">
+        {/* Timeline line */}
+        <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-700" />
+
+        {/* Milestones */}
+        <div className="space-y-6">
+          {milestones.map((milestone, index) => (
+            <div key={index} className="relative flex items-start ml-4 pl-6">
+              {/* Milestone dot */}
+              <div
+                className={`absolute -left-3 w-3 h-3 rounded-full ${getTypeColor(
+                  milestone.type
+                )}`}
+              />
+              
+              {/* Milestone content */}
+              <div className="flex-1">
+                <div className="flex items-center justify-between mb-1">
+                  <h4 className="font-medium">{milestone.title}</h4>
+                  <span className="text-sm text-gray-400">
+                    {formatDate(milestone.date)}
+                  </span>
+                </div>
+                {milestone.description && (
+                  <p className="text-sm text-gray-400">{milestone.description}</p>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Progress indicator */}
+        <div className="mt-8 pt-6 border-t border-gray-700">
+          <div className="flex justify-between items-center mb-2">
+            <span className="text-sm font-medium">Overall Progress</span>
+            <span className="text-sm text-gray-400">{task.progress}%</span>
+          </div>
+          <div className="w-full bg-gray-700 rounded-full h-2">
+            <div
+              className="bg-indigo-600 rounded-full h-2 transition-all duration-300"
+              style={{ width: `${task.progress}%` }}
+            />
+          </div>
+        </div>
+
+        {/* Time remaining */}
+        {task.dueDate && (
+          <div className="mt-4">
+            <div className="flex justify-between items-center text-sm">
+              <span className="text-gray-400">Time Remaining</span>
+              <span className={`font-medium ${
+                new Date(task.dueDate) < new Date()
+                  ? 'text-red-400'
+                  : 'text-green-400'
+              }`}>
+                {new Date(task.dueDate) < new Date()
+                  ? 'Overdue'
+                  : `${Math.ceil(
+                      (new Date(task.dueDate).getTime() - new Date().getTime()) /
+                        (1000 * 60 * 60 * 24)
+                    )} days left`}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TaskProgress;
diff --git a/app/components/TaskRecurrence.tsx b/app/components/TaskRecurrence.tsx
new file mode 100644
index 0000000..9e3f1c4
--- /dev/null
+++ b/app/components/TaskRecurrence.tsx
@@ -0,0 +1,233 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Task } from '../types/task';
+
+interface TaskRecurrenceProps {
+  task: Task;
+  onUpdateTask: (task: Task) => void;
+  className?: string;
+}
+
+type RecurrenceFrequency = 'daily' | 'weekly' | 'monthly';
+
+interface RecurrencePattern {
+  frequency: RecurrenceFrequency;
+  interval?: number;
+  daysOfWeek?: number[];
+  dayOfMonth?: number;
+}
+
+const TaskRecurrence: React.FC<TaskRecurrenceProps> = ({
+  task,
+  onUpdateTask,
+  className = '',
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [frequency, setFrequency] = useState<RecurrenceFrequency>(
+    task.recurring?.frequency || 'daily'
+  );
+  const [interval, setInterval] = useState(1);
+  const [selectedDays, setSelectedDays] = useState<number[]>([]);
+  const [dayOfMonth, setDayOfMonth] = useState(1);
+
+  const daysOfWeek = [
+    { value: 0, label: 'Sun' },
+    { value: 1, label: 'Mon' },
+    { value: 2, label: 'Tue' },
+    { value: 3, label: 'Wed' },
+    { value: 4, label: 'Thu' },
+    { value: 5, label: 'Fri' },
+    { value: 6, label: 'Sat' },
+  ];
+
+  const handleSaveRecurrence = () => {
+    const recurrencePattern: RecurrencePattern = {
+      frequency,
+      interval,
+      ...(frequency === 'weekly' && { daysOfWeek: selectedDays }),
+      ...(frequency === 'monthly' && { dayOfMonth }),
+    };
+
+    const updatedTask = {
+      ...task,
+      recurring: recurrencePattern,
+    };
+
+    onUpdateTask(updatedTask);
+    setIsEditing(false);
+  };
+
+  const handleRemoveRecurrence = () => {
+    const updatedTask = {
+      ...task,
+      recurring: undefined,
+    };
+
+    onUpdateTask(updatedTask);
+  };
+
+  const toggleDay = (day: number) => {
+    setSelectedDays(prev =>
+      prev.includes(day)
+        ? prev.filter(d => d !== day)
+        : [...prev, day]
+    );
+  };
+
+  const formatRecurrence = (pattern?: RecurrencePattern) => {
+    if (!pattern) return 'No recurrence';
+
+    const intervalText = pattern.interval && pattern.interval > 1
+      ? `every ${pattern.interval} `
+      : '';
+
+    switch (pattern.frequency) {
+      case 'daily':
+        return `Repeats ${intervalText}days`;
+      case 'weekly':
+        if (pattern.daysOfWeek?.length) {
+          const days = pattern.daysOfWeek
+            .sort()
+            .map(d => daysOfWeek[d].label)
+            .join(', ');
+          return `Repeats ${intervalText}weeks on ${days}`;
+        }
+        return `Repeats ${intervalText}weeks`;
+      case 'monthly':
+        const day = pattern.dayOfMonth || 1;
+        const suffix = ['st', 'nd', 'rd'][day - 1] || 'th';
+        return `Repeats ${intervalText}months on the ${day}${suffix}`;
+      default:
+        return 'No recurrence';
+    }
+  };
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      <div className="flex items-center justify-between mb-2">
+        <h4 className="text-sm font-medium text-gray-300">Recurrence</h4>
+        {task.recurring ? (
+          <button
+            onClick={() => setIsEditing(true)}
+            className="text-sm text-indigo-400 hover:text-indigo-300"
+          >
+            Edit
+          </button>
+        ) : (
+          <button
+            onClick={() => setIsEditing(true)}
+            className="text-sm text-indigo-400 hover:text-indigo-300"
+          >
+            Add Recurrence
+          </button>
+        )}
+      </div>
+
+      {!isEditing && (
+        <div className="flex items-center justify-between bg-gray-700 rounded-lg p-3">
+          <span className="text-sm">{formatRecurrence(task.recurring)}</span>
+          {task.recurring && (
+            <button
+              onClick={handleRemoveRecurrence}
+              className="text-gray-400 hover:text-red-400"
+            >
+              ×
+            </button>
+          )}
+        </div>
+      )}
+
+      {isEditing && (
+        <div className="space-y-4 bg-gray-700 rounded-lg p-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Frequency
+            </label>
+            <select
+              value={frequency}
+              onChange={(e) => setFrequency(e.target.value as RecurrenceFrequency)}
+              className="w-full px-3 py-2 bg-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            >
+              <option value="daily">Daily</option>
+              <option value="weekly">Weekly</option>
+              <option value="monthly">Monthly</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Interval
+            </label>
+            <input
+              type="number"
+              min="1"
+              value={interval}
+              onChange={(e) => setInterval(Math.max(1, parseInt(e.target.value)))}
+              className="w-full px-3 py-2 bg-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            />
+            <p className="text-xs text-gray-400 mt-1">
+              Repeat every {interval} {frequency}(s)
+            </p>
+          </div>
+
+          {frequency === 'weekly' && (
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-1">
+                Days of Week
+              </label>
+              <div className="flex flex-wrap gap-2">
+                {daysOfWeek.map(({ value, label }) => (
+                  <button
+                    key={value}
+                    onClick={() => toggleDay(value)}
+                    className={`px-3 py-1 rounded-full text-sm ${
+                      selectedDays.includes(value)
+                        ? 'bg-indigo-600 text-white'
+                        : 'bg-gray-600 text-gray-300 hover:bg-gray-500'
+                    }`}
+                  >
+                    {label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {frequency === 'monthly' && (
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-1">
+                Day of Month
+              </label>
+              <input
+                type="number"
+                min="1"
+                max="31"
+                value={dayOfMonth}
+                onChange={(e) => setDayOfMonth(Math.min(31, Math.max(1, parseInt(e.target.value))))}
+                className="w-full px-3 py-2 bg-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              />
+            </div>
+          )}
+
+          <div className="flex justify-end gap-2 pt-2">
+            <button
+              onClick={() => setIsEditing(false)}
+              className="px-3 py-1 text-sm text-gray-400 hover:text-white"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSaveRecurrence}
+              className="px-3 py-1 text-sm bg-indigo-600 hover:bg-indigo-700 rounded-lg"
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TaskRecurrence;
diff --git a/app/components/TaskTimer.tsx b/app/components/TaskTimer.tsx
new file mode 100644
index 0000000..10dcc19
--- /dev/null
+++ b/app/components/TaskTimer.tsx
@@ -0,0 +1,196 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Task, TimeEntry } from '../types/task';
+import { ActivityLog } from '../types/collaboration';
+
+interface TaskTimerProps {
+  task: Task;
+  onUpdateTask: (task: Task) => void;
+  className?: string;
+}
+
+const TaskTimer: React.FC<TaskTimerProps> = ({
+  task,
+  onUpdateTask,
+  className = '',
+}) => {
+  const [isRunning, setIsRunning] = useState<boolean>(false);
+  const [currentTime, setCurrentTime] = useState<number>(0);
+  const [description, setDescription] = useState<string>('');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const startTimeRef = useRef<Date | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, []);
+
+  const formatTime = (seconds: number) => {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const remainingSeconds = seconds % 60;
+
+    const parts = [];
+    if (hours > 0) parts.push(`${hours}h`);
+    if (minutes > 0 || hours > 0) parts.push(`${minutes}m`);
+    parts.push(`${remainingSeconds}s`);
+
+    return parts.join(' ');
+  };
+
+  const formatDateTime = (date: Date) => {
+    return new Date(date).toLocaleString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const startTimer = () => {
+    if (!isRunning) {
+      const now = new Date();
+      startTimeRef.current = now;
+      setIsRunning(true);
+      timerRef.current = setInterval(() => {
+        setCurrentTime(prev => prev + 1);
+      }, 1000);
+    }
+  };
+
+  const stopTimer = () => {
+    const startTime = startTimeRef.current;
+    if (isRunning && startTime) {
+      setIsRunning(false);
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+
+      const endTime = new Date();
+      const timeEntry: TimeEntry = {
+        id: Date.now().toString(),
+        startTime,
+        endTime,
+        duration: currentTime,
+        description: description.trim() || undefined,
+      };
+
+      const activityLogEntry: ActivityLog = {
+        id: Date.now().toString(),
+        taskId: task.id,
+        userId: 'current-user',
+        action: 'updated',
+        timestamp: endTime,
+      };
+
+      const updatedTask = {
+        ...task,
+        timeEntries: [...(task.timeEntries || []), timeEntry],
+        activityLog: [...(task.activityLog || []), activityLogEntry],
+      };
+
+      onUpdateTask(updatedTask);
+      setCurrentTime(0);
+      setDescription('');
+      startTimeRef.current = null;
+    }
+  };
+
+  const getTotalTime = () => {
+    return (task.timeEntries || []).reduce((total: number, entry: TimeEntry) => total + entry.duration, 0);
+  };
+
+  const deleteTimeEntry = (entryId: string) => {
+    const updatedTask = {
+      ...task,
+      timeEntries: task.timeEntries?.filter(entry => entry.id !== entryId) || [],
+    };
+    onUpdateTask(updatedTask);
+  };
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      <div className="flex items-center justify-between mb-2">
+        <h4 className="text-sm font-medium text-gray-300">Time Tracking</h4>
+        <span className="text-xs text-gray-400">
+          Total: {formatTime(getTotalTime())}
+        </span>
+      </div>
+
+      <div className="space-y-3">
+        <div className="flex items-center gap-3">
+          <div className="flex-1 text-2xl font-mono tabular-nums">
+            {formatTime(currentTime)}
+          </div>
+          <button
+            onClick={isRunning ? stopTimer : startTimer}
+            className={`px-4 py-2 rounded-lg text-sm ${
+              isRunning
+                ? 'bg-red-600 hover:bg-red-700'
+                : 'bg-green-600 hover:bg-green-700'
+            } transition-colors`}
+          >
+            {isRunning ? 'Stop' : 'Start'}
+          </button>
+        </div>
+
+        {isRunning && (
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="What are you working on? (optional)"
+            className="w-full px-3 py-2 bg-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
+            rows={2}
+          />
+        )}
+      </div>
+
+      {/* Time entries list */}
+      <div className="space-y-2 mt-4">
+        {task.timeEntries?.map((entry: TimeEntry) => (
+          <div
+            key={entry.id}
+            className="p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors group"
+          >
+            <div className="flex items-center justify-between">
+              <div className="flex-1">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium">
+                    {formatTime(entry.duration)}
+                  </span>
+                  <button
+                    onClick={() => deleteTimeEntry(entry.id)}
+                    className="text-gray-400 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
+                  >
+                    ×
+                  </button>
+                </div>
+                <div className="text-xs text-gray-400 mt-1">
+                  {formatDateTime(entry.startTime)}
+                  {entry.endTime && ` - ${formatDateTime(entry.endTime)}`}
+                </div>
+                {entry.description && (
+                  <p className="text-sm text-gray-300 mt-2">{entry.description}</p>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+
+        {(!task.timeEntries || task.timeEntries.length === 0) && !isRunning && (
+          <div className="text-center py-6 text-gray-400">
+            <p>No time entries yet</p>
+            <p className="text-sm">Start the timer to track your work</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TaskTimer;
diff --git a/app/hooks/useAIAssistant.ts b/app/hooks/useAIAssistant.ts
new file mode 100644
index 0000000..1cb3022
--- /dev/null
+++ b/app/hooks/useAIAssistant.ts
@@ -0,0 +1,165 @@
+import { useState, useCallback } from 'react';
+import { Task } from '../types/task';
+import { initializeAGiXT, handleGenerateSubtasks, handleRunChain } from '../utils/agixt';
+
+interface UseAIAssistantProps {
+  backendUrl: string;
+  authToken: string;
+}
+
+export const useAIAssistant = ({ backendUrl, authToken }: UseAIAssistantProps) => {
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [selectedAgent, setSelectedAgent] = useState<string>('');
+  const [error, setError] = useState<string | null>(null);
+
+  const generateTaskSuggestions = useCallback(async (context: string) => {
+    setIsProcessing(true);
+    setError(null);
+    try {
+      const agixt = await initializeAGiXT(backendUrl, authToken);
+      if (!agixt) {
+        throw new Error('Failed to initialize AGiXT');
+      }
+
+      const prompt = `Given the following context, suggest 3-5 tasks that would be relevant and helpful:
+      Context: ${context}
+      
+      Format your response as a JSON array of task objects with the following properties:
+      - title: A clear, concise task title
+      - description: Detailed description of what needs to be done
+      - priority: "low", "medium", or "high"
+      - estimatedTime: Estimated time to complete in minutes`;
+
+      const result = await agixt.runChain(
+        'Task Suggestions',
+        prompt,
+        selectedAgent,
+        false,
+        1,
+        { conversation_name: `task_suggestions_${Date.now()}` }
+      );
+
+      try {
+        return JSON.parse(result);
+      } catch {
+        return [];
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to generate task suggestions');
+      return [];
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [backendUrl, authToken, selectedAgent]);
+
+  const optimizeTaskOrder = useCallback(async (tasks: Task[]) => {
+    setIsProcessing(true);
+    setError(null);
+    try {
+      const agixt = await initializeAGiXT(backendUrl, authToken);
+      if (!agixt) {
+        throw new Error('Failed to initialize AGiXT');
+      }
+
+      const prompt = `Given the following list of tasks, suggest the optimal order to complete them based on priority, dependencies, and efficiency:
+
+      Tasks:
+      ${tasks.map(task => `- ${task.title} (Priority: ${task.priority})`).join('\n')}
+
+      Format your response as a JSON array of task IDs in the optimal order.`;
+
+      const result = await agixt.runChain(
+        'Task Optimization',
+        prompt,
+        selectedAgent,
+        false,
+        1,
+        { conversation_name: `task_optimization_${Date.now()}` }
+      );
+
+      try {
+        return JSON.parse(result);
+      } catch {
+        return null;
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to optimize task order');
+      return null;
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [backendUrl, authToken, selectedAgent]);
+
+  const analyzeTaskProgress = useCallback(async (task: Task) => {
+    setIsProcessing(true);
+    setError(null);
+    try {
+      const agixt = await initializeAGiXT(backendUrl, authToken);
+      if (!agixt) {
+        throw new Error('Failed to initialize AGiXT');
+      }
+
+      const prompt = `Analyze the following task and provide insights on progress and potential blockers:
+
+      Task Title: ${task.title}
+      Description: ${task.description}
+      Current Status: ${task.status}
+      Progress: ${task.progress}%
+      Subtasks Completed: ${task.subtasks?.filter(st => st.completed).length || 0}/${task.subtasks?.length || 0}
+
+      Format your response as a JSON object with the following properties:
+      - progressAnalysis: String describing the current progress
+      - potentialBlockers: Array of potential blockers
+      - recommendations: Array of recommendations to move forward
+      - estimatedTimeToCompletion: Number of minutes estimated to complete`;
+
+      const result = await agixt.runChain(
+        'Task Analysis',
+        prompt,
+        selectedAgent,
+        false,
+        1,
+        { conversation_name: `task_analysis_${Date.now()}` }
+      );
+
+      try {
+        return JSON.parse(result);
+      } catch {
+        return null;
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to analyze task progress');
+      return null;
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [backendUrl, authToken, selectedAgent]);
+
+  const generateSubtasks = useCallback(async (task: Task) => {
+    setIsProcessing(true);
+    setError(null);
+    try {
+      const result = await handleGenerateSubtasks(task, selectedAgent, backendUrl, authToken);
+      if (!result) {
+        throw new Error('Failed to generate subtasks');
+      }
+      return result;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to generate subtasks');
+      return null;
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [backendUrl, authToken, selectedAgent]);
+
+  return {
+    isProcessing,
+    error,
+    selectedAgent,
+    setSelectedAgent,
+    generateTaskSuggestions,
+    optimizeTaskOrder,
+    analyzeTaskProgress,
+    generateSubtasks,
+  };
+};
diff --git a/app/page.tsx b/app/page.tsx
index 7063ccb..cab1bfa 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,21 +1,40 @@
 "use client";
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import TaskPanel from './components/TaskPanel';
 import LoginForm from './components/LoginForm';
+import LoadingScreen from './components/LoadingScreen';
 import { useAuthContext } from './providers/AuthProvider';
 
 export default function Home() {
-  const { token, noAuth } = useAuthContext();
+  const { token, noAuth, loading } = useAuthContext();
+
+  useEffect(() => {
+    console.log('Home page auth state:', {
+      token,
+      noAuth,
+      loading,
+      shouldShowTaskPanel: !!(token || noAuth)
+    });
+  }, [token, noAuth, loading]);
+
+  // Show loading screen during initial auth check
+  if (loading) {
+    return <LoadingScreen />;
+  }
+
+  // After loading, show either TaskPanel or LoginForm based on auth state
   return (
-    <main className="min-h-screen font-[family-name:var(--font-geist-sans)] bg-[#111111]">
+    <div className="min-h-screen font-[family-name:var(--font-geist-sans)] bg-[#111111]">
       {(token || noAuth) ? (
-        <TaskPanel />
+        <div className="w-full h-full">
+          <TaskPanel key={token || 'no-auth'} />
+        </div>
       ) : (
         <div className="flex items-center justify-center h-screen">
           <LoginForm />
         </div>
       )}
-    </main>
+    </div>
   );
 }
diff --git a/app/providers/AuthProvider.tsx b/app/providers/AuthProvider.tsx
index c98361f..815c96b 100644
--- a/app/providers/AuthProvider.tsx
+++ b/app/providers/AuthProvider.tsx
@@ -1,17 +1,50 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useAuth } from '../utils/auth';
 
 export const AuthContext = React.createContext<ReturnType<typeof useAuth> | null>(null);
 
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   const auth = useAuth();
-  // Key changes when auth state changes, forcing a re-render
-  const authKey = `${auth.isAuthenticated}-${auth.noAuth}`;
+  const [mounted, setMounted] = useState(false);
+
+  // Initialize auth state
+  useEffect(() => {
+    const init = async () => {
+      try {
+        // Wait for any initial auth state to be loaded
+        await new Promise(resolve => setTimeout(resolve, 0));
+        setMounted(true);
+      } catch (error) {
+        console.error('Error initializing auth:', error);
+        setMounted(true);
+      }
+    };
+
+    init();
+  }, []);
+
+  // Log state changes
+  useEffect(() => {
+    if (mounted) {
+      console.log('AuthProvider: Auth state changed', {
+        isAuthenticated: auth.isAuthenticated,
+        noAuth: auth.noAuth,
+        token: auth.token,
+        loading: auth.loading
+      });
+    }
+  }, [auth.isAuthenticated, auth.noAuth, auth.token, auth.loading, mounted]);
+
+  // Show nothing until mounted to prevent hydration issues
+  if (!mounted) {
+    return null;
+  }
+
   return (
     <AuthContext.Provider value={auth}>
-      <div key={authKey}>{children}</div>
+      {children}
     </AuthContext.Provider>
   );
 };
diff --git a/app/tasks/page.tsx b/app/tasks/page.tsx
new file mode 100644
index 0000000..2e0dab0
--- /dev/null
+++ b/app/tasks/page.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import TaskPanel from '../components/TaskPanel';
+
+export default function TasksPage() {
+  const router = useRouter();
+
+  useEffect(() => {
+    // Check auth state
+    const noAuth = localStorage.getItem('noAuth') === 'true';
+    const token = localStorage.getItem('authToken');
+
+    if (!noAuth && !token) {
+      console.log('TasksPage: User is not authenticated, redirecting to login');
+      router.push('/');
+      return;
+    }
+  }, [router]);
+
+  return (
+    <main className="min-h-screen font-[family-name:var(--font-geist-sans)] bg-[#111111]">
+      <TaskPanel />
+    </main>
+  );
+}
diff --git a/app/types/task.ts b/app/types/task.ts
index 07af5dd..d002de1 100644
--- a/app/types/task.ts
+++ b/app/types/task.ts
@@ -1,5 +1,31 @@
 import { Collaborator, ActivityLog, Comment } from './collaboration';
 
+export interface Attachment {
+  id: string;
+  name: string;
+  type: string;
+  size: number;
+  url: string;
+  uploadedAt: Date;
+  uploadedBy: string;
+}
+
+export interface TimeEntry {
+  id: string;
+  startTime: Date;
+  endTime?: Date;
+  duration: number;
+  description?: string;
+}
+
+export interface Reminder {
+  id: string;
+  time: Date;
+  message: string;
+  type: 'due_date' | 'milestone' | 'custom';
+  isEnabled: boolean;
+}
+
 export interface Checkpoint {
   id: string;
   title: string;
@@ -34,6 +60,9 @@ export interface Task {
     completed: boolean;
     createdAt: Date;
   }[];
+  attachments?: Attachment[];
+  timeEntries?: TimeEntry[];
+  reminders?: Reminder[];
   completedAt?: Date;
   createdAt: Date;
   updatedAt: Date;
diff --git a/app/utils/auth.ts b/app/utils/auth.ts
index fa99218..b8cfa7f 100644
--- a/app/utils/auth.ts
+++ b/app/utils/auth.ts
@@ -51,45 +51,77 @@ export const login = async (username: string, password: string): Promise<AuthRes
   }
 };
 
+interface AuthState {
+  isAuthenticated: boolean;
+  username: string | null;
+  token: string | null;
+  loading: boolean;
+  noAuth: boolean;
+}
+
 export const useAuth = () => {
-  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
-  const [username, setUsername] = useState<string | null>(null);
-  const [token, setToken] = useState<string | null>(null);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [noAuth, setNoAuth] = useState<boolean>(false);
+  const [authState, setAuthState] = useState<AuthState>({
+    isAuthenticated: false,
+    username: null,
+    token: null,
+    loading: true,
+    noAuth: false
+  });
 
+  // Initialize auth state from localStorage
   useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
+    const initializeAuth = () => {
+      if (typeof window !== 'undefined') {
+        const storedToken = localStorage.getItem('authToken');
+        const storedUsername = localStorage.getItem('username');
+        const storedNoAuth = localStorage.getItem('noAuth') === 'true';
 
-    const storedToken = localStorage.getItem('authToken');
-    const storedUsername = localStorage.getItem('username');
-    const storedNoAuth = localStorage.getItem('noAuth') === 'true';
-    
-    setIsAuthenticated(!!storedToken);
-    setUsername(storedUsername);
-    setToken(storedToken);
-    setNoAuth(storedNoAuth);
+        setAuthState({
+          isAuthenticated: !!storedToken,
+          username: storedUsername,
+          token: storedToken,
+          loading: false,
+          noAuth: storedNoAuth
+        });
+
+        console.log('Auth state initialized:', {
+          isAuthenticated: !!storedToken,
+          username: storedUsername,
+          token: storedToken,
+          noAuth: storedNoAuth,
+          loading: false
+        });
+      }
+    };
+
+    initializeAuth();
   }, []);
 
   const loginUser = async (username: string, password: string) => {
-    setLoading(true);
+    setAuthState(prev => ({ ...prev, loading: true }));
     try {
       const response = await login(username, password);
       if (response.success && response.token && typeof window !== 'undefined') {
         localStorage.setItem('authToken', response.token);
         localStorage.setItem('username', username);
-        setIsAuthenticated(true);
-        setUsername(username);
-        setToken(response.token);
+        localStorage.removeItem('noAuth');
+        
+        setAuthState({
+          isAuthenticated: true,
+          username,
+          token: response.token,
+          loading: false,
+          noAuth: false
+        });
+        console.log('loginUser success:', authState);
+      } else {
+        console.log('loginUser failed:', response);
       }
       return response;
     } catch (error) {
       console.error('Login error:', error);
+      setAuthState(prev => ({ ...prev, loading: false }));
       return { success: false, message: 'An error occurred during login.' };
-    } finally {
-      setLoading(false);
     }
   };
 
@@ -98,53 +130,57 @@ export const useAuth = () => {
       return { success: false, message: 'Cannot continue without auth in non-browser environment' };
     }
     
-    // Update state first
-    setNoAuth(true);
-    setIsAuthenticated(false);
-    setToken(null);
-    setUsername(null);
+    try {
+      setAuthState(prev => ({ ...prev, loading: true }));
       
-    // Update localStorage
-    localStorage.setItem('noAuth', 'true');
-    localStorage.removeItem('authToken');
-    localStorage.removeItem('username');
-    
-    return { success: true, message: 'Continuing without authentication' };
-  };
-
-  const logout = () => {
-    if (typeof window !== 'undefined') {
+      // Set noAuth flag in localStorage
+      localStorage.setItem('noAuth', 'true');
       localStorage.removeItem('authToken');
       localStorage.removeItem('username');
+      
+      // Update state immediately
+      setAuthState({
+        isAuthenticated: false,
+        username: null,
+        token: null,
+        loading: false,
+        noAuth: true
+      });
+      console.log('continueWithoutAuth success:', authState);
+      
+      return { success: true, message: 'Continuing without authentication' };
+    } catch (error) {
+      console.error('Error in continueWithoutAuth:', error);
       localStorage.removeItem('noAuth');
+      setAuthState(prev => ({
+        ...prev,
+        noAuth: false,
+        loading: false
+      }));
+      return { success: false, message: 'An error occurred while continuing without auth' };
     }
-    setIsAuthenticated(false);
-    setUsername(null);
-    setToken(null);
-    setNoAuth(false);
   };
 
-  const updateNoAuth = (value: boolean) => {
+  const logout = () => {
     if (typeof window !== 'undefined') {
-      if (value) {
-        localStorage.setItem('noAuth', 'true');
-        setNoAuth(true);
-      } else {
-        localStorage.removeItem('noAuth');
-        setNoAuth(false);
-      }
+      localStorage.removeItem('authToken');
+      localStorage.removeItem('username');
+      localStorage.removeItem('noAuth');
+      
+      setAuthState({
+        isAuthenticated: false,
+        username: null,
+        token: null,
+        loading: false,
+        noAuth: false
+      });
     }
   };
 
-  return { 
-    isAuthenticated, 
-    loading, 
-    logout, 
-    username, 
-    token, 
+  return {
+    ...authState,
     loginUser,
-    noAuth,
-    setNoAuth: updateNoAuth,
+    logout,
     continueWithoutAuth
   };
 };
diff --git a/package-lock.json b/package-lock.json
index a6b60e0..4290af3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,9 +11,11 @@
                   "dependencies": {
                         "@hello-pangea/dnd": "^17.0.0",
                         "@heroicons/react": "^2.2.0",
+                        "@types/d3": "^7.4.3",
                         "@types/slate": "^0.47.16",
                         "@types/slate-react": "^0.50.0",
                         "agixt": "^1.0.57",
+                        "d3": "^7.9.0",
                         "html2canvas": "^1.4.1",
                         "next": "15.0.4",
                         "react": "^19.0.0",
@@ -1047,6 +1049,265 @@
                         "tslib": "^2.4.0"
                   }
             },
+            "node_modules/@types/d3": {
+                  "version": "7.4.3",
+                  "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+                  "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+                  "license": "MIT",
+                  "dependencies": {
+                        "@types/d3-array": "*",
+                        "@types/d3-axis": "*",
+                        "@types/d3-brush": "*",
+                        "@types/d3-chord": "*",
+                        "@types/d3-color": "*",
+                        "@types/d3-contour": "*",
+                        "@types/d3-delaunay": "*",
+                        "@types/d3-dispatch": "*",
+                        "@types/d3-drag": "*",
+                        "@types/d3-dsv": "*",
+                        "@types/d3-ease": "*",
+                        "@types/d3-fetch": "*",
+                        "@types/d3-force": "*",
+                        "@types/d3-format": "*",
+                        "@types/d3-geo": "*",
+                        "@types/d3-hierarchy": "*",
+                        "@types/d3-interpolate": "*",
+                        "@types/d3-path": "*",
+                        "@types/d3-polygon": "*",
+                        "@types/d3-quadtree": "*",
+                        "@types/d3-random": "*",
+                        "@types/d3-scale": "*",
+                        "@types/d3-scale-chromatic": "*",
+                        "@types/d3-selection": "*",
+                        "@types/d3-shape": "*",
+                        "@types/d3-time": "*",
+                        "@types/d3-time-format": "*",
+                        "@types/d3-timer": "*",
+                        "@types/d3-transition": "*",
+                        "@types/d3-zoom": "*"
+                  }
+            },
+            "node_modules/@types/d3-array": {
+                  "version": "3.2.1",
+                  "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+                  "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-axis": {
+                  "version": "3.0.6",
+                  "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+                  "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+                  "license": "MIT",
+                  "dependencies": {
+                        "@types/d3-selection": "*"
+                  }
+            },
+            "node_modules/@types/d3-brush": {
+                  "version": "3.0.6",
+                  "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+                  "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+                  "license": "MIT",
+                  "dependencies": {
+                        "@types/d3-selection": "*"
+                  }
+            },
+            "node_modules/@types/d3-chord": {
+                  "version": "3.0.6",
+                  "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+                  "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-color": {
+                  "version": "3.1.3",
+                  "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+                  "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-contour": {
+                  "version": "3.0.6",
+                  "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+                  "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+                  "license": "MIT",
+                  "dependencies": {
+                        "@types/d3-array": "*",
+                        "@types/geojson": "*"
+                  }
+            },
+            "node_modules/@types/d3-delaunay": {
+                  "version": "6.0.4",
+                  "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+                  "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-dispatch": {
+                  "version": "3.0.6",
+                  "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.6.tgz",
+                  "integrity": "sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-drag": {
+                  "version": "3.0.7",
+                  "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+                  "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+                  "license": "MIT",
+                  "dependencies": {
+                        "@types/d3-selection": "*"
+                  }
+            },
+            "node_modules/@types/d3-dsv": {
+                  "version": "3.0.7",
+                  "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+                  "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-ease": {
+                  "version": "3.0.2",
+                  "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+                  "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-fetch": {
+                  "version": "3.0.7",
+                  "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+                  "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+                  "license": "MIT",
+                  "dependencies": {
+                        "@types/d3-dsv": "*"
+                  }
+            },
+            "node_modules/@types/d3-force": {
+                  "version": "3.0.10",
+                  "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+                  "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-format": {
+                  "version": "3.0.4",
+                  "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+                  "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-geo": {
+                  "version": "3.1.0",
+                  "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+                  "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+                  "license": "MIT",
+                  "dependencies": {
+                        "@types/geojson": "*"
+                  }
+            },
+            "node_modules/@types/d3-hierarchy": {
+                  "version": "3.1.7",
+                  "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+                  "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-interpolate": {
+                  "version": "3.0.4",
+                  "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+                  "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+                  "license": "MIT",
+                  "dependencies": {
+                        "@types/d3-color": "*"
+                  }
+            },
+            "node_modules/@types/d3-path": {
+                  "version": "3.1.0",
+                  "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
+                  "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-polygon": {
+                  "version": "3.0.2",
+                  "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+                  "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-quadtree": {
+                  "version": "3.0.6",
+                  "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+                  "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-random": {
+                  "version": "3.0.3",
+                  "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+                  "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-scale": {
+                  "version": "4.0.8",
+                  "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
+                  "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
+                  "license": "MIT",
+                  "dependencies": {
+                        "@types/d3-time": "*"
+                  }
+            },
+            "node_modules/@types/d3-scale-chromatic": {
+                  "version": "3.1.0",
+                  "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+                  "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-selection": {
+                  "version": "3.0.11",
+                  "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+                  "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-shape": {
+                  "version": "3.1.6",
+                  "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
+                  "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
+                  "license": "MIT",
+                  "dependencies": {
+                        "@types/d3-path": "*"
+                  }
+            },
+            "node_modules/@types/d3-time": {
+                  "version": "3.0.4",
+                  "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+                  "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-time-format": {
+                  "version": "4.0.3",
+                  "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+                  "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-timer": {
+                  "version": "3.0.2",
+                  "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+                  "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+                  "license": "MIT"
+            },
+            "node_modules/@types/d3-transition": {
+                  "version": "3.0.9",
+                  "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+                  "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+                  "license": "MIT",
+                  "dependencies": {
+                        "@types/d3-selection": "*"
+                  }
+            },
+            "node_modules/@types/d3-zoom": {
+                  "version": "3.0.8",
+                  "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+                  "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+                  "license": "MIT",
+                  "dependencies": {
+                        "@types/d3-interpolate": "*",
+                        "@types/d3-selection": "*"
+                  }
+            },
+            "node_modules/@types/geojson": {
+                  "version": "7946.0.15",
+                  "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.15.tgz",
+                  "integrity": "sha512-9oSxFzDCT2Rj6DfcHF8G++jxBKS7mBqXl5xrRW+Kbvjry6Uduya2iiwqHPhVXpasAVMBYKkEPGgKhd3+/HZ6xA==",
+                  "license": "MIT"
+            },
             "node_modules/@types/is-hotkey": {
                   "version": "0.1.10",
                   "resolved": "https://registry.npmjs.org/@types/is-hotkey/-/is-hotkey-0.1.10.tgz",
@@ -1422,6 +1683,425 @@
                   "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
                   "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
             },
+            "node_modules/d3": {
+                  "version": "7.9.0",
+                  "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+                  "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-array": "3",
+                        "d3-axis": "3",
+                        "d3-brush": "3",
+                        "d3-chord": "3",
+                        "d3-color": "3",
+                        "d3-contour": "4",
+                        "d3-delaunay": "6",
+                        "d3-dispatch": "3",
+                        "d3-drag": "3",
+                        "d3-dsv": "3",
+                        "d3-ease": "3",
+                        "d3-fetch": "3",
+                        "d3-force": "3",
+                        "d3-format": "3",
+                        "d3-geo": "3",
+                        "d3-hierarchy": "3",
+                        "d3-interpolate": "3",
+                        "d3-path": "3",
+                        "d3-polygon": "3",
+                        "d3-quadtree": "3",
+                        "d3-random": "3",
+                        "d3-scale": "4",
+                        "d3-scale-chromatic": "3",
+                        "d3-selection": "3",
+                        "d3-shape": "3",
+                        "d3-time": "3",
+                        "d3-time-format": "4",
+                        "d3-timer": "3",
+                        "d3-transition": "3",
+                        "d3-zoom": "3"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-array": {
+                  "version": "3.2.4",
+                  "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+                  "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "internmap": "1 - 2"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-axis": {
+                  "version": "3.0.0",
+                  "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+                  "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+                  "license": "ISC",
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-brush": {
+                  "version": "3.0.0",
+                  "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+                  "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-dispatch": "1 - 3",
+                        "d3-drag": "2 - 3",
+                        "d3-interpolate": "1 - 3",
+                        "d3-selection": "3",
+                        "d3-transition": "3"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-chord": {
+                  "version": "3.0.1",
+                  "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+                  "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-path": "1 - 3"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-color": {
+                  "version": "3.1.0",
+                  "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+                  "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+                  "license": "ISC",
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-contour": {
+                  "version": "4.0.2",
+                  "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+                  "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-array": "^3.2.0"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-delaunay": {
+                  "version": "6.0.4",
+                  "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+                  "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "delaunator": "5"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-dispatch": {
+                  "version": "3.0.1",
+                  "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+                  "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+                  "license": "ISC",
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-drag": {
+                  "version": "3.0.0",
+                  "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+                  "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-dispatch": "1 - 3",
+                        "d3-selection": "3"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-dsv": {
+                  "version": "3.0.1",
+                  "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+                  "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "commander": "7",
+                        "iconv-lite": "0.6",
+                        "rw": "1"
+                  },
+                  "bin": {
+                        "csv2json": "bin/dsv2json.js",
+                        "csv2tsv": "bin/dsv2dsv.js",
+                        "dsv2dsv": "bin/dsv2dsv.js",
+                        "dsv2json": "bin/dsv2json.js",
+                        "json2csv": "bin/json2dsv.js",
+                        "json2dsv": "bin/json2dsv.js",
+                        "json2tsv": "bin/json2dsv.js",
+                        "tsv2csv": "bin/dsv2dsv.js",
+                        "tsv2json": "bin/dsv2json.js"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-dsv/node_modules/commander": {
+                  "version": "7.2.0",
+                  "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+                  "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+                  "license": "MIT",
+                  "engines": {
+                        "node": ">= 10"
+                  }
+            },
+            "node_modules/d3-ease": {
+                  "version": "3.0.1",
+                  "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+                  "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+                  "license": "BSD-3-Clause",
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-fetch": {
+                  "version": "3.0.1",
+                  "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+                  "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-dsv": "1 - 3"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-force": {
+                  "version": "3.0.0",
+                  "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+                  "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-dispatch": "1 - 3",
+                        "d3-quadtree": "1 - 3",
+                        "d3-timer": "1 - 3"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-format": {
+                  "version": "3.1.0",
+                  "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+                  "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+                  "license": "ISC",
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-geo": {
+                  "version": "3.1.1",
+                  "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+                  "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-array": "2.5.0 - 3"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-hierarchy": {
+                  "version": "3.1.2",
+                  "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+                  "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+                  "license": "ISC",
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-interpolate": {
+                  "version": "3.0.1",
+                  "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+                  "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-color": "1 - 3"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-path": {
+                  "version": "3.1.0",
+                  "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+                  "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+                  "license": "ISC",
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-polygon": {
+                  "version": "3.0.1",
+                  "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+                  "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+                  "license": "ISC",
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-quadtree": {
+                  "version": "3.0.1",
+                  "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+                  "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+                  "license": "ISC",
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-random": {
+                  "version": "3.0.1",
+                  "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+                  "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+                  "license": "ISC",
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-scale": {
+                  "version": "4.0.2",
+                  "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+                  "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-array": "2.10.0 - 3",
+                        "d3-format": "1 - 3",
+                        "d3-interpolate": "1.2.0 - 3",
+                        "d3-time": "2.1.1 - 3",
+                        "d3-time-format": "2 - 4"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-scale-chromatic": {
+                  "version": "3.1.0",
+                  "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+                  "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-color": "1 - 3",
+                        "d3-interpolate": "1 - 3"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-selection": {
+                  "version": "3.0.0",
+                  "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+                  "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+                  "license": "ISC",
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-shape": {
+                  "version": "3.2.0",
+                  "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+                  "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-path": "^3.1.0"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-time": {
+                  "version": "3.1.0",
+                  "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+                  "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-array": "2 - 3"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-time-format": {
+                  "version": "4.1.0",
+                  "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+                  "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-time": "1 - 3"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-timer": {
+                  "version": "3.0.1",
+                  "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+                  "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+                  "license": "ISC",
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/d3-transition": {
+                  "version": "3.0.1",
+                  "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+                  "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-color": "1 - 3",
+                        "d3-dispatch": "1 - 3",
+                        "d3-ease": "1 - 3",
+                        "d3-interpolate": "1 - 3",
+                        "d3-timer": "1 - 3"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  },
+                  "peerDependencies": {
+                        "d3-selection": "2 - 3"
+                  }
+            },
+            "node_modules/d3-zoom": {
+                  "version": "3.0.0",
+                  "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+                  "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "d3-dispatch": "1 - 3",
+                        "d3-drag": "2 - 3",
+                        "d3-interpolate": "1 - 3",
+                        "d3-selection": "2 - 3",
+                        "d3-transition": "2 - 3"
+                  },
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
+            "node_modules/delaunator": {
+                  "version": "5.0.1",
+                  "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+                  "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+                  "license": "ISC",
+                  "dependencies": {
+                        "robust-predicates": "^3.0.2"
+                  }
+            },
             "node_modules/delayed-stream": {
                   "version": "1.0.0",
                   "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -1688,6 +2368,18 @@
                         "node": ">=8.0.0"
                   }
             },
+            "node_modules/iconv-lite": {
+                  "version": "0.6.3",
+                  "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+                  "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+                  "license": "MIT",
+                  "dependencies": {
+                        "safer-buffer": ">= 2.1.2 < 3.0.0"
+                  },
+                  "engines": {
+                        "node": ">=0.10.0"
+                  }
+            },
             "node_modules/immer": {
                   "version": "10.1.1",
                   "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
@@ -1705,6 +2397,15 @@
                         "node": ">=0.10.0"
                   }
             },
+            "node_modules/internmap": {
+                  "version": "2.0.3",
+                  "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+                  "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+                  "license": "ISC",
+                  "engines": {
+                        "node": ">=12"
+                  }
+            },
             "node_modules/is-arrayish": {
                   "version": "0.3.2",
                   "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
@@ -2456,6 +3157,12 @@
                         "node": ">=0.10.0"
                   }
             },
+            "node_modules/robust-predicates": {
+                  "version": "3.0.2",
+                  "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+                  "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+                  "license": "Unlicense"
+            },
             "node_modules/run-parallel": {
                   "version": "1.2.0",
                   "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -2479,6 +3186,18 @@
                         "queue-microtask": "^1.2.2"
                   }
             },
+            "node_modules/rw": {
+                  "version": "1.3.3",
+                  "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+                  "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+                  "license": "BSD-3-Clause"
+            },
+            "node_modules/safer-buffer": {
+                  "version": "2.1.2",
+                  "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+                  "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+                  "license": "MIT"
+            },
             "node_modules/scheduler": {
                   "version": "0.25.0",
                   "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
diff --git a/package.json b/package.json
index e954636..8b75215 100644
--- a/package.json
+++ b/package.json
@@ -3,38 +3,40 @@
       "version": "0.1.0",
       "private": true,
       "scripts": {
-        "dev": "next dev",
-        "build": "next build",
-        "start": "next start",
-        "lint": "next lint",
-        "test": "playwright test",
-        "test:ui": "playwright test --ui",
-        "test:debug": "playwright test --debug",
-        "install": "npm install --legacy-peer-deps"
+            "dev": "next dev",
+            "build": "next build",
+            "start": "next start",
+            "lint": "next lint",
+            "test": "playwright test",
+            "test:ui": "playwright test --ui",
+            "test:debug": "playwright test --debug",
+            "install": "npm install --legacy-peer-deps"
       },
       "dependencies": {
-        "@hello-pangea/dnd": "^17.0.0",
-        "@heroicons/react": "^2.2.0",
-        "@types/slate": "^0.47.16",
-        "@types/slate-react": "^0.50.0",
-        "agixt": "^1.0.57",
-        "html2canvas": "^1.4.1",
-        "next": "15.0.4",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
-        "remote-storage": "^1.0.7",
-        "slate": "^0.112.0",
-        "slate-react": "^0.112.0"
+            "@hello-pangea/dnd": "^17.0.0",
+            "@heroicons/react": "^2.2.0",
+            "@types/d3": "^7.4.3",
+            "@types/slate": "^0.47.16",
+            "@types/slate-react": "^0.50.0",
+            "agixt": "^1.0.57",
+            "d3": "^7.9.0",
+            "html2canvas": "^1.4.1",
+            "next": "15.0.4",
+            "react": "^19.0.0",
+            "react-dom": "^19.0.0",
+            "remote-storage": "^1.0.7",
+            "slate": "^0.112.0",
+            "slate-react": "^0.112.0"
       },
       "devDependencies": {
-        "@playwright/test": "^1.49.1",
-        "@types/is-hotkey": "^0.1.10",
-        "@types/node": "20.17.10",
-        "@types/react": "19.0.1",
-        "@types/react-dom": "^19",
-        "postcss": "^8",
-        "slate-dom": "0.111.0",
-        "tailwindcss": "^3.4.1",
-        "typescript": "5.7.2"
+            "@playwright/test": "^1.49.1",
+            "@types/is-hotkey": "^0.1.10",
+            "@types/node": "20.17.10",
+            "@types/react": "19.0.1",
+            "@types/react-dom": "^19",
+            "postcss": "^8",
+            "slate-dom": "0.111.0",
+            "tailwindcss": "^3.4.1",
+            "typescript": "5.7.2"
       }
-    }
+}