@tbox.cn/app-template-agent 0.2.0 → 0.7.4

package/apps/client/src/components/MessageBubble/index.less

@@ -43,6 +43,12 @@
   }
 }
 
+/* 意图空文本出卡（无气泡、有卡）：卡片前间距由 meta 下边距提供——
+   meta 无 border → 折叠语义 max(12, 卡 mt)，未来全局卡框间距调整自然跟随 */
+.msg-meta--solo-card {
+  margin-bottom: 12px;
+}
+
 .msg-bubble {
   padding: 18px 22px;
   border-radius: 20px;
@@ -74,6 +80,9 @@
     box-shadow:
       0 3px 8px 5px rgba(1, 112, 254, 0.0392),
       0 2px 4px rgba(72, 78, 86, 0.0706);
+    /* 卡片在对话气泡之后显示：间距由气泡下边距提供（单一来源；
+       不写 .tbox-card 规则——避免特异性压过全局卡框、避免复制全局间距值） */
+    margin-bottom: 12px;
   }
 
   &__text {
@@ -151,7 +160,9 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  margin-top: 12px;
+  /* 操作栏间距由前元素 margin-bottom 提供（气泡 mb 12 / 卡片 mb 12）：
+     不能自设 margin-top——气泡有 border 阻断折叠，自设会与气泡 mb 叠加成 24px */
+  margin-top: 0;
   flex-wrap: wrap;
 }
 

package/apps/client/src/components/MessageBubble/index.tsx

@@ -9,6 +9,7 @@ import ToolCallBlock from '@/components/ToolCallBlock';
 import { ActionBar, CopyButton, getMessageCopyText } from '@/components/ActionBar';
 import { DebugButton } from '@/components/ActionBar/DebugButton';
 import { CardRenderer } from '@/cards/CardRenderer';
+import { CardCarousel } from '@tbox.cn/app-sdk/client';
 import { useChatStore } from '@/store/chat';
 import { copyText } from '@/utils/copyText';
 import { toast } from '@/utils/toast';
