@nextclaw/ui 0.12.34 → 0.12.35-beta.1

package/src/features/channels/components/config/channel-form.tsx

@@ -10,7 +10,7 @@ import { nextclawClient } from '@/shared/lib/api';
 import { useConfig, useConfigMeta, useConfigSchema, useExecuteConfigAction, useUpdateChannel } from '@/shared/hooks/use-config';
 import type { ConfigActionManifest, ConfigUiHints } from '@/shared/lib/api';
 import { ChannelFormFieldsSection } from '@/features/channels/components/channel-form-fields-section';
-import { QrChannelAuthSection } from '@/features/channels/components/config/weixin-channel-auth-section';
+import { FeishuChannelAuthSection, QrChannelAuthSection } from '@/features/channels/components/config/weixin-channel-auth-section';
 import { buildChannelFormDefinitions, type ChannelField, type ChannelFormBlock, type ChannelFormFieldSection } from '@/features/channels/utils/channel-form-fields.utils';
 import { ConfigSplitDetailPane, ConfigSplitEmptyPane, ConfigSplitPaneBody, ConfigSplitPaneFooter, ConfigSplitPaneHeader } from '@/shared/components/config-split-page';
 import { hintForPath } from '@/shared/lib/config-hints';
@@ -121,7 +121,13 @@ function buildChannelApplyStatusView(channelApplyState: ChannelApplyState) {
   return { className: 'text-red-600', label: `${t('channelConfigApplyFailed')}${channelApplyState.message ? `: ${channelApplyState.message}` : ''}` };
 }
 
