Add access management UI for project admins

Components:
- AccessManagement component for managing project permissions
- Display list of users with access to project
- Add user form with username and access level selection
- Edit access level inline
- Revoke access with confirmation

Integration:
- Show AccessManagement on ProjectPage for admin users
- Uses listProjectPermissions, grantProjectAccess, etc. APIs

Styling:
- Access level badges with color coding
- Responsive form layout
- Action buttons for edit/revoke

frontend/src/components/AccessManagement.css

@@ -0,0 +1,100 @@
+.access-management {
+  margin-top: 1.5rem;
+}
+
+.access-management__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.access-management__header h3 {
+  margin: 0;
+}
+
+.access-management__form {
+  background: var(--bg-tertiary);
+  padding: 1rem;
+  border-radius: 6px;
+  margin-bottom: 1rem;
+}
+
+.access-management__form .form-row {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-end;
+}
+
+.access-management__form .form-group {
+  flex: 1;
+}
+
+.access-management__form .form-group:last-of-type {
+  flex: 0 0 auto;
+}
+
+.access-management__list {
+  margin-top: 1rem;
+}
+
+.access-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.access-table th,
+.access-table td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.access-table th {
+  font-weight: 600;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.access-table td.actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.access-badge {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.access-badge--read {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+.access-badge--write {
+  background: var(--color-info-bg);
+  color: var(--color-info);
+}
+
+.access-badge--admin {
+  background: var(--color-success-bg);
+  color: var(--color-success);
+}
+
+.btn-sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+}
+
+.btn-danger {
+  background: var(--color-error);
+  color: white;
+}
+
+.btn-danger:hover {
+  background: #c0392b;
+}

frontend/src/components/AccessManagement.tsx

@@ -0,0 +1,248 @@
+import { useState, useEffect, useCallback } from 'react';
+import { AccessPermission, AccessLevel } from '../types';
+import {
+  listProjectPermissions,
+  grantProjectAccess,
+  updateProjectAccess,
+  revokeProjectAccess,
+} from '../api';
+import './AccessManagement.css';
+
+interface AccessManagementProps {
+  projectName: string;
+}
+
+export function AccessManagement({ projectName }: AccessManagementProps) {
+  const [permissions, setPermissions] = useState<AccessPermission[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  // Form state
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [newUsername, setNewUsername] = useState('');
+  const [newLevel, setNewLevel] = useState<AccessLevel>('read');
+  const [submitting, setSubmitting] = useState(false);
+
+  // Edit state
+  const [editingUser, setEditingUser] = useState<string | null>(null);
+  const [editLevel, setEditLevel] = useState<AccessLevel>('read');
+
+  const loadPermissions = useCallback(async () => {
+    try {
+      setLoading(true);
+      const data = await listProjectPermissions(projectName);
+      setPermissions(data);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load permissions');
+    } finally {
+      setLoading(false);
+    }
+  }, [projectName]);
+
+  useEffect(() => {
+    loadPermissions();
+  }, [loadPermissions]);
+
+  const handleGrant = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newUsername.trim()) return;
+
+    try {
+      setSubmitting(true);
+      setError(null);
+      await grantProjectAccess(projectName, {
+        username: newUsername.trim(),
+        level: newLevel,
+      });
+      setSuccess(`Access granted to ${newUsername}`);
+      setNewUsername('');
+      setNewLevel('read');
+      setShowAddForm(false);
+      await loadPermissions();
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to grant access');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleUpdate = async (username: string) => {
+    try {
+      setSubmitting(true);
+      setError(null);
+      await updateProjectAccess(projectName, username, { level: editLevel });
+      setSuccess(`Updated access for ${username}`);
+      setEditingUser(null);
+      await loadPermissions();
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update access');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleRevoke = async (username: string) => {
+    if (!confirm(`Revoke access for ${username}?`)) return;
+
+    try {
+      setSubmitting(true);
+      setError(null);
+      await revokeProjectAccess(projectName, username);
+      setSuccess(`Access revoked for ${username}`);
+      await loadPermissions();
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to revoke access');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const startEdit = (permission: AccessPermission) => {
+    setEditingUser(permission.user_id);
+    setEditLevel(permission.level as AccessLevel);
+  };
+
+  const cancelEdit = () => {
+    setEditingUser(null);
+  };
+
+  if (loading) {
+    return <div className="access-management loading">Loading permissions...</div>;
+  }
+
+  return (
+    <div className="access-management card">
+      <div className="access-management__header">
+        <h3>Access Management</h3>
+        <button
+          className="btn btn-primary btn-sm"
+          onClick={() => setShowAddForm(!showAddForm)}
+        >
+          {showAddForm ? 'Cancel' : '+ Add User'}
+        </button>
+      </div>
+
+      {error && <div className="error-message">{error}</div>}
+      {success && <div className="success-message">{success}</div>}
+
+      {showAddForm && (
+        <form className="access-management__form" onSubmit={handleGrant}>
+          <div className="form-row">
+            <div className="form-group">
+              <label htmlFor="username">Username</label>
+              <input
+                id="username"
+                type="text"
+                value={newUsername}
+                onChange={(e) => setNewUsername(e.target.value)}
+                placeholder="Enter username"
+                required
+                disabled={submitting}
+              />
+            </div>
+            <div className="form-group">
+              <label htmlFor="level">Access Level</label>
+              <select
+                id="level"
+                value={newLevel}
+                onChange={(e) => setNewLevel(e.target.value as AccessLevel)}
+                disabled={submitting}
+              >
+                <option value="read">Read</option>
+                <option value="write">Write</option>
+                <option value="admin">Admin</option>
+              </select>
+            </div>
+            <button type="submit" className="btn btn-primary" disabled={submitting}>
+              {submitting ? 'Granting...' : 'Grant Access'}
+            </button>
+          </div>
+        </form>
+      )}
+
+      <div className="access-management__list">
+        {permissions.length === 0 ? (
+          <p className="text-muted">No explicit permissions set. Only the project owner has access.</p>
+        ) : (
+          <table className="access-table">
+            <thead>
+              <tr>
+                <th>User</th>
+                <th>Access Level</th>
+                <th>Granted</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {permissions.map((p) => (
+                <tr key={p.id}>
+                  <td>{p.user_id}</td>
+                  <td>
+                    {editingUser === p.user_id ? (
+                      <select
+                        value={editLevel}
+                        onChange={(e) => setEditLevel(e.target.value as AccessLevel)}
+                        disabled={submitting}
+                      >
+                        <option value="read">Read</option>
+                        <option value="write">Write</option>
+                        <option value="admin">Admin</option>
+                      </select>
+                    ) : (
+                      <span className={`access-badge access-badge--${p.level}`}>
+                        {p.level}
+                      </span>
+                    )}
+                  </td>
+                  <td>{new Date(p.created_at).toLocaleDateString()}</td>
+                  <td className="actions">
+                    {editingUser === p.user_id ? (
+                      <>
+                        <button
+                          className="btn btn-sm btn-primary"
+                          onClick={() => handleUpdate(p.user_id)}
+                          disabled={submitting}
+                        >
+                          Save
+                        </button>
+                        <button
+                          className="btn btn-sm"
+                          onClick={cancelEdit}
+                          disabled={submitting}
+                        >
+                          Cancel
+                        </button>
+                      </>
+                    ) : (
+                      <>
+                        <button
+                          className="btn btn-sm"
+                          onClick={() => startEdit(p)}
+                          disabled={submitting}
+                        >
+                          Edit
+                        </button>
+                        <button
+                          className="btn btn-sm btn-danger"
+                          onClick={() => handleRevoke(p.user_id)}
+                          disabled={submitting}
+                        >
+                          Revoke
+                        </button>
+                      </>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/ProjectPage.tsx

@@ -8,6 +8,7 @@ import { SearchInput } from '../components/SearchInput';
 import { SortDropdown, SortOption } from '../components/SortDropdown';
 import { FilterChip, FilterChipGroup } from '../components/FilterChip';
 import { Pagination } from '../components/Pagination';
+import { AccessManagement } from '../components/AccessManagement';
 import { useAuth } from '../contexts/AuthContext';
 import './Home.css';
 
@@ -45,6 +46,7 @@ function ProjectPage() {
 
   // Derived permissions
   const canWrite = accessLevel === 'write' || accessLevel === 'admin';
+  const canAdmin = accessLevel === 'admin';
 
   // Get params from URL
   const page = parseInt(searchParams.get('page') || '1', 10);
@@ -337,6 +339,10 @@ function ProjectPage() {
           )}
         </>
       )}
+
+      {canAdmin && projectName && (
+        <AccessManagement projectName={projectName} />
+      )}
     </div>
   );
 }