Add separate version tracking for artifacts

frontend/src/pages/PackagePage.css

@@ -324,6 +324,86 @@ tr:hover .copy-btn {
   color: var(--text-muted);
 }
 
+/* Version badge */
+.version-badge {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 0.8125rem;
+  color: var(--accent-primary);
+  background: rgba(16, 185, 129, 0.1);
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+}
+
+/* Create Tag Section */
+.create-tag-section {
+  margin-top: 32px;
+  background: var(--bg-secondary);
+}
+
+.create-tag-section h3 {
+  margin-bottom: 4px;
+  color: var(--text-primary);
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.section-description {
+  color: var(--text-muted);
+  font-size: 0.875rem;
+  margin-bottom: 16px;
+}
+
+.create-tag-form .form-row {
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+
+.create-tag-form .form-group {
+  flex: 1;
+  min-width: 150px;
+}
+
+.create-tag-form .form-group--wide {
+  flex: 2;
+  min-width: 300px;
+}
+
+.create-tag-form .form-group label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.create-tag-form .form-group input {
+  width: 100%;
+  padding: 10px 14px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+}
+
+.create-tag-form .form-group input:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+}
+
+.create-tag-form .form-group input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.create-tag-form button {
+  flex-shrink: 0;
+}
+
 /* Created cell */
 .created-cell {
   display: flex;

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>