-
- {initials}
+
- {user?.name ?? 'Unavailable'}
+ {firstName || 'Unavailable'}
{user?.id ?? 'Unavailable'}
diff --git a/app/src/lib/velocityPlatformClient.ts b/app/src/lib/velocityPlatformClient.ts
index cf2605fc..60f5ba25 100644
--- a/app/src/lib/velocityPlatformClient.ts
+++ b/app/src/lib/velocityPlatformClient.ts
@@ -7,6 +7,15 @@ export interface VelocityUserProfile {
role: string;
full_name?: string | null;
email?: string | null;
+ avatar_url?: string | null;
+}
+
+export interface VelocityActiveUser {
+ user_id: string;
+ role: string;
+ full_name?: string | null;
+ email?: string | null;
+ avatar_url?: string | null;
}
export interface VelocityLoginResponse {
@@ -189,6 +198,39 @@ export function normalizeVelocityRole(role: string | null | undefined): string {
return (role ?? '').trim().toUpperCase();
}
+export function resolveVelocityFullName(profile: Pick): string {
+ const fullName = profile.full_name?.trim();
+ if (fullName) {
+ return fullName;
+ }
+
+ const email = profile.email?.trim();
+ if (email) {
+ return email;
+ }
+
+ return profile.user_id;
+}
+
+export function resolveVelocityFirstName(profile: Pick): string {
+ const fullName = profile.full_name?.trim();
+ if (fullName) {
+ return fullName.split(/\s+/)[0] ?? fullName;
+ }
+
+ const email = profile.email?.trim();
+ if (email) {
+ const local = email.split('@')[0]?.trim() ?? '';
+ if (local) {
+ const normalized = local.replace(/[._-]+/g, ' ').trim();
+ const firstToken = normalized.split(/\s+/)[0] ?? normalized;
+ return firstToken.charAt(0).toUpperCase() + firstToken.slice(1);
+ }
+ }
+
+ return profile.user_id;
+}
+
export function isAdminRole(role: string | null | undefined): boolean {
const normalized = normalizeVelocityRole(role);
return normalized === 'ADMIN' || normalized === 'SUPERADMIN';
@@ -209,6 +251,36 @@ export async function getVelocityMe(): Promise {
});
}
+export async function listVelocityUsers(): Promise {
+ return platformFetch('/api/auth/users', {
+ method: 'GET',
+ });
+}
+
+export async function uploadVelocityAvatar(file: File): Promise<{ avatar_url: string }> {
+ const form = new FormData();
+ form.append('file', file);
+
+ const response = await fetch(`${API_URL}/api/auth/profile/avatar`, {
+ method: 'POST',
+ headers: buildHeaders(undefined, false),
+ body: form,
+ });
+
+ if (!response.ok) {
+ const body = await response.json().catch(() => ({}));
+ throw new Error(
+ typeof body?.detail === 'string'
+ ? body.detail
+ : typeof body?.message === 'string'
+ ? body.message
+ : `Request failed: ${response.status}`,
+ );
+ }
+
+ return response.json() as Promise<{ avatar_url: string }>;
+}
+
export async function getAdminHealth(): Promise {
return platformFetch('/api/admin-surface/health');
}
diff --git a/app/src/oracle/components/ShareModal.tsx b/app/src/oracle/components/ShareModal.tsx
index d95d4cbe..8dd3beb0 100644
--- a/app/src/oracle/components/ShareModal.tsx
+++ b/app/src/oracle/components/ShareModal.tsx
@@ -1,51 +1,99 @@
-/**
- * ShareModal — Fork-based sharing workflow.
- * Explains the direct_fork_only semantics (recipient gets an editable copy,
- * not live edit access to owner's canvas).
- */
-import { useState, useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { createPortal } from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { X, Share2, GitFork, Lock, Users, MessageSquare, ChevronDown } from 'lucide-react';
import { Button } from '@/components/ui/button';
import type { CanvasPage } from '../types/canvas';
+import { listVelocityUsers, type VelocityActiveUser } from '@/lib/velocityPlatformClient';
interface ShareModalProps {
page: CanvasPage | null;
isOpen: boolean;
onClose: () => void;
onShare: (params: {
- recipientEmail: string;
+ recipientUserId: string;
visibility: 'private' | 'team';
message: string;
sourceRevision: number;
}) => Promise;
}
-const TEAM_MEMBERS = [
- { id: 'u2', name: 'Elena Rostova', email: 'elena@binghatti.ae', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=80&q=80', role: 'Senior Broker' },
- { id: 'u3', name: 'Priya Sharma', email: 'priya@binghatti.ae', avatar: 'https://images.unsplash.com/photo-1554151228-14d9def656e4?auto=format&fit=crop&w=80&q=80', role: 'Senior Broker' },
- { id: 'u4', name: 'Carlos Mendez', email: 'carlos@binghatti.ae', avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=80&q=80', role: 'Broker' },
- { id: 'u5', name: 'Ravi Kapoor', email: 'ravi@binghatti.ae', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=80&q=80', role: 'Broker' },
-];
+function getDisplayName(member: VelocityActiveUser): string {
+ return member.full_name?.trim() || member.email?.trim() || member.user_id;
+}
+
+function getRoleLabel(member: VelocityActiveUser): string {
+ return member.role
+ .toLowerCase()
+ .split('_')
+ .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+ .join(' ');
+}
+
+function getInitials(member: VelocityActiveUser): string {
+ const basis = getDisplayName(member);
+ return basis
+ .split(/[\s@._-]+/)
+ .filter(Boolean)
+ .slice(0, 2)
+ .map((part) => part.charAt(0).toUpperCase())
+ .join('') || 'U';
+}
export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps) {
const [mounted, setMounted] = useState(false);
- useEffect(() => setMounted(true), []);
-
- const [recipient, setRecipient] = useState<{ id: string; name: string; email: string } | null>(null);
+ const [teamMembers, setTeamMembers] = useState([]);
+ const [loadingMembers, setLoadingMembers] = useState(false);
+ const [membersError, setMembersError] = useState(null);
+ const [recipient, setRecipient] = useState(null);
const [visibility, setVisibility] = useState<'private' | 'team'>('private');
const [message, setMessage] = useState('');
const [submitting, setSubmitting] = useState(false);
const [success, setSuccess] = useState(false);
const [memberDropOpen, setMemberDropOpen] = useState(false);
+ useEffect(() => setMounted(true), []);
+
+ useEffect(() => {
+ if (!isOpen) {
+ setMemberDropOpen(false);
+ return;
+ }
+
+ let cancelled = false;
+ setLoadingMembers(true);
+ setMembersError(null);
+
+ void listVelocityUsers()
+ .then((users) => {
+ if (cancelled) return;
+ setTeamMembers(users);
+ })
+ .catch((error) => {
+ if (cancelled) return;
+ setMembersError(error instanceof Error ? error.message : 'Failed to load team members.');
+ setTeamMembers([]);
+ })
+ .finally(() => {
+ if (!cancelled) setLoadingMembers(false);
+ });
+
+ return () => {
+ cancelled = true;
+ };
+ }, [isOpen]);
+
+ const selectedRecipientLabel = useMemo(
+ () => (recipient ? getDisplayName(recipient) : 'Select verified teammate...'),
+ [recipient],
+ );
+
const handleShare = async () => {
if (!recipient || !page) return;
setSubmitting(true);
try {
await onShare({
- recipientEmail: recipient.email,
+ recipientUserId: recipient.user_id,
visibility,
message,
sourceRevision: page.headRevision,
@@ -56,9 +104,9 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)
onClose();
setRecipient(null);
setMessage('');
- }, 2000);
+ }, 1800);
} catch {
- // stay open on error
+ // keep modal open and let caller surface the error upstream
} finally {
setSubmitting(false);
}
@@ -68,7 +116,6 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)
{isOpen && (
<>
- {/* Backdrop */}
- {/* Header */}
+ {user?.avatar ? (
+ 
+ ) : (
+
-
+ {initials}
+
+ )}
+
-
+ {avatarError && (
+ {user?.name}
+
+
+
{displayName}
{roleLabel}
+ {isUploadingAvatar && ( +Uploading profile picture...
+ )}{avatarError}
+ )}
@@ -113,16 +159,14 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)
- {/* Fork explanation */}
- The recipient gets a fork — an editable copy - of this canvas at revision {page?.headRevision}. They can build on it and open a merge - request to propose their changes back. + The recipient gets a fork of this canvas at the selected revision. + They can edit their copy and later open a merge request back into the source branch.
Fork created successfully!
-{recipient?.name} can now access their copy.
+Fork created successfully.
+{recipient ? getDisplayName(recipient) : 'Recipient'} can access the shared copy.
- {/* Recipient picker */}
- {/* Message */}
+
{memberDropOpen && (
- {TEAM_MEMBERS.map((m) => (
+ {loadingMembers && (
+
- {/* Visibility */}
Loading verified accounts...
+ )}
+ {!loadingMembers && membersError && (
+ {membersError}
+ )}
+ {!loadingMembers && !membersError && teamMembers.length === 0 && (
+ No verified users available.
+ )}
+ {!loadingMembers && !membersError && teamMembers.map((member) => (
@@ -210,7 +280,6 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)