@@ -31,9 +32,12 @@ export function MessageBubble({ message }: { message: ChatMessage }) {
   const isThinking = message.status === 'thinking';
   const isStreaming = message.status === 'streaming';
   const hasReasoning = !!message.reasoning;
+  // 018 tool-debug：服务端旗标单源（HELLO_ACK；无 URL 逃逸——数据面信任锚点在服务端）
+  const toolDebug = useChatStore((s) => s.helloAck?.toolDebug === true);
+  // 018：formSubmit 伪工具 prod 过滤不变；dev 放行（防御性——若事件到达则可见）
   const visibleToolCalls = useMemo(
-    () => (message.toolCalls || []).filter((tc) => tc.name !== '__a2uiFormSubmit'),
-    [message.toolCalls],
+    () => (message.toolCalls || []).filter((tc) => toolDebug || tc.name !== '__a2uiFormSubmit'),
+    [message.toolCalls, toolDebug],
   );
   const hasToolCalls = visibleToolCalls.length > 0;
 
@@ -59,7 +63,9 @@ export function MessageBubble({ message }: { message: ChatMessage }) {
   return (
     <div className={`msg-row ${isUser ? 'msg-row--user' : 'msg-row--bot'}`}>
       <div className="msg-main">
-        <div className={`msg-meta ${isUser ? 'msg-meta--user' : 'msg-meta--bot'}`}>
+        <div
+          className={`msg-meta ${isUser ? 'msg-meta--user' : 'msg-meta--bot'}${!showBubble && messageCards.length > 0 ? ' msg-meta--solo-card' : ''}`}
+        >
           <span className="msg-meta__role">{roleName}</span>
           <span className="msg-meta__time">{timeLabel}</span>
         </div>
@@ -74,7 +80,7 @@ export function MessageBubble({ message }: { message: ChatMessage }) {
 
         {hasReasoning && <ReasoningBlock reasoning={message.reasoning!} isActive={isReasoningActive} />}
 
-        {hasToolCalls && <ToolCallBlock toolCalls={visibleToolCalls} />}
+        {hasToolCalls && <ToolCallBlock toolCalls={visibleToolCalls} debug={toolDebug} />}
 
         {isThinking && hasToolCalls && !message.content && (
           <div className="msg-thinking-inline">
@@ -84,10 +90,6 @@ export function MessageBubble({ message }: { message: ChatMessage }) {
           </div>
         )}
 
-        {messageCards.map((card) => (
-          <CardRenderer key={card.id} card={card} />
-        ))}
-
         {showBubble && (
           <div className={`msg-bubble ${isUser ? 'msg-bubble--user' : 'msg-bubble--bot'}`}>
             {isUser ? (
@@ -113,6 +115,12 @@ export function MessageBubble({ message }: { message: ChatMessage }) {
           </div>
         )}
 
+        {/* 卡片在对话气泡之后显示（决策出卡多张/意图卡/历史卡统一经 cardsByMessageId 挂载，多卡纵向铺开） */}
+        <CardCarousel
+          cards={messageCards}
+          renderItem={(card) => <CardRenderer key={card.id} card={card} />}
+        />
+
         {imageItems && imageItems.length > 0 && (
           <div className="msg-media">
             {imageItems.map((item, idx) => (

package/apps/client/src/components/PullDownIndicator/index.less

@@ -13,7 +13,7 @@
     width: 32px;
     height: 32px;
     border: 3px solid #d0d5dd;
-    border-top-color: #1677ff;
+    border-top-color: var(--tbox-primary);
     border-radius: 50%;
     animation: pull-spin 0.6s linear infinite;
   }

package/apps/client/src/components/PullDownIndicator/index.tsx

@@ -1,13 +1,12 @@
-import type { PullStatus } from '@/hooks/usePullDownHistory';
+import type { PullStatus } from '@tbox.cn/app-sdk/client';
+import { PULL_DOWN_THRESHOLD } from '@tbox.cn/app-sdk/client';
 import './index.less';
 
-const INDICATOR_HEIGHT = 60;
-
 /** 下拉加载历史的顶部指示器。 */
 export default function PullDownIndicator({ status, distance }: { status: PullStatus; distance: number }) {
   if (status === 'idle') return null;
 
-  const marginTop = status === 'loading' ? 0 : -INDICATOR_HEIGHT + Math.min(distance, INDICATOR_HEIGHT);
+  const marginTop = status === 'loading' ? 0 : -PULL_DOWN_THRESHOLD + Math.min(distance, PULL_DOWN_THRESHOLD);
   const showTransition = status === 'loading' || status === 'noMore';
 
   const content =

package/apps/client/src/components/ToolCallBlock/index.less

@@ -93,6 +93,35 @@
       color: #dc2626;
     }
   }
+
+  // 018 dev 视图输入/输出双栏（紧凑单行 + 头尾保留）
+  &__io {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    & + & {
+      margin-top: 12px;
+    }
+  }
+
+  &__io-label {
+    font-size: 18px;
+    color: #8a97ad;
+  }
+
+  &__io-text {
+    font-size: 20px;
+    color: #6b7a99;
+    line-height: 1.6;
+    font-family: Menlo, Monaco, Consolas, monospace;
+    white-space: pre-wrap;
+    word-break: break-all;
+
+    &--error {
+      color: #dc2626;
+    }
+  }
 }
 
 @keyframes tool-spin {

package/apps/client/src/components/ToolCallBlock/index.tsx

@@ -1,15 +1,25 @@
 import { useState } from 'react';
 import { Check, X } from '@phosphor-icons/react';
+import { parseMemoryToolCallArgs, parsePreToolToolCallArgs } from '@tbox.cn/app-contracts';
 import type { ToolCallInfo } from '@/types/chat';
-import { describeToolCall } from '@tbox.cn/app-sdk/client';
+import { describeToolCall, formatCompactToolIo } from '@tbox.cn/app-sdk/client';
 import './index.less';
 
 /**
- * 工具调用状态卡片（调用中 spinner / 完成 / 失败，可展开详情）。
- * 010：展示语义判定下沉 SDK describeToolCall（skill/preTool/normal 三分支），
+ * 工具调用状态卡片（调用中 spinner / 完成 / 失败）。
+ * 010：展示语义判定下沉 SDK describeToolCall（skill/preTool/normal/memory 四分支），
  * 本组件退化为纯渲染（徽标/颜色/展开交互）。
+ * 018 tool-debug：debug 门控在渲染层——prod 恒无出入参展开入口（I4）；
+ * dev 详情走 formatCompactToolIo（紧凑单行 + 头尾保留），输入输出双栏。
  */
-export default function ToolCallBlock({ toolCalls }: { toolCalls: ToolCallInfo[] }) {
+export default function ToolCallBlock({
+  toolCalls,
+  debug = false,
+}: {
+  toolCalls: ToolCallInfo[];
+  /** 018 tool-debug：dev 视图（出入参展开 + 紧凑格式）；prod 缺省 false */
+  debug?: boolean;
+}) {
   const [expandedId, setExpandedId] = useState<string | null>(null);
 
   return (
@@ -17,10 +27,14 @@ export default function ToolCallBlock({ toolCalls }: { toolCalls: ToolCallInfo[]
       {toolCalls.map((tc) => {
         const display = describeToolCall(tc);
         const isCalling = tc.status === 'calling';
-        const isError = tc.status === 'error' || (display.kind === 'preTool' && display.status === 'error');
+        const isError =
+          tc.status === 'error' ||
+          (display.kind === 'preTool' && display.status === 'error') ||
+          (display.kind === 'memory' && display.status === 'degraded');
         const isDone = !isCalling && !isError;
         const isExpanded = expandedId === tc.id;
-        const hasDetail = display.kind !== 'skill' && display.hasDetail;
+        // 018 I4：prod 恒无展开入口；dev 按 display.hasDetail
+        const hasDetail = debug && display.hasDetail;
         const stateClass = isError ? 'tool-call--error' : isCalling ? 'tool-call--calling' : 'tool-call--done';
 
         const displayName = (() => {
@@ -32,6 +46,9 @@ export default function ToolCallBlock({ toolCalls }: { toolCalls: ToolCallInfo[]
             if (display.status === 'error') return `自动查询失败 ${display.label}`;
             return `已自动获取 ${display.label}`;
           }
+          if (display.kind === 'memory') {
+            return display.label;
+          }
           return isCalling
             ? `调用 ${display.label}`
             : isDone
@@ -39,12 +56,29 @@ export default function ToolCallBlock({ toolCalls }: { toolCalls: ToolCallInfo[]
               : `${display.label} 调用失败`;
         })();
 
-        const detailText =
-          display.kind === 'preTool'
-            ? (display.status === 'error' ? display.errorText : display.resultText) ?? ''
-            : isError
-              ? tc.error ?? ''
-              : tc.result ?? '';
+        // 详情文本（018：dev 态才计算——prod 无展开无渲染需求）
+        const detailText = (() => {
+          if (!hasDetail) return '';
+          if (display.kind === 'preTool') {
+            return (display.status === 'error' ? display.errorText : display.resultText) ?? '';
+          }
+          if (display.kind === 'memory') {
+            return display.detailText ?? '';
+          }
+          return isError ? (tc.error ?? '') : (tc.result ?? '');
+        })();
+        // dev 输入侧：normal 用 tc.args；preTool 解包 toolArgs（对齐 mall 视图模型）；memory 取 query
+        const inputText = (() => {
+          if (!hasDetail) return '';
+          if (display.kind === 'normal') return tc.args ?? '';
+          if (display.kind === 'preTool') {
+            return JSON.stringify(parsePreToolToolCallArgs(tc.args)?.toolArgs ?? {});
+          }
+          if (display.kind === 'memory') {
+            return parseMemoryToolCallArgs(tc.args)?.query ?? '';
+          }
+          return '';
+        })();
 
         return (
           <div key={tc.id} className={`tool-call ${stateClass}`}>
@@ -69,9 +103,18 @@ export default function ToolCallBlock({ toolCalls }: { toolCalls: ToolCallInfo[]
             </div>
             {isExpanded && hasDetail && (
               <div className="tool-call__result">
-                <span className={`tool-call__result-text${isError ? ' tool-call__result-text--error' : ''}`}>
-                  {formatResult(detailText)}
-                </span>
+                {inputText && (
+                  <div className="tool-call__io">
+                    <span className="tool-call__io-label">输入</span>
+                    <span className="tool-call__io-text">{formatCompactToolIo(inputText)}</span>
+                  </div>
+                )}
+                <div className="tool-call__io">
+                  <span className="tool-call__io-label">输出</span>
+                  <span className={`tool-call__io-text${isError ? ' tool-call__io-text--error' : ''}`}>
+                    {formatCompactToolIo(detailText) || '（无）'}
+                  </span>
+                </div>
               </div>
             )}
           </div>
@@ -80,12 +123,3 @@ export default function ToolCallBlock({ toolCalls }: { toolCalls: ToolCallInfo[]
     </div>
   );
 }
-
-function formatResult(raw: string): string {
-  try {
-    const pretty = JSON.stringify(JSON.parse(raw), null, 2);
-    return pretty.length > 500 ? pretty.slice(0, 500) + '...' : pretty;
-  } catch {
-    return raw.length > 500 ? raw.slice(0, 500) + '...' : raw;
-  }
-}

package/apps/client/src/hooks/useMediaUpload.ts

@@ -1,3 +1,7 @@
+import { createLogger } from '@tbox.cn/app-sdk/client';
+
+const mediaLogger = createLogger('media');
+
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useUploadAdapter, useRefreshSession, chooseImage, chooseVideo } from '@tbox.cn/app-sdk/client';
 
@@ -109,7 +113,8 @@ export function useMediaUpload(maxTotal = 9, mediaConfig?: MediaConfig) {
                 done(await next.upload.upload(rec.source, { type: rec.type, name: rec.name }));
                 return;
               }
-            } catch {
+            } catch (retryErr) {
+              mediaLogger.warn(`上传重试失败：err=${(retryErr as Error).message}`);
               /* 重试失败 → 落到下方失败处理 */
             }
           }
@@ -211,7 +216,7 @@ export function useMediaUpload(maxTotal = 9, mediaConfig?: MediaConfig) {
           typeCount += 1;
         }
       } catch (err) {
-        console.warn('[media] bridge pick failed:', err);
+        mediaLogger.warn('bridge pick failed:', err);
       }
     },
     [adapter, enqueue, validate],

package/apps/client/src/main.tsx

@@ -1,12 +1,15 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { configureRuntime } from '@tbox.cn/app-sdk/client';
+import { configureRuntime, installGlobalErrorReporting } from '@tbox.cn/app-sdk/client';
 import App from './app';
 import './styles/global.less';
 
 // H1：环境值注入点（SDK 零 Vite 依赖）——VITE_API_URL 空串 = 同源相对路径
 configureRuntime({ apiBaseUrl: import.meta.env.VITE_API_URL as string | undefined });
 
+// 全局错误兜底：未捕获异常/rejection → 统一日志行（本地落地；上报扩展点见 SDK client logger）
+installGlobalErrorReporting();
+
 const el = document.getElementById('root');
 if (el) {
   createRoot(el).render(

package/apps/client/src/pages/index/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState, type ComponentType } from 'react';
 import { useChatStore } from '@/store/chat';
+import { useChatConfigStore } from '@/store/chat-config';
 import { useTTSAutoPlay } from '@/hooks/useTTSAutoPlay';
 import { MessageBubble } from '@/components/MessageBubble';
 import { ChatInput } from '@/components/ChatInput';
@@ -7,7 +8,7 @@ import { QuickCommands } from '@/components/QuickCommands';
 import ChatHeader from '@/components/ChatHeader';
 import ScrollToBottomButton from '@/components/ScrollToBottomButton';
 import PullDownIndicator from '@/components/PullDownIndicator';
-import { usePullDownHistory } from '@/hooks/usePullDownHistory';
+import { usePullDownHistory, consumeAutoSendQuery, runAutoSend } from '@tbox.cn/app-sdk/client';
 import { CardRenderer } from '@/cards/CardRenderer';
 import type { ChatInputMessage } from '@/types/chat';
 import './index.less';
@@ -30,23 +31,40 @@ export default function IndexPage({ landing: Landing }: IndexPageProps) {
   const loadMoreHistory = useChatStore((s) => s.loadMoreHistory);
   const isGenerating = useChatStore((s) => s.isGenerating);
   const orphanCards = useChatStore((s) => s.orphanCards);
+  const cardsByMessageId = useChatStore((s) => s.cardsByMessageId);
   const initConversation = useChatStore((s) => s.initConversation);
   const destroy = useChatStore((s) => s.destroy);
   const sendMessage = useChatStore((s) => s.sendMessage);
   const cancelGeneration = useChatStore((s) => s.cancelGeneration);
-  const clearChat = useChatStore((s) => s.clearChat);
+  const newConversation = useChatStore((s) => s.newConversation);
+  const authBlocked = useChatStore((s) => s.authBlocked);
+  const retryBootstrap = useChatStore((s) => s.retryBootstrap);
+  // chat settings 水合：HELLO_ACK 服务端真源 → 静态 store（ack 未达/键缺席保留构建期快照；
+  // 重连/新会话产生新 helloAck 再水合——applyServerSettings 幂等）
+  const serverSettings = useChatStore((s) => s.helloAck?.chatConfig?.settings);
+  const applyServerSettings = useChatConfigStore((s) => s.applyServerSettings);
+  useEffect(() => {
+    applyServerSettings(serverSettings);
+  }, [serverSettings, applyServerSettings]);
 
   const [ttsAutoPlay, setTtsAutoPlay] = useState(false);
   const [showScrollToBottom, setShowScrollToBottom] = useState(false);
   const bodyRef = useRef<HTMLDivElement>(null);
-  const isAtTopRef = useRef(false);
+  // 初始 true：全新会话（未滚动）也可直接下拉加载历史（onScroll 才是真源更新）
+  const isAtTopRef = useRef(true);
   const isNearBottomRef = useRef(true);
 
-  // TTS 自动播放：开启后边生成边流式朗读
-  useTTSAutoPlay(ttsAutoPlay);
+  // TTS 自动播放：开启后边生成边流式朗读（服务端关态经水合强制停——防按钮隐藏仍朗读的僵尸路径）
+  const enableTTS = useChatConfigStore((s) => s.enableTTS);
+  useTTSAutoPlay(ttsAutoPlay && enableTTS);
 
   const send = useCallback((input: string | ChatInputMessage) => sendMessage(input), [sendMessage]);
 
+  // 连接终态阻断（登录失败/scope 拒绝）：禁用输入 + 提示条 + 重试（authBlocked 非空 ⇒ socket 已关 ⇒ 发送必失败）
+  const blocked = authBlocked
+    ? { message: authBlocked, onRetry: () => void retryBootstrap() }
+    : undefined;
+
   const scrollToBottom = useCallback(() => {
     const el = bodyRef.current;
     if (el) el.scrollTop = el.scrollHeight;
@@ -80,21 +98,28 @@ export default function IndexPage({ landing: Landing }: IndexPageProps) {
     isLoadingHistory,
     hasMore: historyHasMore,
     onLoad: onLoadHistory,
+    // touchmove 走容器上的非 passive 原生监听（web-view 内合成事件 passive，阻止不了原生滚动）
+    scrollRef: bodyRef,
   });
 
   useEffect(() => {
-    initConversation();
+    // 深链自动发送：同步消费（StrictMode 双挂载/刷新安全），引导完成后等连接就绪发送
+    const autoQuery = consumeAutoSendQuery();
+    void initConversation().then(async () => {
+      if (autoQuery) await runAutoSend(autoQuery, sendMessage);
+    });
     return () => destroy();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // 仅在贴近底部时自动滚动，避免打断用户上翻查看历史
+  // 依赖含 cardsByMessageId：012 主卡在文字完成后挂载、消息行增高，需补滚避免卡片截出视口
   useEffect(() => {
     if (isNearBottomRef.current) {
       const el = bodyRef.current;
       if (el) el.scrollTop = el.scrollHeight;
     }
-  }, [messages, orphanCards]);
+  }, [messages, orphanCards, cardsByMessageId]);
 
   return (
     <div className="chat-page">
@@ -102,7 +127,7 @@ export default function IndexPage({ landing: Landing }: IndexPageProps) {
       <ChatHeader
         ttsAutoPlay={ttsAutoPlay}
         onToggleTTS={() => setTtsAutoPlay((v) => !v)}
-        onClearChat={clearChat}
+        onClearChat={newConversation}
       />
 
       <div className="chat-page__body-wrapper">
@@ -110,9 +135,6 @@ export default function IndexPage({ landing: Landing }: IndexPageProps) {
           className="chat-page__body"
           ref={bodyRef}
           onScroll={onScroll}
-          onTouchStart={pull.handleTouchStart}
-          onTouchMove={pull.handleTouchMove}
-          onTouchEnd={pull.handleTouchEnd}
         >
           {/* 下拉加载历史指示器 */}
           <PullDownIndicator status={pull.pullStatus} distance={pull.pullDistance} />
@@ -138,8 +160,8 @@ export default function IndexPage({ landing: Landing }: IndexPageProps) {
         <ScrollToBottomButton visible={showScrollToBottom && isGenerating} onClick={scrollToBottom} />
       </div>
 
-      <QuickCommands onCommand={send} />
-      <ChatInput generating={isGenerating} onSend={send} onCancel={cancelGeneration} onNewChat={clearChat} />
+      {!blocked && <QuickCommands onCommand={send} />}
+      <ChatInput generating={isGenerating} blocked={blocked} onSend={send} onCancel={cancelGeneration} onNewChat={newConversation} />
     </div>
   );
 }

package/apps/client/src/platform/AgentChatApp.tsx

@@ -1,3 +1,7 @@
+import { createLogger } from '@tbox.cn/app-sdk/client';
+
+const appLogger = createLogger('AgentChatApp');
+
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { AdapterProvider, createPlatformAdapters, type AdapterContextValue } from '@tbox.cn/app-sdk/client';
 import type { TboxSessionData } from '@tbox.cn/app-contracts';
@@ -15,7 +19,7 @@ export default function AgentChatApp({ landing }: { landing?: ChatLandingCompone
       .ensureAuth()
       .then((auth) => platformApi.getTboxSession(auth.identity.userId))
       .then(setSession)
-      .catch((err) => console.error('[AgentChatApp] tbox session init failed:', err));
+      .catch((err) => appLogger.error('tbox session init failed:', err));
   }, []);
 
   const refreshSession = useCallback(async (): Promise<AdapterContextValue> => {

package/apps/client/src/store/chat-config.ts

@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+import type { ChatUiSettings } from '@tbox.cn/app-sdk/client';
 import chatConfigJson from '../../../../config/chat.json';
 
 export interface QuickCommand {
@@ -15,15 +16,25 @@ interface ChatConfigStore {
   enableVoiceInput: boolean;
   defaultInputMode: 'TEXT' | 'VOICE';
   quickCommands: QuickCommand[];
+  /** HELLO_ACK settings 水合：服务端单一真源；undefined 键保留构建期快照（五键整组语义，禁部分水合） */
+  applyServerSettings: (settings: ChatUiSettings | undefined) => void;
 }
 
 const cfg = chatConfigJson as Record<string, unknown>;
 
-export const useChatConfigStore = create<ChatConfigStore>()(() => ({
+export const useChatConfigStore = create<ChatConfigStore>()((set) => ({
   enableImageUpload: (cfg.enableImageUpload as boolean) ?? true,
   enableVideoUpload: (cfg.enableVideoUpload as boolean) ?? true,
   enableTTS: (cfg.enableTTS as boolean) ?? true,
   enableVoiceInput: (cfg.enableVoiceInput as boolean) ?? true,
   defaultInputMode: (cfg.defaultInputMode as 'TEXT' | 'VOICE') ?? 'TEXT',
   quickCommands: (cfg.quickCommands as QuickCommand[]) ?? [],
+  applyServerSettings: (settings) =>
+    set((cur) => ({
+      enableImageUpload: settings?.enableImageUpload ?? cur.enableImageUpload,
+      enableVideoUpload: settings?.enableVideoUpload ?? cur.enableVideoUpload,
+      enableTTS: settings?.enableTTS ?? cur.enableTTS,
+      enableVoiceInput: settings?.enableVoiceInput ?? cur.enableVoiceInput,
+      defaultInputMode: settings?.defaultInputMode ?? cur.defaultInputMode,
+    })),
 }));