Add package dependencies system and project settings page

frontend/src/pages/PackagePage.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
-import { useParams, useSearchParams, useNavigate, useLocation } from 'react-router-dom';
-import { TagDetail, Package, PaginatedResponse, AccessLevel } from '../types';
-import { listTags, getDownloadUrl, getPackage, getMyProjectAccess, createTag, UnauthorizedError, ForbiddenError } from '../api';
+import { useParams, useSearchParams, useNavigate, useLocation, Link } from 'react-router-dom';
+import { TagDetail, Package, PaginatedResponse, AccessLevel, Dependency, DependentInfo } from '../types';
+import { listTags, getDownloadUrl, getPackage, getMyProjectAccess, createTag, getArtifactDependencies, getReverseDependencies, getEnsureFile, UnauthorizedError, ForbiddenError } from '../api';
 import { Breadcrumb } from '../components/Breadcrumb';
 import { Badge } from '../components/Badge';
 import { SearchInput } from '../components/SearchInput';
@@ -10,6 +10,7 @@ import { DataTable } from '../components/DataTable';
 import { Pagination } from '../components/Pagination';
 import { DragDropUpload, UploadResult } from '../components/DragDropUpload';
 import { useAuth } from '../contexts/AuthContext';
+import DependencyGraph from '../components/DependencyGraph';
 import './Home.css';
 import './PackagePage.css';
 
@@ -68,6 +69,30 @@ function PackagePage() {
   const [createTagArtifactId, setCreateTagArtifactId] = useState('');
   const [createTagLoading, setCreateTagLoading] = useState(false);
 
+  // Dependencies state
+  const [selectedTag, setSelectedTag] = useState<TagDetail | null>(null);
+  const [dependencies, setDependencies] = useState<Dependency[]>([]);
+  const [depsLoading, setDepsLoading] = useState(false);
+  const [depsError, setDepsError] = useState<string | null>(null);
+
+  // Reverse dependencies state
+  const [reverseDeps, setReverseDeps] = useState<DependentInfo[]>([]);
+  const [reverseDepsLoading, setReverseDepsLoading] = useState(false);
+  const [reverseDepsError, setReverseDepsError] = useState<string | null>(null);
+  const [reverseDepsPage, setReverseDepsPage] = useState(1);
+  const [reverseDepsTotal, setReverseDepsTotal] = useState(0);
+  const [reverseDepsHasMore, setReverseDepsHasMore] = useState(false);
+
+  // Dependency graph modal state
+  const [showGraph, setShowGraph] = useState(false);
+
+  // Ensure file modal state
+  const [showEnsureFile, setShowEnsureFile] = useState(false);
+  const [ensureFileContent, setEnsureFileContent] = useState<string | null>(null);
+  const [ensureFileLoading, setEnsureFileLoading] = useState(false);
+  const [ensureFileError, setEnsureFileError] = useState<string | null>(null);
+  const [ensureFileTagName, setEnsureFileTagName] = useState<string | null>(null);
+
   // Derived permissions
   const canWrite = accessLevel === 'write' || accessLevel === 'admin';
 
@@ -128,6 +153,98 @@ function PackagePage() {
     loadData();
   }, [loadData]);
 
