yunxiafei/openclaw-mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): Implement system health check and enhance UI for agent management

Browse Source
This commit is contained in:
Abhimanyu Saharan
2026-02-04 23:43:40 +05:30
parent b6f31fe6ea
commit 8452dc110e
15 changed files with 727 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
backend/app/api/gateways.py
View File

@@ -223,6 +223,13 @@ Start a new session (or restart gateway), then run:
openclaw skills list --eligible | grep -i skyll
""".strip()
SKYLL_DISABLE_MESSAGE = """
To uninstall Skyll, remove the broker skill folder from the shared skills directory.
Exact steps (copy/paste)
rm -rf ~/.openclaw/skills/skyll
""".strip()
async def _send_skyll_enable_message(gateway: Gateway) -> None:
if not gateway.url:
@@ -241,6 +248,23 @@ async def _send_skyll_enable_message(gateway: Gateway) -> None:
)
async def _send_skyll_disable_message(gateway: Gateway) -> None:
if not gateway.url:
raise OpenClawGatewayError("Gateway url is required")
if not gateway.main_session_key:
raise OpenClawGatewayError("gateway main_session_key is required")
client_config = GatewayClientConfig(url=gateway.url, token=gateway.token)
await ensure_session(
gateway.main_session_key, config=client_config, label="Main Agent"
)
await send_message(
SKYLL_DISABLE_MESSAGE,
session_key=gateway.main_session_key,
config=client_config,
deliver=False,
)
@router.get("", response_model=list[GatewayRead])
def list_gateways(
session: Session = Depends(get_session),
@@ -306,6 +330,11 @@ async def update_gateway(
await _send_skyll_enable_message(gateway)
except OpenClawGatewayError:
pass
if previous_skyll_enabled and not gateway.skyll_enabled:
try:
await _send_skyll_disable_message(gateway)
except OpenClawGatewayError:
pass
return gateway

2
frontend/next-env.d.ts vendored
View File

@@ -1,6 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/dev/types/routes.d.ts";
import "./.next/types/routes.d.ts";
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

219
frontend/src/app/agents/page.tsx
View File

@@ -4,7 +4,7 @@ import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
import { SignInButton, SignedIn, SignedOut } from "@clerk/nextjs";
import {
type ColumnDef,
type SortingState,
@@ -13,6 +13,7 @@ import {
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import { useQueryClient } from "@tanstack/react-query";
import { StatusPill } from "@/components/atoms/StatusPill";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
@@ -33,9 +34,7 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { getApiBaseUrl } from "@/lib/api-base";
const apiBase = getApiBaseUrl();
import { apiRequest, useAuthedMutation, useAuthedQuery } from "@/lib/api-query";
type Agent = {
id: string;
@@ -102,129 +101,91 @@ const truncate = (value?: string | null, max = 18) => {
};
export default function AgentsPage() {
const { getToken, isSignedIn } = useAuth();
const queryClient = useQueryClient();
const router = useRouter();
const [agents, setAgents] = useState<Agent[]>([]);
const [boards, setBoards] = useState<Board[]>([]);
const [boardId, setBoardId] = useState("");
const [sorting, setSorting] = useState<SortingState>([
{ id: "name", desc: false },
]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [gatewayStatus, setGatewayStatus] = useState<GatewayStatus | null>(null);
const [gatewayError, setGatewayError] = useState<string | null>(null);
const [deleteTarget, setDeleteTarget] = useState<Agent | null>(null);
const [isDeleting, setIsDeleting] = useState(false);
const [deleteError, setDeleteError] = useState<string | null>(null);
const boardsQuery = useAuthedQuery<Board[]>(["boards"], "/api/v1/boards", {
refetchInterval: 30_000,
refetchOnMount: "always",
});
const agentsQuery = useAuthedQuery<Agent[]>(["agents"], "/api/v1/agents", {
refetchInterval: 15_000,
refetchOnMount: "always",
});
const boards = boardsQuery.data ?? [];
const agents = agentsQuery.data ?? [];
useEffect(() => {
if (!boardId && boards.length > 0) {
setBoardId(boards[0].id);
}
}, [boardId, boards]);
const statusPath = boardId
? `/api/v1/gateways/status?board_id=${boardId}`
: null;
const gatewayStatusQuery = useAuthedQuery<GatewayStatus>(
["gateway-status", boardId || "all"],
statusPath,
{
enabled: Boolean(statusPath),
refetchInterval: 15_000,
}
);
const gatewayStatus = gatewayStatusQuery.data ?? null;
const deleteMutation = useAuthedMutation<void, Agent, { previous?: Agent[] }>(
async (agent, token) =>
apiRequest(`/api/v1/agents/${agent.id}`, {
method: "DELETE",
token,
}),
{
onMutate: async (agent) => {
await queryClient.cancelQueries({ queryKey: ["agents"] });
const previous = queryClient.getQueryData<Agent[]>(["agents"]);
queryClient.setQueryData<Agent[]>(["agents"], (old = []) =>
old.filter((item) => item.id !== agent.id)
);
return { previous };
},
onError: (_error, _agent, context) => {
if (context?.previous) {
queryClient.setQueryData(["agents"], context.previous);
}
},
onSuccess: () => {
setDeleteTarget(null);
},
onSettled: () => {
queryClient.invalidateQueries({ queryKey: ["agents"] });
},
}
);
const sortedAgents = useMemo(() => [...agents], [agents]);
const loadBoards = async () => {
if (!isSignedIn) return;
try {
const token = await getToken();
const response = await fetch(`${apiBase}/api/v1/boards`, {
headers: { Authorization: token ? `Bearer ${token}` : "" },
});
if (!response.ok) {
throw new Error("Unable to load boards.");
}
const data = (await response.json()) as Board[];
setBoards(data);
if (!boardId && data.length > 0) {
setBoardId(data[0].id);
}
} catch (err) {
setError(err instanceof Error ? err.message : "Something went wrong.");
}
};
const loadAgents = async () => {
if (!isSignedIn) return;
setIsLoading(true);
setError(null);
try {
const token = await getToken();
const response = await fetch(`${apiBase}/api/v1/agents`, {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
});
if (!response.ok) {
throw new Error("Unable to load agents.");
}
const data = (await response.json()) as Agent[];
setAgents(data);
} catch (err) {
setError(err instanceof Error ? err.message : "Something went wrong.");
} finally {
setIsLoading(false);
}
};
const loadGatewayStatus = async () => {
if (!isSignedIn || !boardId) return;
setGatewayError(null);
try {
const token = await getToken();
const response = await fetch(
`${apiBase}/api/v1/gateways/status?board_id=${boardId}`,
{ headers: { Authorization: token ? `Bearer ${token}` : "" } }
);
if (!response.ok) {
throw new Error("Unable to load gateway status.");
}
const statusData = (await response.json()) as GatewayStatus;
setGatewayStatus(statusData);
} catch (err) {
setGatewayError(err instanceof Error ? err.message : "Something went wrong.");
}
};
useEffect(() => {
loadBoards();
loadAgents();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isSignedIn]);
useEffect(() => {
if (boardId) {
loadGatewayStatus();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [boardId, isSignedIn]);
const handleDelete = async () => {
if (!deleteTarget || !isSignedIn) return;
setIsDeleting(true);
setDeleteError(null);
try {
const token = await getToken();
const response = await fetch(`${apiBase}/api/v1/agents/${deleteTarget.id}`, {
method: "DELETE",
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
});
if (!response.ok) {
throw new Error("Unable to delete agent.");
}
await loadAgents();
setDeleteTarget(null);
} catch (err) {
setDeleteError(err instanceof Error ? err.message : "Something went wrong.");
} finally {
setIsDeleting(false);
}
const handleDelete = () => {
if (!deleteTarget) return;
deleteMutation.mutate(deleteTarget);
};
const handleRefresh = async () => {
await loadBoards();
await loadAgents();
await loadGatewayStatus();
await Promise.all([
boardsQuery.refetch(),
agentsQuery.refetch(),
gatewayStatusQuery.refetch(),
]);
};
const columns = useMemo<ColumnDef<Agent>[]>(
@@ -362,11 +323,12 @@ export default function AgentsPage() {
{agents.length} agent{agents.length === 1 ? "" : "s"} total.
</p>
</div>
{agents.length > 0 ? (
<div className="flex items-center gap-2">
<Button
variant="outline"
onClick={handleRefresh}
disabled={isLoading}
disabled={agentsQuery.isLoading}
>
Refresh
</Button>
@@ -374,19 +336,23 @@ export default function AgentsPage() {
New agent
</Button>
</div>
) : null}
</div>
</div>
<div className="p-8">
{error ? (
{agentsQuery.error ? (
<div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
{error}
{agentsQuery.error.message}
</div>
) : null}
{agents.length === 0 && !isLoading ? (
<div className="flex flex-1 flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-slate-200 bg-white/70 p-10 text-center text-sm text-slate-500">
No agents yet. Create your first agent to get started.
{agents.length === 0 && !agentsQuery.isLoading ? (
<div className="flex flex-1 flex-col items-center justify-center gap-4 rounded-xl border border-dashed border-slate-200 bg-white/70 p-10 text-center text-sm text-slate-500">
<p>No agents yet. Create your first agent to get started.</p>
<Button onClick={() => router.push("/agents/new")}>
Create your first agent
</Button>
</div>
) : (
<div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
@@ -470,8 +436,10 @@ export default function AgentsPage() {
{gatewayStatus?.error ? (
<p className="mt-3 text-xs text-red-600">{gatewayStatus.error}</p>
) : null}
{gatewayError ? (
<p className="mt-3 text-xs text-red-600">{gatewayError}</p>
{gatewayStatusQuery.error ? (
<p className="mt-3 text-xs text-red-600">
{gatewayStatusQuery.error.message}
</p>
) : null}
</div>
</div>
@@ -483,7 +451,6 @@ export default function AgentsPage() {
onOpenChange={(nextOpen) => {
if (!nextOpen) {
setDeleteTarget(null);
setDeleteError(null);
}
}}
>
@@ -494,17 +461,17 @@ export default function AgentsPage() {
This will remove {deleteTarget?.name}. This action cannot be undone.
</DialogDescription>
</DialogHeader>
{deleteError ? (
{deleteMutation.error ? (
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
{deleteError}
{deleteMutation.error.message}
</div>
) : null}
<DialogFooter>
<Button variant="outline" onClick={() => setDeleteTarget(null)}>
Cancel
</Button>
<Button onClick={handleDelete} disabled={isDeleting}>
{isDeleting ? "Deleting…" : "Delete"}
<Button onClick={handleDelete} disabled={deleteMutation.isPending}>
{deleteMutation.isPending ? "Deleting…" : "Delete"}
</Button>
</DialogFooter>
</DialogContent>

39
frontend/src/app/boards/[boardId]/edit/page.tsx
View File

@@ -105,8 +105,8 @@ export default function EditBoardPage() {
[gateways, gatewayId]
);
const loadGateways = async () => {
if (!isSignedIn) return;
const loadGateways = async (): Promise<Gateway[]> => {
if (!isSignedIn) return [];
const token = await getToken();
const response = await fetch(`${apiBase}/api/v1/gateways`, {
headers: { Authorization: token ? `Bearer ${token}` : "" },
@@ -539,14 +539,35 @@ export default function EditBoardPage() {
disabled={isLoading}
/>
</div>
<div className="flex items-center gap-3 rounded-lg border border-slate-200 px-4 py-3 text-sm text-slate-700">
<input
type="checkbox"
checked={skyllEnabled}
onChange={(event) => setSkyllEnabled(event.target.checked)}
className="h-4 w-4 rounded border-slate-300 text-slate-900"
<div className="flex items-center justify-between gap-3 rounded-lg border border-slate-200 px-4 py-3">
<div>
<p className="text-sm font-medium text-slate-900">
Skyll dynamic skills
</p>
<a
href="https://www.skyll.app"
target="_blank"
rel="noreferrer"
className="text-xs font-medium text-blue-600 hover:text-blue-700"
>
skyll.app
</a>
</div>
<button
type="button"
role="switch"
aria-checked={skyllEnabled}
onClick={() => setSkyllEnabled((prev) => !prev)}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition ${
skyllEnabled ? "bg-blue-600" : "bg-slate-200"
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition ${
skyllEnabled ? "translate-x-5" : "translate-x-1"
}`}
/>
<span>Enable Skyll dynamic skills</span>
</button>
</div>
</div>
</div>

35
frontend/src/app/boards/new/page.tsx
View File

@@ -462,14 +462,35 @@ export default function NewBoardPage() {
disabled={isLoading}
/>
</div>
<div className="flex items-center gap-3 rounded-lg border border-slate-200 px-4 py-3 text-sm text-slate-700">
<input
type="checkbox"
checked={skyllEnabled}
onChange={(event) => setSkyllEnabled(event.target.checked)}
className="h-4 w-4 rounded border-slate-300 text-slate-900"
<div className="flex items-center justify-between gap-3 rounded-lg border border-slate-200 px-4 py-3">
<div>
<p className="text-sm font-medium text-slate-900">
Skyll dynamic skills
</p>
<a
href="https://www.skyll.app"
target="_blank"
rel="noreferrer"
className="text-xs font-medium text-blue-600 hover:text-blue-700"
>
skyll.app
</a>
</div>
<button
type="button"
role="switch"
aria-checked={skyllEnabled}
onClick={() => setSkyllEnabled((prev) => !prev)}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition ${
skyllEnabled ? "bg-blue-600" : "bg-slate-200"
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition ${
skyllEnabled ? "translate-x-5" : "translate-x-1"
}`}
/>
<span>Enable Skyll dynamic skills</span>
</button>
</div>
</div>
</div>

119
frontend/src/app/boards/page.tsx
View File

@@ -1,21 +1,22 @@
"use client";
import { useEffect, useMemo, useState } from "react";
import { useMemo, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
import { SignInButton, SignedIn, SignedOut } from "@clerk/nextjs";
import {
type ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
} from "@tanstack/react-table";
import { useQueryClient } from "@tanstack/react-query";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { Button } from "@/components/ui/button";
import { getApiBaseUrl } from "@/lib/api-base";
import { apiRequest, useAuthedMutation, useAuthedQuery } from "@/lib/api-query";
import {
Dialog,
DialogContent,
@@ -31,73 +32,55 @@ type Board = {
slug: string;
};
const apiBase = getApiBaseUrl();
export default function BoardsPage() {
const { getToken, isSignedIn } = useAuth();
const queryClient = useQueryClient();
const router = useRouter();
const [boards, setBoards] = useState<Board[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [deleteTarget, setDeleteTarget] = useState<Board | null>(null);
const [isDeleting, setIsDeleting] = useState(false);
const [deleteError, setDeleteError] = useState<string | null>(null);
const boardsQuery = useAuthedQuery<Board[]>(["boards"], "/api/v1/boards", {
refetchInterval: 30_000,
refetchOnMount: "always",
});
const boards = boardsQuery.data ?? [];
const sortedBoards = useMemo(
() => [...boards].sort((a, b) => a.name.localeCompare(b.name)),
[boards]
);
const loadBoards = async () => {
if (!isSignedIn) return;
setIsLoading(true);
setError(null);
try {
const token = await getToken();
const response = await fetch(`${apiBase}/api/v1/boards`, {
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
});
if (!response.ok) {
throw new Error("Unable to load boards.");
}
const data = (await response.json()) as Board[];
setBoards(data);
} catch (err) {
setError(err instanceof Error ? err.message : "Something went wrong.");
} finally {
setIsLoading(false);
}
};
useEffect(() => {
loadBoards();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isSignedIn]);
const handleDelete = async () => {
if (!deleteTarget || !isSignedIn) return;
setIsDeleting(true);
setDeleteError(null);
try {
const token = await getToken();
const response = await fetch(`${apiBase}/api/v1/boards/${deleteTarget.id}`, {
const deleteMutation = useAuthedMutation<void, Board, { previous?: Board[] }>(
async (board, token) =>
apiRequest(`/api/v1/boards/${board.id}`, {
method: "DELETE",
headers: {
Authorization: token ? `Bearer ${token}` : "",
token,
}),
{
onMutate: async (board) => {
await queryClient.cancelQueries({ queryKey: ["boards"] });
const previous = queryClient.getQueryData<Board[]>(["boards"]);
queryClient.setQueryData<Board[]>(["boards"], (old = []) =>
old.filter((item) => item.id !== board.id)
);
return { previous };
},
});
if (!response.ok) {
throw new Error("Unable to delete board.");
onError: (_error, _board, context) => {
if (context?.previous) {
queryClient.setQueryData(["boards"], context.previous);
}
setBoards((prev) => prev.filter((board) => board.id !== deleteTarget.id));
},
onSuccess: () => {
setDeleteTarget(null);
} catch (err) {
setDeleteError(err instanceof Error ? err.message : "Something went wrong.");
} finally {
setIsDeleting(false);
},
onSettled: () => {
queryClient.invalidateQueries({ queryKey: ["boards"] });
},
}
);
const handleDelete = () => {
if (!deleteTarget) return;
deleteMutation.mutate(deleteTarget);
};
const columns = useMemo<ColumnDef<Board>[]>(
@@ -181,22 +164,27 @@ export default function BoardsPage() {
{sortedBoards.length === 1 ? "" : "s"} total.
</p>
</div>
{sortedBoards.length > 0 ? (
<Button onClick={() => router.push("/boards/new")}>
New board
</Button>
) : null}
</div>
</div>
<div className="p-8">
{error && (
{boardsQuery.error && (
<div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
{error}
{boardsQuery.error.message}
</div>
)}
{sortedBoards.length === 0 && !isLoading ? (
<div className="flex flex-1 flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-slate-200 bg-white/70 p-10 text-center text-sm text-slate-500">
No boards yet. Create your first board to get started.
{sortedBoards.length === 0 && !boardsQuery.isLoading ? (
<div className="flex flex-1 flex-col items-center justify-center gap-4 rounded-xl border border-dashed border-slate-200 bg-white/70 p-10 text-center text-sm text-slate-500">
<p>No boards yet. Create your first board to get started.</p>
<Button onClick={() => router.push("/boards/new")}>
Create your first board
</Button>
</div>
) : (
<div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
@@ -250,7 +238,6 @@ export default function BoardsPage() {
onOpenChange={(nextOpen) => {
if (!nextOpen) {
setDeleteTarget(null);
setDeleteError(null);
}
}}
>
@@ -261,17 +248,17 @@ export default function BoardsPage() {
This will remove {deleteTarget?.name}. This action cannot be undone.
</DialogDescription>
</DialogHeader>
{deleteError ? (
{deleteMutation.error ? (
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
{deleteError}
{deleteMutation.error.message}
</div>
) : null}
<DialogFooter>
<Button variant="outline" onClick={() => setDeleteTarget(null)}>
Cancel
</Button>
<Button onClick={handleDelete} disabled={isDeleting}>
{isDeleting ? "Deleting…" : "Delete"}
<Button onClick={handleDelete} disabled={deleteMutation.isPending}>
{deleteMutation.isPending ? "Deleting…" : "Delete"}
</Button>
</DialogFooter>
</DialogContent>

51
frontend/src/app/dashboard/page.tsx
View File

@@ -1,8 +1,8 @@
"use client";
import { useEffect, useMemo, useState } from "react";
import { useMemo } from "react";
import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
import { SignInButton, SignedIn, SignedOut } from "@clerk/nextjs";
import {
Area,
AreaChart,
@@ -22,7 +22,7 @@ import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { Button } from "@/components/ui/button";
import MetricSparkline from "@/components/charts/metric-sparkline";
import { getApiBaseUrl } from "@/lib/api-base";
import { useAuthedQuery } from "@/lib/api-query";
type RangeKey = "24h" | "7d";
type BucketKey = "hour" | "day";
@@ -76,8 +76,6 @@ type DashboardMetrics = {
wip: WipSeriesSet;
};
const apiBase = getApiBaseUrl();
const hourFormatter = new Intl.DateTimeFormat("en-US", { hour: "numeric" });
const dayFormatter = new Intl.DateTimeFormat("en-US", {
month: "short",
@@ -251,41 +249,16 @@ function ChartCard({
}
export default function DashboardPage() {
const { getToken, isSignedIn } = useAuth();
const [metrics, setMetrics] = useState<DashboardMetrics | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const loadMetrics = async () => {
if (!isSignedIn) return;
setIsLoading(true);
setError(null);
try {
const token = await getToken();
const response = await fetch(
`${apiBase}/api/v1/metrics/dashboard?range=24h`,
const metricsQuery = useAuthedQuery<DashboardMetrics>(
["metrics", "dashboard", "24h"],
"/api/v1/metrics/dashboard?range=24h",
{
headers: {
Authorization: token ? `Bearer ${token}` : "",
},
refetchInterval: 15_000,
refetchOnMount: "always",
},
);
if (!response.ok) {
throw new Error("Unable to load dashboard metrics.");
}
const data = (await response.json()) as DashboardMetrics;
setMetrics(data);
} catch (err) {
setError(err instanceof Error ? err.message : "Something went wrong.");
} finally {
setIsLoading(false);
}
};
useEffect(() => {
loadMetrics();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isSignedIn]);
const metrics = metricsQuery.data ?? null;
const throughputSeries = useMemo(
() => (metrics ? buildSeries(metrics.throughput.primary) : []),
@@ -386,13 +359,13 @@ export default function DashboardPage() {
</div>
<div className="p-8">
{error ? (
{metricsQuery.error ? (
<div className="rounded-lg border border-slate-200 bg-white p-4 text-sm text-slate-600 shadow-sm">
{error}
{metricsQuery.error.message}
</div>
) : null}
{isLoading && !metrics ? (
{metricsQuery.isLoading && !metrics ? (
<div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
Loading dashboard metrics…
</div>

94
frontend/src/app/gateways/[gatewayId]/edit/page.tsx
View File

@@ -74,6 +74,13 @@ export default function EditGatewayPage() {
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const canSubmit =
Boolean(name.trim()) &&
Boolean(gatewayUrl.trim()) &&
Boolean(mainSessionKey.trim()) &&
Boolean(workspaceRoot.trim()) &&
gatewayCheckStatus === "success";
useEffect(() => {
if (!isSignedIn || !gatewayId) return;
const loadGateway = async () => {
@@ -249,6 +256,39 @@ export default function EditGatewayPage() {
disabled={isLoading}
/>
</div>
<div className="space-y-2">
<label className="flex items-center gap-2 text-sm font-medium text-slate-900">
Install Skyll
<a
href="https://www.skyll.app"
target="_blank"
rel="noreferrer"
className="text-xs font-medium text-blue-600 hover:text-blue-700"
>
skyll.app
</a>
</label>
<div className="flex h-11 items-center justify-end rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-4 shadow-sm">
<button
type="button"
role="switch"
aria-checked={skyllEnabled}
onClick={() => setSkyllEnabled((prev) => !prev)}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition ${
skyllEnabled ? "bg-blue-600" : "bg-slate-200"
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition ${
skyllEnabled ? "translate-x-5" : "translate-x-1"
}`}
/>
</button>
</div>
</div>
</div>
<div className="grid gap-6 md:grid-cols-2">
<div className="space-y-2">
<label className="text-sm font-medium text-slate-900">
Gateway URL <span className="text-red-500">*</span>
@@ -256,7 +296,12 @@ export default function EditGatewayPage() {
<div className="relative">
<Input
value={gatewayUrl}
onChange={(event) => setGatewayUrl(event.target.value)}
onChange={(event) => {
setGatewayUrl(event.target.value);
setGatewayUrlError(null);
setGatewayCheckStatus("idle");
setGatewayCheckMessage(null);
}}
onBlur={runGatewayCheck}
placeholder="ws://gateway:18789"
disabled={isLoading}
@@ -293,35 +338,40 @@ export default function EditGatewayPage() {
</p>
) : null}
</div>
</div>
<div className="grid gap-6 md:grid-cols-2">
<div className="space-y-2">
<label className="text-sm font-medium text-slate-900">
Gateway token
</label>
<Input
value={gatewayToken}
onChange={(event) => setGatewayToken(event.target.value)}
onChange={(event) => {
setGatewayToken(event.target.value);
setGatewayCheckStatus("idle");
setGatewayCheckMessage(null);
}}
onBlur={runGatewayCheck}
placeholder="Bearer token"
disabled={isLoading}
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-slate-900">
Main session key <span className="text-red-500">*</span>
</label>
<Input
value={mainSessionKey}
onChange={(event) => setMainSessionKey(event.target.value)}
placeholder={DEFAULT_MAIN_SESSION_KEY}
disabled={isLoading}
/>
</div>
</div>
<div className="grid gap-6 md:grid-cols-2">
<div className="space-y-2">
<label className="text-sm font-medium text-slate-900">
Main session key <span className="text-red-500">*</span>
</label>
<Input
value={mainSessionKey}
onChange={(event) => {
setMainSessionKey(event.target.value);
setGatewayCheckStatus("idle");
setGatewayCheckMessage(null);
}}
placeholder={DEFAULT_MAIN_SESSION_KEY}
disabled={isLoading}
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-slate-900">
Workspace root <span className="text-red-500">*</span>
@@ -333,17 +383,9 @@ export default function EditGatewayPage() {
disabled={isLoading}
/>
</div>
<div className="flex items-center gap-3 rounded-lg border border-slate-200 px-4 py-3 text-sm text-slate-700">
<input
type="checkbox"
checked={skyllEnabled}
onChange={(event) => setSkyllEnabled(event.target.checked)}
className="h-4 w-4 rounded border-slate-300 text-slate-900"
/>
<span>Enable Skyll dynamic skills</span>
</div>
</div>
{error ? <p className="text-sm text-red-500">{error}</p> : null}
<div className="flex justify-end gap-3">
@@ -355,7 +397,7 @@ export default function EditGatewayPage() {
>
Back
</Button>
<Button type="submit" disabled={isLoading}>
<Button type="submit" disabled={isLoading || !canSubmit}>
{isLoading ? "Saving…" : "Save changes"}
</Button>
</div>

94
frontend/src/app/gateways/new/page.tsx
View File

@@ -58,6 +58,13 @@ export default function NewGatewayPage() {
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const canSubmit =
Boolean(name.trim()) &&
Boolean(gatewayUrl.trim()) &&
Boolean(mainSessionKey.trim()) &&
Boolean(workspaceRoot.trim()) &&
gatewayCheckStatus === "success";
useEffect(() => {
setGatewayCheckStatus("idle");
setGatewayCheckMessage(null);
@@ -205,6 +212,39 @@ export default function NewGatewayPage() {
disabled={isLoading}
/>
</div>
<div className="space-y-2">
<label className="flex items-center gap-2 text-sm font-medium text-slate-900">
Install Skyll
<a
href="https://www.skyll.app"
target="_blank"
rel="noreferrer"
className="text-xs font-medium text-blue-600 hover:text-blue-700"
>
skyll.app
</a>
</label>
<div className="flex h-11 items-center justify-end rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-4 shadow-sm">
<button
type="button"
role="switch"
aria-checked={skyllEnabled}
onClick={() => setSkyllEnabled((prev) => !prev)}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition ${
skyllEnabled ? "bg-blue-600" : "bg-slate-200"
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition ${
skyllEnabled ? "translate-x-5" : "translate-x-1"
}`}
/>
</button>
</div>
</div>
</div>
<div className="grid gap-6 md:grid-cols-2">
<div className="space-y-2">
<label className="text-sm font-medium text-slate-900">
Gateway URL <span className="text-red-500">*</span>
@@ -212,7 +252,12 @@ export default function NewGatewayPage() {
<div className="relative">
<Input
value={gatewayUrl}
onChange={(event) => setGatewayUrl(event.target.value)}
onChange={(event) => {
setGatewayUrl(event.target.value);
setGatewayUrlError(null);
setGatewayCheckStatus("idle");
setGatewayCheckMessage(null);
}}
onBlur={runGatewayCheck}
placeholder="ws://gateway:18789"
disabled={isLoading}
@@ -249,35 +294,40 @@ export default function NewGatewayPage() {
</p>
) : null}
</div>
</div>
<div className="grid gap-6 md:grid-cols-2">
<div className="space-y-2">
<label className="text-sm font-medium text-slate-900">
Gateway token
</label>
<Input
value={gatewayToken}
onChange={(event) => setGatewayToken(event.target.value)}
onChange={(event) => {
setGatewayToken(event.target.value);
setGatewayCheckStatus("idle");
setGatewayCheckMessage(null);
}}
onBlur={runGatewayCheck}
placeholder="Bearer token"
disabled={isLoading}
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-slate-900">
Main session key <span className="text-red-500">*</span>
</label>
<Input
value={mainSessionKey}
onChange={(event) => setMainSessionKey(event.target.value)}
placeholder={DEFAULT_MAIN_SESSION_KEY}
disabled={isLoading}
/>
</div>
</div>
<div className="grid gap-6 md:grid-cols-2">
<div className="space-y-2">
<label className="text-sm font-medium text-slate-900">
Main session key <span className="text-red-500">*</span>
</label>
<Input
value={mainSessionKey}
onChange={(event) => {
setMainSessionKey(event.target.value);
setGatewayCheckStatus("idle");
setGatewayCheckMessage(null);
}}
placeholder={DEFAULT_MAIN_SESSION_KEY}
disabled={isLoading}
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-slate-900">
Workspace root <span className="text-red-500">*</span>
@@ -289,17 +339,9 @@ export default function NewGatewayPage() {
disabled={isLoading}
/>
</div>
<div className="flex items-center gap-3 rounded-lg border border-slate-200 px-4 py-3 text-sm text-slate-700">
<input
type="checkbox"
checked={skyllEnabled}
onChange={(event) => setSkyllEnabled(event.target.checked)}
className="h-4 w-4 rounded border-slate-300 text-slate-900"
/>
<span>Enable Skyll dynamic skills</span>
</div>
</div>
{error ? <p className="text-sm text-red-500">{error}</p> : null}
<div className="flex justify-end gap-3">
@@ -311,7 +353,7 @@ export default function NewGatewayPage() {
>
Cancel
</Button>
<Button type="submit" disabled={isLoading}>
<Button type="submit" disabled={isLoading || !canSubmit}>
{isLoading ? "Creating…" : "Create gateway"}
</Button>
</div>

231
frontend/src/app/gateways/page.tsx
View File

@@ -1,9 +1,9 @@
"use client";
import { useEffect, useMemo, useState } from "react";
import { useMemo, useState } from "react";
import Link from "next/link";
import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
import { SignInButton, SignedIn, SignedOut } from "@clerk/nextjs";
import {
type ColumnDef,
type SortingState,
@@ -12,10 +12,11 @@ import {
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import { useQueryClient } from "@tanstack/react-query";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { Button } from "@/components/ui/button";
import { Button, buttonVariants } from "@/components/ui/button";
import {
Dialog,
DialogContent,
@@ -24,9 +25,7 @@ import {
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { getApiBaseUrl } from "@/lib/api-base";
const apiBase = getApiBaseUrl();
import { apiRequest, useAuthedMutation, useAuthedQuery } from "@/lib/api-query";
type Gateway = {
id: string;
@@ -59,70 +58,59 @@ const formatTimestamp = (value?: string | null) => {
};
export default function GatewaysPage() {
const { getToken, isSignedIn } = useAuth();
const [gateways, setGateways] = useState<Gateway[]>([]);
const queryClient = useQueryClient();
const [sorting, setSorting] = useState<SortingState>([
{ id: "name", desc: false },
]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [deleteTarget, setDeleteTarget] = useState<Gateway | null>(null);
const [isDeleting, setIsDeleting] = useState(false);
const [deleteError, setDeleteError] = useState<string | null>(null);
const sortedGateways = useMemo(() => [...gateways], [gateways]);
const loadGateways = async () => {
if (!isSignedIn) return;
setIsLoading(true);
setError(null);
try {
const token = await getToken();
const response = await fetch(`${apiBase}/api/v1/gateways`, {
headers: { Authorization: token ? `Bearer ${token}` : "" },
});
if (!response.ok) {
throw new Error("Unable to load gateways.");
}
const data = (await response.json()) as Gateway[];
setGateways(data);
} catch (err) {
setError(err instanceof Error ? err.message : "Something went wrong.");
} finally {
setIsLoading(false);
}
};
useEffect(() => {
loadGateways();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isSignedIn]);
const handleDelete = async () => {
if (!deleteTarget || !isSignedIn) return;
setIsDeleting(true);
setDeleteError(null);
try {
const token = await getToken();
const response = await fetch(
`${apiBase}/api/v1/gateways/${deleteTarget.id}`,
const gatewaysQuery = useAuthedQuery<Gateway[]>(
["gateways"],
"/api/v1/gateways",
{
method: "DELETE",
headers: { Authorization: token ? `Bearer ${token}` : "" },
refetchInterval: 30_000,
refetchOnMount: "always",
}
);
if (!response.ok) {
throw new Error("Unable to delete gateway.");
const gateways = gatewaysQuery.data ?? [];
const sortedGateways = useMemo(() => [...gateways], [gateways]);
const deleteMutation = useAuthedMutation<
void,
Gateway,
{ previous?: Gateway[] }
>(
async (gateway, token) =>
apiRequest(`/api/v1/gateways/${gateway.id}`, {
method: "DELETE",
token,
}),
{
onMutate: async (gateway) => {
await queryClient.cancelQueries({ queryKey: ["gateways"] });
const previous = queryClient.getQueryData<Gateway[]>(["gateways"]);
queryClient.setQueryData<Gateway[]>(["gateways"], (old = []) =>
old.filter((item) => item.id !== gateway.id)
);
return { previous };
},
onError: (_error, _gateway, context) => {
if (context?.previous) {
queryClient.setQueryData(["gateways"], context.previous);
}
setGateways((prev) => prev.filter((item) => item.id !== deleteTarget.id));
},
onSuccess: () => {
setDeleteTarget(null);
} catch (err) {
setDeleteError(err instanceof Error ? err.message : "Something went wrong.");
} finally {
setIsDeleting(false);
},
onSettled: () => {
queryClient.invalidateQueries({ queryKey: ["gateways"] });
},
}
);
const handleDelete = () => {
if (!deleteTarget) return;
deleteMutation.mutate(deleteTarget);
};
const columns = useMemo<ColumnDef<Gateway>[]>(
@@ -182,9 +170,12 @@ export default function GatewaysPage() {
header: "",
cell: ({ row }) => (
<div className="flex justify-end gap-2">
<Button variant="ghost" asChild size="sm">
<Link href={`/gateways/${row.original.id}/edit`}>Edit</Link>
</Button>
<Link
href={`/gateways/${row.original.id}/edit`}
className={buttonVariants({ variant: "ghost", size: "sm" })}
>
Edit
</Link>
<Button
variant="ghost"
size="sm"
@@ -223,43 +214,38 @@ export default function GatewaysPage() {
<SignedIn>
<DashboardSidebar />
<main className="flex-1 overflow-y-auto bg-slate-50">
<div className="border-b border-slate-200 bg-white px-8 py-6">
<div className="sticky top-0 z-30 border-b border-slate-200 bg-white">
<div className="px-8 py-6">
<div className="flex items-center justify-between">
<div>
<h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
<h1 className="text-2xl font-semibold tracking-tight text-slate-900">
Gateways
</h1>
<p className="mt-1 text-sm text-slate-500">
Manage OpenClaw gateway connections used by boards.
Manage OpenClaw gateway connections used by boards
</p>
</div>
<Button asChild>
<Link href="/gateways/new">Create gateway</Link>
</Button>
{gateways.length > 0 ? (
<Link
href="/gateways/new"
className={buttonVariants({ size: "md", variant: "primary" })}
>
Create gateway
</Link>
) : null}
</div>
</div>
</div>
<div className="p-8">
<div className="rounded-xl border border-slate-200 bg-white shadow-sm">
<div className="border-b border-slate-200 px-6 py-4">
<div className="flex items-center justify-between">
<p className="text-sm font-semibold text-slate-900">All gateways</p>
{isLoading ? (
<span className="text-xs text-slate-500">Loading…</span>
) : (
<span className="text-xs text-slate-500">
{gateways.length} total
</span>
)}
</div>
</div>
<div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
<div className="overflow-x-auto">
<table className="w-full border-collapse text-left text-sm">
<thead className="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
<table className="w-full text-left text-sm">
<thead className="sticky top-0 z-10 bg-slate-50 text-xs font-semibold uppercase tracking-wider text-slate-500">
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} className="px-6 py-3 font-medium">
<th key={header.id} className="px-6 py-3">
{header.isPlaceholder
? null
: flexRender(
@@ -272,7 +258,14 @@ export default function GatewaysPage() {
))}
</thead>
<tbody className="divide-y divide-slate-100">
{table.getRowModel().rows.map((row) => (
{gatewaysQuery.isLoading ? (
<tr>
<td colSpan={columns.length} className="px-6 py-8">
<span className="text-sm text-slate-500">Loading…</span>
</td>
</tr>
) : table.getRowModel().rows.length ? (
table.getRowModel().rows.map((row) => (
<tr key={row.id} className="hover:bg-slate-50">
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="px-6 py-4">
@@ -283,18 +276,60 @@ export default function GatewaysPage() {
</td>
))}
</tr>
))}
))
) : (
<tr>
<td colSpan={columns.length} className="px-6 py-16">
<div className="flex flex-col items-center justify-center text-center">
<div className="mb-4 rounded-full bg-slate-50 p-4">
<svg
className="h-16 w-16 text-slate-300"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect
x="2"
y="7"
width="20"
height="14"
rx="2"
ry="2"
/>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
</svg>
</div>
<h3 className="mb-2 text-lg font-semibold text-slate-900">
No gateways yet
</h3>
<p className="mb-6 max-w-md text-sm text-slate-500">
Create your first gateway to connect boards and
start managing your OpenClaw connections.
</p>
<Link
href="/gateways/new"
className={buttonVariants({ size: "md", variant: "primary" })}
>
Create your first gateway
</Link>
</div>
</td>
</tr>
)}
</tbody>
</table>
</div>
{!isLoading && gateways.length === 0 ? (
<div className="px-6 py-10 text-center text-sm text-slate-500">
No gateways yet. Create your first gateway to connect boards.
</div>
) : null}
</div>
{error ? <p className="mt-4 text-sm text-red-500">{error}</p> : null}
{gatewaysQuery.error ? (
<p className="mt-4 text-sm text-red-500">
{gatewaysQuery.error.message}
</p>
) : null}
</div>
</main>
</SignedIn>
@@ -308,15 +343,17 @@ export default function GatewaysPage() {
using it will need a new gateway assigned.
</DialogDescription>
</DialogHeader>
{deleteError ? (
<p className="text-sm text-red-500">{deleteError}</p>
{deleteMutation.error ? (
<p className="text-sm text-red-500">
{deleteMutation.error.message}
</p>
) : null}
<DialogFooter>
<Button variant="ghost" onClick={() => setDeleteTarget(null)}>
Cancel
</Button>
<Button onClick={handleDelete} disabled={isDeleting}>
{isDeleting ? "Deleting…" : "Delete"}
<Button onClick={handleDelete} disabled={deleteMutation.isPending}>
{deleteMutation.isPending ? "Deleting…" : "Delete"}
</Button>
</DialogFooter>
</DialogContent>

4
frontend/src/app/layout.tsx
View File

@@ -6,6 +6,8 @@ import type { ReactNode } from "react";
import { ClerkProvider } from "@clerk/nextjs";
import { IBM_Plex_Sans, Sora } from "next/font/google";
import { QueryProvider } from "@/components/providers/QueryProvider";
export const metadata: Metadata = {
title: "OpenClaw Mission Control",
description: "A calm command center for every task.",
@@ -32,7 +34,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
<body
className={`${bodyFont.variable} ${headingFont.variable} min-h-screen bg-app text-strong antialiased`}
>
{children}
<QueryProvider>{children}</QueryProvider>
</body>
</html>
</ClerkProvider>

49
frontend/src/components/organisms/DashboardSidebar.tsx
View File

@@ -1,13 +1,51 @@
"use client";
import Link from "next/link";
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import { BarChart3, Bot, LayoutGrid, Network } from "lucide-react";
import { cn } from "@/lib/utils";
import { getApiBaseUrl } from "@/lib/api-base";
export function DashboardSidebar() {
const pathname = usePathname();
const [systemStatus, setSystemStatus] = useState<
"unknown" | "operational" | "degraded"
>("unknown");
const [statusLabel, setStatusLabel] = useState("System status unavailable");
useEffect(() => {
let isMounted = true;
const apiBase = getApiBaseUrl();
const checkHealth = async () => {
try {
const response = await fetch(`${apiBase}/healthz`, { cache: "no-store" });
if (!response.ok) {
throw new Error("Health check failed");
}
const data = (await response.json()) as { ok?: boolean };
if (!isMounted) return;
if (data?.ok) {
setSystemStatus("operational");
setStatusLabel("All systems operational");
} else {
setSystemStatus("degraded");
setStatusLabel("System degraded");
}
} catch {
if (!isMounted) return;
setSystemStatus("degraded");
setStatusLabel("System degraded");
}
};
checkHealth();
const interval = setInterval(checkHealth, 30000);
return () => {
isMounted = false;
clearInterval(interval);
};
}, []);
return (
<aside className="flex h-full w-64 flex-col border-r border-slate-200 bg-white">
@@ -68,8 +106,15 @@ export function DashboardSidebar() {
</div>
<div className="border-t border-slate-200 p-4">
<div className="flex items-center gap-2 text-xs text-slate-500">
<span className="h-2 w-2 rounded-full bg-blue-500" />
All systems operational
<span
className={cn(
"h-2 w-2 rounded-full",
systemStatus === "operational" && "bg-emerald-500",
systemStatus === "degraded" && "bg-rose-500",
systemStatus === "unknown" && "bg-slate-300"
)}
/>
{statusLabel}
</div>
</div>
</aside>

3
frontend/src/components/organisms/TaskBoard.tsx
View File

@@ -9,7 +9,10 @@ type Task = {
id: string;
title: string;
status: string;
priority: string;
description?: string | null;
due_at?: string | null;
assigned_agent_id?: string | null;
assignee?: string;
};

27
frontend/src/components/providers/QueryProvider.tsx Normal file
View File

@@ -0,0 +1,27 @@
"use client";
import type { ReactNode } from "react";
import { useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
export function QueryProvider({ children }: { children: ReactNode }) {
const [client] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
staleTime: 15_000,
gcTime: 5 * 60 * 1000,
refetchOnWindowFocus: true,
retry: 1,
},
mutations: {
retry: 0,
},
},
})
);
return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
}

83
frontend/src/lib/api-query.ts Normal file
View File

@@ -0,0 +1,83 @@
"use client";
import { useAuth } from "@clerk/nextjs";
import {
type QueryKey,
type UseMutationOptions,
type UseQueryOptions,
useMutation,
useQuery,
} from "@tanstack/react-query";
import { getApiBaseUrl } from "@/lib/api-base";
const apiBase = getApiBaseUrl();
type ApiRequestOptions = {
token?: string | null;
method?: string;
body?: unknown;
headers?: HeadersInit;
};
export async function apiRequest<T>(
path: string,
{ token, method = "GET", body, headers }: ApiRequestOptions = {}
) {
const response = await fetch(`${apiBase}${path}`, {
method,
headers: {
...(body ? { "Content-Type": "application/json" } : {}),
...(token ? { Authorization: `Bearer ${token}` } : {}),
...headers,
},
body: body ? JSON.stringify(body) : undefined,
});
if (!response.ok) {
const detail = await response.text().catch(() => "");
throw new Error(detail || "Request failed.");
}
if (response.status === 204) {
return null as T;
}
return (await response.json()) as T;
}
export function useAuthedQuery<T>(
key: QueryKey,
path: string | null,
options: Omit<
UseQueryOptions<T, Error, T, QueryKey>,
"queryKey" | "queryFn"
> = {}
) {
const { getToken, isSignedIn } = useAuth();
return useQuery({
queryKey: key,
enabled: Boolean(isSignedIn && path) && (options.enabled ?? true),
queryFn: async () => {
const token = await getToken();
return apiRequest<T>(path as string, { token });
},
...options,
});
}
export function useAuthedMutation<TData, TVariables, TContext = unknown>(
mutationFn: (variables: TVariables, token: string | null) => Promise<TData>,
options?: UseMutationOptions<TData, Error, TVariables, TContext>
) {
const { getToken } = useAuth();
return useMutation({
mutationFn: async (variables) => {
const token = await getToken();
return mutationFn(variables, token);
},
...options,
});
}