feat: implement channel runtime connectors

app-instance/frontend/components/chat-workbench/MarkdownContent.tsx

@@ -3,9 +3,11 @@
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
+import { containedLongTextClass } from '@/lib/text-wrapping';
+
 export function MarkdownContent({ content }: { content: string }) {
   return (
-    <div className="prose prose-sm max-w-none text-[#1D1715] prose-headings:text-[#0B0B0B] prose-p:text-[#1D1715] prose-p:leading-7 prose-strong:text-[#0B0B0B] prose-a:text-[#342E2B] prose-a:underline prose-a:decoration-[#B8AEA8] prose-a:underline-offset-4 prose-li:text-[#1D1715] prose-blockquote:border-l-[#D8D2CE] prose-blockquote:text-[#4F4642] prose-code:rounded-md prose-code:bg-[#ECE8E5] prose-code:px-1.5 prose-code:py-0.5 prose-code:text-[#342E2B] prose-pre:border prose-pre:border-[#D8D2CE] prose-pre:bg-[#ECE8E5] prose-pre:text-[#342E2B] [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+    <div className={`prose prose-sm max-w-none text-[#1D1715] prose-headings:text-[#0B0B0B] prose-p:text-[#1D1715] prose-p:leading-7 prose-strong:text-[#0B0B0B] prose-a:text-[#342E2B] prose-a:underline prose-a:decoration-[#B8AEA8] prose-a:underline-offset-4 prose-li:text-[#1D1715] prose-blockquote:border-l-[#D8D2CE] prose-blockquote:text-[#4F4642] prose-code:rounded-md prose-code:bg-[#ECE8E5] prose-code:px-1.5 prose-code:py-0.5 prose-code:text-[#342E2B] prose-code:[overflow-wrap:anywhere] prose-pre:border prose-pre:border-[#D8D2CE] prose-pre:bg-[#ECE8E5] prose-pre:text-[#342E2B] prose-pre:whitespace-pre-wrap prose-pre:[overflow-wrap:anywhere] [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 ${containedLongTextClass}`}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         components={{

app-instance/frontend/components/chat-workbench/MessageList.tsx

@@ -12,6 +12,7 @@ import { MarkdownContent } from '@/components/chat-workbench/MarkdownContent';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { pickAppText } from '@/lib/i18n/core';
 import { useAppI18n } from '@/lib/i18n/provider';
+import { containedPreservedLongTextClass } from '@/lib/text-wrapping';
 
 function AuthImage({ src, alt, className }: { src: string; alt: string; className?: string }) {
   const [blobUrl, setBlobUrl] = React.useState<string | null>(null);
@@ -66,7 +67,7 @@ function MessageBubble({
         </div>
       )}
       <div
-        className={`max-w-[88%] px-4 py-3 ${
+        className={`min-w-0 max-w-[88%] px-4 py-3 ${
           isUser
             ? 'rounded-[28px] bg-primary text-primary-foreground'
             : 'rounded-none bg-transparent text-[#1D1715]'
@@ -92,14 +93,14 @@ function MessageBubble({
                   key={att.file_id}
                   href={fileUrl}
                   download={att.name}
-                  className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm ${
+                  className={`flex min-w-0 items-center gap-2 px-3 py-2 rounded-md text-sm ${
                     isUser
                       ? 'bg-primary-foreground/10 hover:bg-primary-foreground/20'
                       : 'bg-muted hover:bg-muted/80'
                   }`}
                 >
                   <Paperclip className="w-3.5 h-3.5 flex-shrink-0" />
-                  <span className="truncate">{att.name}</span>
+                  <span className="min-w-0 truncate">{att.name}</span>
                   {att.size && (
                     <span className="text-xs opacity-70 flex-shrink-0">
                       {att.size > 1024 * 1024
@@ -114,7 +115,7 @@ function MessageBubble({
         )}
 
         {isUser ? (
-          <p className="text-sm whitespace-pre-wrap">{textContent}</p>
+          <p className={`text-sm ${containedPreservedLongTextClass}`}>{textContent}</p>
         ) : (
           <MarkdownContent content={textContent} />
         )}

app-instance/frontend/components/task-detail/TaskAcceptanceCard.tsx

@@ -11,6 +11,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { pickAppText } from '@/lib/i18n/core';
 import { useAppI18n } from '@/lib/i18n/provider';
 import type { TaskRuntimeStatus } from '@/lib/task-runtime';
+import { containedPreservedLongTextClass } from '@/lib/text-wrapping';
 
 export type TaskFeedbackType = 'accept' | 'revise' | 'abandon';
 
@@ -177,7 +178,7 @@ export function TaskAcceptanceControls({
               <CheckCircle2 className="h-4 w-4 text-[#657162]" />
               {pickAppText(locale, '已提交验收', 'Acceptance submitted')}: {humanFeedback(feedbackKind(recordedFeedback), locale)}
             </div>
-            {recordedFeedback.comment ? <p className="mt-2 whitespace-pre-wrap text-muted-foreground">{String(recordedFeedback.comment)}</p> : null}
+            {recordedFeedback.comment ? <p className={`mt-2 text-muted-foreground ${containedPreservedLongTextClass}`}>{String(recordedFeedback.comment)}</p> : null}
             {recordedFeedback.created_at ? (
               <p className="mt-2 text-xs text-muted-foreground">{formatTaskRuntimeTime(String(recordedFeedback.created_at), locale)}</p>
             ) : null}
@@ -229,7 +230,7 @@ export function TaskAcceptanceControls({
           disabled={Boolean(recordedFeedback) || isFinalized || !isReadyForAcceptance || Boolean(actionBusy)}
           placeholder={pickAppText(locale, '需要修改时写下具体要求；接受或放弃可选填说明。', 'Describe requested changes; notes are optional for accept or abandon.')}
         />
-        <div className="text-xs text-muted-foreground">
+        <div className={`text-xs text-muted-foreground ${containedPreservedLongTextClass}`}>
           {pickAppText(locale, '验收将记录到当前任务运行：', 'Acceptance will be recorded on run: ')}
           <span className="font-mono">{runId || '-'}</span>
           <span className="mx-1">·</span>

app-instance/frontend/components/task-detail/TaskTimelineCard.tsx

@@ -24,6 +24,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { pickAppText } from '@/lib/i18n/core';
 import { useAppI18n } from '@/lib/i18n/provider';
 import type { TaskRuntimeStatus } from '@/lib/task-runtime';
+import { containedJsonTextClass, containedLongTextClass, containedPreservedLongTextClass } from '@/lib/text-wrapping';
 import type { TaskTimelineCard as TaskTimelineCardView, TaskTimelineCardType } from '@/types';
 
 import { TaskAcceptanceControls, type TaskFeedbackItem, type TaskFeedbackType } from './TaskAcceptanceCard';
@@ -146,14 +147,14 @@ function TaskResultHistory({ card }: { card: TaskTimelineCardView }) {
   const versions = historyVersions(card.details);
 
   return (
-    <details className="mt-3 rounded-md border border-border bg-muted/20 px-3 py-2 text-sm">
+    <details className="mt-3 min-w-0 max-w-full overflow-hidden rounded-md border border-border bg-muted/20 px-3 py-2 text-sm">
       <summary className="flex cursor-pointer select-none items-center justify-between gap-3 font-medium">
         <span>{pickAppText(locale, '展开历史版本', 'Show previous versions')}</span>
         <ChevronDown className="h-4 w-4 text-muted-foreground" />
       </summary>
       <div className="mt-3 space-y-3">
         {versions.map((version, index) => (
-          <div key={String(version.runId || index)} className="rounded-md border border-border bg-background p-3">
+          <div key={String(version.runId || index)} className="min-w-0 max-w-full overflow-hidden rounded-md border border-border bg-background p-3">
             <div className="flex flex-wrap items-center justify-between gap-2">
               <div className="text-sm font-medium">
                 {pickAppText(locale, `第 ${index + 1} 轮结果`, `Version ${index + 1}`)}
@@ -162,9 +163,9 @@ function TaskResultHistory({ card }: { card: TaskTimelineCardView }) {
                 {renderHistoryStatus(version, locale)}
               </Badge>
             </div>
-            {version.result ? <p className="mt-2 whitespace-pre-wrap text-sm leading-6 text-muted-foreground">{String(version.result)}</p> : null}
+            {version.result ? <p className={`mt-2 text-sm leading-6 text-muted-foreground ${containedPreservedLongTextClass}`}>{String(version.result)}</p> : null}
             {version.comment ? (
-              <div className="mt-3 rounded-md bg-muted/35 p-2 text-xs text-muted-foreground">
+              <div className={`mt-3 rounded-md bg-muted/35 p-2 text-xs text-muted-foreground ${containedLongTextClass}`}>
                 {pickAppText(locale, '修改意见', 'Revision note')}: {String(version.comment)}
               </div>
             ) : null}
@@ -181,7 +182,7 @@ export function TaskTimelineCard({ card, resultAcceptance, reviewTargetId }: Pro
   const shouldRenderResultAcceptance = Boolean(card.type === 'result' && resultAcceptance && card.runId === resultAcceptance.runId);
 
   return (
-    <Card id={shouldRenderResultAcceptance ? reviewTargetId : undefined} className="rounded-md scroll-mt-28">
+    <Card id={shouldRenderResultAcceptance ? reviewTargetId : undefined} className="scroll-mt-28 overflow-hidden rounded-md">
       <CardContent className="p-4">
         <div className="flex gap-3">
           <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted">
@@ -197,7 +198,7 @@ export function TaskTimelineCard({ card, resultAcceptance, reviewTargetId }: Pro
                   </Badge>
                 </div>
                 <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground">
-                  {card.actorName ? <span>{card.actorName}</span> : null}
+                  {card.actorName ? <span className={containedLongTextClass}>{card.actorName}</span> : null}
                   <span>{formatTaskRuntimeTime(card.createdAt, locale)}</span>
                   {card.runId ? <span className="font-mono">{card.runId.slice(0, 8)}</span> : null}
                 </div>
@@ -213,7 +214,7 @@ export function TaskTimelineCard({ card, resultAcceptance, reviewTargetId }: Pro
               ) : null}
             </div>
 
-            {card.summary ? <p className="mt-3 whitespace-pre-wrap text-sm leading-6 text-muted-foreground">{card.summary}</p> : null}
+            {card.summary ? <p className={`mt-3 text-sm leading-6 text-muted-foreground ${containedPreservedLongTextClass}`}>{card.summary}</p> : null}
 
             {shouldRenderResultAcceptance ? (
               <div className="mt-4 border-t border-border pt-4">
@@ -222,11 +223,11 @@ export function TaskTimelineCard({ card, resultAcceptance, reviewTargetId }: Pro
             ) : null}
 
             {card.type === 'result_history' ? <TaskResultHistory card={card} /> : card.details ? (
-              <details className="mt-3 rounded-md border border-border bg-muted/20 px-3 py-2 text-xs">
+              <details className="mt-3 min-w-0 max-w-full overflow-hidden rounded-md border border-border bg-muted/20 px-3 py-2 text-xs">
                 <summary className="cursor-pointer select-none font-medium text-muted-foreground">
                   {pickAppText(locale, '详情 JSON', 'Details JSON')}
                 </summary>
-                <pre className="mt-2 max-h-72 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-5 text-muted-foreground">
+                <pre className={`mt-2 max-h-72 overflow-auto text-[11px] leading-5 text-muted-foreground ${containedJsonTextClass}`}>
                   {detailsJson(card.details)}
                 </pre>
               </details>