+  // Auto-select tag when tags are loaded (prefer version from URL, then first tag)
+  // Re-run when package changes to pick up new tags
+  useEffect(() => {
+    if (tagsData?.items && tagsData.items.length > 0) {
+      const versionParam = searchParams.get('version');
+      if (versionParam) {
+        // Find tag matching the version parameter
+        const matchingTag = tagsData.items.find(t => t.version === versionParam);
+        if (matchingTag) {
+          setSelectedTag(matchingTag);
+          setDependencies([]);
+          return;
+        }
+      }
+      // Fall back to first tag
+      setSelectedTag(tagsData.items[0]);
+      setDependencies([]);
+    }
+  }, [tagsData, searchParams, projectName, packageName]);
+
+  // Fetch dependencies when selected tag changes
+  const fetchDependencies = useCallback(async (artifactId: string) => {
+    setDepsLoading(true);
+    setDepsError(null);
+    try {
+      const result = await getArtifactDependencies(artifactId);
+      setDependencies(result.dependencies);
+    } catch (err) {
+      setDepsError(err instanceof Error ? err.message : 'Failed to load dependencies');
+      setDependencies([]);
+    } finally {
+      setDepsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (selectedTag) {
+      fetchDependencies(selectedTag.artifact_id);
+    }
+  }, [selectedTag, fetchDependencies]);
+
+  // Fetch reverse dependencies
+  const fetchReverseDeps = useCallback(async (pageNum: number = 1) => {
+    if (!projectName || !packageName) return;
+
+    setReverseDepsLoading(true);
+    setReverseDepsError(null);
+    try {
+      const result = await getReverseDependencies(projectName, packageName, { page: pageNum, limit: 10 });
+      setReverseDeps(result.dependents);
+      setReverseDepsTotal(result.pagination.total);
+      setReverseDepsHasMore(result.pagination.has_more);
+      setReverseDepsPage(pageNum);
+    } catch (err) {
+      setReverseDepsError(err instanceof Error ? err.message : 'Failed to load reverse dependencies');
+      setReverseDeps([]);
+    } finally {
+      setReverseDepsLoading(false);
+    }
+  }, [projectName, packageName]);
+
+  useEffect(() => {
+    if (projectName && packageName && !loading) {
+      fetchReverseDeps(1);
+    }
+  }, [projectName, packageName, loading, fetchReverseDeps]);
+
+  // Fetch ensure file for a specific tag
+  const fetchEnsureFileForTag = useCallback(async (tagName: string) => {
+    if (!projectName || !packageName) return;
+
+    setEnsureFileTagName(tagName);
+    setEnsureFileLoading(true);
+    setEnsureFileError(null);
+    try {
+      const content = await getEnsureFile(projectName, packageName, tagName);
+      setEnsureFileContent(content);
+      setShowEnsureFile(true);
+    } catch (err) {
+      setEnsureFileError(err instanceof Error ? err.message : 'Failed to load ensure file');
+      setShowEnsureFile(true);
+    } finally {
+      setEnsureFileLoading(false);
+    }
+  }, [projectName, packageName]);
+
+  // Fetch ensure file for selected tag
+  const fetchEnsureFile = useCallback(async () => {
+    if (!selectedTag) return;
+    fetchEnsureFileForTag(selectedTag.name);
+  }, [selectedTag, fetchEnsureFileForTag]);
+
   // Keyboard navigation - go back with backspace
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -202,12 +319,24 @@ function PackagePage() {
   const tags = tagsData?.items || [];
   const pagination = tagsData?.pagination;
 
+  const handleTagSelect = (tag: TagDetail) => {
+    setSelectedTag(tag);
+  };
+
   const columns = [
     {
       key: 'name',
       header: 'Tag',
       sortable: true,
-      render: (t: TagDetail) => <strong>{t.name}</strong>,
+      render: (t: TagDetail) => (
+        <strong
+          className={`tag-name-link ${selectedTag?.id === t.id ? 'selected' : ''}`}
+          onClick={() => handleTagSelect(t)}
+          style={{ cursor: 'pointer' }}
+        >
+          {t.name}
+        </strong>
+      ),
     },
     {
       key: 'version',
@@ -261,13 +390,22 @@ function PackagePage() {
       key: 'actions',
       header: 'Actions',
       render: (t: TagDetail) => (
-        <a
-          href={getDownloadUrl(projectName!, packageName!, t.name)}
-          className="btn btn-secondary btn-small"
-          download
-        >
-          Download
-        </a>
+        <div className="action-buttons">
+          <button
+            className="btn btn-secondary btn-small"
+            onClick={() => fetchEnsureFileForTag(t.name)}
+            title="View orchard.ensure file"
+          >
+            Ensure
+          </button>
+          <a
+            href={getDownloadUrl(projectName!, packageName!, t.name)}
+            className="btn btn-secondary btn-small"
+            download
+          >
+            Download
+          </a>
+        </div>
       ),
     },
   ];
@@ -439,6 +577,166 @@ function PackagePage() {
         />
       )}
 
+      {/* Dependencies Section */}
+      {tags.length > 0 && (
+        <div className="dependencies-section card">
+          <div className="dependencies-header">
+            <h3>Dependencies</h3>
+            <div className="dependencies-controls">
+              {selectedTag && (
+                <>
+                  <button
+                    className="btn btn-secondary btn-small"
+                    onClick={fetchEnsureFile}
+                    disabled={ensureFileLoading}
+                    title="View orchard.ensure file"
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ marginRight: '6px' }}>
+                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                      <polyline points="14 2 14 8 20 8"></polyline>
+                      <line x1="16" y1="13" x2="8" y2="13"></line>
+                      <line x1="16" y1="17" x2="8" y2="17"></line>
+                      <polyline points="10 9 9 9 8 9"></polyline>
+                    </svg>
+                    {ensureFileLoading ? 'Loading...' : 'View Ensure File'}
+                  </button>
+                  <button
+                    className="btn btn-secondary btn-small"
+                    onClick={() => setShowGraph(true)}
+                    title="View full dependency tree"
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ marginRight: '6px' }}>
+                      <circle cx="12" cy="12" r="3"></circle>
+                      <circle cx="4" cy="4" r="2"></circle>
+                      <circle cx="20" cy="4" r="2"></circle>
+                      <circle cx="4" cy="20" r="2"></circle>
+                      <circle cx="20" cy="20" r="2"></circle>
+                      <line x1="9.5" y1="9.5" x2="5.5" y2="5.5"></line>
+                      <line x1="14.5" y1="9.5" x2="18.5" y2="5.5"></line>
+                      <line x1="9.5" y1="14.5" x2="5.5" y2="18.5"></line>
+                      <line x1="14.5" y1="14.5" x2="18.5" y2="18.5"></line>
+                    </svg>
+                    View Graph
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+          <div className="dependencies-tag-select">
+            {selectedTag && (
+              <select
+                className="tag-selector"
+                value={selectedTag.id}
+                onChange={(e) => {
+                  const tag = tags.find(t => t.id === e.target.value);
+                  if (tag) setSelectedTag(tag);
+                }}
+              >
+                {tags.map(t => (
+                  <option key={t.id} value={t.id}>
+                    {t.name}{t.version ? ` (${t.version})` : ''}
+                  </option>
+                ))}
+              </select>
+            )}
+          </div>
+
+          {depsLoading ? (
+            <div className="deps-loading">Loading dependencies...</div>
+          ) : depsError ? (
+            <div className="deps-error">{depsError}</div>
+          ) : dependencies.length === 0 ? (
+            <div className="deps-empty">
+              {selectedTag ? (
+                <span><strong>{selectedTag.name}</strong> has no dependencies</span>
+              ) : (
+                <span>No dependencies</span>
+              )}
+            </div>
+          ) : (
+            <div className="deps-list">
+              <div className="deps-summary">
+                <strong>{selectedTag?.name}</strong> has {dependencies.length} {dependencies.length === 1 ? 'dependency' : 'dependencies'}:
+              </div>
+              <ul className="deps-items">
+                {dependencies.map((dep) => (
+                  <li key={dep.id} className="dep-item">
+                    <Link
+                      to={`/project/${dep.project}/${dep.package}`}
+                      className="dep-link"
+                    >
+                      {dep.project}/{dep.package}
+                    </Link>
+                    <span className="dep-constraint">
+                      @ {dep.version || dep.tag}
+                    </span>
+                    <span className="dep-status dep-status--ok" title="Package exists">
+                      &#10003;
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Used By (Reverse Dependencies) Section */}
+      <div className="used-by-section card">
+        <h3>Used By</h3>
+
+        {reverseDepsLoading ? (
+          <div className="deps-loading">Loading reverse dependencies...</div>
+        ) : reverseDepsError ? (
+          <div className="deps-error">{reverseDepsError}</div>
+        ) : reverseDeps.length === 0 ? (
+          <div className="deps-empty">No packages depend on this package</div>
+        ) : (
+          <div className="reverse-deps-list">
+            <div className="deps-summary">
+              {reverseDepsTotal} {reverseDepsTotal === 1 ? 'package depends' : 'packages depend'} on this:
+            </div>
+            <ul className="deps-items">
+              {reverseDeps.map((dep) => (
+                <li key={dep.artifact_id} className="dep-item reverse-dep-item">
+                  <Link
+                    to={`/project/${dep.project}/${dep.package}${dep.version ? `?version=${dep.version}` : ''}`}
+                    className="dep-link"
+                  >
+                    {dep.project}/{dep.package}
+                    {dep.version && (
+                      <span className="dep-version">v{dep.version}</span>
+                    )}
+                  </Link>
+                  <span className="dep-requires">
+                    requires @ {dep.constraint_value}
+                  </span>
+                </li>
+              ))}
+            </ul>
+            {(reverseDepsHasMore || reverseDepsPage > 1) && (
+              <div className="reverse-deps-pagination">
+                <button
+                  className="btn btn-secondary btn-small"
+                  onClick={() => fetchReverseDeps(reverseDepsPage - 1)}
+                  disabled={reverseDepsPage <= 1 || reverseDepsLoading}
+                >
+                  Previous
+                </button>
+                <span className="pagination-info">Page {reverseDepsPage}</span>
+                <button
+                  className="btn btn-secondary btn-small"
+                  onClick={() => fetchReverseDeps(reverseDepsPage + 1)}
+                  disabled={!reverseDepsHasMore || reverseDepsLoading}
+                >
+                  Next
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
       <div className="download-by-id-section card">
         <h3>Download by Artifact ID</h3>
         <div className="download-by-id-form">
@@ -522,6 +820,58 @@ function PackagePage() {
           <code>curl -O {window.location.origin}/api/v1/project/{projectName}/{packageName}/+/v1.0.0</code>
         </pre>
       </div>
+
+      {/* Dependency Graph Modal */}
+      {showGraph && selectedTag && (
+        <DependencyGraph
+          projectName={projectName!}
+          packageName={packageName!}
+          tagName={selectedTag.name}
+          onClose={() => setShowGraph(false)}
+        />
+      )}
+
+      {/* Ensure File Modal */}
+      {showEnsureFile && (
+        <div className="modal-overlay" onClick={() => setShowEnsureFile(false)}>
+          <div className="ensure-file-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="ensure-file-header">
+              <h3>orchard.ensure for {ensureFileTagName}</h3>
+              <div className="ensure-file-actions">
+                {ensureFileContent && (
+                  <CopyButton text={ensureFileContent} />
+                )}
+                <button
+                  className="modal-close"
+                  onClick={() => setShowEnsureFile(false)}
+                  title="Close"
+                >
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <div className="ensure-file-content">
+              {ensureFileLoading ? (
+                <div className="ensure-file-loading">Loading...</div>
+              ) : ensureFileError ? (
+                <div className="ensure-file-error">{ensureFileError}</div>
+              ) : ensureFileContent ? (
+                <pre className="ensure-file-yaml"><code>{ensureFileContent}</code></pre>
+              ) : (
+                <div className="ensure-file-empty">No dependencies defined for this artifact.</div>
+              )}
+            </div>
+            <div className="ensure-file-footer">
+              <p className="ensure-file-hint">
+                Save this as <code>orchard.ensure</code> in your project root to declare dependencies.
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }