feat: restructure as pnpm monorepo with Tauri desktop shell
- Migrate to packages/web + packages/desktop workspace layout via git mv - Add Tauri v2 desktop shell with @tauri-apps/plugin-http for CORS bypass - Configure Turborepo with package-level dependsOn build graph - Add semantic-release with exec plugin for GHA output and disabled PR comments - Fix http:default capability scope to allow all HTTP/HTTPS origins - Add Vite Tauri integration (clearScreen, TAURI_DEV_HOST, target, envPrefix) - Add semantic-release.yml and release.yml GitHub Actions workflows - Fix all Biome lint errors (noArrayIndexKey, noNonNullAssertion, button types)
This commit is contained in:
Offending Commit
329
packages/web/src/components/peers/PeerList.tsx
Normal file
329
packages/web/src/components/peers/PeerList.tsx
Normal file
@@ -0,0 +1,329 @@
|
||||
import { usePeers } from "@/api/queries";
|
||||
import type { components } from "@/api/schema.d.ts";
|
||||
import { EmptyState } from "@/components/shared/EmptyState";
|
||||
import { ErrorAlert } from "@/components/shared/ErrorAlert";
|
||||
import { JsonViewer } from "@/components/shared/JsonViewer";
|
||||
import { PageLoader } from "@/components/shared/LoadingSpinner";
|
||||
import { Pagination } from "@/components/shared/Pagination";
|
||||
import { SortControl, type SortDir } from "@/components/shared/SortControl";
|
||||
import { MonoCaption, PageTitle } from "@/components/ui/typography";
|
||||
import { COLOR } from "@/lib/constants";
|
||||
import { Link, useNavigate, useParams } from "@tanstack/react-router";
|
||||
import { type Variants, motion } from "framer-motion";
|
||||
import { ArrowLeft, ChevronRight, Clock, Eye, Users } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
|
||||
type Peer = components["schemas"]["Peer"];
|
||||
|
||||
type KindStyle = { bg: string; text: string; border: string };
|
||||
|
||||
const KIND_STYLES: Record<string, KindStyle> = {
|
||||
agent: { bg: COLOR.warningDim, text: COLOR.warning, border: COLOR.warningBorder },
|
||||
discord: { bg: "rgba(14,165,233,0.08)", text: "#38bdf8", border: "rgba(14,165,233,0.2)" },
|
||||
ai: { bg: COLOR.accentDim, text: COLOR.accentText, border: COLOR.accentBorder },
|
||||
};
|
||||
|
||||
function peerKind(id: string): (KindStyle & { label: string }) | null {
|
||||
if (id.startsWith("agent-")) return { label: "agent", ...KIND_STYLES.agent };
|
||||
if (id.startsWith("discord-")) return { label: "discord", ...KIND_STYLES.discord };
|
||||
if (["claude", "hermes", "codex"].includes(id)) return { label: "ai", ...KIND_STYLES.ai };
|
||||
return null;
|
||||
}
|
||||
|
||||
const SORT_OPTIONS = [
|
||||
{ value: "created_at", label: "Newest" },
|
||||
{ value: "id", label: "ID" },
|
||||
];
|
||||
|
||||
const container: Variants = {
|
||||
hidden: { opacity: 0 },
|
||||
show: { opacity: 1, transition: { staggerChildren: 0.06 } },
|
||||
};
|
||||
const item: Variants = {
|
||||
hidden: { opacity: 0, y: 10 },
|
||||
show: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 25 } },
|
||||
};
|
||||
|
||||
export function PeerList() {
|
||||
const { workspaceId } = useParams({ strict: false }) as { workspaceId: string };
|
||||
const [page, setPage] = useState(1);
|
||||
const [sortField, setSortField] = useState("created_at");
|
||||
const [sortDir, setSortDir] = useState<SortDir>("desc");
|
||||
const [expandedMeta, setExpandedMeta] = useState<Set<string>>(new Set());
|
||||
const [activeFilters, setActiveFilters] = useState<Set<string>>(new Set());
|
||||
const navigate = useNavigate();
|
||||
const { data, isLoading, error } = usePeers(workspaceId, page);
|
||||
|
||||
const peers: Peer[] = (data as { items?: Peer[] } | undefined)?.items ?? [];
|
||||
const totalPages = (data as { pages?: number } | undefined)?.pages ?? 1;
|
||||
const total = (data as { total?: number } | undefined)?.total ?? 0;
|
||||
|
||||
const availableLabels = useMemo(() => {
|
||||
const labels = new Set<string>();
|
||||
for (const peer of peers) {
|
||||
const kind = peerKind(peer.id);
|
||||
if (kind) labels.add(kind.label);
|
||||
}
|
||||
return labels;
|
||||
}, [peers]);
|
||||
|
||||
const sorted = useMemo(() => {
|
||||
return [...peers].sort((a, b) => {
|
||||
let cmp = 0;
|
||||
if (sortField === "created_at") {
|
||||
cmp = new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
|
||||
} else if (sortField === "id") {
|
||||
cmp = a.id.localeCompare(b.id);
|
||||
}
|
||||
return sortDir === "asc" ? cmp : -cmp;
|
||||
});
|
||||
}, [peers, sortField, sortDir]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (activeFilters.size === 0) return sorted;
|
||||
return sorted.filter((peer) => {
|
||||
const kind = peerKind(peer.id);
|
||||
return kind ? activeFilters.has(kind.label) : false;
|
||||
});
|
||||
}, [sorted, activeFilters]);
|
||||
|
||||
function toggleFilter(label: string) {
|
||||
setActiveFilters((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.has(label) ? next.delete(label) : next.add(label);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
function handleSort(field: string, dir: SortDir) {
|
||||
setSortField(field);
|
||||
setSortDir(dir);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<motion.div initial={{ opacity: 0, y: -8 }} animate={{ opacity: 1, y: 0 }} className="mb-6">
|
||||
<Link
|
||||
to="/workspaces/$workspaceId"
|
||||
params={{ workspaceId } as never}
|
||||
className="inline-flex items-center gap-1.5 text-xs mb-4 transition-colors"
|
||||
style={{ color: COLOR.dimText }}
|
||||
>
|
||||
<ArrowLeft className="w-3 h-3" strokeWidth={1.5} />
|
||||
{workspaceId}
|
||||
</Link>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Users className="w-5 h-5" style={{ color: COLOR.accent }} strokeWidth={1.5} />
|
||||
<PageTitle>Peers</PageTitle>
|
||||
{total > 0 && (
|
||||
<span
|
||||
className="ml-1 text-xs font-mono px-2 py-0.5 rounded-full"
|
||||
style={{
|
||||
background: COLOR.accentSubtle,
|
||||
color: COLOR.accentText,
|
||||
border: `1px solid ${COLOR.accentBorder}`,
|
||||
}}
|
||||
>
|
||||
{total}
|
||||
</span>
|
||||
)}
|
||||
<div className="ml-auto">
|
||||
<SortControl
|
||||
options={SORT_OPTIONS}
|
||||
field={sortField}
|
||||
dir={sortDir}
|
||||
onChange={handleSort}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<MonoCaption className="mt-0.5" as="p">
|
||||
{workspaceId}
|
||||
</MonoCaption>
|
||||
</motion.div>
|
||||
|
||||
{availableLabels.size > 0 && (
|
||||
<div className="flex items-center gap-2 flex-wrap mb-4">
|
||||
{[...availableLabels].map((label) => {
|
||||
const style = KIND_STYLES[label];
|
||||
const active = activeFilters.has(label);
|
||||
return (
|
||||
<button
|
||||
key={label}
|
||||
type="button"
|
||||
onClick={() => toggleFilter(label)}
|
||||
className="text-xs font-mono px-2 py-1 rounded transition-opacity hover:opacity-90"
|
||||
style={{
|
||||
background: active ? style.bg : "transparent",
|
||||
color: active ? style.text : "var(--text-4)",
|
||||
border: `1px solid ${active ? style.border : "var(--border)"}`,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{activeFilters.size > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveFilters(new Set())}
|
||||
className="text-xs font-mono px-2 py-1 rounded transition-opacity hover:opacity-80"
|
||||
style={{ color: "var(--text-4)" }}
|
||||
>
|
||||
clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ErrorAlert error={error instanceof Error ? error : null} />
|
||||
{isLoading && <PageLoader />}
|
||||
|
||||
{!isLoading && peers.length === 0 && (
|
||||
<EmptyState
|
||||
icon={Users}
|
||||
title="No peers found"
|
||||
description="No peers exist in this workspace."
|
||||
/>
|
||||
)}
|
||||
|
||||
{!isLoading && peers.length > 0 && filtered.length === 0 && (
|
||||
<EmptyState
|
||||
icon={Users}
|
||||
title="No peers match"
|
||||
description="No peers match the selected filters."
|
||||
/>
|
||||
)}
|
||||
|
||||
{!isLoading && filtered.length > 0 && (
|
||||
<>
|
||||
<motion.div
|
||||
variants={container}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
className="grid grid-cols-1 sm:grid-cols-2 gap-2"
|
||||
>
|
||||
{filtered.map((peer) => {
|
||||
const kind = peerKind(peer.id);
|
||||
const metaKeys = Object.keys(peer.metadata ?? {});
|
||||
const hasMeta = metaKeys.length > 0;
|
||||
const metaOpen = expandedMeta.has(peer.id);
|
||||
|
||||
function toggleMeta(e: React.MouseEvent) {
|
||||
e.stopPropagation();
|
||||
setExpandedMeta((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.has(peer.id) ? next.delete(peer.id) : next.add(peer.id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={peer.id}
|
||||
variants={item}
|
||||
className="rounded-xl overflow-hidden group"
|
||||
style={{
|
||||
background: COLOR.cardBaseBg,
|
||||
border: `1px solid ${COLOR.cardBaseBorder}`,
|
||||
}}
|
||||
whileHover={{
|
||||
background: COLOR.accentDimHover,
|
||||
borderColor: COLOR.accentBorder,
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
navigate({
|
||||
to: "/workspaces/$workspaceId/peers/$peerId",
|
||||
params: { workspaceId, peerId: peer.id } as never,
|
||||
})
|
||||
}
|
||||
className="text-left w-full px-5 py-4"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span
|
||||
className="font-mono text-sm font-medium truncate"
|
||||
style={{ color: COLOR.accentSoft }}
|
||||
>
|
||||
{peer.id}
|
||||
</span>
|
||||
<ChevronRight
|
||||
className="w-4 h-4 shrink-0 ml-2 opacity-30 group-hover:opacity-70 transition-opacity"
|
||||
style={{ color: COLOR.accent }}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{kind && (
|
||||
<span
|
||||
className="text-xs font-mono px-1.5 py-0.5 rounded"
|
||||
style={{
|
||||
background: kind.bg,
|
||||
color: kind.text,
|
||||
border: `1px solid ${kind.border}`,
|
||||
}}
|
||||
>
|
||||
{kind.label}
|
||||
</span>
|
||||
)}
|
||||
{(peer.configuration as { observe_me?: boolean } | null)?.observe_me && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Eye
|
||||
className="w-3 h-3"
|
||||
style={{ color: COLOR.accentText }}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
<span className="text-xs" style={{ color: COLOR.accentText }}>
|
||||
observed
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{peer.created_at && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock
|
||||
className="w-3 h-3"
|
||||
style={{ color: COLOR.dimIcon }}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
<MonoCaption>{new Date(peer.created_at).toLocaleString()}</MonoCaption>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{hasMeta && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleMeta}
|
||||
className="w-full flex items-center gap-1.5 px-5 py-1.5 text-xs font-mono transition-opacity hover:opacity-80"
|
||||
style={{
|
||||
borderTop: `1px solid ${COLOR.cardBaseBorder}`,
|
||||
color: COLOR.dimText,
|
||||
}}
|
||||
>
|
||||
<ChevronRight
|
||||
className="w-3 h-3 transition-transform duration-150"
|
||||
style={{ transform: metaOpen ? "rotate(90deg)" : "rotate(0deg)" }}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
{metaKeys.length} metadata key{metaKeys.length !== 1 ? "s" : ""}
|
||||
</button>
|
||||
{metaOpen && (
|
||||
<div className="px-4 pb-4">
|
||||
<JsonViewer data={peer.metadata} maxHeight="200px" />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
<Pagination page={page} totalPages={totalPages} onPageChange={setPage} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user