feat: Complete Deep URL Navigation with Cross-Platform Copy Functionality

.gitignore

@@ -1,7 +1,15 @@
 __pycache__
 .env
 .serena
-.claude/settings.local.json
 PRPs/local
 PRPs/completed/
 /logs/
+.DS_Store
+*.log
+
+
+# Claude
+.claude/
+claude.local.md
+.mcp.json
+.next-session.md

CLAUDE.md

@@ -172,6 +172,14 @@ uv run pytest tests/test_service_integration.py -v
 - `GET /api/projects/{id}/tasks` - Get project tasks
 - `POST /api/projects/{id}/tasks` - Create task
 
+### Documents
+
+- `GET /api/projects/{id}/docs` - List project documents (light mode)
+- `POST /api/projects/{id}/docs` - Create document (returns full document with created_at/updated_at timestamps)
+- `GET /api/projects/{id}/docs/{doc_id}` - Get specific document (full mode with complete content)
+- `PUT /api/projects/{id}/docs/{doc_id}` - Update document
+- `DELETE /api/projects/{id}/docs/{doc_id}` - Delete document
+
 ## Socket.IO Events
 
 Real-time updates via Socket.IO on port 8181:

archon-ui-main/src/App.tsx

@@ -25,9 +25,19 @@ const AppRoutes = () => {
       <Route path="/settings" element={<SettingsPage />} />
       <Route path="/mcp" element={<MCPPage />} />
       {projectsEnabled ? (
-        <Route path="/projects" element={<ProjectPage />} />
+        <>
+          <Route path="/projects" element={<ProjectPage />} />
+          <Route path="/projects/:projectId" element={<ProjectPage />} />
+          <Route path="/projects/:projectId/docs" element={<ProjectPage />} />
+          <Route path="/projects/:projectId/docs/:documentId" element={<ProjectPage />} />
+          <Route path="/projects/:projectId/tasks" element={<ProjectPage />} />
+          <Route path="/projects/:projectId/tasks/:taskId" element={<ProjectPage />} />
+        </>
       ) : (
-        <Route path="/projects" element={<Navigate to="/" replace />} />
+        <>
+          <Route path="/projects" element={<Navigate to="/" replace />} />
+          <Route path="/projects/*" element={<Navigate to="/" replace />} />
+        </>
       )}
     </Routes>
   );
@@ -59,17 +69,17 @@ const AppContent = () => {
         }
       },
       onReconnected: () => {
+        console.log('🏥 [Health] onReconnected called - clearing disconnect screen');
         setDisconnectScreenActive(false);
         setDisconnectScreenDismissed(false);
-        // Refresh the page to ensure all data is fresh
-        window.location.reload();
+        // Don't auto-reload - let the user stay on the current page
       }
     });
 
     return () => {
       serverHealthService.stopMonitoring();
     };
