@nextclaw/ui 0.12.4 → 0.12.5

package/dist/assets/{useConfirmDialog-S5WsGOGf.js → useConfirmDialog-BJIwUZjH.js}

@@ -1 +1 @@
-import{_ as e,i as t,m as n,p as r}from"./i18n-C_2dKw6w.js";import{o as i}from"./dist-BFc_H-lY.js";import{at as a,et as o,it as s,nt as c,rt as l,tt as u}from"./index-DAE8Srx-.js";var d=e(n(),1),f=r(),p=({open:e,onOpenChange:n,title:r,description:d,confirmLabel:p=t(`confirm`),cancelLabel:m=t(`cancel`),variant:h=`default`,onConfirm:g,onCancel:_})=>(0,f.jsx)(o,{open:e,onOpenChange:n,children:(0,f.jsxs)(u,{className:`[&>:last-child]:hidden`,onCloseAutoFocus:e=>e.preventDefault(),children:[(0,f.jsxs)(s,{children:[(0,f.jsx)(a,{children:r}),d?(0,f.jsx)(c,{children:d}):null]}),(0,f.jsxs)(l,{className:`gap-2 sm:gap-0`,children:[(0,f.jsx)(i,{type:`button`,variant:`outline`,onClick:()=>{_(),n(!1)},children:m}),(0,f.jsx)(i,{type:`button`,variant:h===`destructive`?`destructive`:`default`,onClick:()=>{g(),n(!1)},children:p})]})]})}),m={open:!1,title:``,description:``,confirmLabel:t(`confirm`),cancelLabel:t(`cancel`),variant:`default`,resolve:null};function h(){let[e,n]=(0,d.useState)(m),r=(0,d.useCallback)(e=>new Promise(r=>{n({open:!0,title:e.title,description:e.description??``,confirmLabel:e.confirmLabel??t(`confirm`),cancelLabel:e.cancelLabel??t(`cancel`),variant:e.variant??`default`,resolve:e=>{r(e),n(e=>({...e,open:!1,resolve:null}))}})}),[]),i=(0,d.useCallback)(e=>{n(t=>(!e&&t.resolve&&t.resolve(!1),{...t,open:e,resolve:e?t.resolve:null}))},[]);return{confirm:r,ConfirmDialog:(0,d.useCallback)(()=>(0,f.jsx)(p,{open:e.open,onOpenChange:i,title:e.title,description:e.description||void 0,confirmLabel:e.confirmLabel,cancelLabel:e.cancelLabel,variant:e.variant,onConfirm:()=>e.resolve?.(!0),onCancel:()=>e.resolve?.(!1)}),[e,i])}}export{h as t};
+import{_ as e,i as t,m as n,p as r}from"./i18n-DJg9BPYk.js";import{o as i}from"./dist-BCXX7FD-.js";import{at as a,it as o,nt as s,ot as c,rt as l,tt as u}from"./index-CtlT4E9Y.js";var d=e(n(),1),f=r(),p=({open:e,onOpenChange:n,title:r,description:d,confirmLabel:p=t(`confirm`),cancelLabel:m=t(`cancel`),variant:h=`default`,onConfirm:g,onCancel:_})=>(0,f.jsx)(u,{open:e,onOpenChange:n,children:(0,f.jsxs)(s,{className:`[&>:last-child]:hidden`,onCloseAutoFocus:e=>e.preventDefault(),children:[(0,f.jsxs)(a,{children:[(0,f.jsx)(c,{children:r}),d?(0,f.jsx)(l,{children:d}):null]}),(0,f.jsxs)(o,{className:`gap-2 sm:gap-0`,children:[(0,f.jsx)(i,{type:`button`,variant:`outline`,onClick:()=>{_(),n(!1)},children:m}),(0,f.jsx)(i,{type:`button`,variant:h===`destructive`?`destructive`:`default`,onClick:()=>{g(),n(!1)},children:p})]})]})}),m={open:!1,title:``,description:``,confirmLabel:t(`confirm`),cancelLabel:t(`cancel`),variant:`default`,resolve:null};function h(){let[e,n]=(0,d.useState)(m),r=(0,d.useCallback)(e=>new Promise(r=>{n({open:!0,title:e.title,description:e.description??``,confirmLabel:e.confirmLabel??t(`confirm`),cancelLabel:e.cancelLabel??t(`cancel`),variant:e.variant??`default`,resolve:e=>{r(e),n(e=>({...e,open:!1,resolve:null}))}})}),[]),i=(0,d.useCallback)(e=>{n(t=>(!e&&t.resolve&&t.resolve(!1),{...t,open:e,resolve:e?t.resolve:null}))},[]);return{confirm:r,ConfirmDialog:(0,d.useCallback)(()=>(0,f.jsx)(p,{open:e.open,onOpenChange:i,title:e.title,description:e.description||void 0,confirmLabel:e.confirmLabel,cancelLabel:e.cancelLabel,variant:e.variant,onConfirm:()=>e.resolve?.(!0),onCancel:()=>e.resolve?.(!1)}),[e,i])}}export{h as t};