-function ChannelFormHeader(props: {
+function ChannelFormHeader({
+  channelApplyStatus,
+  channelLabel,
+  channelName,
+  enabled,
+  tutorialUrl
+}: {
   channelApplyStatus: ReturnType<typeof buildChannelApplyStatusView>;
   channelLabel?: string;
   channelName: string;
@@ -134,30 +140,42 @@ function ChannelFormHeader(props: {
         <div className="min-w-0">
           <div className="flex items-center gap-3">
             <LogoBadge
-              name={props.channelName}
-              src={getChannelLogo(props.channelName)}
-              className={cn('h-9 w-9 rounded-lg border', props.enabled ? 'border-primary/30 bg-white' : 'border-gray-200/70 bg-white')}
+              name={channelName}
+              src={getChannelLogo(channelName)}
+              className={cn('h-9 w-9 rounded-lg border', enabled ? 'border-primary/30 bg-white' : 'border-gray-200/70 bg-white')}
               imgClassName="h-5 w-5 object-contain"
-              fallback={<span className="text-sm font-semibold uppercase text-gray-500">{props.channelName[0]}</span>}
+              fallback={<span className="text-sm font-semibold uppercase text-gray-500">{channelName[0]}</span>}
             />
-            <h3 className="truncate text-lg font-semibold text-gray-900 capitalize">{props.channelLabel}</h3>
+            <h3 className="truncate text-lg font-semibold text-gray-900 capitalize">{channelLabel}</h3>
           </div>
           <p className="mt-2 text-sm text-gray-500">{t('channelsFormDescription')}</p>
-          {props.channelApplyStatus ? <p className={cn('mt-2 text-xs font-medium', props.channelApplyStatus.className)}>{props.channelApplyStatus.label}</p> : null}
-          {props.tutorialUrl ? (
-            <a href={props.tutorialUrl} className="mt-2 inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover">
+          {channelApplyStatus ? <p className={cn('mt-2 text-xs font-medium', channelApplyStatus.className)}>{channelApplyStatus.label}</p> : null}
+          {tutorialUrl ? (
+            <a href={tutorialUrl} className="mt-2 inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover">
               <BookOpen className="h-3.5 w-3.5" />
               {t('channelsGuideTitle')}
             </a>
           ) : null}
         </div>
-        <StatusDot status={props.enabled ? 'active' : 'inactive'} label={props.enabled ? t('statusActive') : t('statusInactive')} />
+        <StatusDot status={enabled ? 'active' : 'inactive'} label={enabled ? t('statusActive') : t('statusInactive')} />
       </div>
     </ConfigSplitPaneHeader>
   );
 }
 
-function ChannelFormBlocks(props: {
+function ChannelFormBlocks({
+  channelConfig,
+  channelName,
+  disabled,
+  enabled,
+  fields,
+  formData,
+  jsonDrafts,
+  layoutBlocks,
+  setJsonDrafts,
+  uiHints,
+  updateField
+}: {
   channelConfig: Record<string, unknown>;
   channelName: string;
   enabled: boolean;
@@ -172,21 +190,21 @@ function ChannelFormBlocks(props: {
 }) {
   return (
     <>
-      {props.layoutBlocks.map((block, index) => {
+      {layoutBlocks.map((block, index) => {
         if (block.type === 'fields') {
-          const blockFields = resolveFieldsForSection(props.fields, block.section);
+          const blockFields = resolveFieldsForSection(fields, block.section);
           if (blockFields.length === 0) {
             return null;
           }
           const content = (
             <ChannelFormFieldsSection
-              channelName={props.channelName}
+              channelName={channelName}
               fields={blockFields}
-              formData={props.formData}
-              jsonDrafts={props.jsonDrafts}
-              setJsonDrafts={props.setJsonDrafts}
-              updateField={props.updateField}
-              uiHints={props.uiHints}
+              formData={formData}
+              jsonDrafts={jsonDrafts}
+              setJsonDrafts={setJsonDrafts}
+              updateField={updateField}
+              uiHints={uiHints}
             />
           );
           if (!block.collapsible) {
@@ -205,14 +223,25 @@ function ChannelFormBlocks(props: {
             </details>
           );
         }
-        return block.sectionId === 'weixin-auth' || block.sectionId === 'feishu-auth' ? (
+        if (block.sectionId === 'feishu-auth') {
+          return (
+            <FeishuChannelAuthSection
+              key={`${block.type}-${block.sectionId}-${index}`}
+              channelConfig={channelConfig}
+              formData={formData}
+              channelEnabled={enabled}
+              disabled={disabled}
+            />
+          );
+        }
+        return block.sectionId === 'weixin-auth' ? (
           <QrChannelAuthSection
             key={`${block.type}-${block.sectionId}-${index}`}
-            channelConfig={props.channelConfig}
-            formData={props.formData}
-            channelName={props.channelName === 'feishu' ? 'feishu' : 'weixin'}
-            channelEnabled={props.enabled}
-            disabled={props.disabled}
+            channelConfig={channelConfig}
+            formData={formData}
+            channelName="weixin"
+            channelEnabled={enabled}
+            disabled={disabled}
           />
         ) : null;
       })}
@@ -220,14 +249,23 @@ function ChannelFormBlocks(props: {
   );
 }
 
-function ChannelFormEditor(props: ChannelFormEditorProps) {
+function ChannelFormEditor({
+  actions,
+  channelConfig,
+  channelLabel,
+  channelName,
+  fields,
+  layoutBlocks,
+  tutorialUrl,
+  uiHints
+}: ChannelFormEditorProps) {
   const updateChannel = useUpdateChannel();
   const executeAction = useExecuteConfigAction();
-  const [formData, setFormData] = useState<Record<string, unknown>>(() => ({ ...props.channelConfig }));
-  const [jsonDrafts, setJsonDrafts] = useState<Record<string, string>>(() => buildJsonDrafts(props.channelConfig, props.fields));
+  const [formData, setFormData] = useState<Record<string, unknown>>(() => ({ ...channelConfig }));
+  const [jsonDrafts, setJsonDrafts] = useState<Record<string, string>>(() => buildJsonDrafts(channelConfig, fields));
   const [runningActionId, setRunningActionId] = useState<string | null>(null);
-  const channelApplyStatus = buildChannelApplyStatusView(useChannelApplyState(props.channelName));
-  const enabled = typeof formData.enabled === 'boolean' ? formData.enabled : Boolean(props.channelConfig.enabled);
+  const channelApplyStatus = buildChannelApplyStatusView(useChannelApplyState(channelName));
+  const enabled = typeof formData.enabled === 'boolean' ? formData.enabled : Boolean(channelConfig.enabled);
   const disabled = updateChannel.isPending || Boolean(runningActionId);
 
   const updateField = (name: string, value: unknown) => setFormData((prev) => ({ ...prev, [name]: value }));
@@ -235,7 +273,7 @@ function ChannelFormEditor(props: ChannelFormEditorProps) {
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
     const payload: Record<string, unknown> = { ...formData };
-    for (const field of props.fields) {
+    for (const field of fields) {
       if (field.type === 'password') {
         const value = payload[field.name];
         if (typeof value !== 'string' || value.length === 0) {
@@ -251,19 +289,19 @@ function ChannelFormEditor(props: ChannelFormEditorProps) {
         }
       }
     }
-    updateChannel.mutate({ channel: props.channelName, data: payload });
+    updateChannel.mutate({ channel: channelName, data: payload });
   };
 
   const applyActionPatchToForm = (patch?: Record<string, unknown>) => {
-    if (!isRecord(patch?.channels) || !isRecord(patch.channels[props.channelName])) {
+    if (!isRecord(patch?.channels) || !isRecord(patch.channels[channelName])) {
       return;
     }
-    const channelPatch = patch.channels[props.channelName] as Record<string, unknown>;
+    const channelPatch = patch.channels[channelName] as Record<string, unknown>;
     setFormData((prev) => deepMergeRecords(prev, channelPatch));
     setJsonDrafts((prev) => {
       const nextDrafts = { ...prev };
       let changed = false;
-      for (const field of props.fields) {
+      for (const field of fields) {
         if (field.type !== 'json' || !Object.prototype.hasOwnProperty.call(channelPatch, field.name)) {
           continue;
         }
@@ -277,12 +315,12 @@ function ChannelFormEditor(props: ChannelFormEditorProps) {
   const handleManualAction = async (action: ConfigActionManifest) => {
     setRunningActionId(action.id);
     try {
-      const scope = `channels.${props.channelName}`;
+      const scope = `channels.${channelName}`;
       let nextData = { ...formData };
       if (action.saveBeforeRun) {
         nextData = { ...nextData, ...(action.savePatch ?? {}) };
         setFormData(nextData);
-        await updateChannel.mutateAsync({ channel: props.channelName, data: nextData });
+        await updateChannel.mutateAsync({ channel: channelName, data: nextData });
       }
       const result = await executeAction.mutateAsync({ actionId: action.id, data: { scope, draftConfig: buildScopeDraft(scope, nextData) } });
       applyActionPatchToForm(result.patch);
@@ -301,25 +339,25 @@ function ChannelFormEditor(props: ChannelFormEditorProps) {
   return (
     <ConfigSplitDetailPane>
       <ChannelFormHeader
-        channelName={props.channelName}
-        channelLabel={props.channelLabel}
+        channelName={channelName}
+        channelLabel={channelLabel}
         enabled={enabled}
-        tutorialUrl={props.tutorialUrl}
+        tutorialUrl={tutorialUrl}
         channelApplyStatus={channelApplyStatus}
       />
 
       <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
         <ConfigSplitPaneBody className="space-y-6 px-6 py-5">
           <ChannelFormBlocks
-            channelConfig={props.channelConfig}
-            channelName={props.channelName}
+            channelConfig={channelConfig}
+            channelName={channelName}
             enabled={enabled}
-            fields={props.fields}
+            fields={fields}
             formData={formData}
             jsonDrafts={jsonDrafts}
-            layoutBlocks={props.layoutBlocks}
+            layoutBlocks={layoutBlocks}
             setJsonDrafts={setJsonDrafts}
-            uiHints={props.uiHints}
+            uiHints={uiHints}
             updateField={updateField}
             disabled={disabled}
           />
@@ -327,7 +365,7 @@ function ChannelFormEditor(props: ChannelFormEditorProps) {
 
         <ConfigSplitPaneFooter className="flex flex-wrap items-center justify-between gap-3 px-6 py-4">
           <div className="flex flex-wrap items-center gap-2">
-            {props.actions.filter((action) => action.trigger === 'manual').map((action) => (
+            {actions.filter((action) => action.trigger === 'manual').map((action) => (
               <Button key={action.id} type="button" onClick={() => void handleManualAction(action)} disabled={disabled} variant="secondary">
                 {runningActionId === action.id ? t('connecting') : action.title}
               </Button>

package/src/features/channels/components/config/weixin-channel-auth-section.test.tsx

@@ -1,11 +1,12 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type * as ReactQueryModule from '@tanstack/react-query';
-import { QrChannelAuthSection, WeixinChannelAuthSection } from '@/features/channels/components/config/weixin-channel-auth-section';
+import { FeishuChannelAuthSection, QrChannelAuthSection, WeixinChannelAuthSection } from '@/features/channels/components/config/weixin-channel-auth-section';
 
 const mocks = vi.hoisted(() => ({
   startChannelAuthMutateAsync: vi.fn(),
   pollChannelAuthMutateAsync: vi.fn(),
+  connectChannelAuthMutateAsync: vi.fn(),
   invalidateQueries: vi.fn().mockResolvedValue(undefined)
 }));
 
@@ -34,6 +35,10 @@ vi.mock('@/features/channels/hooks/use-channel-auth', () => ({
   usePollChannelAuth: () => ({
     mutateAsync: mocks.pollChannelAuthMutateAsync,
     isPending: false
+  }),
+  useConnectChannelAuth: () => ({
+    mutateAsync: mocks.connectChannelAuthMutateAsync,
+    isPending: false
   })
 }));
 
@@ -41,6 +46,7 @@ describe('WeixinChannelAuthSection', () => {
   beforeEach(() => {
     mocks.startChannelAuthMutateAsync.mockReset();
     mocks.pollChannelAuthMutateAsync.mockReset();
+    mocks.connectChannelAuthMutateAsync.mockReset();
     mocks.invalidateQueries.mockClear();
   });
 
@@ -154,4 +160,42 @@ describe('WeixinChannelAuthSection', () => {
       });
     });
   });
+
+  it('connects an existing feishu agent with app credentials', async () => {
+    const user = userEvent.setup();
+    mocks.connectChannelAuthMutateAsync.mockResolvedValue({
+      channel: 'feishu',
+      status: 'authorized',
+      message: 'connected',
+      accountId: 'cli_existing',
+      notes: []
+    });
+
+    render(
+      <FeishuChannelAuthSection
+        channelConfig={{ enabled: false, domain: 'feishu' }}
+        formData={{ domain: 'feishu' }}
+        channelEnabled={false}
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Connect existing agent' }));
+    await user.type(screen.getByLabelText('App ID'), 'cli_existing');
+    await user.type(screen.getByLabelText('App Secret'), 'secret-existing');
+    await user.click(screen.getByRole('button', { name: 'Verify and connect' }));
+
+    await waitFor(() => {
+      expect(mocks.connectChannelAuthMutateAsync).toHaveBeenCalledWith({
+        channel: 'feishu',
+        data: {
+          domain: 'feishu',
+          fields: {
+            appId: 'cli_existing',
+            appSecret: 'secret-existing'
+          }
+        }
+      });
+    });
+    expect(screen.getByRole('link', { name: 'Open Feishu agent list' }).getAttribute('href')).toBe('https://open.feishu.cn/app');
+  });
 });

package/src/features/channels/components/config/weixin-channel-auth-section.tsx

@@ -4,7 +4,11 @@ import { toDataURL } from 'qrcode';
 import { ExternalLink, Loader2, MessageCircleMore, QrCode } from 'lucide-react';
 import { toast } from 'sonner';
 import { Button } from '@/shared/components/ui/button';
-import { usePollChannelAuth, useStartChannelAuth } from '@/features/channels/hooks/use-channel-auth';
+import { Input } from '@/shared/components/ui/input';
+import { Label } from '@/shared/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/shared/components/ui/tabs';
+import { useConnectChannelAuth, usePollChannelAuth, useStartChannelAuth } from '@/features/channels/hooks/use-channel-auth';
 import { formatDateTime, t } from '@/shared/lib/i18n';
 import { cn } from '@/shared/lib/utils';
 import type { ChannelAuthPollResult, ChannelAuthStartResult } from '@/shared/lib/api';
@@ -18,6 +22,8 @@ type QrChannelAuthSectionProps = {
 };
 
 type WeixinChannelAuthSectionProps = Omit<QrChannelAuthSectionProps, 'channelName'>;
+type FeishuChannelAuthSectionProps = WeixinChannelAuthSectionProps;
+type FeishuPlatform = 'feishu' | 'lark';
 
 type QrChannelAuthCopy = {
   title: string;
@@ -103,6 +109,15 @@ function resolveDomain(formData: Record<string, unknown>, channelConfig: Record<
   return configDomain || undefined;
 }
 
+function resolveFeishuPlatform(formData: Record<string, unknown>, channelConfig: Record<string, unknown>): FeishuPlatform {
+  const domain = resolveDomain(formData, channelConfig);
+  return domain === 'lark' ? 'lark' : 'feishu';
+}
+
+function resolveFeishuDeveloperConsoleUrl(platform: FeishuPlatform): string {
+  return platform === 'lark' ? 'https://open.larksuite.com/app' : 'https://open.feishu.cn/app';
+}
+
 function useQrDataUrl(channelName: string, qrCodeUrl: string | undefined) {
   return useQuery({
     queryKey: ['channel-qr', channelName, qrCodeUrl],
@@ -337,6 +352,109 @@ export function QrChannelAuthSection({
   );
 }
 
+function ExistingFeishuAgentConnectPanel({
+  channelConfig,
+  disabled,
+  formData
+}: {
+  channelConfig: Record<string, unknown>;
+  disabled?: boolean;
+  formData: Record<string, unknown>;
+}) {
+  const queryClient = useQueryClient();
+  const connectChannelAuth = useConnectChannelAuth();
+  const [platform, setPlatform] = useState<FeishuPlatform>(() => resolveFeishuPlatform(formData, channelConfig));
+  const [appId, setAppId] = useState('');
+  const [appSecret, setAppSecret] = useState('');
+  const developerConsoleUrl = resolveFeishuDeveloperConsoleUrl(platform);
+  const canSubmit = Boolean(appId.trim() && appSecret.trim()) && !disabled && !connectChannelAuth.isPending;
+
+  const handleConnect = async () => {
+    try {
+      const result = await connectChannelAuth.mutateAsync({
+        channel: 'feishu',
+        data: {
+          domain: platform,
+          fields: {
+            appId: appId.trim(),
+            appSecret: appSecret.trim()
+          }
+        }
+      });
+      await queryClient.invalidateQueries({ queryKey: ['config'] });
+      await queryClient.invalidateQueries({ queryKey: ['config-meta'] });
+      toast.success(result.message || t('feishuExistingAgentConnectSuccess'));
+      setAppSecret('');
+    } catch (error) {
+      toast.error(`${t('error')}: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  };
+
+  return (
+    <section className="rounded-2xl border border-primary/20 bg-white p-5">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div className="max-w-xl space-y-3">
+          <div className="inline-flex items-center gap-2 rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">
+            <MessageCircleMore className="h-3.5 w-3.5" />
+            {t('feishuExistingAgentTitle')}
+          </div>
+          <div>
+            <h4 className="text-base font-semibold text-gray-900">{t('feishuExistingAgentDescription')}</h4>
+            <p className="mt-1 text-sm text-gray-600">{t('feishuExistingAgentHint')}</p>
+          </div>
+          <a href={developerConsoleUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1.5 text-sm text-primary transition-colors hover:text-primary-hover">
+            <ExternalLink className="h-4 w-4" />
+            {platform === 'lark' ? t('feishuExistingAgentOpenLarkList') : t('feishuExistingAgentOpenFeishuList')}
+          </a>
+        </div>
+        <div className="w-full max-w-sm space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="feishu-existing-platform">{t('feishuPlatform')}</Label>
+            <Select value={platform} onValueChange={(value) => setPlatform(value === 'lark' ? 'lark' : 'feishu')}>
+              <SelectTrigger id="feishu-existing-platform" className="rounded-xl">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="feishu">Feishu</SelectItem>
+                <SelectItem value="lark">Lark</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="feishu-existing-app-id">App ID</Label>
+            <Input id="feishu-existing-app-id" value={appId} onChange={(event) => setAppId(event.target.value)} className="rounded-xl" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="feishu-existing-app-secret">App Secret</Label>
+            <Input id="feishu-existing-app-secret" type="password" value={appSecret} onChange={(event) => setAppSecret(event.target.value)} className="rounded-xl" />
+          </div>
+          <Button type="button" onClick={() => void handleConnect()} disabled={!canSubmit} className="w-full rounded-xl">
+            {connectChannelAuth.isPending ? t('feishuExistingAgentConnecting') : t('feishuExistingAgentConnect')}
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export function FeishuChannelAuthSection(props: FeishuChannelAuthSectionProps) {
+  const [mode, setMode] = useState<'create' | 'existing'>('create');
+  return (
+    <Tabs value={mode} onValueChange={(value) => setMode(value === 'existing' ? 'existing' : 'create')}>
+      <TabsList>
+        <TabsTrigger value="create">{t('feishuAuthCreateNew')}</TabsTrigger>
+        <TabsTrigger value="existing">{t('feishuAuthConnectExisting')}</TabsTrigger>
+      </TabsList>
+      <TabsContent value="create" className="mt-4">
+        <QrChannelAuthSection {...props} channelName="feishu" />
+      </TabsContent>
+      <TabsContent value="existing" className="mt-4">
+        <ExistingFeishuAgentConnectPanel {...props} />
+      </TabsContent>
+    </Tabs>
+  );
+}
+
 export function WeixinChannelAuthSection(props: WeixinChannelAuthSectionProps) {
   return <QrChannelAuthSection {...props} channelName="weixin" />;
 }

package/src/features/channels/hooks/use-channel-auth.ts

@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
-import { pollChannelAuth, startChannelAuth } from '@/shared/lib/api';
+import { connectChannelAuth, pollChannelAuth, startChannelAuth } from '@/shared/lib/api';
 
 export function useStartChannelAuth() {
   return useMutation({
@@ -14,3 +14,10 @@ export function usePollChannelAuth() {
       pollChannelAuth(channel, data as Parameters<typeof pollChannelAuth>[1])
   });
 }
+
+export function useConnectChannelAuth() {
+  return useMutation({
+    mutationFn: ({ channel, data }: { channel: string; data: unknown }) =>
+      connectChannelAuth(channel, data as Parameters<typeof connectChannelAuth>[1])
+  });
+}

package/src/features/channels/index.ts

@@ -1,5 +1,5 @@
 export { ChannelForm } from './components/config/channel-form';
 export { ChannelFormFieldsSection } from './components/channel-form-fields-section';
-export { QrChannelAuthSection, WeixinChannelAuthSection } from './components/config/weixin-channel-auth-section';
+export { FeishuChannelAuthSection, QrChannelAuthSection, WeixinChannelAuthSection } from './components/config/weixin-channel-auth-section';
 export { ChannelsList } from './pages/channels-list-page';
 export { buildChannelFields, buildChannelFormDefinitions, type ChannelField, type ChannelFieldType, type ChannelFormBlock, type ChannelFormDefinition, type ChannelFormFieldSection, type ChannelOption } from './utils/channel-form-fields.utils';

package/src/features/chat/components/conversation/chat-conversation-panel.test.tsx

@@ -281,7 +281,7 @@ describe("ChatConversationPanel", () => {
     expect(onBackToList).toHaveBeenCalledTimes(1);
   });
 
-  it("opens the new draft session immediately when mobile welcome creates a session", async () => {
+  it("lets the session list owner route new mobile welcome drafts", async () => {
     const user = userEvent.setup();
 
     render(<ChatConversationPanel layoutMode="mobile" />);
@@ -291,7 +291,7 @@ describe("ChatConversationPanel", () => {
     );
 
     expect(mocks.createSession).toHaveBeenCalledWith("native");
-    expect(mocks.goToChatRoot).toHaveBeenCalledTimes(1);
+    expect(mocks.goToChatRoot).not.toHaveBeenCalled();
   });
 
   it("shows the selected session project badge and more actions trigger", () => {

package/src/features/chat/components/conversation/chat-conversation-panel.tsx

@@ -141,11 +141,7 @@ function ChatConversationAlerts() {
   );
 }
 
-function ChatConversationContent({
-  layoutMode,
-}: {
-  layoutMode: ChatConversationLayoutMode;
-}) {
+function ChatConversationContent() {
   const presenter = usePresenter();
   const defaultSessionType = useChatInputStore(
     (state) => state.snapshot.defaultSessionType,
@@ -172,7 +168,6 @@ function ChatConversationContent({
       defaultSessionType,
     );
     presenter.chatSessionListManager.createSession(sessionType);
-    if (layoutMode === "mobile") presenter.chatUiManager.goToChatRoot();
   };
   const selectDraftAgent = (agentId: string) => {
     presenter.chatSessionListManager.setSelectedAgentId(agentId);
@@ -398,7 +393,7 @@ export function ChatConversationPanel({
           onBackToList={onBackToList}
         />
         <ChatConversationAlerts />
-        <ChatConversationContent layoutMode={layoutMode} />
+        <ChatConversationContent />
         <ChatInputBarContainer />
       </div>
 

package/src/features/chat/components/layout/chat-sidebar.test.tsx

@@ -179,6 +179,30 @@ describe('ChatSidebar create and list basics', () => {
     });
   });
 
+  it('does not animate the desktop create task button width during runtime option hydration', () => {
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    const createButton = screen.getByRole('button', { name: 'New Task' });
+    const sessionTypeButton = screen.getByLabelText('Session Type');
+
+    expect(createButton.className).not.toContain('transition-all');
+    expect(sessionTypeButton.className).not.toContain('transition-all');
+  });
+
+  it('keeps the desktop brand row compact with symmetric vertical padding', () => {
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByTestId('brand-header').parentElement?.className).toContain('py-2.5');
+  });
+
   it('shows setup required status for runtime session types that are not ready yet', () => {
     useChatInputStore.setState({
       snapshot: {
@@ -241,7 +265,7 @@ describe('ChatSidebar create and list basics', () => {
 
     expect(mocks.setQuery).toHaveBeenCalledWith('release notes');
     expect(mocks.createSession).toHaveBeenCalledWith('codex', undefined);
-    expect(mocks.goToChatRoot).toHaveBeenCalledWith();
+    expect(mocks.goToChatRoot).not.toHaveBeenCalled();
   });
 
   it('keeps low-frequency utility choices behind nested selectors', () => {
@@ -292,7 +316,7 @@ describe('ChatSidebar create and list basics', () => {
     fireEvent.click(screen.getByRole('button', { name: 'New Task' }));
 
     expect(mocks.createSession).toHaveBeenCalledWith('native', undefined);
-    expect(mocks.goToChatRoot).toHaveBeenCalledWith();
+    expect(mocks.goToChatRoot).not.toHaveBeenCalled();
   });
 
   it('shows a session type badge for non-native sessions in the list', () => {
@@ -601,7 +625,7 @@ describe('ChatSidebar project-first mode', () => {
     fireEvent.click(screen.getByText('Codex'));
 
     expect(mocks.createSession).toHaveBeenCalledWith('codex', '/tmp/project-mobile');
-    expect(mocks.goToChatRoot).toHaveBeenCalledWith();
+    expect(mocks.goToChatRoot).not.toHaveBeenCalled();
   });
 });
 

package/src/features/chat/components/layout/chat-sidebar.tsx

@@ -30,7 +30,7 @@ import {
   ChatSidebarMobileToolbar,
 } from '@/features/chat/components/layout/chat-sidebar-toolbar';
 import { ChatSidebarUtilityMenu } from '@/features/chat/components/layout/chat-sidebar-utility-menu';
-import { isMacDesktopHost, isWindowsDesktopHost } from '@/platforms/desktop';
+import { isWindowsDesktopHost } from '@/platforms/desktop';
 
 type DateGroup = {
   label: string;
@@ -256,7 +256,6 @@ export function ChatSidebar({
   );
   const createSessionAndOpenIfNeeded = (sessionType: string, projectRoot?: string | null) => {
     presenter.chatSessionListManager.createSession(sessionType, typeof projectRoot === "string" ? projectRoot : undefined);
-    if (isMobileVariant) presenter.chatUiManager.goToChatRoot();
   };
 
   return (
@@ -269,7 +268,7 @@ export function ChatSidebar({
       )}
     >
       {!isMobileVariant && !isWindowsDesktopHost() ? (
-        <div className={cn('px-5 pb-3', isMacDesktopHost() ? 'pt-1.5' : 'pt-5')}>
+        <div className="px-5 py-2.5">
           <BrandHeader
             className="flex min-w-0 items-center gap-2"
             suffix={<StatusBadge status={systemStatus.connectionStatus} />}