Improve PyPI proxy and Package page UX

PyPI proxy improvements:
- Set package format to "pypi" instead of "generic"
- Extract version from filename and create PackageVersion record
- Support .whl, .tar.gz, and .zip filename formats

Package page UX overhaul:
- Move upload to header button with modal
- Simplify table: combine Tag/Version, remove Type and Artifact ID columns
- Add row action menu (⋯) with: Copy ID, Ensure File, Create Tag, Dependencies
- Remove cluttered "Download by Artifact ID" and "Create/Update Tag" sections
- Add modals for upload and create tag actions
- Cleaner, more scannable table layout

frontend/src/pages/PackagePage.tsx

@@ -63,12 +63,16 @@ function PackagePage() {
   const [accessDenied, setAccessDenied] = useState(false);
   const [uploadTag, setUploadTag] = useState('');
   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);
 
+  // UI state
+  const [showUploadModal, setShowUploadModal] = useState(false);
+  const [showCreateTagModal, setShowCreateTagModal] = useState(false);
+  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
+
   // Dependencies state
   const [selectedTag, setSelectedTag] = useState<TagDetail | null>(null);
   const [dependencies, setDependencies] = useState<Dependency[]>([]);
@@ -326,47 +330,21 @@ function PackagePage() {
   const columns = [
     {
       key: 'name',
-      header: 'Tag',
+      header: 'Tag / Version',
       sortable: true,
       render: (t: TagDetail) => (
-        <strong
-          className={`tag-name-link ${selectedTag?.id === t.id ? 'selected' : ''}`}
-          onClick={() => handleTagSelect(t)}
-          style={{ cursor: 'pointer' }}
-        >
-          {t.name}
-        </strong>
-      ),
-    },
-    {
-      key: 'version',
-      header: 'Version',
-      render: (t: TagDetail) => (
-        <span className="version-badge">{t.version || '-'}</span>
-      ),
-    },
-    {
-      key: 'artifact_id',
-      header: 'Artifact ID',
-      render: (t: TagDetail) => (
-        <div className="artifact-id-cell">
-          <code className="artifact-id">{t.artifact_id.substring(0, 12)}...</code>
-          <CopyButton text={t.artifact_id} />
+        <div className="tag-version-cell">
+          <strong
+            className={`tag-name-link ${selectedTag?.id === t.id ? 'selected' : ''}`}
+            onClick={() => handleTagSelect(t)}
+            style={{ cursor: 'pointer' }}
+          >
+            {t.name}
+          </strong>
+          {t.version && <span className="version-badge">{t.version}</span>}
         </div>
       ),
     },
-    {
-      key: 'artifact_size',
-      header: 'Size',
-      render: (t: TagDetail) => <span>{formatBytes(t.artifact_size)}</span>,
-    },
-    {
-      key: 'artifact_content_type',
-      header: 'Type',
-      render: (t: TagDetail) => (
-        <span className="content-type">{t.artifact_content_type || '-'}</span>
-      ),
-    },
     {
       key: 'artifact_original_name',
       header: 'Filename',
@@ -375,36 +353,70 @@ function PackagePage() {
         <span title={t.artifact_original_name || undefined}>{t.artifact_original_name || '-'}</span>
       ),
     },
+    {
+      key: 'artifact_size',
+      header: 'Size',
+      render: (t: TagDetail) => <span>{formatBytes(t.artifact_size)}</span>,
+    },
     {
       key: 'created_at',
       header: 'Created',
       sortable: true,
       render: (t: TagDetail) => (
-        <div className="created-cell">
-          <span>{new Date(t.created_at).toLocaleString()}</span>
-          <span className="created-by">by {t.created_by}</span>
-        </div>
+        <span title={`by ${t.created_by}`}>{new Date(t.created_at).toLocaleDateString()}</span>
       ),
     },
     {
       key: 'actions',
-      header: 'Actions',
+      header: '',
       render: (t: TagDetail) => (
         <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"
+            className="btn btn-icon"
             download
+            title="Download"
           >
-            Download
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="7 10 12 15 17 10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
+            </svg>
           </a>
+          <div className="action-menu">
+            <button
+              className="btn btn-icon"
+              onClick={(e) => {
+                e.stopPropagation();
+                setOpenMenuId(openMenuId === t.id ? null : t.id);
+              }}
+              title="More actions"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="12" cy="5" r="1" />
+                <circle cx="12" cy="19" r="1" />
+              </svg>
+            </button>
+            {openMenuId === t.id && (
+              <div className="action-menu-dropdown">
+                <button onClick={() => { navigator.clipboard.writeText(t.artifact_id); setOpenMenuId(null); }}>
+                  Copy Artifact ID
+                </button>
+                <button onClick={() => { fetchEnsureFileForTag(t.name); setOpenMenuId(null); }}>
+                  View Ensure File
+                </button>
+                {canWrite && (
+                  <button onClick={() => { setCreateTagArtifactId(t.artifact_id); setShowCreateTagModal(true); setOpenMenuId(null); }}>
+                    Create/Update Tag
+                  </button>
+                )}
+                <button onClick={() => { handleTagSelect(t); setOpenMenuId(null); }}>
+                  View Dependencies
+                </button>
+              </div>
+            )}
+          </div>
         </div>
       ),
     },
@@ -451,6 +463,19 @@ function PackagePage() {
           <div className="page-header__title-row">
             <h1>{packageName}</h1>
             {pkg && <Badge variant="default">{pkg.format}</Badge>}
+            {user && canWrite && (
+              <button
+                className="btn btn-primary btn-small header-upload-btn"
+                onClick={() => setShowUploadModal(true)}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ marginRight: '6px' }}>
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                  <polyline points="17 8 12 3 7 8" />
+                  <line x1="12" y1="3" x2="12" y2="15" />
+                </svg>
+                Upload
+              </button>
+            )}
           </div>
           {pkg?.description && <p className="description">{pkg.description}</p>}
           <div className="page-header__meta">
@@ -496,41 +521,6 @@ function PackagePage() {
       {error && <div className="error-message">{error}</div>}
       {uploadSuccess && <div className="success-message">{uploadSuccess}</div>}
 
-      {user && (
-        <div className="upload-section card">
-          <h3>Upload Artifact</h3>
-          {canWrite ? (
-            <div className="upload-form">
-              <div className="form-group">
-                <label htmlFor="upload-tag">Tag (optional)</label>
-                <input
-                  id="upload-tag"
-                  type="text"
-                  value={uploadTag}
-                  onChange={(e) => setUploadTag(e.target.value)}
-                  placeholder="v1.0.0, latest, stable..."
-                />
-              </div>
-              <DragDropUpload
-                projectName={projectName!}
-                packageName={packageName!}
-                tag={uploadTag || undefined}
-                onUploadComplete={handleUploadComplete}
-                onUploadError={handleUploadError}
-              />
-            </div>
-          ) : (
-            <DragDropUpload
-              projectName={projectName!}
-              packageName={packageName!}
-              disabled={true}
-              disabledReason="You have read-only access to this project and cannot upload artifacts."
-              onUploadComplete={handleUploadComplete}
-              onUploadError={handleUploadError}
-            />
-          )}
-        </div>
-      )}
 
       <div className="section-header">
         <h2>Tags / Versions</h2>
@@ -737,78 +727,6 @@ function PackagePage() {
         )}
       </div>
 
-      <div className="download-by-id-section card">
-        <h3>Download by Artifact ID</h3>
-        <div className="download-by-id-form">
-          <input
-            type="text"
-            value={artifactIdInput}
-            onChange={(e) => setArtifactIdInput(e.target.value.toLowerCase().replace(/[^a-f0-9]/g, '').slice(0, 64))}
-            placeholder="Enter SHA256 artifact ID (64 hex characters)"
-            className="artifact-id-input"
-          />
-          <a
-            href={artifactIdInput.length === 64 ? getDownloadUrl(projectName!, packageName!, `artifact:${artifactIdInput}`) : '#'}
-            className={`btn btn-primary ${artifactIdInput.length !== 64 ? 'btn-disabled' : ''}`}
-            download
-            onClick={(e) => {
-              if (artifactIdInput.length !== 64) {
-                e.preventDefault();
-              }
-            }}
-          >
-            Download
-          </a>
-        </div>
-        {artifactIdInput.length > 0 && artifactIdInput.length !== 64 && (
-          <p className="validation-hint">Artifact ID must be exactly 64 hex characters ({artifactIdInput.length}/64)</p>
-        )}
-      </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>
@@ -831,6 +749,118 @@ function PackagePage() {
         />
       )}
 