package/dist/assets/{useMutation-DSinpgEq.js → useMutation-BjBOKHj_.js}

@@ -1 +1 @@
-import{_ as e,m as t}from"./i18n-C_2dKw6w.js";import{A as n,E as r,M as i,S as a,f as o,h as s,k as c,u as l}from"./dist-BFc_H-lY.js";var u=class extends i{#e;#t=void 0;#n;#r;constructor(e,t){super(),this.#e=e,this.setOptions(t),this.bindMethods(),this.#i()}bindMethods(){this.mutate=this.mutate.bind(this),this.reset=this.reset.bind(this)}setOptions(e){let t=this.options;this.options=this.#e.defaultMutationOptions(e),c(this.options,t)||this.#e.getMutationCache().notify({type:`observerOptionsUpdated`,mutation:this.#n,observer:this}),t?.mutationKey&&this.options.mutationKey&&a(t.mutationKey)!==a(this.options.mutationKey)?this.reset():this.#n?.state.status===`pending`&&this.#n.setOptions(this.options)}onUnsubscribe(){this.hasListeners()||this.#n?.removeObserver(this)}onMutationUpdate(e){this.#i(),this.#a(e)}getCurrentResult(){return this.#t}reset(){this.#n?.removeObserver(this),this.#n=void 0,this.#i(),this.#a()}mutate(e,t){return this.#r=t,this.#n?.removeObserver(this),this.#n=this.#e.getMutationCache().build(this.#e,this.options),this.#n.addObserver(this),this.#n.execute(e)}#i(){let e=this.#n?.state??o();this.#t={...e,isPending:e.status===`pending`,isSuccess:e.status===`success`,isError:e.status===`error`,isIdle:e.status===`idle`,mutate:this.mutate,reset:this.reset}}#a(e){s.batch(()=>{if(this.#r&&this.hasListeners()){let t=this.#t.variables,n=this.#t.context,r={client:this.#e,meta:this.options.meta,mutationKey:this.options.mutationKey};if(e?.type===`success`){try{this.#r.onSuccess?.(e.data,t,n,r)}catch(e){Promise.reject(e)}try{this.#r.onSettled?.(e.data,null,t,n,r)}catch(e){Promise.reject(e)}}else if(e?.type===`error`){try{this.#r.onError?.(e.error,t,n,r)}catch(e){Promise.reject(e)}try{this.#r.onSettled?.(void 0,e.error,t,n,r)}catch(e){Promise.reject(e)}}}this.listeners.forEach(e=>{e(this.#t)})})}},d=e(t(),1);function f(e,t){let i=l(t),[a]=d.useState(()=>new u(i,e));d.useEffect(()=>{a.setOptions(e)},[a,e]);let o=d.useSyncExternalStore(d.useCallback(e=>a.subscribe(s.batchCalls(e)),[a]),()=>a.getCurrentResult(),()=>a.getCurrentResult()),c=d.useCallback((e,t)=>{a.mutate(e,t).catch(r)},[a]);if(o.error&&n(a.options.throwOnError,[o.error]))throw o.error;return{...o,mutate:c,mutateAsync:o.mutate}}export{f as t};
+import{_ as e,m as t}from"./i18n-DJg9BPYk.js";import{M as n,O as r,P as i,_ as a,d as o,j as s,p as c,w as l}from"./dist-BCXX7FD-.js";var u=class extends i{#e;#t=void 0;#n;#r;constructor(e,t){super(),this.#e=e,this.setOptions(t),this.bindMethods(),this.#i()}bindMethods(){this.mutate=this.mutate.bind(this),this.reset=this.reset.bind(this)}setOptions(e){let t=this.options;this.options=this.#e.defaultMutationOptions(e),s(this.options,t)||this.#e.getMutationCache().notify({type:`observerOptionsUpdated`,mutation:this.#n,observer:this}),t?.mutationKey&&this.options.mutationKey&&l(t.mutationKey)!==l(this.options.mutationKey)?this.reset():this.#n?.state.status===`pending`&&this.#n.setOptions(this.options)}onUnsubscribe(){this.hasListeners()||this.#n?.removeObserver(this)}onMutationUpdate(e){this.#i(),this.#a(e)}getCurrentResult(){return this.#t}reset(){this.#n?.removeObserver(this),this.#n=void 0,this.#i(),this.#a()}mutate(e,t){return this.#r=t,this.#n?.removeObserver(this),this.#n=this.#e.getMutationCache().build(this.#e,this.options),this.#n.addObserver(this),this.#n.execute(e)}#i(){let e=this.#n?.state??c();this.#t={...e,isPending:e.status===`pending`,isSuccess:e.status===`success`,isError:e.status===`error`,isIdle:e.status===`idle`,mutate:this.mutate,reset:this.reset}}#a(e){a.batch(()=>{if(this.#r&&this.hasListeners()){let t=this.#t.variables,n=this.#t.context,r={client:this.#e,meta:this.options.meta,mutationKey:this.options.mutationKey};if(e?.type===`success`){try{this.#r.onSuccess?.(e.data,t,n,r)}catch(e){Promise.reject(e)}try{this.#r.onSettled?.(e.data,null,t,n,r)}catch(e){Promise.reject(e)}}else if(e?.type===`error`){try{this.#r.onError?.(e.error,t,n,r)}catch(e){Promise.reject(e)}try{this.#r.onSettled?.(void 0,e.error,t,n,r)}catch(e){Promise.reject(e)}}}this.listeners.forEach(e=>{e(this.#t)})})}},d=e(t(),1);function f(e,t){let i=o(t),[s]=d.useState(()=>new u(i,e));d.useEffect(()=>{s.setOptions(e)},[s,e]);let c=d.useSyncExternalStore(d.useCallback(e=>s.subscribe(a.batchCalls(e)),[s]),()=>s.getCurrentResult(),()=>s.getCurrentResult()),l=d.useCallback((e,t)=>{s.mutate(e,t).catch(r)},[s]);if(c.error&&n(s.options.throwOnError,[c.error]))throw c.error;return{...c,mutate:l,mutateAsync:c.mutate}}export{f as t};

package/dist/assets/x-BfTu-g7D.js

@@ -0,0 +1 @@
+import{t as e}from"./createLucideIcon-_FMJqZw2.js";var t=e(`X`,[[`path`,{d:`M18 6 6 18`,key:`1bl5f8`}],[`path`,{d:`m6 6 12 12`,key:`d8bk6v`}]]);export{t};

package/dist/index.html

@@ -6,24 +6,25 @@
   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>NextClaw</title>
-  <script type="module" crossorigin src="/assets/index-DAE8Srx-.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/i18n-C_2dKw6w.js">
-  <link rel="modulepreload" crossorigin href="/assets/chunk-JZWAC4HX-DbL4EmiT.js">
-  <link rel="modulepreload" crossorigin href="/assets/dist-BFc_H-lY.js">
-  <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-BRLFtf-8.js">
-  <link rel="modulepreload" crossorigin href="/assets/select-BtIi5fnh.js">
-  <link rel="modulepreload" crossorigin href="/assets/dist-DP-JKR4G.js">
-  <link rel="modulepreload" crossorigin href="/assets/react-8EIEQjMP.js">
-  <link rel="modulepreload" crossorigin href="/assets/useMutation-DSinpgEq.js">
-  <link rel="modulepreload" crossorigin href="/assets/book-open-C7TAghTk.js">
-  <link rel="modulepreload" crossorigin href="/assets/external-link-BkJkiWbH.js">
-  <link rel="modulepreload" crossorigin href="/assets/plus-CYXs3JtZ.js">
-  <link rel="modulepreload" crossorigin href="/assets/search-DOsLw-P9.js">
-  <link rel="modulepreload" crossorigin href="/assets/x-Bnco_K8b.js">
-  <link rel="modulepreload" crossorigin href="/assets/DocBrowserContext-DpgVdRgk.js">
-  <link rel="modulepreload" crossorigin href="/assets/DocBrowser-NSzgVKka.js">
-  <link rel="modulepreload" crossorigin href="/assets/config-CMiW0yaK.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-ChUXhq0G.css">
+  <script type="module" crossorigin src="/assets/index-CtlT4E9Y.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/i18n-DJg9BPYk.js">
+  <link rel="modulepreload" crossorigin href="/assets/chunk-JZWAC4HX-D5b3Iyas.js">
+  <link rel="modulepreload" crossorigin href="/assets/dist-BCXX7FD-.js">
+  <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-_FMJqZw2.js">
+  <link rel="modulepreload" crossorigin href="/assets/select-xp_Ac8ip.js">
+  <link rel="modulepreload" crossorigin href="/assets/dist-B1fpOuON.js">
+  <link rel="modulepreload" crossorigin href="/assets/infiniteQueryBehavior-CTcVlD9s.js">
+  <link rel="modulepreload" crossorigin href="/assets/react-BB4jko2M.js">
+  <link rel="modulepreload" crossorigin href="/assets/useMutation-BjBOKHj_.js">
+  <link rel="modulepreload" crossorigin href="/assets/book-open-CJG8Yz3U.js">
+  <link rel="modulepreload" crossorigin href="/assets/external-link-b7gAJWYY.js">
+  <link rel="modulepreload" crossorigin href="/assets/plus-CR7RfK3H.js">
+  <link rel="modulepreload" crossorigin href="/assets/search-C60UA27E.js">
+  <link rel="modulepreload" crossorigin href="/assets/x-BfTu-g7D.js">
+  <link rel="modulepreload" crossorigin href="/assets/DocBrowserContext-CpiIfhJO.js">
+  <link rel="modulepreload" crossorigin href="/assets/DocBrowser-QUZ3nfmH.js">
+  <link rel="modulepreload" crossorigin href="/assets/config-zvnxSXSP.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-BoJbxdvZ.css">
 </head>
 
 <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.12.4",
+  "version": "0.12.5",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -28,10 +28,10 @@
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/agent-chat": "0.1.8",
-    "@nextclaw/ncp-react": "0.4.17",
     "@nextclaw/ncp": "0.5.0",
-    "@nextclaw/agent-chat-ui": "0.3.1",
+    "@nextclaw/ncp-react": "0.4.18",
+    "@nextclaw/agent-chat": "0.1.9",
+    "@nextclaw/agent-chat-ui": "0.3.2",
     "@nextclaw/ncp-http-agent-client": "0.3.12"
   },
   "devDependencies": {

package/src/account/components/account-panel.tsx

@@ -1,17 +1,19 @@
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { useRemoteStatus } from '@/hooks/useRemoteAccess';
 import { formatDateTime, t } from '@/lib/i18n';
 import { useAccountStore } from '@/account/stores/account.store';
 import { useAppPresenter } from '@/presenter/app-presenter-context';
 import { KeyRound, LogOut, SquareArrowOutUpRight } from 'lucide-react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-function AccountValueRow(props: { label: string; value?: string | null }) {
+function AccountValueRow({ label, value }: { label: string; value?: string | null }) {
   return (
     <div className="flex items-start justify-between gap-4 py-2 text-sm">
-      <span className="text-gray-500">{props.label}</span>
-      <span className="text-right text-gray-900">{props.value?.trim() || '-'}</span>
+      <span className="text-gray-500">{label}</span>
+      <span className="text-right text-gray-900">{value?.trim() || '-'}</span>
     </div>
   );
 }
@@ -25,11 +27,15 @@ export function AccountPanel() {
   const authExpiresAt = useAccountStore((state) => state.authExpiresAt);
   const authStatusMessage = useAccountStore((state) => state.authStatusMessage);
   const status = remoteStatus.data;
+  const [usernameDraft, setUsernameDraft] = useState('');
+  const [savingUsername, setSavingUsername] = useState(false);
 
   useEffect(() => {
     presenter.accountManager.syncRemoteStatus(status);
   }, [presenter, status]);
 
+  const canSubmitUsername = !savingUsername && usernameDraft.trim().length > 0 && !status?.account.username;
+
   return (
     <Dialog open={panelOpen} onOpenChange={(open) => (open ? presenter.accountManager.openAccountPanel() : presenter.accountManager.closeAccountPanel())}>
       <DialogContent className="max-w-xl">
@@ -49,8 +55,44 @@ export function AccountPanel() {
             </div>
             <div className="rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3">
               <AccountValueRow label={t('remoteAccountEmail')} value={status.account.email} />
+              <AccountValueRow label={t('remoteAccountUsername')} value={status.account.username} />
               <AccountValueRow label={t('remoteAccountRole')} value={status.account.role} />
             </div>
+            {status.account.username ? (
+              <p className="text-xs text-gray-500">{t('remoteAccountUsernameLockedHelp')}</p>
+            ) : (
+              <div className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-4">
+                <p className="text-sm font-medium text-amber-900">{t('remoteAccountUsernameRequiredTitle')}</p>
+                <p className="mt-1 text-sm text-amber-800">{t('remoteAccountUsernameRequiredDescription')}</p>
+                <div className="mt-4 space-y-2">
+                  <Label htmlFor="account-panel-username">{t('remoteAccountUsername')}</Label>
+                  <Input
+                    id="account-panel-username"
+                    value={usernameDraft}
+                    onChange={(event) => setUsernameDraft(event.target.value)}
+                    placeholder={t('remoteAccountUsernamePlaceholder')}
+                    autoCapitalize="none"
+                    autoCorrect="off"
+                    spellCheck={false}
+                  />
+                </div>
+                <div className="mt-4 flex flex-wrap gap-3">
+                  <Button
+                    disabled={!canSubmitUsername}
+                    onClick={async () => {
+                      setSavingUsername(true);
+                      try {
+                        await presenter.accountManager.updateUsername(usernameDraft);
+                      } finally {
+                        setSavingUsername(false);
+                      }
+                    }}
+                  >
+                    {savingUsername ? t('remoteAccountUsernameSaving') : t('remoteAccountUsernameSave')}
+                  </Button>
+                </div>
+              </div>
+            )}
             <div className="flex flex-wrap gap-3">
               <Button onClick={() => void presenter.accountManager.openNextClawWeb()}>
                 <SquareArrowOutUpRight className="mr-2 h-4 w-4" />

package/src/account/managers/account.manager.ts

@@ -1,4 +1,4 @@
-import { logoutRemote, pollRemoteBrowserAuth, startRemoteBrowserAuth } from '@/api/remote';
+import { logoutRemote, pollRemoteBrowserAuth, startRemoteBrowserAuth, updateRemoteAccountProfile } from '@/api/remote';
 import type { RemoteAccessView } from '@/api/remote.types';
 import type { AccountPendingAction } from '@/account/stores/account.store';
 import { useAccountStore } from '@/account/stores/account.store';
@@ -57,12 +57,14 @@ export class AccountManager {
     pendingAction?: AccountPendingAction;
   }) => {
     try {
+      const apiBase = params?.apiBase;
+      const pendingAction = params?.pendingAction;
       const status = params?.status ?? (await ensureRemoteStatus());
-      if (params?.pendingAction) {
-        useAccountStore.getState().setPendingAction(params.pendingAction);
+      if (pendingAction) {
+        useAccountStore.getState().setPendingAction(pendingAction);
       }
       const result = await startRemoteBrowserAuth({
-        apiBase: resolveRemotePlatformApiBase(status, params?.apiBase)
+        apiBase: resolveRemotePlatformApiBase(status, apiBase)
       });
       useAccountStore.getState().beginBrowserAuth({
         sessionId: result.sessionId,
@@ -103,6 +105,19 @@ export class AccountManager {
     }
   };
 
+  updateUsername = async (username: string) => {
+    try {
+      await updateRemoteAccountProfile({
+        username: username.trim()
+      });
+      await refreshRemoteStatus();
+      toast.success(t('remoteAccountUsernameSetSuccess'));
+    } catch (error) {
+      const message = error instanceof Error ? error.message : t('remoteAccountUsernameSetFailed');
+      toast.error(`${t('remoteAccountUsernameSetFailed')}: ${message}`);
+    }
+  };
+
   openNextClawWeb = async () => {
     const status = await ensureRemoteStatus();
     const webBase = resolveRemoteWebBase(status);

package/src/api/remote.ts

@@ -1,6 +1,7 @@
 import { api } from './client';
 import type {
   RemoteAccessView,
+  RemoteAccountProfileUpdateRequest,
   RemoteBrowserAuthPollRequest,
   RemoteBrowserAuthPollResult,
   RemoteBrowserAuthStartRequest,
@@ -60,6 +61,14 @@ export async function logoutRemote(): Promise<RemoteAccessView> {
   return response.data;
 }
 
+export async function updateRemoteAccountProfile(data: RemoteAccountProfileUpdateRequest): Promise<RemoteAccessView> {
+  const response = await api.put<RemoteAccessView>('/api/remote/account/profile', data);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+
 export async function updateRemoteSettings(data: RemoteSettingsUpdateRequest): Promise<RemoteAccessView> {
   const response = await api.put<RemoteAccessView>('/api/remote/settings', data);
   if (!response.ok) {

package/src/api/remote.types.ts

@@ -1,11 +1,16 @@
 export type RemoteAccountView = {
   loggedIn: boolean;
   email?: string;
+  username?: string | null;
   role?: string;
   platformBase?: string | null;
   apiBase?: string | null;
 };
 
+export type RemoteAccountProfileUpdateRequest = {
+  username: string;
+};
+
 export type RemoteRuntimeView = {
   enabled: boolean;
   mode: "service" | "foreground";