feat: working frontend AI transcribe

backend/api_routes.py

@@ -583,3 +583,20 @@ def api_post_audit(post_id: int):
         return jsonify({"logs": list_audit_logs(post_id=post_id, page=page, limit=limit)})
     except Exception as e:
         return _error(str(e), 500)
+
+@api.get("/posts/<int:post_id>/audio")
+def api_get_audio_url(post_id: int):
+    """
+    Get a signed URL for the original audio file.
+    """
+    expires_in = request.args.get("expires_in", default=3600, type=int)
+    
+    try:
+        audio_data = get_original_audio_url(post_id, expires_in=expires_in)
+        return jsonify(audio_data)
+    except ValueError as e:
+        return _error(str(e), 404)
+    except RuntimeError as e:
+        return _error(str(e), 500)
+    except Exception as e:
+        return _error(f"Failed to get audio URL: {e}", 500)

frontend/src/api.js

@@ -3,7 +3,7 @@
  * Handles all communication with Flask API
  */
 
-const API_BASE_URL = 'http://127.0.0.1:5000/api';
+const API_BASE_URL = 'http://localhost:5000/api';
 
 class ApiClient {
   constructor() {
@@ -107,7 +107,8 @@ class ApiClient {
     if (params.page) queryParams.append('page', params.page);
     if (params.limit) queryParams.append('limit', params.limit);
     if (params.visibility) queryParams.append('visibility', params.visibility);
-    if (params.user_id) queryParams.append('user_id', params.user_id);
+    // Pass current_user_id for privacy checks (not filtering by author)
+    if (params.current_user_id) queryParams.append('current_user_id', params.current_user_id);
 
     return this.request(`/posts?${queryParams.toString()}`);
   }
@@ -132,6 +133,10 @@ class ApiClient {
     return this.updatePost(postId, { status: 'deleted' });
   }
 
+  async getPostMetadata(postId) {
+    return this.request(`/posts/${postId}/metadata`);
+  }
+
   // ==================== Post Files ====================
 
   async getPostFiles(postId) {

frontend/src/components/AudioPostCard.jsx

@@ -1,6 +1,17 @@
-import { Play, Volume2, MoreVertical, Clock } from 'lucide-react'
+import { Play, Pause, Volume2, MoreVertical, Clock, ChevronDown, ChevronUp } from 'lucide-react'
+import { useState, useRef, useEffect } from 'react'
+import { api } from '../api'
+
+export default function AudioPostCard({ post }) {
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [currentTime, setCurrentTime] = useState(0)
+  const [duration, setDuration] = useState(0)
+  const [volume, setVolume] = useState(1)
+  const [transcript, setTranscript] = useState(null)
+  const [loadingTranscript, setLoadingTranscript] = useState(false)
+  const [transcriptExpanded, setTranscriptExpanded] = useState(false)
+  const audioRef = useRef(null)
 
-export default function AudioPostCard({ post, onPlay }) {
   const formatDate = (dateString) => {
     const date = new Date(dateString)
     const now = new Date()
@@ -12,6 +23,92 @@ export default function AudioPostCard({ post, onPlay }) {
     return `${Math.floor(diffMins / 1440)}d ago`
   }
 
+  const formatTime = (seconds) => {
+    if (!seconds || isNaN(seconds)) return '0:00'
+    const mins = Math.floor(seconds / 60)
+    const secs = Math.floor(seconds % 60)
+    return `${mins}:${secs.toString().padStart(2, '0')}`
+  }
+
+  // Load transcript on mount if post is ready
+  useEffect(() => {
+    if (post.status === 'ready' && !transcript && !loadingTranscript) {
+      loadTranscript()
+    }
+  }, [post.post_id, post.status])
+
+  const loadTranscript = async () => {
+    setLoadingTranscript(true)
+    try {
+      const metadata = await api.getPostMetadata(post.post_id)
+      if (metadata && metadata.metadata) {
+        const metadataObj = JSON.parse(metadata.metadata)
+        const promptText = metadataObj.prompt || ''
+        const transcriptMatch = promptText.match(/Transcript:\n([\s\S]*?)\n\nAnswer user questions/)
+        if (transcriptMatch) {
+          setTranscript(transcriptMatch[1].trim())
+        } else {
+          setTranscript('Transcript not available')
+        }
+      }
+    } catch (err) {
+      console.error('Failed to load transcript:', err)
+      setTranscript('Failed to load transcript')
+    } finally {
+      setLoadingTranscript(false)
+    }
+  }
+
+  const togglePlay = () => {
+    if (!audioRef.current) return
+    
+    if (isPlaying) {
+      audioRef.current.pause()
+    } else {
+      audioRef.current.play()
+    }
+    setIsPlaying(!isPlaying)
+  }
+
+  const handleTimeUpdate = () => {
+    if (audioRef.current) {
+      setCurrentTime(audioRef.current.currentTime)
+    }
+  }
+
+  const handleLoadedMetadata = () => {
+    if (audioRef.current) {
+      setDuration(audioRef.current.duration)
+    }
+  }
+
+  const handleSeek = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const percentage = x / rect.width
+    const newTime = percentage * duration
+    
+    if (audioRef.current) {
+      audioRef.current.currentTime = newTime
+      setCurrentTime(newTime)
+    }
+  }
+
+  const handleVolumeChange = (e) => {
+    const newVolume = parseFloat(e.target.value)
+    setVolume(newVolume)
+    if (audioRef.current) {
+      audioRef.current.volume = newVolume
+    }
+  }
+
+  const handleEnded = () => {
+    setIsPlaying(false)
+    setCurrentTime(0)
+  }
+
+  const progress = duration > 0 ? (currentTime / duration) * 100 : 0
+
   return (
     <article className="bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
       {/* Post Header */}
@@ -53,28 +150,99 @@ export default function AudioPostCard({ post, onPlay }) {
 
         {/* Audio Player - Only show if ready */}
         {post.status === 'ready' && (
-          <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
-            <div className="flex items-center gap-4">
-              <button 
-                onClick={() => onPlay?.(post)}
-                className="w-10 h-10 bg-[#f4b840] hover:bg-[#e5a930] rounded-full flex items-center justify-center text-[#1a1a1a] transition-colors"
-              >
-                <Play size={16} fill="currentColor" />
-              </button>
-              <div className="flex-1">
-                <div className="h-1.5 bg-gray-300 rounded-full overflow-hidden mb-2">
-                  <div className="h-full w-0 bg-[#f4b840] rounded-full"></div>
+          <>
+            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
+              {/* Hidden audio element */}
+              <audio
+                ref={audioRef}
+                src={post.audio_path}
+                onTimeUpdate={handleTimeUpdate}
+                onLoadedMetadata={handleLoadedMetadata}
+                onEnded={handleEnded}
+                preload="metadata"
+              />
+
+              <div className="flex items-center gap-4">
+                <button 
+                  onClick={togglePlay}
+                  className="w-10 h-10 bg-[#f4b840] hover:bg-[#e5a930] rounded-full flex items-center justify-center text-[#1a1a1a] transition-colors"
+                >
+                  {isPlaying ? (
+                    <Pause size={16} fill="currentColor" />
+                  ) : (
+                    <Play size={16} fill="currentColor" />
+                  )}
+                </button>
+                <div className="flex-1">
+                  <div 
+                    className="h-1.5 bg-gray-300 rounded-full overflow-hidden mb-2 cursor-pointer"
+                    onClick={handleSeek}
+                  >
+                    <div 
+                      className="h-full bg-[#f4b840] rounded-full transition-all"
+                      style={{ width: `${progress}%` }}
+                    ></div>
+                  </div>
+                  <div className="flex justify-between text-xs text-gray-600">
+                    <span>{formatTime(currentTime)}</span>
+                    <span>{formatTime(duration)}</span>
+                  </div>
                 </div>
-                <div className="flex justify-between text-xs text-gray-600">
-                  <span>0:00</span>
-                  <span>--:--</span>
+                <div className="flex items-center gap-2">
+                  <Volume2 size={18} className="text-gray-600" />
+                  <input
+                    type="range"
+                    min="0"
+                    max="1"
+                    step="0.01"
+                    value={volume}
+                    onChange={handleVolumeChange}
+                    className="w-16 h-1.5 bg-gray-300 rounded-full appearance-none cursor-pointer"
+                    style={{
+                      background: `linear-gradient(to right, #f4b840 0%, #f4b840 ${volume * 100}%, #d1d5db ${volume * 100}%, #d1d5db 100%)`
+                    }}
+                  />
                 </div>
               </div>
-              <button className="text-gray-600 hover:text-gray-900">
-                <Volume2 size={18} />
-              </button>
             </div>
-          </div>
+
+            {/* Transcript Section - Always shown */}
+            <div className="mt-4 border border-gray-200 rounded-lg overflow-hidden">
+              <button
+                onClick={() => setTranscriptExpanded(!transcriptExpanded)}
+                className="w-full flex items-center justify-between p-3 bg-gray-50 hover:bg-gray-100 transition-colors"
+              >
+                <span className="text-sm font-medium text-gray-900">Transcript</span>
+                {loadingTranscript ? (
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-600"></div>
+                ) : (
+                  transcriptExpanded ? <ChevronUp size={18} /> : <ChevronDown size={18} />
+                )}
+              </button>
+              
+              {transcript && (
+                <div className={`bg-white transition-all ${transcriptExpanded ? 'max-h-96' : 'max-h-24'} overflow-y-auto`}>
+                  <div className="p-4">
+                    <p className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">
+                      {transcript}
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {!transcript && !loadingTranscript && (
+                <div className="p-4 bg-white">
+                  <p className="text-sm text-gray-500 italic">No transcript available</p>
+                </div>
+              )}
+
+              {loadingTranscript && (
+                <div className="p-4 bg-white text-center">
+                  <p className="text-sm text-gray-500">Loading transcript...</p>
+                </div>
+              )}
+            </div>
+          </>
         )}
 
         {/* Processing Status */}

frontend/src/components/Header.jsx

@@ -1,7 +1,7 @@
-import { Search, User, Volume2 } from 'lucide-react'
+import { Search, LogOut } from 'lucide-react'
 import { useState } from 'react'
 
-export default function Header({ user, onSearch, onLogout }) {
+export default function Header({ onSearch, onLogout }) {
   const [searchQuery, setSearchQuery] = useState('')
 
   const handleSearch = (e) => {
@@ -16,7 +16,9 @@ export default function Header({ user, onSearch, onLogout }) {
         {/* Left: Logo */}
         <div className="flex items-center gap-3 flex-shrink-0">
           <div className="w-8 h-8 bg-[#f4b840] rounded-lg flex items-center justify-center">
-            <Volume2 size={18} className="text-white" />
+            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
+            </svg>
           </div>
           <h1 className="text-lg font-bold text-gray-900">VoiceVault</h1>
         </div>
@@ -35,24 +37,15 @@ export default function Header({ user, onSearch, onLogout }) {
           </div>
         </div>
 
-        {/* Right: User Info / Login */}
+        {/* Right: Logout */}
         <div className="flex items-center gap-3 flex-shrink-0">
-          {user ? (
-            <div className="flex items-center gap-3">
-              <span className="text-sm text-gray-700">{user.display_name || user.email}</span>
-              <button
-                onClick={onLogout}
-                className="text-sm text-gray-600 hover:text-gray-900"
-              >
-                Logout
-              </button>
-            </div>
-          ) : (
-            <button className="bg-[#f4b840] hover:bg-[#e5a930] text-[#1a1a1a] px-4 py-2 rounded text-sm font-medium flex items-center gap-2">
-              <User size={16} />
-              Log In
-            </button>
-          )}
+          <button
+            onClick={onLogout}
+            className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 px-3 py-2 rounded hover:bg-gray-100 transition-colors"
+          >
+            <LogOut size={16} />
+            <span>Logout</span>
+          </button>
         </div>
       </div>
     </header>

frontend/src/components/Sidebar.jsx

@@ -1,6 +1,6 @@
 import { Plus, Home, History, Settings } from 'lucide-react'
 
-export default function Sidebar({ activeTab, onTabChange }) {
+export default function Sidebar({ user, activeTab, onTabChange }) {
   const navItems = [
     { id: 'create', label: 'Make an Archive Post', icon: Plus },
     { id: 'feed', label: 'My Feed', icon: Home },
@@ -8,9 +8,42 @@ export default function Sidebar({ activeTab, onTabChange }) {
     { id: 'settings', label: 'Settings', icon: Settings }
   ]
 
+  // Get user initials
+  const getInitials = () => {
+    if (user?.display_name) {
+      return user.display_name
+        .split(' ')
+        .map(n => n[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2)
+    }
+    if (user?.email) {
+      return user.email.slice(0, 2).toUpperCase()
+    }
+    return 'U'
+  }
+  
   return (
     <aside className="w-64 bg-white border-r border-gray-200 p-6 hidden md:block flex-shrink-0 overflow-y-auto">
       <div className="sticky top-6">
+        {/* User Profile */}
+        {user && (
+          <div className="mb-6 text-center">
+            <div className="w-20 h-20 bg-gradient-to-br from-[#f4b840] to-[#e5a930] rounded-full flex items-center justify-center text-[#1a1a1a] font-bold text-2xl mx-auto mb-3">
+              {getInitials()}
+            </div>
+            <h2 className="text-base font-semibold text-gray-900 truncate">
+              {user.display_name || user.email}
+            </h2>
+            {user.bio && (
+              <p className="text-xs text-gray-600 mt-1 line-clamp-2">
+                {user.bio}
+              </p>
+            )}
+          </div>
+        )}
+
         {/* Navigation */}
         <nav className="space-y-2">
           {navItems.map((item) => {

frontend/src/pages/CreatePost.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Upload, X } from 'lucide-react'
+import { Upload, X, FileText } from 'lucide-react'
 import { api } from '../api'
 
 export default function CreatePost({ user, onPostCreated }) {
@@ -8,14 +8,15 @@ export default function CreatePost({ user, onPostCreated }) {
   const [visibility, setVisibility] = useState('private')
   const [language, setLanguage] = useState('en')
   const [audioFile, setAudioFile] = useState(null)
-  const [uploading, setUploading] = useState(false)
+  const [transcribing, setTranscribing] = useState(false)
+  const [transcript, setTranscript] = useState(null)
+  const [postData, setPostData] = useState(null)
   const [error, setError] = useState(null)
   const [success, setSuccess] = useState(false)
 
   const handleFileSelect = (e) => {
     const file = e.target.files[0]
     if (file) {
-      // Check file type
       const validTypes = ['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/flac', 'audio/mp4', 'video/mp4']
       if (!validTypes.includes(file.type) && !file.name.match(/\.(mp3|wav|ogg|flac|m4a|mp4|mov|mkv|webm)$/i)) {
         setError('Invalid file type. Please upload an audio or video file.')
@@ -23,31 +24,30 @@ export default function CreatePost({ user, onPostCreated }) {
       }
       
       setAudioFile(file)
+      setTranscript(null)
+      setPostData(null)
       setError(null)
     }
   }
 
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    
+  const handleTranscribe = async () => {
     if (!audioFile) {
-      setError('Please select an audio file')
+      setError('Please select an audio file first')
       return
     }
 
     if (!title.trim()) {
-      setError('Please enter a title')
+      setError('Please enter a title first')
       return
     }
 
     if (!user?.user_id) {
-      setError('You must be logged in to create a post')
+      setError('You must be logged in')
       return
     }
 
-    setUploading(true)
+    setTranscribing(true)
     setError(null)
-    setSuccess(false)
 
     try {
       const formData = new FormData()
@@ -60,28 +60,38 @@ export default function CreatePost({ user, onPostCreated }) {
 
       const response = await api.uploadPost(formData)
       
-      console.log('Upload response:', response)
-      setSuccess(true)
-      
-      // Reset form
-      setTitle('')
-      setDescription('')
-      setVisibility('private')
-      setLanguage('en')
-      setAudioFile(null)
-      
-      // Notify parent component
-      onPostCreated?.(response)
-
-      // Show success message
-      setTimeout(() => setSuccess(false), 5000)
+      if (response.transcript_text) {
+        setTranscript(response.transcript_text)
+        setPostData(response)
+        setSuccess(true)
+        setTimeout(() => setSuccess(false), 3000)
+      } else {
+        setError('Transcription completed but no transcript returned')
+      }
     } catch (err) {
-      setError(err.message || 'Failed to upload post')
+      setError(err.message || 'Failed to transcribe audio')
     } finally {
-      setUploading(false)
+      setTranscribing(false)
     }
   }
 
+  const handleReset = () => {
+    setTitle('')
+    setDescription('')
+    setVisibility('private')
+    setLanguage('en')
+    setAudioFile(null)
+    setTranscript(null)
+    setPostData(null)
+    setError(null)
+    setSuccess(false)
+  }
+
+  const handleCreateAnother = () => {
+    handleReset()
+    onPostCreated?.()
+  }
+
   return (
     <div className="max-w-3xl mx-auto">
       <div className="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
@@ -95,187 +105,240 @@ export default function CreatePost({ user, onPostCreated }) {
 
         {success && (
           <div className="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
-            <p className="text-sm text-green-800">
-              Post uploaded successfully! Transcript is being generated...
+            <p className="text-sm text-green-800 font-medium">
+              ✓ Archive created and transcribed successfully!
             </p>
           </div>
         )}
 
-        <form onSubmit={handleSubmit} className="space-y-6">
-          {/* Title Input */}
-          <div>
-            <label className="block text-sm font-medium text-gray-900 mb-2">
-              Title *
-            </label>
-            <input
-              type="text"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              placeholder="Give your archive a descriptive title..."
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#f4b840] focus:border-transparent"
-              required
-              disabled={uploading}
-            />
-          </div>
-
-          {/* Description Input */}
-          <div>
-            <label className="block text-sm font-medium text-gray-900 mb-2">
-              Description (optional)
-            </label>
-            <textarea
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder="Add a description or context for this recording..."
-              rows={3}
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#f4b840] focus:border-transparent resize-none"
-              disabled={uploading}
-            />
-          </div>
-
-          {/* Audio File Upload */}
-          <div>
-            <label className="block text-sm font-medium text-gray-900 mb-2">
-              Audio/Video File *
-            </label>
-            
-            {!audioFile ? (
-              <label className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
-                <div className="flex flex-col items-center justify-center pt-5 pb-6">
-                  <Upload size={32} className="text-gray-400 mb-2" />
-                  <p className="text-sm text-gray-600 mb-1">
-                    <span className="font-semibold">Click to upload</span> or drag and drop
-                  </p>
-                  <p className="text-xs text-gray-500">
-                    MP3, WAV, OGG, FLAC, M4A, MP4, MOV, MKV, WEBM
-                  </p>
-                </div>
-                <input
-                  type="file"
-                  accept="audio/*,video/mp4,video/quicktime,video/x-matroska,video/webm"
-                  onChange={handleFileSelect}
-                  className="hidden"
-                  disabled={uploading}
-                />
+        {!transcript ? (
+          // STEP 1: Upload and Configure
+          <div className="space-y-6">
+            <div>
+              <label className="block text-sm font-medium text-gray-900 mb-2">
+                Title *
               </label>
-            ) : (
-              <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200">
-                <div className="flex items-center gap-3 flex-1 min-w-0">
-                  <div className="w-10 h-10 bg-[#f4b840] rounded-lg flex items-center justify-center flex-shrink-0">
-                    <Upload size={18} className="text-white" />
-                  </div>
-                  <div className="min-w-0">
-                    <p className="text-sm font-medium text-gray-900 truncate">
-                      {audioFile.name}
+              <input
+                type="text"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Give your archive a descriptive title..."
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#f4b840] focus:border-transparent"
+                required
+                disabled={transcribing}
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-900 mb-2">
+                Description (optional)
+              </label>
+              <textarea
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Add a description or context for this recording..."
+                rows={3}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#f4b840] focus:border-transparent resize-none"
+                disabled={transcribing}
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-900 mb-2">
+                Audio/Video File *
+              </label>
+              
+              {!audioFile ? (
+                <label className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
+                  <div className="flex flex-col items-center justify-center pt-5 pb-6">
+                    <Upload size={32} className="text-gray-400 mb-2" />
+                    <p className="text-sm text-gray-600 mb-1">
+                      <span className="font-semibold">Click to upload</span> or drag and drop
                     </p>
-                    <p className="text-xs text-gray-600">
-                      {(audioFile.size / 1024 / 1024).toFixed(2)} MB
+                    <p className="text-xs text-gray-500">
+                      MP3, WAV, OGG, FLAC, M4A, MP4, MOV, MKV, WEBM
                     </p>
                   </div>
+                  <input
+                    type="file"
+                    accept="audio/*,video/mp4,video/quicktime,video/x-matroska,video/webm"
+                    onChange={handleFileSelect}
+                    className="hidden"
+                    disabled={transcribing}
+                  />
+                </label>
+              ) : (
+                <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200">
+                  <div className="flex items-center gap-3 flex-1 min-w-0">
+                    <div className="w-10 h-10 bg-[#f4b840] rounded-lg flex items-center justify-center flex-shrink-0">
+                      <Upload size={18} className="text-white" />
+                    </div>
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium text-gray-900 truncate">
+                        {audioFile.name}
+                      </p>
+                      <p className="text-xs text-gray-600">
+                        {(audioFile.size / 1024 / 1024).toFixed(2)} MB
+                      </p>
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => setAudioFile(null)}
+                    className="text-gray-500 hover:text-gray-700 ml-2"
+                    disabled={transcribing}
+                  >
+                    <X size={20} />
+                  </button>
                 </div>
+              )}
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-900 mb-2">
+                Language
+              </label>
+              <select
+                value={language}
+                onChange={(e) => setLanguage(e.target.value)}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#f4b840] focus:border-transparent"
+                disabled={transcribing}
+              >
+                <option value="en">English</option>
+                <option value="es">Spanish</option>
+                <option value="fr">French</option>
+                <option value="de">German</option>
+                <option value="it">Italian</option>
+                <option value="pt">Portuguese</option>
+                <option value="zh">Chinese</option>
+                <option value="ja">Japanese</option>
+                <option value="ko">Korean</option>
+                <option value="ar">Arabic</option>
+              </select>
+            </div>
+
+            <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200">
+              <div>
+                <p className="font-medium text-gray-900">Visibility</p>
+                <p className="text-sm text-gray-600">
+                  {visibility === 'private' ? 'Only you can see this post' : 'Anyone can see this post'}
+                </p>
+              </div>
+              <div className="flex gap-2">
                 <button
                   type="button"
-                  onClick={() => setAudioFile(null)}
-                  className="text-gray-500 hover:text-gray-700 ml-2"
-                  disabled={uploading}
+                  onClick={() => setVisibility('private')}
+                  className={`px-4 py-2 rounded text-sm font-medium transition-colors ${
+                    visibility === 'private'
+                      ? 'bg-[#f4b840] text-[#1a1a1a]'
+                      : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                  }`}
+                  disabled={transcribing}
                 >
-                  <X size={20} />
+                  Private
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setVisibility('public')}
+                  className={`px-4 py-2 rounded text-sm font-medium transition-colors ${
+                    visibility === 'public'
+                      ? 'bg-[#f4b840] text-[#1a1a1a]'
+                      : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                  }`}
+                  disabled={transcribing}
+                >
+                  Public
                 </button>
               </div>
-            )}
-          </div>
-
-          {/* Language Selection */}
-          <div>
-            <label className="block text-sm font-medium text-gray-900 mb-2">
-              Language
-            </label>
-            <select
-              value={language}
-              onChange={(e) => setLanguage(e.target.value)}
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#f4b840] focus:border-transparent"
-              disabled={uploading}
-            >
-              <option value="en">English</option>
-              <option value="es">Spanish</option>
-              <option value="fr">French</option>
-              <option value="de">German</option>
-              <option value="it">Italian</option>
-              <option value="pt">Portuguese</option>
-              <option value="zh">Chinese</option>
-              <option value="ja">Japanese</option>
-              <option value="ko">Korean</option>
-              <option value="ar">Arabic</option>
-            </select>
-          </div>
-
-          {/* Visibility Toggle */}
-          <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200">
-            <div>
-              <p className="font-medium text-gray-900">Visibility</p>
-              <p className="text-sm text-gray-600">
-                {visibility === 'private' ? 'Only you can see this post' : 'Anyone can see this post'}
-              </p>
             </div>
-            <div className="flex gap-2">
-              <button
-                type="button"
-                onClick={() => setVisibility('private')}
-                className={`px-4 py-2 rounded text-sm font-medium transition-colors ${
-                  visibility === 'private'
-                    ? 'bg-[#f4b840] text-[#1a1a1a]'
-                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
-                }`}
-                disabled={uploading}
-              >
-                Private
-              </button>
-              <button
-                type="button"
-                onClick={() => setVisibility('public')}
-                className={`px-4 py-2 rounded text-sm font-medium transition-colors ${
-                  visibility === 'public'
-                    ? 'bg-[#f4b840] text-[#1a1a1a]'
-                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
-                }`}
-                disabled={uploading}
-              >
-                Public
-              </button>
-            </div>
-          </div>
 
-          {/* Submit Buttons */}
-          <div className="flex gap-3">
             <button
               type="button"
-              onClick={() => {
-                setTitle('')
-                setDescription('')
-                setAudioFile(null)
-                setError(null)
-              }}
-              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
-              disabled={uploading}
+              onClick={handleTranscribe}
+              disabled={transcribing || !audioFile || !title.trim()}
+              className="w-full px-4 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
             >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              disabled={uploading || !audioFile || !title.trim()}
-              className="flex-1 px-4 py-2 bg-[#f4b840] hover:bg-[#e5a930] text-[#1a1a1a] rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {uploading ? (
-                <span className="flex items-center justify-center gap-2">
-                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-[#1a1a1a]"></div>
-                  Uploading...
-                </span>
+              {transcribing ? (
+                <>
+                  <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+                  Transcribing & Creating Archive...
+                </>
               ) : (
-                'Create Archive'
+                <>
+                  <FileText size={18} />
+                  Transcribe & Create Archive
+                </>
               )}
             </button>
+            <p className="text-xs text-gray-600 text-center">
+              This will upload your file and generate a transcript
+            </p>
           </div>
-        </form>
+        ) : (
+          // STEP 2: Show Results
+          <div className="space-y-6">
+            <div className="p-5 bg-green-50 border border-green-200 rounded-lg">
+              <div className="flex items-start gap-3 mb-3">
+                <div className="w-10 h-10 bg-green-600 rounded-full flex items-center justify-center flex-shrink-0">
+                  <FileText size={20} className="text-white" />
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-lg font-semibold text-green-900 mb-1">
+                    Archive Created Successfully!
+                  </h3>
+                  <p className="text-sm text-green-700">
+                    Your audio has been transcribed and saved.
+                  </p>
+                </div>
+              </div>
+
+              <div className="mt-4 p-4 bg-white rounded border border-green-200">
+                <p className="text-xs font-semibold text-gray-900 mb-2">TRANSCRIPT</p>
+                <p className="text-sm text-gray-700 max-h-48 overflow-y-auto">
+                  {transcript}
+                </p>
+                <div className="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between text-xs text-gray-600">
+                  <span>{transcript.length} characters</span>
+                  <span>{postData?.rag_chunk_count || 0} RAG chunks</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4 p-4 bg-gray-50 rounded-lg">
+              <div>
+                <p className="text-xs text-gray-600 mb-1">Title</p>
+                <p className="text-sm font-medium text-gray-900">{title}</p>
+              </div>
+              <div>
+                <p className="text-xs text-gray-600 mb-1">Visibility</p>
+                <p className="text-sm font-medium text-gray-900 capitalize">{visibility}</p>
+              </div>
+              <div>
+                <p className="text-xs text-gray-600 mb-1">Language</p>
+                <p className="text-sm font-medium text-gray-900">{language.toUpperCase()}</p>
+              </div>
+              <div>
+                <p className="text-xs text-gray-600 mb-1">Status</p>
+                <p className="text-sm font-medium text-green-600">Ready</p>
+              </div>
+            </div>
+
+            <div className="flex gap-3">
+              <button
+                onClick={() => onPostCreated?.()}
+                className="flex-1 px-4 py-2 bg-[#f4b840] hover:bg-[#e5a930] text-[#1a1a1a] rounded-lg font-medium transition-colors"
+              >
+                View in Feed
+              </button>
+              <button
+                onClick={handleCreateAnother}
+                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
+              >
+                Create Another
+              </button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   )

frontend/src/pages/Feed.jsx

@@ -23,7 +23,7 @@ export default function Feed({ user }) {
       const params = {
         page,
         limit: 20,
-        user_id: user.user_id,
+        current_user_id: user.user_id, // For backend privacy checks
       }
       
       if (visibilityFilter !== 'all') {
@@ -31,7 +31,14 @@ export default function Feed({ user }) {
       }
 
       const response = await api.getPosts(params)
-      setPosts(response.posts || [])
+      let filteredPosts = response.posts || []
+      
+      // Frontend privacy filter: only show posts if they're public OR user is the author
+      filteredPosts = filteredPosts.filter(post => {
+        return post.visibility === 'public' || post.user_id === user.user_id
+      })
+      
+      setPosts(filteredPosts)
     } catch (err) {
       setError(err.message)
     } finally {