refactor(web): rename grpcweb.ts to connect.ts and enable binary format

- Rename grpcweb.ts to connect.ts to reflect ConnectRPC usage
- Enable binary protobuf format for improved performance
- Update all imports across 26 files from @/grpcweb to @/connect

🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

web/src/components/CreateAccessTokenDialog.tsx

@@ -6,7 +6,7 @@ import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { userServiceClient } from "@/grpcweb";
+import { userServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
 import { UserAccessToken } from "@/types/proto/api/v1/user_service_pb";

web/src/components/CreateIdentityProviderDialog.tsx

@@ -7,7 +7,7 @@ import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
-import { identityProviderServiceClient } from "@/grpcweb";
+import { identityProviderServiceClient } from "@/connect";
 import { absolutifyLink } from "@/helpers/utils";
 import {
   FieldMapping,

web/src/components/CreateShortcutDialog.tsx

@@ -7,7 +7,7 @@ import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { shortcutServiceClient } from "@/grpcweb";
+import { shortcutServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
 import { userStore } from "@/store";

web/src/components/CreateUserDialog.tsx

@@ -7,7 +7,7 @@ import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { userServiceClient } from "@/grpcweb";
+import { userServiceClient } from "@/connect";
 import useLoading from "@/hooks/useLoading";
 import { User, User_Role, UserSchema } from "@/types/proto/api/v1/user_service_pb";
 import { useTranslate } from "@/utils/i18n";

web/src/components/CreateWebhookDialog.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { userServiceClient } from "@/grpcweb";
+import { userServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
 import { useTranslate } from "@/utils/i18n";

web/src/components/Inbox/MemoCommentMessage.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import UserAvatar from "@/components/UserAvatar";
-import { activityServiceClient } from "@/grpcweb";
+import { activityServiceClient } from "@/connect";
 import useAsyncEffect from "@/hooks/useAsyncEffect";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { cn } from "@/lib/utils";

web/src/components/MemoEditor/hooks/useLinkMemo.ts

 import { create } from "@bufbuild/protobuf";
 import { useState } from "react";
 import useDebounce from "react-use/lib/useDebounce";
-import { memoServiceClient } from "@/grpcweb";
+import { memoServiceClient } from "@/connect";
 import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { extractUserIdFromName } from "@/store/common";

web/src/components/MemoEditor/hooks/useMemoSave.ts

@@ -4,7 +4,7 @@ import { isEqual } from "lodash-es";
 import { useCallback } from "react";
 import { toast } from "react-hot-toast";
 import type { LocalFile } from "@/components/memo-metadata";
-import { memoServiceClient } from "@/grpcweb";
+import { memoServiceClient } from "@/connect";
 import { attachmentStore, memoStore } from "@/store";
 import { Attachment, AttachmentSchema } from "@/types/proto/api/v1/attachment_service_pb";
 import type { Location, Memo, MemoRelation, Visibility } from "@/types/proto/api/v1/memo_service_pb";

web/src/components/MemoExplorer/ShortcutsSection.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import toast from "react-hot-toast";
 import ConfirmDialog from "@/components/ConfirmDialog";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { shortcutServiceClient } from "@/grpcweb";
+import { shortcutServiceClient } from "@/connect";
 import useAsyncEffect from "@/hooks/useAsyncEffect";
 import { cn } from "@/lib/utils";
 import { userStore } from "@/store";

web/src/components/MemoReactionListView/hooks.ts

 import { uniq } from "lodash-es";
 import { useEffect, useState } from "react";
-import { memoServiceClient } from "@/grpcweb";
+import { memoServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { memoStore, userStore } from "@/store";
 import type { Memo, Reaction } from "@/types/proto/api/v1/memo_service_pb";

web/src/components/PasswordSignInForm.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { authServiceClient } from "@/grpcweb";
+import { authServiceClient } from "@/connect";
 import useLoading from "@/hooks/useLoading";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { instanceStore } from "@/store";

web/src/components/Settings/AccessTokenSection.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import ConfirmDialog from "@/components/ConfirmDialog";
 import { Button } from "@/components/ui/button";
-import { userServiceClient } from "@/grpcweb";
+import { userServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { useDialog } from "@/hooks/useDialog";
 import { UserAccessToken } from "@/types/proto/api/v1/user_service_pb";

web/src/components/Settings/InstanceSection.tsx

@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
-import { identityProviderServiceClient } from "@/grpcweb";
+import { identityProviderServiceClient } from "@/connect";
 import useDialog from "@/hooks/useDialog";
 import { instanceStore } from "@/store";
 import { buildInstanceSettingName } from "@/store/common";

web/src/components/Settings/MemberSection.tsx

@@ -7,7 +7,7 @@ import React, { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import ConfirmDialog from "@/components/ConfirmDialog";
 import { Button } from "@/components/ui/button";
-import { userServiceClient } from "@/grpcweb";
+import { userServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { useDialog } from "@/hooks/useDialog";
 import { userStore } from "@/store";

web/src/components/Settings/SSOSection.tsx

@@ -4,7 +4,7 @@ import { toast } from "react-hot-toast";
 import ConfirmDialog from "@/components/ConfirmDialog";
 import { Button } from "@/components/ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { identityProviderServiceClient } from "@/grpcweb";
+import { identityProviderServiceClient } from "@/connect";
 import { IdentityProvider } from "@/types/proto/api/v1/idp_service_pb";
 import { useTranslate } from "@/utils/i18n";
 import CreateIdentityProviderDialog from "../CreateIdentityProviderDialog";

web/src/components/Settings/UserSessionsSection.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import ConfirmDialog from "@/components/ConfirmDialog";
 import { Button } from "@/components/ui/button";
-import { userServiceClient } from "@/grpcweb";
+import { userServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { UserSession } from "@/types/proto/api/v1/user_service_pb";
 import { useTranslate } from "@/utils/i18n";

web/src/components/Settings/WebhookSection.tsx

@@ -4,7 +4,7 @@ import toast from "react-hot-toast";
 import { Link } from "react-router-dom";
 import ConfirmDialog from "@/components/ConfirmDialog";
 import { Button } from "@/components/ui/button";
-import { userServiceClient } from "@/grpcweb";
+import { userServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { UserWebhook } from "@/types/proto/api/v1/user_service_pb";
 import { useTranslate } from "@/utils/i18n";

web/src/components/UserMenu.tsx

 import { ArchiveIcon, CheckIcon, GlobeIcon, LogOutIcon, PaletteIcon, SettingsIcon, SquareUserIcon, User2Icon } from "lucide-react";
 import { observer } from "mobx-react-lite";
-import { authServiceClient } from "@/grpcweb";
+import { authServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import i18n, { locales } from "@/i18n";

web/src/grpcweb.ts → web/src/connect.ts

@@ -11,22 +11,20 @@ import { UserService } from "./types/proto/api/v1/user_service_pb";
 
 const transport = createConnectTransport({
   baseUrl: window.location.origin,
-  // Include cookies in requests for session auth
-  fetch: (input, init) => fetch(input, { ...init, credentials: "include" }),
+  // Use binary protobuf format for better performance (smaller payloads, faster serialization)
+  useBinaryFormat: true,
 });
 
+// Core service clients
 export const instanceServiceClient = createClient(InstanceService, transport);
-
 export const authServiceClient = createClient(AuthService, transport);
-
 export const userServiceClient = createClient(UserService, transport);
 
+// Content service clients
 export const memoServiceClient = createClient(MemoService, transport);
-
 export const attachmentServiceClient = createClient(AttachmentService, transport);
-
 export const shortcutServiceClient = createClient(ShortcutService, transport);
-
 export const activityServiceClient = createClient(ActivityService, transport);
 
+// Configuration service clients
 export const identityProviderServiceClient = createClient(IdentityProviderService, transport);

web/src/pages/Attachments.tsx

@@ -12,7 +12,7 @@ import MobileHeader from "@/components/MobileHeader";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
-import { attachmentServiceClient } from "@/grpcweb";
+import { attachmentServiceClient } from "@/connect";
 import useDialog from "@/hooks/useDialog";
 import useLoading from "@/hooks/useLoading";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";

web/src/pages/AuthCallback.tsx

@@ -3,7 +3,7 @@ import { LoaderIcon } from "lucide-react";
 import { observer } from "mobx-react-lite";
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import { authServiceClient } from "@/grpcweb";
+import { authServiceClient } from "@/connect";
 import { absolutifyLink } from "@/helpers/utils";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { initialUserStore } from "@/store/user";

web/src/pages/SignIn.tsx

@@ -6,7 +6,7 @@ import AuthFooter from "@/components/AuthFooter";
 import PasswordSignInForm from "@/components/PasswordSignInForm";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { identityProviderServiceClient } from "@/grpcweb";
+import { identityProviderServiceClient } from "@/connect";
 import { absolutifyLink } from "@/helpers/utils";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { Routes } from "@/router";

web/src/pages/SignUp.tsx

@@ -8,7 +8,7 @@ import { Link } from "react-router-dom";
 import AuthFooter from "@/components/AuthFooter";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { authServiceClient, userServiceClient } from "@/grpcweb";
+import { authServiceClient, userServiceClient } from "@/connect";
 import useLoading from "@/hooks/useLoading";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { instanceStore } from "@/store";

web/src/store/attachment.ts

 // Attachment Store - manages file attachment state including uploads and metadata
 import { computed, makeObservable, observable } from "mobx";
-import { attachmentServiceClient } from "@/grpcweb";
+import { attachmentServiceClient } from "@/connect";
 import { Attachment, CreateAttachmentRequest, UpdateAttachmentRequest } from "@/types/proto/api/v1/attachment_service_pb";
 import { createServerStore, StandardState } from "./base-store";
 import { createRequestKey } from "./store-utils";

web/src/store/instance.ts

@@ -2,7 +2,7 @@
 import { create } from "@bufbuild/protobuf";
 import { uniqBy } from "lodash-es";
 import { computed } from "mobx";
-import { instanceServiceClient } from "@/grpcweb";
+import { instanceServiceClient } from "@/connect";
 import {
   InstanceProfile,
   InstanceProfileSchema,

web/src/store/memo.ts

@@ -2,7 +2,7 @@ import { create } from "@bufbuild/protobuf";
 import { FieldMaskSchema } from "@bufbuild/protobuf/wkt";
 import { uniqueId } from "lodash-es";
 import { makeAutoObservable } from "mobx";
-import { memoServiceClient } from "@/grpcweb";
+import { memoServiceClient } from "@/connect";
 import { CreateMemoRequest, ListMemosRequest, ListMemosRequestSchema, Memo, MemoSchema } from "@/types/proto/api/v1/memo_service_pb";
 import { createRequestKey, RequestDeduplicator, StoreError } from "./store-utils";
 import userStore from "./user";

web/src/store/user.ts

@@ -2,7 +2,7 @@ import { create } from "@bufbuild/protobuf";
 import { FieldMaskSchema } from "@bufbuild/protobuf/wkt";
 import { uniqueId } from "lodash-es";
 import { computed, makeAutoObservable } from "mobx";
-import { authServiceClient, shortcutServiceClient, userServiceClient } from "@/grpcweb";
+import { authServiceClient, shortcutServiceClient, userServiceClient } from "@/connect";
 import { Shortcut } from "@/types/proto/api/v1/shortcut_service_pb";
 import {
   User,