Add separate version tracking for artifacts

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, UnauthorizedError, ForbiddenError } from '../api';
+import { listTags, getDownloadUrl, getPackage, getMyProjectAccess, createTag, UnauthorizedError, ForbiddenError } from '../api';
 import { Breadcrumb } from '../components/Breadcrumb';
 import { Badge } from '../components/Badge';
 import { SearchInput } from '../components/SearchInput';
@@ -64,6 +64,9 @@ function PackagePage() {
   const [uploadSuccess, setUploadSuccess] = useState<string | null>(null);
   const [artifactIdInput, setArtifactIdInput] = useState('');
   const [accessLevel, setAccessLevel] = useState<AccessLevel | null>(null);
+  const [createTagName, setCreateTagName] = useState('');
+  const [createTagArtifactId, setCreateTagArtifactId] = useState('');
+  const [createTagLoading, setCreateTagLoading] = useState(false);
 
   // Derived permissions
   const canWrite = accessLevel === 'write' || accessLevel === 'admin';
@@ -154,6 +157,30 @@ function PackagePage() {
     setError(errorMsg);
   }, []);
 
+  const handleCreateTag = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!createTagName.trim() || createTagArtifactId.length !== 64) return;
+
+    setCreateTagLoading(true);
+    setError(null);
+
+    try {
+      await createTag(projectName!, packageName!, {
+        name: createTagName.trim(),
+        artifact_id: createTagArtifactId,
+      });
+      setUploadSuccess(`Tag "${createTagName}" created successfully!`);
+      setCreateTagName('');
+      setCreateTagArtifactId('');
+      loadData();
+      setTimeout(() => setUploadSuccess(null), 5000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create tag');
+    } finally {
+      setCreateTagLoading(false);
+    }
+  };
+
   const handleSearchChange = (value: string) => {
     updateParams({ search: value, page: '1' });
   };
@@ -182,6 +209,13 @@ function PackagePage() {
       sortable: true,
       render: (t: TagDetail) => <strong>{t.name}</strong>,
     },
+    {
+      key: 'version',
+      header: 'Version',
+      render: (t: TagDetail) => (
+        <span className="version-badge">{t.version || '-'}</span>
+      ),
+    },
     {
       key: 'artifact_id',
       header: 'Artifact ID',
@@ -433,6 +467,50 @@ function PackagePage() {
         )}
       </div>
 
+      {user && canWrite && (
+        <div className="create-tag-section card">
+          <h3>Create / Update Tag</h3>
+          <p className="section-description">Point a tag at any existing artifact by its ID</p>
+          <form onSubmit={handleCreateTag} className="create-tag-form">
+            <div className="form-row">
+              <div className="form-group">
+                <label htmlFor="create-tag-name">Tag Name</label>
+                <input
+                  id="create-tag-name"
+                  type="text"
+                  value={createTagName}
+                  onChange={(e) => setCreateTagName(e.target.value)}
+                  placeholder="latest, stable, v1.0.0..."
+                  disabled={createTagLoading}
+                />
+              </div>
+              <div className="form-group form-group--wide">
+                <label htmlFor="create-tag-artifact">Artifact ID</label>
+                <input
+                  id="create-tag-artifact"
+                  type="text"
+                  value={createTagArtifactId}
+                  onChange={(e) => setCreateTagArtifactId(e.target.value.toLowerCase().replace(/[^a-f0-9]/g, '').slice(0, 64))}
+                  placeholder="SHA256 hash (64 hex characters)"
+                  className="artifact-id-input"
+                  disabled={createTagLoading}
+                />
+              </div>
+              <button
+                type="submit"
+                className="btn btn-primary"
+                disabled={createTagLoading || !createTagName.trim() || createTagArtifactId.length !== 64}
+              >
+                {createTagLoading ? 'Creating...' : 'Create Tag'}
+              </button>
+            </div>
+            {createTagArtifactId.length > 0 && createTagArtifactId.length !== 64 && (
+              <p className="validation-hint">Artifact ID must be exactly 64 hex characters ({createTagArtifactId.length}/64)</p>
+            )}
+          </form>
+        </div>
+      )}
+
       <div className="usage-section card">
         <h3>Usage</h3>
         <p>Download artifacts using:</p>