BuzzbeeSCD/ProjectE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update ProjectE application

Browse Source
This commit is contained in:
mbatchelder
2026-07-18 19:05:52 -04:00
parent 8f55626e03
commit 4c1cc50231
68 changed files with 1586 additions and 697 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/settings/settings-agents.tsx
+67 -11
View File
@@ -9,6 +9,16 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog';
interface Agent {
id: string;
@@ -24,20 +34,27 @@ export function SettingsAgents() {
const [createDialogOpen, setCreateDialogOpen] = useState(false);
const [newAgentName, setNewAgentName] = useState('');
const [newAgentTier, setNewAgentTier] = useState('read_only');
const [creating, setCreating] = useState(false);
const [deletingId, setDeletingId] = useState<string | null>(null);
const [agentToDelete, setAgentToDelete] = useState<Agent | null>(null);
const [error, setError] = useState<string | null>(null);
const [status, setStatus] = useState<string | null>(null);
useEffect(() => {
fetchAgents();
}, []);
async function fetchAgents() {
setLoading(true);
setError(null);
try {
const response = await fetch('/api/agents');
if (response.ok) {
const data = await response.json();
setAgents(data.items || []);
}
if (!response.ok) throw new Error('Unable to load agents.');
const data = await response.json();
setAgents(data.items || []);
} catch (error) {
console.error('Failed to fetch agents:', error);
setError('Unable to load agents. Please try again.');
} finally {
setLoading(false);
}
@@ -46,8 +63,11 @@ export function SettingsAgents() {
async function createAgent() {
if (!newAgentName.trim()) return;
setCreating(true);
setError(null);
setStatus(null);
try {
await fetch('/api/agents', {
const response = await fetch('/api/agents', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
@@ -56,22 +76,36 @@ export function SettingsAgents() {
status: 'active',
}),
});
if (!response.ok) throw new Error('Unable to create agent.');
setNewAgentName('');
setCreateDialogOpen(false);
fetchAgents();
setStatus('Agent created successfully.');
await fetchAgents();
} catch (error) {
console.error('Failed to create agent:', error);
setError('Unable to create agent. Please try again.');
} finally {
setCreating(false);
}
}
async function deleteAgent(id: string) {
if (!confirm('Are you sure? This will revoke the agent\'s access.')) return;
async function deleteAgent() {
if (!agentToDelete) return;
setDeletingId(agentToDelete.id);
setError(null);
setStatus(null);
try {
await fetch(`/api/agents/${id}`, { method: 'DELETE' });
fetchAgents();
const response = await fetch(`/api/agents/${agentToDelete.id}`, { method: 'DELETE' });
if (!response.ok) throw new Error('Unable to delete agent.');
setAgentToDelete(null);
setStatus('Agent deleted successfully.');
await fetchAgents();
} catch (error) {
console.error('Failed to delete agent:', error);
setError('Unable to delete agent. Please try again.');
} finally {
setDeletingId(null);
}
}
@@ -132,6 +166,13 @@ export function SettingsAgents() {
</div>
</CardHeader>
<CardContent>
{error && (
<div className="mb-4 flex items-center justify-between gap-3 text-sm text-destructive" role="alert">
<span>{error}</span>
<Button variant="outline" size="sm" onClick={fetchAgents} disabled={loading}>Retry</Button>
</div>
)}
{status && <p className="mb-4 text-sm text-muted-foreground" role="status">{status}</p>}
{loading ? (
<p className="py-8 text-center text-sm text-muted-foreground">
Loading agents...
@@ -173,8 +214,9 @@ export function SettingsAgents() {
<Button
variant="ghost"
size="icon"
onClick={() => deleteAgent(agent.id)}
onClick={() => setAgentToDelete(agent)}
aria-label={`Delete agent: ${agent.name}`}
disabled={deletingId === agent.id}
>
<Trash2 className="h-4 w-4 text-destructive" aria-hidden="true" />
</Button>
@@ -183,6 +225,20 @@ export function SettingsAgents() {
))}
</div>
)}
<AlertDialog open={!!agentToDelete} onOpenChange={(open) => !open && setAgentToDelete(null)}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete {agentToDelete?.name}?</AlertDialogTitle>
<AlertDialogDescription>This will revoke the agent's access.</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={!!deletingId}>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={deleteAgent} disabled={!!deletingId}>
{deletingId ? 'Deleting...' : 'Delete agent'}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</CardContent>
</Card>
);
apps/web/components/settings/settings-domains.tsx
+70 -13
View File
@@ -5,6 +5,16 @@ import { Plus, Trash2 } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog';
interface Domain {
id: string;
@@ -18,20 +28,27 @@ export function SettingsDomains() {
const [domains, setDomains] = useState<Domain[]>([]);
const [newDomainName, setNewDomainName] = useState('');
const [loading, setLoading] = useState(true);
const [creating, setCreating] = useState(false);
const [deletingId, setDeletingId] = useState<string | null>(null);
const [domainToDelete, setDomainToDelete] = useState<Domain | null>(null);
const [error, setError] = useState<string | null>(null);
const [status, setStatus] = useState<string | null>(null);
useEffect(() => {
fetchDomains();
}, []);
async function fetchDomains() {
setLoading(true);
setError(null);
try {
const response = await fetch('/api/domains?sort=sort_order');
if (response.ok) {
const data = await response.json();
setDomains(data.items || []);
}
if (!response.ok) throw new Error('Unable to load domains.');
const data = await response.json();
setDomains(data.items || []);
} catch (error) {
console.error('Failed to fetch domains:', error);
setError('Unable to load domains. Please try again.');
} finally {
setLoading(false);
}
@@ -40,8 +57,11 @@ export function SettingsDomains() {
async function addDomain() {
if (!newDomainName.trim()) return;
setCreating(true);
setError(null);
setStatus(null);
try {
await fetch('/api/domains', {
const response = await fetch('/api/domains', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
@@ -51,21 +71,35 @@ export function SettingsDomains() {
sort_order: domains.length,
}),
});
if (!response.ok) throw new Error('Unable to add domain.');
setNewDomainName('');
fetchDomains();
setStatus('Domain added successfully.');
await fetchDomains();
} catch (error) {
console.error('Failed to add domain:', error);
setError('Unable to add domain. Please try again.');
} finally {
setCreating(false);
}
}
async function deleteDomain(id: string) {
if (!confirm('Are you sure? This cannot be undone.')) return;
async function deleteDomain() {
if (!domainToDelete) return;
setDeletingId(domainToDelete.id);
setError(null);
setStatus(null);
try {
await fetch(`/api/domains/${id}`, { method: 'DELETE' });
fetchDomains();
const response = await fetch(`/api/domains/${domainToDelete.id}`, { method: 'DELETE' });
if (!response.ok) throw new Error('Unable to delete domain.');
setDomainToDelete(null);
setStatus('Domain deleted successfully.');
await fetchDomains();
} catch (error) {
console.error('Failed to delete domain:', error);
setError('Unable to delete domain. Please try again.');
} finally {
setDeletingId(null);
}
}
@@ -76,6 +110,13 @@ export function SettingsDomains() {
<CardDescription>Manage your workspace domains (e.g., Personal, Work, OTS).</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{error && (
<div className="flex items-center justify-between gap-3 text-sm text-destructive" role="alert">
<span>{error}</span>
<Button variant="outline" size="sm" onClick={fetchDomains} disabled={loading}>Retry</Button>
</div>
)}
{status && <p className="text-sm text-muted-foreground" role="status">{status}</p>}
{/* Existing domains */}
<div className="space-y-2">
{loading ? (
@@ -93,8 +134,9 @@ export function SettingsDomains() {
<Button
variant="ghost"
size="icon"
onClick={() => deleteDomain(domain.id)}
onClick={() => setDomainToDelete(domain)}
aria-label={`Delete domain: ${domain.name}`}
disabled={deletingId === domain.id}
>
<Trash2 className="h-4 w-4 text-destructive" aria-hidden="true" />
</Button>
@@ -114,12 +156,27 @@ export function SettingsDomains() {
value={newDomainName}
onChange={(e) => setNewDomainName(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && addDomain()}
disabled={creating}
/>
<Button onClick={addDomain}>
<Button onClick={addDomain} disabled={creating || !newDomainName.trim()}>
<Plus className="mr-1 h-4 w-4" />
Add
{creating ? 'Adding...' : 'Add'}
</Button>
</div>
<AlertDialog open={!!domainToDelete} onOpenChange={(open) => !open && setDomainToDelete(null)}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete {domainToDelete?.name}?</AlertDialogTitle>
<AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={!!deletingId}>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={deleteDomain} disabled={!!deletingId}>
{deletingId ? 'Deleting...' : 'Delete domain'}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</CardContent>
</Card>
);
apps/web/components/settings/settings-import-export.tsx
+35 -7
View File
@@ -66,16 +66,20 @@ export function SettingsImportExport() {
const [importResult, setImportResult] = useState<ImportResult | null>(null);
const [confirmImport, setConfirmImport] = useState(false);
const [pendingImportFile, setPendingImportFile] = useState<File | null>(null);
const [exportError, setExportError] = useState<string | null>(null);
const [importError, setImportError] = useState<string | null>(null);
// ── Export ────────────────────────────────────────────────────────────────
async function handleExport() {
setExporting(true);
setExportProgress(0);
setExportError(null);
let progressInterval: ReturnType<typeof setInterval> | undefined;
try {
// Simulate progress while fetching
const progressInterval = setInterval(() => {
progressInterval = setInterval(() => {
setExportProgress((prev) => Math.min(prev + 10, 90));
}, 200);
@@ -86,6 +90,7 @@ export function SettingsImportExport() {
});
clearInterval(progressInterval);
progressInterval = undefined;
if (!response.ok) {
throw new Error('Export failed');
@@ -108,8 +113,10 @@ export function SettingsImportExport() {
toast.success('Export completed successfully');
} catch (error) {
console.error('Failed to export:', error);
setExportError('Failed to export data. Please try again.');
toast.error('Failed to export data');
} finally {
if (progressInterval) clearInterval(progressInterval);
setExporting(false);
setExportProgress(0);
}
@@ -131,6 +138,7 @@ export function SettingsImportExport() {
setPendingImportFile(file);
setImportResult(null);
setImportError(null);
setConfirmImport(true);
}
@@ -140,18 +148,21 @@ export function SettingsImportExport() {
setConfirmImport(false);
setImporting(true);
setImportProgress(0);
setImportError(null);
let progressInterval: ReturnType<typeof setInterval> | undefined;
try {
const text = await pendingImportFile.text();
const data = JSON.parse(text);
if (!data.version) {
setImportError('Invalid file. Select a valid Project E export and try again.');
toast.error('Invalid file — missing version field. Is this a valid Project E export?');
return;
}
// Simulate progress
const progressInterval = setInterval(() => {
progressInterval = setInterval(() => {
setImportProgress((prev) => Math.min(prev + 5, 90));
}, 300);
@@ -162,16 +173,25 @@ export function SettingsImportExport() {
});
clearInterval(progressInterval);
progressInterval = undefined;
if (!response.ok) {
const errorData = await response.json();
toast.error(errorData.error?.message || 'Import failed');
let message = 'Import failed. Please try again.';
try {
const errorData = await response.json();
message = errorData.error?.message || message;
} catch {
// Use the default message when the server does not return JSON.
}
setImportError(message);
toast.error(message);
return;
}
const result: ImportResult = await response.json();
setImportProgress(100);
setImportResult(result);
setPendingImportFile(null);
if (result.success) {
toast.success(`Import complete: ${result.imported} records imported`);
@@ -182,10 +202,11 @@ export function SettingsImportExport() {
}
} catch (error) {
console.error('Failed to import:', error);
setImportError('Failed to parse or import the file. Please try again.');
toast.error('Failed to parse import file. Please check the format.');
} finally {
if (progressInterval) clearInterval(progressInterval);
setImporting(false);
setPendingImportFile(null);
}
}
@@ -255,7 +276,7 @@ export function SettingsImportExport() {
{/* Progress */}
{exporting && (
<div className="mt-4 space-y-2">
<Progress value={exportProgress} className="h-2" />
<Progress value={exportProgress} className="h-2" aria-label={`Export progress: ${exportProgress}%`} />
<p className="text-xs text-muted-foreground">Exporting... {exportProgress}%</p>
</div>
)}
@@ -272,6 +293,7 @@ export function SettingsImportExport() {
)}
{exporting ? 'Exporting...' : 'Export to JSON'}
</Button>
{exportError && <p className="mt-2 text-sm text-destructive" role="alert">{exportError}</p>}
</div>
{/* ── Import Section ─────────────────────────────────────────────────── */}
@@ -284,7 +306,7 @@ export function SettingsImportExport() {
{/* Progress */}
{importing && (
<div className="mt-4 space-y-2">
<Progress value={importProgress} className="h-2" />
<Progress value={importProgress} className="h-2" aria-label={`Import progress: ${importProgress}%`} />
<p className="text-xs text-muted-foreground">Importing... {importProgress}%</p>
</div>
)}
@@ -356,6 +378,12 @@ export function SettingsImportExport() {
</span>
</Button>
</label>
{importError && (
<div className="mt-2 flex items-center gap-3 text-sm text-destructive" role="alert">
<span>{importError}</span>
{pendingImportFile && <Button variant="outline" size="sm" onClick={executeImport} disabled={importing}>Retry import</Button>}
</div>
)}
</div>
{/* ── Import Confirmation Dialog ─────────────────────────────────────── */}