feat: support server port reuse

.cargo/config.toml

@@ -3,4 +3,3 @@ recorder-playground = "run -p recorder  --example playground -- --environment de
 
 [build]
 rustflags = ["-Zthreads=8", "-Zshare-generics=y"]
-#rustflags = ["-Zthreads=8"]

.vscode/settings.json

@@ -41,16 +41,6 @@
       "name": "konobangu-dev",
       "database": "konobangu",
       "username": "konobangu"
-    },
-    {
-      "previewLimit": 50,
-      "server": "localhost",
-      "port": 32770,
-      "askForPassword": true,
-      "driver": "PostgreSQL",
-      "name": "docker-pgsql",
-      "database": "konobangu",
-      "username": "konobangu"
     }
   ]
 }

Cargo.lock

@@ -6983,9 +6983,9 @@ dependencies = [
 
 [[package]]
 name = "testcontainers-modules"
-version = "0.12.0"
+version = "0.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7f29549c522bd43086d038c421ed69cdf88bc66387acf3aa92b26f965fa95ec2"
+checksum = "eac95cde96549fc19c6bf19ef34cc42bd56e264c1cb97e700e21555be0ecf9e2"
 dependencies = [
  "testcontainers",
 ]

Cargo.toml

@@ -1,3 +1,5 @@
+# cargo-features = ["codegen-backend"]
+
 [workspace]
 members = [
     "packages/testing-torrents",
@@ -9,6 +11,11 @@ members = [
 ]
 resolver = "2"
 
+[profile.dev]
+debug = 0
+# [simd not supported by cranelift](https://github.com/rust-lang/rustc_codegen_cranelift/issues/171)
+# codegen-backend = "cranelift"
+
 [workspace.dependencies]
 testing-torrents = { path = "./packages/testing-torrents" }
 util = { path = "./packages/util" }
@@ -28,7 +35,7 @@ futures = "0.3"
 quirks_path = "0.1"
 snafu = { version = "0.8", features = ["futures"] }
 testcontainers = { version = "0.24" }
-testcontainers-modules = { version = "0.12" }
+testcontainers-modules = { version = "0.12.1" }
 testcontainers-ext = { version = "0.1.0", features = ["tracing"] }
 serde = { version = "1", features = ["derive"] }
 tokio = { version = "1.45.1", features = [

apps/recorder/src/app/context.rs

@@ -40,13 +40,13 @@ pub struct AppContext {
     cache: CacheService,
     mikan: MikanClient,
     auth: AuthService,
-    graphql: GraphQLService,
     storage: StorageService,
     crypto: CryptoService,
     working_dir: String,
     environment: Environment,
     message: MessageService,
     task: OnceCell<TaskService>,
+    graphql: OnceCell<GraphQLService>,
 }
 
 impl AppContext {
@@ -65,7 +65,6 @@ impl AppContext {
         let auth = AuthService::from_conf(config.auth).await?;
         let mikan = MikanClient::from_config(config.mikan).await?;
         let crypto = CryptoService::from_config(config.crypto).await?;
-        let graphql = GraphQLService::from_config_and_database(config.graphql, db.clone()).await?;
 
         let ctx = Arc::new(AppContext {
             config: config_cloned,
@@ -77,10 +76,10 @@ impl AppContext {
             storage,
             mikan,
             working_dir: working_dir.to_string(),
-            graphql,
             crypto,
             message,
             task: OnceCell::new(),
+            graphql: OnceCell::new(),
         });
 
         ctx.task
@@ -89,6 +88,12 @@ impl AppContext {
             })
             .await?;
 
+        ctx.graphql
+            .get_or_try_init(async || {
+                GraphQLService::from_config_and_ctx(config.graphql, ctx.clone()).await
+            })
+            .await?;
+
         Ok(ctx)
     }
 }
@@ -119,7 +124,7 @@ impl AppContextTrait for AppContext {
         &self.auth
     }
     fn graphql(&self) -> &GraphQLService {
-        &self.graphql
+        self.graphql.get().expect("graphql should be set")
     }
     fn storage(&self) -> &dyn StorageServiceTrait {
         &self.storage

apps/recorder/src/app/core.rs

@@ -1,7 +1,8 @@
 use std::{net::SocketAddr, sync::Arc};
 
 use axum::Router;
-use tokio::signal;
+use tokio::{net::TcpSocket, signal};
+use tracing::instrument;
 
 use super::{builder::AppBuilder, context::AppContextTrait};
 use crate::{
@@ -22,14 +23,31 @@ impl App {
         AppBuilder::default()
     }
 
+    #[instrument(err, skip(self))]
     pub async fn serve(&self) -> RecorderResult<()> {
         let context = &self.context;
         let config = context.config();
-        let listener = tokio::net::TcpListener::bind(&format!(
+
-            "{}:{}",
+        let listener = {
-            config.server.binding, config.server.port
+            let addr: SocketAddr =
-        ))
+                format!("{}:{}", config.server.binding, config.server.port).parse()?;
-        .await?;
+
+            let socket = if addr.is_ipv4() {
+                TcpSocket::new_v4()
+            } else {
+                TcpSocket::new_v6()
+            }?;
+
+            socket.set_reuseaddr(true)?;
+
+            #[cfg(all(unix, not(target_os = "solaris")))]
+            if let Err(e) = socket.set_reuseport(true) {
+                tracing::warn!("Failed to set SO_REUSEPORT: {}", e);
+            }
+
+            socket.bind(addr)?;
+            socket.listen(1024)
+        }?;
 
         let mut router = Router::<Arc<dyn AppContextTrait>>::new();
 

apps/recorder/src/database/service.rs

@@ -10,10 +10,6 @@ use sea_orm_migration::MigratorTrait;
 use super::DatabaseConfig;
 use crate::{errors::RecorderResult, migrations::Migrator};
 
-pub trait DatabaseServiceConnectionTrait {
-    fn get_database_connection(&self) -> &DatabaseConnection;
-}
-
 pub struct DatabaseService {
     connection: DatabaseConnection,
     #[cfg(all(any(test, feature = "playground"), feature = "testcontainers"))]

apps/recorder/src/errors/app_error.rs

@@ -25,6 +25,8 @@ pub enum RecorderError {
         source: Box<fancy_regex::Error>,
     },
     #[snafu(transparent)]
+    NetAddrParseError { source: std::net::AddrParseError },
+    #[snafu(transparent)]
     RegexError { source: regex::Error },
     #[snafu(transparent)]
     InvalidMethodError { source: http::method::InvalidMethod },

apps/recorder/src/graphql/infra/transformer.rs

@@ -139,7 +139,7 @@ fn add_crypto_column_output_conversion<T>(
     );
 }
 
-pub fn crypto_transformer(context: &mut BuilderContext, ctx: Arc<dyn AppContextTrait>) {
+pub fn add_crypto_transformers(context: &mut BuilderContext, ctx: Arc<dyn AppContextTrait>) {
     add_crypto_column_input_conversion::<credential_3rd::Entity>(
         context,
         ctx.clone(),
@@ -150,7 +150,7 @@ pub fn crypto_transformer(context: &mut BuilderContext, ctx: Arc<dyn AppContextT
         ctx.clone(),
         &credential_3rd::Column::Username,
     );
-    add_crypto_column_output_conversion::<credential_3rd::Entity>(
+    add_crypto_column_input_conversion::<credential_3rd::Entity>(
         context,
         ctx.clone(),
         &credential_3rd::Column::Password,

apps/recorder/src/graphql/schema.rs

@@ -1,21 +1,27 @@
+use std::sync::Arc;
+
 use async_graphql::dynamic::*;
 use once_cell::sync::OnceCell;
-use sea_orm::{DatabaseConnection, EntityTrait, Iterable};
+use sea_orm::{EntityTrait, Iterable};
 use seaography::{Builder, BuilderContext, FilterType, FilterTypesMapHelper};
 
-use crate::graphql::{
+use crate::{
-    infra::{
+    app::AppContextTrait,
-        filter::{
+    graphql::{
-            JSONB_FILTER_NAME, SUBSCRIBER_ID_FILTER_INFO, init_custom_filter_info,
+        infra::{
-            register_jsonb_input_filter_to_dynamic_schema, subscriber_id_condition_function,
+            filter::{
+                JSONB_FILTER_NAME, SUBSCRIBER_ID_FILTER_INFO, init_custom_filter_info,
+                register_jsonb_input_filter_to_dynamic_schema, subscriber_id_condition_function,
+            },
+            guard::{guard_entity_with_subscriber_id, guard_field_with_subscriber_id},
+            transformer::{
+                add_crypto_transformers, build_filter_condition_transformer,
+                build_mutation_input_object_transformer,
+            },
+            util::{get_entity_column_key, get_entity_key},
         },
-        guard::{guard_entity_with_subscriber_id, guard_field_with_subscriber_id},
+        views::register_subscriptions_to_schema,
-        transformer::{
-            build_filter_condition_transformer, build_mutation_input_object_transformer,
-        },
-        util::{get_entity_column_key, get_entity_key},
     },
-    views::register_subscriptions_to_schema,
 };
 
 pub static CONTEXT: OnceCell<BuilderContext> = OnceCell::new();
@@ -88,11 +94,13 @@ where
 }
 
 pub fn build_schema(
-    database: DatabaseConnection,
+    app_ctx: Arc<dyn AppContextTrait>,
     depth: Option<usize>,
     complexity: Option<usize>,
 ) -> Result<Schema, SchemaError> {
     use crate::models::*;
+    let database = app_ctx.db().as_ref().clone();
+
     init_custom_filter_info();
     let context = CONTEXT.get_or_init(|| {
         let mut context = BuilderContext::default();
@@ -148,6 +156,7 @@ pub fn build_schema(
             &mut context,
             &subscriber_tasks::Column::Job,
         );
+        add_crypto_transformers(&mut context, app_ctx);
         for column in subscribers::Column::iter() {
             if !matches!(column, subscribers::Column::Id) {
                 restrict_filter_input_for_entity::<subscribers::Entity>(
@@ -159,6 +168,7 @@ pub fn build_schema(
         }
         context
     });
+
     let mut builder = Builder::new(context, database.clone());
 
     {

apps/recorder/src/graphql/service.rs

@@ -1,8 +1,9 @@
+use std::sync::Arc;
+
 use async_graphql::dynamic::Schema;
-use sea_orm::DatabaseConnection;
 
 use super::{build_schema, config::GraphQLConfig};
-use crate::errors::RecorderResult;
+use crate::{app::AppContextTrait, errors::RecorderResult};
 
 #[derive(Debug)]
 pub struct GraphQLService {
@@ -10,12 +11,12 @@ pub struct GraphQLService {
 }
 
 impl GraphQLService {
-    pub async fn from_config_and_database(
+    pub async fn from_config_and_ctx(
         config: GraphQLConfig,
-        db: DatabaseConnection,
+        ctx: Arc<dyn AppContextTrait>,
     ) -> RecorderResult<Self> {
         let schema = build_schema(
-            db,
+            ctx,
             config.depth_limit.and_then(|l| l.into()),
             config.complexity_limit.and_then(|l| l.into()),
         )?;

apps/recorder/src/web/middleware/snapshots/recorder__web__middleware__request_id__tests__create_or_fetch_request_id.snap.new

@@ -0,0 +1,6 @@
+---
+source: apps/recorder/src/web/middleware/request_id.rs
+assertion_line: 126
+expression: id
+---
+"foo-barbaz"

apps/webui/package.json

@@ -47,10 +47,12 @@
     "@radix-ui/react-toggle-group": "^1.1.9",
     "@radix-ui/react-tooltip": "^1.2.6",
     "@rsbuild/plugin-react": "^1.2.0",
+    "@tanstack/react-form": "^1.12.1",
     "@tanstack/react-query": "^5.75.6",
     "@tanstack/react-router": "^1.112.13",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/router-devtools": "^1.112.13",
+    "@tanstack/store": "^0.7.1",
     "arktype": "^2.1.6",
     "chart.js": "^4.4.8",
     "class-variance-authority": "^0.7.1",
@@ -63,7 +65,7 @@
     "input-otp": "^1.4.2",
     "jotai": "^2.12.3",
     "jotai-signal": "^0.9.0",
-    "lucide-react": "^0.509.0",
+    "lucide-react": "^0.512.0",
     "oidc-client-rx": "0.1.0-alpha.9",
     "react": "^19.1.0",
     "react-day-picker": "9.6.0",
@@ -77,8 +79,7 @@
     "tailwindcss": "^4.0.6",
     "tw-animate-css": "^1.2.7",
     "type-fest": "^4.40.0",
-    "vaul": "^1.1.2",
+    "vaul": "^1.1.2"
-    "zod": "^3.24.4"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.6",
@@ -94,7 +95,7 @@
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "chalk": "^5.4.1",
-    "commander": "^13.1.0",
+    "commander": "^14.0.0",
     "postcss": "^8.5.3"
   }
 }

apps/webui/src/components/ui/data-table-view-options.tsx

@@ -23,11 +23,7 @@ export function DataTableViewOptions<TData>({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button
+        <Button variant="outline" size="sm" className="ml-auto h-8 flex">
-          variant="outline"
-          size="sm"
-          className="ml-auto hidden h-8 lg:flex"
-        >
           <Settings2 />
           Columns
         </Button>

apps/webui/src/components/ui/form-field-errors.tsx

@@ -0,0 +1,53 @@
+import { StandardSchemaV1Issue } from "@tanstack/react-form";
+import { AlertCircle } from "lucide-react";
+import { useMemo } from "react";
+
+interface ErrorDisplayProps {
+  errors?:
+    | string
+    | StandardSchemaV1Issue
+    | Array<string | StandardSchemaV1Issue | undefined>;
+}
+
+export function FormFieldErrors({ errors }: ErrorDisplayProps) {
+  const errorList = useMemo(
+    () =>
+      (Array.isArray(errors) ? errors : [errors]).filter(Boolean) as Array<
+        string | StandardSchemaV1Issue
+      >,
+    [errors]
+  );
+
+  if (!errorList.length) {
+    return null;
+  }
+
+  return (
+    <ul className="mt-1 space-y-1 text-sm text-destructive">
+      {errorList.map((error, index) => {
+        if (typeof error === "string") {
+          return (
+            <li key={index} className="flex items-center space-x-2">
+              <AlertCircle
+                size={16}
+                className="flex-shrink-0 text-destructive"
+              />
+              <span>{error}</span>
+            </li>
+          );
+        }
+        return (
+          <li key={index} className="flex flex-col space-y-0.5">
+            <div className="flex items-center space-x-2">
+              <AlertCircle
+                size={16}
+                className="flex-shrink-0 text-destructive"
+              />
+              <span>{error.message}</span>
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

apps/webui/src/components/ui/label.tsx

@@ -3,7 +3,7 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
 import * as React from "react";
 
-import { cn } from "@/presentation/utils";
+import { cn } from "@/presentation/utils/index";
 
 function Label({
   className,

apps/webui/src/components/ui/tanstack-form.tsx

@@ -0,0 +1,143 @@
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+
+import { Label } from "@/components/ui/label";
+import { cn } from "@/presentation/utils";
+import {
+  createFormHook,
+  createFormHookContexts,
+  useStore,
+} from "@tanstack/react-form";
+
+const {
+  fieldContext,
+  formContext,
+  useFieldContext: useFormFieldContext,
+  useFormContext,
+} = createFormHookContexts();
+
+const { useAppForm, withForm } = createFormHook({
+  fieldContext,
+  formContext,
+  fieldComponents: {
+    FormLabel,
+    FormControl,
+    FormDescription,
+    FormMessage,
+    FormItem,
+  },
+  formComponents: {},
+});
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+);
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+}
+
+const useFieldContext = () => {
+  const { id } = React.useContext(FormItemContext);
+  const { name, store, ...fieldContext } = useFormFieldContext();
+
+  const errors = useStore(store, (state) => state.meta.errors);
+  if (!fieldContext) {
+    throw new Error("useFieldContext should be used within <FormItem>");
+  }
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    errors,
+    store,
+    ...fieldContext,
+  };
+};
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  const { formItemId, errors } = useFieldContext();
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!errors.length}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { errors, formItemId, formDescriptionId, formMessageId } =
+    useFieldContext();
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        errors.length
+          ? `${formDescriptionId} ${formMessageId}`
+          : `${formDescriptionId}`
+      }
+      aria-invalid={!!errors.length}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFieldContext();
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { errors, formMessageId } = useFieldContext();
+  const body = errors.length
+    ? String(errors.at(0)?.message ?? "")
+    : props.children;
+  if (!body) return null;
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}
+
+export { useAppForm, useFormContext, useFieldContext, withForm };

apps/webui/src/domains/recorder/schema/credential3rd.ts

@@ -1,4 +1,9 @@
+import {
+  Credential3rdTypeEnum,
+  type GetCredential3rdQuery,
+} from '@/infra/graphql/gql/graphql';
 import { gql } from '@apollo/client';
+import { type } from 'arktype';
 
 export const GET_CREDENTIAL_3RD = gql`
   query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {
@@ -13,6 +18,10 @@ export const GET_CREDENTIAL_3RD = gql`
         updatedAt
         credentialType
       }
+      paginationInfo {
+        total
+        pages
+      }
     }
   }
 `;
@@ -52,3 +61,23 @@ export const DELETE_CREDENTIAL_3RD = gql`
     credential3rdDelete(filter: $filters)
   }
 `;
+
+export const Credential3rdTypedMikanSchema = type({
+  credentialType: `'${Credential3rdTypeEnum.Mikan}'`,
+  username: 'string > 0',
+  password: 'string > 0',
+});
+
+export type Credential3rdTypedMikan =
+  typeof Credential3rdTypedMikanSchema.infer;
+
+const Credential3rdTypedSchema = Credential3rdTypedMikanSchema;
+
+export const Credential3rdInsertSchema = type({
+  userAgent: 'string?',
+}).and(Credential3rdTypedSchema);
+
+export type Credential3rdInsertDto = typeof Credential3rdInsertSchema.infer;
+
+export type Credential3rdQueryDto =
+  GetCredential3rdQuery['credential3rd']['nodes'][number];

apps/webui/src/infra/di/inject.ts

@@ -1,5 +1,17 @@
-import { type InjectionToken, Injector, inject } from '@outposts/injection-js';
+import {
+  type InjectionToken,
+  Injector,
+  type Type,
+  inject,
+} from '@outposts/injection-js';
+import { useInjector } from 'oidc-client-rx/adapters/react';
+import { useMemo } from 'react';
 
 export function injectInjector(): Injector {
   return inject(Injector as any as InjectionToken<Injector>);
 }
+
+export function useInject<T>(token: InjectionToken<T> | Type<T>): T {
+  const injector = useInjector();
+  return useMemo(() => injector.get(token), [injector, token]);
+}

apps/webui/src/infra/graphql/gql/gql.ts

@@ -14,7 +14,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 type Documents = {
-    "\n  query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n    credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n      nodes {\n        id\n        cookies\n        username\n        password\n        userAgent\n        createdAt\n        updatedAt\n        credentialType\n      }\n    }\n  }\n": typeof types.GetCredential3rdDocument,
+    "\n  query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n    credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n      nodes {\n        id\n        cookies\n        username\n        password\n        userAgent\n        createdAt\n        updatedAt\n        credentialType\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\n  }\n": typeof types.GetCredential3rdDocument,
     "\n  mutation InsertCredential3rd($data: Credential3rdInsertInput!) {\n    credential3rdCreateOne(data: $data) {\n      id\n      cookies\n      username\n      password\n      userAgent\n      createdAt\n      updatedAt\n      credentialType\n    }\n  }\n": typeof types.InsertCredential3rdDocument,
     "\n  mutation UpdateCredential3rd($data: Credential3rdUpdateInput!, $filters: Credential3rdFilterInput!) {\n    credential3rdUpdate(data: $data, filter: $filters) {\n      id\n      cookies\n      username\n      password\n      userAgent\n      createdAt\n      updatedAt\n      credentialType\n    }\n  }\n": typeof types.UpdateCredential3rdDocument,
     "\n  mutation DeleteCredential3rd($filters: Credential3rdFilterInput!) {\n    credential3rdDelete(filter: $filters)\n  }\n": typeof types.DeleteCredential3rdDocument,
@@ -25,7 +25,7 @@ type Documents = {
     "\n    mutation CreateSubscription($input: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $input) {\n            id\n            displayName\n            sourceUrl\n            enabled\n            category\n        }\n    }\n": typeof types.CreateSubscriptionDocument,
 };
 const documents: Documents = {
-    "\n  query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n    credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n      nodes {\n        id\n        cookies\n        username\n        password\n        userAgent\n        createdAt\n        updatedAt\n        credentialType\n      }\n    }\n  }\n": types.GetCredential3rdDocument,
+    "\n  query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n    credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n      nodes {\n        id\n        cookies\n        username\n        password\n        userAgent\n        createdAt\n        updatedAt\n        credentialType\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\n  }\n": types.GetCredential3rdDocument,
     "\n  mutation InsertCredential3rd($data: Credential3rdInsertInput!) {\n    credential3rdCreateOne(data: $data) {\n      id\n      cookies\n      username\n      password\n      userAgent\n      createdAt\n      updatedAt\n      credentialType\n    }\n  }\n": types.InsertCredential3rdDocument,
     "\n  mutation UpdateCredential3rd($data: Credential3rdUpdateInput!, $filters: Credential3rdFilterInput!) {\n    credential3rdUpdate(data: $data, filter: $filters) {\n      id\n      cookies\n      username\n      password\n      userAgent\n      createdAt\n      updatedAt\n      credentialType\n    }\n  }\n": types.UpdateCredential3rdDocument,
     "\n  mutation DeleteCredential3rd($filters: Credential3rdFilterInput!) {\n    credential3rdDelete(filter: $filters)\n  }\n": types.DeleteCredential3rdDocument,
@@ -53,7 +53,7 @@ export function gql(source: string): unknown;
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(source: "\n  query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n    credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n      nodes {\n        id\n        cookies\n        username\n        password\n        userAgent\n        createdAt\n        updatedAt\n        credentialType\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n    credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n      nodes {\n        id\n        cookies\n        username\n        password\n        userAgent\n        createdAt\n        updatedAt\n        credentialType\n      }\n    }\n  }\n"];
+export function gql(source: "\n  query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n    credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n      nodes {\n        id\n        cookies\n        username\n        password\n        userAgent\n        createdAt\n        updatedAt\n        credentialType\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n    credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n      nodes {\n        id\n        cookies\n        username\n        password\n        userAgent\n        createdAt\n        updatedAt\n        credentialType\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

apps/webui/src/infra/graphql/gql/graphql.ts

@@ -1641,7 +1641,7 @@ export type GetCredential3rdQueryVariables = Exact<{
 }>;
 
 
-export type GetCredential3rdQuery = { __typename?: 'Query', credential3rd: { __typename?: 'Credential3rdConnection', nodes: Array<{ __typename?: 'Credential3rd', id: number, cookies?: string | null, username?: string | null, password?: string | null, userAgent?: string | null, createdAt: string, updatedAt: string, credentialType: Credential3rdTypeEnum }> } };
+export type GetCredential3rdQuery = { __typename?: 'Query', credential3rd: { __typename?: 'Credential3rdConnection', nodes: Array<{ __typename?: 'Credential3rd', id: number, cookies?: string | null, username?: string | null, password?: string | null, userAgent?: string | null, createdAt: string, updatedAt: string, credentialType: Credential3rdTypeEnum }>, paginationInfo?: { __typename?: 'PaginationInfo', total: number, pages: number } | null } };
 
 export type InsertCredential3rdMutationVariables = Exact<{
   data: Credential3rdInsertInput;
@@ -1704,7 +1704,7 @@ export type CreateSubscriptionMutationVariables = Exact<{
 export type CreateSubscriptionMutation = { __typename?: 'Mutation', subscriptionsCreateOne: { __typename?: 'SubscriptionsBasic', id: number, displayName: string, sourceUrl: string, enabled: boolean, category: SubscriptionCategoryEnum } };
 
 
-export const GetCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdFilterInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdOrderInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rd"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}},{"kind":"Argument","name":{"kind":"Name","value":"orderBy"},"value":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}}]}}]}}]} as unknown as DocumentNode<GetCredential3rdQuery, GetCredential3rdQueryVariables>;
+export const GetCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdFilterInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdOrderInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rd"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}},{"kind":"Argument","name":{"kind":"Name","value":"orderBy"},"value":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}},{"kind":"Field","name":{"kind":"Name","value":"paginationInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}},{"kind":"Field","name":{"kind":"Name","value":"pages"}}]}}]}}]}}]} as unknown as DocumentNode<GetCredential3rdQuery, GetCredential3rdQueryVariables>;
 export const InsertCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"InsertCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdInsertInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rdCreateOne"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}}]}}]} as unknown as DocumentNode<InsertCredential3rdMutation, InsertCredential3rdMutationVariables>;
 export const UpdateCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdUpdateInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdFilterInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rdUpdate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}}]}}]} as unknown as DocumentNode<UpdateCredential3rdMutation, UpdateCredential3rdMutationVariables>;
 export const DeleteCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdFilterInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rdDelete"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}]}]}}]} as unknown as DocumentNode<DeleteCredential3rdMutation, DeleteCredential3rdMutationVariables>;

apps/webui/src/infra/platform/context.ts

@@ -1,5 +1,12 @@
 import { DOCUMENT } from './injection';
+import { PlatformService } from './platform.service';
 
 export const providePlatform = () => {
-  return [{ provide: DOCUMENT, useValue: document }];
+  return [
+    { provide: DOCUMENT, useValue: document },
+    {
+      provide: PlatformService,
+      useClass: PlatformService,
+    },
+  ];
 };

apps/webui/src/infra/platform/platform.service.ts

@@ -0,0 +1,11 @@
+import { Injectable, inject } from '@outposts/injection-js';
+import { DOCUMENT } from './injection.js';
+
+@Injectable()
+export class PlatformService {
+  document = inject(DOCUMENT);
+
+  get userAgent(): string {
+    return this.document.defaultView?.navigator.userAgent || '';
+  }
+}

apps/webui/src/presentation/routeTree.gen.ts

@@ -34,6 +34,7 @@ import { Route as AppExploreFeedImport } from './routes/_app/_explore/feed'
 import { Route as AppExploreExploreImport } from './routes/_app/_explore/explore'
 import { Route as AppSubscriptionsEditSubscriptionIdImport } from './routes/_app/subscriptions/edit.$subscriptionId'
 import { Route as AppSubscriptionsDetailSubscriptionIdImport } from './routes/_app/subscriptions/detail.$subscriptionId'
+import { Route as AppCredential3rdDetailIdImport } from './routes/_app/credential3rd/detail.$id'
 
 // Create/Update Routes
 
@@ -178,6 +179,12 @@ const AppSubscriptionsDetailSubscriptionIdRoute =
     getParentRoute: () => AppSubscriptionsRouteRoute,
   } as any)
 
+const AppCredential3rdDetailIdRoute = AppCredential3rdDetailIdImport.update({
+  id: '/detail/$id',
+  path: '/detail/$id',
+  getParentRoute: () => AppCredential3rdRouteRoute,
+} as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -329,6 +336,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthOidcCallbackImport
       parentRoute: typeof rootRoute
     }
+    '/_app/credential3rd/detail/$id': {
+      id: '/_app/credential3rd/detail/$id'
+      path: '/detail/$id'
+      fullPath: '/credential3rd/detail/$id'
+      preLoaderRoute: typeof AppCredential3rdDetailIdImport
+      parentRoute: typeof AppCredential3rdRouteImport
+    }
     '/_app/subscriptions/detail/$subscriptionId': {
       id: '/_app/subscriptions/detail/$subscriptionId'
       path: '/detail/$subscriptionId'
@@ -363,11 +377,13 @@ const AppBangumiRouteRouteWithChildren = AppBangumiRouteRoute._addFileChildren(
 interface AppCredential3rdRouteRouteChildren {
   AppCredential3rdCreateRoute: typeof AppCredential3rdCreateRoute
   AppCredential3rdManageRoute: typeof AppCredential3rdManageRoute
+  AppCredential3rdDetailIdRoute: typeof AppCredential3rdDetailIdRoute
 }
 
 const AppCredential3rdRouteRouteChildren: AppCredential3rdRouteRouteChildren = {
   AppCredential3rdCreateRoute: AppCredential3rdCreateRoute,
   AppCredential3rdManageRoute: AppCredential3rdManageRoute,
+  AppCredential3rdDetailIdRoute: AppCredential3rdDetailIdRoute,
 }
 
 const AppCredential3rdRouteRouteWithChildren =
@@ -464,6 +480,7 @@ export interface FileRoutesByFullPath {
   '/subscriptions/create': typeof AppSubscriptionsCreateRoute
   '/subscriptions/manage': typeof AppSubscriptionsManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
+  '/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
   '/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
   '/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
 }
@@ -490,6 +507,7 @@ export interface FileRoutesByTo {
   '/subscriptions/create': typeof AppSubscriptionsCreateRoute
   '/subscriptions/manage': typeof AppSubscriptionsManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
+  '/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
   '/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
   '/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
 }
@@ -517,6 +535,7 @@ export interface FileRoutesById {
   '/_app/subscriptions/create': typeof AppSubscriptionsCreateRoute
   '/_app/subscriptions/manage': typeof AppSubscriptionsManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
+  '/_app/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
   '/_app/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
   '/_app/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
 }
@@ -545,6 +564,7 @@ export interface FileRouteTypes {
     | '/subscriptions/create'
     | '/subscriptions/manage'
     | '/auth/oidc/callback'
+    | '/credential3rd/detail/$id'
     | '/subscriptions/detail/$subscriptionId'
     | '/subscriptions/edit/$subscriptionId'
   fileRoutesByTo: FileRoutesByTo
@@ -570,6 +590,7 @@ export interface FileRouteTypes {
     | '/subscriptions/create'
     | '/subscriptions/manage'
     | '/auth/oidc/callback'
+    | '/credential3rd/detail/$id'
     | '/subscriptions/detail/$subscriptionId'
     | '/subscriptions/edit/$subscriptionId'
   id:
@@ -595,6 +616,7 @@ export interface FileRouteTypes {
     | '/_app/subscriptions/create'
     | '/_app/subscriptions/manage'
     | '/auth/oidc/callback'
+    | '/_app/credential3rd/detail/$id'
     | '/_app/subscriptions/detail/$subscriptionId'
     | '/_app/subscriptions/edit/$subscriptionId'
   fileRoutesById: FileRoutesById
@@ -672,7 +694,8 @@ export const routeTree = rootRoute
       "parent": "/_app",
       "children": [
         "/_app/credential3rd/create",
-        "/_app/credential3rd/manage"
+        "/_app/credential3rd/manage",
+        "/_app/credential3rd/detail/$id"
       ]
     },
     "/_app/playground": {
@@ -744,6 +767,10 @@ export const routeTree = rootRoute
     "/auth/oidc/callback": {
       "filePath": "auth/oidc/callback.tsx"
     },
+    "/_app/credential3rd/detail/$id": {
+      "filePath": "_app/credential3rd/detail.$id.tsx",
+      "parent": "/_app/credential3rd"
+    },
     "/_app/subscriptions/detail/$subscriptionId": {
       "filePath": "_app/subscriptions/detail.$subscriptionId.tsx",
       "parent": "/_app/subscriptions"

apps/webui/src/presentation/routes/_app/credential3rd/create.tsx

@@ -1,9 +1,251 @@
-import { createFileRoute } from '@tanstack/react-router';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { FormFieldErrors } from '@/components/ui/form-field-errors';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useAppForm } from '@/components/ui/tanstack-form';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  type Credential3rdInsertDto,
+  Credential3rdInsertSchema,
+  INSERT_CREDENTIAL_3RD,
+} from '@/domains/recorder/schema/credential3rd';
+import { useInject } from '@/infra/di/inject';
+import {
+  Credential3rdTypeEnum,
+  type InsertCredential3rdMutation,
+} from '@/infra/graphql/gql/graphql';
+import { PlatformService } from '@/infra/platform/platform.service';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
+import { useMutation } from '@apollo/client';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { Loader2, Save } from 'lucide-react';
+import { toast } from 'sonner';
 
 export const Route = createFileRoute('/_app/credential3rd/create')({
   component: CredentialCreateRouteComponent,
+  staticData: {
+    breadcrumb: { label: 'Create' },
+  } satisfies RouteStateDataOption,
 });
 
 function CredentialCreateRouteComponent() {
-  return <div>Hello "/_app/credential/create"!</div>;
+  const navigate = useNavigate();
+  const platformService = useInject(PlatformService);
+
+  const [insertCredential3rd, { loading }] = useMutation<
+    InsertCredential3rdMutation['credential3rdCreateOne']
+  >(INSERT_CREDENTIAL_3RD, {
+    onCompleted(data) {
+      toast.success('Credential created');
+      navigate({
+        to: '/credential3rd/detail/$id',
+        params: { id: `${data.id}` },
+      });
+    },
+    onError(error) {
+      toast.error('Failed to create credential', {
+        description: error.message,
+      });
+    },
+  });
+
+  const form = useAppForm({
+    defaultValues: {
+      credentialType: Credential3rdTypeEnum.Mikan,
+      username: '',
+      password: '',
+      userAgent: '',
+    } as Credential3rdInsertDto,
+    validators: {
+      onBlur: Credential3rdInsertSchema,
+      onSubmit: Credential3rdInsertSchema,
+    },
+    onSubmit: async (form) => {
+      if (form.value.credentialType === Credential3rdTypeEnum.Mikan) {
+        await insertCredential3rd({
+          variables: {
+            data: form.value,
+          },
+        });
+      }
+    },
+  });
+
+  return (
+    <div className="container mx-auto max-w-2xl py-6">
+      <div className="mb-6 flex items-center gap-4">
+        <div>
+          <h1 className="font-bold text-2xl">Create third-party credential</h1>
+          <p className="mt-1 text-muted-foreground">
+            Add new third-party login credential
+          </p>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Credential information</CardTitle>
+          <CardDescription className="mt-2">
+            Please fill in the information of the third-party platform login
+            credential for your subscriptions.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              form.handleSubmit();
+            }}
+            className="space-y-6"
+          >
+            <form.Field
+              name="credentialType"
+              validators={{
+                onChange: ({ value }) => {
+                  if (!value) {
+                    return 'Please select the credential type';
+                  }
+                },
+              }}
+            >
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>Credential type *</Label>
+                  <Select
+                    value={field.state.value}
+                    onValueChange={(value) =>
+                      field.handleChange(value as Credential3rdTypeEnum)
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select credential type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value={Credential3rdTypeEnum.Mikan}>
+                        Mikan
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  {field.state.meta.errors && (
+                    <p className="text-destructive text-sm">
+                      {field.state.meta.errors[0]?.toString()}
+                    </p>
+                  )}
+                </div>
+              )}
+            </form.Field>
+            <form.Field name="username">
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>Username *</Label>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    placeholder="Please enter username"
+                    autoComplete="off"
+                  />
+                  {field.state.meta.errors && (
+                    <FormFieldErrors errors={field.state.meta.errors} />
+                  )}
+                </div>
+              )}
+            </form.Field>
+
+            {/* 密码 */}
+            <form.Field name="password">
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>Password *</Label>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    type="password"
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    placeholder="Please enter password"
+                    autoComplete="off"
+                  />
+                  {field.state.meta.errors && (
+                    <FormFieldErrors errors={field.state.meta.errors} />
+                  )}
+                </div>
+              )}
+            </form.Field>
+
+            {/* User Agent */}
+            <form.Field name="userAgent">
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>User Agent</Label>
+                  <Textarea
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value || ''}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    rows={3}
+                    className="resize-none"
+                    autoComplete="off"
+                    placeholder="Please enter User Agent (optional), leave it blank to use
+                    the default value"
+                  />
+                  <p className="text-muted-foreground text-sm">
+                    Current user agent: {platformService.userAgent}
+                  </p>
+                  {field.state.meta.errors && (
+                    <FormFieldErrors errors={field.state.meta.errors} />
+                  )}
+                </div>
+              )}
+            </form.Field>
+
+            <div className="flex gap-3 pt-4">
+              <form.Subscribe
+                selector={(state) => [state.canSubmit, state.isSubmitting]}
+              >
+                {([canSubmit, isSubmitting]) => (
+                  <Button
+                    type="submit"
+                    disabled={!canSubmit || loading}
+                    className="flex-1"
+                  >
+                    {loading || isSubmitting ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Creating...
+                      </>
+                    ) : (
+                      <>
+                        <Save className="mr-2 h-4 w-4" />
+                        Create credential
+                      </>
+                    )}
+                  </Button>
+                )}
+              </form.Subscribe>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
 }

apps/webui/src/presentation/routes/_app/credential3rd/detail.$id.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_app/credential3rd/detail/$id')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_app/credential3rd/detail/$id"!</div>
+}

apps/webui/src/presentation/routes/_app/credential3rd/manage.tsx

@@ -1,9 +1,350 @@
-import { createFileRoute } from '@tanstack/react-router';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { DataTablePagination } from '@/components/ui/data-table-pagination';
+import { DataTableRowActions } from '@/components/ui/data-table-row-actions';
+import { DataTableViewOptions } from '@/components/ui/data-table-view-options';
+import { QueryErrorView } from '@/components/ui/query-error-view';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  type Credential3rdQueryDto,
+  DELETE_CREDENTIAL_3RD,
+  GET_CREDENTIAL_3RD,
+} from '@/domains/recorder/schema/credential3rd';
+import type { GetCredential3rdQuery } from '@/infra/graphql/gql/graphql';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
+import { useDebouncedSkeleton } from '@/presentation/hooks/use-debounded-skeleton';
+import { useEvent } from '@/presentation/hooks/use-event';
+import { useMutation, useQuery } from '@apollo/client';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import {
+  type ColumnDef,
+  type PaginationState,
+  type Row,
+  type SortingState,
+  type VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { format } from 'date-fns';
+import { zhCN } from 'date-fns/locale';
+import { Eye, EyeOff, Plus } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { toast } from 'sonner';
 
 export const Route = createFileRoute('/_app/credential3rd/manage')({
   component: CredentialManageRouteComponent,
+  staticData: {
+    breadcrumb: { label: 'Manage' },
+  } satisfies RouteStateDataOption,
 });
 
 function CredentialManageRouteComponent() {
-  return <div>Hello "/_app/credential/manage"!</div>;
+  const navigate = useNavigate();
+
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [showPasswords, setShowPasswords] = useState<Record<number, boolean>>(
+    {}
+  );
+
+  const { loading, error, data, refetch } = useQuery<GetCredential3rdQuery>(
+    GET_CREDENTIAL_3RD,
+    {
+      variables: {
+        filters: {},
+        orderBy: {
+          createdAt: 'DESC',
+        },
+        pagination: {
+          page: {
+            page: pagination.pageIndex,
+            limit: pagination.pageSize,
+          },
+        },
+      },
+      fetchPolicy: 'cache-and-network',
+      nextFetchPolicy: 'network-only',
+    }
+  );
+
+  const [deleteCredential] = useMutation(DELETE_CREDENTIAL_3RD, {
+    onCompleted: async () => {
+      const refetchResult = await refetch();
+      if (refetchResult.errors) {
+        toast.error(refetchResult.errors[0].message);
+        return;
+      }
+      toast.success('Credential deleted');
+    },
+    onError: (error) => {
+      toast.error('Failed to delete credential', {
+        description: error.message,
+      });
+    },
+  });
+  const { showSkeleton } = useDebouncedSkeleton({ loading });
+
+  const credentials = data?.credential3rd;
+
+  const handleDeleteRecord = useEvent(
+    (row: Row<Credential3rdQueryDto>) => async () => {
+      await deleteCredential({
+        variables: {
+          filters: {
+            id: { eq: row.original.id },
+          },
+        },
+      });
+    }
+  );
+
+  const togglePasswordVisibility = useEvent((id: number) => {
+    setShowPasswords((prev) => ({
+      ...prev,
+      [id]: !prev[id],
+    }));
+  });
+
+  const columns = useMemo(() => {
+    const cs: ColumnDef<Credential3rdQueryDto>[] = [
+      {
+        header: 'ID',
+        accessorKey: 'id',
+        enableHiding: false,
+        cell: ({ row }) => {
+          return <div className="font-mono text-sm">{row.original.id}</div>;
+        },
+      },
+      {
+        header: 'Credential Type',
+        accessorKey: 'credentialType',
+        cell: ({ row }) => {
+          const type = row.original.credentialType;
+          return (
+            <Badge variant="secondary" className="capitalize">
+              {type}
+            </Badge>
+          );
+        },
+      },
+      {
+        header: 'Username',
+        accessorKey: 'username',
+        cell: ({ row }) => {
+          const username = row.original.username;
+          return (
+            <div className="whitespace-normal break-words">
+              {username || '-'}
+            </div>
+          );
+        },
+      },
+      {
+        header: 'Password',
+        accessorKey: 'password',
+        cell: ({ row }) => {
+          const password = row.original.password;
+          const isVisible = showPasswords[row.original.id];
+
+          if (!password) {
+            return <div>-</div>;
+          }
+
+          return (
+            <div className="flex items-center gap-2">
+              <div className="font-mono text-sm">
+                {isVisible ? password : '••••••••'}
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0"
+                onClick={() => togglePasswordVisibility(row.original.id)}
+              >
+                {isVisible ? (
+                  <EyeOff className="h-3 w-3" />
+                ) : (
+                  <Eye className="h-3 w-3" />
+                )}
+              </Button>
+            </div>
+          );
+        },
+      },
+      {
+        header: 'User Agent',
+        accessorKey: 'userAgent',
+        cell: ({ row }) => {
+          const userAgent = row.original.userAgent;
+          return (
+            <div className="max-w-xs truncate" title={userAgent || undefined}>
+              {userAgent || '-'}
+            </div>
+          );
+        },
+      },
+      {
+        header: 'Created At',
+        accessorKey: 'createdAt',
+        cell: ({ row }) => {
+          const createdAt = row.original.createdAt;
+          return (
+            <div className="text-sm">
+              {format(new Date(createdAt), 'yyyy-MM-dd HH:mm:ss')}
+            </div>
+          );
+        },
+      },
+      {
+        header: 'Updated At',
+        accessorKey: 'updatedAt',
+        cell: ({ row }) => {
+          const updatedAt = row.original.updatedAt;
+          return (
+            <div className="text-sm">
+              {format(new Date(updatedAt), 'yyyy-MM-dd HH:mm:ss', {
+                locale: zhCN,
+              })}
+            </div>
+          );
+        },
+      },
+      {
+        id: 'actions',
+        cell: ({ row }) => (
+          <DataTableRowActions
+            row={row}
+            getId={(row) => row.original.id}
+            showEdit
+            showDelete
+            onEdit={() => {
+              navigate({
+                to: '/credential3rd/detail/$id',
+                params: { id: `${row.original.id}` },
+              });
+            }}
+            onDelete={handleDeleteRecord(row)}
+          />
+        ),
+      },
+    ];
+    return cs;
+  }, [handleDeleteRecord, navigate, showPasswords, togglePasswordVisibility]);
+
+  const table = useReactTable({
+    data: data?.credential3rd?.nodes ?? [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    onColumnVisibilityChange: setColumnVisibility,
+    pageCount: credentials?.paginationInfo?.pages,
+    rowCount: credentials?.paginationInfo?.total,
+    state: {
+      pagination,
+      sorting,
+      columnVisibility,
+    },
+  });
+
+  if (error) {
+    return <QueryErrorView message={error.message} onRetry={refetch} />;
+  }
+
+  return (
+    <div className="container mx-auto space-y-4 rounded-md">
+      <div className="flex items-center justify-between pt-4">
+        <div>
+          <h1 className="font-bold text-2xl">Credential 3rd Management</h1>
+          <p className="text-muted-foreground">
+            Manage your third-party platform login credentials
+          </p>
+        </div>
+        <Button onClick={() => navigate({ to: '/credential3rd/create' })}>
+          <Plus className="mr-2 h-4 w-4" />
+          Add Credential
+        </Button>
+      </div>
+      <div className="flex items-center py-2">
+        <DataTableViewOptions table={table} />
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {showSkeleton &&
+              Array.from(new Array(pagination.pageSize)).map((_, index) => (
+                <TableRow key={index}>
+                  {table.getVisibleLeafColumns().map((column) => (
+                    <TableCell key={column.id}>
+                      <Skeleton className="h-8" />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            {!showSkeleton &&
+              (table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && 'selected'}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-24 text-center"
+                  >
+                    No Results
+                  </TableCell>
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} showSelectedRowCount={false} />
+    </div>
+  );
 }

apps/webui/src/presentation/routes/_app/subscriptions/detail.$subscriptionId.tsx

@@ -1,7 +1,7 @@
 import type { GetSubscriptionDetailQuery } from '@/infra/graphql/gql/graphql';
 import { useQuery } from '@apollo/client';
 import { createFileRoute } from '@tanstack/react-router';
-import { GET_SUBSCRIPTION_DETAIL } from '../../../../domains/recorder/graphql/subscriptions.js';
+import { GET_SUBSCRIPTION_DETAIL } from '../../../../domains/recorder/schema/subscriptions.js';
 
 export const Route = createFileRoute(
   '/_app/subscriptions/detail/$subscriptionId'

apps/webui/src/presentation/routes/_app/subscriptions/manage.tsx

@@ -1,4 +1,6 @@
+import { Button } from '@/components/ui/button';
 import { DataTablePagination } from '@/components/ui/data-table-pagination';
+import { DataTableRowActions } from '@/components/ui/data-table-row-actions';
 import { DataTableViewOptions } from '@/components/ui/data-table-view-options';
 import { QueryErrorView } from '@/components/ui/query-error-view';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -16,7 +18,7 @@ import {
   GET_SUBSCRIPTIONS,
   type SubscriptionDto,
   UPDATE_SUBSCRIPTIONS,
-} from '@/domains/recorder/graphql/subscriptions';
+} from '@/domains/recorder/schema/subscriptions';
 import type {
   GetSubscriptionsQuery,
   SubscriptionsUpdateInput,
@@ -38,9 +40,9 @@ import {
   getPaginationRowModel,
   useReactTable,
 } from '@tanstack/react-table';
+import { Plus } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
-import { DataTableRowActions } from '../../../../components/ui/data-table-row-actions';
 
 export const Route = createFileRoute('/_app/subscriptions/manage')({
   component: SubscriptionManageRouteComponent,
@@ -63,26 +65,58 @@ function SubscriptionManageRouteComponent() {
     GET_SUBSCRIPTIONS,
     {
       variables: {
-        page: {
+        pagination: {
-          page: pagination.pageIndex,
+          page: {
-          limit: pagination.pageSize,
+            page: pagination.pageIndex + 1,
+            limit: pagination.pageSize,
+          },
         },
         filters: {},
-        orderBy: {},
+        orderBy: {
+          updatedAt: 'DESC',
+        },
       },
       refetchWritePolicy: 'overwrite',
       nextFetchPolicy: 'network-only',
     }
   );
-  const [updateSubscription] = useMutation(UPDATE_SUBSCRIPTIONS);
+  const [updateSubscription] = useMutation(UPDATE_SUBSCRIPTIONS, {
-  const [deleteSubscription] = useMutation(DELETE_SUBSCRIPTIONS);
+    onCompleted: async () => {
+      const refetchResult = await refetch();
+      if (refetchResult.errors) {
+        toast.error(refetchResult.errors[0].message);
+        return;
+      }
+      toast.success('Subscription updated');
+    },
+    onError: (error) => {
+      toast.error('Failed to update subscription', {
+        description: error.message,
+      });
+    },
+  });
+  const [deleteSubscription] = useMutation(DELETE_SUBSCRIPTIONS, {
+    onCompleted: async () => {
+      const refetchResult = await refetch();
+      if (refetchResult.errors) {
+        toast.error(refetchResult.errors[0].message);
+        return;
+      }
+      toast.success('Subscription deleted');
+    },
+    onError: (error) => {
+      toast.error('Failed to delete subscription', {
+        description: error.message,
+      });
+    },
+  });
   const { showSkeleton } = useDebouncedSkeleton({ loading });
 
   const subscriptions = data?.subscriptions;
 
   const handleUpdateRecord = useEvent(
     (row: Row<SubscriptionDto>) => async (data: SubscriptionsUpdateInput) => {
-      const result = await updateSubscription({
+      await updateSubscription({
         variables: {
           data,
           filters: {
@@ -92,34 +126,14 @@ function SubscriptionManageRouteComponent() {
           },
         },
       });
-      if (result.errors) {
-        toast.error(result.errors[0].message);
-        return;
-      }
-      const refetchResult = await refetch();
-      if (refetchResult.errors) {
-        toast.error(refetchResult.errors[0].message);
-        return;
-      }
-      toast.success('Subscription updated');
     }
   );
 
   const handleDeleteRecord = useEvent(
     (row: Row<SubscriptionDto>) => async () => {
-      const result = await deleteSubscription({
+      await deleteSubscription({
         variables: { filters: { id: { eq: row.original.id } } },
       });
-      if (result.errors) {
-        toast.error(result.errors[0].message);
-        return;
-      }
-      const refetchResult = await refetch();
-      if (refetchResult.errors) {
-        toast.error(refetchResult.errors[0].message);
-        return;
-      }
-      toast.success('Subscription deleted');
     }
   );
 
@@ -219,7 +233,17 @@ function SubscriptionManageRouteComponent() {
 
   return (
     <div className="container mx-auto space-y-4 rounded-md">
-      <div className="flex items-center py-4">
+      <div className="flex items-center justify-between pt-4">
+        <div>
+          <h1 className="font-bold text-2xl">Subscription Management</h1>
+          <p className="text-muted-foreground">Manage your subscription</p>
+        </div>
+        <Button onClick={() => navigate({ to: '/subscriptions/create' })}>
+          <Plus className="mr-2 h-4 w-4" />
+          Add Subscription
+        </Button>
+      </div>
+      <div className="flex items-center py-2">
         <DataTableViewOptions table={table} />
       </div>
       <div className="rounded-md border">

pnpm-lock.yaml

@@ -79,7 +79,7 @@ importers:
         version: 0.2.5(solid-js@1.9.6)
       '@graphiql/toolkit':
         specifier: ^0.11.1
-        version: 0.11.1(@types/node@22.15.16)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.18.2(bufferutil@4.0.9)(utf-8-validate@6.0.5)))(graphql@16.11.0)
+        version: 0.11.2(@types/node@22.15.16)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.18.2(bufferutil@4.0.9)(utf-8-validate@6.0.5)))(graphql@16.11.0)
       '@hookform/resolvers':
         specifier: ^5.0.1
         version: 5.0.1(react-hook-form@7.56.3(react@19.1.0))
@@ -167,6 +167,9 @@ importers:
       '@rsbuild/plugin-react':
         specifier: ^1.2.0
         version: 1.3.1(@rsbuild/core@1.3.17)
+      '@tanstack/react-form':
+        specifier: ^1.12.1
+        version: 1.12.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@tanstack/react-query':
         specifier: ^5.75.6
         version: 5.75.6(react@19.1.0)
@@ -179,6 +182,9 @@ importers:
       '@tanstack/router-devtools':
         specifier: ^1.112.13
         version: 1.120.2(@tanstack/react-router@1.120.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(@tanstack/router-core@1.119.0)(csstype@3.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tiny-invariant@1.3.3)
+      '@tanstack/store':
+        specifier: ^0.7.1
+        version: 0.7.1
       arktype:
         specifier: ^2.1.6
         version: 2.1.20
@@ -216,8 +222,8 @@ importers:
         specifier: ^0.9.0
         version: 0.9.0(jotai@2.12.4(@types/react@19.1.3)(react@19.1.0))(react@19.1.0)
       lucide-react:
-        specifier: ^0.509.0
+        specifier: ^0.512.0
-        version: 0.509.0(react@19.1.0)
+        version: 0.512.0(react@19.1.0)
       oidc-client-rx:
         specifier: 0.1.0-alpha.9
         version: 0.1.0-alpha.9(@tanstack/react-router@1.120.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(@tanstack/solid-router@1.112.12(solid-js@1.9.6))(react@19.1.0)(rxjs@7.8.2)(solid-js@1.9.6)
@@ -260,9 +266,6 @@ importers:
       vaul:
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@19.1.3(@types/react@19.1.3))(@types/react@19.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      zod:
-        specifier: ^3.24.4
-        version: 3.24.4
     devDependencies:
       '@graphql-codegen/cli':
         specifier: ^5.0.6
@@ -298,8 +301,8 @@ importers:
         specifier: ^5.4.1
         version: 5.4.1
       commander:
-        specifier: ^13.1.0
+        specifier: ^14.0.0
-        version: 13.1.0
+        version: 14.0.0
       postcss:
         specifier: ^8.5.3
         version: 8.5.3
@@ -1282,15 +1285,6 @@ packages:
       react: ^18 || ^19
       react-dom: ^18 || ^19
 
-  '@graphiql/toolkit@0.11.1':
-    resolution: {integrity: sha512-G02te70/oYYna5UhbH6TXwNxeQyWa+ChlPonUrKwC5Ot9ItraGJ9yUU4sS+YRaA+EvkzNoHG79XcW2k1QaAMiw==}
-    peerDependencies:
-      graphql: ^15.5.0 || ^16.0.0 || ^17.0.0
-      graphql-ws: '>= 4.5.0'
-    peerDependenciesMeta:
-      graphql-ws:
-        optional: true
-
   '@graphiql/toolkit@0.11.2':
     resolution: {integrity: sha512-C6O3f7KsLaoGjZHRT5jLjUmZeGUUewJtASbiAjPsJWeuONvQjLIxHnM+wjXYIVRqAVUVDtb4iadcZK0O9fzh0w==}
     peerDependencies:
@@ -3266,6 +3260,9 @@ packages:
   '@tailwindcss/postcss@4.1.5':
     resolution: {integrity: sha512-5lAC2/pzuyfhsFgk6I58HcNy6vPK3dV/PoPxSDuOTVbDvCddYHzHiJZZInGIY0venvzzfrTEUAXJFULAfFmObg==}
 
+  '@tanstack/form-core@1.12.1':
+    resolution: {integrity: sha512-cCR3udteesUakO0K7T+2GkL8F2HKp7+khJmdLbebz63XbKCuHqSuEtC+bz4cw+Ad6eZxV2hvTkmZxdn39F8XUw==}
+
   '@tanstack/history@1.112.8':
     resolution: {integrity: sha512-+EPOvUtnA3PnIBF2oUhggdy7UrVimLZd1SpULhV1UiesNgKtmLjArO7ZdGPrRq7pRXhc8V0ZAWTI9vfplhZfeA==}
     engines: {node: '>=12'}
@@ -3277,6 +3274,18 @@ packages:
   '@tanstack/query-core@5.75.6':
     resolution: {integrity: sha512-r+WQ/z30KZF0TFkzCT7C8gWgrLuv7/t+gEjqeEp69JAIUS/omuieaHeIkoscjEcT6yaWebXGTyjdiIxJkYzEXg==}
 
+  '@tanstack/react-form@1.12.1':
+    resolution: {integrity: sha512-wcxqqM9mKcjy4ePUQNYZDpuK1dicGHGYbM21UujKNGY2maYk7eXPmZ2xeCYAOEl2rpCjgOf2MZHlfi3Exlaocg==}
+    peerDependencies:
+      '@tanstack/react-start': ^1.112.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      vinxi: ^0.5.0
+    peerDependenciesMeta:
+      '@tanstack/react-start':
+        optional: true
+      vinxi:
+        optional: true
+
   '@tanstack/react-query@5.75.6':
     resolution: {integrity: sha512-0d97uvpeHUNN5eTEsJzYgxLgAEyUM+XaJAWFFAaXH+dQgDN//TTDNbei/YVzN5BUJcWcnQ7YaQDtLLzSe+IvTg==}
     peerDependencies:
@@ -3303,6 +3312,12 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  '@tanstack/react-store@0.7.1':
+    resolution: {integrity: sha512-qUTEKdId6QPWGiWyKAPf/gkN29scEsz6EUSJ0C3HgLMgaqTAyBsQ2sMCfGVcqb+kkhEXAdjleCgH6LAPD6f2sA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   '@tanstack/react-table@8.21.3':
     resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
     engines: {node: '>=12'}
@@ -3396,6 +3411,9 @@ packages:
   '@tanstack/store@0.7.0':
     resolution: {integrity: sha512-CNIhdoUsmD2NolYuaIs8VfWM467RK6oIBAW4nPEKZhg1smZ+/CwtCdpURgp7nxSqOaV9oKkzdWD80+bC66F/Jg==}
 
+  '@tanstack/store@0.7.1':
+    resolution: {integrity: sha512-PjUQKXEXhLYj2X5/6c1Xn/0/qKY0IVFxTJweopRfF26xfjVyb14yALydJrHupDh3/d+1WKmfEgZPBVCmDkzzwg==}
+
   '@tanstack/table-core@8.21.3':
     resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
     engines: {node: '>=12'}
@@ -4064,9 +4082,9 @@ packages:
     resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
     engines: {node: '>=18'}
 
-  commander@13.1.0:
+  commander@14.0.0:
-    resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
+    resolution: {integrity: sha512-2uM9rYjPvyq39NwLRqaiLtWHyDC1FvryJDa2ATTVims5YAS4PupsEQsDvP14FqhFr0P49CYDugi59xaxJlTXRA==}
-    engines: {node: '>=18'}
+    engines: {node: '>=20'}
 
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
@@ -4284,6 +4302,9 @@ packages:
   decimal.js@10.5.0:
     resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==}
 
+  decode-formdata@0.9.0:
+    resolution: {integrity: sha512-q5uwOjR3Um5YD+ZWPOF/1sGHVW9A5rCrRwITQChRXlmPkxDFBqCm4jNTIVdGHNH9OnR+V9MoZVgRhsFb+ARbUw==}
+
   dedent@0.7.0:
     resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
 
@@ -4349,6 +4370,9 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
+  devalue@5.1.1:
+    resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
+
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
@@ -5422,8 +5446,8 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  lucide-react@0.509.0:
+  lucide-react@0.512.0:
-    resolution: {integrity: sha512-xCJHn6Uh5qF6PGml25vveCTrHJZcqS1G1MVzWZK54ZQsOiCVJk4fwY3oyo5EXS2S+aqvTpWYIfJN+PesJ0quxg==}
+    resolution: {integrity: sha512-VCLpMynBVa+UvEPhs8fXluoa5nh7oPn3JtJ9F29+LmNi6q70IRxx80OBFT5KT6/T5/2hX+XkoWOC8zcRQI7Mzg==}
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
@@ -8130,16 +8154,6 @@ snapshots:
       - '@types/react-dom'
       - graphql-ws
 
-  '@graphiql/toolkit@0.11.1(@types/node@22.15.16)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.18.2(bufferutil@4.0.9)(utf-8-validate@6.0.5)))(graphql@16.11.0)':
-    dependencies:
-      '@n1ru4l/push-pull-async-iterable-iterator': 3.2.0
-      graphql: 16.11.0
-      meros: 1.3.0(@types/node@22.15.16)
-    optionalDependencies:
-      graphql-ws: 6.0.4(graphql@16.11.0)(ws@8.18.2(bufferutil@4.0.9)(utf-8-validate@6.0.5))
-    transitivePeerDependencies:
-      - '@types/node'
-
   '@graphiql/toolkit@0.11.2(@types/node@22.15.16)(graphql-ws@6.0.4(graphql@16.11.0)(ws@8.18.2(bufferutil@4.0.9)(utf-8-validate@6.0.5)))(graphql@16.11.0)':
     dependencies:
       '@n1ru4l/push-pull-async-iterable-iterator': 3.2.0
@@ -10254,6 +10268,10 @@ snapshots:
       postcss: 8.5.3
       tailwindcss: 4.1.5
 
+  '@tanstack/form-core@1.12.1':
+    dependencies:
+      '@tanstack/store': 0.7.1
+
   '@tanstack/history@1.112.8':
     optional: true
 
@@ -10261,6 +10279,16 @@ snapshots:
 
   '@tanstack/query-core@5.75.6': {}
 
+  '@tanstack/react-form@1.12.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@tanstack/form-core': 1.12.1
+      '@tanstack/react-store': 0.7.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      decode-formdata: 0.9.0
+      devalue: 5.1.1
+      react: 19.1.0
+    transitivePeerDependencies:
+      - react-dom
+
   '@tanstack/react-query@5.75.6(react@19.1.0)':
     dependencies:
       '@tanstack/query-core': 5.75.6
@@ -10296,6 +10324,13 @@ snapshots:
       react-dom: 19.1.0(react@19.1.0)
       use-sync-external-store: 1.4.0(react@19.1.0)
 
+  '@tanstack/react-store@0.7.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@tanstack/store': 0.7.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      use-sync-external-store: 1.5.0(react@19.1.0)
+
   '@tanstack/react-table@8.21.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@tanstack/table-core': 8.21.3
@@ -10311,13 +10346,13 @@ snapshots:
   '@tanstack/router-core@1.112.12':
     dependencies:
       '@tanstack/history': 1.112.8
-      '@tanstack/store': 0.7.0
+      '@tanstack/store': 0.7.1
     optional: true
 
   '@tanstack/router-core@1.119.0':
     dependencies:
       '@tanstack/history': 1.115.0
-      '@tanstack/store': 0.7.0
+      '@tanstack/store': 0.7.1
       tiny-invariant: 1.3.3
 
   '@tanstack/router-devtools-core@1.119.0(@tanstack/router-core@1.119.0)(csstype@3.1.3)(solid-js@1.9.6)(tiny-invariant@1.3.3)':
@@ -10409,6 +10444,8 @@ snapshots:
 
   '@tanstack/store@0.7.0': {}
 
+  '@tanstack/store@0.7.1': {}
+
   '@tanstack/table-core@8.21.3': {}
 
   '@tanstack/virtual-core@3.13.6': {}
@@ -11203,7 +11240,7 @@ snapshots:
 
   commander@12.1.0: {}
 
-  commander@13.1.0: {}
+  commander@14.0.0: {}
 
   commander@2.20.3:
     optional: true
@@ -11400,6 +11437,8 @@ snapshots:
   decimal.js@10.5.0:
     optional: true
 
+  decode-formdata@0.9.0: {}
+
   dedent@0.7.0: {}
 
   deep-eql@5.0.2: {}
@@ -11446,6 +11485,8 @@ snapshots:
 
   detect-node-es@1.1.0: {}
 
+  devalue@5.1.1: {}
+
   didyoumean@1.2.2: {}
 
   diff@4.0.2: {}
@@ -12726,7 +12767,7 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-react@0.509.0(react@19.1.0):
+  lucide-react@0.512.0(react@19.1.0):
     dependencies:
       react: 19.1.0
 

rust-toolchain.toml

@@ -1,4 +1,6 @@
 [toolchain]
-channel = "nightly-2025-05-20"
+channel = "nightly-2025-06-03"
+# [simd not supported by cranelift](https://github.com/rust-lang/rustc_codegen_cranelift/issues/171)
+# components = ["rustfmt", "clippy", "rustc-codegen-cranelift"]
 components = ["rustfmt", "clippy"]
 profile = "default"