Show proxy status in UI

apps/yaak-proxy/ActionButton.tsx

@@ -1,10 +1,10 @@
-import { Button, type ButtonProps } from "@yaakapp-internal/ui";
-import { useCallback, useState } from "react";
-import type { ActionInvocation } from "@yaakapp-internal/proxy-lib";
-import { useActionMetadata } from "./hooks";
-import { rpc } from "./rpc";
+import type { ActionInvocation } from '@yaakapp-internal/proxy-lib';
+import { Button, type ButtonProps } from '@yaakapp-internal/ui';
+import { useCallback } from 'react';
+import { useActionMetadata } from './hooks';
+import { useRpcMutation } from './rpc-hooks';
 
-type ActionButtonProps = Omit<ButtonProps, "onClick" | "children"> & {
+type ActionButtonProps = Omit<ButtonProps, 'onClick' | 'children'> & {
   action: ActionInvocation;
   /** Override the label from metadata */
   children?: React.ReactNode;
@@ -12,20 +12,20 @@ type ActionButtonProps = Omit<ButtonProps, "onClick" | "children"> & {
 
 export function ActionButton({ action, children, ...props }: ActionButtonProps) {
   const meta = useActionMetadata(action);
-  const [busy, setBusy] = useState(false);
+  const { mutate, isPending } = useRpcMutation('execute_action');
 
-  const onClick = useCallback(async () => {
-    setBusy(true);
-    try {
-      await rpc("execute_action", action);
-    } finally {
-      setBusy(false);
-    }
-  }, [action]);
+  const onClick = useCallback(() => {
+    mutate(action);
+  }, [action, mutate]);
 
   return (
-    <Button {...props} disabled={props.disabled || busy} isLoading={busy} onClick={onClick}>
-      {children ?? meta?.label ?? "…"}
+    <Button
+      {...props}
+      disabled={props.disabled || isPending}
+      isLoading={isPending}
+      onClick={onClick}
+    >
+      {children ?? meta?.label ?? '…'}
     </Button>
   );
 }

apps/yaak-proxy/main.tsx

@@ -1,46 +1,47 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { type } from "@tauri-apps/plugin-os";
-import { HeaderSize } from "@yaakapp-internal/ui";
-import { ActionButton } from "./ActionButton";
-import { Sidebar } from "./Sidebar";
-import classNames from "classnames";
-import { createStore, Provider, useAtomValue } from "jotai";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "./main.css";
-import { initHotkeys } from "./hotkeys";
-import { listen, rpc } from "./rpc";
-import { applyChange, dataAtom, httpExchangesAtom, replaceAll } from "./store";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { type } from '@tauri-apps/plugin-os';
+import { HeaderSize } from '@yaakapp-internal/ui';
+import classNames from 'classnames';
+import { createStore, Provider, useAtomValue } from 'jotai';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ActionButton } from './ActionButton';
+import { Sidebar } from './Sidebar';
+import './main.css';
+import { initHotkeys } from './hotkeys';
+import { listen, rpc } from './rpc';
+import { useRpcQueryWithEvent } from './rpc-hooks';
+import { applyChange, dataAtom, httpExchangesAtom, replaceAll } from './store';
 
 const queryClient = new QueryClient();
 const jotaiStore = createStore();
 
 // Load initial models from the database
-rpc("list_models", {}).then((res) => {
-  jotaiStore.set(dataAtom, (prev) =>
-    replaceAll(prev, "http_exchange", res.httpExchanges),
-  );
+rpc('list_models', {}).then((res) => {
+  jotaiStore.set(dataAtom, (prev) => replaceAll(prev, 'http_exchange', res.httpExchanges));
 });
 
 // Register hotkeys from action metadata
 initHotkeys();
 
 // Subscribe to model change events from the backend
-listen("model_write", (payload) => {
+listen('model_write', (payload) => {
   jotaiStore.set(dataAtom, (prev) =>
-    applyChange(prev, "http_exchange", payload.model, payload.change),
+    applyChange(prev, 'http_exchange', payload.model, payload.change),
   );
 });
 
 function App() {
   const osType = type();
   const exchanges = useAtomValue(httpExchangesAtom);
+  const { data: proxyState } = useRpcQueryWithEvent('get_proxy_state', {}, 'proxy_state_changed');
+  const isRunning = proxyState?.state === 'running';
 
   return (
     <div
       className={classNames(
-        "h-full w-full grid grid-rows-[auto_1fr]",
-        osType === "linux" && "border border-border-subtle",
+        'h-full w-full grid grid-rows-[auto_1fr]',
+        osType === 'linux' && 'border border-border-subtle',
       )}
     >
       <HeaderSize
@@ -63,15 +64,25 @@ function App() {
         <main className="overflow-auto p-4">
           <div className="flex items-center gap-3 mb-4">
             <ActionButton
-              action={{ scope: "global", action: "proxy_start" }}
+              action={{ scope: 'global', action: 'proxy_start' }}
               size="sm"
               tone="primary"
+              disabled={isRunning}
             />
             <ActionButton
-              action={{ scope: "global", action: "proxy_stop" }}
+              action={{ scope: 'global', action: 'proxy_stop' }}
               size="sm"
               variant="border"
+              disabled={!isRunning}
             />
+            <span
+              className={classNames(
+                'text-xs font-medium',
+                isRunning ? 'text-success' : 'text-text-subtlest',
+              )}
+            >
+              {isRunning ? 'Running on :9090' : 'Stopped'}
+            </span>
           </div>
 
           <div className="text-xs font-mono">
@@ -91,7 +102,7 @@ function App() {
                     <tr key={ex.id} className="border-b border-border-subtle">
                       <td className="py-1 pr-3">{ex.method}</td>
                       <td className="py-1 pr-3 truncate max-w-md">{ex.url}</td>
-                      <td className="py-1 pr-3">{ex.resStatus ?? "—"}</td>
+                      <td className="py-1 pr-3">{ex.resStatus ?? '—'}</td>
                     </tr>
                   ))}
                 </tbody>
@@ -104,7 +115,7 @@ function App() {
   );
 }
 
-createRoot(document.getElementById("root") as HTMLElement).render(
+createRoot(document.getElementById('root') as HTMLElement).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <Provider store={jotaiStore}>

apps/yaak-proxy/rpc-hooks.ts

@@ -0,0 +1,78 @@
+import {
+  useQuery,
+  useQueryClient,
+  useMutation,
+  type UseQueryOptions,
+  type UseMutationOptions,
+} from "@tanstack/react-query";
+import { useEffect } from "react";
+import type { RpcEventSchema, RpcSchema } from "@yaakapp-internal/proxy-lib";
+import { minPromiseMillis } from "@yaakapp-internal/ui";
+import { listen, rpc } from "./rpc";
+
+type Req<K extends keyof RpcSchema> = RpcSchema[K][0];
+type Res<K extends keyof RpcSchema> = RpcSchema[K][1];
+
+/**
+ * React Query wrapper for RPC commands.
+ * Automatically caches by [cmd, payload] and supports all useQuery options.
+ */
+export function useRpcQuery<K extends keyof RpcSchema>(
+  cmd: K,
+  payload: Req<K>,
+  opts?: Omit<UseQueryOptions<Res<K>>, "queryKey" | "queryFn">,
+) {
+  return useQuery<Res<K>>({
+    queryKey: [cmd, payload],
+    queryFn: () => rpc(cmd, payload),
+    ...opts,
+  });
+}
+
+/**
+ * React Query mutation wrapper for RPC commands.
+ */
+export function useRpcMutation<K extends keyof RpcSchema>(
+  cmd: K,
+  opts?: Omit<UseMutationOptions<Res<K>, Error, Req<K>>, "mutationFn">,
+) {
+  return useMutation<Res<K>, Error, Req<K>>({
+    mutationFn: (payload) => minPromiseMillis(rpc(cmd, payload)),
+    ...opts,
+  });
+}
+
+/**
+ * Subscribe to an RPC event. Cleans up automatically on unmount.
+ */
+export function useRpcEvent<K extends keyof RpcEventSchema>(
+  event: K & string,
+  callback: (payload: RpcEventSchema[K]) => void,
+) {
+  useEffect(() => {
+    return listen(event, callback);
+  }, [event, callback]);
+}
+
+/**
+ * Combines useRpcQuery with an event listener that invalidates the query
+ * whenever the specified event fires, keeping data fresh automatically.
+ */
+export function useRpcQueryWithEvent<
+  K extends keyof RpcSchema,
+  E extends keyof RpcEventSchema & string,
+>(
+  cmd: K,
+  payload: Req<K>,
+  event: E,
+  opts?: Omit<UseQueryOptions<Res<K>>, "queryKey" | "queryFn">,
+) {
+  const queryClient = useQueryClient();
+  const query = useRpcQuery(cmd, payload, opts);
+
+  useRpcEvent(event, () => {
+    queryClient.invalidateQueries({ queryKey: [cmd, payload] });
+  });
+
+  return query;
+}