@tuturuuu/ui 0.1.0 → 0.3.1

package/src/components/ui/chart.test.tsx

@@ -0,0 +1,29 @@
+import { renderToString } from 'react-dom/server';
+import { Bar, BarChart } from 'recharts';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { ChartContainer } from './chart';
+
+describe('ChartContainer', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('does not emit Recharts dimension warnings during server rendering', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    renderToString(
+      <ChartContainer
+        className="h-64 w-full"
+        config={{ clicks: { color: 'var(--primary)', label: 'Clicks' } }}
+      >
+        <BarChart data={[{ clicks: 1, day: 'Mon' }]}>
+          <Bar dataKey="clicks" />
+        </BarChart>
+      </ChartContainer>
+    );
+
+    expect(warn).not.toHaveBeenCalledWith(
+      expect.stringContaining('The width(-1) and height(-1) of chart')
+    );
+  });
+});

package/src/components/ui/chart.tsx

@@ -73,6 +73,11 @@ const ChartContainer = React.forwardRef<
 >(({ id, className, children, config, ...props }, ref) => {
   const uniqueId = React.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -87,9 +92,13 @@ const ChartContainer = React.forwardRef<
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
+        {mounted ? (
+          <RechartsPrimitive.ResponsiveContainer>
+            {children}
+          </RechartsPrimitive.ResponsiveContainer>
+        ) : (
+          <div aria-hidden className="h-full w-full" />
+        )}
       </div>
     </ChartContext.Provider>
   );

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

@@ -2,6 +2,7 @@ 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 { AgentExternalThreadPanel } from './chat-agent-details-external-thread-panel';
+import type { AgentConversationMetadata } from './chat-agent-details-utils';
 
 const mocks = vi.hoisted(() => ({
   draftAiAgentExternalResponse: vi.fn(),
@@ -35,7 +36,18 @@ vi.mock('../sonner', () => ({
   },
 }));
 
-function renderPanel(onRefresh = vi.fn()) {
+function renderPanel(
+  onRefresh = vi.fn(),
+  metadata: AgentConversationMetadata = {
+    agentId: 'agent-1',
+    channelId: 'channel-1',
+    externalChannelId: 'external-channel-1',
+    externalThreadId: 'discord-thread-1',
+    externalThreadUuid: 'thread-uuid-1',
+    messageCount: 2,
+    source: 'ai-agent-external-thread',
+  }
+) {
   const queryClient = new QueryClient({
     defaultOptions: {
       mutations: { retry: false },
@@ -45,18 +57,7 @@ function renderPanel(onRefresh = vi.fn()) {
 
   render(
     <QueryClientProvider client={queryClient}>
-      <AgentExternalThreadPanel
-        metadata={{
-          agentId: 'agent-1',
-          channelId: 'channel-1',
-          externalChannelId: 'external-channel-1',
-          externalThreadId: 'discord-thread-1',
-          externalThreadUuid: 'thread-uuid-1',
-          messageCount: 2,
-          source: 'ai-agent-external-thread',
-        }}
-        onRefresh={onRefresh}
-      />
+      <AgentExternalThreadPanel metadata={metadata} onRefresh={onRefresh} />
     </QueryClientProvider>
   );
 
@@ -72,8 +73,10 @@ describe('AgentExternalThreadPanel', () => {
     mocks.listAiAgentExternalThreads.mockResolvedValue({
       threads: [
         {
+          externalThreadId: 'discord-thread-1',
           id: 'thread-uuid-1',
           lastSyncedAt: '2026-06-02T01:02:03.000Z',
+          messageCount: 2,
         },
       ],
     });
@@ -100,6 +103,33 @@ describe('AgentExternalThreadPanel', () => {
     expect(onRefresh).toHaveBeenCalled();
   });
 
+  it('lists and syncs recent threads from an agent setup conversation', async () => {
+    const { onRefresh } = renderPanel(vi.fn(), {
+      agentId: 'agent-1',
+      channelId: 'channel-1',
+      source: 'ai-agent' as const,
+    });
+
+    await waitFor(() => {
+      expect(mocks.listAiAgentExternalThreads).toHaveBeenCalledWith({
+        agentId: 'agent-1',
+        channelId: 'channel-1',
+      });
+    });
+    await waitFor(() => {
+      expect(screen.getByText('discord-thread-1')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText('agent_external_sync'));
+
+    await waitFor(() => {
+      expect(mocks.syncAiAgentExternalThread).toHaveBeenCalledWith(
+        'thread-uuid-1'
+      );
+    });
+    expect(onRefresh).toHaveBeenCalled();
+  });
+
   it('drafts and sends an external response', async () => {
     const { onRefresh } = renderPanel();
 

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

@@ -36,29 +36,34 @@ export function AgentExternalThreadPanel({
   const [draft, setDraft] = useState('');
   const [prompt, setPrompt] = useState('');
   const threadId = metadata.externalThreadUuid;
-  const threadQuery = useQuery({
-    enabled: Boolean(threadId),
+  const threadsQuery = useQuery({
+    enabled: Boolean(metadata.agentId && metadata.channelId),
     queryFn: async () => {
       const result = await listAiAgentExternalThreads({
         agentId: metadata.agentId,
         channelId: metadata.channelId,
       });
 
-      return result.threads.find((thread) => thread.id === threadId) ?? null;
+      return result.threads;
     },
     queryKey: [
       'chat',
-      'ai-agent-external-thread',
+      'ai-agent-external-threads',
       metadata.agentId,
       metadata.channelId,
-      threadId,
     ],
     staleTime: 30_000,
   });
+  const threads = threadsQuery.data ?? [];
+  const selectedThread = threadId
+    ? threads.find((thread) => thread.id === threadId)
+    : null;
   const syncMutation = useMutation({
-    mutationFn: () => {
-      if (!threadId) throw new Error(t('agent_external_thread_missing'));
-      return syncAiAgentExternalThread(threadId);
+    mutationFn: (targetThreadId?: string) => {
+      if (!targetThreadId) {
+        throw new Error(t('agent_external_thread_missing'));
+      }
+      return syncAiAgentExternalThread(targetThreadId);
     },
     onError: (error) =>
       toast.error(error.message || t('agent_external_sync_failed')),
@@ -73,7 +78,7 @@ export function AgentExternalThreadPanel({
           ? t('agent_external_sync_no_new')
           : t('agent_external_sync_success', { count: result.synced })
       );
-      void threadQuery.refetch();
+      void threadsQuery.refetch();
       onRefresh();
     },
   });
@@ -128,77 +133,136 @@ export function AgentExternalThreadPanel({
           />
           <KeyValue
             label={t('agent_external_last_sync')}
-            value={threadQuery.data?.lastSyncedAt ?? t('unknown')}
+            value={selectedThread?.lastSyncedAt ?? t('unknown')}
           />
         </div>
       </PanelSection>
 
-      <Button
-        className="w-full"
-        disabled={!threadId || syncMutation.isPending}
-        onClick={() => syncMutation.mutate()}
-        type="button"
-        variant="outline"
-      >
-        {syncMutation.isPending ? (
-          <LoaderCircle className="size-4 animate-spin" />
-        ) : (
-          <RefreshCw className="size-4" />
-        )}
-        {t('agent_external_sync')}
-      </Button>
+      {threadId ? (
+        <Button
+          className="w-full"
+          disabled={syncMutation.isPending}
+          onClick={() => syncMutation.mutate(threadId)}
+          type="button"
+          variant="outline"
+        >
+          {syncMutation.isPending ? (
+            <LoaderCircle className="size-4 animate-spin" />
+          ) : (
+            <RefreshCw className="size-4" />
+          )}
+          {t('agent_external_sync')}
+        </Button>
+      ) : (
+        <PanelSection
+          icon={<RefreshCw className="size-4" />}
+          title={t('agent_external_recent_threads')}
+        >
+          <div className="space-y-2">
+            {threadsQuery.isLoading ? (
+              <p className="flex items-center gap-2 text-muted-foreground text-xs">
+                <LoaderCircle className="size-3.5 animate-spin" />
+                {t('loading_ai_settings')}
+              </p>
+            ) : threads.length > 0 ? (
+              threads.map((thread) => (
+                <div
+                  className="space-y-2 rounded-md border bg-muted/20 p-2"
+                  key={thread.id}
+                >
+                  <div className="min-w-0 text-xs">
+                    <div className="truncate font-medium">
+                      {thread.title || thread.externalThreadId}
+                    </div>
+                    {thread.title ? (
+                      <div className="truncate text-muted-foreground">
+                        {thread.externalThreadId}
+                      </div>
+                    ) : null}
+                  </div>
+                  <div className="flex items-center justify-between gap-2 text-muted-foreground text-xs">
+                    <span>
+                      {t('agent_external_message_count')}: {thread.messageCount}
+                    </span>
+                    <Button
+                      disabled={syncMutation.isPending}
+                      onClick={() => syncMutation.mutate(thread.id)}
+                      size="sm"
+                      type="button"
+                      variant="outline"
+                    >
+                      {syncMutation.isPending ? (
+                        <LoaderCircle className="size-3.5 animate-spin" />
+                      ) : (
+                        <RefreshCw className="size-3.5" />
+                      )}
+                      {t('agent_external_sync')}
+                    </Button>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <p className="text-muted-foreground text-xs">
+                {t('agent_external_no_threads')}
+              </p>
+            )}
+          </div>
+        </PanelSection>
+      )}
 
-      <PanelSection
-        icon={<Sparkles className="size-4" />}
-        title={t('agent_external_response')}
-      >
-        <div className="space-y-2">
-          <Textarea
-            onChange={(event) => setPrompt(event.target.value)}
-            placeholder={t('agent_external_prompt_placeholder')}
-            rows={3}
-            value={prompt}
-          />
-          <Textarea
-            onChange={(event) => setDraft(event.target.value)}
-            placeholder={t('agent_external_draft_placeholder')}
-            rows={5}
-            value={draft}
-          />
-          <div className="grid grid-cols-2 gap-2">
-            <Button
-              disabled={!threadId || draftMutation.isPending}
-              onClick={() => draftMutation.mutate()}
-              type="button"
-              variant="secondary"
-            >
-              {draftMutation.isPending ? (
-                <LoaderCircle className="size-4 animate-spin" />
-              ) : (
-                <Sparkles className="size-4" />
-              )}
-              {t('agent_external_draft')}
-            </Button>
-            <Button
-              disabled={!threadId || !draft.trim() || sendMutation.isPending}
-              onClick={() => sendMutation.mutate()}
-              type="button"
-            >
-              {sendMutation.isPending ? (
-                <LoaderCircle className="size-4 animate-spin" />
-              ) : (
-                <Send className="size-4" />
-              )}
-              {t('agent_external_send')}
-            </Button>
+      {!threadId ? null : (
+        <PanelSection
+          icon={<Sparkles className="size-4" />}
+          title={t('agent_external_response')}
+        >
+          <div className="space-y-2">
+            <Textarea
+              onChange={(event) => setPrompt(event.target.value)}
+              placeholder={t('agent_external_prompt_placeholder')}
+              rows={3}
+              value={prompt}
+            />
+            <Textarea
+              onChange={(event) => setDraft(event.target.value)}
+              placeholder={t('agent_external_draft_placeholder')}
+              rows={5}
+              value={draft}
+            />
+            <div className="grid grid-cols-2 gap-2">
+              <Button
+                disabled={!threadId || draftMutation.isPending}
+                onClick={() => draftMutation.mutate()}
+                type="button"
+                variant="secondary"
+              >
+                {draftMutation.isPending ? (
+                  <LoaderCircle className="size-4 animate-spin" />
+                ) : (
+                  <Sparkles className="size-4" />
+                )}
+                {t('agent_external_draft')}
+              </Button>
+              <Button
+                disabled={!threadId || !draft.trim() || sendMutation.isPending}
+                onClick={() => sendMutation.mutate()}
+                type="button"
+              >
+                {sendMutation.isPending ? (
+                  <LoaderCircle className="size-4 animate-spin" />
+                ) : (
+                  <Send className="size-4" />
+                )}
+                {t('agent_external_send')}
+              </Button>
+            </div>
+            {isPending ? (
+              <p className="text-muted-foreground text-xs">
+                {t('agent_external_refresh_after_action')}
+              </p>
+            ) : null}
           </div>
-          {isPending ? (
-            <p className="text-muted-foreground text-xs">
-              {t('agent_external_refresh_after_action')}
-            </p>
-          ) : null}
-        </div>
-      </PanelSection>
+        </PanelSection>
+      )}
     </div>
   );
 }

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

@@ -0,0 +1,70 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { AgentOperationsPanel } from './chat-agent-details-operations-panel';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+const channel = {
+  adapter: 'discord' as const,
+  autoRespond: true,
+  discordGuildId: 'guild-1',
+  displayName: 'Discord',
+  enabled: true,
+  externalChannelId: 'channel-1',
+  historySyncEnabled: true,
+  id: 'channel-1',
+  lastDeployedAt: '2026-06-02T00:00:00.000Z',
+  lastError: null,
+  lastEventAt: '2026-06-02T00:01:00.000Z',
+  mentionRoleIds: [],
+  secrets: [],
+  status: 'deployed' as const,
+  webhookUrl: 'https://example.com/webhook',
+  workspaceId: 'workspace-1',
+};
+
+describe('AgentOperationsPanel', () => {
+  it('renders structured diagnostics after a channel test', () => {
+    render(
+      <AgentOperationsPanel
+        channel={channel}
+        isPending={false}
+        onCopySecret={vi.fn()}
+        onDeploy={vi.fn()}
+        onPause={vi.fn()}
+        onRotateSecret={vi.fn()}
+        onTest={vi.fn()}
+        secretPreview={null}
+        testResult={{
+          checks: [
+            {
+              detail: 'All required channel secrets are configured.',
+              id: 'required_secrets',
+              label: 'Required secrets',
+              ok: true,
+            },
+            {
+              detail: 'Set the Discord guild ID.',
+              id: 'adapter_account',
+              label: 'Discord guild mapping',
+              ok: false,
+            },
+          ],
+          ok: false,
+          response: 'AI agent channel needs attention.',
+        }}
+      />
+    );
+
+    expect(screen.getByText('agent_diagnostics')).toBeInTheDocument();
+    expect(
+      screen.getByText('agent_diagnostic_required_secrets')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('agent_diagnostic_adapter_account')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Set the Discord guild ID.')).toBeInTheDocument();
+  });
+});

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

@@ -1,6 +1,7 @@
 'use client';
 
 import {
+  Check,
   Copy,
   FlaskConical,
   LoaderCircle,
@@ -8,8 +9,12 @@ import {
   Play,
   RotateCw,
   Webhook,
+  X,
 } from '@tuturuuu/icons';
-import type { AiAgentChannelConfig } from '@tuturuuu/internal-api/infrastructure';
+import type {
+  AiAgentChannelConfig,
+  AiAgentTestResponse,
+} from '@tuturuuu/internal-api/infrastructure';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { Button } from '../button';
@@ -20,6 +25,18 @@ import {
   PanelSection,
 } from './chat-agent-details-utils';
 
+const DIAGNOSTIC_LABEL_KEYS = {
+  adapter_account: 'agent_diagnostic_adapter_account',
+  agent_enabled: 'agent_diagnostic_agent_enabled',
+  channel_deployed: 'agent_diagnostic_channel_deployed',
+  channel_enabled: 'agent_diagnostic_channel_enabled',
+  last_error: 'agent_diagnostic_last_error',
+  last_event: 'agent_diagnostic_last_event',
+  required_secrets: 'agent_diagnostic_required_secrets',
+  webhook_url: 'agent_diagnostic_webhook_url',
+  workspace_mapping: 'agent_diagnostic_workspace_mapping',
+} as const;
+
 export function AgentOperationsPanel({
   channel,
   isPending,
@@ -29,6 +46,7 @@ export function AgentOperationsPanel({
   onRotateSecret,
   onTest,
   secretPreview,
+  testResult,
 }: {
   channel: AiAgentChannelConfig;
   isPending: boolean;
@@ -38,10 +56,19 @@ export function AgentOperationsPanel({
   onRotateSecret: () => void;
   onTest: (prompt?: string) => void;
   secretPreview: { label: string; value: string } | null;
+  testResult?: AiAgentTestResponse | null;
 }) {
   const t = useTranslations('chat');
   const [testPrompt, setTestPrompt] = useState('');
   const webhookUrl = channel.webhookUrl;
+  const diagnosticLabel = (
+    check: NonNullable<AiAgentTestResponse['checks']>[number]
+  ) => {
+    const key =
+      DIAGNOSTIC_LABEL_KEYS[check.id as keyof typeof DIAGNOSTIC_LABEL_KEYS];
+
+    return key ? t(key) : check.label;
+  };
 
   return (
     <div className="space-y-4">
@@ -135,6 +162,38 @@ export function AgentOperationsPanel({
         </div>
       </PanelSection>
 
+      {testResult?.checks?.length ? (
+        <PanelSection
+          icon={<FlaskConical className="size-4" />}
+          title={t('agent_diagnostics')}
+        >
+          <ul className="space-y-2">
+            {testResult.checks.map((check) => (
+              <li
+                className="rounded-md border bg-muted/20 p-2 text-xs"
+                key={check.id}
+              >
+                <div className="flex min-w-0 items-center gap-2">
+                  {check.ok ? (
+                    <Check className="size-3.5 shrink-0 text-dynamic-green" />
+                  ) : (
+                    <X className="size-3.5 shrink-0 text-dynamic-red" />
+                  )}
+                  <span className="min-w-0 flex-1 truncate font-medium">
+                    {diagnosticLabel(check)}
+                  </span>
+                </div>
+                {check.detail ? (
+                  <p className="mt-1 break-words text-muted-foreground">
+                    {check.detail}
+                  </p>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        </PanelSection>
+      ) : null}
+
       {channel.adapter === 'zalo' ? (
         <PanelSection
           icon={<RotateCw className="size-4" />}

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

@@ -3,7 +3,10 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Bot, LoaderCircle } from '@tuturuuu/icons';
 import type { ChatConversation } from '@tuturuuu/internal-api';
-import type { SaveAiAgentPayload } from '@tuturuuu/internal-api/infrastructure';
+import type {
+  AiAgentTestResponse,
+  SaveAiAgentPayload,
+} from '@tuturuuu/internal-api/infrastructure';
 import {
   deployAiAgentChannel,
   listAiAgents,
@@ -45,6 +48,9 @@ export function ChatAgentDetailsSidebar({
     label: string;
     value: string;
   } | null>(null);
+  const [testResult, setTestResult] = useState<AiAgentTestResponse | null>(
+    null
+  );
   const agentsQuery = useQuery({
     enabled: open && Boolean(metadata),
     queryFn: () => listAiAgents(),
@@ -65,10 +71,7 @@ export function ChatAgentDetailsSidebar({
         : undefined,
     [agent, metadata]
   );
-  const tabs: AgentTab[] =
-    metadata?.source === 'ai-agent-external-thread'
-      ? ['setup', 'operations', 'thread']
-      : ['setup', 'operations'];
+  const tabs: AgentTab[] = ['setup', 'operations', 'thread'];
   const refreshAgent = () =>
     queryClient.invalidateQueries({ queryKey: AGENT_QUERY_KEY });
   const refreshChat = () => {
@@ -122,6 +125,7 @@ export function ChatAgentDetailsSidebar({
         : Promise.reject(new Error(t('agent_not_found'))),
     onError: (error) => toast.error(error.message || t('agent_test_failed')),
     onSuccess: (result) => {
+      setTestResult(result);
       if (result.ok) toast.success(result.response || t('agent_test_success'));
       else toast.error(result.response || t('agent_test_failed'));
     },
@@ -204,6 +208,7 @@ export function ChatAgentDetailsSidebar({
             onTest: (prompt) => testMutation.mutate(prompt),
             secretPreview,
             tabs,
+            testResult,
             t,
             agent,
           })}
@@ -229,6 +234,7 @@ function renderContent({
   onTest,
   secretPreview,
   tabs,
+  testResult,
   t,
 }: {
   agent?: Awaited<ReturnType<typeof listAiAgents>>['agents'][number];
@@ -248,6 +254,7 @@ function renderContent({
   onTest: (prompt?: string) => void;
   secretPreview: { label: string; value: string } | null;
   tabs: AgentTab[];
+  testResult: AiAgentTestResponse | null;
   t: ReturnType<typeof useTranslations>;
 }) {
   if (!metadata) {
@@ -296,6 +303,7 @@ function renderContent({
           onRotateSecret={onRotateSecret}
           onTest={onTest}
           secretPreview={secretPreview}
+          testResult={testResult}
         />
       </TabsContent>
       {tabs.includes('thread') ? (