-  }, [disconnectScreenDismissed]);
+  }, []); // Only run once on mount, not when disconnectScreenDismissed changes
 
   const handleDismissDisconnectScreen = () => {
     setDisconnectScreenActive(false);

archon-ui-main/src/components/project-tasks/DocsTab.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { Plus, X, Search, Upload, Link as LinkIcon, Check, Brain, Save, History, Eye, Edit3, Sparkles } from 'lucide-react';
+import React, { useState, useEffect, useCallback } from 'react';
+import { Plus, X, Search, Upload, Link as LinkIcon, Check, Brain, Save, History, Eye, Edit3, Sparkles, Loader2 } from 'lucide-react';
 import { Button } from '../ui/Button';
 import { knowledgeBaseService, KnowledgeItem } from '../../services/knowledgeBaseService';
 import { projectService } from '../../services/projectService';
@@ -501,7 +501,9 @@ Add your content here...
 /* ——————————————————————————————————————————— */
 export const DocsTab = ({
   tasks,
-  project
+  project,
+  selectedDocumentId,
+  onDocumentSelect
 }: {
   tasks: Task[];
   project?: {
@@ -510,6 +512,8 @@ export const DocsTab = ({
     created_at?: string;
     updated_at?: string;
   } | null;
+  selectedDocumentId?: string;
+  onDocumentSelect?: (documentId: string) => void;
 }) => {
   // Document state
   const [documents, setDocuments] = useState<ProjectDoc[]>([]);
@@ -558,31 +562,35 @@ export const DocsTab = ({
   const [progressItems, setProgressItems] = useState<CrawlProgressData[]>([]);
   const { showToast } = useToast();
 
-  // Load project documents from the project data
+  // Load project documents using light mode for performance
   const loadProjectDocuments = async () => {
-    if (!project?.id || !project.docs) return;
+    if (!project?.id) return;
 
     try {
       setLoading(true);
 
-      // Use the docs directly from the project data
-      const projectDocuments: ProjectDoc[] = project.docs.map((doc: any) => ({
+      // Use light mode to get document metadata only (for document cards)
+      const documentsResponse = await projectService.listDocuments(project.id, false);
+
+      if (!documentsResponse || documentsResponse.length === 0) {
+        setDocuments([]);
+        setLoading(false);
+        return;
+      }
+
+      // Map to ProjectDoc format for document cards
+      const projectDocuments: ProjectDoc[] = documentsResponse.map((doc: any) => ({
         id: doc.id,
         title: doc.title || 'Untitled Document',
         created_at: doc.created_at,
         updated_at: doc.updated_at,
-        content: doc.content,
+        content: doc.content || {}, // May be empty in light mode
         document_type: doc.document_type || 'document'
       }));
 
       setDocuments(projectDocuments);
 
-      // Auto-select first document if available and no document is currently selected
-      if (projectDocuments.length > 0 && !selectedDocument) {
-        setSelectedDocument(projectDocuments[0]);
-      }
-
-      console.log(`Loaded ${projectDocuments.length} documents from project data`);
+      console.log(`Loaded ${projectDocuments.length} documents in light mode`);
     } catch (error) {
       console.error('Failed to load documents:', error);
       showToast('Failed to load documents', 'error');
@@ -591,6 +599,40 @@ export const DocsTab = ({
     }
   };
 
+  // Load full document content when selecting a specific document
+  const loadFullDocument = async (docId: string) => {
+    if (!project?.id || !docId) return;
+
+    // Check if document already has content loaded
+    const existingDoc = documents.find(d => d.id === docId);
+    if (existingDoc && existingDoc.content && Object.keys(existingDoc.content).length > 0) {
+      console.log(`Document ${existingDoc.title} already has content loaded - skipping API call`);
+      setSelectedDocument(existingDoc);
+      return;
+    }
+
+    try {
+      console.log(`Loading full content for document: ${docId}`);
+      const fullDoc = await projectService.getDocument(project.id, docId);
+
+      // Update the documents array with the full content
+      setDocuments(prev => prev.map(doc => 
+        doc.id === docId ? { ...doc, content: fullDoc.content || {} } : doc
+      ));
+
+      // Set as selected document with full content
+      const enrichedDoc = documents.find(d => d.id === docId);
+      if (enrichedDoc) {
+        setSelectedDocument({ ...enrichedDoc, content: fullDoc.content || {} });
+      }
+
+      console.log(`✅ Loaded full content for document: ${fullDoc.title}`);
+    } catch (error) {
+      console.error('Failed to load full document:', error);
+      showToast('Failed to load document content', 'error');
+    }
+  };
+
   // Create new document from template
   const createDocumentFromTemplate = async (templateKey: string) => {
     if (!project?.id) return;
@@ -713,6 +755,27 @@ export const DocsTab = ({
     setSelectedDocument(null);
   }, [project?.id]);
 
+  // Handle selectedDocumentId from URL - load full content for deep linking
+  useEffect(() => {
+    if (selectedDocumentId && documents.length > 0) {
+      const targetDoc = documents.find(doc => doc.id === selectedDocumentId);
+      if (targetDoc && targetDoc !== selectedDocument) {
+        console.log(`🔗 URL specified document: ${targetDoc.title} - loading full content`);
+        loadFullDocument(selectedDocumentId);
+        setIsEditing(false);
+      }
+    }
+  }, [selectedDocumentId, documents, selectedDocument]);
+
+  // Handle document selection with URL callback - load full content
+  const handleDocumentSelect = useCallback((document: ProjectDoc) => {
+    // Load full document content when selected
+    loadFullDocument(document.id);
+    if (onDocumentSelect) {
+      onDocumentSelect(document.id);
+    }
+  }, [onDocumentSelect]);
+
   // Existing knowledge loading function
   const loadKnowledgeItems = async (knowledgeType?: 'technical' | 'business') => {
     try {
@@ -935,35 +998,59 @@ export const DocsTab = ({
 
         {/* Document Cards Container */}
         <div className="relative mb-6">
-          <div className="flex gap-3 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700">
-            {documents.map(doc => (
-              <DocumentCard
-                key={doc.id}
-                document={doc}
-                isActive={selectedDocument?.id === doc.id}
-                onSelect={setSelectedDocument}
-                onDelete={async (docId) => {
-                  try {
-                    // Call API to delete from database first
-                    await projectService.deleteDocument(project.id, docId);
-
-                    // Then remove from local state
-                    setDocuments(prev => prev.filter(d => d.id !== docId));
-                    if (selectedDocument?.id === docId) {
-                      setSelectedDocument(documents.find(d => d.id !== docId) || null);
-                    }
-                    showToast('Document deleted', 'success');
-                  } catch (error) {
-                    console.error('Failed to delete document:', error);
-                    showToast('Failed to delete document', 'error');
-                  }
-                }}
-                isDarkMode={isDarkMode}
-              />
-            ))}
-
-            {/* Add New Document Card */}
-            <NewDocumentCard onClick={() => setShowTemplateModal(true)} />
+          <div className="flex gap-3 overflow-x-auto pb-2 force-scrollbar">
+            {loading ? (
+              // Single loading card following the same pattern as projects
+              <>
+                <div className="flex-shrink-0 w-48 p-4 rounded-lg border border-gray-200/50 dark:border-zinc-800/30 bg-gradient-to-b from-white/60 to-white/40 dark:from-white/5 dark:to-black/20 shadow-[0_10px_30px_-15px_rgba(0,0,0,0.1)] dark:shadow-[0_10px_30px_-15px_rgba(0,0,0,0.5)]">
+                  <div className="flex items-center justify-center mb-4">
+                    <Loader2 className="w-4 h-4 text-blue-500 animate-spin mr-2" />
+                    <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
+                      Loading documents...
+                    </span>
+                  </div>
+                  <div className="space-y-2">
+                    {/* Skeleton placeholders */}
+                    <div className="h-3 bg-gray-200/50 dark:bg-gray-700/30 rounded animate-pulse"></div>
+                    <div className="h-3 bg-gray-200/50 dark:bg-gray-700/30 rounded animate-pulse w-3/4"></div>
+                    <div className="h-6 bg-gray-200/50 dark:bg-gray-700/30 rounded animate-pulse"></div>
+                  </div>
+                </div>
+                <NewDocumentCard onClick={() => setShowTemplateModal(true)} />
+              </>
+            ) : (
+              <>
+                {documents.map(doc => (
+                  <DocumentCard
+                    key={doc.id}
+                    document={doc}
+                    isActive={selectedDocument?.id === doc.id}
+                    onSelect={handleDocumentSelect}
+                    onDelete={async (docId) => {
+                      try {
+                        // Call API to delete from database first
+                        await projectService.deleteDocument(project.id, docId);
+
+                        // Then remove from local state
+                        setDocuments(prev => prev.filter(d => d.id !== docId));
+                        if (selectedDocument?.id === docId) {
+                          setSelectedDocument(documents.find(d => d.id !== docId) || null);
+                        }
+                        showToast('Document deleted', 'success');
+                      } catch (error) {
+                        console.error('Failed to delete document:', error);
+                        showToast('Failed to delete document', 'error');
+                      }
+                    }}
+                    isDarkMode={isDarkMode}
+                    projectId={project.id}
+                  />
+                ))}
+
+                {/* Add New Document Card */}
+                <NewDocumentCard onClick={() => setShowTemplateModal(true)} />
+              </>
+            )}
           </div>
         </div>
 
@@ -977,7 +1064,11 @@ export const DocsTab = ({
           viewMode === 'beautiful' ? (
             <div className="mb-8">
               <PRPViewer 
-                content={selectedDocument.content || {}} 
+                content={{
+                  title: selectedDocument.title,
+                  document_type: selectedDocument.document_type,
+                  ...selectedDocument.content
+                }}
                 isDarkMode={isDarkMode}
               />
             </div>