frontend/components/git/GitWorkspace.jsx

'use client';
"use client";

import {useEffect,useState} from "react";

export default function GitWorkspace(){

const [status,setStatus]=useState("");
const [branches,setBranches]=useState([]);
const [history,setHistory]=useState([]);

async function load(){

try{

const s=await fetch("/api/workspace/git/status");
const statusData=await s.json();
setStatus(JSON.stringify(statusData,null,2));

}catch{
setStatus("Git service unavailable.");
}

try{

const b=await fetch("/api/workspace/git/branches");
if(b.ok){
setBranches(await b.json());
}

}catch{}

try{

const h=await fetch("/api/workspace/git/history");
if(h.ok){
setHistory(await h.json());
}

}catch{}

}

useEffect(()=>{
load();
},[]);

return(

<div className="h-full flex flex-col bg-neutral-950 text-white">

<div className="border-b border-neutral-800 p-3 text-lg font-bold">
Git Workspace
</div>

<div className="grid grid-cols-3 flex-1">

<div className="border-r border-neutral-800 overflow-auto p-4">

<h2 className="font-semibold mb-2">
Branches
</h2>

<ul className="space-y-2">

{branches.length===0?
<li>No branches.</li>:
branches.map((b,i)=>
<li key={i}>{typeof b==="string"?b:b.name}</li>
)}

</ul>

</div>

<div className="border-r border-neutral-800 overflow-auto p-4">

<h2 className="font-semibold mb-2">
Commit History
</h2>

<ul className="space-y-2 text-sm">

{history.length===0?
<li>No commits.</li>:
history.map((c,i)=>
<li key={i}>
{typeof c==="string"?c:(c.message||JSON.stringify(c))}
</li>
)}

</ul>

</div>

<div className="overflow-auto p-4">

<h2 className="font-semibold mb-2">
Repository Status
</h2>

<pre className="text-xs whitespace-pre-wrap">
{status}
</pre>

</div>

</div>

</div>

);

}