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

2026-02-04 23:43:40 +05:30
parent b6f31fe6ea
commit 8452dc110e
15 changed files with 727 additions and 448 deletions
--- a/backend/app/api/gateways.py
+++ b/backend/app/api/gateways.py
@@ -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


--- a/frontend/next-env.d.ts
+++ b/frontend/next-env.d.ts
@@ -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.
--- a/frontend/src/app/agents/page.tsx
+++ b/frontend/src/app/agents/page.tsx
@@ -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,31 +323,36 @@ export default function AgentsPage() {
                  {agents.length} agent{agents.length === 1 ? "" : "s"} total.
                </p>
              </div>
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  onClick={handleRefresh}
-                  disabled={isLoading}
-                >
-                  Refresh
-                </Button>
-                <Button onClick={() => router.push("/agents/new")}>
-                  New agent
-                </Button>
-              </div>
+              {agents.length > 0 ? (
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={handleRefresh}
+                    disabled={agentsQuery.isLoading}
+                  >
+                    Refresh
+                  </Button>
+                  <Button onClick={() => router.push("/agents/new")}>
+                    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>
--- a/frontend/src/app/boards/[boardId]/edit/page.tsx
+++ b/frontend/src/app/boards/[boardId]/edit/page.tsx
@@ -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"
-                      />
-                      <span>Enable Skyll dynamic skills</span>
+                    <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"
+                          }`}
+                        />
+                      </button>
                    </div>
                  </div>
                </div>
--- a/frontend/src/app/boards/new/page.tsx
+++ b/frontend/src/app/boards/new/page.tsx
@@ -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"
-                        />
-                        <span>Enable Skyll dynamic skills</span>
+                      <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"
+                            }`}
+                          />
+                        </button>
                      </div>
                    </div>
                  </div>
--- a/frontend/src/app/boards/page.tsx
+++ b/frontend/src/app/boards/page.tsx
@@ -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}` : "",
-        },
-      });
-      if (!response.ok) {
-        throw new Error("Unable to delete board.");
-      }
-      setBoards((prev) => prev.filter((board) => board.id !== deleteTarget.id));
-      setDeleteTarget(null);
-    } catch (err) {
-      setDeleteError(err instanceof Error ? err.message : "Something went wrong.");
-    } finally {
-      setIsDeleting(false);
+        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 };
+      },
+      onError: (_error, _board, context) => {
+        if (context?.previous) {
+          queryClient.setQueryData(["boards"], context.previous);
+        }
+      },
+      onSuccess: () => {
+        setDeleteTarget(null);
+      },
+      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>
-              <Button onClick={() => router.push("/boards/new")}>
-                New board
-              </Button>
+              {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>
--- a/frontend/src/app/dashboard/page.tsx
+++ b/frontend/src/app/dashboard/page.tsx
@@ -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 metricsQuery = useAuthedQuery<DashboardMetrics>(
+    ["metrics", "dashboard", "24h"],
+    "/api/v1/metrics/dashboard?range=24h",
+    {
+      refetchInterval: 15_000,
+      refetchOnMount: "always",
+    },
+  );

-  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`,
-        {
-          headers: {
-            Authorization: token ? `Bearer ${token}` : "",
-          },
-        },
-      );
-      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>
--- a/frontend/src/app/gateways/[gatewayId]/edit/page.tsx
+++ b/frontend/src/app/gateways/[gatewayId]/edit/page.tsx
@@ -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>
--- a/frontend/src/app/gateways/new/page.tsx
+++ b/frontend/src/app/gateways/new/page.tsx
@@ -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>
--- a/frontend/src/app/gateways/page.tsx
+++ b/frontend/src/app/gateways/page.tsx
@@ -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 gatewaysQuery = useAuthedQuery<Gateway[]>(
+    ["gateways"],
+    "/api/v1/gateways",
+    {
+      refetchInterval: 30_000,
+      refetchOnMount: "always",
+    }
+  );

+  const gateways = gatewaysQuery.data ?? [];
  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}`,
-        {
-          method: "DELETE",
-          headers: { Authorization: token ? `Bearer ${token}` : "" },
+  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);
        }
-      );
-      if (!response.ok) {
-        throw new Error("Unable to delete gateway.");
-      }
-      setGateways((prev) => prev.filter((item) => item.id !== deleteTarget.id));
-      setDeleteTarget(null);
-    } catch (err) {
-      setDeleteError(err instanceof Error ? err.message : "Something went wrong.");
-    } finally {
-      setIsDeleting(false);
+      },
+      onSuccess: () => {
+        setDeleteTarget(null);
+      },
+      onSettled: () => {
+        queryClient.invalidateQueries({ queryKey: ["gateways"] });
+      },
    }
+  );
+
+  const handleDelete = () => {
+    if (!deleteTarget) return;
+    deleteMutation.mutate(deleteTarget);
  };

  const columns = useMemo<ColumnDef<Gateway>[]>(
@@ -181,18 +169,21 @@ export default function GatewaysPage() {
        id: "actions",
        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>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => setDeleteTarget(row.original)}
-            >
-              Delete
-            </Button>
-          </div>
+            <div className="flex justify-end gap-2">
+              <Link
+                href={`/gateways/${row.original.id}/edit`}
+                className={buttonVariants({ variant: "ghost", size: "sm" })}
+              >
+                Edit
+              </Link>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setDeleteTarget(row.original)}
+              >
+                Delete
+              </Button>
+            </div>
        ),
      },
    ],
@@ -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="flex items-center justify-between">
-              <div>
-                <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
-                  Gateways
-                </h1>
-                <p className="mt-1 text-sm text-slate-500">
-                  Manage OpenClaw gateway connections used by boards.
-                </p>
-              </div>
-              <Button asChild>
-                <Link href="/gateways/new">Create gateway</Link>
-              </Button>
+          <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="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
+                  </p>
+                </div>
+              {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,29 +258,78 @@ export default function GatewaysPage() {
                    ))}
                  </thead>
                  <tbody className="divide-y divide-slate-100">
-                    {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">
-                            {flexRender(
-                              cell.column.columnDef.cell,
-                              cell.getContext()
-                            )}
-                          </td>
-                        ))}
+                    {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">
+                              {flexRender(
+                                cell.column.columnDef.cell,
+                                cell.getContext()
+                              )}
+                            </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>
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -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>
--- a/frontend/src/components/organisms/DashboardSidebar.tsx
+++ b/frontend/src/components/organisms/DashboardSidebar.tsx
@@ -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>
--- a/frontend/src/components/organisms/TaskBoard.tsx
+++ b/frontend/src/components/organisms/TaskBoard.tsx
@@ -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;
 };

--- a/frontend/src/components/providers/QueryProvider.tsx
+++ b/frontend/src/components/providers/QueryProvider.tsx
@@ -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>;
+}
--- a/frontend/src/lib/api-query.ts
+++ b/frontend/src/lib/api-query.ts
@@ -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,
+  });
+}