From dfd799f0464874c2e9dd40719fc2b23fc0b69a83 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Sat, 16 May 2026 11:32:40 -0700
Subject: [PATCH] feat(ui): add JSON export functionality to session viewer for
 AI fine-tuning

---
 .../(home)/sessions/[sessionId]/page.tsx      | 93 +++++++++++++++----
 1 file changed, 76 insertions(+), 17 deletions(-)

diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/sessions/[sessionId]/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/sessions/[sessionId]/page.tsx
index 79b8de8b..19c196e4 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/sessions/[sessionId]/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/sessions/[sessionId]/page.tsx
@@ -2,7 +2,15 @@
 
 import { useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { Loader2, ArrowLeft, Bot, User, Code2, Wrench } from "lucide-react";
+import {
+  Loader2,
+  ArrowLeft,
+  Bot,
+  User,
+  Code2,
+  Wrench,
+  Download,
+} from "lucide-react";
 import ReactMarkdown from "react-markdown";
 
 interface ToolCall {
@@ -33,8 +41,8 @@ export default function SessionViewer() {
 
   useEffect(() => {
     fetch(`/api/chat/threads/${sessionId}`)
-      .then(r => r.json())
-      .then(d => {
+      .then((r) => r.json())
+      .then((d) => {
         setThread(d.thread);
         setMessages(d.messages || []);
       })
@@ -54,7 +62,7 @@ export default function SessionViewer() {
     return (
       <div className="flex-1 flex flex-col items-center justify-center bg-[#faf8f5]">
         <p className="text-zinc-500 mb-4">Session not found.</p>
-        <button 
+        <button
           onClick={() => router.push(`/${workspace}/project/${projectId}/plan`)}
           className="text-indigo-600 font-medium text-sm hover:underline"
         >
@@ -64,20 +72,62 @@ export default function SessionViewer() {
     );
   }
 
+  const exportJSON = () => {
+    const exportData = {
+      session_id: sessionId,
+      title: thread.title,
+      created_at: thread.createdAt,
+      messages: messages.map((m) => ({
+        role: m.role,
+        content:
+          m.content || (m.textSegments ? m.textSegments.join("\n\n") : ""),
+        tool_calls: m.toolCalls
+          ? m.toolCalls.map((tc) => ({
+              name: tc.name,
+              arguments: tc.args,
+            }))
+          : undefined,
+      })),
+    };
+
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+      type: "application/json",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `vibn-session-${sessionId}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
   return (
     <div className="flex-1 bg-[#faf8f5] overflow-y-auto flex flex-col">
       <header className="sticky top-0 bg-white border-b border-zinc-200 px-6 py-4 flex items-center gap-4 z-10">
-        <button 
+        <button
           onClick={() => router.push(`/${workspace}/project/${projectId}/plan`)}
           className="w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-100 text-zinc-500 transition-colors"
           title="Back to Sessions"
         >
           <ArrowLeft className="w-4 h-4" />
         </button>
-        <div>
-          <h1 className="text-lg font-semibold text-zinc-900 leading-none mb-1">{thread.title}</h1>
-          <p className="text-xs text-zinc-500 font-mono">{new Date(thread.createdAt).toLocaleString()}</p>
+        <div className="flex-1 min-w-0">
+          <h1 className="text-lg font-semibold text-zinc-900 leading-none mb-1">
+            {thread.title}
+          </h1>
+          <p className="text-xs text-zinc-500 font-mono">
+            {new Date(thread.createdAt).toLocaleString()}
+          </p>
         </div>
+        <button
+          onClick={exportJSON}
+          className="flex items-center gap-2 px-3 py-1.5 bg-white border border-zinc-200 rounded-md text-sm font-medium text-zinc-700 hover:bg-zinc-50 hover:text-zinc-900 transition-colors shadow-sm"
+        >
+          <Download className="w-4 h-4" />
+          Export JSON
+        </button>
       </header>
 
       <div className="flex-1 max-w-4xl mx-auto w-full p-6 pb-20 space-y-8">
@@ -94,7 +144,7 @@ export default function SessionViewer() {
                 </div>
               )}
             </div>
-            
+
             <div className="flex-1 min-w-0 space-y-3">
               {m.role === "user" && m.content && (
                 <div className="text-[15px] text-zinc-800 leading-relaxed font-medium whitespace-pre-wrap">
@@ -107,7 +157,10 @@ export default function SessionViewer() {
                   {m.toolCalls && m.toolCalls.length > 0 && (
                     <div className="space-y-1.5 mb-4">
                       {m.toolCalls.map((tc, idx) => (
-                        <div key={idx} className="bg-zinc-100 border border-zinc-200 rounded-md p-2.5 text-xs font-mono overflow-x-auto text-zinc-600">
+                        <div
+                          key={idx}
+                          className="bg-zinc-100 border border-zinc-200 rounded-md p-2.5 text-xs font-mono overflow-x-auto text-zinc-600"
+                        >
                           <div className="flex items-center gap-2 text-zinc-800 font-semibold mb-1">
                             <Wrench className="w-3.5 h-3.5" />
                             {tc.name}
@@ -125,20 +178,26 @@ export default function SessionViewer() {
                       <ReactMarkdown>{m.content}</ReactMarkdown>
                     </div>
                   )}
-                  
+
                   {/* Fallback for when textSegments exists but content is empty */}
-                  {!m.content && m.textSegments && m.textSegments.length > 0 && (
-                    <div className="prose prose-sm prose-zinc max-w-none bg-white border border-zinc-200 p-4 rounded-xl shadow-sm">
-                      <ReactMarkdown>{m.textSegments.join("\n\n")}</ReactMarkdown>
-                    </div>
-                  )}
+                  {!m.content &&
+                    m.textSegments &&
+                    m.textSegments.length > 0 && (
+                      <div className="prose prose-sm prose-zinc max-w-none bg-white border border-zinc-200 p-4 rounded-xl shadow-sm">
+                        <ReactMarkdown>
+                          {m.textSegments.join("\n\n")}
+                        </ReactMarkdown>
+                      </div>
+                    )}
                 </>
               )}
             </div>
           </div>
         ))}
         {messages.length === 0 && (
-          <p className="text-center text-zinc-500 italic mt-10">Empty session.</p>
+          <p className="text-center text-zinc-500 italic mt-10">
+            Empty session.
+          </p>
         )}
       </div>
     </div>