+      {/* Upload Modal */}
+      {showUploadModal && (
+        <div className="modal-overlay" onClick={() => setShowUploadModal(false)}>
+          <div className="upload-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3>Upload Artifact</h3>
+              <button
+                className="modal-close"
+                onClick={() => setShowUploadModal(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 className="modal-body">
+              <div className="form-group">
+                <label htmlFor="upload-tag">Tag (optional)</label>
+                <input
+                  id="upload-tag"
+                  type="text"
+                  value={uploadTag}
+                  onChange={(e) => setUploadTag(e.target.value)}
+                  placeholder="v1.0.0, latest, stable..."
+                />
+              </div>
+              <DragDropUpload
+                projectName={projectName!}
+                packageName={packageName!}
+                tag={uploadTag || undefined}
+                onUploadComplete={(result) => {
+                  handleUploadComplete(result);
+                  setShowUploadModal(false);
+                  setUploadTag('');
+                }}
+                onUploadError={handleUploadError}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Create/Update Tag Modal */}
+      {showCreateTagModal && (
+        <div className="modal-overlay" onClick={() => setShowCreateTagModal(false)}>
+          <div className="create-tag-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3>Create / Update Tag</h3>
+              <button
+                className="modal-close"
+                onClick={() => { setShowCreateTagModal(false); setCreateTagName(''); setCreateTagArtifactId(''); }}
+                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 className="modal-body">
+              <p className="modal-description">Point a tag at an artifact by its ID</p>
+              <form onSubmit={(e) => { handleCreateTag(e); setShowCreateTagModal(false); }}>
+                <div className="form-group">
+                  <label htmlFor="modal-tag-name">Tag Name</label>
+                  <input
+                    id="modal-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">
+                  <label htmlFor="modal-artifact-id">Artifact ID</label>
+                  <input
+                    id="modal-artifact-id"
+                    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}
+                  />
+                  {createTagArtifactId.length > 0 && createTagArtifactId.length !== 64 && (
+                    <p className="validation-hint">{createTagArtifactId.length}/64 characters</p>
+                  )}
+                </div>
+                <div className="modal-actions">
+                  <button
+                    type="button"
+                    className="btn btn-secondary"
+                    onClick={() => { setShowCreateTagModal(false); setCreateTagName(''); setCreateTagArtifactId(''); }}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="btn btn-primary"
+                    disabled={createTagLoading || !createTagName.trim() || createTagArtifactId.length !== 64}
+                  >
+                    {createTagLoading ? 'Creating...' : 'Create Tag'}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Ensure File Modal */}
       {showEnsureFile && (
         <div className="modal-overlay" onClick={() => setShowEnsureFile(false)}>