@tuturuuu/ui 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.3.2](https://github.com/tutur3u/platform/compare/ui-v0.3.1...ui-v0.3.2) (2026-06-10)
+
+
+### Bug Fixes
+
+* **web:** harden task search and command launcher ([e4f8fd2](https://github.com/tutur3u/platform/commit/e4f8fd28bd78eabb0aa38182af2a32b85b5bf3e0))
+
 ## [0.3.1](https://github.com/tutur3u/platform/compare/ui-v0.3.0...ui-v0.3.1) (2026-06-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -83,13 +83,13 @@
     "@tiptap/react": "3.26.0",
     "@tiptap/starter-kit": "3.26.0",
     "@tuturuuu/ai": "0.1.0",
-    "@tuturuuu/apis": "0.0.12",
+    "@tuturuuu/apis": "0.1.0",
     "@tuturuuu/hooks": "0.0.1",
     "@tuturuuu/icons": "0.0.5",
-    "@tuturuuu/internal-api": "0.2.1",
-    "@tuturuuu/supabase": "0.3.1",
+    "@tuturuuu/internal-api": "0.3.0",
+    "@tuturuuu/supabase": "0.3.2",
     "@tuturuuu/trigger": "0.2.0",
-    "@tuturuuu/utils": "0.3.1",
+    "@tuturuuu/utils": "0.4.0",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -148,7 +148,7 @@
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@tuturuuu/types": "0.4.1",
+    "@tuturuuu/types": "0.5.0",
     "@tuturuuu/typescript-config": "0.1.1",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.24",

package/src/components/ui/chat/chat-agent-details-operations-panel.test.tsx

@@ -1,11 +1,48 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { AgentOperationsPanel } from './chat-agent-details-operations-panel';
 
+const mocks = vi.hoisted(() => ({
+  abortAiAgentZaloPersonalQrLogin: vi.fn(),
+  getAiAgentZaloPersonalQrLoginStatus: vi.fn(),
+  getAiAgentZaloPersonalStatus: vi.fn(),
+  runAiAgentZaloPersonalAction: vi.fn(),
+  startAiAgentZaloPersonalQrLogin: vi.fn(),
+  toastWarning: vi.fn(),
+}));
+
 vi.mock('next-intl', () => ({
   useTranslations: () => (key: string) => key,
 }));
 
+vi.mock('@tuturuuu/internal-api/infrastructure', () => ({
+  abortAiAgentZaloPersonalQrLogin: (
+    ...args: Parameters<typeof mocks.abortAiAgentZaloPersonalQrLogin>
+  ) => mocks.abortAiAgentZaloPersonalQrLogin(...args),
+  getAiAgentZaloPersonalQrLoginStatus: (
+    ...args: Parameters<typeof mocks.getAiAgentZaloPersonalQrLoginStatus>
+  ) => mocks.getAiAgentZaloPersonalQrLoginStatus(...args),
+  getAiAgentZaloPersonalStatus: (
+    ...args: Parameters<typeof mocks.getAiAgentZaloPersonalStatus>
+  ) => mocks.getAiAgentZaloPersonalStatus(...args),
+  runAiAgentZaloPersonalAction: (
+    ...args: Parameters<typeof mocks.runAiAgentZaloPersonalAction>
+  ) => mocks.runAiAgentZaloPersonalAction(...args),
+  startAiAgentZaloPersonalQrLogin: (
+    ...args: Parameters<typeof mocks.startAiAgentZaloPersonalQrLogin>
+  ) => mocks.startAiAgentZaloPersonalQrLogin(...args),
+}));
+
+vi.mock('../sonner', () => ({
+  toast: {
+    error: vi.fn(),
+    success: vi.fn(),
+    warning: (...args: Parameters<typeof mocks.toastWarning>) =>
+      mocks.toastWarning(...args),
+  },
+}));
+
 const channel = {
   adapter: 'discord' as const,
   autoRespond: true,
@@ -26,14 +63,371 @@ const channel = {
 };
 
 describe('AgentOperationsPanel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.runAiAgentZaloPersonalAction.mockResolvedValue({
+      status: {
+        channelId: 'channel-1',
+        connected: true,
+        enabled: true,
+        lastError: null,
+        lastEventAt: null,
+        mode: 'personal',
+        ownId: 'own-1',
+        running: true,
+        startedAt: '2026-06-02T00:00:00.000Z',
+      },
+      sync: {
+        exhausted: true,
+        failedGroupHistories: 0,
+        groupMessages: 0,
+        groupsScanned: 0,
+        pageCount: 1,
+        synced: 2,
+        threads: 1,
+        timedOut: false,
+        userMessages: 2,
+      },
+    });
+  });
+
+  it('renders personal Zalo QR controls instead of webhook secret rotation', () => {
+    mocks.getAiAgentZaloPersonalStatus.mockResolvedValue({
+      status: {
+        channelId: 'channel-1',
+        connected: false,
+        enabled: true,
+        lastError: null,
+        lastEventAt: null,
+        mode: 'personal',
+        ownId: 'own-1',
+        running: false,
+        startedAt: null,
+      },
+    });
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+      },
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <AgentOperationsPanel
+          agentId="agent-1"
+          channel={{
+            ...channel,
+            adapter: 'zalo',
+            displayName: 'Personal Zalo',
+            webhookUrl: null,
+            zaloAccountMode: 'personal',
+            zaloPersonalOwnId: 'own-1',
+          }}
+          isPending={false}
+          onCopySecret={vi.fn()}
+          onDeploy={vi.fn()}
+          onPause={vi.fn()}
+          onRefresh={vi.fn()}
+          onRotateSecret={vi.fn()}
+          onTest={vi.fn()}
+          secretPreview={null}
+          testResult={null}
+        />
+      </QueryClientProvider>
+    );
+
+    expect(
+      screen.getByText('agent_zalo_personal_qr_title')
+    ).toBeInTheDocument();
+    expect(screen.queryByText('agent_rotate_secret')).not.toBeInTheDocument();
+  });
+
+  it('runs personal Zalo historical sync from the operations panel', async () => {
+    mocks.getAiAgentZaloPersonalStatus.mockResolvedValue({
+      status: {
+        channelId: 'channel-1',
+        connected: true,
+        enabled: true,
+        lastError: null,
+        lastEventAt: null,
+        mode: 'personal',
+        ownId: 'own-1',
+        running: true,
+        startedAt: '2026-06-02T00:00:00.000Z',
+      },
+    });
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        mutations: { retry: false },
+        queries: { retry: false },
+      },
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <AgentOperationsPanel
+          agentId="agent-1"
+          channel={{
+            ...channel,
+            adapter: 'zalo',
+            displayName: 'Personal Zalo',
+            webhookUrl: null,
+            zaloAccountMode: 'personal',
+            zaloPersonalOwnId: 'own-1',
+          }}
+          isPending={false}
+          onCopySecret={vi.fn()}
+          onDeploy={vi.fn()}
+          onPause={vi.fn()}
+          onRefresh={vi.fn()}
+          onRotateSecret={vi.fn()}
+          onTest={vi.fn()}
+          secretPreview={null}
+          testResult={null}
+        />
+      </QueryClientProvider>
+    );
+
+    fireEvent.click(screen.getByText('agent_zalo_personal_sync_history'));
+
+    await waitFor(() => {
+      expect(mocks.runAiAgentZaloPersonalAction).toHaveBeenCalledWith(
+        'agent-1',
+        'channel-1',
+        'sync-history'
+      );
+    });
+  });
+
+  it('runs personal Zalo phone-approved transfer sync from the operations panel', async () => {
+    mocks.getAiAgentZaloPersonalStatus.mockResolvedValue({
+      status: {
+        channelId: 'channel-1',
+        connected: true,
+        enabled: true,
+        lastError: null,
+        lastEventAt: null,
+        mode: 'personal',
+        ownId: 'own-1',
+        running: true,
+        startedAt: '2026-06-02T00:00:00.000Z',
+      },
+    });
+    mocks.runAiAgentZaloPersonalAction.mockResolvedValueOnce({
+      status: {
+        channelId: 'channel-1',
+        connected: true,
+        enabled: true,
+        lastError: null,
+        lastEventAt: null,
+        mode: 'personal',
+        ownId: 'own-1',
+        running: true,
+        startedAt: '2026-06-02T00:00:00.000Z',
+      },
+      sync: {
+        approvalRequested: true,
+        cleaned: true,
+        error: null,
+        groupMessages: 1,
+        pullAttempts: 1,
+        requestAccepted: true,
+        requestHttpError: null,
+        requestViaHttp: true,
+        requestViaWebSocket: true,
+        status: 'completed',
+        synced: 3,
+        threads: 2,
+        userMessages: 2,
+      },
+    });
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        mutations: { retry: false },
+        queries: { retry: false },
+      },
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <AgentOperationsPanel
+          agentId="agent-1"
+          channel={{
+            ...channel,
+            adapter: 'zalo',
+            displayName: 'Personal Zalo',
+            webhookUrl: null,
+            zaloAccountMode: 'personal',
+            zaloPersonalOwnId: 'own-1',
+          }}
+          isPending={false}
+          onCopySecret={vi.fn()}
+          onDeploy={vi.fn()}
+          onPause={vi.fn()}
+          onRefresh={vi.fn()}
+          onRotateSecret={vi.fn()}
+          onTest={vi.fn()}
+          secretPreview={null}
+          testResult={null}
+        />
+      </QueryClientProvider>
+    );
+
+    fireEvent.click(screen.getByText('agent_zalo_personal_sync_phone'));
+
+    await waitFor(() => {
+      expect(mocks.runAiAgentZaloPersonalAction).toHaveBeenCalledWith(
+        'agent-1',
+        'channel-1',
+        'sync-phone'
+      );
+    });
+  });
+
+  it('warns when personal Zalo phone transfer is approved but returns no payload', async () => {
+    mocks.getAiAgentZaloPersonalStatus.mockResolvedValue({
+      status: {
+        channelId: 'channel-1',
+        connected: true,
+        enabled: true,
+        lastError: null,
+        lastEventAt: null,
+        mode: 'personal',
+        ownId: 'own-1',
+        running: true,
+        startedAt: '2026-06-02T00:00:00.000Z',
+      },
+    });
+    mocks.runAiAgentZaloPersonalAction.mockResolvedValueOnce({
+      status: {
+        channelId: 'channel-1',
+        connected: true,
+        enabled: true,
+        lastError: 'zalo_personal_phone_sync_no_payload',
+        lastEventAt: null,
+        mode: 'personal',
+        ownId: 'own-1',
+        running: true,
+        startedAt: '2026-06-02T00:00:00.000Z',
+      },
+      sync: {
+        approvalRequested: true,
+        cleaned: false,
+        error: null,
+        groupMessages: 0,
+        pullAttempts: 90,
+        requestAccepted: true,
+        requestHttpError: 'Request failed with status code 404',
+        requestViaHttp: false,
+        requestViaWebSocket: true,
+        status: 'completed_no_payload',
+        synced: 0,
+        threads: 0,
+        userMessages: 0,
+      },
+    });
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        mutations: { retry: false },
+        queries: { retry: false },
+      },
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <AgentOperationsPanel
+          agentId="agent-1"
+          channel={{
+            ...channel,
+            adapter: 'zalo',
+            displayName: 'Personal Zalo',
+            webhookUrl: null,
+            zaloAccountMode: 'personal',
+            zaloPersonalOwnId: 'own-1',
+          }}
+          isPending={false}
+          onCopySecret={vi.fn()}
+          onDeploy={vi.fn()}
+          onPause={vi.fn()}
+          onRefresh={vi.fn()}
+          onRotateSecret={vi.fn()}
+          onTest={vi.fn()}
+          secretPreview={null}
+          testResult={null}
+        />
+      </QueryClientProvider>
+    );
+
+    fireEvent.click(screen.getByText('agent_zalo_personal_sync_phone'));
+
+    await waitFor(() => {
+      expect(mocks.toastWarning).toHaveBeenCalledWith(
+        'agent_zalo_personal_sync_phone_no_payload'
+      );
+    });
+  });
+
+  it('formats personal Zalo channel error codes for display', () => {
+    mocks.getAiAgentZaloPersonalStatus.mockResolvedValue({
+      status: {
+        channelId: 'channel-1',
+        connected: false,
+        enabled: true,
+        lastError: null,
+        lastEventAt: null,
+        mode: 'personal',
+        ownId: null,
+        running: false,
+        startedAt: null,
+      },
+    });
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+      },
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <AgentOperationsPanel
+          agentId="agent-1"
+          channel={{
+            ...channel,
+            adapter: 'zalo',
+            displayName: 'Personal Zalo',
+            lastError: 'zalo_personal_qr_expired',
+            webhookUrl: null,
+            zaloAccountMode: 'personal',
+          }}
+          isPending={false}
+          onCopySecret={vi.fn()}
+          onDeploy={vi.fn()}
+          onPause={vi.fn()}
+          onRefresh={vi.fn()}
+          onRotateSecret={vi.fn()}
+          onTest={vi.fn()}
+          secretPreview={null}
+          testResult={null}
+        />
+      </QueryClientProvider>
+    );
+
+    expect(
+      screen.getByText('agent_zalo_personal_qr_expired')
+    ).toBeInTheDocument();
+    expect(screen.queryByText('zalo_personal_qr_expired')).toBeNull();
+  });
+
   it('renders structured diagnostics after a channel test', () => {
     render(
       <AgentOperationsPanel
+        agentId="agent-1"
         channel={channel}
         isPending={false}
         onCopySecret={vi.fn()}
         onDeploy={vi.fn()}
         onPause={vi.fn()}
+        onRefresh={vi.fn()}
         onRotateSecret={vi.fn()}
         onTest={vi.fn()}
         secretPreview={null}

package/src/components/ui/chat/chat-agent-details-operations-panel.tsx

@@ -21,9 +21,12 @@ import { Button } from '../button';
 import { Input } from '../input';
 import {
   copyToClipboard,
+  formatZaloPersonalError,
+  isPersonalZaloChannel,
   KeyValue,
   PanelSection,
 } from './chat-agent-details-utils';
+import { AgentZaloPersonalPanel } from './chat-agent-details-zalo-personal-panel';
 
 const DIAGNOSTIC_LABEL_KEYS = {
   adapter_account: 'agent_diagnostic_adapter_account',
@@ -32,27 +35,33 @@ const DIAGNOSTIC_LABEL_KEYS = {
   channel_enabled: 'agent_diagnostic_channel_enabled',
   last_error: 'agent_diagnostic_last_error',
   last_event: 'agent_diagnostic_last_event',
+  listener_lifecycle: 'agent_diagnostic_listener_lifecycle',
   required_secrets: 'agent_diagnostic_required_secrets',
   webhook_url: 'agent_diagnostic_webhook_url',
   workspace_mapping: 'agent_diagnostic_workspace_mapping',
+  zalo_personal_feature_flag: 'agent_diagnostic_zalo_personal_feature_flag',
 } as const;
 
 export function AgentOperationsPanel({
+  agentId,
   channel,
   isPending,
   onCopySecret,
   onDeploy,
   onPause,
+  onRefresh,
   onRotateSecret,
   onTest,
   secretPreview,
   testResult,
 }: {
+  agentId: string;
   channel: AiAgentChannelConfig;
   isPending: boolean;
   onCopySecret: () => void;
   onDeploy: () => void;
   onPause: () => void;
+  onRefresh: () => void;
   onRotateSecret: () => void;
   onTest: (prompt?: string) => void;
   secretPreview: { label: string; value: string } | null;
@@ -61,6 +70,14 @@ export function AgentOperationsPanel({
   const t = useTranslations('chat');
   const [testPrompt, setTestPrompt] = useState('');
   const webhookUrl = channel.webhookUrl;
+  const isPersonalZalo = isPersonalZaloChannel(channel);
+  const lastError =
+    isPersonalZalo &&
+    channel.lastError === 'zalo_personal_phone_sync_waiting_for_phone'
+      ? null
+      : isPersonalZalo
+        ? formatZaloPersonalError(channel.lastError, t)
+        : channel.lastError;
   const diagnosticLabel = (
     check: NonNullable<AiAgentTestResponse['checks']>[number]
   ) => {
@@ -71,12 +88,12 @@ export function AgentOperationsPanel({
   };
 
   return (
-    <div className="space-y-4">
+    <div className="min-w-0 space-y-4 overflow-hidden">
       <PanelSection
         icon={<Webhook className="size-4" />}
         title={t('agent_channel')}
       >
-        <div className="space-y-2">
+        <div className="min-w-0 space-y-2 overflow-hidden">
           <KeyValue label={t('agent_channel_id')} value={channel.id} />
           <KeyValue label={t('agent_adapter')} value={channel.adapter} />
           <KeyValue
@@ -105,15 +122,15 @@ export function AgentOperationsPanel({
               </Button>
             </div>
           ) : null}
-          {channel.lastError ? (
-            <p className="rounded-md border border-dynamic-red/20 bg-dynamic-red/5 p-2 text-dynamic-red text-xs">
-              {channel.lastError}
+          {lastError ? (
+            <p className="break-words rounded-md border border-dynamic-red/20 bg-dynamic-red/5 p-2 text-dynamic-red text-xs">
+              {lastError}
             </p>
           ) : null}
         </div>
       </PanelSection>
 
-      <div className="grid grid-cols-2 gap-2">
+      <div className="grid min-w-0 grid-cols-2 gap-2">
         <Button disabled={isPending} onClick={onDeploy} size="sm" type="button">
           <Play className="size-4" />
           {t('agent_deploy')}
@@ -130,6 +147,15 @@ export function AgentOperationsPanel({
         </Button>
       </div>
 
+      {isPersonalZalo ? (
+        <AgentZaloPersonalPanel
+          agentId={agentId}
+          channel={channel}
+          isPending={isPending}
+          onRefresh={onRefresh}
+        />
+      ) : null}
+
       <PanelSection
         icon={<FlaskConical className="size-4" />}
         title={t('agent_test')}
@@ -157,7 +183,9 @@ export function AgentOperationsPanel({
           <p className="text-muted-foreground text-xs leading-5">
             {channel.adapter === 'discord'
               ? t('agent_discord_live_test_hint')
-              : t('agent_live_test_hint')}
+              : isPersonalZalo
+                ? t('agent_zalo_personal_live_test_hint')
+                : t('agent_live_test_hint')}
           </p>
         </div>
       </PanelSection>
@@ -194,7 +222,7 @@ export function AgentOperationsPanel({
         </PanelSection>
       ) : null}
 
-      {channel.adapter === 'zalo' ? (
+      {channel.adapter === 'zalo' && !isPersonalZalo ? (
         <PanelSection
           icon={<RotateCw className="size-4" />}
           title={t('agent_rotate_secret')}

package/src/components/ui/chat/chat-agent-details-setup-panel.tsx

@@ -27,6 +27,7 @@ import { Textarea } from '../textarea';
 import {
   buildAgentPayload,
   Field,
+  isPersonalZaloChannel,
   PanelSection,
   secretNamesForChannel,
 } from './chat-agent-details-utils';
@@ -192,6 +193,19 @@ export function AgentSetupForm({
                 />
               </Field>
             </>
+          ) : isPersonalZaloChannel(channel) ? (
+            <Field
+              id="agent-zalo-personal-own-id"
+              label={t('agent_zalo_personal_own_id')}
+            >
+              <Input
+                className="font-mono"
+                defaultValue={channel.zaloPersonalOwnId ?? ''}
+                id="agent-zalo-personal-own-id"
+                name="zaloPersonalOwnId"
+                readOnly
+              />
+            </Field>
           ) : (
             <Field id="agent-zalo-oa" label={t('agent_zalo_oa_id')}>
               <Input

package/src/components/ui/chat/chat-agent-details-sidebar.test.tsx

@@ -21,11 +21,16 @@ vi.mock('next-intl', () => ({
 }));
 
 vi.mock('@tuturuuu/internal-api/infrastructure', () => ({
+  abortAiAgentZaloPersonalQrLogin: vi.fn(),
   deployAiAgentChannel: vi.fn(),
+  getAiAgentZaloPersonalQrLoginStatus: vi.fn(),
+  getAiAgentZaloPersonalStatus: vi.fn(),
   listAiAgents: (...args: unknown[]) => mocks.listAiAgents(...args),
   pauseAiAgentChannel: vi.fn(),
   rotateAiAgentChannelSecret: vi.fn(),
+  runAiAgentZaloPersonalAction: vi.fn(),
   saveAiAgent: vi.fn(),
+  startAiAgentZaloPersonalQrLogin: vi.fn(),
   testAiAgentChannel: vi.fn(),
 }));